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

<template>
  <view class="box">
    <view class="box-member">
      <view class="member-left">
        <view class="left-title">
          <text>创盈普通会员</text>
          <text>152****0693</text>
        </view>
        <text>会员积分：240/640</text>
        <text>再升1级即可获得【XX】等6项权益</text>
      </view>
      <view class="member-right">
   <image src='../../static/images/f.png'></image>
   <text >
     立即续费
   </text>
      </view>
    </view>
    <view class="box-equity">
      <view class="equity-text">
        <text class="equity-title">我的会员权益</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-text">
            <text>已返回金额（元）</text>
            <view>
              <text>80</text>
              <text class="money-detailed">查看明细></text>
            </view>
          </view>
          <view class="money-text">
            <text>已返回金额（元）</text>
            <text>80</text>
          </view>
          <view class="money-text">
            <text>已返回金额（元）</text>
            <text>80</text>
          </view>
          <view class="money-text">
            <text>已返回金额（元）</text>
            <text>80</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "member_application",
    data() {
      return {
        form: {
          phone:''
        },
        rules: {
          phone: [
            {
              type: 'string',
              min: 2,
              max: 12,
              required: true,
              message: '请填写收件人名称',
              trigger: ['blur', 'change']
            },
            {
              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 {
    padding: 10rpx 24rpx;

    .box-member {
      border-radius: 20rpx;
      width: 100%;
      padding: 20rpx 20rpx 30rpx 20rpx;
      background: rgb(255, 210, 91);
      display: flex;
      justify-content: space-between;
      .member-left{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: .8;
      }
      .member-right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex: .2;
        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-bottom: 10rpx;
        }
      }
    }

    .box-equity {
      border-radius: 20rpx;
      width: 100%;
      margin-top: 10%;
      padding: 40rpx 10rpx 40rpx 10rpx;
      background: #fff;
      display: flex;
      flex-direction: column;
      .equity-text{
        display: flex;
        justify-content: space-between;
        .equity-title{
          font-size: 36rpx;
          font-weight: bolder;
        }
      }
      .equity-item {
        background: #eee;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 20rpx;
        margin: 10rpx;

        .equity-grade{
          background: greenyellow;
          border-radius: 10rpx 10rpx;
          padding: 20rpx;
          display: flex;
          justify-content: space-between;
        }
        .equity-money {
          // background: #fff;
          // line-height: 36rpx;
          // text-align: center;
          // font-size: 24rpx;
          .equity-money{
            background: #fff;
          }
        }
      }
    }


  }
</style>