user.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549
  1. <template>
  2. <view class="container user clearfix">
  3. <cm-custom :navbar-data="nvabarData" />
  4. <view class="user-section">
  5. <view class="header" :style="{
  6. height: CustomBar + 130 - StatusBar + 'px',
  7. paddingTop: CustomBar-20 + 'px',
  8. background: 'url(' + bgImgUrl + ')',
  9. backgroundSize: 'cover'
  10. }">
  11. <view class="header-main" v-if="hasLogin">
  12. <view class="header-user">
  13. <image src="https://static.caimei365.com/app/img/icon/default-head-new.png" mode=""></image>
  14. <view class="user-tips">协销人员</view>
  15. </view>
  16. <view class="user-h1">{{ name }}</view>
  17. </view>
  18. <!-- 订单 -->
  19. <view class="user-order">
  20. <view class="tab-title" @click="navigator('/pages/seller/order/order-list?listType=0')">
  21. <text class="cell-tit">我的订单</text> <text class="cell-more">全部订单</text>
  22. <text class="iconfont icon-xiayibu"></text>
  23. </view>
  24. <view class="order-section">
  25. <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=1')"
  26. hover-class="common-hover" :hover-stay-time="50">
  27. <view class="order-icon">
  28. <image src="https://static.caimei365.com/app/img/icon/order5@3x.png" mode=""></image>
  29. <text v-if="beforeConfirmCount > 0"
  30. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  31. :class="[beforeConfirmCount < 10 ? 'goleft' : '']">
  32. {{ beforeConfirmCount >= 99 ? '99+' : beforeConfirmCount }}
  33. </text>
  34. </view>
  35. <text class="order-t">待确认</text>
  36. </view>
  37. <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=2')"
  38. hover-class="common-hover" :hover-stay-time="50">
  39. <view class="order-icon">
  40. <image src="https://static.caimei365.com/app/img/icon/order1@3x.png" mode=""></image>
  41. <text v-if="beforePayCount > 0"
  42. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num "
  43. :class="[beforePayCount < 10 ? 'goleft' : '']">
  44. {{ beforePayCount >= 99 ? '99+' : beforePayCount }}
  45. </text>
  46. </view>
  47. <text class="order-t">待付款</text>
  48. </view>
  49. <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=3')"
  50. hover-class="common-hover" :hover-stay-time="50">
  51. <view class="order-icon">
  52. <image src="https://static.caimei365.com/app/img/icon/order2@3x.png" mode=""></image>
  53. <text v-if="beforeShipCount > 0"
  54. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  55. :class="[beforeShipCount < 10 ? 'goleft' : '']">
  56. {{ beforeShipCount >= 99 ? '99+' : beforeShipCount }}
  57. </text>
  58. </view>
  59. <text class="order-t">待发货</text>
  60. </view>
  61. <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=4')"
  62. hover-class="common-hover" :hover-stay-time="50">
  63. <view class="order-icon">
  64. <image src="https://static.caimei365.com/app/img/icon/order3@3x.png" mode=""></image>
  65. <text v-if="shippedCount > 0"
  66. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  67. :class="[shippedCount < 10 ? 'goleft' : '']">
  68. {{ shippedCount >= 99 ? '99+' : shippedCount }}
  69. </text>
  70. </view>
  71. <text class="order-t">已发货</text>
  72. </view>
  73. <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=5')"
  74. hover-class="common-hover" :hover-stay-time="50">
  75. <view class="order-icon">
  76. <image src="https://static.caimei365.com/app/img/icon/order4@3x.png" mode=""></image>
  77. <text v-if="refundsCount > 0"
  78. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  79. :class="[refundsCount < 10 ? 'goleft' : '']">
  80. {{ refundsCount >= 99 ? '99+' : refundsCount }}
  81. </text>
  82. </view>
  83. <text class="order-t">退货/款</text>
  84. </view>
  85. </view>
  86. </view>
  87. </view>
  88. <!-- 底部跳转 -->
  89. <view class="foot-list">
  90. <view class="list-cell-main clearfix">
  91. <view class="list-cell-navs" v-for="(item,index) in tabsList" :key="index"
  92. @click="navigator(item.path)">
  93. <view class="icon">
  94. <image class="icon-image" :src="item.icon" mode="widthFix"></image>
  95. </view>
  96. <view class="name">{{ item.name }}</view>
  97. </view>
  98. </view>
  99. <view class="list-cell-main clearfix">
  100. <view class="list-cell-navs" v-for="(item,index) in firstList" :key="index"
  101. @click="navigator(item.path)">
  102. <view class="icon">
  103. <image class="icon-image" :src="item.icon" mode="widthFix"></image>
  104. </view>
  105. <view class="name">{{ item.name }}</view>
  106. </view>
  107. </view>
  108. </view>
  109. </view>
  110. </view>
  111. </template>
  112. <script>
  113. import authorize from '@/common/config/authorize.js'
  114. import { mapState, mapMutations } from 'vuex'
  115. export default {
  116. data() {
  117. return {
  118. nvabarData: {
  119. //顶部自定义导航
  120. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  121. showSearch: 0,
  122. title: '', // 导航栏 中间的标题
  123. haveBack: false,
  124. textLeft: this.$store.state.isIphone,
  125. textColor: '#FFFFFF',
  126. bgColor: ''
  127. },
  128. CustomBar: this.CustomBar, // 顶部导航栏高度
  129. StatusBar: this.StatusBar,
  130. bgImgUrl: 'https://static.caimei365.com/app/img/bg/new_seller_cumres@2x.png',
  131. name: '',
  132. headpic: '',
  133. userId: '',
  134. serviceProviderId: '',
  135. skeletonShow: true,
  136. orderNum: 0, //未查看订单数量
  137. beforeConfirmCount: 0, //待确认角标
  138. beforePayCount: 0, //待付款角标
  139. beforeShipCount: 0, //待发货角标
  140. shippedCount: 0, //已发货角标
  141. refundsCount: '', //退货/款角标
  142. institutionsCont: 120,
  143. tabsList: [{
  144. name: '机构列表',
  145. path: '/pages/seller/club/list',
  146. icon: 'https://static.caimei365.com/app/img/icon/icon_seller_2@2x.png'
  147. },
  148. {
  149. name: '帮机构下单',
  150. path: '/pages/seller/club/club-list',
  151. icon: 'https://static.caimei365.com/app/img/icon/icon_seller_5@2x.png'
  152. },
  153. {
  154. name: '拉机构上线',
  155. path: '/pages/seller/login/register-select',
  156. icon: 'https://static.caimei365.com/app/img/icon/icon_seller_3@2x.png'
  157. },
  158. {
  159. name: '待注册机构',
  160. path: '/pages/seller/club/stayClub-list',
  161. icon: 'https://static.caimei365.com/app/img/icon/icon_seller_1@2x.png'
  162. },
  163. {
  164. name: '我的名片',
  165. path: '/pages/seller/remarks/business-card',
  166. icon: 'https://static.caimei365.com/app/img/icon/my-card.png'
  167. },
  168. {
  169. name: '机构看板',
  170. path: '/pages/seller/club/club-board',
  171. icon: 'https://static.caimei365.com/app/img/icon/visits.png'
  172. },
  173. {
  174. name: '客户咨询记录',
  175. path: '/pages/seller/remarks/list',
  176. icon: 'https://static.caimei365.com/app/img/icon/icon_seller_7@2x.png'
  177. },
  178. {
  179. name: '邀请运营人员',
  180. path: '/pages/seller/club/allClub-list',
  181. icon: 'https://static.caimei365.com/app/img/icon/icon_seller_4@2x.png'
  182. }
  183. ],
  184. firstList: [{
  185. name: '优惠券',
  186. path: '/pages/seller/cart/coupon',
  187. icon: 'https://static.caimei365.com/app/img/icon/icon_club_13@2x.png'
  188. },
  189. {
  190. name: '关于我们',
  191. path: '/pages/user/about/about',
  192. icon: 'https://static.caimei365.com/app/img/icon/icon_club_6@2x.png'
  193. },
  194. {
  195. name: '资质证书',
  196. path: '/pages/service/certificate-page',
  197. icon: 'https://static.caimei365.com/app/img/icon/icon_club_14@2x.png'
  198. }
  199. ],
  200. }
  201. },
  202. created() {
  203. this.initData()
  204. },
  205. computed: {
  206. ...mapState(['hasLogin', 'userInfo'])
  207. },
  208. methods: {
  209. ...mapMutations(['login', 'logout']),
  210. async initData() {
  211. const wechatCode = await authorize.getCode('weixin') // 根据微信的code获取用户登录状态:1已登录过 -1未登录过
  212. const getUserInfo = await authorize.getUserInfo('weixin')
  213. const params = { code: wechatCode, encryptedData: getUserInfo.encryptedData, iv: getUserInfo.iv }
  214. this.UserService.UserLoginAuthApplets(params).then(response => {
  215. if (response.code == 0 || response.code == 4) {
  216. this.isLogin = true
  217. this.userID = response.data.userId
  218. this.userIdentity = response.data.userIdentity
  219. this.clubStatus = response.data.clubStatus
  220. this.serviceProviderId = response.data.serviceProviderId
  221. this.$store.commit('updateStatus', response.data)
  222. this.login(response.data)
  223. uni.setStorageSync('token', response.data.token)
  224. uni.setStorageSync('unionId', response.data.unionId)
  225. uni.setStorageSync('spUserId', response.data.spUserId)
  226. this.getUserSellerHome()
  227. this.getOrderCount()
  228. } else {
  229. this.isLogin = false
  230. this.logout()
  231. uni.setStorageSync('unionId', response.data.unionId)
  232. this.$store.commit('updateStatus', response.data)
  233. this.$api.navigateTo('/pages/seller/login/login')
  234. }
  235. })
  236. },
  237. getUserSellerHome() {
  238. this.$api.getStorage().then(resolve => {
  239. this.userId = resolve.userId ? resolve.userId : 0
  240. this.SellerService.GetSellerHome({ userId: this.userId })
  241. .then(response => {
  242. let sellerData = response.data
  243. this.name = sellerData.linkMan ? sellerData.linkMan : '' //协销名称
  244. this.headpic = sellerData.logo //会所头像
  245. this.skeletonShow = false
  246. })
  247. .catch(error => {
  248. this.$util.msg(error.msg, 2000)
  249. })
  250. })
  251. },
  252. getOrderCount() {
  253. this.SellerService.GetOrderCount({ serviceProviderId: this.serviceProviderId }).then(response => {
  254. let data = response.data
  255. this.beforeConfirmCount = this.showBadge(data.confirmedCount) //待确认
  256. this.beforePayCount = this.showBadge(data.paymentCount) //待付款
  257. this.beforeShipCount = this.showBadge(data.waitShipmentsCount) //待发货
  258. this.shippedCount = this.showBadge(data.shipmentsCount) //已发货
  259. this.refundsCount = this.showBadge(data.salesReturnCount) //退货/款
  260. this.orderNum = this.showBadge(data.uncheckedOrderCount) //未查看订单数量
  261. })
  262. },
  263. navigator(url) {
  264. this.$api.navigateTo(url)
  265. },
  266. showBadge(n) {
  267. let num = ''
  268. if (n > 100) {
  269. num = 99
  270. } else {
  271. num = n
  272. }
  273. return num
  274. },
  275. onPullDownRefresh() {
  276. //下拉刷新
  277. this.initData()
  278. uni.stopPullDownRefresh()
  279. }
  280. }
  281. }
  282. </script>
  283. <style lang="scss">
  284. @import '@/uni.scss';
  285. .user {
  286. width: 100%;
  287. height: 100%;
  288. position: relative;
  289. background-color: #f7f7f7;
  290. padding-bottom: 120rpx;
  291. }
  292. .header {
  293. width: 100%;
  294. position: relative;
  295. background-size: cover;
  296. }
  297. .header-main {
  298. width: 100%;
  299. height: auto;
  300. box-sizing: border-box;
  301. display: flex;
  302. justify-content: center;
  303. flex-direction: column;
  304. align-items: center;
  305. .header-user{
  306. width: 100rpx;
  307. display: flex;
  308. justify-content: center;
  309. flex-direction: column;
  310. align-items: center;
  311. position: relative;
  312. image {
  313. width: 120rpx;
  314. height: 120rpx;
  315. border-radius: 50%;
  316. display: block;
  317. position: relative;
  318. }
  319. .user-tips{
  320. width: 100rpx;
  321. height: 30rpx;
  322. border: 1px solid #ffffff;
  323. background: #ffffff;
  324. border-radius: 16rpx;
  325. line-height: 30rpx;
  326. font-size: $font-size-20;
  327. text-align: center;
  328. color: #999;
  329. position: absolute;
  330. bottom: -20rpx;
  331. left: 0;
  332. z-index: 999;
  333. }
  334. }
  335. .user-h1 {
  336. font-size: $font-size-30;
  337. color: #ffffff;
  338. text-align: center;
  339. -o-text-overflow: ellipsis;
  340. text-overflow: ellipsis;
  341. display: -webkit-box;
  342. word-break: break-all;
  343. -webkit-box-orient: vertical;
  344. -webkit-line-clamp: 1;
  345. overflow: hidden;
  346. margin: 30rpx 0 0 0;
  347. }
  348. }
  349. .user-order {
  350. width: 654rpx;
  351. height: auto;
  352. padding: 0 24rpx;
  353. background-color: $bg-color;
  354. margin-bottom: 24rpx;
  355. position: absolute;
  356. bottom: -160rpx;
  357. left: 24rpx;
  358. border-radius: 20rpx;
  359. }
  360. .tab-title {
  361. font-size: $font-size-28;
  362. line-height: 80rpx;
  363. color: #333333;
  364. text-align: left;
  365. border-bottom: 1px solid #f8f8f8;
  366. position: relative;
  367. .cell-tit {
  368. font-size: $font-size-28;
  369. color: $text-color;
  370. }
  371. .cell-more {
  372. float: right;
  373. line-height: 80rpx;
  374. font-size: $font-size-24;
  375. color: #666666;
  376. padding-right: 30rpx;
  377. }
  378. .iconfont {
  379. width: 30rpx;
  380. height: 80rpx;
  381. line-height: 80rpx;
  382. text-align: center;
  383. position: absolute;
  384. right: 0;
  385. top: 0;
  386. display: block;
  387. font-size: $font-size-28;
  388. }
  389. }
  390. .order-section {
  391. display: flex;
  392. justify-content: space-around;
  393. align-items: center;
  394. flex-wrap: wrap;
  395. height: 99rpx;
  396. padding: 24rpx 0;
  397. }
  398. .order-item {
  399. flex: 1;
  400. display: flex;
  401. flex-direction: column;
  402. align-items: center;
  403. position: relative;
  404. &:last-child {
  405. margin-right: 0;
  406. }
  407. .order-icon {
  408. width: 52rpx;
  409. height: 52rpx;
  410. position: relative;
  411. image {
  412. width: 52rpx;
  413. height: 52rpx;
  414. }
  415. .icon-num {
  416. position: absolute;
  417. right: -24rpx;
  418. top: -9rpx;
  419. }
  420. .icon-num.goleft {
  421. right: -12rpx;
  422. }
  423. }
  424. .order-t {
  425. line-height: 50rpx;
  426. font-size: $font-size-24;
  427. color: $text-color;
  428. }
  429. }
  430. .foot-list {
  431. width: 100%;
  432. box-sizing: border-box;
  433. padding: 0 24rpx;
  434. padding-top: 160rpx;
  435. padding-bottom: 120rpx;
  436. }
  437. .list-cell-image {
  438. width: 100%;
  439. height: 168rpx;
  440. background: url(https://static.caimei365.com/app/meibohui/app/activity-small-banner@2x.png);
  441. background-size: cover;
  442. box-sizing: border-box;
  443. margin-bottom: 24rpx;
  444. .text {
  445. width: 100%;
  446. height: 100%;
  447. box-sizing: border-box;
  448. padding: 38rpx 56rpx;
  449. .h1 {
  450. line-height: 50rpx;
  451. font-size: $font-size-36;
  452. color: #ffffff;
  453. }
  454. .p {
  455. line-height: 34rpx;
  456. font-size: $font-size-30;
  457. color: #ffffff;
  458. }
  459. }
  460. }
  461. .list-cell-main {
  462. width: 100%;
  463. height: auto;
  464. margin-bottom: 24rpx;
  465. padding: 40rpx 10rpx 0 10rpx;
  466. background: $bg-color;
  467. border-radius: 20rpx;
  468. box-sizing: border-box;
  469. .list-cell-navs {
  470. width: 25%;
  471. height: auto;
  472. float: left;
  473. margin-bottom: 40rpx;
  474. .icon {
  475. width: 40rpx;
  476. height: 40rpx;
  477. margin: 0 auto;
  478. position: relative;
  479. margin-bottom: 10rpx;
  480. .icon-image {
  481. width: 40rpx;
  482. height: 40rpx;
  483. display: block;
  484. }
  485. }
  486. .name {
  487. width: 100%;
  488. height: 40rpx;
  489. line-height: 40rpx;
  490. text-align: center;
  491. font-size: $font-size-24;
  492. color: #999999;
  493. }
  494. }
  495. }
  496. .uni-badge--small {
  497. -webkit-transform: scale(0.8);
  498. -ms-transform: scale(0.8);
  499. transform: scale(0.8);
  500. -webkit-transform-origin: center center;
  501. -ms-transform-origin: center center;
  502. transform-origin: center center;
  503. }
  504. .uni-badge {
  505. font-family: 'Helvetica Neue', Helvetica, sans-serif;
  506. -webkit-box-sizing: border-box;
  507. box-sizing: border-box;
  508. font-size: 12px;
  509. line-height: 1;
  510. display: inline-block;
  511. padding: 3px 6px;
  512. color: #333;
  513. border-radius: 100px;
  514. background-color: #f1f1f1;
  515. }
  516. .uni-badge-error {
  517. color: #fff;
  518. background-color: #dd524d;
  519. }
  520. </style>