193 lines
4.6 KiB
Vue
193 lines
4.6 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/f.png'></image>
|
||
<text >
|
||
立即续费
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="box-equity">
|
||
<view class="equity-text">
|
||
<view class="equity-title">
|
||
<text>我的会员权益</text>
|
||
</view>
|
||
<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-text">
|
||
<text>已返回金额（元）</text>
|
||
<view>
|
||
<text>80</text>
|
||
<text class="money-detailed">查看明细></text>
|
||
</view>
|
||
</view>
|
||
<view class="money-text">
|
||
<text>已返回金额（元）</text>
|
||
<text>80</text>
|
||
</view>
|
||
<view class="money-text">
|
||
<text>已返回金额（元）</text>
|
||
<text>80</text>
|
||
</view>
|
||
<view class="money-text">
|
||
<text>已返回金额（元）</text>
|
||
<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 {
|
||
padding: 10rpx 24rpx;
|
||
|
||
.box-member {
|
||
border-radius: 20rpx;
|
||
width: 100%;
|
||
padding: 20rpx 20rpx 30rpx 20rpx;
|
||
background: rgb(255, 210, 91);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.member-left{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
flex: .7;
|
||
.left-info{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.member-right{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex: .2;
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-equity {
|
||
border-radius: 20rpx;
|
||
width: 100%;
|
||
margin-top: 10%;
|
||
padding: 40rpx 10rpx 40rpx 10rpx;
|
||
// background: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.equity-text{
|
||
display: flex;
|
||
align-items: center;
|
||
.equity-title{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 240rpx;
|
||
height: 140rpx;
|
||
// background: #fff;
|
||
// border-radius: 8px;/* 设置圆角 */
|
||
}
|
||
.equity-look{
|
||
z-index: 99;
|
||
}
|
||
}
|
||
.equity-item {
|
||
background: #eee;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
border-radius: 20rpx;
|
||
margin: 10rpx;
|
||
|
||
.equity-grade{
|
||
background: greenyellow;
|
||
border-radius: 10rpx 10rpx;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.equity-money {
|
||
// background: #fff;
|
||
// line-height: 36rpx;
|
||
// text-align: center;
|
||
// font-size: 24rpx;
|
||
.equity-money{
|
||
background: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</style>
|