chooseBundle.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. <template>
  2. <view class="page-wrap">
  3. <!-- 搜索 -->
  4. <view class="page-header" id="bundle-item-header">
  5. <u-row gutter="16" justify="space-between">
  6. <u-col :span="isGobleSearch ? 9 : 12">
  7. <u-search placeholder="请输入关键字" v-model="queryWord" @focus="isGobleSearch=true" @custom="searchData" @search="searchData" :action-style="{'color': '#fff', 'font-size': '24upx', 'background-color': '#57a3f3', 'border-radius': '6upx', 'padding': '12upx 15upx'}"></u-search>
  8. </u-col>
  9. <u-col span="3" v-show="isGobleSearch">
  10. <view class="close-con">
  11. <text class="close-search" @click="isGobleSearch=false">关闭搜索</text>
  12. </view>
  13. </u-col>
  14. </u-row>
  15. </view>
  16. <view class="category-nav-wrap">
  17. <scroll-view class="nav-left" scroll-y :style="'height:'+screenHeight+'px'" v-show="!isGobleSearch">
  18. <view :class="['nav-left-item', nowInd == index ? 'active' : '' ] " v-for="(item, index) in typeList" :name="item.code" :key="item.id" @click="changeNav(item,index)">
  19. <text class="nav-left-item-name">{{item.dispName}}</text>
  20. </view>
  21. </scroll-view>
  22. <scroll-view class="nav-right" scroll-y :style="{'height': (screenHeight - 20)+'px', 'width': isGobleSearch ? '100%': '70%'}">
  23. <view class="nav-right-item" v-for="(item, index) in packageListData" :key="index" v-if="packageListData.length>0" >
  24. <text class="item-name">{{item.name}}</text>
  25. <view class="item-f-con">
  26. <text style="color: red;">¥{{item.price}}</text>
  27. <view class="handle-btns">
  28. <u-button class="item-btn" shape="circle" size="mini" @click="intoDetail(item.id)">查详情</u-button>
  29. <u-button class="item-btn" type="primary" shape="circle" size="mini" @click="buyBundle(item)">下 单</u-button>
  30. </view>
  31. </view>
  32. </view>
  33. <u-empty v-if="packageListData.length==0" style="height: auto;padding-top: 10vh;" :text="noDataText" mode="data"></u-empty>
  34. </scroll-view>
  35. </view>
  36. </view>
  37. </template>
  38. <script>
  39. import { getLookUpDatas } from '@/api/data'
  40. import { getBundleList } from '@/api/customerBundle'
  41. export default{
  42. name: 'chooseBundle',
  43. data(){
  44. return{
  45. noDataText: '数据加载中,请稍后...',
  46. typeList: [],
  47. screenHeight: '', // 屏幕可见高度
  48. packageListData: [], // 二级 数据
  49. nowInd: 0, // 当前选中导航下标
  50. queryWord: '',
  51. isGobleSearch: false, // 是否全局搜索
  52. clsId: '',
  53. }
  54. },
  55. methods: {
  56. // 获取套餐分类
  57. getBundleType(){
  58. getLookUpDatas({type:'BUNDLE_TYPE'}).then(res=>{
  59. if (res.status == 200) {
  60. this.typeList = res.data
  61. this.typeList.unshift({dispName:'全部',code: '',id: 0})
  62. }else{
  63. this.typeList = []
  64. }
  65. })
  66. },
  67. // 初始化数据
  68. initData (){
  69. const _this = this
  70. uni.showLoading({ title: '加载中...' })
  71. getBundleList({
  72. queryWord: this.queryWord,
  73. clsId: this.clsId
  74. }).then(res => {
  75. uni.hideLoading()
  76. if (res.status == 200) {
  77. _this.packageListData = res.data
  78. _this.noDataText = '暂无数据'
  79. } else {
  80. _this.packageListData = []
  81. _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试'
  82. }
  83. })
  84. },
  85. // 对比已选择项目
  86. hasChecked (row){
  87. let b = this.packageListData
  88. let has = b.findIndex(item => {
  89. if (item.customerBundleId){
  90. return false
  91. }
  92. return item.itemId && item.itemId == row.id
  93. })
  94. return has >= 0
  95. },
  96. // 切换一级菜单更改二级菜单数据
  97. changeNav(item,ind){
  98. this.nowInd = ind
  99. this.clsId = item.code
  100. this.initData()
  101. },
  102. // 下单
  103. buyBundle(item){
  104. uni.navigateTo({
  105. url: '/pages/workOrder/sellOrder/buyBundle?bundleId='+item.id+'&totalAmount='+item.price
  106. })
  107. },
  108. // 搜索,默认当前分类下得全部
  109. searchData (){
  110. if(this.isGobleSearch && this.queryWord == ''){
  111. this.packageListData = []
  112. return
  113. }
  114. this.clsId = ''
  115. this.nowInd = 0
  116. this.initData()
  117. // 隐藏键盘
  118. uni.hideKeyboard()
  119. },
  120. // 进入套餐详情
  121. intoDetail (id){
  122. uni.navigateTo({
  123. url: `/pages/workOrder/sellOrder/bundleDetail?id=${id}`
  124. })
  125. },
  126. // 设置滚动区域高度
  127. setScreenHeight() {
  128. const _this = this;
  129. setTimeout(() => {
  130. uni.getSystemInfo({
  131. success: res => {
  132. console.log(res)
  133. const query = uni.createSelectorQuery().in(this);
  134. query.select('#bundle-item-header').boundingClientRect(data => {
  135. console.log(data)
  136. // 设置滚动区域高度
  137. // app中无法获取windowTop,故用80替代
  138. _this.screenHeight = res.screenHeight - 70 - data.height - 45;
  139. }).exec();
  140. }
  141. });
  142. }, 100);
  143. }
  144. },
  145. mounted() {
  146. this.setScreenHeight()
  147. },
  148. onLoad() {
  149. this.getBundleType()
  150. this.initData()
  151. },
  152. watch: {
  153. // 全局搜索
  154. isGobleSearch(val) {
  155. if (val) {
  156. this.packageListData = [];
  157. } else {
  158. this.queryWord = '';
  159. this.initData();
  160. }
  161. }
  162. }
  163. }
  164. </script>
  165. <style scoped lang="scss">
  166. .page-wrap{
  167. width: 100%;
  168. height: 100vh;
  169. .page-header{
  170. padding: 20upx 30upx;
  171. border-bottom: 1upx solid #f2f2f2;
  172. background: #FFFFFF;
  173. .close-con{
  174. text-align: right;
  175. .close-search{
  176. display: inline-block;
  177. color: #515a6e;
  178. border: 2upx dashed #dcdee2;
  179. border-radius: 6upx;
  180. padding: 12upx 15upx;
  181. font-size: 24upx;
  182. }
  183. }
  184. }
  185. .category-nav-wrap{
  186. display: flex;
  187. justify-content: space-between;
  188. width: 100%;
  189. .nav-left{
  190. width: 30%;
  191. height: 100vh;
  192. border-right: 1upx solid #f2f2f2;
  193. background-color: #fff;
  194. .nav-left-item{
  195. color: #303133;
  196. border-right: 2upx solid #fff;
  197. padding: 24upx 20upx;
  198. background-color: #fff;
  199. position: relative;
  200. }
  201. .nav-left-item.active{
  202. color: #57a3f3;
  203. background: #f0faff;
  204. }
  205. .nav-left-item.active:after{
  206. content: '';
  207. display: block;
  208. width: 2px;
  209. position: absolute;
  210. top: 0;
  211. bottom: 0;
  212. right: 0;
  213. background: #2d8cf0;
  214. }
  215. }
  216. .nav-right{
  217. height: 100vh;
  218. padding: 20upx;
  219. box-sizing: border-box;
  220. .nav-right-item{
  221. padding: 20upx 30upx;
  222. border: 1upx solid #f2f2f2;
  223. background: #FFFFFF;
  224. margin: 6px 0;
  225. border-radius: 10px;
  226. display: flex;
  227. flex-direction: column;
  228. justify-content: space-between;
  229. .item-name{
  230. font-size: 28upx;
  231. margin-bottom: 20upx;
  232. }
  233. .item-f-con{
  234. display: flex;
  235. align-items: center;
  236. justify-content: space-between;
  237. }
  238. .item-btn{
  239. display: inline-block;
  240. margin-left: 20upx;
  241. width: 112upx;
  242. }
  243. .item-btn.btn-unselected{
  244. background-color: #2db7f5!important;;
  245. border-color: #2db7f5!important;;
  246. }
  247. .item-btn.btn-selected{
  248. background-color: #19be6b!important;;
  249. border-color: #19be6b!important;
  250. }
  251. }
  252. }
  253. }
  254. }
  255. </style>