searchPage.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <view class="searchPage-wrap">
  3. <!-- 自定义标题 -->
  4. <u-navbar :is-back="false" :border-bottom="false" id="navbar">
  5. <view class="slot-wrap">
  6. <u-search class="left-icon" :focus="true" shape="square" placeholder="请输入门店名称搜索" v-model="keyword" action-text="取消" @change="change" @search="search" @custom="custom"></u-search>
  7. </view>
  8. </u-navbar>
  9. <!-- 列表数据 -->
  10. <view class="listData-con">
  11. <view class="listData-item" v-for="(item, index) in list" :key="index" @click="goPage(item)">
  12. <view class="listData-item-l">
  13. <u-icon class="listData-item-l-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
  14. <text class="listData-item-l-name">{{item.name}}</text>
  15. </view>
  16. <view class="listData-item-r">
  17. <u-icon class="listData-item-r-icon" name="yuanchengxundian" custom-prefix="xd-icon" size="40" color="#2b85e4"></u-icon>
  18. </view>
  19. </view>
  20. <u-empty :text="noDataText" img-width="120" v-if="list.length == 0 && status != 'loading'" :margin-top="400" mode="list"></u-empty>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. import { clzConfirm } from '@/libs/tools.js'
  26. import { findStoreList,findStoreVsDevice } from '@/api/store.js'
  27. import { queryCurrentTaskUsing } from '@/api/task.js'
  28. export default{
  29. data(){
  30. return{
  31. keyword: '', // 关键字
  32. list: [], // 数据列表
  33. noDataText: '暂无数据', // 数据异常提示
  34. status: 'loading', // 加载状态
  35. }
  36. },
  37. methods: {
  38. // 用户点击右侧控件时触发
  39. custom(val){
  40. // 关闭当前页面 返回列表页面
  41. uni.navigateBack()
  42. },
  43. // 输入框内容发生变化时触发
  44. change(val){
  45. // `debounce` 是一个限制操作频率的函数。防抖操作,在0.5秒内连续更改数据不进行查询
  46. this.$u.debounce(this.getStoreList, 500)
  47. },
  48. // 用户确定搜索时触发,用户按回车键,或者手机键盘右下角的"搜索"键时触发
  49. search(val){
  50. this.getStoreList()
  51. },
  52. getStoreList(){
  53. this.status = 'loading'
  54. findStoreList({ name: this.keyword }).then(res => {
  55. if(res.status == 200){
  56. this.list = res.data
  57. this.noDataText = '暂无数据' // 有列表数据时不显示,因此只用默认设置为无数据时所需显示的'暂无数据'即可
  58. }else{
  59. this.list = []
  60. this.noDataText = res.message
  61. }
  62. this.status = 'loadmore'
  63. })
  64. },
  65. // 开始巡店
  66. goPage(item){
  67. // 判断当前门店是否已绑定设备
  68. findStoreVsDevice({storeCode:item.code}).then(res=>{
  69. if(res.data.length){
  70. // 门店下的设备
  71. this.$u.vuex('vuex_storeVideoList',res.data)
  72. // 校验是否有历史巡店记录
  73. this.queryHasTaskUsing(item)
  74. }else{
  75. uni.showToast({
  76. icon: 'none',
  77. title: '当前门店没有绑定设备,暂时不能视频巡店'
  78. })
  79. }
  80. })
  81. },
  82. // 判断当前门店是否已绑定设备
  83. // type VIDEO_INSPECTION:视频巡店、SPOT_INSPECTION:现场巡店、POINT_INSPECTION:点检任务
  84. queryHasTaskUsing(item){
  85. queryCurrentTaskUsing({ storeId: item.id, type: 'VIDEO_INSPECTION' }).then(res => {
  86. if(res.status == 200){
  87. if(res.data){ // 为true有历史巡店记录
  88. clzConfirm({
  89. title: '提示',
  90. content: '有进行中的巡店任务,是否继续?',
  91. confirmText: '继续巡店',
  92. cancelText: '重新开始',
  93. buttons: ['继续巡店','重新开始'],
  94. success: function (result) {
  95. if (result.confirm || result.index==0) { // 继续巡店
  96. uni.navigateTo({
  97. url: '/pages/shopTour/shopTour?storeId=' + item.id + '&taskId='+ res.data + '&restart=0&types=video'
  98. })
  99. }else if(result.cancel || result.index==1){ // 重新开始
  100. uni.navigateTo({
  101. url: '/pages/shopTour/shopTour?storeId=' + item.id + '&taskId='+ res.data + '&restart=1&types=video'
  102. })
  103. }
  104. }
  105. })
  106. }else{
  107. uni.navigateTo({
  108. url: '/pages/shopTour/shopTour?storeId=' + item.id + '&types=video'
  109. })
  110. }
  111. }else{
  112. uni.showToast({icon: 'none', title: res.message})
  113. }
  114. })
  115. }
  116. }
  117. }
  118. </script>
  119. <style lang="scss" scoped>
  120. page {
  121. background-color: #f8f8f8;
  122. height: calc(100vh - 44px);
  123. }
  124. .searchPage-wrap{
  125. padding: 0 30upx;
  126. /* 自定义导航栏样式 */
  127. .slot-wrap {
  128. display: flex;
  129. align-items: center;
  130. /* 如果您想让slot内容占满整个导航栏的宽度 */
  131. flex: 1;
  132. /* 如果您想让slot内容与导航栏左右有空隙 */
  133. padding: 0 30rpx;
  134. font-size: 28upx;
  135. .left-icon {
  136. flex-grow: 1;
  137. font-size: 32upx;
  138. margin-right: 10upx;
  139. text-align: center;
  140. }
  141. .right-icon {
  142. padding-left: 50upx;
  143. }
  144. .uni-icons {
  145. margin-right: 10upx;
  146. }
  147. }
  148. .listData-con{
  149. .listData-item{
  150. display: flex;
  151. justify-content: space-between;
  152. align-items: center;
  153. padding: 20upx 0;
  154. border-bottom: 1upx dashed #f8f8f8;
  155. &-l{
  156. flex-grow: 1;
  157. padding-right: 10upx;
  158. position: relative;
  159. padding-left: 50upx;
  160. &-icon{
  161. vertical-align: sub;
  162. padding-right: 8upx;
  163. position: absolute;
  164. left: 0;
  165. top: -4upx;
  166. }
  167. }
  168. &-r{
  169. flex-shrink: 0;
  170. }
  171. }
  172. }
  173. }
  174. </style>