index.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  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: gold;">
  16. <view>{{userInfo.name}}</view>
  17. <view>{{userInfo.mobile}}</view>
  18. </view>
  19. </view>
  20. </view>
  21. <view>
  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. <view class="scroll-box">
  29. <view class="flex align_center justify_between item-box" v-for="item in 26" @click="toDetail(item)">
  30. <view class="l_box">99会员礼包</view>
  31. <view class="flex align_center r_box">
  32. <view>
  33. <view>2022-05-28</view>
  34. <view>高新天佑店</view>
  35. </view>
  36. <view>
  37. <u-icon name="arrow-right"></u-icon>
  38. </view>
  39. </view>
  40. </view>
  41. <!-- <view style="padding: 20upx;">
  42. <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="vinList.length==0 && status!='loading'" mode="list"></u-empty>
  43. <u-loadmore v-if="status=='loading'" :status="status" />
  44. </view> -->
  45. <view class="des">请登录后查看套餐记录</view>
  46. </view>
  47. </view>
  48. <uni-popup ref="openModal" type="center">
  49. <uni-popup-dialog content="确定退出登录吗?" @confirm="onOk" title="提示"></uni-popup-dialog>
  50. </uni-popup>
  51. </view>
  52. </template>
  53. <script>
  54. import {
  55. mapState,
  56. mapMutations,
  57. } from 'vuex'
  58. import uniPopup from '@/components/uni-popup/uni-popup.vue'
  59. import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
  60. import { listLookUp, getLookUpDatas } from '@/api/data.js';
  61. export default {
  62. components: {
  63. uniPopup,uniPopupDialog
  64. },
  65. data() {
  66. return {
  67. status: 'loading',
  68. noDataText: '暂无数据',
  69. vinList: [],
  70. }
  71. },
  72. computed: {
  73. ...mapState(['hasLogin']),
  74. userInfo(){
  75. return this.$store.state.vuex_userInfo
  76. }
  77. },
  78. onReady() {
  79. // 检测是否登录
  80. this.$store.dispatch('checkLogin',()=>{
  81. this.pageInit()
  82. })
  83. },
  84. onLoad() {
  85. // 获取数据字典
  86. // this.getListLookUp();
  87. // 获取支付,收款方式
  88. // this.getLookUpList('PAY_PROCUCT_TYPE', 'vuex_paymentTypeList');
  89. // 刷新首页数据
  90. uni.$on("refashHome",()=>{
  91. this.pageInit()
  92. })
  93. },
  94. onUnload() {
  95. uni.$off('refashHome')
  96. },
  97. // 下拉刷新
  98. onPullDownRefresh(){
  99. this.pageInit()
  100. setTimeout(function () {
  101. uni.stopPullDownRefresh();
  102. }, 1000);
  103. },
  104. onShareAppMessage() {},
  105. methods: {
  106. pageInit(){
  107. if(this.hasLogin){
  108. // 获取扫描记录
  109. this.getVinLog()
  110. }
  111. },
  112. // 获取数据字典
  113. getListLookUp() {
  114. const _this = this;
  115. listLookUp({ pageNo: 1, pageSize: 1000 }).then(res => {
  116. if (res.status == 200) {
  117. _this.$store.state.vuex_allLookUp = res.data;
  118. }
  119. });
  120. },
  121. // 或某一项字典列表,参数code
  122. getLookUpList(code, vuexKey) {
  123. getLookUpDatas({ type: code }).then(res => {
  124. if (res.status == 200) {
  125. this.$store.state[vuexKey] = res.data || [];
  126. }
  127. });
  128. },
  129. getVinLog(){
  130. this.vinList = []
  131. this.status = "loading"
  132. getScanVinLogList({pageNo:1,pageSize:10}).then(res => {
  133. this.vinList = res.data.list || []
  134. this.vinList = this.vinList.filter(item => item.vinCode)
  135. this.status = 'nomore'
  136. })
  137. },
  138. toUser(){
  139. if(!this.hasLogin){
  140. uni.navigateTo({
  141. url:"/pages/login/login"
  142. })
  143. }else{
  144. // 退出登录
  145. this.$refs.openModal.open()
  146. }
  147. },
  148. onOk(){
  149. this.$refs.openModal.close()
  150. this.$store.dispatch('userLogout');
  151. setTimeout(function(){
  152. uni.redirectTo({
  153. url: '/pages/login/login'
  154. });
  155. },300)
  156. },
  157. toDetail(item){
  158. uni.navigateTo({
  159. url:"/pages/bundelDetail/index"
  160. })
  161. }
  162. }
  163. }
  164. </script>
  165. <style lang="less">
  166. .content {
  167. margin: 0;
  168. padding: 0;
  169. height: 100vh;
  170. display: flex;
  171. flex-direction: column;
  172. .userCard{
  173. padding:1.2em 1em;
  174. background-image: linear-gradient(#58c4c4 30%,#65e2e2);
  175. .userCard-info{
  176. > view{
  177. &:last-child{
  178. margin-left: 0.5em;
  179. >view{
  180. padding: 0.2em;
  181. }
  182. }
  183. }
  184. }
  185. .user-photo{
  186. display: block;
  187. width: 120rpx;
  188. height: 120rpx;
  189. border-radius: 50%;
  190. overflow: hidden;
  191. }
  192. }
  193. .ml10{
  194. margin-left: 0.2em;
  195. }
  196. .list-box{
  197. flex-grow: 1;
  198. overflow: auto;
  199. .scroll-box{
  200. height: 100%;
  201. .item-box{
  202. border-bottom: 1px solid #eee;
  203. padding: 1em;
  204. &:active{
  205. background: #f8f8f8;
  206. }
  207. .l_box{
  208. font-size: 1.1em;
  209. flex-grow: 1;
  210. }
  211. .r_box{
  212. color: #999;
  213. > view{
  214. padding: 0 0.1em;
  215. }
  216. }
  217. }
  218. .des{
  219. text-align: center;
  220. padding: 3em 0;
  221. color: #999;
  222. font-size: 0.9em;
  223. }
  224. }
  225. }
  226. }
  227. </style>