<template>
  <view class="member-inter">
    <scroll-view class="member-scroll" scroll-y @scroll="onScrollView">
    <view class="membership">
      <swiper class="swiper" autoplay="true" interval="3000" duration="500" circular="true">
        <swiper-item class="swiper" v-for="(item, index) in imageList" :key="index">
          <image class="swiper-img" :src="item.image" mode="widthFix"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="back-wrapper" @click="homeBack">
      <image class="back" src="@/static/images/right-arrow.png" />
    </view>
    <text class="wago">Wagoo会员</text>
    <view class="member-item">
      <view v-for="(item, index) in memberList" :key="index" :class="[goldindex == index ? 'left2' : 'left']"
        @click="goldMember(item, index)">
        <!-- <image class="discount" src="https://activity.wagoo.live/tehui.png" /> -->
        <text class="l1">{{ item.card_name }}会员</text>
        <text v-if="item.max_bind_count == 1" class="l2">单宠卡</text>
        <text v-else class="l2">最多绑定5只</text>
        <text class="l3">{{ item.discount/10 }}折</text>
        <view v-for="(it, inx) in item.gifts" :key="inx">
          <text class="l4">{{ it.coupon_name }}*{{ it.coupon_value }}</text>
          <!-- <text class="l4">{{it.coupon_name}}*{{it.coupon_value}}</text>
        <text class="l4">体内外驱虫*2</text> -->
        </view>
      </view>
    </view>

    <view class="middle-info" @click="middleInfo">
      <image class="info-ava" src="https://activity.wagoo.live/kaitong.png" />
      <view class="lijian">
        <text class="money2">{{ discount_amount }}</text>
        <!-- <image class="info-mg" src="https://activity.wagoo.live/lijian.png" /> -->
      </view>

      <text class="money1"></text>
      <view class="original">
        <text class="money">¥{{ actual_amount }}</text>
        <!-- <text class="y"> 原价 </text>
        <text class="y1"> {{ purchase_amount }}元 </text> -->
      </view>
    </view>

    <view class="agreement">
      <image v-if="mbselected1" class="not-selected" @click.stop="select1('1')" src="@/static/images/w.png"
        mode="widthFix" />
      <image v-if="mbselected2" class="not-selected" @click.stop="select1('2')" src="@/static/images/y.png"
        mode="widthFix" />
      <text @click="jumpTo('/pages/richText/membership-agreement')" class="y">
        开通前请阅读</text>
      <text @click="jumpTo('/pages/richText/membership-agreement')" class="y">《Wagoo会员协议》
      </text>
    </view>
    <text class="wago2">会员权益</text>
    <view class="me-rights">
      <view class="left">
        <view class="rights-item">
          <image class="info-im" src="https://activity.wagoo.live/h3.png" />
          <view class="h">
            <text class="y">洗护折扣权益 </text>
            <text class="y1">全部服务{{ discount/10 }}折 </text>
          </view>
        </view>
        <view class="rights-item">
          <image class="info-im" src="https://activity.wagoo.live/h12.png" />
          <view class="h">
            <text class="y">定制浴液</text>
          </view>
        </view>
        <view class="rights-item">
          <image class="info-im" src="https://activity.wagoo.live/h5.png" />
          <view class="h">
            <text class="y">免调度费</text>
            <text class="y1">免{{ dispatch_fee }}次</text>
          </view>
        </view>
        <view class="rights-item">
          <image class="info-im" src="https://activity.wagoo.live/h11.png" />
          <view class="h">
            <text class="y">专属影集</text>
          </view>
        </view>
        <view class="rights-item">
          <image class="info-im" src="https://activity.wagoo.live/h10.png" />
          <view class="h">
            <text class="y">专属丝带</text>
          </view>
        </view>
        <view class="rights-item">
          <image class="info-im" src="https://activity.wagoo.live/h9.png" />
          <view class="h">
            <text class="y">专属客服</text>
          </view>
        </view>
      </view>
      <view class="right">
        <view class="rights-item2">
          <image mode="widthFix" class="info-im" src="https://activity.wagoo.live/h7.png" />
          <view class="h">
            <text class="y">入会礼包-减免券</text>
            <text class="y2">减免券只在首次购买会员时赠送,赠送数量取决于首次购买时购买的会员等级</text>
          </view>
        </view>
        <view class="rights-item">
          <image class="info-im" src="https://activity.wagoo.live/h8.png" />
          <view class="h">
            <text class="y">专属会员活动</text>
          </view>
        </view>
        <view class="rights-item">
          <image class="info-im" src="https://activity.wagoo.live/h6.png" />
          <view class="h">
            <text class="y">免夜间费</text>
            <text class="y1">免{{ night_fee }}次</text>
          </view>
        </view>
        <view class="rights-item">
          <image class="info-im" src="https://activity.wagoo.live/h1.png" />
          <view class="h">
            <text class="y">Al宠物档案</text>
          </view>
        </view>
        <!-- <view class="rights-item">
        <image class="info-im" src="https://activity.wagoo.live/h4.png" />
        <view class="h">
          <text class="y">积分加速</text>
        </view>
      </view> -->
        <view class="rights-item">
          <image class="info-im" src="https://activity.wagoo.live/h2.png" />
          <view class="h">
            <text class="y">公益勋章</text>
          </view>
        </view>
      </view>
    </view>
    <text class="wago2">权益对比</text>
    <image v-if="gold" class="info-and" mode="widthFix" src="https://activity.wagoo.live/huangjin.png" />
    <image v-if="platinum" class="info-and" mode="widthFix" src="https://activity.wagoo.live/baijin.png" />
    <image v-if="blackGold" class="info-and" mode="widthFix" src="https://activity.wagoo.live/heijin.png" />
    <view class="middle-bm" v-if="middleBm">
      <view class="middle-info2" @click="middleInfo">
        <image class="info-ava" src="https://activity.wagoo.live/kaitong.png" />
        <view class="lijian">
          <text class="money2">{{ discount_amount }}</text>
          <!-- <image class="info-mg" src="https://activity.wagoo.live/lijian.png" /> -->
        </view>
        <!-- <text class="money">¥199.00</text> -->
        <text class="money1"></text>
        <view class="original">
          <text class="money">¥{{ actual_amount }}</text>
          <!-- <text class="y"> 原价 </text>
          <text class="y1"> {{ purchase_amount }}元 </text> -->
        </view>
        <view class="agreement">
          <image v-if="mbselected1" class="not-selected" @click.stop="select1('1')" src="@/static/images/w.png"
            mode="widthFix" />
          <image v-if="mbselected2" class="not-selected" @click.stop="select1('2')" src="@/static/images/y.png"
            mode="widthFix" />

          <text @click="jumpTo('/pages/richText/membership-agreement')" class="y">
            开通前请阅读</text>
          <text @click="jumpTo('/pages/richText/membership-agreement')" class="y">《Wagoo会员协议》
          </text>
        </view>

        <!-- <view class="agreement">
           <image
            v-if="mbselected3"
            class="not-selected"
            @click.stop="mbeselect1('1')"
            src="@/static/images/w.png"
            mode="widthFix"
          />
          <image
            v-if="mbselected4"
            class="not-selected"
              @click.stop="mbeselect1('2')"
            src="@/static/images/y.png"
            mode="widthFix"
          />
         <text class="y"> 开通前请阅读</text>
          <text class="y">《Wagoo会员协议》 </text>
        </view> -->
        <!-- <view class="original">
        <text class="y"> 原价 </text>
        <text class="y1"> 299元 </text>
      </view> -->
      </view>
    </view>

    <view style="height: 286rpx; background: #fff"></view>
    </scroll-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" @click.stop="selectOption1('1')">
          <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"  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="rechargeNow">
        <text class="Z"> 立即支付 </text>
      </view>
    </view>
  </view>
</template>

<script>
import { imgPrefix } from '@/utils/common';
import {
  memberType,
  memberWXPAY,
  walletWxpay,
  membershipWallet,
} from "../../api/login";
export default {
  data() {
    return {
      imageList: [
        {
          id: "1",
          image: imgPrefix + "vipCat.png",
        },
        {
          id: "2",
          image: imgPrefix + "vipDog.png",
        },
      ],
      // gg2: true,
      // gg1: false,
      middleBm: false,
      gold: true,
      platinum: false,
      blackGold: false,
      memberList: [],
      goldindex: 0,
      additionalBom: false,
      discount_amount: "",
      purchase_amount: "",
      actual_amount: "",
      dispatch_fee: "",
      night_fee: "",
      discount: "",
      elasticLayer: false,
      selected1: true,
      selected2: false,
      mbselected1: true,
      mbselected2: false,
      mbselected3: true,
      mbselected4: false,
      selected3: true,
      selected4: false,
      recharge: true,
      record: false,
      middleBm: false,
      card_name: "",
      card_type: "",
      actual_amount: "",
      tabList: [
        {
          value: "0",
          label: "宠物日历",
        },
        {
          value: "1",
          label: "健康记录",
        },
        {
          value: "2",
          label: "服务记录",
        },
      ],
    };
  },
  onLoad(options) {
    this.getmemberType();
  },
  methods: {
    // 使用 scroll-view 的滚动监听（替代 onPageScroll）
    onScrollView(e) {
      const scrollTop = (e && e.detail && e.detail.scrollTop) || 0;
      if (scrollTop >= 520) {
        this.middleBm = true;
      } else {
        this.middleBm = false;
      }
    },
    homeBack() {
      uni.navigateBack({
        delta: 1, // 返回的页面数，默认为1
      });
    },
    jumpTo(url) {
      uni.navigateTo({
        url,
      });
    },
    goldMember(item, index) {
      this.goldindex = index;
      if (index == 0) {
        this.gold = true;
        this.platinum = false;
        this.blackGold = false;
        this.actual_amount = this.memberList[0].actual_amount;
        this.purchase_amount = this.memberList[0].purchase_amount;
        this.discount_amount = this.memberList[0].discount_amount;
        this.dispatch_fee = this.memberList[0].dispatch_fee;
        this.card_name = this.memberList[0].card_name;
        this.card_type = this.memberList[0].card_type;
        this.discount = this.memberList[0].discount;
        // 夜间费
        this.night_fee = this.memberList[0].night_fee;
        this.gg1 = false;
        this.gg2 = true;
      } else if (index == 1) {
        this.gold = false;
        this.platinum = true;
        this.blackGold = false;
        this.actual_amount = this.memberList[1].actual_amount;
        this.purchase_amount = this.memberList[1].purchase_amount;
        this.discount_amount = this.memberList[1].discount_amount;
        this.dispatch_fee = this.memberList[1].dispatch_fee;
        this.card_name = this.memberList[1].card_name;
        this.card_type = this.memberList[1].card_type;
        // 夜间费
        this.night_fee = this.memberList[1].night_fee;
        this.discount = this.memberList[1].discount;
        this.gg1 = false;
        this.gg2 = true;
      } else if (index == 2) {
        this.gold = false;
        this.platinum = false;
        this.blackGold = true;
        this.actual_amount = this.memberList[2].actual_amount;
        this.purchase_amount = this.memberList[2].purchase_amount;
        this.discount_amount = this.memberList[2].discount_amount;
        this.dispatch_fee = this.memberList[2].dispatch_fee;
        this.card_name = this.memberList[2].card_name;
        this.card_type = this.memberList[2].card_type;
        this.discount = this.memberList[2].discount;
        // 夜间费
        this.night_fee = this.memberList[2].night_fee;
        this.gg1 = true;
        this.gg2 = false;
      }
      // console.log(this.goldindex, "-");
    },
    middleInfo() {
      if (!this.memberSelect || this.memberSelect == 2) {
        uni.showToast({
          title: "请先阅读并同意会员卡服务协议",
          icon: "none",
        });
        return;
      } else {
        (this.additionalBom = true), (this.elasticLayer = true);
      }
    },
    middleInfo2() {
      if (!this.memberSelect1 || this.memberSelect1 == 2) {
        uni.showToast({
          title: "请先阅读并同意会员卡服务协议",
          icon: "none",
        });
        return;
      } else {
        (this.additionalBom = true), (this.elasticLayer = true);
      }
    },
    select1(v) {
      // console.log(v)
      this.memberSelect = v;
      if (v == 1) {
        this.mbselected1 = false;
        this.mbselected2 = true;
      } else if (v == 2) {
        this.mbselected1 = true;
        this.mbselected2 = false;
      }
    },
    mbeselect1(v) {
      // console.log(v)
      this.memberSelect1 = v;
      if (v == 1) {
        this.mbselected3 = false;
        this.mbselected4 = true;
      } else if (v == 2) {
        this.mbselected3 = true;
        this.mbselected4 = false;
      }
    },
    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;
    },
    getmemberType() {
      const data = {
        type: 0,
      };
      memberType(data).then((res) => {
        this.memberList = res.data;
        this.actual_amount = res.data[0].actual_amount;
        this.purchase_amount = res.data[0].purchase_amount;
        this.discount_amount = res.data[0].discount_amount;
        this.actual_amount = res.data[0].actual_amount;
        this.card_type = res.data[0].card_type;
        this.card_name = res.data[0].card_name;
        this.actual_mount = res.data[0].actual_mount;
        // 调度费
        this.dispatch_fee = res.data[0].dispatch_fee;
        // 夜间费
        this.night_fee = res.data[0].night_fee;
        this.discount = res.data[0].discount;
        //  console.log(res.data,'--')
      });
    },
    async rechargeNow() {
      //  console.log(this.wallet, "???");
      if (!this.WeChat && !this.wallet) {
        uni.showToast({
          title: "请选择充值方式",
          icon: "none",
        });
        return;
      }
      if (this.WeChat == 1) {
        try {
          const value = uni.getStorageSync("userInfo");
          const data = {
            type: 2,
            user_nickname: this.nick_name,
            user_id: Number(value.user_id),
            card_type: this.card_type,
            card_name: this.card_name,
            total_fee: Number(this.actual_amount),
          };
          memberWXPAY(data).then((res) => {
            // 使用获取的支付参数进行支付
        tt.pay({
							 orderInfo: { 
                   order_id:res.data.orderInfo.order_id,
                   order_token:res.data.orderInfo.order_token,
                    },
                    service:5,
              success: (res) => {
                uni.showToast({
                  title: "支付成功",
                  icon: "none",
                });
                let that = this;
                uni.showModal({
                  content: "绑定宠物享受会员权益",
                  showCancel: false,
                  success: function (res) {
                    if (res.confirm) {
                      setTimeout(() => {
                        uni.navigateTo({
                          url: `/pages/client/recharge/my-card?user_id=${that.userId}`,
                        });
                        // uni.navigateBack({
                        //   delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
                        // });
                      }, 500);
                    }
                  },
                });
                // setTimeout(() => {
                //   uni.navigateTo({
                //     url: `/pages/client/recharge/my-card?user_id=${this.userId}`,
                //   });
                //   // uni.navigateBack({
                //   //   delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
                //   // });
                // }, 1500);
                // this.buyService(this.user_id);
                that.additionalBom = false;
                that.elasticLayer = false;
                console.log("支付成功:", res);
              },
              fail: (err) => {
                console.error("支付失败:", err);
              },
            });
          });
        } catch (error) {
          console.error("捕获到的错误:", error);
        }
      } else if (this.wallet == 2) {
        let that = this;
        uni.showModal({
          title: "钱包付款",
          content: "是否确认钱包付款",
          success: function (res) {
            if (res.confirm) {
              const value = uni.getStorageSync("userInfo");
              const  user = JSON.parse( uni.getStorageSync('vuex'));
              // console.log(user,'--=?')
               this.nick_name = user.user.userInfo.username
              const data = {
                type: 2,
                total_fee:Number(that.actual_amount),
                card_type:that.card_type,
                wallet_id:value.wallet_id,
                user_nickname: this.nick_name
                // card_name: that.card_name,
                // user_nickname: that.nick_name,
                // user_id: Number(value.user_id),
                // total_fee: Number(that.actual_amount),
                // wallet_id: value.wallet_id,
                // card_type: that.card_type,
              };
              membershipWallet(data).then((res) => {
                if (res.code == 0) {
                  uni.showToast({
                    title: "支付成功",
                    icon: "none",
                  });
                  uni.showModal({
                    content: "绑定宠物享受会员权益",
                    showCancel: false,
                    success: function (res) {
                      if (res.confirm) {
                        setTimeout(() => {
                          uni.navigateTo({
                            url: `/pages/client/recharge/my-card?user_id=${that.userId}`,
                          });
                          // uni.navigateBack({
                          //   delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
                          // });
                        }, 500);
                      }
                    },
                  });

                  that.additionalBom = false;
                  that.elasticLayer = false;
                } else if (res.code == 100) {
                  uni.showToast({
                    title: res.message,
                    icon: "none",
                  });
                }
              });
              // 用户点击确定后的操作
            } else if (res.cancel) {
              console.log("取消了付款");
              // 用户点击取消后的操作
            }
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.member-inter {
  background: #fff;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;

  .member-scroll {
    height: 100vh;
    width: 100vw;
  }

  .membership {
    width: 100%;
    margin: 0 auto;

    // background: #000;
    .swiper {
      height: 582rpx;
    }

    image {
      width: 100%;
      // height: 219rpx;
    }
  }

  .info-avator {
    width: 100%;
    height: 282px;
    background: #fff;
  }

  .back-wrapper {
    position: fixed;
    left: 20rpx;
    top: 110rpx;
    padding: 20rpx;
    z-index: 99;
    box-sizing: content-box;
  }

  .back {
    width: 24rpx;
    height: 38rpx;
    display: block;
  }

  .wago {
    font-family: PingFangSC;
    font-size: 16px;
    color: #333333;
    padding-top: 10rpx;
    margin: 0 0 0 20rpx;
    background: #fff;
    font-weight: 500;
    display: flex;
  }

  .member-item {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 0 30rpx;

    .left {
      position: relative;
      // width: 109px;
      padding: 8rpx 28rpx;
      width: 22%;
      // height: 160px;
      border-radius: 12px;
      background: #f6f6f6;
      display: flex;
      flex-direction: column;
      border: 1px solid #fff;
      // border: 1px solid #000;
      align-items: center;
      margin-top: 30rpx;

      .discount {
        position: absolute;
        left: 0;
        top: -8rpx;
        width: 63.53px;
        height: 16px;
      }

      .l1 {
        font-family: PingFangSC;
        font-size: 16px;
        font-weight: 600;
        color: #000000;
        margin-top: 16rpx;
      }

      .l2 {
        font-family: PingFangSC;
        font-size: 12px;
        color: #9b9b9b;
        margin-top: 8rpx;
      }

      .l3 {
        color: #000000;
        font-family: PingFangSC;
        font-size: 24px;
        font-weight: 500;
        margin: 10rpx 0 14rpx 0;
      }

      .l4 {
        color: #000000;
        font-family: PingFangSC;
        font-size: 12px;
        margin-top: 3rpx;
      }
    }

    .left2 {
      position: relative;
      padding: 8rpx 28rpx;
      width: 22%;
      // width: 109px;
      // height: 160px;
      border-radius: 12px;
      background: #f6f6f6;
      display: flex;
      flex-direction: column;
      border: 1px solid #ff0097;
      background: rgba(231, 64, 152, 0.1);
      align-items: center;
      margin-top: 30rpx;

      .discount {
        position: absolute;
        left: 0;
        top: -8rpx;
        width: 63.53px;
        height: 16px;
      }

      .l1 {
        font-family: PingFangSC;
        font-size: 16px;
        font-weight: 600;
        color: #000000;
        margin-top: 16rpx;
      }

      .l2 {
        font-family: PingFangSC;
        font-size: 12px;
        color: #9b9b9b;
        margin-top: 8rpx;
      }

      .l3 {
        color: #ff0097;
        font-family: PingFangSC;
        font-size: 24px;
        font-weight: 500;
        margin: 10rpx 0 14rpx 0;
      }

      .l4 {
        color: #ff0097;
        font-family: PingFangSC;
        font-size: 12px;
        margin-top: 3rpx;
      }
    }
  }

  .middle-info {
    position: relative;
    background: #fff;

    .info-ava {
      width: 94%;
      height: 56px;
      margin: 47rpx 0 0 20rpx;
    }

    .money1 {
      position: absolute;
      right: 92rpx;
      top: 66rpx;
      font-family: PingFangSC;
      font-size: 16px;
      font-weight: 500;
      color: #ff0097;
    }

    .lijian {
      position: absolute;
      right: 51rpx;
      top: -2rpx;
      font-family: Source Han Sans;
      font-size: 16px;
      color: #ffffff;

      .money2 {
        position: absolute;
        left: 90rpx;
        top: 6rpx;
        font-family: Source Han Sans;
        font-size: 16px;
        color: #ffffff;
      }

      .info-mg {
        width: 200rpx;
        height: 72rpx;
      }
    }

    .original {
      display: flex;
      align-items: center;
      position: absolute;
      left: 47rpx;
      top: 68rpx;

      .money {
        font-family: Source Han Sans;
        font-size: 26px;
        color: #ffffff;
      }

      .y {
        font-family: PingFangSC;
        font-size: 12px;
        font-weight: normal;
        color: #ffffff;
        margin: 14rpx 0 0 10rpx;
      }

      .y1 {
        font-family: PingFangSC;
        font-size: 12px;
        font-weight: normal;
        color: #ffffff;
        margin: 14rpx 0 0 0;
        text-decoration: line-through;
      }
    }
  }

  .middle-bm {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 124px;
    background: #fff;

    .middle-info2 {
      position: relative;
      background: #fff;

      .info-ava {
        width: 94%;
        height: 56px;
        margin: 27rpx 0 0 20rpx;
      }

      .money1 {
        position: absolute;
        right: 92rpx;
        top: 66rpx;
        font-family: PingFangSC;
        font-size: 16px;
        font-weight: 500;
        color: #ff0097;
      }

      // .money2 {
      //   position: absolute;
      //   right: 106rpx;
      //   top: -12rpx;
      //   font-family: Source Han Sans;
      //   font-size: 16px;
      //   color: #ffffff;
      // }

      .lijian {
        position: absolute;
        right: 51rpx;
        top: -22rpx;
        font-family: Source Han Sans;
        font-size: 16px;
        color: #ffffff;

        .money2 {
          position: absolute;
          left: 90rpx;
          top: 6rpx;
          font-family: Source Han Sans;
          font-size: 16px;
          color: #ffffff;
        }

        .info-mg {
          width: 200rpx;
          height: 72rpx;
        }
      }

      .original {
        display: flex;
        align-items: center;
        position: absolute;
        left: 47rpx;
        top: 50rpx;

        .money {
          font-family: Source Han Sans;
          font-size: 26px;
          color: #ffffff;
        }

        .y {
          font-family: PingFangSC;
          font-size: 12px;
          font-weight: normal;
          color: #ffffff;
          margin: 14rpx 0 0 10rpx;
        }

        .y1 {
          font-family: PingFangSC;
          font-size: 12px;
          font-weight: normal;
          color: #ffffff;
          margin: 14rpx 0 0 0;
          text-decoration: line-through;
        }
      }
    }
  }

  .agreement {
    display: flex;
    justify-content: center;
    align-content: center;
    background: #fff;
    padding-top: 10rpx;

    .not-selected {
      width: 36rpx;
      height: 36rpx;
      margin-right: 10rpx;
    }

    .y {
      font-family: PingFangSC;
      font-size: 11px;
      color: #9b939a;
      margin-top: 3rpx;
    }
  }

  .wago2 {
    background: #fff;
    font-family: PingFangSC;
    font-size: 16px;
    font-weight: 500;
    display: block;
    // margin: 0 0 0 20rpx;
    padding: 30rpx 0 0 20rpx;
    color: #333333;
  }

  .me-rights {
    display: flex;
    // flex-wrap: wrap;
    justify-content: space-around;
    padding: 0 20rpx 0 0;
    background: #fff;

    .left {
      display: flex;
      flex-direction: column;
      width: 44%;

      .rights-item {
        // margin: 30rpx 0 0 34rpx;
        margin-top: 30rpx;
        width: 100%;
        // width: 160px;
        height: 53px;
        border-radius: 8px;
        background: #f6f6f6;
        //   border: 1px solid #000;
        display: flex;
        padding-left: 20rpx;
        align-items: center;

        .info-im {
          width: 24px;
          height: 24px;
        }

        .h {
          display: flex;
          flex-direction: column;
          margin-left: 30rpx;

          .y {
            font-family: PingFangSC;
            font-size: 14px;
            font-weight: normal;
          }

          .y1 {
            font-family: PingFangSC;
            font-size: 11px;
            font-weight: normal;
            color: #666666;
          }
        }
      }
    }

    .right {
      display: flex;
      flex-direction: column;
      width: 44%;

      //  margin-left: 50rpx;
      .rights-item {
        // margin: 30rpx 0 0 34rpx;
        margin-top: 30rpx;
        width: 100%;
        // width: 160px;
        height: 53px;
        border-radius: 8px;
        background: #f6f6f6;
        //   border: 1px solid #000;
        display: flex;
        padding-left: 20rpx;
        align-items: center;

        .info-im {
          width: 24px;
          height: 24px;
        }

        .h {
          display: flex;
          flex-direction: column;
          margin-left: 30rpx;

          .y {
            font-family: PingFangSC;
            font-size: 14px;
            font-weight: normal;
          }

          .y1 {
            font-family: PingFangSC;
            font-size: 11px;
            font-weight: normal;
            color: #666666;
          }
        }
      }

      .rights-item2 {
        // margin: 30rpx 0 0 34rpx;
        margin-top: 30rpx;
        width: 100%;
        padding: 20rpx 0 20rpx 20rpx;
        // width: 160px;
        // height: 53px;
        border-radius: 8px;
        background: #f6f6f6;
        //   border: 1px solid #000;
        display: flex;
        // padding-left: 20rpx;
        align-items: center;

        .info-im {
          width: 120rpx;
          height: 120rpx;
        }

        .h {
          display: flex;
          flex-direction: column;
          margin-left: 30rpx;

          .y {
            font-family: PingFangSC;
            font-size: 14px;
            font-weight: normal;
          }

          .y2 {
            color: #666666;
            font-family: PingFangSC;
            font-size: 22rpx;
          }
        }
      }
    }
  }

  .info-and {
    width: 100%;
    height: 850px;
  }

  .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;
    background-color: #fff;
    border-radius: 32rpx 32rpx 0 0;
    overflow: hidden;

    .close-icon {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      right: 23rpx;
      top: 31rpx;
    }

    .recharge-method {
      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 {
      border-radius: 100px;
      width: 92%;
      height: 48px;
      margin: 0 auto 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #FF19A0;

      .Z {
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: normal;
        color: #fff;
      }
    }
  }
}
</style>