<template>
  <div class="coupon">
    <image
    @click="homeBack"
      class="home-jt"
    
      src="/static/images/right-arrow.png"
    />
    <image
      class="home-js"
      mode="aspectFill"
      src="https://activity.wagoo.live/j-activity-1.png"
    />
    <view class="buying">
      <text class="q1">{{remarlist.price}}</text>
      <text class="q2">抢{{remarlist.package_name}}</text>
    </view>
    <text class="buying1">{{remarlist.purchase_amount}}</text>
    <text class="buying2">{{remarlist.package_name}}</text>
    <view class="buying3">
      <view class="item" v-for="(item,index) in remarlist.content"
              :key="index">
        <image
          class="care-j"
          mode="widthFix"
          src="https://activity.wagoo.live/care-j.png"
        />
        <text class="n">{{item.coupon_value}}</text>
      </view>
    </view>
     <text class="buying4">{{remarlist.price}}</text>
      <text class="buying5">{{remarlist.purchase_amount}}</text>
    <view @click="middleInfo" class="buy"></view>
    <view
      v-if="elasticLayer"
      class="elastic-layer"
      @click="(additionalBom = false), (elasticLayer = false)"
    />
    <view class="additional-bottom" v-if="additionalBom">
      <image
        src="@/static/images/close.png"
        mode="aspectFit"
        class="close-icon"
        @click="(additionalBom = false), (elasticLayer = false)"
      />
      <view class="recharge-method">
        <text class="zf"> 请选择支付方式 </text>
        <view class="wechat">
          <view class="select">
            <image class="w" src="@/static/images/douy.png" mode="widthFix" />
            <text class="x">抖音</text>
          </view>
          <image
            v-if="selected1"
            class="not-selected"
            @click.stop="selectOption1('1')"
            src="@/static/images/w.png"
            mode="widthFix"
          />
          <image
            v-if="selected2"
            class="not-selected"
            src="@/static/images/y.png"
            mode="widthFix"
          />
        </view>
        <view class="wechat">
          <view class="select">
            <image class="w" src="@/static/images/wallet.png" mode="widthFix" />
            <text class="x">钱包支付</text>
          </view>
          <image
            v-if="selected3"
            class="not-selected"
            @click.stop="selectOption2('2')"
            src="@/static/images/w.png"
            mode="widthFix"
          />
          <image
            v-if="selected4"
            class="not-selected"
            src="@/static/images/y.png"
            mode="widthFix"
          />
        </view>
      </view>
      <view class="payment" @click="buy">
        <text class="Z"> 立即支付 </text>
      </view>
    </view>
    <view class="free-coupon" @click="jumpTo('/pages/client/coupon/get-list')">
        <text class="l">去免费领券</text>
    </view>
    <view style="height:60rpx;">
      
    </view>
  </div>
</template>

<script>
export default {
  data() {
    return {
        userId:'',
        remarlist:{},
      elasticLayer: false,
      additionalBom: false,
      selected1: true,
      selected2: false,
      mbselected1: true,
      mbselected2: false,
      mbselected3: true,
      mbselected4: false,
      selected3: true,
      selected4: false,
    };
  },
  onLoad(option){
    this.userId = option.member_id
    this.getCouponTypes()
  },
  
  methods: {
     jumpTo(url) {
      uni.navigateTo({
        url,
      });
    },
      homeBack() {
      uni.navigateBack({
        delta: 1, // 返回的页面数，默认为1
      });
    },
      getCouponTypes() {
        uni.showToast({ title: '功能暂不可用', icon: 'none' });
      },
    middleInfo() {
      console.log(111);
      (this.additionalBom = true), (this.elasticLayer = true);
    },
    selectOption1(v) {
      this.WeChat = v;
      this.wallet = "";
      console.log(this.WeChat);
      this.selected1 = false;
      this.selected2 = true;
      this.selected3 = true;
      this.selected4 = false;
    },
    selectOption2(v) {
      this.WeChat = "";
      this.wallet = v;
      console.log(this.wallet);
      this.selected1 = true;
      this.selected2 = false;
      this.selected3 = false;
      this.selected4 = true;
    },
    async buy() {
      //  console.log(this.wallet, "???");
      if (!this.WeChat && !this.wallet) {
        uni.showToast({
          title: "请选择充值方式",
          icon: "none",
        });
        return;
      }
      uni.showToast({ title: '功能暂不可用', icon: 'none' });
    },
  },
};
</script>

<style lang="scss" scoped>
.coupon {
  width: 100%;
  height: 97%;
  position: relative;
  .home-jt{
      position: fixed;
    left: 34rpx;
    top: 123rpx;
    width: 24rpx;
    height: 38rpx;
    z-index: 99;

  }
  .free-coupon{
    margin: 20rpx 0 0 23rpx;
    width: 94%;
height:96rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 200rpx;
box-sizing: border-box;
/* 主色1 */
border: 1px solid #FF19A0;
.l{
    font-family: PingFang SC;
font-size: 32rpx;
font-weight: normal;
color: #FF19A0;
}
  }
  .home-js {
    width: 100%;
    height: 100%;
  }
  .buying {
    position: absolute;
    top: 157rpx;
    left: 54rpx;

    display: flex;
    align-items: center;
    .q1 {
      color: #ffe869;
      font-size: 76rpx;
      font-weight: 1000;
      font-family: Alibaba PuHuiTi 2;
    }
    .q2 {
      margin-left: 6rpx;
      color: #ffffff;
      font-size: 76rpx;
      font-weight: 1000;
      font-family: Alibaba PuHuiTi 2;
    }
  }
  .buying1 {
    position: absolute;
    top:420rpx;
    left: 224rpx;
    color: #ffffff;
    font-size: 172rpx;
    font-weight: 1000;
    font-family: Alibaba PuHuiTi 2;
  }
  .buying2 {
    position: absolute;
    top: 929rpx;
    left: 50rpx;
    color: #ffffff;
    font-size: 24px;
    font-weight: 1000;
    font-family: Alibaba PuHuiTi 2;
    font-variation-settings: "opsz" auto;
    font-feature-settings: "kern" on;
  }
  .buying3 {
    position: absolute;
    bottom: 240rpx;
    left: 39rpx;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item {
      position: relative;
      //   width: 214rpx;
      //     height: 136rpx;
      .care-j {
        width: 214rpx;
        height: 136rpx;
      }
      .n {
        position: absolute;
        top: 37rpx;
        left:88rpx;
        font-family: Source Han Sans;
        font-size: 26px;
        font-weight: bold;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        color: #ff19a0;
      }
    }
  }
   .buying4 {
    position: absolute;
        bottom:98rpx;
    left: 180rpx;
   font-family: Source Han Sans;
   color: #fff;
font-size: 26px;
font-weight: bold;
    font-family: Alibaba PuHuiTi 2;
    font-variation-settings: "opsz" auto;
    font-feature-settings: "kern" on;
  }
  .buying5 {
    position: absolute;
        bottom:103rpx;
    left: 343rpx;
   font-family: PingFangSC;
  color: rgba(255, 255, 255, 0.6);
font-size: 12px;
 text-decoration: line-through;
    font-family: Alibaba PuHuiTi 2;
    font-variation-settings: "opsz" auto;
    font-feature-settings: "kern" on;
  }
  .buy {
    position: absolute;
    bottom: 112rpx;
    right: 50rpx;
    width: 221rpx;
    height: 89rpx;

    // border: 1px solid #000;
  }
  .elastic-layer {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 999;
  }
  .additional-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    .close-icon {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      right: 23rpx;
      top: 31rpx;
    }
    .recharge-method {
      height: 541rpx;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
      background: #fff;
      // margin-bottom: 30rpx;
      border-radius: 30rpx;
      width: 100%;
      .zf {
        font-family: PingFang SC;
        font-size: 18px;
        color: #3e4055;
        margin: 40rpx 0 50rpx 0;
      }
      .wechat {
        width: 92%;
        height: 58px;
        /* 自动布局 */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        border-radius: 8px;
        box-sizing: border-box;
        // border: 1px solid #ececec;
        margin-bottom: 30rpx;
      }
      .select {
        display: flex;
        align-items: center;
        .w {
          width: 68rpx;
          height: 68rpx;
        }
        .x {
          font-family: PingFangSC;
          font-size: 32rpx;
          font-weight: 500;
          line-height: 16px;
          letter-spacing: normal;
          color: #3d3d3d;
          display: flex;
          margin-left: 24rpx;
        }
      }
      .not-selected {
        width: 36rpx;
        height: 36rpx;
      }
    }
    .payment {
      position: absolute;
      border-radius: 100px;
      bottom: 50rpx;
      left: 30rpx;
      width: 92%;
      // width: 343px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #FF19A0;
      z-index: 10000;
      .Z {
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: normal;
        color: #FF19A0;
      }
    }
  }
}
</style>