user.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639
  1. <template>
  2. <view class="container user clearfix">
  3. <cm-custom :navbar-data='nvabarData'></cm-custom>
  4. <view class="user-section">
  5. <view class="header" :style="{height:(CustomBar+90)-StatusBar+'px',paddingTop:CustomBar+'px',background:'url('+ bgImgUrl +')',backgroundSize:'cover'}">
  6. <view class="header-main" v-if="hasLogin">
  7. <view class="header-text">
  8. <view class="user-item">
  9. <text class="u-h1">{{name}}</text>
  10. </view>
  11. <view class="user-item">
  12. <text class="u-tips">协销人员</text>
  13. </view>
  14. </view>
  15. <view class="header-icon" @click="TestZHIboFn()"><image src="https://static.caimei365.com/app/img/icon/icon-seller@3x.png" mode=""></image></view>
  16. </view>
  17. <!-- 订单 -->
  18. <view class="user-order">
  19. <view class="tab-title" @click="navigator('/pages/seller/order/order-list?listType=0')">
  20. <text class="cell-tit">我的订单</text>
  21. <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')" hover-class="common-hover" :hover-stay-time="50">
  26. <view class="order-icon">
  27. <image src="https://static.caimei365.com/app/img/icon/order5@3x.png" mode=""></image>
  28. <text v-if="beforeConfirmCount>0"
  29. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  30. :class="[beforeConfirmCount < 10 ? 'goleft':'']">
  31. {{beforeConfirmCount >= 99? '99+' : beforeConfirmCount}}
  32. </text>
  33. </view>
  34. <text class="order-t">待确认</text>
  35. </view>
  36. <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=2')" hover-class="common-hover" :hover-stay-time="50">
  37. <view class="order-icon">
  38. <image src="https://static.caimei365.com/app/img/icon/order1@3x.png" mode=""></image>
  39. <text v-if="beforePayCount >0"
  40. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num "
  41. :class="[beforePayCount < 10 ? 'goleft':'']">
  42. {{beforePayCount >= 99? '99+' : beforePayCount}}
  43. </text>
  44. </view>
  45. <text class="order-t">待付款</text>
  46. </view>
  47. <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=3')" hover-class="common-hover" :hover-stay-time="50">
  48. <view class="order-icon">
  49. <image src="https://static.caimei365.com/app/img/icon/order2@3x.png" mode=""></image>
  50. <text v-if="beforeShipCount >0"
  51. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  52. :class="[beforeShipCount < 10 ? 'goleft':'']">
  53. {{beforeShipCount >= 99? '99+' : beforeShipCount}}
  54. </text>
  55. </view>
  56. <text class="order-t">待发货</text>
  57. </view>
  58. <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=4')" hover-class="common-hover" :hover-stay-time="50">
  59. <view class="order-icon">
  60. <image src="https://static.caimei365.com/app/img/icon/order3@3x.png" mode=""></image>
  61. <text v-if="shippedCount>0"
  62. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  63. :class="[shippedCount < 10 ? 'goleft':'']">
  64. {{shippedCount >= 99? '99+' : shippedCount}}
  65. </text>
  66. </view>
  67. <text class="order-t">已发货</text>
  68. </view>
  69. <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=5')" hover-class="common-hover" :hover-stay-time="50">
  70. <view class="order-icon">
  71. <image src="https://static.caimei365.com/app/img/icon/order4@3x.png" mode=""></image>
  72. <text v-if="refundsCount >0"
  73. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  74. :class="[refundsCount < 10 ? 'goleft':'']">
  75. {{refundsCount >= 99 ? '99+' : refundsCount}}
  76. </text>
  77. </view>
  78. <text class="order-t">退货/款</text>
  79. </view>
  80. </view>
  81. </view>
  82. </view>
  83. <!-- 底部跳转 -->
  84. <view class="foot-list">
  85. <!-- <view class="list-cell-image" @click="navigator('/pages/user/coupon/coupon-activity')">
  86. <view class="text">
  87. <view class="h1">美博会</view>
  88. <view class="p">大额好券等你来领~</view>
  89. </view>
  90. </view> -->
  91. <view class="list-cell-item">
  92. <view class="list-cell" v-for="(item, index) in firstList" :key="index" @click="navigator(item.path)" hover-class="cell-hover" :hover-stay-time="50">
  93. <view class="cell-icon">
  94. <image class="cell-icon-image" :src="item.icon" mode=""></image>
  95. </view>
  96. <text class="cell-tit">{{item.name}}</text>
  97. <text v-if="index == 1 && orderNum >0"
  98. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
  99. {{orderNum == 99 ? '99+' : orderNum}}
  100. </text>
  101. <text class="cell-more iconfont icon-xiayibu"></text>
  102. </view>
  103. </view>
  104. <view class="list-cell-item">
  105. <view class="list-cell" v-for="(item, index) in twoList" :key="index" @click="navigator(item.path)" hover-class="cell-hover" :hover-stay-time="50">
  106. <view class="cell-icon">
  107. <image class="cell-icon-image" :src="item.icon" mode=""></image>
  108. </view>
  109. <text class="cell-tit">{{item.name}}</text>
  110. <text class="cell-more iconfont icon-xiayibu"></text>
  111. </view>
  112. </view>
  113. </view>
  114. </view>
  115. </view>
  116. </template>
  117. <script>
  118. import authorize from '@/common/config/authorize.js'
  119. import uniBadge from '@/components/uni-badge/uni-badge.vue'
  120. import { mapState,mapMutations } from 'vuex'
  121. export default{
  122. components: {
  123. uniBadge,
  124. },
  125. data() {
  126. return{
  127. nvabarData: {//顶部自定义导航
  128. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  129. showSearch: 0,
  130. title: '账户中心', // 导航栏 中间的标题
  131. haveBack:false,
  132. textLeft:this.$store.state.isIphone,
  133. textColor:'#FFFFFF',
  134. bgColor:''
  135. },
  136. CustomBar:this.CustomBar,// 顶部导航栏高度
  137. StatusBar: this.StatusBar,
  138. bgImgUrl:'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z_i6ASHobAAhl69yz3SM078.png',
  139. name:'',
  140. headpic:'',
  141. userId:'',
  142. serviceProviderId: '',
  143. skeletonShow:true,
  144. orderNum:0,//未查看订单数量
  145. beforeConfirmCount:0,//待确认角标
  146. beforePayCount:0, //待付款角标
  147. beforeShipCount:0, //待发货角标
  148. shippedCount:0, //已发货角标
  149. refundsCount:'', //退货/款角标
  150. institutionsCont:120,
  151. firstList:[
  152. {
  153. name:'待注册机构',
  154. path:'/pages/seller/club/stayClub-list',
  155. icon:'https://static.caimei365.com/app/img/icon/icon_seller_1@2x.png',
  156. },
  157. {
  158. name:'机构列表',
  159. path:'/pages/seller/club/list',
  160. icon:'https://static.caimei365.com/app/img/icon/icon_seller_2@2x.png',
  161. },
  162. {
  163. name:'拉机构上线',
  164. path:'/pages/seller/login/register-select',
  165. icon:'https://static.caimei365.com/app/img/icon/icon_seller_3@2x.png',
  166. },
  167. {
  168. name:'邀请运营人员',
  169. path:'/pages/seller/club/allClub-list',
  170. icon:'https://static.caimei365.com/app/img/icon/icon_seller_4@2x.png',
  171. }
  172. ],
  173. twoList:[
  174. {
  175. name:'帮机构下单',
  176. path:'/pages/seller/club/club-list',
  177. icon:'https://static.caimei365.com/app/img/icon/icon_seller_5@2x.png',
  178. },
  179. {
  180. name:'发布二手商品',
  181. path:'/pages/second/form/form-seller',
  182. icon:'https://static.caimei365.com/app/img/icon/icon_seller_6@2x.png',
  183. },
  184. {
  185. name:'客户咨询记录',
  186. path:'/pages/seller/remarks/list',
  187. icon:'https://static.caimei365.com/app/img/icon/icon_seller_7@2x.png',
  188. }
  189. ]
  190. }
  191. },
  192. created() {
  193. this.initData()
  194. },
  195. computed: {
  196. ...mapState(['hasLogin','userInfo'])
  197. },
  198. methods:{
  199. ...mapMutations(['login','logout']),
  200. async initData(){
  201. const wechatCode = await authorize.getCode('weixin')// 根据微信的code获取用户登录状态:1已登录过 -1未登录过
  202. const getUserInfo = await authorize.getUserInfo('weixin')
  203. const params = { code:wechatCode,encryptedData:getUserInfo.encryptedData,iv:getUserInfo.iv }
  204. this.UserService.UserLoginAuthApplets(params).then(response =>{
  205. if(response.code == 0 || response.code == 4){
  206. this.isLogin = true
  207. this.userID = response.data.userId
  208. this.userIdentity = response.data.userIdentity
  209. this.clubStatus = response.data.clubStatus
  210. this.serviceProviderId = response.data.serviceProviderId
  211. this.$store.commit('updateStatus',response.data)
  212. this.login(response.data)
  213. uni.setStorageSync('token',response.data.token)
  214. uni.setStorageSync('unionId',response.data.unionId)
  215. this.getUserSellerHome()
  216. this.getOrderCount()
  217. }else{
  218. this.isLogin = false
  219. this.logout()
  220. uni.setStorageSync('unionId',response.data.unionId)
  221. this.$store.commit('updateStatus',response.data)
  222. this.$api.navigateTo('/pages/seller/login/login')
  223. }
  224. })
  225. },
  226. getUserSellerHome(){
  227. this.$api.getStorage().then((resolve) =>{
  228. this.userId = resolve.userId ? resolve.userId : 0
  229. this.SellerService.GetSellerHome({userId:this.userId}).then(response =>{
  230. let sellerData = response.data
  231. this.name = sellerData.linkMan ?sellerData.linkMan : '' //协销名称
  232. this.headpic = sellerData.logo //会所头像
  233. this.skeletonShow = false
  234. }).catch(error =>{
  235. this.$util.msg(error.msg,2000)
  236. })
  237. })
  238. },
  239. getOrderCount(){
  240. this.SellerService.GetOrderCount({serviceProviderId: this.serviceProviderId}).then(response=>{
  241. let data = response.data
  242. this.beforeConfirmCount = this.showBadge(data.confirmedCount)//待确认
  243. this.beforePayCount = this.showBadge(data.paymentCount)//待付款
  244. this.beforeShipCount = this.showBadge(data.waitShipmentsCount)//待发货
  245. this.shippedCount = this.showBadge(data.shipmentsCount)//已发货
  246. this.refundsCount = this.showBadge(data.salesReturnCount)//退货/款
  247. this.orderNum = this.showBadge(data.uncheckedOrderCount)//未查看订单数量
  248. })
  249. },
  250. TestZHIboFn(){//测试跳转直播小程序
  251. // uni.navigateToMiniProgram({
  252. // appId: 'wx92d650b253f8f2e3',
  253. // path: '/pages/index/index',
  254. // extraData: {
  255. // 'data1': 'test'
  256. // },
  257. // envVersion: 'develop',
  258. // success(res) {
  259. // // 打开成功
  260. // console.log(res)
  261. // }
  262. // })
  263. },
  264. navigator(url){
  265. this.$api.navigateTo(url)
  266. },
  267. showBadge(n){
  268. let num =''
  269. if(n>100){num = 99}else{num = n}
  270. return num
  271. },
  272. onPullDownRefresh() {//下拉刷新
  273. this.initData()
  274. uni.stopPullDownRefresh()
  275. }
  276. }
  277. }
  278. </script>
  279. <style lang="scss">
  280. @import "@/uni.scss";
  281. page{
  282. background-color: #F7F7F7;
  283. }
  284. .user{
  285. width: 100%;
  286. height: 100%;
  287. position:relative;
  288. background: rgba(247, 247, 247, 1);
  289. }
  290. .header{
  291. width: 100%;
  292. position: relative;
  293. background-size: cover;
  294. }
  295. .header-main{
  296. width: 702rpx;
  297. height: 130rpx;
  298. padding: 12rpx 24rpx;
  299. display: flex;
  300. .header-text{
  301. flex: 8;
  302. display: flex;
  303. flex-direction: column;
  304. .user-item{
  305. flex: 1;
  306. height: 64rpx;
  307. line-height: 64rpx;
  308. .u-tips{
  309. display: inline-block;
  310. float: left;
  311. width: 98rpx;
  312. height: 30rpx;
  313. border: 1px solid #FFFFFF;
  314. background: linear-gradient(128deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
  315. border-radius: 16rpx;
  316. line-height: 30rpx;
  317. font-size: $font-size-20;
  318. text-align: center;
  319. color: #FFFFFF;
  320. margin-left: 10rpx;
  321. }
  322. .u-viptips{
  323. display: inline-block;
  324. float: left;
  325. width: 98rpx;
  326. height: 30rpx;
  327. border: 1px solid #FFE600;
  328. background: linear-gradient(128deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
  329. border-radius: 16rpx;
  330. line-height: 30rpx;
  331. font-size: $font-size-20;
  332. text-align: center;
  333. color: #FFE600;
  334. margin-left: 10rpx;
  335. margin-top: 17rpx;
  336. }
  337. .u-h1{
  338. float: left;
  339. font-size: $font-size-36;
  340. color: #FFFFFF;
  341. text-align: left;
  342. -o-text-overflow: ellipsis;
  343. text-overflow: ellipsis;
  344. display: -webkit-box;
  345. word-break: break-all;
  346. -webkit-box-orient: vertical;
  347. -webkit-line-clamp: 1;
  348. overflow: hidden;
  349. }
  350. .u-p{
  351. font-size: $font-size-24;
  352. line-height: 64rpx;
  353. color: #FFFFFF;
  354. text-align: left;
  355. }
  356. }
  357. }
  358. .header-icon{
  359. flex: 2;
  360. margin-right: 20rpx;
  361. image{
  362. float: right;
  363. width: 128rpx;
  364. height: 128rpx;
  365. border-radius: 100%;
  366. border: 2rpx solid #FFFFFF;
  367. }
  368. }
  369. }
  370. .header-main-none{
  371. width: 702rpx;
  372. height: 152rpx;
  373. padding: 0 24rpx;
  374. display: flex;
  375. .header-text{
  376. flex: 8;
  377. display: flex;
  378. flex-direction: column;
  379. .user-item{
  380. flex: 1;
  381. height: 50rpx;
  382. line-height: 50rpx;
  383. .line{
  384. margin: 0 10rpx;
  385. }
  386. .u-h1{
  387. float: left;
  388. font-size: $font-size-36;
  389. color: #FFFFFF;
  390. text-align: left;
  391. -o-text-overflow: ellipsis;
  392. text-overflow: ellipsis;
  393. display: -webkit-box;
  394. word-break: break-all;
  395. -webkit-box-orient: vertical;
  396. -webkit-line-clamp: 1;
  397. overflow: hidden;
  398. }
  399. .u-p{
  400. font-size: $font-size-24;
  401. line-height: 50rpx;
  402. color: #EFEFEF;
  403. text-align: left;
  404. }
  405. .u-btn{
  406. width: 160rpx;
  407. height: 40rpx;
  408. background: rgba(255,255,255,.5);
  409. border-radius: 5rpx;
  410. line-height: 40rpx;
  411. text-align: center;
  412. font-size: $font-size-24;
  413. color: #FFFFFF;
  414. display: block;
  415. margin-top: 5rpx;
  416. padding-left: 6rpx;
  417. .icon-xiangyouhuabeifen{
  418. font-size: $font-size-24;
  419. }
  420. }
  421. }
  422. }
  423. .header-icon{
  424. flex: 2;
  425. display: flex;
  426. margin-right: 20rpx;
  427. align-items: center;
  428. justify-content: center;
  429. image{
  430. float: right;
  431. width: 128rpx;
  432. height: 128rpx;
  433. border-radius: 100%;
  434. border: 2rpx solid #FFFFFF;
  435. }
  436. }
  437. }
  438. .user-order{
  439. width: 654rpx;
  440. height: auto;
  441. padding: 0 24rpx;
  442. background-color: $bg-color;
  443. margin-bottom: 24rpx;
  444. position: absolute;
  445. bottom: -170rpx;
  446. left: 24rpx;
  447. border-radius: 20rpx;
  448. }
  449. .tab-title{
  450. font-size: $font-size-28;
  451. line-height: 80rpx;
  452. color: #333333;
  453. text-align:left;
  454. border-bottom: 1px solid #F8F8F8;
  455. position: relative;
  456. .cell-tit{
  457. font-size: $font-size-28;
  458. color: $text-color;
  459. }
  460. .cell-more{
  461. float: right;
  462. line-height: 80rpx;
  463. font-size: $font-size-24;
  464. color: #666666;
  465. padding-right: 30rpx;
  466. }
  467. .iconfont{
  468. width: 30rpx;
  469. height: 80rpx;
  470. line-height: 80rpx;
  471. text-align: center;
  472. position: absolute;
  473. right: 0;
  474. top: 0;
  475. display: block;
  476. font-size: $font-size-28;
  477. }
  478. }
  479. .order-section{
  480. display: flex;
  481. justify-content: space-around;
  482. align-items: center;
  483. flex-wrap:wrap;
  484. height: 99rpx;
  485. padding: 24rpx 0;
  486. }
  487. .order-item{
  488. flex:1;
  489. display: flex;
  490. flex-direction: column;
  491. align-items: center;
  492. position: relative;
  493. &:last-child{
  494. margin-right: 0;
  495. }
  496. .order-icon{
  497. width: 52rpx;
  498. height: 52rpx;
  499. position: relative;
  500. image{
  501. width: 52rpx;
  502. height: 52rpx;
  503. }
  504. .icon-num{
  505. position: absolute;
  506. right:-24rpx;
  507. top: -9rpx;
  508. }
  509. .icon-num.goleft{
  510. right: -12rpx;
  511. }
  512. }
  513. .order-t{
  514. line-height: 50rpx;
  515. font-size: $font-size-24;
  516. color: $text-color;
  517. }
  518. }
  519. .foot-list{
  520. width: 702rpx;
  521. padding: 0 24rpx;
  522. padding-top: 168rpx;
  523. }
  524. .list-cell-image{
  525. width: 100%;
  526. height: 168rpx;
  527. background: url(https://static.caimei365.com/app/meibohui/app/activity-small-banner@2x.png);
  528. background-size: cover;
  529. box-sizing: border-box;
  530. margin-bottom: 24rpx;
  531. .text{
  532. width: 100%;
  533. height: 100%;
  534. box-sizing: border-box;
  535. padding:38rpx 56rpx;
  536. .h1{
  537. line-height: 50rpx;
  538. font-size: $font-size-36;
  539. color: #FFFFFF;
  540. }
  541. .p{
  542. line-height: 34rpx;
  543. font-size: $font-size-30;
  544. color: #FFFFFF;
  545. }
  546. }
  547. }
  548. .list-cell-item{
  549. width: 654rpx;
  550. height: auto;
  551. margin-bottom: 24rpx;
  552. padding:0 24rpx;
  553. background: $bg-color;
  554. border-radius: 20rpx;
  555. }
  556. .list-cell{
  557. width: 100%;
  558. line-height:100rpx;
  559. position:relative;
  560. background: $bg-color;
  561. border-bottom: 1px solid #EBEBEB;
  562. height: 100rpx;
  563. &:last-child{
  564. border-bottom: none;
  565. }
  566. &.cell-hover{
  567. background:#fafafa;
  568. }
  569. .cell-icon{
  570. width: 60rpx;
  571. height: 100rpx;
  572. text-align: center;
  573. box-sizing: border-box;
  574. padding: 32rpx 12rpx;
  575. float: left;
  576. .cell-icon-image{
  577. width: 36rpx;
  578. height: 36rpx;
  579. display: block;
  580. }
  581. }
  582. .cell-more{
  583. width: 60rpx;
  584. height: 100rpx;
  585. line-height: 100rpx;
  586. text-align: right;
  587. position: absolute;
  588. right: 0;
  589. top: 0;
  590. font-size:$font-size-28;
  591. color:#666666;
  592. .txt{
  593. color: #FB4343;
  594. padding-right: 10rpx;
  595. }
  596. }
  597. .cell-tit{
  598. width: 465rpx;
  599. display: block;
  600. float: left;
  601. font-size: $font-size-28;
  602. color: #666666;
  603. margin-right:10rpx;
  604. }
  605. .cell-tip{
  606. font-size: $font-size-28;
  607. color: $text-color;
  608. }
  609. }
  610. .list-cell.last{
  611. border-bottom: none;
  612. }
  613. .uni-badge--small {
  614. -webkit-transform: scale(.8);
  615. -ms-transform: scale(.8);
  616. transform: scale(.8);
  617. -webkit-transform-origin: center center;
  618. -ms-transform-origin: center center;
  619. transform-origin: center center;
  620. }
  621. .uni-badge {
  622. font-family: 'Helvetica Neue', Helvetica, sans-serif;
  623. -webkit-box-sizing: border-box;
  624. box-sizing: border-box;
  625. font-size: 12px;
  626. line-height: 1;
  627. display: inline-block;
  628. padding: 3px 6px;
  629. color: #333;
  630. border-radius: 100px;
  631. background-color: #f1f1f1;
  632. }
  633. .uni-badge-error {
  634. color: #fff;
  635. background-color: #dd524d;
  636. }
  637. </style>