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>
      <view class="member-right">
        <image src='../../static/images/vipStar.png'></image>
        <text>会员等级{{vipData.findIndex((item) => item == 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 3" :key="index">
        <view class="equity-grade">
          <image src='../../static/images/member240.png'></image>
          <text>办理日期：2021.12.30</text>
        </view>
        <view class="equity-money">
          <view class="money-box money-completed">
            <text>已返回金额（元）</text>
            <view>
              <text class="money-text">80</text>
              <text class="money-detailed">查看明细></text>
            </view>
          </view>
          <view class="money-box money-treat">
            <text>已返回金额（元）</text>
            <text class="money-text">80</text>
          </view>
          <view class="money-box money-term">
            <text>已返回金额（元）</text>
            <text class="money-text">80</text>
          </view>
          <view class="money-box money-time">
            <text>已返回金额（元）</text>
            <text class="money-text">80</text>
          </view>
        </view>
      </view>
    </view>
    <u-navbar leftIcon="" title="会员申请">
      <view class="u-nav-slot" slot="right">
        <u-icon name="more-dot-fill" size="50" @click="show = true"></u-icon>
        <u-action-sheet @select="handleSelect" :actions="list" :title="title" :show="show" :closeOnClickOverlay="true" :closeOnClickAction="true" @close="show=false" :safeAreaInsetBottom="true"></u-action-sheet>
      </view>
    </u-navbar>
  </view>
</template>

<script>
  import {
    memberHeadInfo
  } from '@/api/member.js';
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: "member_application",
    data() {
      return {
        title:'管理',
        			list: [
        				{
        					name:'购买记录',
        					fontSize:'28'
        				},
                {
                	name:'为他人充值',
                	fontSize:'28'
                },
        			],
              vipData:['普通会员','中级会员','高级会员'],
        			show: false,
              memberDetail:{}
      };
    },
    computed: mapGetters(['userInfo']),
   async onLoad() {
     const res = await memberHeadInfo()
     this.memberDetail = res.data
    },
    methods: {
      handleRenew(){
        uni.navigateTo({
            url:'/pages/member_renew/index'
          })
      },
      handleSelect(value){
        switch (value.name){
          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;

      .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;
        }
      }

      .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>