index.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <template>
  2. <web-view v-if="list.length==1" :src="src" bindload='pageLoad'></web-view>
  3. <view class="content" v-else>
  4. <view class="list-box">
  5. <swiper-item class="swiper-item">
  6. <scroll-view scroll-y class="scroll-box" @scrolltolower="onreachBottom">
  7. <view class="flex align_center justify_between item-box" v-for="item in list" :key="item.id" @click="toDetail(item)">
  8. <view class="l_box flex align_center">
  9. <view class="l_imgs">
  10. <u-image :src="getImg(item)" height="7em" border-radius="0.4em"></u-image>
  11. </view>
  12. <view class="flex_1" style="padding: 0 0.6em;">
  13. <view style="line-height: 1.5em;">
  14. <view v-if="item.blackDetectTypeName">{{item.blackDetectTypeName}}</view>
  15. <view v-if="item.redDetectTypeName">{{item.redDetectTypeName}}</view>
  16. <view v-if="item.yellowDetectTypeName">{{item.yellowDetectTypeName}}</view>
  17. </view>
  18. <view class="l_time flex align_center justify_between ">
  19. <view>{{item.store.name}}</view>
  20. <view>{{item.checkDate}}</view>
  21. </view>
  22. </view>
  23. </view>
  24. <view class="flex align_center r_box">
  25. <view>
  26. <u-icon name="arrow-right"></u-icon>
  27. </view>
  28. </view>
  29. </view>
  30. <view style="padding: 20upx;">
  31. <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
  32. <u-loadmore v-if="list.length||status=='loading'" :status="status" />
  33. </view>
  34. </scroll-view>
  35. </swiper-item>
  36. </swiper>
  37. </view>
  38. </view>
  39. </template>
  40. <script>
  41. import { checkApiQueryList } from '@/api/bundel.js'
  42. export default {
  43. components: {},
  44. data() {
  45. return {
  46. status: '',
  47. noDataText: '暂无数据',
  48. pageNo: 1,
  49. pageSize: 15,
  50. list: [],
  51. total: 0,
  52. userId: '',
  53. src: ''
  54. }
  55. },
  56. onLoad(opts) {
  57. console.log(opts)
  58. this.userId = opts.userId
  59. this.pageInit()
  60. },
  61. // 下拉刷新
  62. onPullDownRefresh(){
  63. this.pageInit()
  64. setTimeout(function () {
  65. uni.stopPullDownRefresh();
  66. }, 1000);
  67. },
  68. onShareAppMessage() {},
  69. methods: {
  70. pageInit(){
  71. // 获取扫描记录
  72. this.getbundle(1)
  73. },
  74. getImg(item){
  75. let url =item.customer.sex==1?'/static/def_boy@2x.png':'/static/def_gri@2x.png'
  76. if(item.checkResult){
  77. url = item.checkResult.imgPath+'mid/img_sun.jpg'
  78. }
  79. return url
  80. },
  81. // scroll-view到底部加载更多
  82. onreachBottom() {
  83. console.log(this.list.length < this.total)
  84. if(this.list.length < this.total){
  85. this.status = 'loading';
  86. this.pageNo += 1
  87. this.getbundle()
  88. }else{
  89. this.status = "nomore"
  90. }
  91. },
  92. // 查询列表
  93. getbundle (pageNo) {
  94. if (pageNo) {
  95. this.pageNo = pageNo
  96. }
  97. let params = {
  98. pageNo: this.pageNo,
  99. pageSize: this.pageSize,
  100. customerIdEnc: this.userId
  101. }
  102. this.status = "loading"
  103. checkApiQueryList(params).then(res => {
  104. if (res.status == 200) {
  105. if(this.pageNo>1){
  106. this.list = this.list.concat(res.data.list || [])
  107. }else{
  108. this.list = res.data.list || []
  109. }
  110. this.total = res.data.count || 0
  111. } else {
  112. this.list = []
  113. this.total = 0
  114. this.noDataText = res.message
  115. }
  116. if(this.list.length<this.total){
  117. this.status = "loadmore"
  118. }else{
  119. this.status = "nomore"
  120. }
  121. if(this.list.length==1){
  122. this.openDetail()
  123. }
  124. })
  125. },
  126. openDetail(){
  127. uni.showLoading({
  128. title: '加载中',
  129. })
  130. const baseUrl = getApp().globalData.baseUrl.replace('beauty-customer/','')
  131. const url = baseUrl.indexOf('.test.')>=0 ? 'https://md.test.baibaibai.net/' : 'https://md.baibaibai.net/'
  132. this.src = url+"checkReport/index/mini/"+this.list[0].id
  133. setTimeout(function() {
  134. uni.hideLoading()
  135. }, 5000);
  136. },
  137. toDetail(item){
  138. uni.navigateTo({
  139. url:"/pages/checkReport/detail?id="+item.id
  140. })
  141. }
  142. }
  143. }
  144. </script>
  145. <style lang="less">
  146. .content {
  147. margin: 0;
  148. padding: 0;
  149. height: 100vh;
  150. display: flex;
  151. flex-direction: column;
  152. .ml10{
  153. margin-left: 0.2em;
  154. }
  155. .list-box{
  156. flex-grow: 1;
  157. overflow: auto;
  158. position: relative;
  159. .swiper-item{
  160. width: 100%;
  161. height: 100%;
  162. overflow: hidden;
  163. .scroll-box{
  164. width: 100%;
  165. height: 100%;
  166. overflow: auto;
  167. .item-box{
  168. border-bottom: 1px solid #eee;
  169. padding: 1em;
  170. &:active{
  171. background: #f8f8f8;
  172. }
  173. .l_box{
  174. font-size: 1.1em;
  175. flex-grow: 1;
  176. }
  177. .l_imgs{
  178. width: 5em;
  179. }
  180. .l_time{
  181. color: #999;
  182. padding-top: 0.5em;
  183. }
  184. .r_box{
  185. color: #999;
  186. > view{
  187. padding: 0 0.1em;
  188. text-align: right;
  189. }
  190. }
  191. }
  192. .des{
  193. text-align: center;
  194. padding: 3em 0;
  195. color: #999;
  196. font-size: 0.9em;
  197. }
  198. }
  199. }
  200. }
  201. }
  202. </style>