index.vue 6.6 KB

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