cansnow
197 lines
6.3 KiB
Vue
197 lines
6.3 KiB
Vue
<template>
|
||
<view>
|
||
<uni-nav-bar
|
||
left-icon="back"
|
||
title="我的会员"
|
||
@clickLeft="goto(1)"
|
||
>
|
||
</uni-nav-bar>
|
||
<view class="m-navbg"></view>
|
||
<view class="m-card n-ms-base n-ps-all-ll n-radius-base n-position-relative">
|
||
<view class="n-flex-row n-align-center">
|
||
<image class="m-avatar" :src="userinfo.avatar"></image>
|
||
<view class="n-ms-left-base">
|
||
<text class="m-card-text n-size-l n-weight-7">{{userinfo.nickname}}</text>
|
||
<text class="m-card-text n-size-ss n-weight-7 n-ms-top-ss">{{userinfo.username}}</text>
|
||
</view>
|
||
</view>
|
||
<text class="m-card-text n-size-s" :style="{marginTop:'50rpx'}">会员到期时间：{{userinfo.role_id==2 ? userinfo.expire_at:'未开通'}}</text>
|
||
<image class="m-card-crown n-position-absolute" src="/static/images/user/member_crown.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="n-ps-base n-ms-top-ll">
|
||
<text class="n-size-l n-weight-7">会员权益</text>
|
||
<view class="n-flex-row n-wrap-wrap n-ms-top-ss">
|
||
<u-cell-group>
|
||
<u-cell :class="[idx%2==0 ? 'n-ms-right-s':'', 'n-bg-page', 'n-radius-s', 'n-ms-top-s', 'n-ps-tb-ss']"
|
||
v-for="(item, idx) in powerList" :key="idx"
|
||
:icon="item.image_text"
|
||
:title="item.title"
|
||
:label="item.content"
|
||
:border="false"
|
||
:iconStyle="{width:'80rpx',height:'80rpx',borderRadius:'40rpx'}" >
|
||
</u-cell>
|
||
</u-cell-group>
|
||
</view>
|
||
</view>
|
||
|
||
<u-gap></u-gap>
|
||
<view class="n-ps-base">
|
||
<text class="n-size-l n-weight-7 n-ms-top-ss">会员套餐</text>
|
||
<scroll-view class="n-flex-row n-ms-top-ll n-wrap-nowrap" :scroll-x="true" :show-scrollbar="false">
|
||
<view :class="[idx==current ? 'm-thali-active':'m-thali', 'n-ps-all-ll', 'n-ms-right-l', 'n-flex-column', 'n-radius-base', 'n-align-center', 'n-position-relative']" v-for="(item, idx) in thaliList" :key="idx" @click="current=idx">
|
||
<text class="n-size-l n-ms-top-s n-weight-7">{{item.title}}</text>
|
||
<view class="n-flex-row n-align-end n-ms-top-base">
|
||
<text class="m-card-text n-size-s">￥</text>
|
||
<text class="m-card-text n-size-ll">{{item.price}}</text>
|
||
</view>
|
||
<text class="n-size-ss n-ms-top-ss n-color-forth n-text-decoration-through">￥{{item.orig_price}}</text>
|
||
<u-tag class="n-ms-bottom-s n-ms-top-base"
|
||
:text="'立省' + (item.orig_price - item.price) + '元'"
|
||
size="mini" shape="circle"
|
||
bgColor="#efcf95"
|
||
borderColor="#efcf95"></u-tag>
|
||
<!-- 标签 -->
|
||
<u-button class="n-position-absolute" v-if="item.label" :text="item.label" :style="{top:0,left:0}" size="mini" color="#fc393f"></u-button>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="n-flex-row n-ms-top-l n-justify-center">
|
||
<view class="n-flex-row n-wrap-wrap n-align-start n-ms-top-base n-align-center">
|
||
<view>
|
||
<u-checkbox-group activeColor="#efcf95" shape="circle">
|
||
<u-checkbox name="1" size="17" @change="change"></u-checkbox>
|
||
</u-checkbox-group>
|
||
</view>
|
||
<text class="n-size-ss n-lh-base n-color-third">已阅读并同意</text>
|
||
<text class="n-size-ss n-lh-base n-color-link" v-for="(item, idx) in contractList" :key="idx"
|
||
@click="goto(item.router)" :style="{color:'#8e6927'}">《{{item.title}}》</text>
|
||
</view>
|
||
</view>
|
||
<view class="n-flex-row">
|
||
<u-button class="n-flex-1 n-ms-top-base n-ms-right-base" v-if="config.member_link" @click="goto('/pages/common/webview' + queryParams({src:config.member_link,title:'购买激活码'}))" text="购买激活码" shape="circle" color="#fdc384" throttleTime="1000" plain></u-button>
|
||
<u-button class="n-flex-1 n-ms-top-base" @click="showPopup" text="兑换会员" shape="circle" color="linear-gradient(to right, #fee1b7, #fdc384)" throttleTime="1000"></u-button>
|
||
</view>
|
||
</view>
|
||
<!-- 兑换会员弹窗 -->
|
||
<MPopup ref="popup" @submit="submit" title="兑换会员" place="请输入激活码" padding="l" buttonText="立即兑换" buttonColor="#fdc384"></MPopup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import MPopup from "./m-popup";
|
||
import util from "@/util/index.js"
|
||
export default {
|
||
components:{MPopup},
|
||
data() {
|
||
return {
|
||
current: 0,
|
||
userinfo: {},
|
||
thaliList: [],
|
||
powerList: [],
|
||
contractList: [],
|
||
contractValue: false
|
||
}
|
||
},
|
||
computed: {
|
||
selfInfo() {
|
||
return this.$store.getters.storeSelfInfo;
|
||
},
|
||
config() {
|
||
return this.$store.getters.config;
|
||
},
|
||
},
|
||
onLoad() {
|
||
// 获取用户信息
|
||
this.getUserinfo()
|
||
// 获取会员套餐
|
||
this.getMemberThali()
|
||
// 获取会员权益
|
||
this.getMemberPower()
|
||
this.contractList = [
|
||
{title:'用户协议', router:'/pages/common/webview' + this.queryParams({src:'contract', title:'用户协议'})},
|
||
];
|
||
},
|
||
methods: {
|
||
goto:util.goto,
|
||
queryParams(){
|
||
return "1";
|
||
},
|
||
// 数据提交
|
||
submit(code) {
|
||
return 1;
|
||
memberExchange({code:code}, {custom:{auth:true}}).then(res=>{
|
||
// 更新用户信息
|
||
this.getUserinfo(true)
|
||
})
|
||
},
|
||
// 展示弹窗
|
||
showPopup() {
|
||
if(!this.contractValue){
|
||
return showToast('请阅读并同意用户协议')
|
||
}
|
||
this.$refs['popup'].open()
|
||
},
|
||
// 获取用户信息
|
||
async getUserinfo(refresh) {
|
||
await this.$store.dispatch("user/updateBusinessInfo");
|
||
},
|
||
// 获取会员套餐
|
||
getMemberThali() {
|
||
return 1;
|
||
uni.$u.http.post('/friendcircle/create',param).then(res => {
|
||
});
|
||
getMemberThali((res)=>{ this.thaliList = res })
|
||
},
|
||
// 获取会员套餐
|
||
getMemberPower() {
|
||
return 1;
|
||
getMemberPower((res)=>{ this.powerList = res })
|
||
},
|
||
change(e){
|
||
console.log(e);
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
// 获取用户信息
|
||
this.getUserinfo()
|
||
// 获取会员套餐
|
||
this.getMemberThali()
|
||
// 获取会员权益
|
||
this.getMemberPower()
|
||
// 获取系统配置
|
||
this.config = getApp().globalData.config
|
||
uni.stopPullDownRefresh();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.m-card{
|
||
margin-top: -160rpx;
|
||
background-image: linear-gradient(to right, #feebc6, #efcf95);
|
||
&-text{
|
||
color: #8e6927;
|
||
}
|
||
&-crown{
|
||
right: 10rpx;
|
||
width: 220rpx;
|
||
bottom: 10rpx;
|
||
opacity: 0.2;
|
||
}
|
||
}
|
||
.m-thali{
|
||
border: 1px solid #f1f1f1;
|
||
&-active{
|
||
background-color: #fef8ec;
|
||
border: 1px solid #f4c38b;
|
||
}
|
||
}
|
||
.m-navbg{
|
||
height: 200rpx;
|
||
background-color: #282623;
|
||
}
|
||
.m-avatar{
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 60rpx;
|
||
}
|
||
</style> |