推拿小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

734 lines
18 KiB

3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
  1. <template>
  2. <view class="page">
  3. <view class="flex flex-column header">
  4. <view class="user">
  5. <image class="user-avatar" :src="userInfo.headImage" mode="aspectFill"></image>
  6. <view class="user-name">{{ userInfo.nickName }}</view>
  7. </view>
  8. <view class="member">
  9. <view class="flex member-overview" :class="[role ? 'is-member' : '']">
  10. <template v-if="role">
  11. <!-- todo: 缺切图 "皇冠" -->
  12. <image class="icon icon-crown" src="" mode="widthFix"></image>
  13. <template v-if="role === 'member-personal'">
  14. <image class="icon icon-role" src="@/static/image/center/icon-member-personal.png" mode="widthFix"></image>
  15. </template>
  16. <template v-else-if="role === 'member-business'">
  17. <image class="icon icon-role" src="@/static/image/center/icon-member-business.png" mode="widthFix"></image>
  18. </template>
  19. <!-- todo: 换回接口字段 -->
  20. <text class="member-tips">{{ `将于${'2026-12-12'} 到期` }}</text>
  21. </template>
  22. <template v-else>
  23. <view class="flex">
  24. <!-- todo: 缺切图 "皇冠" -->
  25. <image class="icon icon-crown" src="" mode="widthFix"></image>
  26. <!-- todo: 缺切图 "会员" -->
  27. <image class="icon icon-member" src="" mode="widthFix"></image>
  28. <text class="member-tips">成为会员可获得会员卡享受会员福利哟~</text>
  29. </view>
  30. <button plain class="btn member-btn" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">立即开通</button>
  31. </template>
  32. </view>
  33. <view class="member-rights">
  34. <image class="member-rights-bg" src="@/static/image/center/member-bg.png" mode="top" ></image>
  35. <view class="flex member-rights-content">
  36. <view class="flex">
  37. <image class="icon icon-rights" src="@/static/image/center/icon-member-weal.png" mode="widthFix"></image>
  38. <view>
  39. <view class="member-rights-label">会员福利</view>
  40. <view class="member-rights-value">会员折扣</view>
  41. </view>
  42. </view>
  43. <view class="flex">
  44. <!-- todo: 缺切图 -->
  45. <image class="icon icon-rights" src="@/static/image/center/icon-member-weal.png" mode="widthFix"></image>
  46. <view>
  47. <view class="member-rights-label">会员积分</view>
  48. <view class="member-rights-value">兑换礼品</view>
  49. </view>
  50. </view>
  51. <!-- todo: 缺切图 -->
  52. <view class="flex">
  53. <image class="icon icon-rights" src="@/static/image/center/icon-member-weal.png" mode="widthFix"></image>
  54. <view>
  55. <view class="member-rights-label">会员优惠券</view>
  56. <view class="member-rights-value">满减折扣</view>
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. <!-- todo: check -> @click="$utils.navigateTo('/pages_order/mine/withdraw') -->
  64. <view class="card flex account">
  65. <view class="flex flex-column">
  66. <view class="account-value">{{ riceInfo.balance || 0 }}<text class="account-unit"></text></view>
  67. <view class="account-label">我的余额</view>
  68. </view>
  69. <view class="flex flex-column">
  70. <!-- todo: 字段对接 -->
  71. <view class="account-value">{{ riceInfo.balance || 0 }}</view>
  72. <view class="account-label">我的积分</view>
  73. </view>
  74. <view class="flex flex-column">
  75. <view class="account-value">{{ riceInfo.canWithdraw || 0 }}<text class="account-unit"></text></view>
  76. <view class="account-label">推广佣金</view>
  77. </view>
  78. <view class="flex flex-column">
  79. <!-- todo: 字段对接 -->
  80. <view class="account-value">{{ riceInfo.balance || 0 }}<text class="account-unit"></text></view>
  81. <view class="account-label">优惠券</view>
  82. </view>
  83. </view>
  84. <view class="card fun-common">
  85. <view v-if="role === 'merchant'" class="fun-header">
  86. <cardTitle>常用功能</cardTitle>
  87. </view>
  88. <view class="fun-content fun-common-content">
  89. <view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
  90. <image class="fun-common-icon" src="@/static/image/center/icon-member-center.png" mode="widthFix"></image>
  91. <text class="fun-common-label">会员中心</text>
  92. </view>
  93. <view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/partner')">
  94. <image class="fun-common-icon" src="@/static/image/center/icon-team.png" mode="widthFix"></image>
  95. <text class="fun-common-label">我的团队</text>
  96. </view>
  97. <view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/promotion')">
  98. <image class="fun-common-icon" src="@/static/image/center/icon-invite.png" mode="widthFix"></image>
  99. <text class="fun-common-label">邀请好友</text>
  100. </view>
  101. <view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/coupon')">
  102. <image class="fun-common-icon" src="@/static/image/center/icon-coupon.png" mode="widthFix"></image>
  103. <text class="fun-common-label">优惠券</text>
  104. </view>
  105. <view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/voucher')">
  106. <image class="fun-common-icon" src="@/static/image/center/icon-voucher.png" mode="widthFix"></image>
  107. <text class="fun-common-label">代金券</text>
  108. </view>
  109. <!-- todo: check -> @click="openServicePopup" -->
  110. <view class="flex flex-column" @click="$utils.navigateTo('/pages_order/home/contact')">
  111. <image class="fun-common-icon" src="@/static/image/center/icon-service.png" mode="widthFix"></image>
  112. <text class="fun-common-label">联系客服</text>
  113. </view>
  114. <view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/signIn')">
  115. <image class="fun-common-icon" src="@/static/image/center/icon-sign-in.png" mode="widthFix"></image>
  116. <text class="fun-common-label">每日签到</text>
  117. </view>
  118. <view class="flex flex-column" @click="$utils.navigateTo('/pages_order/mine/cooperation')">
  119. <image class="fun-common-icon" src="@/static/image/center/icon-cooperation.png" mode="widthFix"></image>
  120. <text class="fun-common-label">商家合作</text>
  121. </view>
  122. </view>
  123. </view>
  124. <view v-if="role === 'merchant'" class="card fun-merchant">
  125. <view class="fun-header">
  126. <cardTitle>商家功能</cardTitle>
  127. </view>
  128. <view class="flex fun-content fun-merchant-content">
  129. <view class="left" @click="$utils.navigateTo('/pages_order/mine/verifyRecord')">
  130. <image class="left-bg" src="@/static/image/center/bg-verify.png"></image>
  131. <view class="flex left-content">
  132. <text>核销明细</text>
  133. <image class="left-icon" src="@/static/image/center/icon-arrow.png" mode="widthFix"></image>
  134. </view>
  135. </view>
  136. <!-- todo -->
  137. <view class="right" @click="onScan">
  138. <image class="right-bg" src="@/static/image/center/bg-scan.png"></image>
  139. </view>
  140. </view>
  141. </view>
  142. <customerServicePopup ref="customerServicePopup" />
  143. <!-- todo: delete -->
  144. <template v-if="false">
  145. <!-- 我的服务 -->
  146. <view class="myServer">
  147. <view class="server-title">
  148. 我的服务
  149. </view>
  150. <view class="box">
  151. <view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=0')">
  152. <image src="@/static/image/center/1.png" mode="aspectFill" />
  153. <view class="title">我的订单</view>
  154. </view>
  155. <view class="boxs" @click="$utils.navigateTo('/pages_order/home/contact')">
  156. <image src="@/static/image/center/3.png" mode="aspectFill" />
  157. <view class="title">联系客服</view>
  158. </view>
  159. </view>
  160. <view class="box">
  161. <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/recruit')">
  162. <image src="@/static/image/center/5.png" mode="aspectFill" />
  163. <view class="title">合伙人招募</view>
  164. </view>
  165. <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/help')">
  166. <image src="@/static/image/center/8.png" mode="aspectFill" />
  167. <view class="title">帮助与反馈</view>
  168. </view>
  169. </view>
  170. <view class="box">
  171. <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/address')">
  172. <image src="@/static/image/center/address.png" mode="aspectFill" />
  173. <view class="title">我的地址</view>
  174. </view>
  175. <view class="boxs" @click="$utils.navigateTo('/pages_order/order/giftList')">
  176. <image src="@/static/image/center/9.png" mode="aspectFill" />
  177. <view class="title">礼包列表</view>
  178. </view>
  179. <view class="boxs" @click="logout">
  180. <image src="@/static/image/center/logout.png" mode="aspectFill" />
  181. <view class="title">退出登录</view>
  182. </view>
  183. </view>
  184. </view>
  185. <!-- 广告 -->
  186. <div v-if="showAdvertising" class="ad"
  187. @click="$utils.navigateTo('/pages_order/mine/recruit')">
  188. <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="2000"
  189. :duration="duration">
  190. <swiper-item v-for="(item, index) in adList" :key="index">
  191. <view class="swiper-main">
  192. <view @click="closeAdvertising" class="close">
  193. <image src="@/static/image/center/close.png" mode="aspectFill" class="close-img"></image>
  194. </view>
  195. <image :src="item" mode="aspectFill" class="swiper-main-img"></image>
  196. <div class="ad-tag">
  197. <image src="@/static/image/center/ad-tag.png" mode="aspectFill" class="ad-tag-img"></image>
  198. </div>
  199. </view>
  200. </swiper-item>
  201. </swiper>
  202. </div>
  203. </template>
  204. <tabber select="center" />
  205. </view>
  206. </template>
  207. <script>
  208. import cardTitle from '@/components/base/cardTitle.vue'
  209. import tabber from '@/components/base/tabbar.vue'
  210. import {
  211. mapState
  212. } from 'vuex'
  213. import customerServicePopup from '@/components/config/customerServicePopup.vue'
  214. export default {
  215. components: {
  216. cardTitle,
  217. tabber,
  218. customerServicePopup,
  219. },
  220. computed: {
  221. ...mapState(['userInfo', 'riceInfo']),
  222. adList() {
  223. let arr = [];
  224. if (this.configList?.shop_get_image) {
  225. arr = this.configList?.shop_get_image?.split(',')
  226. }
  227. return arr
  228. }
  229. },
  230. data() {
  231. return {
  232. role: 'merchant', // member-personal | member-business | merchant
  233. vipType: ['普通会员', '黄金会员', '渠道商'],
  234. vipImage: ['vip_vip', 'vip_user', 'vip_shop'],
  235. vipList: [],
  236. showAdvertising: true,
  237. userRole: ['会员', '用户', '渠道']
  238. }
  239. },
  240. onShow() {
  241. this.$store.commit('getUserInfo')
  242. this.$store.commit('getRiceInfo')
  243. this.getMemberCardData();
  244. },
  245. methods: {
  246. clickNo() {
  247. uni.showModal({
  248. title: '暂未开放',
  249. })
  250. },
  251. logout(){
  252. uni.showModal({
  253. title: '确认退出登录吗',
  254. success : (r) => {
  255. if (r.confirm) {
  256. this.$store.commit('logout', true)
  257. }
  258. }
  259. })
  260. },
  261. //关闭广告
  262. closeAdvertising() {
  263. this.showAdvertising = false;
  264. },
  265. //获取会员卡片数据
  266. getMemberCardData() {
  267. this.$api('getRiceVipList', res => {
  268. if (res.code == 200) {
  269. this.vipList = res.result
  270. }
  271. })
  272. },
  273. openServicePopup(phone, title) {
  274. // todo
  275. this.$refs.customerServicePopup.open(phone, title)
  276. },
  277. onScan() {
  278. // todo
  279. uni.scanCode({
  280. success: (res) => {
  281. console.log(res);
  282. if (res.result) {
  283. // 处理扫码结果
  284. console.log('扫码结果:', res.result);
  285. }
  286. },
  287. fail: (err) => {
  288. console.error('扫码失败:', err);
  289. }
  290. });
  291. },
  292. }
  293. }
  294. </script>
  295. <style scoped lang="scss">
  296. .page {
  297. background-color: #F5F5F5;
  298. .header {
  299. height: 550rpx;
  300. background-image: linear-gradient(#84A73F, #D8FF8F);
  301. justify-content: flex-start;
  302. position: relative;
  303. }
  304. // 佣金数据
  305. .brokerage-data {
  306. padding: 20rpx;
  307. background: white;
  308. border-radius: 20rpx;
  309. display: flex;
  310. flex-wrap: wrap;
  311. box-sizing: border-box;
  312. margin: 20rpx 20rpx 20rpx 20rpx;
  313. .brokerage,
  314. .balance {
  315. display: flex;
  316. flex-wrap: wrap;
  317. width: 50%;
  318. .brokerage-img,
  319. .balance-img {
  320. width: 50%;
  321. height: auto;
  322. }
  323. .main {
  324. display: flex;
  325. flex-direction: column;
  326. justify-content: space-around;
  327. width: 50%;
  328. box-sizing: border-box;
  329. padding: 30rpx 0rpx;
  330. .title {
  331. font-size: 34rpx;
  332. }
  333. .money {
  334. font-size: 40rpx;
  335. color: $uni-color;
  336. font-weight: bold;
  337. }
  338. }
  339. }
  340. }
  341. .brokerage-data-mt {
  342. margin-top: 50rpx;
  343. }
  344. // 我的服务
  345. .myServer {
  346. margin: 0rpx 20rpx 20rpx 20rpx;
  347. background: white;
  348. border-radius: 20rpx;
  349. padding: 30rpx 20rpx;
  350. box-sizing: border-box;
  351. box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  352. .server-title {
  353. margin-bottom: 30rpx;
  354. font-size: 36rpx;
  355. font-weight: 600;
  356. color: #333;
  357. position: relative;
  358. padding-left: 20rpx;
  359. &::before {
  360. content: '';
  361. position: absolute;
  362. left: 0;
  363. top: 50%;
  364. transform: translateY(-50%);
  365. width: 8rpx;
  366. height: 32rpx;
  367. background: $uni-color;
  368. border-radius: 4rpx;
  369. }
  370. }
  371. .box {
  372. display: flex;
  373. width: 100%;
  374. margin-bottom: 30rpx;
  375. gap: 20rpx;
  376. .boxs {
  377. width: 23%;
  378. display: flex;
  379. flex-direction: column;
  380. justify-content: center;
  381. align-items: center;
  382. padding: 20rpx 0;
  383. border-radius: 16rpx;
  384. transition: all 0.3s ease;
  385. position: relative;
  386. overflow: hidden;
  387. &::after {
  388. content: '';
  389. position: absolute;
  390. top: 0;
  391. left: 0;
  392. width: 100%;
  393. height: 100%;
  394. background: rgba(227, 68, 26, 0.05);
  395. opacity: 0;
  396. transition: opacity 0.3s ease;
  397. z-index: 1;
  398. }
  399. &:active {
  400. transform: scale(0.95);
  401. &::after {
  402. opacity: 1;
  403. }
  404. }
  405. image {
  406. width: 70rpx;
  407. height: 70rpx;
  408. display: block;
  409. margin: 0rpx auto 16rpx auto;
  410. position: relative;
  411. z-index: 2;
  412. transition: transform 0.3s ease;
  413. }
  414. .title {
  415. font-size: 26rpx;
  416. color: #333;
  417. position: relative;
  418. z-index: 2;
  419. transition: color 0.3s ease;
  420. }
  421. &:active {
  422. image {
  423. transform: translateY(-4rpx);
  424. }
  425. .title {
  426. color: $uni-color;
  427. }
  428. }
  429. }
  430. &:last-child {
  431. margin-bottom: 0rpx;
  432. }
  433. }
  434. }
  435. // 广告
  436. .ad {
  437. margin: 0rpx 20rpx;
  438. .swiper {
  439. .swiper-main {
  440. position: relative;
  441. .close {
  442. position: absolute;
  443. top: 20rpx;
  444. right: 20rpx;
  445. .close-img {
  446. width: 40rpx;
  447. height: 40rpx;
  448. }
  449. }
  450. .swiper-main-img {
  451. width: 100%;
  452. height: 200rpx;
  453. border-radius: 20rpx;
  454. }
  455. .ad-tag {
  456. position: absolute;
  457. left: 20rpx;
  458. bottom: 20rpx;
  459. .ad-tag-img {
  460. width: 120rpx;
  461. height: auto;
  462. }
  463. }
  464. }
  465. }
  466. }
  467. }
  468. .user {
  469. margin-top: 123rpx;
  470. &-avatar {
  471. width: 115rpx;
  472. height: 115rpx;
  473. border-radius: 50%;
  474. }
  475. &-name {
  476. margin-top: 4rpx;
  477. color: $uni-text-color-inverse;
  478. font-size: 30rpx;
  479. }
  480. }
  481. .member {
  482. width: calc(100vw - 13rpx*2);
  483. position: absolute;
  484. bottom: 0;
  485. left: 13rpx;
  486. color: #F5F5F5;
  487. font-size: 22rpx;
  488. background-color: #2B2C30;
  489. border-top-left-radius: 20rpx;
  490. border-top-right-radius: 20rpx;
  491. &-overview {
  492. min-height: 81rpx;
  493. justify-content: space-between;
  494. &.is-member {
  495. justify-content: flex-start;
  496. }
  497. }
  498. .icon {
  499. height: auto;
  500. &-crown {
  501. width: 35rpx;
  502. margin-left: 20rpx;
  503. }
  504. &-member {
  505. width: 62rpx;
  506. }
  507. &-role {
  508. width: 156rpx;
  509. margin-right: 15rpx;
  510. }
  511. &-rights {
  512. width: 56rpx;
  513. margin-right: 11rpx;
  514. }
  515. }
  516. &-btn {
  517. padding: 9rpx 17rpx;
  518. color: #000000;
  519. font-size: 22rpx;
  520. background-image: linear-gradient(131deg, #F8EDE1, #B3997E);
  521. box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
  522. border-radius: 24rpx;
  523. margin-right: 18rpx;
  524. }
  525. &-tips {
  526. margin-left: 6rpx;
  527. }
  528. &-rights {
  529. background-color: #37393D;
  530. position: relative;
  531. width: 100%;
  532. height: 142rpx;
  533. box-sizing: border-box;
  534. &-bg {
  535. width: 100%;
  536. height: 100%;
  537. }
  538. &-content {
  539. position: absolute;
  540. bottom: 0;
  541. width: 100%;
  542. height: 100%;
  543. box-sizing: border-box;
  544. padding: 0 35rpx 6rpx 35rpx;
  545. justify-content: space-between;
  546. }
  547. &-label {
  548. color: #CBAD8F;
  549. font-size: 22rpx;
  550. font-weight: 700;
  551. }
  552. &-value {
  553. color: #F5F5F5;
  554. font-size: 18rpx;
  555. }
  556. }
  557. }
  558. .card {
  559. margin: 20rpx 13rpx 0 13rpx;
  560. }
  561. .account {
  562. padding: 40rpx 40rpx 23rpx 40rpx;
  563. justify-content: space-between;
  564. &-label {
  565. color: #666666;
  566. font-size: 28rpx;
  567. margin-top: 9rpx;
  568. }
  569. &-value {
  570. color: #000000;
  571. font-size: 32rpx;
  572. }
  573. &-unit {
  574. color: #666666;
  575. font-size: 18rpx;
  576. margin-left: 2rpx;
  577. }
  578. }
  579. .fun {
  580. &-header {
  581. text-align: left;
  582. padding-left: 12rpx;
  583. margin-bottom: 19rpx;
  584. /deep/ .title__view {
  585. display: inline-flex;
  586. }
  587. }
  588. &-content {
  589. margin-top: 24rpx;
  590. }
  591. &-common {
  592. padding: 30rpx 40rpx 67rpx 40rpx;
  593. &-content {
  594. display: grid;
  595. grid-template-columns: repeat(4, 1fr);
  596. grid-column-gap: 71rpx;
  597. grid-row-gap: 81rpx;
  598. }
  599. &-icon {
  600. width: 66rpx;
  601. height: auto;
  602. }
  603. &-label {
  604. color: #000000;
  605. font-size: 28rpx;
  606. margin-top: 5rpx;
  607. }
  608. }
  609. &-merchant {
  610. padding: 33rpx 30rpx 28rpx 30rpx;
  611. margin-bottom: 10rpx;
  612. &-content {
  613. justify-content: space-between;
  614. }
  615. .left {
  616. width: 198rpx;
  617. height: 139rpx;
  618. position: relative;
  619. &-bg {
  620. width: 100%;
  621. height: 100%;
  622. }
  623. &-content {
  624. position: absolute;
  625. top: 13rpx;
  626. left: 14rpx;
  627. color: $uni-text-color-inverse;
  628. font-size: 28rpx;
  629. }
  630. &-icon {
  631. width: 23rpx;
  632. height: auto;
  633. margin-left: 9rpx;
  634. }
  635. }
  636. .right {
  637. width: 429rpx;
  638. height: 164rpx;
  639. margin-top: -25rpx;
  640. &-bg {
  641. width: 100%;
  642. height: 100%;
  643. }
  644. }
  645. }
  646. }
  647. </style>