index.vue 8.4 KB

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