index.vue 7.7 KB

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