<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>
    <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>
  export default {
    name: "member_application",
    data() {
      return {
        title:'管理',
        			list: [
        				{
        					name:'购买记录',
        					fontSize:'28'
        				},
                {
                	name:'为他人充值',
                	fontSize:'28'
                },
        			],
        			show: false,
        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: {
      handleSelect(value){
        switch (value.name){
          case "购买记录":
          uni.navigateTo({
            url:'/pages/member_record/index'
          })
          break;
          case "为他人充值":
          console.log(123)
          uni.navigateTo({
            url:'/pages/member_others/index'
          })
          break;
          default:
          break;
        }
      },
      submit() {

        this.$refs.uForm.validate().then(res => {
          uni.$u.toast('校验通过')
        }).catch(errors => {
          uni.$u.toast('校验失败')
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .box {
    margin-top: 10%;
    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>
