user.vue 30 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171
  1. <template>
  2. <view class="container user clearfix">
  3. <cm-custom :navbar-data="nvabarData" v-if="isCmcustom"></cm-custom>
  4. <view class="user-section">
  5. <view
  6. class="header"
  7. :style="{
  8. height: CustomBar + 120 - StatusBar + 'px',
  9. paddingTop: CustomBar + 'px',
  10. background: 'linear-gradient(180deg, #E15616 0%, #F28F31 100%)',
  11. backgroundSize: 'cover'
  12. }"
  13. >
  14. <view class="header-main" v-if="hasLogin">
  15. <view class="header-icon">
  16. <image
  17. :src="headpic ? headpic : 'https://static.caimei365.com/app/img/icon/icon-club@3x.png'"
  18. mode=""
  19. ></image>
  20. </view>
  21. <view class="header-text">
  22. <view class="user-item"
  23. ><text class="u-h1">{{ name }}</text></view
  24. >
  25. <view class="user-item">
  26. <view class="user-item-tips vip" v-if="userIdentity == 2">
  27. <image class="tips-icon" :src="StaticUrl + '/icon/icon-member-svip@2x.png'" mode=""></image>
  28. {{ userType }}
  29. </view>
  30. <view class="user-item-tips" v-if="userIdentity == 4">
  31. <image class="tips-icon" :src="StaticUrl + '/icon/icon-member-vip@2x.png'" mode=""></image>
  32. {{ userType }}
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. <view class="header-main-none" v-else>
  38. <view class="header-icon" @click="navigator('/pages/login/login')">
  39. <image src="https://static.caimei365.com/app/img/icon/icon-club@3x.png" mode=""></image>
  40. </view>
  41. <view class="header-text">
  42. <view class="user-item">
  43. <text class="u-h1" @click="navigatorRegirst('/pages/login/login')">账号登录/注册></text>
  44. </view>
  45. <view class="user-item">
  46. <text class="u-p" @click="navigator('/pages/login/login')"
  47. >登录采美商城更多惊喜等着您~</text
  48. >
  49. </view>
  50. <view class="user-code" @click="navigatorLoginCode('/pages/login/logincode')">邀请码登录></view>
  51. </view>
  52. </view>
  53. <!-- 我的资产 -->
  54. <view class="header-main-account">
  55. <view class="main-member">
  56. <view class="main-member-none" v-if="!hasLogin" @click="navigator('/pages/login/login')">
  57. <view class="main-member-none-text">开通采美·超级会员,享专属特权</view>
  58. <view class="main-member-none-btn">立即开通</view>
  59. </view>
  60. <template v-else>
  61. <view class="main-member-svip" v-if="userVip.vipFlag == 1" @click="navigator('/pages/user/member/member')">
  62. <view class="main-member-svip-h1">已开通采美·超级会员</view>
  63. <view class="main-member-svip-p">有效期至:{{ userVip.endTime }}</view>
  64. <view class="main-member-svip-icon">
  65. <text class="iconfont icon-xiayibu"></text>
  66. </view>
  67. </view>
  68. <view class="main-member-svip" v-if="userVip.vipFlag == -1" @click="navigator('/pages/user/member/member')">
  69. <view class="main-member-svip-h1 red">采美·超级会员已过期</view>
  70. <view class="main-member-svip-p">有效期至:2021-10-01</view>
  71. <view class="main-member-svip-icon">
  72. <text class="iconfont icon-xiayibu"></text>
  73. </view>
  74. </view>
  75. <view class="main-member-none" v-if="userVip.vipFlag == 0" @click="navigator('/pages/user/member/member')">
  76. <view class="main-member-none-text">开通采美·超级会员,享专属特权</view>
  77. <view class="main-member-none-btn">立即开通</view>
  78. </view>
  79. </template>
  80. </view>
  81. <view class="main-account">
  82. <view class="main-cell">
  83. <view class="main-account-le">
  84. <view class="main-account-icon"> <text class="iconfont icon-zichan"></text> </view>
  85. <view class="main-account-text">我的资产</view>
  86. </view>
  87. <view class="main-account-ri">
  88. <view class="main-account-ri-view account" @click="navigator('/pages/user/account/account')">
  89. <view class="main-account-icon" v-if="hasLogin">{{ userMoney }}</view>
  90. <view class="main-account-icon none" v-else>-</view>
  91. <view class="main-account-text">账户余额</view>
  92. </view>
  93. <view
  94. class="main-account-ri-view beans"
  95. @click="navigator('/pages/user/account/account-bean')"
  96. >
  97. <view class="main-account-icon" v-if="hasLogin">{{
  98. userBeans ? userBeans : 0
  99. }}</view>
  100. <view class="main-account-icon none" v-else>-</view>
  101. <view class="main-account-text">采美豆</view>
  102. </view>
  103. <view class="main-account-ri-view coupon" @click="navigator('/pages/user/coupon/coupon')">
  104. <view class="main-account-icon" v-if="hasLogin">{{
  105. couponNum ? couponNum : 0
  106. }}</view>
  107. <view class="main-account-icon none" v-else>-</view>
  108. <view class="main-account-text">优惠券</view>
  109. </view>
  110. </view>
  111. </view>
  112. </view>
  113. </view>
  114. <!-- 订单 -->
  115. <view class="header-main-order" :style="{ marginTop: hasLogin ? '0rpx' : '0rpx' }">
  116. <view class="user-order">
  117. <view class="tab-title" @click="navigator('/pages/user/order/order-list?state=0')">
  118. <text class="cell-tit">我的订单</text> <text class="cell-more">全部订单</text>
  119. <text class="iconfont icon-xiayibu"></text>
  120. </view>
  121. <view class="order-section">
  122. <view
  123. class="order-item"
  124. @click="navigator('/pages/user/order/order-list?state=1')"
  125. hover-class="common-hover"
  126. :hover-stay-time="50"
  127. >
  128. <view class="order-icon">
  129. <image
  130. src="https://static.caimei365.com/app/img/icon/order5@3x.png"
  131. mode=""
  132. ></image>
  133. <text
  134. v-if="confirmedCount > 0 && hasLogin"
  135. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  136. :class="[confirmedCount < 10 ? 'goleft' : '']"
  137. >
  138. {{ confirmedCount >= 99 ? '99+' : confirmedCount }}
  139. </text>
  140. </view>
  141. <text class="order-t">待确认</text>
  142. </view>
  143. <view
  144. class="order-item"
  145. @click="navigator('/pages/user/order/order-list?state=2')"
  146. hover-class="common-hover"
  147. :hover-stay-time="50"
  148. >
  149. <view class="order-icon">
  150. <image
  151. src="https://static.caimei365.com/app/img/icon/order1@3x.png"
  152. mode=""
  153. ></image>
  154. <text
  155. v-if="paymentCount > 0 && hasLogin"
  156. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num "
  157. :class="[paymentCount < 10 ? 'goleft' : '']"
  158. >
  159. {{ paymentCount >= 99 ? '99+' : paymentCount }}
  160. </text>
  161. </view>
  162. <text class="order-t">待付款</text>
  163. </view>
  164. <view
  165. class="order-item"
  166. @click="navigator('/pages/user/order/order-list?state=3')"
  167. hover-class="common-hover"
  168. :hover-stay-time="50"
  169. >
  170. <view class="order-icon">
  171. <image
  172. src="https://static.caimei365.com/app/img/icon/order2@3x.png"
  173. mode=""
  174. ></image>
  175. <text
  176. v-if="waitShipmentsCount > 0 && hasLogin"
  177. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  178. :class="[waitShipmentsCount < 10 ? 'goleft' : '']"
  179. >
  180. {{ waitShipmentsCount >= 99 ? '99+' : waitShipmentsCount }}
  181. </text>
  182. </view>
  183. <text class="order-t">待发货</text>
  184. </view>
  185. <view
  186. class="order-item"
  187. @click="navigator('/pages/user/order/order-list?state=4')"
  188. hover-class="common-hover"
  189. :hover-stay-time="50"
  190. >
  191. <view class="order-icon">
  192. <image
  193. src="https://static.caimei365.com/app/img/icon/order3@3x.png"
  194. mode=""
  195. ></image>
  196. <text
  197. v-if="shipmentsCount > 0 && hasLogin"
  198. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  199. :class="[shipmentsCount < 10 ? 'goleft' : '']"
  200. >
  201. {{ shipmentsCount >= 99 ? '99+' : shipmentsCount }}
  202. </text>
  203. </view>
  204. <text class="order-t">已发货</text>
  205. </view>
  206. <view
  207. class="order-item"
  208. @click="navigator('/pages/user/order/order-list?state=5')"
  209. hover-class="common-hover"
  210. :hover-stay-time="50"
  211. >
  212. <view class="order-icon">
  213. <image
  214. src="https://static.caimei365.com/app/img/icon/order4@3x.png"
  215. mode=""
  216. ></image>
  217. <text
  218. v-if="salesReturnCount > 0 && hasLogin"
  219. class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
  220. :class="[salesReturnCount < 10 ? 'goleft' : '']"
  221. >
  222. {{ salesReturnCount >= 99 ? '99+' : salesReturnCount }}
  223. </text>
  224. </view>
  225. <text class="order-t">退货/款</text>
  226. </view>
  227. </view>
  228. </view>
  229. </view>
  230. <!-- 底部跳转 -->
  231. <view class="header-main-listcell">
  232. <view class="list-cell-item" v-show="hasLogin">
  233. <view
  234. class="list-cell"
  235. v-show="userIdentity == 4"
  236. @click="navigatorClubUpgrade(`/pages/login/apply?clubStatus=${clubStatus}`)"
  237. hover-class="cell-hover"
  238. :hover-stay-time="50"
  239. >
  240. <view class="cell-icon">
  241. <image
  242. class="cell-icon-image"
  243. src="https://static.caimei365.com/app/img/icon/icon_club_8@2x.png"
  244. mode=""
  245. ></image>
  246. </view>
  247. <text class="cell-tit"> 升级资质机构 <text class="cell-tips">采美豆</text> </text>
  248. <text class="cell-more">
  249. <text class="txt">{{ clubStatusText(clubStatus) }}</text>
  250. <text class="iconfont icon-xiayibu"></text>
  251. </text>
  252. </view>
  253. <view
  254. class="list-cell"
  255. @click="navigator('/pages/user/regularPurchase/regularPurchase')"
  256. hover-class="cell-hover"
  257. :hover-stay-time="50"
  258. >
  259. <view class="cell-icon">
  260. <image
  261. class="cell-icon-image"
  262. src="https://static.caimei365.com/app/img/icon/icon_club_9@2x.png"
  263. mode=""
  264. ></image>
  265. </view>
  266. <text class="cell-tit">再次购买</text> <text class="cell-more iconfont icon-xiayibu"></text>
  267. </view>
  268. <view
  269. class="list-cell"
  270. @click="navigator('/pages/user/collection/collection')"
  271. hover-class="cell-hover"
  272. :hover-stay-time="50"
  273. >
  274. <view class="cell-icon">
  275. <image
  276. class="cell-icon-image"
  277. src="https://static.caimei365.com/app/img/icon/icon_club_13@2x.png"
  278. mode=""
  279. ></image>
  280. </view>
  281. <text class="cell-tit">收藏商品</text> <text class="cell-more iconfont icon-xiayibu"></text>
  282. </view>
  283. </view>
  284. <view class="list-cell-item">
  285. <view
  286. class="list-cell"
  287. v-for="(item, index) in firstList"
  288. :key="index"
  289. @click="navigator(item.path)"
  290. hover-class="cell-hover"
  291. :hover-stay-time="50"
  292. >
  293. <view class="cell-icon">
  294. <image class="cell-icon-image" :src="item.icon" mode=""></image>
  295. </view>
  296. <text class="cell-tit">
  297. {{ item.name }} <text class="cell-tips" v-if="index == 2 && isModify">采美豆</text>
  298. </text>
  299. <text class="cell-more iconfont icon-xiayibu"></text>
  300. </view>
  301. </view>
  302. <view class="list-cell-item">
  303. <view class="list-cell" hover-class="cell-hover" :hover-stay-time="50">
  304. <view class="cell-icon">
  305. <image
  306. class="cell-icon-image"
  307. src="https://static.caimei365.com/app/img/icon/icon_club_5@2x.png"
  308. mode=""
  309. ></image>
  310. </view>
  311. <text class="cell-tit cont">联系我们</text>
  312. <text class="cell-more cont" @click="toPhone">{{ contactNumber }}</text>
  313. </view>
  314. <view
  315. class="list-cell"
  316. @click="this.$api.navigateTo('/pages/user/about/about')"
  317. hover-class="cell-hover"
  318. :hover-stay-time="50"
  319. >
  320. <view class="cell-icon">
  321. <image
  322. class="cell-icon-image"
  323. src="https://static.caimei365.com/app/img/icon/icon_club_6@2x.png"
  324. mode=""
  325. ></image>
  326. </view>
  327. <text class="cell-tit">关于我们</text> <text class="cell-more iconfont icon-xiayibu"></text>
  328. </view>
  329. <view
  330. class="list-cell last"
  331. @click="this.$api.navigateTo('/pages/h5/article/page?linkType=99')"
  332. hover-class="cell-hover"
  333. :hover-stay-time="50"
  334. >
  335. <view class="cell-icon">
  336. <image
  337. class="cell-icon-image"
  338. src="https://static.caimei365.com/app/img/icon/icon_club_7@2x.png"
  339. mode=""
  340. ></image>
  341. </view>
  342. <text class="cell-tit">帮助中心</text> <text class="cell-more iconfont icon-xiayibu"></text>
  343. </view>
  344. </view>
  345. </view>
  346. <view class="header-main-last"></view>
  347. </view>
  348. </view>
  349. <!-- 采美豆提示弹窗 -->
  350. <activityBean
  351. v-if="isActivityBean"
  352. :show="isActivityBean"
  353. :beansType="beansType"
  354. :beanNumber="beanNumber"
  355. @cancel="handleBeanlClick"
  356. ></activityBean>
  357. </view>
  358. </template>
  359. <script>
  360. import uniBadge from '@/components/uni-badge/uni-badge.vue'
  361. import activityBean from '@/components/cm-module/activity/activityBean.vue'
  362. import authorize from '@/common/config/authorize.js'
  363. import { mapState, mapMutations } from 'vuex'
  364. export default {
  365. components: {
  366. uniBadge,
  367. activityBean
  368. },
  369. data() {
  370. return {
  371. nvabarData: {
  372. // 顶部自定义导航
  373. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  374. showSearch: 0,
  375. title: '个人中心', // 导航栏中间的标题
  376. haveBack: false,
  377. textLeft: this.$store.state.isIphone,
  378. textColor: '#333333',
  379. bgColor: ''
  380. },
  381. CustomBar: this.CustomBar, // 顶部导航栏高度
  382. StatusBar: this.StatusBar,
  383. StaticUrl: this.$Static,
  384. userId: 0,
  385. beanNumber: 50,
  386. beansType: 0,
  387. isModify: false,
  388. isActivityBean: false,
  389. isCmcustom: false,
  390. bgImgUrl: 'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z_i6ASHobAAhl69yz3SM078.png',
  391. name: '',
  392. userType: '',
  393. headpic: '',
  394. userVip:{},// 超级会员信息
  395. userBeans: 0,
  396. userMoney: '0.00',
  397. couponNum: 0,
  398. contactNumber: '',
  399. openid: '',
  400. aboutHtml: '',
  401. telPhone: '',
  402. bindMobile: '',
  403. isSvip: false,
  404. isSvipType: 2,
  405. clubStatus: '', // 机构升级资质机构审核状态1:待审核 91:审核失败
  406. userIdentity: '', // 机构等级
  407. confirmedCount: 0, // 待确认
  408. paymentCount: 0, // 待付款角标
  409. waitShipmentsCount: 0, // 待收货角标
  410. shipmentsCount: 0, // 已发货角标
  411. salesReturnCount: '', // 退货/款角标
  412. firstList: [
  413. {
  414. name: '运营人员管理',
  415. path: '/pages/user/operator/list',
  416. icon: 'https://static.caimei365.com/app/img/icon/icon_club_1@2x.png'
  417. },
  418. {
  419. name: '收货地址管理',
  420. path: '/pages/user/address/address',
  421. icon: 'https://static.caimei365.com/app/img/icon/icon_club_2@2x.png'
  422. },
  423. {
  424. name: '机构资料',
  425. path: '/pages/login/information',
  426. icon: 'https://static.caimei365.com/app/img/icon/icon_club_3@2x.png'
  427. },
  428. {
  429. name: '账户设置',
  430. path: '/pages/user/setting/setting',
  431. icon: 'https://static.caimei365.com/app/img/icon/icon_club_4@2x.png'
  432. }
  433. ]
  434. }
  435. },
  436. onLoad(option) {},
  437. computed: {
  438. ...mapState(['hasLogin', 'userInfo', 'isWxAuthorize'])
  439. },
  440. methods: {
  441. getClubObtainCenter() {
  442. // 获取个人中心数据
  443. this.UserService.GetClubObtainCenter({ userId: this.userId })
  444. .then(response => {
  445. let data = response.data
  446. this.userMoney = this.filtersMoney(data.user.ableUserMoney)
  447. console.log('userMoney', this.userMoney)
  448. this.userIdentity = data.user.userIdentity //机构等级
  449. if (this.userIdentity == 2) {
  450. this.name = data.club.name //资质机构名称
  451. this.userType = '资质机构'
  452. } else {
  453. this.name = data.user.userName //个人机构名称
  454. this.userType = '个人机构'
  455. }
  456. this.userVip = data.vip // 超级会员信息
  457. this.userBeans = data.user.userBeans // 采美豆数量
  458. this.headpic = data.user.image // 会所头像
  459. this.bindMobile = data.user.bindMobile // 登录手机号
  460. this.clubStatus = data.user.clubStatus // 机构审核状态
  461. this.couponNum = data.couponNum // 优惠券数量
  462. this.isModify = data.isModify // 是否显示采美豆
  463. this.contactNumber = data.contactNumber // 联系电话
  464. this.confirmedCount = this.showBadge(data.confirmedCount) //待确认
  465. this.paymentCount = this.showBadge(data.paymentCount) //待付款
  466. this.waitShipmentsCount = this.showBadge(data.waitShipmentsCount) //待收货
  467. this.shipmentsCount = this.showBadge(data.shipmentsCount) //已发货
  468. this.salesReturnCount = this.showBadge(data.salesReturnCount) //退货/款
  469. let clubInfo = { name: this.name, image: this.headpic, userId: data.user.userId }
  470. uni.setStorage({ key: 'clubInfo', data: clubInfo })
  471. })
  472. .catch(error => {
  473. this.$util.msg(error.msg, 2000)
  474. })
  475. },
  476. GetInitBeansInfo() {
  477. //初始化采美豆信息
  478. this.UserService.GetHomeObtainBeans({ userId: this.userId })
  479. .then(response => {
  480. this.beansType = response.data.beansType
  481. this.beanNumber = response.data.num
  482. this.isActivityBean = true
  483. })
  484. .catch(error => {
  485. console.log('用户暂无采美豆推送~')
  486. })
  487. },
  488. getPhone() {
  489. // 获取联系我们电话
  490. this.CommonService.QueryAfterSale()
  491. .then(response => {
  492. this.contactNumber = response.data.contactNumber
  493. })
  494. .catch(error => {
  495. this.$util.msg(error.msg, 2000)
  496. })
  497. },
  498. toPhone() {
  499. // 拨号
  500. uni.makePhoneCall({
  501. phoneNumber: this.contactNumber //仅为示例
  502. })
  503. },
  504. filtersMoney(param) {
  505. let moneyText
  506. if (param == 0) {
  507. moneyText = '0.00'
  508. } else {
  509. let i = param.toString().lastIndexOf('.')
  510. let money
  511. if (i == -1) {
  512. money = this.$api.FormatMoney(param) //会所剩余余额
  513. moneyText = money + '.00'
  514. } else {
  515. money = this.$api.FormatMoney(param) //会所剩余余额
  516. moneyText = money
  517. }
  518. }
  519. console.log('moneyText', moneyText)
  520. return moneyText
  521. },
  522. handleBeanlClick() {
  523. //关闭采美豆弹窗
  524. this.isActivityBean = false
  525. },
  526. navigator(url) {
  527. if (this.hasLogin) {
  528. this.$api.navigateTo(url)
  529. } else {
  530. this.$api.navigateTo('/pages/login/login?type=0')
  531. }
  532. },
  533. navigatorRegirst(url) {
  534. if (!this.hasLogin) {
  535. // 友盟埋点注册入口点击事件
  536. if (process.env.NODE_ENV != 'development') {
  537. this.$uma.trackEvent('Um_Event_totalLoginAndRegister', {
  538. Um_Key_PageName: '登录注册统一入口',
  539. Um_Key_SourcePage: '个人中心'
  540. })
  541. }
  542. this.$api.navigateTo(url)
  543. }
  544. },
  545. navigatorClubUpgrade(url) {
  546. // 友盟埋点个人机构升级点击事件
  547. if (process.env.NODE_ENV != 'development') {
  548. this.$uma.trackEvent('Um_Event_ClubUpgrade', {
  549. Um_Key_ClubName: `${this.name}`,
  550. Um_Key_PageName: '个人机构升级入口',
  551. Um_Key_SourcePage: '个人中心'
  552. })
  553. }
  554. this.$api.navigateTo(url)
  555. },
  556. navigatorLoginCode(url) {
  557. // 友盟埋点个人机构升级点击事件
  558. if (process.env.NODE_ENV != 'development') {
  559. this.$uma.trackEvent('Um_Event_LoginCodeBtn', {
  560. Um_Key_ClubName: `${this.name}`,
  561. Um_Key_PageName: '邀请码登录',
  562. Um_Key_SourcePage: '个人中心'
  563. })
  564. }
  565. this.$api.navigateTo(url)
  566. },
  567. navigatorNex(url) {
  568. if (!this.hasLogin) {
  569. this.$api.navigateTo(url)
  570. }
  571. },
  572. showBadge(n) {
  573. let num = ''
  574. if (n > 100) {
  575. num = 99
  576. } else {
  577. num = n
  578. }
  579. return num
  580. },
  581. clubStatusText(state) {
  582. let stateText
  583. switch (state) {
  584. case 90:
  585. stateText = ''
  586. break
  587. case 1:
  588. stateText = '正在审核中'
  589. break
  590. case 92:
  591. stateText = '审核不通过'
  592. break
  593. }
  594. return stateText
  595. }
  596. },
  597. onPageScroll(e) {
  598. //实时获取到滚动的值
  599. if (e.scrollTop > 20) {
  600. this.isCmcustom = true
  601. this.nvabarData.bgColor = '#FFFFFF'
  602. this.nvabarData.textColor = '#333333'
  603. } else {
  604. this.isCmcustom = false
  605. this.nvabarData.bgColor = ''
  606. this.nvabarData.textColor = '#FFFFFF'
  607. }
  608. },
  609. onPullDownRefresh() {
  610. //下拉刷新
  611. if (this.hasLogin) {
  612. this.getClubObtainCenter()
  613. uni.stopPullDownRefresh()
  614. } else {
  615. uni.stopPullDownRefresh()
  616. }
  617. },
  618. onShow() {
  619. if (this.hasLogin) {
  620. this.$api
  621. .getComStorage('userInfo')
  622. .then(resolve => {
  623. this.userId = resolve.userId ? resolve.userId : 0
  624. this.getClubObtainCenter()
  625. this.GetInitBeansInfo()
  626. })
  627. .catch(reject => {
  628. console.log('异常处理=========>', reject)
  629. })
  630. } else {
  631. this.getPhone()
  632. this.$store.commit('updateAllNum', 0)
  633. }
  634. }
  635. }
  636. </script>
  637. <style lang="scss">
  638. @import '@/uni.scss';
  639. page {
  640. background-color: #f7f7f7;
  641. }
  642. .user {
  643. width: 100%;
  644. height: 100%;
  645. position: relative;
  646. background: rgba(247, 247, 247, 1);
  647. }
  648. .header {
  649. width: 100%;
  650. position: relative;
  651. background-size: cover;
  652. }
  653. .header-main {
  654. width: 702rpx;
  655. height: 130rpx;
  656. padding: 12rpx 24rpx;
  657. display: flex;
  658. .header-text {
  659. flex: 8;
  660. display: flex;
  661. flex-direction: column;
  662. box-sizing: border-box;
  663. padding: 10rpx 0 0 20rpx;
  664. .user-item {
  665. flex: 1;
  666. height: 64rpx;
  667. line-height: 64rpx;
  668. .user-item-tips{
  669. display: inline-block;
  670. float: left;
  671. width: 140rpx;
  672. height: 34rpx;
  673. background: #E7EAEF;
  674. border-radius: 20rpx;
  675. line-height: 34rpx;
  676. font-size: $font-size-22;
  677. text-align: center;
  678. color: #627386;
  679. box-sizing: border-box;
  680. padding:0 11rpx 0 41rpx;
  681. position: relative;
  682. &.vip{
  683. background: #FFF2D5;
  684. color: #E4AA43;
  685. }
  686. .tips-icon{
  687. width: 34rpx;
  688. height: 34rpx;
  689. display: block;
  690. position: absolute;
  691. left: 0;
  692. top: 0;
  693. }
  694. }
  695. .u-h1 {
  696. width: 400rpx;
  697. float: left;
  698. font-size: $font-size-30;
  699. color: #ffffff;
  700. text-align: left;
  701. -o-text-overflow: ellipsis;
  702. text-overflow: ellipsis;
  703. display: -webkit-box;
  704. word-break: break-all;
  705. -webkit-box-orient: vertical;
  706. -webkit-line-clamp: 1;
  707. overflow: hidden;
  708. }
  709. .u-p {
  710. font-size: $font-size-24;
  711. line-height: 30rpx;
  712. color: #ffffff;
  713. text-align: left;
  714. }
  715. }
  716. }
  717. .header-icon {
  718. flex: 2;
  719. image {
  720. float: right;
  721. width: 128rpx;
  722. height: 128rpx;
  723. border-radius: 100%;
  724. border: 2rpx solid #ffffff;
  725. }
  726. }
  727. }
  728. .header-main-none {
  729. width: 702rpx;
  730. height: 152rpx;
  731. padding: 0 24rpx;
  732. display: flex;
  733. .header-text {
  734. flex: 8;
  735. display: flex;
  736. flex-direction: column;
  737. position: relative;
  738. box-sizing: border-box;
  739. padding: 20rpx 0;
  740. .user-code {
  741. width: 193rpx;
  742. height: 56rpx;
  743. background: rgba(255, 255, 255, 0.2);
  744. color: #ffffff;
  745. line-height: 56rpx;
  746. font-size: $font-size-26;
  747. padding: 0 20rpx 0 23rpx;
  748. box-sizing: border-box;
  749. border-radius: 28rpx 0 0 28rpx;
  750. position: absolute;
  751. right: -24rpx;
  752. top: 46rpx;
  753. }
  754. .user-item {
  755. flex: 1;
  756. height: 50rpx;
  757. line-height: 50rpx;
  758. .line {
  759. margin: 0 10rpx;
  760. }
  761. .u-h1 {
  762. float: left;
  763. font-size: $font-size-28;
  764. color: #ffffff;
  765. text-align: left;
  766. -o-text-overflow: ellipsis;
  767. text-overflow: ellipsis;
  768. display: -webkit-box;
  769. word-break: break-all;
  770. -webkit-box-orient: vertical;
  771. -webkit-line-clamp: 1;
  772. overflow: hidden;
  773. }
  774. .u-p {
  775. font-size: $font-size-24;
  776. line-height: 50rpx;
  777. color: #ffffff;
  778. text-align: left;
  779. }
  780. }
  781. }
  782. .header-icon {
  783. flex: 2;
  784. display: flex;
  785. margin-right: 20rpx;
  786. align-items: center;
  787. justify-content: center;
  788. image {
  789. float: right;
  790. width: 128rpx;
  791. height: 128rpx;
  792. border-radius: 100%;
  793. border: 2rpx solid #ffffff;
  794. }
  795. }
  796. }
  797. .header-main-account {
  798. width: 100%;
  799. height: 310rpx;
  800. box-sizing: border-box;
  801. padding: 24rpx 44.5rpx;
  802. position: relative;
  803. .main-member {
  804. width: 100%;
  805. height: 168rpx;
  806. background: url(https://static.caimei365.com/app/img/icon/icon-member-user@2x.png) no-repeat;
  807. background-size: cover;
  808. border-radius: 20rpx;
  809. box-sizing: border-box;
  810. padding: 5rpx 24rpx 75rpx 104rpx;
  811. .main-member-none {
  812. width: 100%;
  813. height: 88rpx;
  814. box-sizing: border-box;
  815. padding:28rpx 0 20rpx 0;
  816. line-height: 40rpx;
  817. .main-member-none-text {
  818. font-size: $font-size-26;
  819. color: #f0cb72;
  820. float: left;
  821. }
  822. .main-member-none-btn {
  823. width: 128rpx;
  824. height: 40rpx;
  825. background: linear-gradient(270deg, #fee9ba 0%, #f0cb72 100%);
  826. border-radius: 24rpx;
  827. line-height: 40rpx;
  828. text-align: center;
  829. font-size: $font-size-24;
  830. color: #333333;
  831. float: right;
  832. }
  833. }
  834. .main-member-svip {
  835. width: 100%;
  836. height: 88rpx;
  837. box-sizing: border-box;
  838. padding: 12rpx 0 9rpx 0;
  839. position: relative;
  840. .main-member-svip-h1 {
  841. width: 100%;
  842. height: 37rpx;
  843. line-height: 37rpx;
  844. color: #f0cb72;
  845. text-align: left;
  846. font-size: $font-size-26;
  847. &.red {
  848. color: #ff2a2a;
  849. }
  850. }
  851. .main-member-svip-p {
  852. width: 100%;
  853. height: 28rpx;
  854. line-height: 28rpx;
  855. color: #bcbcbc;
  856. text-align: left;
  857. font-size: $font-size-20;
  858. }
  859. .main-member-svip-icon {
  860. width: 88rpx;
  861. height: 88rpx;
  862. position: absolute;
  863. right: 0;
  864. top: 0;
  865. line-height: 88rpx;
  866. text-align: right;
  867. .iconfont {
  868. font-size: 30rpx;
  869. color: #f0cb72;
  870. }
  871. }
  872. }
  873. }
  874. .main-account {
  875. width: 100%;
  876. height: 168rpx;
  877. position: absolute;
  878. top: 118rpx;
  879. left: 0;
  880. box-sizing: border-box;
  881. padding: 0 24rpx;
  882. .main-cell {
  883. width: 100%;
  884. height: 168rpx;
  885. background-color: $bg-color;
  886. border-radius: 20rpx;
  887. box-sizing: border-box;
  888. padding: 24rpx 0;
  889. }
  890. .main-account-le {
  891. width: 165rpx;
  892. height: 100%;
  893. position: relative;
  894. float: left;
  895. &::before {
  896. content: '';
  897. width: 2rpx;
  898. height: 64rpx;
  899. background-color: #c4c4c4;
  900. position: absolute;
  901. right: 0;
  902. top: 30rpx;
  903. }
  904. .main-account-icon {
  905. width: 100%;
  906. height: 74rpx;
  907. line-height: 74rpx;
  908. text-align: center;
  909. .icon-zichan {
  910. font-size: 50rpx;
  911. color: #f94b4b;
  912. }
  913. }
  914. .main-account-text {
  915. width: 100%;
  916. height: 44rpx;
  917. line-height: 44rpx;
  918. font-size: $font-size-28;
  919. text-align: center;
  920. color: #333333;
  921. }
  922. }
  923. .main-account-ri {
  924. width: 537rpx;
  925. height: 100%;
  926. float: right;
  927. .main-account-ri-view {
  928. height: 100%;
  929. float: left;
  930. &.account{
  931. width: 40%;
  932. }
  933. &.beans{
  934. width: 32%;
  935. }
  936. &.coupon{
  937. width: 28%;
  938. }
  939. .main-account-icon {
  940. width: 100%;
  941. height: 74rpx;
  942. line-height: 74rpx;
  943. text-align: center;
  944. font-size: $font-size-30;
  945. color: #f94b4b;
  946. &.none {
  947. color: #333333;
  948. font: $font-size-36;
  949. font-weight: normal;
  950. }
  951. }
  952. .main-account-text {
  953. width: 100%;
  954. height: 44rpx;
  955. line-height: 44rpx;
  956. font-size: $font-size-28;
  957. text-align: center;
  958. color: #333333;
  959. }
  960. }
  961. }
  962. }
  963. }
  964. .header-main-order {
  965. width: 100%;
  966. height: auto;
  967. box-sizing: border-box;
  968. padding: 0 24rpx;
  969. margin-top: 26rpx;
  970. .user-order {
  971. width: 100%;
  972. height: auto;
  973. background-color: $bg-color;
  974. margin-bottom: 24rpx;
  975. border-radius: 20rpx;
  976. box-sizing: border-box;
  977. padding: 0 24rpx;
  978. }
  979. }
  980. .tab-title {
  981. font-size: $font-size-28;
  982. line-height: 80rpx;
  983. color: #333333;
  984. text-align: left;
  985. border-bottom: 1px solid #f8f8f8;
  986. position: relative;
  987. .cell-tit {
  988. font-size: $font-size-28;
  989. color: $text-color;
  990. }
  991. .cell-more {
  992. float: right;
  993. line-height: 80rpx;
  994. font-size: $font-size-24;
  995. color: $text-color;
  996. padding-right: 30rpx;
  997. }
  998. .iconfont {
  999. width: 30rpx;
  1000. height: 80rpx;
  1001. line-height: 80rpx;
  1002. text-align: center;
  1003. position: absolute;
  1004. right: 0;
  1005. top: 0;
  1006. display: block;
  1007. font-size: $font-size-28;
  1008. }
  1009. }
  1010. .order-section {
  1011. display: flex;
  1012. justify-content: space-around;
  1013. align-items: center;
  1014. flex-wrap: wrap;
  1015. height: 99rpx;
  1016. padding: 24rpx 0;
  1017. }
  1018. .order-item {
  1019. flex: 1;
  1020. display: flex;
  1021. flex-direction: column;
  1022. align-items: center;
  1023. position: relative;
  1024. &:last-child {
  1025. margin-right: 0;
  1026. }
  1027. .order-icon {
  1028. width: 52rpx;
  1029. height: 52rpx;
  1030. position: relative;
  1031. image {
  1032. width: 52rpx;
  1033. height: 52rpx;
  1034. }
  1035. .icon-num {
  1036. position: absolute;
  1037. right: -24rpx;
  1038. top: -9rpx;
  1039. }
  1040. .icon-num.goleft {
  1041. right: -12rpx;
  1042. }
  1043. }
  1044. .order-t {
  1045. line-height: 50rpx;
  1046. font-size: $font-size-24;
  1047. color: $text-color;
  1048. }
  1049. }
  1050. .header-main-last {
  1051. width: 100%;
  1052. height: 20rpx;
  1053. float: left;
  1054. box-sizing: border-box;
  1055. }
  1056. .header-main-listcell {
  1057. width: 100%;
  1058. height: auto;
  1059. box-sizing: border-box;
  1060. padding: 0 24rpx;
  1061. margin-bottom: 60rpx;
  1062. }
  1063. .list-cell-item {
  1064. width: 654rpx;
  1065. height: auto;
  1066. margin-bottom: 24rpx;
  1067. padding: 0 24rpx;
  1068. background: $bg-color;
  1069. border-radius: 20rpx;
  1070. }
  1071. .list-cell {
  1072. width: 100%;
  1073. line-height: 100rpx;
  1074. position: relative;
  1075. background: $bg-color;
  1076. border-bottom: 1px solid #ebebeb;
  1077. height: 100rpx;
  1078. &:last-child {
  1079. border-bottom: none;
  1080. }
  1081. &.cell-hover {
  1082. background: #fafafa;
  1083. }
  1084. .cell-icon {
  1085. width: 60rpx;
  1086. height: 100rpx;
  1087. text-align: center;
  1088. box-sizing: border-box;
  1089. padding: 32rpx 12rpx;
  1090. float: left;
  1091. .cell-icon-image {
  1092. width: 36rpx;
  1093. height: 36rpx;
  1094. display: block;
  1095. }
  1096. }
  1097. .cell-more {
  1098. height: 100rpx;
  1099. line-height: 100rpx;
  1100. text-align: right;
  1101. position: absolute;
  1102. right: 0;
  1103. top: 0;
  1104. font-size: $font-size-28;
  1105. color: #666666;
  1106. &.cont {
  1107. width: 250rpx;
  1108. }
  1109. .txt {
  1110. color: #fb4343;
  1111. padding-right: 10rpx;
  1112. }
  1113. }
  1114. .cell-tit {
  1115. width: 465rpx;
  1116. display: block;
  1117. float: left;
  1118. font-size: $font-size-28;
  1119. color: #666666;
  1120. margin-right: 10rpx;
  1121. &.cont {
  1122. width: 300rpx;
  1123. }
  1124. .cell-tips {
  1125. width: 74rpx;
  1126. height: 32rpx;
  1127. line-height: 32rpx;
  1128. padding: 0 7rpx;
  1129. border-radius: 16rpx;
  1130. background-color: #ffe6dc;
  1131. color: $color-system;
  1132. text-align: center;
  1133. font-size: $font-size-20;
  1134. margin-left: 8rpx;
  1135. }
  1136. }
  1137. .cell-tip {
  1138. font-size: $font-size-28;
  1139. color: $text-color;
  1140. }
  1141. }
  1142. .list-cell.last {
  1143. border-bottom: none;
  1144. }
  1145. .uni-badge--small {
  1146. -webkit-transform: scale(0.8);
  1147. -ms-transform: scale(0.8);
  1148. transform: scale(0.8);
  1149. -webkit-transform-origin: center center;
  1150. -ms-transform-origin: center center;
  1151. transform-origin: center center;
  1152. }
  1153. .uni-badge {
  1154. font-family: 'Helvetica Neue', Helvetica, sans-serif;
  1155. -webkit-box-sizing: border-box;
  1156. box-sizing: border-box;
  1157. font-size: 12px;
  1158. line-height: 1;
  1159. display: inline-block;
  1160. padding: 3px 6px;
  1161. color: #333;
  1162. border-radius: 100px;
  1163. background-color: #f1f1f1;
  1164. }
  1165. .uni-badge-error {
  1166. color: #fff;
  1167. background-color: #dd524d;
  1168. }
  1169. </style>