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

326 lines
8.1 KiB
Vue
Raw Normal View History

2023-05-24 17:51:37 +08:00
<template>
<view class="box">
2023-05-24 19:59:44 +08:00
<view class="list-item" >
<view class="item-title">
<view class="item-phone">
<view></view>
<text>充值号码{{memberDetail.userPhone}}</text>
2023-05-24 17:51:37 +08:00
</view>
</view>
2023-05-24 19:59:44 +08:00
<view class="item-text">
<text>充值档次{{memberDetail.grade}}</text>
</view>
</view>
2023-05-24 17:51:37 +08:00
<view class="box-equity">
<view class="equity-text">
<view >
<image src='../../static/images/memberLogo.png'></image>
<text class="equity-member">我的会员权益</text>
</view>
<text class="equity-look">查看权益></text>
</view>
<view class="equity-item" v-for="(item,index) in equityData" :key="index">
<view class="equity-grade">
<image :src='list[list.findIndex((i) => item.gear == i.name)].img'></image>
<text>办理日期{{item.startTime}}</text>
</view>
<view class="equity-money">
<view class="money-box money-completed">
<text>已返回金额</text>
<view>
<text class="money-text">{{item.totalMoney}}</text>
<text class="money-detailed" @click="handleDetailed(item.reportId)">></text>
</view>
</view>
<view class="money-box money-treat">
<text>带返还金额 () </text>
<text class="money-text">{{list[list.findIndex((i) => item.gear == i.name)].name-item.totalMoney}}</text>
</view>
<view class="money-box money-term">
<text>带返还期额</text>
<text class="money-text">{{item.frequency}}x12</text>
</view>
<view class="money-box money-time">
<text>返费结束时间</text>
<text class="money-text">{{item.endTime}}</text>
</view>
</view>
</view>
</view>
2023-05-25 14:33:27 +08:00
<u-navbar autoBack title="购买纪录"></u-navbar>
2023-05-24 17:51:37 +08:00
</view>
</template>
<script>
import {
memberHeadInfo,
memberGradeInfo,
query
} from '@/api/member.js';
import {
mapGetters
} from 'vuex'
export default {
name: "member_application",
data() {
return {
list: [
{
img:'../../static/images/member240.png',
2023-05-24 19:59:44 +08:00
name:360
2023-05-24 17:51:37 +08:00
},
{
img:'../../static/images/member400.png',
2023-05-24 19:59:44 +08:00
name:600
2023-05-24 17:51:37 +08:00
},
{
img:'../../static/images/member960.png',
2023-05-24 19:59:44 +08:00
name:900
2023-05-24 17:51:37 +08:00
},
],
vipData:['普通会员','中级会员','高级会员'],
show: false,
memberDetail:{},
equityData:[]
};
},
computed: mapGetters(['userInfo']),
2023-05-24 19:59:44 +08:00
async onLoad(options) {
this.memberDetail = options
2023-05-24 17:51:37 +08:00
const equity = await query(this.userInfo.mobile)
this.equityData = equity.data
},
methods: {
handleDetailed(reportId){
uni.navigateTo({
url:`/pages/member_detail/index?reportId=${reportId}`,
})
},
handleRenew(){
uni.navigateTo({
url:'/pages/member_renew/index'
})
},
handleRouter(value){
switch (value){
case "购买记录":
uni.navigateTo({
url:'/pages/member_record/index'
})
break;
case "为他人充值":
uni.navigateTo({
url:'/pages/member_others/index'
})
break;
default:
break;
}
},
}
};
</script>
<style lang="scss" scoped>
.box {
2023-05-24 19:59:44 +08:00
padding: 40rpx 20rpx;
2023-05-24 17:51:37 +08:00
margin-top: 10%;
background: #fff;
height: 100vh;
background: url(../../static/images/memberBg.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
2023-05-24 19:59:44 +08:00
.list-item{
margin-bottom: 10%;
padding: 30rpx 16rpx 25rpx 16rpx;
background: #FDF0F1;
2023-05-24 17:51:37 +08:00
border-radius: 20rpx;
display: flex;
2023-05-24 19:59:44 +08:00
flex-direction: column;
2023-05-24 17:51:37 +08:00
justify-content: space-between;
2023-05-24 19:59:44 +08:00
.item-title{
2023-05-24 17:51:37 +08:00
display: flex;
justify-content: space-between;
2023-05-24 19:59:44 +08:00
.item-phone{
2023-05-24 17:51:37 +08:00
display: flex;
2023-05-24 19:59:44 +08:00
align-items: center;
font-size: 30rpx;
color: #E91D51;
view{
border-radius: 3rpx;
margin-right: 10rpx;
width: 5rpx;
height: 12rpx;
background: #E91D51;
2023-05-24 17:51:37 +08:00
}
}
2023-05-24 19:59:44 +08:00
button{
padding: 6rpx ;
font-size: 26rpx;
background: rgb(22,155,213);
color: #fff;
}
2023-05-24 17:51:37 +08:00
}
2023-05-24 19:59:44 +08:00
.item-text{
padding: 34rpx 12rpx;
background: #fff;
margin-top: 20rpx;
2023-05-24 17:51:37 +08:00
display: flex;
justify-content: space-between;
2023-05-24 19:59:44 +08:00
font-size: 30rpx;
2023-05-24 17:51:37 +08:00
}
}
2023-05-24 19:59:44 +08:00
2023-05-24 17:51:37 +08:00
.box-equity {
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%;
view{
display: flex;
align-items: center;
justify-content: center;
width: 44%;
image{
width: 26rpx;
height: 26rpx;
}
}
.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;
.equity-grade {
border-radius: 10rpx 10rpx;
padding: 20rpx;
display: flex;
justify-content: space-between;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
image{
width: 295rpx;
height: 35rpx;
}
}
.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>