index.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. <template>
  2. <mobile-frame :frameStyle="frameStyle" @toPath="toPath">
  3. <view class="main">
  4. <view class="one">
  5. <view class="one_1" v-if="!user._id">
  6. <text class="iconfont icon-geren2" @click="toCommon('pages/login/index')"></text>
  7. <view class="name">未登录</view>
  8. </view>
  9. <view class="one_1" v-else>
  10. <image class="image" :src="user.icon&&user.icon.length>0?user.icon[0].url:''"></image>
  11. <view class="name">
  12. <text>{{user.name||'暂无名称'}}</text>
  13. <text>普通会员</text>
  14. </view>
  15. </view>
  16. <view class="one_2">
  17. <view class="one_2_1" @click="toCommon('pagesMy/collection/market')">
  18. <text v-if="user._id">{{market_num||0}}</text>
  19. <text>收藏的商品</text>
  20. </view>
  21. <text class="link">|</text>
  22. <view class="one_2_1" @click="toCommon('pagesMy/collection/shop')">
  23. <text v-if="user._id">{{shop_num||0}}</text>
  24. <text>收藏的店铺</text>
  25. </view>
  26. </view>
  27. </view>
  28. <view class="two">
  29. <view class="two_1">
  30. <view class="title">我的订单</view>
  31. <view class="title">
  32. <text @click="toOrder({route:'pagesMy/order/index',type:'order',status:'-0'})">全部订单</text>
  33. <text class="iconfont icon-jiantouyou"></text>
  34. </view>
  35. </view>
  36. <view class="two_2">
  37. <view class="orderList" v-for="(item, index) in orderList" :key="index" @click="toOrder(item)">
  38. <view class="icon">
  39. <text class="iconfont" :class="[item.icon]"></text>
  40. </view>
  41. <text class="title">{{item.title}}</text>
  42. </view>
  43. </view>
  44. <view class="two_1" v-for="(item, index) in menuList" :key="index" @click="toCommon(item.route)">
  45. <view class="title">{{item.title}}</view>
  46. <view class="title">
  47. <text v-if="user.id&&item.title=='我的积分'">{{user.integral||0}}分</text>
  48. <text v-if="item.title=='客服电话'"
  49. @tap="makePhone(serviceContactInfo.phone)">{{serviceContactInfo.phone||''}}</text>
  50. <text class="iconfont icon-jiantouyou"></text>
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. </mobile-frame>
  56. </template>
  57. <script>
  58. export default {
  59. data() {
  60. return {
  61. frameStyle: {
  62. useBar: true
  63. },
  64. // 用户信息
  65. user: {},
  66. // 客服信息
  67. serviceContactInfo: {},
  68. // 图标菜单
  69. orderList: [ //订单列表
  70. {
  71. icon: 'icon-daifukuan',
  72. title: '待付款',
  73. status: '0',
  74. type: 'order',
  75. route: "pagesMy/order/index",
  76. },
  77. {
  78. icon: 'icon-daishouhuo',
  79. title: '待发货',
  80. status: '1',
  81. type: 'order',
  82. route: "pagesMy/order/index",
  83. },
  84. {
  85. icon: 'icon-daipinglun',
  86. title: '待收货',
  87. status: '2',
  88. type: 'order',
  89. route: "pagesMy/order/index",
  90. },
  91. {
  92. icon: 'icon-daipinglun',
  93. title: '已收货',
  94. status: '3',
  95. type: 'order',
  96. route: "pagesMy/order/index",
  97. },
  98. {
  99. icon: 'icon-shouhoufuwuicon',
  100. title: '售后',
  101. type: 'after',
  102. route: "pagesMy/order/after",
  103. },
  104. ],
  105. // 菜单
  106. menuList: [{
  107. title: '我的优惠劵',
  108. route: 'pagesMy/discount/index'
  109. },
  110. {
  111. title: '我的积分',
  112. route: 'pagesMy/integral/index'
  113. },
  114. {
  115. title: '我的资产',
  116. route: 'pagesMy/assets/index'
  117. },
  118. {
  119. title: '我的拼团',
  120. route: 'pagesMy/dough/index'
  121. },
  122. {
  123. title: '我的收货地址',
  124. route: 'pagesMy/address/index'
  125. },
  126. {
  127. title: '账号管理',
  128. route: 'pagesMy/account/index'
  129. },
  130. {
  131. title: '客服电话',
  132. route: ''
  133. },
  134. ],
  135. // 收藏商品
  136. market_num: '',
  137. // 收藏店铺
  138. shop_num: ''
  139. };
  140. },
  141. onShow: async function() {
  142. const that = this;
  143. // 查询其他信息
  144. await that.searchOther();
  145. // 监听用户登录
  146. await that.watchLogin();
  147. },
  148. methods: {
  149. // 监听用户登录
  150. watchLogin() {
  151. const that = this;
  152. uni.getStorage({
  153. key: 'token',
  154. success: async (res) => {
  155. let user = that.$jwt(res.data);
  156. if (user && user._id) {
  157. let arr;
  158. // 查询用户信息
  159. arr = await that.$api(`/user/${user._id}`, 'GET');
  160. if (arr.errcode == '0') that.$set(that, `user`, arr.data);
  161. // 查询收藏商品
  162. arr = await that.$api(`/storeGoods`, 'GET', {
  163. customer: user._id
  164. })
  165. if (arr.errcode == '0') that.$set(that, `market_num`, arr.total);
  166. // 查询收藏店铺
  167. arr = await that.$api(`/storeShop`, 'GET', {
  168. customer: user._id
  169. })
  170. if (arr.errcode == '0') that.$set(that, `shop_num`, arr.total);
  171. }
  172. },
  173. fail: (err) => {}
  174. })
  175. },
  176. // 查询其他信息
  177. async searchOther() {
  178. const that = this;
  179. let res;
  180. res = await that.$api(`/serviceContact`, 'GET');
  181. if (res.errcode == '0' && res.total > 0) {
  182. that.$set(that, `serviceContactInfo`, res.data[0])
  183. }
  184. },
  185. // 底部菜单跳转
  186. toPath(e) {
  187. if (e && e.route && e.type == '0') {
  188. uni.redirectTo({
  189. url: `/${e.route}`
  190. })
  191. } else {
  192. uni.navigateTo({
  193. url: `/${e.route}`
  194. })
  195. }
  196. },
  197. // 公共跳转
  198. toCommon(e) {
  199. uni.getStorage({
  200. key: 'token',
  201. success: function(res) {
  202. uni.navigateTo({
  203. url: `/${e}`
  204. })
  205. },
  206. fail: function(err) {
  207. uni.navigateTo({
  208. url: `/pages/login/index`
  209. })
  210. }
  211. });
  212. },
  213. // 订单跳转页面
  214. toOrder(e) {
  215. const that = this;
  216. uni.getStorage({
  217. key: 'token',
  218. success: function(res) {
  219. if (e.type == 'order') {
  220. uni.navigateTo({
  221. url: `/${e.route}?status=${e.status}`
  222. })
  223. } else if (e.type == 'after') {
  224. uni.navigateTo({
  225. url: `/${e.route}`
  226. })
  227. }
  228. },
  229. fail: function(err) {
  230. uni.navigateTo({
  231. url: `/pages/login/index`
  232. })
  233. }
  234. });
  235. },
  236. // 拨打电话
  237. makePhone(e) {
  238. uni.makePhoneCall({
  239. phoneNumber: e
  240. });
  241. }
  242. }
  243. }
  244. </script>
  245. <style lang="scss">
  246. .main {
  247. display: flex;
  248. flex-direction: column;
  249. width: 100vw;
  250. height: 100vh;
  251. .one {
  252. text-align: center;
  253. padding: 4vw 0;
  254. background-color: var(--fFB1Color);
  255. color: var(--mainColor);
  256. .one_1 {
  257. margin: 0 0 5vw 0;
  258. image {
  259. width: 25vw;
  260. height: 25vw;
  261. border-radius: 25vw;
  262. }
  263. .iconfont {
  264. font-size: 80px;
  265. }
  266. .name {
  267. display: flex;
  268. justify-content: space-evenly;
  269. margin: 2vw 0;
  270. font-size: var(--font18Szie);
  271. }
  272. .image {
  273. border: 1px solid var(--f1Color);
  274. }
  275. }
  276. .one_2 {
  277. display: flex;
  278. flex-direction: row;
  279. justify-content: space-around;
  280. font-size: var(--font16Szie);
  281. .one_2_1 {
  282. display: flex;
  283. flex-direction: column;
  284. }
  285. .link {
  286. font-weight: bold;
  287. }
  288. }
  289. }
  290. .two {
  291. background-color: var(--f1Color);
  292. .two_1 {
  293. display: flex;
  294. justify-content: space-between;
  295. padding: 4vw;
  296. background-color: var(--mainColor);
  297. margin: 0 0 0.1vw 0;
  298. border-bottom: 1px solid var(--f1Color);
  299. .title {
  300. font-size: var(--font16Szie);
  301. text:first-child {
  302. margin: 0 1vw 0 0;
  303. }
  304. }
  305. .title:last-child {
  306. color: var(--f85Color);
  307. font-size: var(--font14Size);
  308. }
  309. }
  310. .two_1:nth-last-child(2) {
  311. margin: 0 0 2vw 0;
  312. }
  313. .two_1:nth-last-child(4) {
  314. margin: 0 0 2vw 0;
  315. }
  316. .two_2 {
  317. display: flex;
  318. justify-content: space-between;
  319. padding: 5vw;
  320. background-color: var(--mainColor);
  321. margin: 0 0 2vw 0;
  322. .orderList {
  323. text-align: center;
  324. .icon {
  325. .iconfont {
  326. font-size: 25px;
  327. }
  328. }
  329. .title {
  330. display: inline-block;
  331. margin: 2vw 0 0 0;
  332. font-size: var(--font12Size);
  333. }
  334. }
  335. }
  336. }
  337. }
  338. </style>