videoShopTour.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <view class="videoShopTour-wrap">
  3. <u-sticky>
  4. <!-- 搜索方式 -->
  5. <u-grid :col="2" class="search-type-con" hover-class="none">
  6. <u-grid-item class="search-module" @click="goSearch">
  7. <u-icon class="search-icon" name="xundianguanli" custom-prefix="xd-icon" size="80" color="#2b85e4"></u-icon>
  8. <view class="search-txt">按门店名称查询</view>
  9. </u-grid-item>
  10. <u-grid-item class="search-module" @click="goOrgSearch">
  11. <u-icon class="search-icon" name="zuzhijigou" custom-prefix="xd-icon" size="80" color="#19be6b"></u-icon>
  12. <view class="search-txt">按组织机构查询</view>
  13. </u-grid-item>
  14. </u-grid>
  15. </u-sticky>
  16. <!-- 门店列表 -->
  17. <view class="list-con">
  18. <view class="list-tit">门店列表</view>
  19. <!-- 列表数据 -->
  20. <view class="listData-con">
  21. <view class="listData-item" v-for="(item, index) in list" :key="item.id" @click="goPage(item)">
  22. <view class="listData-item-l">
  23. <u-icon class="listData-item-l-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
  24. <text class="listData-item-l-name">{{item.name}}</text>
  25. </view>
  26. <view class="listData-item-r">
  27. <u-icon class="listData-item-r-icon" name="yuanchengxundian" custom-prefix="xd-icon" size="40" color="#2b85e4"></u-icon>
  28. </view>
  29. </view>
  30. <u-empty :text="noDataText" img-width="120" v-if="list.length == 0 && status != 'loading'" :margin-top="20" mode="list"></u-empty>
  31. <u-loadmore bg-color="#f8f8f8" v-if="list.length < total || status == 'loading'" :status="status" class="loadmore" />
  32. </view>
  33. </view>
  34. </view>
  35. </template>
  36. <script>
  37. import { clzConfirm } from '@/libs/tools.js'
  38. import { findStoreList } from '@/api/store.js'
  39. import { queryCurrentTaskUsing } from '@/api/task.js'
  40. export default{
  41. data(){
  42. return{
  43. noDataText: '暂无数据', // 数据异常提示
  44. status: 'loadmore', // 加载中状态
  45. list: [], // 数据列表
  46. total: 0, // 数据总条数
  47. pageNo: 1, // 当前页码
  48. pageSize: 10, // 每页条数
  49. }
  50. },
  51. onLoad() {
  52. this.init()
  53. },
  54. methods: {
  55. // 初始
  56. init(){
  57. this.status = 'loading'
  58. // 获取门店列表
  59. findStoreList().then(res => {
  60. if(res.status == 200){
  61. this.list = res.data.list
  62. this.total = this.list.length
  63. }else{
  64. this.list = []
  65. this.total = 0
  66. }
  67. this.status = 'loadmore'
  68. })
  69. },
  70. // 按门店名称查询
  71. goSearch(){
  72. uni.navigateTo({
  73. url: '/pages/searchPage/searchPage'
  74. })
  75. },
  76. // 按组织机构查询
  77. goOrgSearch(){
  78. uni.navigateTo({
  79. url: '/pages/organization/organization'
  80. })
  81. },
  82. // 开始巡店
  83. goPage(item){
  84. // 校验是否有历史巡店记录
  85. queryCurrentTaskUsing({ storeId: item.tenantId }).then(res => {
  86. console.log(res)
  87. if(res.status == 200){
  88. if(res.data.state){ // 为true有历史巡店记录
  89. clzConfirm({
  90. title: '提示',
  91. content: '有进行中的巡店任务,是否继续?',
  92. confirmText: '继续巡店',
  93. cancelText: '重新开始',
  94. buttons: ['继续巡店','重新开始'],
  95. success: function (result) {
  96. if (result.confirm || result.index==0) { // 继续巡店
  97. uni.navigateTo({
  98. url: '/pages/shopTour/shopTour?storeId=' + item.tenantId + '&taskId='+ res.data.taskId + '&restart=0&types=video'
  99. })
  100. }else{ // 重新开始
  101. uni.navigateTo({
  102. url: '/pages/shopTour/shopTour?storeId=' + item.tenantId + '&taskId='+ res.data.taskId + '&restart=1&types=video'
  103. })
  104. }
  105. }
  106. })
  107. }else{
  108. uni.navigateTo({
  109. url: '/pages/shopTour/shopTour?storeId=' + item.tenantId + '&types=video'
  110. })
  111. }
  112. }else{
  113. uni.showToast({icon: 'none', title: res.message})
  114. }
  115. })
  116. }
  117. }
  118. }
  119. </script>
  120. <style lang="scss" scoped>
  121. page {
  122. background-color: #f8f8f8;
  123. height: calc(100vh - 44px);
  124. }
  125. .videoShopTour-wrap{
  126. // 搜索方式
  127. .search-type-con{
  128. .search-module{
  129. .search-txt{
  130. font-size: 26upx;
  131. padding-top: 6upx;
  132. }
  133. }
  134. }
  135. // 门店列表
  136. .list-con{
  137. background-color: #fff;
  138. margin-top: 20upx;
  139. .list-tit{
  140. padding: 20upx 30upx;
  141. border-bottom: 1upx solid #f8f8f8;
  142. }
  143. .listData-con{
  144. padding: 0 30upx;
  145. .listData-item{
  146. display: flex;
  147. justify-content: space-between;
  148. align-items: center;
  149. padding: 20upx 0;
  150. border-bottom: 1upx dashed #f8f8f8;
  151. &:active{
  152. background: #F8F8F8;
  153. }
  154. &-l{
  155. flex-grow: 1;
  156. padding-right: 10upx;
  157. position: relative;
  158. padding-left: 50upx;
  159. &-icon{
  160. vertical-align: sub;
  161. padding-right: 8upx;
  162. position: absolute;
  163. left: 0;
  164. top: -4upx;
  165. }
  166. }
  167. &-r{
  168. flex-shrink: 0;
  169. }
  170. }
  171. }
  172. }
  173. }
  174. </style>