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

<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 == parseInt(memberDetail.grade)) +1}}级</text>
        <button @click="handleRenew">立即续费</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">{{item.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
        				},
                {
                	img:'../../static/images/member400.png',
                	name:600
                },
                {
                	img:'../../static/images/member960.png',
                	name:900
                },
        			],
              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'
            })
          }else{
            uni.setTabBarItem({
              index: 2,
              pagePath: '/pages/member_application/index'
            })
            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: {
      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 {
    margin-bottom: 30%;
    margin-top: 10%;
    background: #fff;
    height: 100vh;
    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;
        }

        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%;
        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>