user.vue 16 KB

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