user.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672
  1. <template>
  2. <view class="container user clearfix">
  3. <cm-custom :navbar-data="nvabarData"></cm-custom>
  4. <view class="user-section">
  5. <view
  6. class="header"
  7. :style="{
  8. height: CustomBar + 90 - StatusBar + 'px',
  9. paddingTop: CustomBar + 'px',
  10. background: 'url(' + bgImgUrl + ')',
  11. backgroundSize: 'cover'
  12. }"
  13. >
  14. <view class="header-main" v-if="hasLogin">
  15. <view class="header-icon"><image :src="headpic ? headpic : defalutLogo" mode=""></image></view>
  16. <view class="header-text">
  17. <view class="user-item">
  18. <text class="u-h1">{{ name }}</text> <text class="u-tips">供应商</text>
  19. </view>
  20. <view class="user-item" @click="navigator('/pages/supplier/user/my-shop?shopId=' + shopId)">
  21. <text class="u-shop">进入店铺</text><text class="iconfont icon-jinrudianpu"></text>
  22. </view>
  23. </view>
  24. </view>
  25. <!-- 订单 -->
  26. <view class="user-order">
  27. <view class="tab-title"> <text class="cell-tit">我的商品</text> </view>
  28. <view class="order-section">
  29. <view
  30. class="order-item"
  31. @click="navigator('/pages/supplier/user/my-product?listType=0')"
  32. hover-class="common-hover"
  33. :hover-stay-time="50"
  34. >
  35. <view class="order-icon">
  36. <text class="iconfont icon-quanbushangpin"></text>
  37. <text
  38. v-if="allNum > 0"
  39. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  40. :class="[allNum < 10 ? 'goleft' : '']"
  41. >
  42. {{ allNum | BadgeType }}
  43. </text>
  44. </view>
  45. <text class="order-t">全部商品</text>
  46. </view>
  47. <view
  48. class="order-item"
  49. @click="navigator('/pages/supplier/user/my-product?listType=1')"
  50. hover-class="common-hover"
  51. :hover-stay-time="50"
  52. >
  53. <view class="order-icon">
  54. <text class="iconfont icon-yishangjia"></text>
  55. <text
  56. v-if="upNum > 0"
  57. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num "
  58. :class="[upNum < 10 ? 'goleft' : '']"
  59. >
  60. {{ upNum | BadgeType }}
  61. </text>
  62. </view>
  63. <text class="order-t">已上架</text>
  64. </view>
  65. <view
  66. class="order-item"
  67. @click="navigator('/pages/supplier/user/my-product?listType=2')"
  68. hover-class="common-hover"
  69. :hover-stay-time="50"
  70. >
  71. <view class="order-icon">
  72. <text class="iconfont icon-yixiajia"></text>
  73. <text
  74. v-if="downNum > 0"
  75. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  76. :class="[downNum < 10 ? 'goleft' : '']"
  77. >
  78. {{ downNum | BadgeType }}
  79. </text>
  80. </view>
  81. <text class="order-t">已下架</text>
  82. </view>
  83. </view>
  84. </view>
  85. </view>
  86. <!-- 底部跳转 -->
  87. <view class="foot-list">
  88. <view class="list-cell-item">
  89. <view
  90. class="list-cell"
  91. hover-class="cell-hover"
  92. :hover-stay-time="50"
  93. @click="navigator('/pages/supplier/order/order-list')"
  94. >
  95. <view class="cell-icon">
  96. <image
  97. class="cell-icon-image"
  98. src="https://static.caimei365.com/app/img/icon/icon_club_11@2x.png"
  99. mode=""
  100. ></image>
  101. </view>
  102. <text class="cell-tit">我的订单</text> <text class="cell-more iconfont icon-xiayibu"></text>
  103. <text class="cell-more"></text>
  104. </view>
  105. </view>
  106. <view class="list-cell-item">
  107. <view
  108. class="list-cell"
  109. v-for="(item, index) in firstList"
  110. :key="index"
  111. @click="navigator(item.path)"
  112. hover-class="cell-hover"
  113. :hover-stay-time="50"
  114. >
  115. <view class="cell-icon">
  116. <image class="cell-icon-image" :src="item.icon" mode=""></image>
  117. </view>
  118. <text class="cell-tit">{{ item.name }}</text>
  119. <text class="cell-more iconfont icon-xiayibu"></text>
  120. </view>
  121. </view>
  122. <view class="list-cell-item">
  123. <view class="list-cell" hover-class="cell-hover" :hover-stay-time="50">
  124. <view class="cell-icon">
  125. <image
  126. class="cell-icon-image"
  127. src="https://static.caimei365.com/app/img/icon/icon_club_5@2x.png"
  128. mode=""
  129. ></image>
  130. </view>
  131. <text class="cell-tit cont">联系我们</text>
  132. <text class="cell-more cont" @click="toPhone">{{ contactNumber }}</text>
  133. </view>
  134. <view
  135. class="list-cell"
  136. @click="this.$api.navigateTo('/pages/user/about/about')"
  137. hover-class="cell-hover"
  138. :hover-stay-time="50"
  139. >
  140. <view class="cell-icon">
  141. <image
  142. class="cell-icon-image"
  143. src="https://static.caimei365.com/app/img/icon/icon_club_6@2x.png"
  144. mode=""
  145. ></image>
  146. </view>
  147. <text class="cell-tit">关于我们</text> <text class="cell-more iconfont icon-xiayibu"></text>
  148. </view>
  149. <view
  150. class="list-cell last"
  151. @click="this.$api.navigateTo('/pages/h5/article/page?linkType=99')"
  152. hover-class="cell-hover"
  153. :hover-stay-time="50"
  154. >
  155. <view class="cell-icon">
  156. <image
  157. class="cell-icon-image"
  158. src="https://static.caimei365.com/app/img/icon/icon_club_7@2x.png"
  159. mode=""
  160. ></image>
  161. </view>
  162. <text class="cell-tit">帮助中心</text> <text class="cell-more iconfont icon-xiayibu"></text>
  163. </view>
  164. </view>
  165. </view>
  166. </view>
  167. <!-- 弹窗提示 -->
  168. <tui-modal
  169. :show="modal"
  170. @click="handleClick"
  171. @cancel="hideMobel"
  172. :content="contentModalText"
  173. :button="modalButton"
  174. color="#666666"
  175. :padding="'20rpx 20rpx'"
  176. :size="30"
  177. shape="circle"
  178. :maskClosable="false"
  179. >
  180. </tui-modal>
  181. </view>
  182. </template>
  183. <script>
  184. import authorize from '@/common/config/authorize.js'
  185. import { mapState, mapMutations } from 'vuex'
  186. export default {
  187. data() {
  188. return {
  189. nvabarData: {
  190. //顶部自定义导航
  191. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  192. showSearch: 0,
  193. title: '账户中心', // 导航栏 中间的标题
  194. haveBack: false,
  195. textLeft: this.$store.state.isIphone,
  196. textColor: '#FFFFFF',
  197. bgColor: ''
  198. },
  199. CustomBar: this.CustomBar, // 顶部导航栏高度
  200. StatusBar: this.StatusBar,
  201. defalutLogo: 'https://static.caimei365.com/app/img/icon/logo@3x.png',
  202. bgImgUrl: 'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z_i6ASHobAAhl69yz3SM078.png',
  203. name: '这里是供应商的名字',
  204. headpic: '',
  205. userId: '',
  206. shopId: 0,
  207. skeletonShow: true,
  208. contactNumber: 0,
  209. orderNum: 0, //机构自主下单订单数
  210. allNum: 0, //全部商品
  211. upNum: 0, //已上架
  212. downNum: 0, //已下架
  213. firstList: [
  214. {
  215. name: '运营人员管理',
  216. path: '/pages/supplier/user/operator/list',
  217. icon: 'https://static.caimei365.com/app/img/icon/icon_club_1@2x.png'
  218. },
  219. {
  220. name: '我的资料',
  221. path: '/pages/supplier/user/information',
  222. icon: 'https://static.caimei365.com/app/img/icon/icon_club_12@2x.png'
  223. },
  224. {
  225. name: '账户设置',
  226. path: '/pages/supplier/user/setting/setting',
  227. icon: 'https://static.caimei365.com/app/img/icon/icon_club_4@2x.png'
  228. }
  229. ],
  230. modal:false,
  231. contentModalText:'您的供应商账号上架费将于30日后到期,到期后将无法发布和编辑商品,同时也会影响到其他采美提供的支持服务。请联系采美工作人员进行续费,联系电话0755-22907771或15338851365',
  232. modalButton:[
  233. {
  234. text: '确认',
  235. customStyle: {
  236. color: '#fff',
  237. bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
  238. },
  239. plain: false
  240. }
  241. ]
  242. }
  243. },
  244. created() {
  245. this.initData()
  246. },
  247. filters: {
  248. NumFormat: function(text) {
  249. //处理金额
  250. return Number(text).toFixed(2)
  251. },
  252. BadgeType(n) {
  253. let num = ''
  254. if (n > 99) {
  255. num = '99+'
  256. } else {
  257. num = n
  258. }
  259. return num
  260. }
  261. },
  262. computed: {
  263. ...mapState(['hasLogin', 'userInfo'])
  264. },
  265. methods: {
  266. ...mapMutations(['login', 'logout']),
  267. async initData() {
  268. const wechatCode = await authorize.getCode('weixin') // 根据微信的code获取用户登录状态:1已登录过 -1未登录过
  269. const getUserInfo = await authorize.getUserInfo('weixin')
  270. const params = { code: wechatCode, encryptedData: getUserInfo.encryptedData, iv: getUserInfo.iv }
  271. this.UserService.UserLoginAuthApplets(params).then(response => {
  272. if (response.code == 0 || response.code == 4) {
  273. this.isLogin = true
  274. this.userID = response.data.userId
  275. this.userIdentity = response.data.userIdentity
  276. this.clubStatus = response.data.clubStatus
  277. this.$store.commit('updateStatus', response.data)
  278. this.login(response.data)
  279. uni.setStorageSync('token', response.data.token)
  280. uni.setStorageSync('unionId', response.data.unionId)
  281. this.GetHomePageData()
  282. this.getPhone()
  283. } else {
  284. this.isLogin = false
  285. this.logout()
  286. uni.setStorageSync('unionId', response.data.unionId)
  287. this.$store.commit('updateStatus', response.data)
  288. }
  289. })
  290. },
  291. GetHomePageData() {
  292. this.$api.getStorage().then(resolve => {
  293. this.userId = resolve.userId ? resolve.userId : 0
  294. this.ShopService.GetHomePageData({ userId: this.userId })
  295. .then(response => {
  296. let data = response.data
  297. this.name = data.shop.name //协销名称
  298. this.shopId = data.shop.shopId //供应商ID
  299. this.headpic = data.shop.logo //会所头像
  300. this.allNum = data.allNum //全部商品
  301. this.upNum = data.upNum //已上架
  302. this.downNum = data.downNum //已下架
  303. this.modal = data.constraint === "0" ? true : false
  304. this.skeletonShow = false
  305. })
  306. .catch(error => {
  307. this.$util.msg(error.msg, 2000)
  308. })
  309. })
  310. },
  311. getPhone() {
  312. this.CommonService.QueryAfterSale()
  313. .then(response => {
  314. this.contactNumber = response.data.contactNumber
  315. })
  316. .catch(error => {
  317. this.$util.msg(error.msg, 2000)
  318. })
  319. },
  320. toPhone() {
  321. uni.makePhoneCall({
  322. phoneNumber: this.contactNumber //仅为示例
  323. })
  324. },
  325. navigator(url) {
  326. this.$api.navigateTo(url)
  327. },
  328. handleClick(){
  329. this.modal = false
  330. },
  331. hideMobel(){
  332. this.modal = false
  333. }
  334. }
  335. }
  336. </script>
  337. <style lang="scss">
  338. @import '@/uni.scss';
  339. page {
  340. background-color: #f7f7f7;
  341. }
  342. .user {
  343. width: 100%;
  344. height: 100%;
  345. position: relative;
  346. background: rgba(247, 247, 247, 1);
  347. }
  348. .header {
  349. width: 100%;
  350. position: relative;
  351. background-size: cover;
  352. }
  353. .header-main {
  354. width: 702rpx;
  355. height: 130rpx;
  356. padding: 12rpx 24rpx;
  357. display: flex;
  358. .header-text {
  359. flex: 8;
  360. display: flex;
  361. flex-direction: column;
  362. padding: 15rpx 0;
  363. .user-item {
  364. flex: 1;
  365. height: 50rpx;
  366. line-height: 50rpx;
  367. .u-tips {
  368. display: inline-block;
  369. float: left;
  370. width: 98rpx;
  371. height: 30rpx;
  372. background: #ffffff;
  373. border-radius: 16rpx;
  374. line-height: 30rpx;
  375. font-size: $font-size-20;
  376. text-align: center;
  377. color: $color-system;
  378. margin-left: 10rpx;
  379. margin-top: 12rpx;
  380. }
  381. .icon-jinrudianpu {
  382. font-size: $font-size-26;
  383. line-height: 50rpx;
  384. color: #ffffff;
  385. text-align: left;
  386. margin-left: 12rpx;
  387. }
  388. .u-shop {
  389. font-size: $font-size-28;
  390. line-height: 50rpx;
  391. color: #ffffff;
  392. text-align: left;
  393. }
  394. .u-viptips {
  395. display: inline-block;
  396. float: left;
  397. width: 98rpx;
  398. height: 30rpx;
  399. border: 1px solid #ffe600;
  400. background: linear-gradient(128deg, rgba(242, 143, 49, 1) 0%, rgba(225, 86, 22, 1) 100%);
  401. border-radius: 16rpx;
  402. line-height: 30rpx;
  403. font-size: $font-size-20;
  404. text-align: center;
  405. color: #ffe600;
  406. margin-left: 10rpx;
  407. margin-top: 17rpx;
  408. }
  409. .u-h1 {
  410. float: left;
  411. font-size: $font-size-30;
  412. color: #ffffff;
  413. text-align: left;
  414. -o-text-overflow: ellipsis;
  415. text-overflow: ellipsis;
  416. display: -webkit-box;
  417. word-break: break-all;
  418. -webkit-box-orient: vertical;
  419. -webkit-line-clamp: 1;
  420. overflow: hidden;
  421. }
  422. .u-p {
  423. font-size: $font-size-24;
  424. line-height: 50rpx;
  425. color: #ffffff;
  426. text-align: left;
  427. }
  428. }
  429. }
  430. .header-icon {
  431. flex: 2;
  432. margin-right: 20rpx;
  433. image {
  434. float: right;
  435. width: 128rpx;
  436. height: 128rpx;
  437. border-radius: 100%;
  438. border: 2rpx solid #ffffff;
  439. }
  440. }
  441. }
  442. .header-main-none {
  443. width: 702rpx;
  444. height: 152rpx;
  445. padding: 0 24rpx;
  446. display: flex;
  447. .header-text {
  448. flex: 8;
  449. display: flex;
  450. flex-direction: column;
  451. .user-item {
  452. flex: 1;
  453. height: 50rpx;
  454. line-height: 50rpx;
  455. .line {
  456. margin: 0 10rpx;
  457. }
  458. .u-h1 {
  459. float: left;
  460. font-size: $font-size-36;
  461. color: #ffffff;
  462. text-align: left;
  463. -o-text-overflow: ellipsis;
  464. text-overflow: ellipsis;
  465. display: -webkit-box;
  466. word-break: break-all;
  467. -webkit-box-orient: vertical;
  468. -webkit-line-clamp: 1;
  469. overflow: hidden;
  470. }
  471. .u-p {
  472. font-size: $font-size-24;
  473. line-height: 50rpx;
  474. color: #efefef;
  475. text-align: left;
  476. }
  477. .u-btn {
  478. width: 160rpx;
  479. height: 40rpx;
  480. background: rgba(255, 255, 255, 0.5);
  481. border-radius: 5rpx;
  482. line-height: 40rpx;
  483. text-align: center;
  484. font-size: $font-size-24;
  485. color: #ffffff;
  486. display: block;
  487. margin-top: 5rpx;
  488. padding-left: 6rpx;
  489. .icon-xiangyouhuabeifen {
  490. font-size: $font-size-24;
  491. }
  492. }
  493. }
  494. }
  495. .header-icon {
  496. flex: 2;
  497. display: flex;
  498. margin-right: 20rpx;
  499. align-items: center;
  500. justify-content: center;
  501. image {
  502. float: right;
  503. width: 128rpx;
  504. height: 128rpx;
  505. border-radius: 100%;
  506. border: 2rpx solid #ffffff;
  507. }
  508. }
  509. }
  510. .user-order {
  511. width: 654rpx;
  512. height: auto;
  513. padding: 0 24rpx;
  514. background-color: $bg-color;
  515. margin-bottom: 24rpx;
  516. position: absolute;
  517. bottom: -170rpx;
  518. left: 24rpx;
  519. border-radius: 16rpx;
  520. }
  521. .tab-title {
  522. font-size: $font-size-30;
  523. line-height: 80rpx;
  524. color: #333333;
  525. text-align: left;
  526. position: relative;
  527. .cell-tit {
  528. font-size: $font-size-30;
  529. color: $text-color;
  530. }
  531. }
  532. .order-section {
  533. display: flex;
  534. justify-content: space-around;
  535. align-items: center;
  536. flex-wrap: wrap;
  537. height: 99rpx;
  538. padding: 24rpx 0;
  539. }
  540. .order-item {
  541. flex: 1;
  542. display: flex;
  543. flex-direction: column;
  544. align-items: center;
  545. position: relative;
  546. .order-icon {
  547. width: 52rpx;
  548. height: 52rpx;
  549. position: relative;
  550. .iconfont {
  551. line-height: 52rpx;
  552. font-size: $font-size-48;
  553. color: #ff7a51;
  554. }
  555. .icon-num {
  556. position: absolute;
  557. right: -24rpx;
  558. top: -9rpx;
  559. }
  560. .icon-num.goleft {
  561. right: -12rpx;
  562. }
  563. }
  564. .order-t {
  565. line-height: 50rpx;
  566. font-size: $font-size-24;
  567. color: $text-color;
  568. }
  569. }
  570. .foot-list {
  571. width: 702rpx;
  572. padding: 0 24rpx;
  573. padding-top: 168rpx;
  574. }
  575. .list-cell-item {
  576. width: 654rpx;
  577. height: auto;
  578. margin-bottom: 24rpx;
  579. padding: 0 24rpx;
  580. background: $bg-color;
  581. border-radius: 20rpx;
  582. }
  583. .list-cell {
  584. width: 100%;
  585. line-height: 100rpx;
  586. position: relative;
  587. background: $bg-color;
  588. border-bottom: 1px solid #ebebeb;
  589. height: 100rpx;
  590. &:last-child {
  591. border-bottom: none;
  592. }
  593. &.cell-hover {
  594. background: #fafafa;
  595. }
  596. .cell-icon {
  597. width: 60rpx;
  598. height: 100rpx;
  599. text-align: center;
  600. box-sizing: border-box;
  601. padding: 32rpx 12rpx;
  602. float: left;
  603. .cell-icon-image {
  604. width: 36rpx;
  605. height: 36rpx;
  606. display: block;
  607. }
  608. }
  609. .cell-more {
  610. width: 60rpx;
  611. height: 100rpx;
  612. line-height: 100rpx;
  613. text-align: right;
  614. position: absolute;
  615. right: 0;
  616. top: 0;
  617. font-size: $font-size-28;
  618. color: #666666;
  619. &.cont {
  620. width: 250rpx;
  621. }
  622. .txt {
  623. color: #fb4343;
  624. padding-right: 10rpx;
  625. }
  626. }
  627. .cell-tit {
  628. width: 465rpx;
  629. display: block;
  630. float: left;
  631. font-size: $font-size-28;
  632. color: #666666;
  633. margin-right: 10rpx;
  634. &.cont {
  635. width: 300rpx;
  636. }
  637. }
  638. .cell-tip {
  639. font-size: $font-size-28;
  640. color: $text-color;
  641. }
  642. }
  643. .list-cell.last {
  644. border-bottom: none;
  645. }
  646. .uni-badge--small {
  647. -webkit-transform: scale(0.8);
  648. -ms-transform: scale(0.8);
  649. transform: scale(0.8);
  650. -webkit-transform-origin: center center;
  651. -ms-transform-origin: center center;
  652. transform-origin: center center;
  653. }
  654. .uni-badge {
  655. font-family: 'Helvetica Neue', Helvetica, sans-serif;
  656. -webkit-box-sizing: border-box;
  657. box-sizing: border-box;
  658. font-size: 12px;
  659. line-height: 1;
  660. display: inline-block;
  661. padding: 3px 6px;
  662. color: #333;
  663. border-radius: 100px;
  664. background-color: #f1f1f1;
  665. }
  666. .uni-badge-error {
  667. color: #fff;
  668. background-color: #dd524d;
  669. }
  670. </style>