cyywl_server/yudao-ui-app/pages/member_equity/index.vue

179 lines
4.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="box">
<view class="box-member">
<view class="member-left">
<view class="left-title">
<text>创盈普通会员</text>
<text>152****0693</text>
</view>
<text>会员积分240/640</text>
<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">
<text class="equity-title">我的会员权益</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-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: [
{
type: 'string',
min: 2,
max: 12,
required: true,
message: '请填写收件人名称',
trigger: ['blur', 'change']
},
{
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: .8;
}
.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;
justify-content: space-between;
.equity-title{
font-size: 36rpx;
font-weight: bolder;
}
}
.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>