<template>
|
<view>
|
<header>
|
<u-icon name="arrow-left" size="25" color="#D7DFE3" style="cursor: pointer;" @click="goback"></u-icon>
|
<view class="title">
|
升级会员
|
</view>
|
</header>
|
<main>
|
<view class="" style="padding: 0.5em;border-bottom: 1px solid #DDDDDD;">
|
<u--text text="当前级别：普通用户" color="#E64340" :bold="true" size='17'
|
style="margin-bottom: 0.5em;"></u--text>
|
<u--text text="请选择要升到的级别" size='16'></u--text>
|
</view>
|
|
<u-radio-group v-model="radiovalue" placement="column" @change="groupChange">
|
<u-radio v-for="(item, index) in radiolist" :key="index" :label="item.name" :name="item.name"
|
activeColor="red" class="radioClass" @change="radioChange">
|
</u-radio>
|
</u-radio-group>
|
<view class="radioClass">
|
开票信息：<u--text text="空" color="#336699"></u--text>
|
</view>
|
<view class="radioClass">
|
电子邮箱：<u--text text="未填写" color="#336699"></u--text>
|
</view>
|
|
<!-- <view class="radioClass" style="background-color: #fff;">
|
<u--text text="点击此处设置或修改开票与邮箱信息" align="center" style="cursor: pointer;" color="#336699"
|
decoration="underline"></u--text>
|
</view> -->
|
<view class="radioClass" style="border: none;">
|
<u--text text="备注:1111111111111111111111111" color="#FF3300"></u--text>
|
</view>
|
<view class="button">
|
确认升级
|
</view>
|
<view class="smTitle">
|
<view class="" style="width: 50%;">
|
用户类别
|
</view>
|
<view class="" style="width: 50%;">
|
权限说明
|
</view>
|
</view>
|
<ul>
|
<li>
|
<view class="" style="width: 50%;padding: 1em;">
|
<u--text text="普通用户" align="center"></u--text>
|
<u--text text="(有效期一年)" align="center" color="#E64367" size="16"></u--text>
|
</view>
|
<view class="">
|
<u--text text="监控专利:5件" align="center"></u--text>
|
<u--text text="体验费用:0元/年" align="center"></u--text>
|
<u--text text="代缴服务费:30元/件" align="center"></u--text>
|
</view>
|
</li>
|
<li>
|
<view class="" style="width: 50%;padding: 1em;">
|
<u--text text="初级会员" align="center"></u--text>
|
<u--text text="(有效期一年)" align="center" color="#E64367" size="16"></u--text>
|
</view>
|
<view class="">
|
<u--text text="监控专利:5件" align="center"></u--text>
|
<u--text text="体验费用:0元/年" align="center"></u--text>
|
<u--text text="代缴服务费:30元/件" align="center"></u--text>
|
</view>
|
</li>
|
<li>
|
<view class="" style="width: 50%;padding: 1em;">
|
<u--text text="中级会员" align="center"></u--text>
|
<u--text text="(有效期一年)" align="center" color="#E64367" size="16"></u--text>
|
</view>
|
<view class="">
|
<u--text text="监控专利:5件" align="center"></u--text>
|
<u--text text="体验费用:0元/年" align="center"></u--text>
|
<u--text text="代缴服务费:30元/件" align="center"></u--text>
|
</view>
|
</li>
|
<li>
|
<view class="" style="width: 50%;padding: 1em;">
|
<u--text text="普通用户" align="center"></u--text>
|
<u--text text="(有效期一年)" align="center" color="#E64367" size="16"></u--text>
|
</view>
|
<view class="">
|
<u--text text="监控专利:5件" align="center"></u--text>
|
<u--text text="体验费用:0元/年" align="center"></u--text>
|
<u--text text="代缴服务费:30元/件" align="center"></u--text>
|
</view>
|
</li>
|
<li>
|
<view class="" style="width: 50%;padding: 1em;">
|
<u--text text="高级会员" align="center"></u--text>
|
<u--text text="(有效期一年)" align="center" color="#E64367" size="16"></u--text>
|
</view>
|
<view class="">
|
<u--text text="至尊会员:5件" align="center"></u--text>
|
<u--text text="体验费用:0元/年" align="center"></u--text>
|
<u--text text="代缴服务费:30元/件" align="center"></u--text>
|
</view>
|
</li>
|
</ul>
|
</main>
|
</view>
|
</template>
|
<script>
|
export default {
|
components: {},
|
data() {
|
return {
|
radiolist: [{
|
name: '初级会员，49元/年',
|
disabled: false
|
},
|
{
|
name: '中级会员，49元/年',
|
disabled: false
|
},
|
{
|
name: '高级会员，49元/年',
|
disabled: false
|
}, {
|
name: '至尊会员，49元/年',
|
disabled: false
|
}
|
],
|
radiovalue: '初级会员，49元/年',
|
|
|
};
|
},
|
onShow() {
|
//加载
|
},
|
onLoad() {
|
|
},
|
methods: {
|
|
goback() {
|
uni.navigateBack({
|
delta: 1
|
})
|
},
|
radioChange() {
|
|
},
|
groupChange(n) {},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
header {
|
height: 3em;
|
line-height: 3em;
|
background: #3399CC;
|
text-align: center;
|
position: relative;
|
|
.u-icon {
|
position: absolute;
|
left: 5px;
|
top: 0.5em;
|
}
|
|
.title {
|
color: #fff;
|
font-size: 1.2em;
|
}
|
}
|
|
main {
|
|
.radioClass {
|
padding-left: 0.5em;
|
border-bottom: 1px solid #DDDDDD;
|
height: 3em;
|
line-height: 3em;
|
display: flex;
|
}
|
|
.button {
|
background-color: #3399CC;
|
height: 3em;
|
line-height: 3em;
|
text-align: center;
|
color: #fff;
|
margin: 0 5px;
|
border-radius: 0.3em;
|
font-size: 1.2em;
|
cursor: pointer;
|
}
|
|
.smTitle {
|
height: 3em;
|
line-height: 3em;
|
background-color: #CCCCCC;
|
|
display: flex;
|
color: #FFF7EB;
|
font-size: 1em;
|
text-align: center;
|
margin-top: 10px;
|
}
|
ul{
|
li{
|
// height: 3em;
|
display: flex;
|
border-bottom: 1px solid #DDDDDD;
|
}
|
}
|
}
|
</style>
|
