index.vue 8.3 KB

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