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">创盈普通会员</text>
        <view class="left-info">
          <text>152****0693</text>
          <text>会员积分：240/640</text>
        </view>
        <text>再升1级即可获得【XX】等6项权益</text>
      </view>
      <view class="member-right">
   <image src='../../static/images/vipStar.png'></image>
    <text >会员等级3级</text>
      <button>立即续费</button>
      </view>
    </view>
    <view class="box-equity">
     <view class="equity-text">
        <text class="equity-member">我的会员权益</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-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>
  </view>
</template>

<script>
  export default {
    name: "member_application",
    data() {
      return {
        form: {
          phone:''
        },
        rules: {
          phone: [
           {
           			pattern: /^[0-9a-zA-Z]*$/g,
           			// 正则检验前先将值转为字符串
           			transform(value) {
           				return String(value);
           			},
           			message: '只能包含字母或数字'
           		},
            {
              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 {
    background: #fff;
    height: 100vh;
    background: url(../../static/images/memberBg.png);
     background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
    .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%;
        .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;
        // padding: 30rpx 24rpx;
        .equity-grade{
          border-radius: 10rpx 10rpx;
          padding: 20rpx;
          display: flex;
          justify-content: space-between;
        }
        .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>