珠宝小程序前端代码
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.

506 lines
11 KiB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. <template>
  2. <view class="page">
  3. <!-- 导航栏 -->
  4. <navbar title="个人中心"
  5. leftClick
  6. @leftClick="$utils.navigateBack"
  7. bgColor="#E3441A" color="#fff" />
  8. <!-- 头部 -->
  9. <view class="head">
  10. <view class="headImage">
  11. <image :src="userInfo.headImage" mode="aspectFill"></image>
  12. </view>
  13. <view class="user-info">
  14. <view class="user-base-info">
  15. <view class="user-base-top">
  16. <view class="user-name">{{ userInfo.nickName}}</view>
  17. <view class="member-level">
  18. <image v-if="userInfo.role == 1" :src="configList.vip_user" mode="aspectFill" class="level">
  19. </image>
  20. <image v-if="userInfo.role == 2" src="@/static/image/center/gold-min.png" mode="aspectFill"
  21. class="level">
  22. </image>
  23. <image v-if="userInfo.role == 3" src="@/static/image/center/sliver-min.png"
  24. mode="aspectFill" class="level">
  25. </image>
  26. </view>
  27. <view class="user-tag">
  28. {{ userRole[userInfo.isPay] }}
  29. </view>
  30. </view>
  31. <view class="edit-user"
  32. @click="$utils.navigateTo('/pages_order/mine/updateUser?back=true')">
  33. <image src="@/static/image/center/edit-icon.png" mode="aspectFill" class="edit-icon"></image>
  34. <view class="edit-btn">
  35. 修改资料
  36. </view>
  37. </view>
  38. </view>
  39. <view class="user-phone">
  40. 手机号:{{ userInfo.phone }}
  41. </view>
  42. </view>
  43. </view>
  44. <!-- 会员卡片 -->
  45. <view @click="$utils.navigateTo({url : '/pages_order/mine/memberCenter' })"
  46. v-if="userInfo.role"
  47. class="earnings">
  48. <view v-if="index + 1 == userInfo.role" v-for="(item,index) in vipList" :key="item.id" class="member-item">
  49. <image :src="item.headImage" mode="aspectFill" class="member-image"></image>
  50. <view class="member-info">
  51. <view class="profile-photo">
  52. <image :src="userInfo.headImage" mode="aspectFill" class="pro-img"></image>
  53. <view class="open-status">
  54. 开通时间{{ riceInfo.openTime }}
  55. </view>
  56. </view>
  57. <view class="open">
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. <!-- 佣金数据 -->
  63. <view @click="$utils.navigateTo('/pages_order/mine/withdraw')" class="brokerage-data"
  64. :class="{'brokerage-data-mt' : !userInfo.role}">
  65. <view class="brokerage">
  66. <image :src="configList.money_image" mode="aspectFill" class="brokerage-img"></image>
  67. <div class="main">
  68. <div class="title">我的佣金</div>
  69. <div class="money">{{ riceInfo.canWithdraw || 0 }}</div>
  70. </div>
  71. </view>
  72. <view class="balance">
  73. <image :src="configList.price_image" mode="aspectFill" class="balance-img"></image>
  74. <div class="main">
  75. <div class="title">我的余额</div>
  76. <div class="money">{{ riceInfo.balance || 0 }}</div>
  77. </div>
  78. </view>
  79. </view>
  80. <!-- 我的服务 -->
  81. <view class="myServer">
  82. <view class="server-title">
  83. 我的服务
  84. </view>
  85. <view class="box">
  86. <view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=0')">
  87. <image src="@/static/image/center/1.png" mode="widthFix" />
  88. <view class="title">我的订单</view>
  89. </view>
  90. <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/partner')">
  91. <image src="@/static/image/center/2.png" mode="widthFix" />
  92. <view class="title">我的团队</view>
  93. </view>
  94. <view class="boxs" @click="$utils.navigateTo('/pages_order/home/contact')">
  95. <image src="@/static/image/center/3.png" mode="widthFix" />
  96. <view class="title">联系客服</view>
  97. </view>
  98. <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/promotion')">
  99. <image src="@/static/image/center/4.png" mode="widthFix" />
  100. <view class="title">邀请好友</view>
  101. </view>
  102. </view>
  103. <view class="box">
  104. <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/recruit')">
  105. <image src="@/static/image/center/5.png" mode="widthFix" />
  106. <view class="title">合伙人招募</view>
  107. </view>
  108. <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
  109. <image src="@/static/image/center/6.png" mode="widthFix" />
  110. <view class="title">会员权益</view>
  111. </view>
  112. <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/coupon')">
  113. <image src="@/static/image/center/7.png" mode="widthFix" />
  114. <view class="title">优惠券</view>
  115. </view>
  116. <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/help')">
  117. <image src="@/static/image/center/8.png" mode="widthFix" />
  118. <view class="title">帮助与反馈</view>
  119. </view>
  120. </view>
  121. <view class="box">
  122. <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/address')">
  123. <image src="@/static/image/center/5.png" mode="widthFix" />
  124. <view class="title">我的地址</view>
  125. </view>
  126. <view class="boxs" @click="$store.commit('logout')">
  127. <image src="@/static/image/center/6.png" mode="widthFix" />
  128. <view class="title">退出登录</view>
  129. </view>
  130. </view>
  131. </view>
  132. <!-- 广告 -->
  133. <div v-if="showAdvertising" class="ad"
  134. @click="$utils.navigateTo('/pages_order/mine/recruit')">
  135. <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="2000"
  136. :duration="duration">
  137. <swiper-item v-for="(item, index) in adList" :key="index">
  138. <view class="swiper-main">
  139. <view @click="closeAdvertising" class="close">
  140. <image src="@/static/image/center/close.png" mode="aspectFill" class="close-img"></image>
  141. </view>
  142. <image :src="item" mode="aspectFill" class="swiper-main-img"></image>
  143. <div class="ad-tag">
  144. <image src="@/static/image/center/ad-tag.png" mode="aspectFill" class="ad-tag-img"></image>
  145. </div>
  146. </view>
  147. </swiper-item>
  148. </swiper>
  149. </div>
  150. <customerServicePopup ref="customerServicePopup" />
  151. <tabber select="center" />
  152. </view>
  153. </template>
  154. <script>
  155. import tabber from '@/components/base/tabbar.vue'
  156. import {
  157. mapState
  158. } from 'vuex'
  159. import customerServicePopup from '@/components/config/customerServicePopup.vue'
  160. export default {
  161. components: {
  162. tabber,
  163. customerServicePopup,
  164. },
  165. computed: {
  166. ...mapState(['riceInfo']),
  167. adList() {
  168. let arr = [];
  169. if (this.configList?.shop_get_image) {
  170. arr = this.configList?.shop_get_image?.split(',')
  171. }
  172. return arr
  173. }
  174. },
  175. data() {
  176. return {
  177. vipType: ['普通会员', '黄金会员', '渠道商'],
  178. vipImage: ['vip_vip', 'vip_user', 'vip_shop'],
  179. vipList: [],
  180. showAdvertising: true,
  181. userRole: ['会员', '用户', '渠道']
  182. }
  183. },
  184. onShow() {
  185. this.$store.commit('getUserInfo')
  186. this.$store.commit('getRiceInfo')
  187. this.getMemberCardData();
  188. },
  189. methods: {
  190. clickNo() {
  191. uni.showModal({
  192. title: '暂未开放',
  193. })
  194. },
  195. //关闭广告
  196. closeAdvertising() {
  197. this.showAdvertising = false;
  198. },
  199. //获取会员卡片数据
  200. getMemberCardData() {
  201. this.$api('getRiceVipList', res => {
  202. if (res.code == 200) {
  203. this.vipList = res.result
  204. }
  205. })
  206. }
  207. }
  208. }
  209. </script>
  210. <style scoped lang="scss">
  211. .page {
  212. // 头部
  213. .head {
  214. display: flex;
  215. align-items: center;
  216. padding: 60rpx 20rpx 120rpx 20rpx;
  217. background: $uni-color;
  218. .headImage {
  219. width: 130rpx;
  220. height: 130rpx;
  221. background-image: url(/static/image/center/head-img.png);
  222. background-repeat: no-repeat;
  223. background-position: 50%, 50%;
  224. background-size: 100%;
  225. overflow: hidden;
  226. border-radius: 50%;
  227. margin-right: 20rpx;
  228. image {
  229. width: 100%;
  230. height: 100%;
  231. }
  232. }
  233. .user-info {
  234. width: calc(100% - 130rpx);
  235. .user-base-info {
  236. display: flex;
  237. flex-wrap: wrap;
  238. justify-content: space-between;
  239. .user-base-top {
  240. width: 65%;
  241. display: flex;
  242. align-items: center;
  243. flex-wrap: wrap;
  244. color: white;
  245. .user-name {
  246. max-width: calc(100% - 240rpx);
  247. white-space: nowrap;
  248. text-overflow: ellipsis;
  249. overflow: hidden;
  250. font-size: 34rpx;
  251. }
  252. .member-level {
  253. margin-left: 10rpx;
  254. .level {
  255. width: 120rpx;
  256. height: 60rpx;
  257. }
  258. }
  259. .user-tag {
  260. display: flex;
  261. align-items: center;
  262. justify-content: center;
  263. background: #000;
  264. width: 100rpx;
  265. height: 40rpx;
  266. border-radius: 20rpx;
  267. font-size: 24rpx;
  268. margin-left: 10rpx;
  269. }
  270. }
  271. .edit-user {
  272. width: 35%;
  273. display: flex;
  274. align-items: center;
  275. justify-content: flex-end;
  276. .edit-icon {
  277. width: 30rpx;
  278. height: 30rpx;
  279. }
  280. .edit-btn {
  281. color: white;
  282. margin-left: 10rpx;
  283. }
  284. }
  285. }
  286. .user-phone {
  287. color: white;
  288. font-size: 24rpx;
  289. }
  290. }
  291. }
  292. // 会员卡片
  293. .earnings {
  294. padding: 0rpx 20rpx;
  295. box-sizing: border-box;
  296. margin-top: -18%;
  297. .member-item {
  298. position: relative;
  299. .member-image {
  300. width: 100%;
  301. height: 300rpx;
  302. border-radius: 20rpx;
  303. }
  304. .member-info {
  305. position: absolute;
  306. bottom: 30rpx;
  307. left: 0rpx;
  308. display: flex;
  309. align-items: center;
  310. padding: 0rpx 40rpx;
  311. box-sizing: border-box;
  312. width: 100%;
  313. .profile-photo {
  314. display: flex;
  315. justify-content: center;
  316. align-items: center;
  317. .pro-img {
  318. width: 60rpx;
  319. height: 60rpx;
  320. border-radius: 50%;
  321. }
  322. .open-status {
  323. color: #F8A95F;
  324. border: 1px solid #F8A95F;
  325. border-radius: 30rpx;
  326. padding: 7rpx 20rpx;
  327. margin-left: 10rpx;
  328. }
  329. }
  330. .open {
  331. font-size: 26rpx;
  332. margin-left: 20rpx;
  333. }
  334. }
  335. }
  336. }
  337. // 佣金数据
  338. .brokerage-data {
  339. padding: 20rpx;
  340. background: white;
  341. border-radius: 20rpx;
  342. display: flex;
  343. flex-wrap: wrap;
  344. box-sizing: border-box;
  345. margin: 20rpx 20rpx 20rpx 20rpx;
  346. .brokerage,
  347. .balance {
  348. display: flex;
  349. flex-wrap: wrap;
  350. width: 50%;
  351. .brokerage-img,
  352. .balance-img {
  353. width: 50%;
  354. height: auto;
  355. }
  356. .main {
  357. display: flex;
  358. flex-direction: column;
  359. justify-content: space-around;
  360. width: 50%;
  361. box-sizing: border-box;
  362. padding: 30rpx 0rpx;
  363. .title {
  364. font-size: 34rpx;
  365. }
  366. .money {
  367. font-size: 40rpx;
  368. color: $uni-color;
  369. font-weight: bold;
  370. }
  371. }
  372. }
  373. }
  374. .brokerage-data-mt {
  375. margin-top: 50rpx;
  376. }
  377. // 我的服务
  378. .myServer {
  379. margin: 0rpx 20rpx 20rpx 20rpx;
  380. background: white;
  381. border-radius: 20rpx;
  382. padding: 20rpx;
  383. box-sizing: border-box;
  384. .server-title {
  385. margin-bottom: 20rpx;
  386. font-size: 34rpx;
  387. }
  388. .box {
  389. display: flex;
  390. width: 100%;
  391. margin-bottom: 20rpx;
  392. .boxs {
  393. width: 25%;
  394. display: flex;
  395. flex-direction: column;
  396. justify-content: center;
  397. align-items: center;
  398. image {
  399. width: 60rpx;
  400. height: 60rpx;
  401. display: block;
  402. margin: 0rpx auto 10rpx auto;
  403. }
  404. }
  405. &:last-child {
  406. margin-bottom: 0rpx;
  407. }
  408. }
  409. }
  410. // 广告
  411. .ad {
  412. margin: 0rpx 20rpx;
  413. .swiper {
  414. .swiper-main {
  415. position: relative;
  416. .close {
  417. position: absolute;
  418. top: 20rpx;
  419. right: 20rpx;
  420. .close-img {
  421. width: 40rpx;
  422. height: 40rpx;
  423. }
  424. }
  425. .swiper-main-img {
  426. width: 100%;
  427. height: 200rpx;
  428. border-radius: 20rpx;
  429. }
  430. .ad-tag {
  431. position: absolute;
  432. left: 20rpx;
  433. bottom: 20rpx;
  434. .ad-tag-img {
  435. width: 120rpx;
  436. height: auto;
  437. }
  438. }
  439. }
  440. }
  441. }
  442. }
  443. </style>