user.vue 22 KB

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