report.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <template>
  2. <view class="content">
  3. <!-- 用户信息 -->
  4. <userBar :isLogin="hasLogin" :userInfo="userInfo" @toUser="toUser"></userBar>
  5. <!-- 套餐记录 -->
  6. <view class="list-box">
  7. <swiper-item class="swiper-item">
  8. <scroll-view scroll-y class="scroll-box" @scrolltolower="onreachBottom">
  9. <view class="flex align_center justify_between item-box" v-for="item in list" :key="item.id" @click="toDetail(item)">
  10. <view class="l_box flex align_center">
  11. <view class="l_imgs">
  12. <u-image height="7em" border-radius="0.4em"></u-image>
  13. </view>
  14. <view class="flex_1" style="padding: 0 0.6em;">
  15. <view style="line-height: 1.5em;">{{item.bundleName}}</view>
  16. <view class="l_time flex align_center justify_between ">
  17. <view>{{item.store.name}}</view>
  18. <view>{{item.createDate.split(' ')[0]}}</view>
  19. </view>
  20. </view>
  21. </view>
  22. <view class="flex align_center r_box">
  23. <view>
  24. <u-icon name="arrow-right"></u-icon>
  25. </view>
  26. </view>
  27. </view>
  28. <view style="padding: 20upx;" v-if="hasLogin">
  29. <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>
  30. <u-loadmore v-if="list.length||status=='loading'" :status="status" />
  31. </view>
  32. <view v-if="!hasLogin" class="des">请登录后查看诊断报告</view>
  33. </scroll-view>
  34. </swiper-item>
  35. </swiper>
  36. </view>
  37. <uni-popup ref="openModal" type="center">
  38. <uni-popup-dialog content="确定退出登录吗?" @confirm="onOk" title="提示"></uni-popup-dialog>
  39. </uni-popup>
  40. </view>
  41. </template>
  42. <script>
  43. import {
  44. mapState,
  45. mapMutations,
  46. } from 'vuex'
  47. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  48. import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
  49. import { listLookUp, getLookUpDatas } from '@/api/data.js';
  50. import { getCustomerBundle } from '@/api/bundel.js'
  51. import userBar from '../index/userBar.vue'
  52. export default {
  53. components: {
  54. uniPopup,uniPopupDialog,userBar
  55. },
  56. data() {
  57. return {
  58. status: '',
  59. noDataText: '暂无数据',
  60. pageNo: 1,
  61. pageSize: 15,
  62. list: [],
  63. total: 0,
  64. }
  65. },
  66. computed: {
  67. ...mapState(['hasLogin']),
  68. userInfo(){
  69. return this.$store.state.vuex_userInfo
  70. }
  71. },
  72. onReady() {
  73. // 检测是否登录
  74. this.$store.dispatch('checkLogin',()=>{
  75. this.pageInit()
  76. })
  77. },
  78. onLoad() {
  79. // 获取数据字典
  80. // this.getListLookUp();
  81. // 获取支付,收款方式
  82. // this.getLookUpList('PAY_PROCUCT_TYPE', 'vuex_paymentTypeList');
  83. // 刷新首页数据
  84. uni.$on("refashHome",()=>{
  85. this.pageInit()
  86. })
  87. },
  88. onUnload() {
  89. uni.$off('refashHome')
  90. },
  91. // 下拉刷新
  92. onPullDownRefresh(){
  93. this.pageInit()
  94. setTimeout(function () {
  95. uni.stopPullDownRefresh();
  96. }, 1000);
  97. },
  98. onShareAppMessage() {},
  99. methods: {
  100. pageInit(){
  101. if(this.hasLogin){
  102. // 获取扫描记录
  103. this.getbundle(1)
  104. }
  105. },
  106. // 获取数据字典
  107. getListLookUp() {
  108. const _this = this;
  109. listLookUp({ pageNo: 1, pageSize: 1000 }).then(res => {
  110. if (res.status == 200) {
  111. _this.$store.state.vuex_allLookUp = res.data;
  112. }
  113. });
  114. },
  115. // 或某一项字典列表,参数code
  116. getLookUpList(code, vuexKey) {
  117. getLookUpDatas({ type: code }).then(res => {
  118. if (res.status == 200) {
  119. this.$store.state[vuexKey] = res.data || [];
  120. }
  121. });
  122. },
  123. // scroll-view到底部加载更多
  124. onreachBottom() {
  125. console.log(this.list.length < this.total)
  126. if(this.list.length < this.total){
  127. this.status = 'loading';
  128. this.pageNo += 1
  129. this.getbundle()
  130. }else{
  131. this.status = "nomore"
  132. }
  133. },
  134. // 查询列表
  135. getbundle (pageNo) {
  136. if (pageNo) {
  137. this.pageNo = pageNo
  138. }
  139. let params = {
  140. pageNo: this.pageNo,
  141. pageSize: this.pageSize,
  142. }
  143. this.status = "loading"
  144. getCustomerBundle(params).then(res => {
  145. console.log(params,res,'+++++++++++')
  146. if (res.status == 200) {
  147. if(this.pageNo>1){
  148. this.list = this.list.concat(res.data.list || [])
  149. }else{
  150. this.list = res.data.list || []
  151. }
  152. this.total = res.data.count || 0
  153. } else {
  154. this.list = []
  155. this.total = 0
  156. this.noDataText = res.message
  157. }
  158. if(this.list.length<this.total){
  159. this.status = "loadmore"
  160. }else{
  161. this.status = "nomore"
  162. }
  163. })
  164. },
  165. toUser(){
  166. if(!this.hasLogin){
  167. uni.navigateTo({
  168. url:"/pages/login/login"
  169. })
  170. }else{
  171. // 退出登录
  172. this.$refs.openModal.open()
  173. }
  174. },
  175. onOk(){
  176. this.$refs.openModal.close()
  177. this.$store.dispatch('userLogout');
  178. },
  179. toDetail(item){
  180. uni.navigateTo({
  181. url:"/pages/h5Page/index?src=https://md.test.baibaibai.net/checkReport/index/mini/316546464645"
  182. })
  183. }
  184. }
  185. }
  186. </script>
  187. <style lang="less">
  188. .content {
  189. margin: 0;
  190. padding: 0;
  191. height: 100vh;
  192. display: flex;
  193. flex-direction: column;
  194. .ml10{
  195. margin-left: 0.2em;
  196. }
  197. .list-box{
  198. flex-grow: 1;
  199. overflow: auto;
  200. position: relative;
  201. .swiper-item{
  202. width: 100%;
  203. height: 100%;
  204. overflow: hidden;
  205. .scroll-box{
  206. width: 100%;
  207. height: 100%;
  208. overflow: auto;
  209. .item-box{
  210. border-bottom: 1px solid #eee;
  211. padding: 1em;
  212. &:active{
  213. background: #f8f8f8;
  214. }
  215. .l_box{
  216. font-size: 1.1em;
  217. flex-grow: 1;
  218. }
  219. .l_imgs{
  220. width: 5em;
  221. }
  222. .l_time{
  223. color: #999;
  224. padding-top: 0.5em;
  225. }
  226. .r_box{
  227. color: #999;
  228. > view{
  229. padding: 0 0.1em;
  230. text-align: right;
  231. }
  232. }
  233. }
  234. .des{
  235. text-align: center;
  236. padding: 3em 0;
  237. color: #999;
  238. font-size: 0.9em;
  239. }
  240. }
  241. }
  242. }
  243. }
  244. </style>