283 lines
7.2 KiB
Vue
283 lines
7.2 KiB
Vue
<template>
|
||
<view class="box">
|
||
<view class="box-member">
|
||
<view class="member-left">
|
||
<text class="left-title">创盈普通会员</text>
|
||
<view class="left-info">
|
||
<text>152****0693</text>
|
||
<text>会员积分：240/640</text>
|
||
</view>
|
||
<text>再升1级即可获得【XX】等6项权益</text>
|
||
</view>
|
||
<view class="member-right">
|
||
<image src='../../static/images/vipStar.png'></image>
|
||
<text >会员等级3级</text>
|
||
<button>立即续费</button>
|
||
</view>
|
||
</view>
|
||
<view class="box-equity">
|
||
<view class="equity-text">
|
||
<text class="equity-member">我的会员权益</text>
|
||
<text class="equity-look">查看权益></text>
|
||
</view>
|
||
<view class="equity-item" v-for="(item,index) in 2" :key="index">
|
||
<view class="equity-grade">
|
||
<text>办理档次【640元】档</text>
|
||
<text>办理日期：2021.12.30</text>
|
||
</view>
|
||
<view class="equity-money">
|
||
<view class="money-box money-completed">
|
||
<text>已返回金额（元）</text>
|
||
<view>
|
||
<text class="money-text">80</text>
|
||
<text class="money-detailed">查看明细></text>
|
||
</view>
|
||
</view>
|
||
<view class="money-box money-treat">
|
||
<text>已返回金额（元）</text>
|
||
<text class="money-text">80</text>
|
||
</view>
|
||
<view class="money-box money-term">
|
||
<text>已返回金额（元）</text>
|
||
<text class="money-text">80</text>
|
||
</view>
|
||
<view class="money-box money-time">
|
||
<text>已返回金额（元）</text>
|
||
<text class="money-text">80</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "member_application",
|
||
data() {
|
||
return {
|
||
form: {
|
||
phone:''
|
||
},
|
||
rules: {
|
||
phone: [
|
||
{
|
||
pattern: /^[0-9a-zA-Z]*$/g,
|
||
// 正则检验前先将值转为字符串
|
||
transform(value) {
|
||
return String(value);
|
||
},
|
||
message: '只能包含字母或数字'
|
||
},
|
||
{
|
||
message: '手机号不能为空',
|
||
// 触发器可以同时用blur和change
|
||
trigger: ['change', 'blur']
|
||
}
|
||
]
|
||
}
|
||
};
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
submit() {
|
||
|
||
this.$refs.uForm.validate().then(res => {
|
||
uni.$u.toast('校验通过')
|
||
}).catch(errors => {
|
||
uni.$u.toast('校验失败')
|
||
})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.box {
|
||
background: #fff;
|
||
height: 100vh;
|
||
background: url(../../static/images/memberBg.png);
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
background-attachment: fixed;
|
||
.box-member {
|
||
padding: 36rpx 40rpx;
|
||
border-radius: 20rpx;
|
||
width: 100%;
|
||
// padding: 20rpx 20rpx 30rpx 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.member-left{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: 69%;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
.left-title{
|
||
font-size: 35rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
color: #000000;
|
||
}
|
||
.left-info{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.member-right{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 22%;
|
||
font-size: 22rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
button{
|
||
margin-top: 10rpx;
|
||
padding: 7rpx 16rpx;
|
||
background: #F22E60;
|
||
border-image: linear-gradient(0deg, #A8052E, #FFFFFF) 10 10;
|
||
border-radius: 18rpx;
|
||
font-size: 22rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-equity {
|
||
// border-radius: 20rpx;
|
||
width: 100%;
|
||
padding: 0 40rpx;
|
||
background: url(../../static/images/memberEquity.png);
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
|
||
.equity-text{
|
||
margin:5% 0;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 10%;
|
||
.equity-member{
|
||
margin: 0 10%;
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.equity-look{
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #FF4922;
|
||
}
|
||
}
|
||
.equity-item {
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
border-radius: 20rpx;
|
||
margin: 0 20rpx 20rpx 20rpx;
|
||
// padding: 30rpx 24rpx;
|
||
.equity-grade{
|
||
border-radius: 10rpx 10rpx;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.equity-money {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
.money-box{
|
||
width: 46%;
|
||
padding: 24rpx 25rpx;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
margin-bottom: 18rpx;
|
||
.money-text{
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
|
||
}
|
||
}
|
||
.money-completed{
|
||
background: #FFF2F2;
|
||
border: 1px solid #F22E60;
|
||
.money-text{
|
||
color: #F91F57;
|
||
}
|
||
view{
|
||
margin-top:26rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.money-treat{
|
||
background: #FFFDF1;
|
||
border: 1px solid #FF962F;
|
||
.money-text{
|
||
margin-top: 26rpx;
|
||
color: #EBAF00;
|
||
}
|
||
}
|
||
.money-term{
|
||
background: #F8FFF8;
|
||
border: 1px solid #38A74F;
|
||
.money-text{
|
||
margin-top: 26rpx;
|
||
color: #2C9E2C;
|
||
}
|
||
}
|
||
.money-time{
|
||
background: #F0FDFC;
|
||
border: 1px solid #5CA4E8;
|
||
.money-text{
|
||
margin-top: 26rpx;
|
||
color: #2D7AC9;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</style>
|