推拿小程序前端代码仓库
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.

460 lines
12 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
  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="@/pages_order/static/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="userInfo.is_merchants" 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="userInfo.is_merchants" 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. <tabber select="center" />
  144. </view>
  145. </template>
  146. <script>
  147. import cardTitle from '@/components/base/cardTitle.vue'
  148. import tabber from '@/components/base/tabbar.vue'
  149. import { mapGetters, mapState } from 'vuex'
  150. import customerServicePopup from '@/components/config/customerServicePopup.vue'
  151. export default {
  152. components: {
  153. cardTitle,
  154. tabber,
  155. customerServicePopup,
  156. },
  157. computed: {
  158. ...mapGetters(['role']),
  159. ...mapState(['userInfo', 'riceInfo']),
  160. },
  161. data() {
  162. return {
  163. }
  164. },
  165. onShow() {
  166. this.$store.commit('getUserInfo')
  167. this.$store.commit('getRiceInfo')
  168. },
  169. methods: {
  170. clickNo() {
  171. uni.showModal({
  172. title: '暂未开放',
  173. })
  174. },
  175. logout(){
  176. uni.showModal({
  177. title: '确认退出登录吗',
  178. success : (r) => {
  179. if (r.confirm) {
  180. this.$store.commit('logout', true)
  181. }
  182. }
  183. })
  184. },
  185. openServicePopup(phone, title) {
  186. // todo
  187. this.$refs.customerServicePopup.open(phone, title)
  188. },
  189. onScan() {
  190. // todo check
  191. uni.scanCode({
  192. success: (res) => {
  193. console.log(res);
  194. if (res.result) {
  195. // 处理扫码结果
  196. console.log('扫码结果:', res.result);
  197. this.$fetch('overOrder', res.result).then(() => {
  198. uni.showToast({
  199. title: '核销成功',
  200. icon: 'none'
  201. })
  202. })
  203. }
  204. },
  205. fail: (err) => {
  206. console.error('扫码失败:', err);
  207. uni.showToast({
  208. title: '扫码失败',
  209. icon: 'none'
  210. })
  211. }
  212. });
  213. },
  214. }
  215. }
  216. </script>
  217. <style scoped lang="scss">
  218. .page {
  219. background-color: #F5F5F5;
  220. .header {
  221. height: 550rpx;
  222. background-image: linear-gradient(#84A73F, #D8FF8F);
  223. justify-content: flex-start;
  224. position: relative;
  225. }
  226. }
  227. .user {
  228. margin-top: 123rpx;
  229. &-avatar {
  230. width: 115rpx;
  231. height: 115rpx;
  232. border-radius: 50%;
  233. }
  234. &-name {
  235. margin-top: 4rpx;
  236. color: $uni-text-color-inverse;
  237. font-size: 30rpx;
  238. text-align: center;
  239. }
  240. }
  241. .member {
  242. width: calc(100vw - 13rpx*2);
  243. position: absolute;
  244. bottom: 0;
  245. left: 13rpx;
  246. color: #F5F5F5;
  247. font-size: 22rpx;
  248. background-color: #2B2C30;
  249. border-top-left-radius: 20rpx;
  250. border-top-right-radius: 20rpx;
  251. &-overview {
  252. min-height: 81rpx;
  253. justify-content: space-between;
  254. &.is-member {
  255. justify-content: flex-start;
  256. }
  257. }
  258. .icon {
  259. height: auto;
  260. &-crown {
  261. width: 35rpx;
  262. margin-left: 20rpx;
  263. }
  264. &-member {
  265. width: 62rpx;
  266. }
  267. &-role {
  268. width: 156rpx;
  269. margin-right: 15rpx;
  270. }
  271. &-rights {
  272. width: 56rpx;
  273. margin-right: 11rpx;
  274. }
  275. }
  276. &-btn {
  277. padding: 9rpx 17rpx;
  278. color: #000000;
  279. font-size: 22rpx;
  280. background-image: linear-gradient(131deg, #F8EDE1, #B3997E);
  281. box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
  282. border-radius: 24rpx;
  283. margin-right: 18rpx;
  284. }
  285. &-tips {
  286. margin-left: 6rpx;
  287. }
  288. &-rights {
  289. background-color: #37393D;
  290. position: relative;
  291. width: 100%;
  292. height: 142rpx;
  293. box-sizing: border-box;
  294. &-bg {
  295. width: 100%;
  296. height: 100%;
  297. }
  298. &-content {
  299. position: absolute;
  300. bottom: 0;
  301. width: 100%;
  302. height: 100%;
  303. box-sizing: border-box;
  304. padding: 0 35rpx 6rpx 35rpx;
  305. justify-content: space-between;
  306. }
  307. &-label {
  308. color: #CBAD8F;
  309. font-size: 22rpx;
  310. font-weight: 700;
  311. }
  312. &-value {
  313. color: #F5F5F5;
  314. font-size: 18rpx;
  315. }
  316. }
  317. }
  318. .card {
  319. margin: 20rpx 13rpx 0 13rpx;
  320. }
  321. .account {
  322. padding: 40rpx 40rpx 23rpx 40rpx;
  323. justify-content: space-between;
  324. &-label {
  325. color: #666666;
  326. font-size: 28rpx;
  327. margin-top: 9rpx;
  328. }
  329. &-value {
  330. color: #000000;
  331. font-size: 32rpx;
  332. }
  333. &-unit {
  334. color: #666666;
  335. font-size: 18rpx;
  336. margin-left: 2rpx;
  337. }
  338. }
  339. .fun {
  340. &-header {
  341. text-align: left;
  342. padding-left: 12rpx;
  343. margin-bottom: 19rpx;
  344. /deep/ .title__view {
  345. display: inline-flex;
  346. }
  347. }
  348. &-content {
  349. margin-top: 24rpx;
  350. }
  351. &-common {
  352. padding: 30rpx 40rpx 67rpx 40rpx;
  353. &-content {
  354. display: grid;
  355. grid-template-columns: repeat(4, 1fr);
  356. grid-column-gap: 71rpx;
  357. grid-row-gap: 81rpx;
  358. }
  359. &-icon {
  360. width: 66rpx;
  361. height: auto;
  362. }
  363. &-label {
  364. color: #000000;
  365. font-size: 28rpx;
  366. margin-top: 5rpx;
  367. }
  368. }
  369. &-merchant {
  370. padding: 33rpx 30rpx 28rpx 30rpx;
  371. margin-bottom: 10rpx;
  372. &-content {
  373. justify-content: space-between;
  374. }
  375. .left {
  376. width: 198rpx;
  377. height: 139rpx;
  378. position: relative;
  379. &-bg {
  380. width: 100%;
  381. height: 100%;
  382. }
  383. &-content {
  384. position: absolute;
  385. top: 13rpx;
  386. left: 14rpx;
  387. color: $uni-text-color-inverse;
  388. font-size: 28rpx;
  389. }
  390. &-icon {
  391. width: 23rpx;
  392. height: auto;
  393. margin-left: 9rpx;
  394. }
  395. }
  396. .right {
  397. width: 429rpx;
  398. height: 164rpx;
  399. margin-top: -25rpx;
  400. &-bg {
  401. width: 100%;
  402. height: 100%;
  403. }
  404. }
  405. }
  406. }
  407. </style>