17
This commit is contained in:
cansnow
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-popup ref="popup" :closeOnClickOverlay="closeOnClickOverlay" mode="center" bgColor="none">
|
||||
<view :class="['n-ps-all-' + padding, 'n-bg-inverse', 'n-radius-base']" :style="customStyle">
|
||||
<view class="n-flex-column n-align-center">
|
||||
<text class="n-weight-7 n-color-text" :style="{fontSize:'34rpx'}">{{title}}</text>
|
||||
<text class="n-size-ss n-ms-top-s n-color-third" v-if="label">{{label}}</text>
|
||||
</view>
|
||||
<view class="n-flex-column n-align-center n-ms-bottom-ll" v-if="content">
|
||||
<text class="n-size-base n-ms-top-ll n-color-second">{{content}}</text>
|
||||
</view>
|
||||
<u-form class="n-ms-top-l" v-else labelWidth="40rpx" labelPosition="left">
|
||||
<u-form-item :class="['n-radius-' + inputRadius, 'n-bg-page', 'n-ps-base', 'n-ms-bottom-base']">
|
||||
<u-input v-model="input" :type="inputType" :focus="true" :maxlength="maxlength" :placeholder="place" border="none" clearable>
|
||||
<template v-slot:suffix>
|
||||
<text class="n-size-ss n-color-error" v-if="captcha" @click="sendSms">{{code_text}}</text>
|
||||
</template>
|
||||
</u-input>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
<u-button class="n-ms-top-base" @click="submit" :text="buttonText" :color="buttonColor" type="error" shape="circle" throttleTime="1000"></u-button>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 验证码 -->
|
||||
<u-code ref="code" @change="changeCode" :seconds="seconds" :uniqueKey="captchaType" endText="获取验证码"></u-code>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name:"m-popup",
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '提示'
|
||||
},
|
||||
place: {
|
||||
type: String,
|
||||
default: '请输入内容'
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
captcha: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
padding: {
|
||||
type: String,
|
||||
default: 'base'
|
||||
},
|
||||
redirect: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
maxlength: {
|
||||
type: [String, Number],
|
||||
default: 10
|
||||
},
|
||||
inputType: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
buttonText: {
|
||||
type: String,
|
||||
default: '立即提交'
|
||||
},
|
||||
captchaType: {
|
||||
type: String,
|
||||
default: 'notice'
|
||||
},
|
||||
inputRadius: {
|
||||
type: String,
|
||||
default: 'll'
|
||||
},
|
||||
buttonColor: {
|
||||
type: String,
|
||||
default: '#fc3463'
|
||||
},
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default(){
|
||||
return {width:'600rpx',marginBottom:'200rpx'}
|
||||
}
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
seconds: 60,
|
||||
code_text: '获取验证码'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 展示弹窗
|
||||
open() {
|
||||
// 发送验证码
|
||||
if(this.captcha){
|
||||
this.sendSms()
|
||||
}
|
||||
this.$refs['popup'].open()
|
||||
},
|
||||
// 关闭弹窗
|
||||
close() {
|
||||
uni.hideKeyboard()
|
||||
this.$refs['popup'].close()
|
||||
},
|
||||
// 提交数据
|
||||
submit() {
|
||||
// 跳转链接
|
||||
if(this.redirect) {
|
||||
return uni.navigateTo({
|
||||
url:this.redirect
|
||||
})
|
||||
}
|
||||
// 输入提示
|
||||
if(!this.input) return showToast(this.place)
|
||||
|
||||
this.$emit('submit', this.input)
|
||||
|
||||
this.close()
|
||||
this.input = ''
|
||||
},
|
||||
// 获取验证码
|
||||
sendSms() {
|
||||
if(this.$refs['code'].canGetCode){
|
||||
let userinfo = getApp().globalData.userinfo
|
||||
sendSms({type:this.captchaType, mobile:userinfo.mobile}).then(res=>{
|
||||
this.$refs['code'].start()
|
||||
})
|
||||
}
|
||||
},
|
||||
// 验证码变化
|
||||
changeCode(evt) {
|
||||
this.code_text = evt
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,197 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user