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

447 lines
12 KiB
Vue
Raw Permalink 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">
<text class="left-title">{{memberDetail.grade}}</text>
<view class="left-info">
<text>{{userInfo.mobile}}</text>
<text>会员积分{{memberDetail.integral}}</text>
</view>
<!-- <text>再升1级即可获得XX等6项权益</text> -->
<view class="left-button">
<view class="left-shopping" @click="handleRouter('购买记录')">
<text>购买记录</text>
<image src="../../static/images/shopping-right.png" ></image>
</view>
<view class="left-others" @click="handleRouter('代他人充值')">
<image src="../../static/images/others-right.png" ></image>
</view>
</view>
</view>
<view class="member-right">
<image src='../../static/images/vipStar.png'></image>
<text>会员等级{{vipData.findIndex((item) => item == memberDetail.grade) +1}}</text>
<button @click="handleRenew" class="right-button">立即续费</button>
</view>
</view>
<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">{{list[list.findIndex((i) => item.gear == i.name)].frequency}}x12</text>
</view>
<view class="money-box money-time">
<text>返费结束时间</text>
<text class="money-text">{{item.endTime}}</text>
</view>
</view>
</view>
</view>
<u-navbar leftIcon="" title="会员权益"></u-navbar>
</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',
name:"360",
frequency:30
},
{
img:'../../static/images/member400.png',
name:"600",
frequency:50
},
{
img:'../../static/images/member640.png',
name:"960",
frequency:80
},
],
vipData:['普通会员','中级会员','高级会员'],
show: false,
memberDetail:{},
equityData:[]
};
},
computed: mapGetters(['userInfo']),
async onShow() {
const resful = await memberGradeInfo()
if(resful.data.some((item) => !!parseInt(item.isExist))){
uni.setTabBarItem({
index: 2,
pagePath: '/pages/member_equity/index',
visible:true,
})
uni.setTabBarItem({
index: 1,
pagePath: '/pages/member_application/index',
visible:false,
})
}else{
uni.setTabBarItem({
index: 1,
pagePath: '/pages/member_application/index',
visible:true,
})
uni.setTabBarItem({
index: 2,
pagePath: '/pages/member_equity/index',
visible:false,
})
uni.switchTab({
url:'/pages/member_application/index',
})
}
const res = await memberHeadInfo()
this.memberDetail = res.data
const equity = await query(this.userInfo.mobile)
this.equityData = equity.data
},
methods: {
dateConvert(date){
const _date = new Date(date)
_date.setFullYear(_date.getFullYear() + 1)
_date.setDate(_date.getDate() - 30)
const Y = _date.getFullYear() + "-"
const M =
(_date.getMonth() + 1 < 10
? "0" + (_date.getMonth() + 1)
: _date.getMonth() + 1) + "-";
const D = (_date.getDate() < 10 ? "0" + _date.getDate() : _date.getDate())
return Y + M + D
},
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 {
padding-bottom: 20%;
margin-top: 10%;
background: #fff;
background: url(../../static/images/memberBg.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
.u-nav-slot{
::v-deep .u-popup__content{
padding-bottom: 20% !important;
}
}
.box-member {
padding: 36rpx 40rpx;
border-radius: 20rpx;
width: 100%;
// padding: 20rpx 20rpx 30rpx 20rpx;
display: flex;
justify-content: space-between;
line-height: 50rpx;
.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;
}
.left-button{
display: flex;
justify-content: space-between;
margin-top: 10rpx;
image{
width: 24rpx;
height: 24rpx;
margin-left: 13rpx;
}
.left-shopping{
display: flex;
align-items: center;
justify-content: center;
width: 204rpx;
height: 61rpx;
background: #F8EFF0;
border: 1px solid #F783B0;
border-radius: 30rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
}
.left-others{
background-image: url("../../static/images/others-button.png");
background-size: 204rpx 61rpx;
display: flex;
align-items: center;
justify-content: center;
width: 204rpx;
height: 61rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
}
}
.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;
}
.right-button {
border-radius: 18rpx;
margin-top: 10rpx;
padding: 7rpx 16rpx;
background: #F22E60;
border-image: linear-gradient(0deg, #A8052E, #FFFFFF) 10 10;
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%;
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>