<template>
   
  <view
    style="
      height: 100vh;
      padding: 0 0;
      font-size: 28rpx;
      background-color: #39b4a84d !important;
    "
    class="commonPage commonPageBox"
  >
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <view class="bg_top">
      <u-icon
        @click="goSetting"
        class="setIcon"
        labelColor="#fff"
        labelPos="bottom"
        label="设置"
        name="setting"
        :style="`top:${(10 + statusBarHeight) * 2}rpx`"
        color="#fff"
        size="28"
      ></u-icon>
    </view>

    <view class="mine_box" :style="`top:${(45 + statusBarHeight) * 2}rpx`">
      <view class="per_mes">
        <view :style="hasVipType2 ? 'width: 170rpx;' : ''">
          <view
            style="display: flex; align-items: center; flex-direction: column"
          >
            <image
              @click="goUserInfo"
              :src="userMes.avatar"
              v-if="userMes.avatar"
              class="per_mes_img color_shandow"
            ></image>
            <image
              src="@/static/icon/ic_login_health.png"
              v-else
              class="per_mes_img color_shandow"
            ></image>
          </view>

          <view
            class="user_vip_box"
            v-if="hasVipType1||hasVipType2"
          >
            <view
              class="user_vip super"
              :style="hasVipType2 ? 'width: 170rpx;' : ''"
            >
              <view class="user_vip_item" v-if="hasVipType1"
                ><text>医学</text
                ><image src="@/static/icon/chao_svip.png"></image
              ></view>
              <view class="user_vip_item" v-if="hasVipType2"
                ><text>国学心理学</text
                ><image src="@/static/icon/chao_svip.png"></image
              ></view>
            </view>
          </view>
        </view>

        <view class="userInfoBox" style="margin-left: 20rpx">
          <view class="name"
            >昵称：{{ userMes.nickname ? userMes.nickname : "未设置" }}</view
          >
          <view
            class="name"
            style="
              color: #606266 !important;
              font-weight: normal;
              font-size: 28rpx;
            "
            v-if="userMes.tel"
            >手机号：({{ userMes.tel }})</view
          >

          <template v-if="textList.length > 0">
            <view class="vip_type">
              <view
                class="vip_type_item"
                :class="textList.length > 4 ? 'vip_type_item_len' : ''"
                v-for="(item, index) in textList"
                :key="index"
              >
                {{ item }}<image src="@/static/icon/chao_vip.png"></image>
              </view>
            </view>
          </template>
        </view>
      </view>

      <view
        style="
          padding: 20rpx 20rpx 0;
          margin-top: 50rpx;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <template>
          <view class="chong_zhi boxShadow box_fillet vip_box">
            <view class="noVip">
              <view style="display: flex; align-items: center">
                <view
                  class="zhanghu PM_font"
                  style="text-align: left; margin-left: 15rpx"
                >
                  <image
                    class="vip_image"
                    src="@/static/icon/mine_p.png"
                    mode="aspectFit"
                  ></image>
                  <text
                    style="color: #fff; font-size: 56rpx; padding: 0 20rpx"
                    v-if="vipList.length == 0"
                    >VIP</text
                  >
                </view>
                <view class="vip_infor" v-if="vipList && vipList.length > 0">
                  <view
                    class="vip_infor_item"
                    v-for="(item, index) in vipList"
                    :key="index"
                    :class="{ expired: isExpired(item.endTime.split(' ')[0]) }"
                  >
                    <text>{{ item.text }}VIP</text>
                    <text v-if="isExpired(item.endTime.split(' ')[0])"
                      >（{{ item.endTime.split(" ")[0] }} 已到期）</text
                    >
                    <text v-else
                      >（有效期到 {{ item.endTime.split(" ")[0] }})</text
                    >
                  </view>
                </view>
                <view v-else class="vip_null" style="padding-left: 30rpx"
                  >办理VIP，畅享更多专属权益</view
                >
              </view>
              <view class="vip_btn" @click="onPageJump('/pages/mine/vip/index')"
                ><button v-if="vipList.length == 0">办理</button
                ><button v-else>续费</button></view
              >
            </view>
          </view>
        </template>
      </view>
      <view
        style="
          padding: 20rpx;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <view class="chong_zhi boxShadow box_fillet chongzhi_box">
          <view class="chong_list">
            <view class="left">
              <view
                class="chong_list_item"
                style="
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                  justify-content: space-between;
                "
                @click="onPageJump('/pages/mine/wallet/index/index')"
              >
                <view class="pay_item_img">
                  天医币<u-icon
                    @click.native.stop="openInfo()"
                    name="question-circle"
                    style="float: right; margin: 0 6rpx"
                  ></u-icon>
                </view>

                <view class="text" style="line-height: 40rpx; display: flex">{{
                  userMes.peanutCoin ? userMes.peanutCoin : 0
                }}</view>
              </view>

              <view
                class="chong_list_item"
                style="
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                  justify-content: space-between;
                "
                @click="onPageJump('/pages/mine/wallet/jf/index')"
              >
                <view class="pay_item_img"> 积分 </view>

                <view class="text" style="line-height: 40rpx">{{
                  userMes.jf ? userMes.jf : 0
                }}</view>
              </view>
              <view
                class="chong_list_item"
                style="
                  display: flex;
                  align-items: center;
                  flex-direction: column;
                  justify-content: space-between;
                "
                @click="onPageJump('/pages/mine/wallet/couponList')"
              >
                <view class="pay_item_img"> 优惠券 </view>

                <view class="text" style="line-height: 40rpx">{{
                  userCouponNum
                }}</view>
              </view>
            </view>
            <view
              class="chong_list_item"
              style="
                display: flex;
                align-items: center;
                margin-right: 0;
                justify-content: center;
              "
            >
              <view
                class="chong_btn"
                @click="onPageJump('/pages/mine/wallet/recharge/index')"
                >充 值</view
              >
            </view>
          </view>
        </view>
      </view>
      <view class="list_box">
        <view class="xiugai boxShadow box_fillet">
          <common-list
            :dataList="pageList"
            @hancleClick="handleClickTab"
            label="name"
          >
            <template slot="rightSlot" slot-scope="slotProps">
              <text
                class="fdButtonBox aui-text-success"
                v-if="slotProps.row.contentType&&slotProps.row.contentType == 'hufen'&&hufenNumber>0"
                style="line-height: 40rpx; font-size: 40rpx;color: #3AB3AE;float: right;"
                >{{ hufenNumber }}<text style="font-size: 30rpx;margin-left: 4rpx;">湖分</text></text
              >
              <view> </view>
            </template>
          </common-list>
        </view>
      </view>
    </view>

    <u-modal
      :show="signShow"
      :content="signContent"
      :showCancelButton="true"
      @cancel="signShow = false"
      @confirm="signOut"
    >
    </u-modal>
    <!-- 分享弹窗 -->
    <uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
      <uni-popup-share @select="haveSelected"></uni-popup-share>
    </uni-popup>

    <u-popup :show="infoShow" mode="center" round="6" backgroundColor="#fff">
      <view class="popup_box">
        <view class="title">温馨提示</view>

        <view class="content">
          <view class="center">
            &nbsp;&nbsp;&nbsp;&nbsp;【天医币】仅为我平台支付使用币种 。
            一人民币=一天医币，仅为了方便用户支付使用。<br />【天医币】可以用于在我平台支付书籍或课程使用。
            <br />【天医币】这个名称是为适应我们平台的定位属性，所起名称。与区块链虚拟货币无任何关系。
          </view>

          <view class="bottom">
            <view
              class="button_box"
              style="
                align-items: center;

                justify-content: center;
              "
            >
              <u-button
                style="width: 200rpx; float: center"
                :plain="true"
                text="知道啦"
                color="#9b9b9b"
                size="small"
                @click="infoShow = false"
              ></u-button>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

    <music-play :playData="playData"></music-play>
    <z-navigation></z-navigation>
  </view>
</template>

<script>
import musicPlay from "@/components/music.vue";
import $http from "@/config/requestConfig.js";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {hufenNumber: 0,
      userCouponNum: 0,
      come: "1",
      orderList: [
        {
          title: "全部",
          value: -1,
          badge: {},
          imgUrl: require("@/static/icon/ordericon1.png"),
        },
        {
          title: "待付款",
          value: 0,
          badge: {},
          imgUrl: require("@/static/icon/ordericon2.png"),
        },
        {
          title: "待发货",
          value: 1,
          badge: {},
          imgUrl: require("@/static/icon/ordericon3.png"),
        },
        {
          title: "待收货",
          value: 2,
          badge: {},
          imgUrl: require("@/static/icon/ordericon4.png"),
        },
        {
          title: "已完成",
          value: 3,
          badge: {},
          imgUrl: require("@/static/icon/ordericon5.png"),
        },
      ],
      swiperList: [
        {
          name: "开通会员畅享更多活动",
        },
        {
          name: "众妙之门视频",
        },
        {
          name: "吴门医述视频",
        },
        {
          name: "专属视频视听",
        },
        {
          name: "读书相关权益",
        },
        {
          name: "活动报名<text style='color:red'>(折扣价)</text>",
        },
      ],
      infoShow: false, // 显示电子书相关
      showEbook: false, // 显示电子书相关
      userMes: {},
      signShow: false,
      signContent: "是否要退出登录？",
      playData: {},

      pageList: [
        {
          name: "我的订单",
          url: "/pages/bookShop/orderList?type=mine",
          type: "switchTab",
        },
		{
		  name: "我的购物车",
		  url: "/pages/goods/shopping/index",
		  type: "pageJump",
		},
		{
			name: "我的湖分",
			url: "/pages/hufen/hufen",
			type: "pageJump",
			contentType: "hufen",
		},
        {
          name: "个人资料",
          url: "/pages/mine/userInfo/persData",
          type: "pageJump",
        },
        {
          name: "地址管理",
          url: "/pages/component/commonComponents/address/index?type=mine",
          type: "pageJump",
        },

        {
          name: "分享APP",
          type: "share",
        },

        {
          name: "关于我们",
          url: "/pages/mine/aboutUs/index",
          type: "pageJump",
        },
        {
          name: "问题反馈/申诉",
          url: "/pages/homePage/index/workOrder",
          type: "workOrder",
        },
      ],
      hasVipType1: false,
      hasVipType2: false,
      vipList: [],
      textList: [], //普通vip文字
    };
  },
  //第一次加载
  onLoad(e) {
	  
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  //页面显示
  onShow() {
    this.getBookList();
	this.getUserCouponList();
    this.getData();
    this.gethufenData();
    //获取vip身份
    this.textList = [];
    this.getUserVipType();
  },
  async onTabItemTap() {
    this.getBookList();
    this.getData();
  },
  components: {
    musicPlay,
  },
  //方法
  methods: {
    ...mapMutations(["setUserInfo"]), async gethufenData() {
      await this.$http
        .post("common/userContribution/getUserContribution")
        .then((res) => {
          console.log("res at line 296:", res);
          if (res.code == 0) {
            this.hufenNumber = res.total;
          } else {
          }
        })
        .catch((e) => {
          console.log(e, "报错");
        });
    },
    async getUserCouponList() {
      await this.$http
        .request({
          url: "common/coupon/getCouponHistoryList",
          method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
          data: {
            page: 1,
            limit: 9999,
            getType: "", //获取类型 0 后台赠送 1 主动获取
            status: "0", //使用状态 0 未使用 1 已使用 2 已过期
            userInfo: "", //用户信息
            userId: this.userInfo.id,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          if (res.code != 0) return this.$commonJS.showToast(res.errMsg);
          this.userCouponNum = res.couponList.total;
        })
        .catch((e) => {
          console.log(e);
          this.$commonJS.showToast(e.errMsg);
        });
    },
    getBookList(flag, refreshflag) {
      this.isLoadingHide = false;
      var that = this;
      // 顶部红点数量
      $http
        .request({
          url: "common/buyOrder/getBuyOrderNumByStatus",
          method: "POST",
          data: {
            userId: that.userInfo.id,
            come: this.come,
          },
          header: {
            //默认 无 说明：请求头
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          //           订单状态
          // * 0: 待付款
          // * 1: 待发货
          // * 2: 已发货
          // * 3：已完成
          // * 4: 交易失败
          // * 5: 已过期

          console.log("res at line 757:", res);
          that.map = res.data;

          that.orderList.map((e) => {
            if (e.value == 0 || e.value == 1 || e.value == 2) {
              var numList = that.map.filter((v) => v.order_status == e.value);
              console.log("num at line 771:", numList);
              if (numList.length > 0) {
                e.badge = {
                  value: numList[0].num,
                };
              }
            } else {
              e.badge = {};
            }
          });
          // this.$set('this.ordersTabs',)
          that.$forceUpdate();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    openInfo() {
      this.infoShow = true;
    },
    goSetting() {
      this.onPageJump("/pages/mine/set/index");
    },
    goUserInfo() {
      this.onPageJump("/pages/mine/userInfo/persData");
    },
    handleClickTab(v) {
      switch (v.type) {
        case "pageJump":
          this.onPageJump(v.url);
          break;
        case "switchTab":
          this.switchTab(v.url);
          break;
        case "share":
          //分享
          this.newOnShare();
          break;
        case "quitLogin":
          //退出登录
          this.signShow = true;
          break;
        case "loginOut":
          //注销账号
          this.logout();
          break;
        case "workOrder":
          uni.navigateTo({
            url: `${v.url}?name=userPage`,
          });
          break;
      }
    },
    haveSelected(data) {
      console.log(data, " 选择的是");
      if (data.index == 0) {
        // 分享到好友
        uni.share({
          provider: "weixin",
          scene: "WXSceneSession",
          type: 0,
          href: this.$apkUrl,
          title: "众妙之门",
          summary: "我正在使用众妙之门提升自己，赶紧跟我一起来体验吧！",
          imageUrl: "static/icon/fengziIcon.png",
          success: function (res) {
            console.log("success:" + JSON.stringify(res));
          },
          fail: function (err) {
            console.log("fail:" + JSON.stringify(err));
          },
        });
      } else if (data.index == 1) {
        // 分享到朋友圈
        uni.share({
          provider: "weixin",
          scene: "WXSceneTimeline",
          type: 0,
          href: this.$apkUrl,
          title: "众妙之门",
          summary: "我正在使用众妙之门提升自己，赶紧跟我一起来体验吧！",
          imageUrl: "static/icon/fengziIcon.png",
          success: function (res) {
            console.log("success:" + JSON.stringify(res));
          },
          fail: function (err) {
            console.log("fail:" + JSON.stringify(err));
          },
        });
      }
    },
    goOrderList(url, type, index) {
      uni.setStorageSync("orderStatus", index);
      console.log("url at line 644:", url);
      uni.switchTab({
        url: url,
        success: function (res) {},
      });
    },
    switchTab(url) {
      console.log("url at line 644:", url);
      uni.switchTab({
        url: url,
      });
    },
    getData() {
      // 获取个人信息
      if (this.userInfo.id != undefined) {
        this.$http.post("common/user/getUserInfo").then((res) => {
          this.userMes = res.result;
          if (this.userMes.userVip) {
          }
        });
      }
    },

    // 新写分享
    newOnShare() {
      this.$refs.share.open();
    },

    // 注销账户
    logout() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确定要注销当前账户吗？",
        success: function (res) {
          if (res.confirm) {
            uni.showModal({
              title: "提示",
              showCancel: false,
              content: `注销申请已提交成功,请联系客服进行后续操作：022-24142321`,
              success: function (res1) {
                if (res1.confirm) {
                  that.signOut();
                }
              },
            });
          } else if (res.cancel) {
            // 取消操作
          }
        },
      });
    },
    // 跳转
    onGoing() {
      uni.showToast({
        icon: "none",
        title: "开发中，敬请期待...",
      });
    },
    onPageJump(url) {
      console.log(url, "url");
      uni.navigateTo({
        url: url,
      });
    },

    // 退出登录
    signOut() {
      this.signShow = false;
      this.setUserInfo({
        token: null,
      });
      uni.reLaunch({
        url: "/pages/user/login/login",
      });
    },
    //获取vip身份
    getUserVipType() {
      this.$http
        .request({
          url: "common/userVip/getUserVipType",
          method: "POST",
          data: {},
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.vipList = res.list;
            this.hasVipType1 = this.vipList.some((item) => item.type === 1);
            this.hasVipType2 = this.vipList.some((item) => item.type === 2);
            //筛选出来已过期的
            let listAll = this.vipList;
            let list = this.vipList.filter(
              (item) => !this.isExpired(item.endTime.split(" ")[0]),
            );

            //全部的 vip模块展示
            if (listAll.length > 0) {
              listAll = this.showDataList(listAll);
            }

            console.log("-------listAll", listAll);
            //筛选过期以后的 昵称模块展示需要
            if (list.length > 0) {
              list = this.showDataList(list);
            }
            console.log("-------list", list);
          }
        });
    },
    //分情况展示逻辑
    showDataList(list) {
      this.textList = [];
      list.forEach((item, index) => {
        if (item.type == "4") {
          item.text = "中医学";
          this.textList.push(item.text);
        } else if (item.type == "5") {
          item.text = "针灸学";
          this.textList.push(item.text);
        } else if (item.type == "6") {
          item.text = "肿瘤学";
          this.textList.push(item.text);
        } else if (item.type == "7") {
          item.text = "国学";
          this.textList.push(item.text);
        } else if (item.type == "8") {
          item.text = "心理学";
          this.textList.push(item.text);
        } else if (item.type == "9") {
          item.text = "中西汇通学";
          this.textList.push(item.text);
        } else if (item.type == "1") {
          item.text = "医学S";
        } else if (item.type == "2") {
          item.text = "国学心理学S";
        }
      });

      return this.textList;
    },
    //判断过期的vip
    isExpired(dateString) {
      const date = new Date(dateString);
      const now = new Date();
      return date < now;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";

.per_mes {
  position: relative;
  margin: 0rpx 0rpx 0rpx 20rpx;
  align-items: center;
  display: flex;
  align-items: center;

  .per_mes_img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 90rpx;
    margin: 0 0 0 0;
    float: left;
  }

  view {
    .name {
      width: 100%;
      font-weight: bold;
      font-size: 32rpx;
      color: #333 !important;
    }

    .phone {
      font-weight: bold;
      font-size: 28rpx;
      color: #333;
    }

    .tong {
      color: #999;
      font-size: 25upx;
    }

    .per_user_img {
      display: inline-block;
      width: 40upx;
      height: 40upx;
      margin-left: 10rpx;
      vertical-align: super;
    }
  }
}

.now_vip {
  background-color: #fff;
  // border-radius: 20upx;
  margin: 0 0 30upx 0;
  padding: 0 30upx;
  height: 120upx;
  background-image: linear-gradient(90deg, #feeed6 0%, #f5ce99 100%);

  image {
    width: 46rpx;
    height: 50rpx;
    display: inline-block;
    vertical-align: text-bottom;
    margin: 0 10rpx 0 0;
  }

  text {
    font-size: 30upx;
    line-height: 120upx;
    color: #977749;
    font-weight: bold;
  }

  .kt_btn {
    font-size: 26upx;
    display: block;
    float: right;
    border-radius: 50rpx;
    color: #fffbf6;
    padding: 12rpx 26rpx;
    margin: 33rpx 0 0 0;
    background-image: linear-gradient(90deg, #dfa964 0%, #7f5218 100%);
  }
}

.commonPageBox {
  background-image: url("@/static/icon/mine_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // background-color: #d8f8e4 !important;
}

.chong_zhi {
  box-shadow: none;
  padding: 0 30upx;
  height: auto;

  .zhanghu {
    margin-bottom: 10rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: $themeColor;
    font-weight: 700;
  }

  .noVip {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .zhanghu {
      font-size: 40rpx;
      margin-bottom: 0rpx;
      text-align: center;
      display: flex;
      align-items: center;
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }

  .chong_list {
    display: flex;

    align-items: center;
    font-size: 30rpx;
    justify-content: space-between;

    // margin-bottom: 40rpx;
    .left {
      display: flex;
      align-items: center;
    }

    .chong_list_item {
      width: auto;
      height: 100rpx;
      margin-right: 60rpx;
      text-align: center;
      display: inline-block;
      color: $themeColor;

      .text {
        font-size: 30rpx;
        display: block;
        font-weight: 700;
        // margin: 0 0 10rpx 0;

        color: $themeColor !important;
      }
    }

    .chong_btn {
      position: absolute;
      font-size: 26rpx;
      display: block;
      // top: 0px;
      right: 20rpx;
      float: right;
      border-radius: 50rpx;
      color: #fffbf6;
      padding: 10rpx 32rpx;
      // margin-top: -60rpx;
      // margin: 20rpx 0 0 0;
      background-image: linear-gradient(90deg, #3ab3ae 0%, #d5ecdd 200%);
    }
  }
}

.xiugai {
  border-radius: 20rpx !important;
  margin: 0 20rpx;
  // padding:0 40rpx;
  background: rgba(255, 255, 255, 0.65);

  .nav_list {
    background-color: #b7e0e2;
    padding: 15rpx 0 15rpx 10rpx;
    display: flex;
    align-items: center;
    font-size: 22rpx;
    position: relative;
    font-weight: bold;
    border-bottom: 1px solid #e5e5e5;

    &:active {
      background-color: #f5f5f5;
    }

    text {
      color: #333;
      margin-left: 10rpx;
    }

    &::after {
      content: "";
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 30rpx;
      height: 30rpx;
      background-image: url("@/static/icon/icon_right.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }

  .nav_list:nth-last-child(1) {
    border-bottom: 0;
  }
}

.box_fillet {
  border-radius: 40rpx;

  overflow: hidden;

  // background: #fff;
}

.chongzhi_box {
  position: relative;
  width: calc(100%);
  height: 100%;
  float: left;
  padding: 20rpx 20rpx;
  background-color: #edf6f5ad;
  border-radius: 20rpx;
}

.vip_box {
  padding: 20rpx 0;

  float: right;
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 10rx !important;
  background-image: linear-gradient(90deg, #3ab3ae 0%, #d5ecdd 120%);

  .PM_font {
    color: #476379;
  }

  .zhanghu {
    font-size: 80rpx;
    text-align: center;
    line-height: 100%;
    margin-bottom: 0;
  }
}

/deep/.scroll-view-item:nth-child(2n-1) {
  background-color: transparent !important;
}

uni-page-body {
  // background: #d8f8e4 !important;
}

.bg_top {
  padding: 0 30rpx;
  height: 30vh;
  position: relative;
  margin-top: 30rpx;

  .setIcon {
    position: absolute;
    right: 30rpx;
  }
}

.mine_box {
  width: 100%;
  position: absolute;
  left: 0;
  padding: 0 0rpx;
  margin-top: 30rpx;
}

.list_box {
  // background: #d8f8e4 !important;
  padding: 20rpx 0;
  margin-top: -10rpx;
}

.pay_item_img {
  display: flex;
  color: #333;
  // color: #dac4b7;
  align-items: center;
  // width: 80rpx;
  // height: 80rpx;
  padding: 0;
  box-sizing: border-box;
  font-weight: bold;
  // float: left;
  // margin-right: 20rpx;
  margin: 0 auto;
  margin-bottom: 10rpx;
  //margin-top:-10rpx;
}

.popup_box {
  padding-bottom: 20rpx;
  width: 88vw;
  overflow: hidden;
  position: relative;
  height: auto;

  .title {
    font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
    font-weight: normal;
    font-size: 46rpx;
    color: $themeColor;
    background-color: #f5f5f5;
    //   line-height: 46rpx;
    padding: 20rpx;
    //   border-leradius: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  .content {
    font-size: 26rpx;
    letter-spacing: 0.15rpx;
    padding: 20rpx;
    color: #3f3f3f;

    .top {
      margin: 30rpx 0;
    }

    .center {
      line-height: 40rpx;
      // padding:0 10rpx;
    }

    .bottom {
      width: 100%;
      margin-top: 60rpx;

      font-size: 24rpx;
      line-height: 26rpx;
      color: #b0b0b0;
    }
  }

  .button_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;

    .u-button {
      margin-left: 40rpx;
    }

    .u-button:nth-child(1) {
      margin-left: 0;
    }
  }
}
.super {
  color: #f4a04c;
}

.cate_box {
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;

  background-size: 100% 100%;
  // background-image: url("@/static/icon/cate_bg.png");
  box-shadow: 0rpx 0rpx 6rpx 0rpx #f9f6ea;
  border-radius: 7rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 5rpx 0rpx 20rpx;
  box-sizing: border-box;

  .cate_item_box {
    min-width: 110rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .cate_item_border {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cate_item_name {
      margin-top: 6rpx;
      font-weight: normal;
      font-size: 28rpx;
      color: #000000;
      text-align: center;
    }
  }
}

.order_box {
  .title {
    padding: 20rpx 20rpx 10rpx;
    font-size: 30rpx;
    font-weight: bold;
  }
}

.viptime {
  // padding: 15rpx 20rpx;
  font-size: 24rpx;
  margin-top: 4rpx;
  border-radius: 50rpx;
  // background: rgba(255, 255, 255, 0.65);
  // color: #6d6d6d !important;
  color: rgb(211, 59, 27) !important;
  // margin-top: 10rpx;
  line-height: 20rpx;
}

.right_arrow {
  background: #4b6579;
  width: 40rpx;
  height: 40rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx;
  position: absolute;
  right: 20rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.current_identity {
  top: 0;
  line-height: 32rpx;
  position: absolute;
  padding: 2rpx 10rpx;
  border: 4rpx solid #fff;
  border-bottom-right-radius: 20rpx;
  border-top-left-radius: 20rpx;
  font-size: 20rpx;
  font-weight: bold;
}

.hasVipBox {
  padding-top: 45rpx;
  padding-bottom: 0rpx;
  box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.45);
  border-radius: 20rpx;

  .vip_name {
    font-size: 60rpx;
  }

  .vip_info {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    padding: 0 30rpx;
  }

  .viptime {
    text-align: left;
    padding: 0 30rpx;
    font-size: 24rpx;
    color: #333 !important;
    // margin-top: 10rpx;
    font-weight: 500;
    margin-bottom: 20rpx;
  }
}

.vbg {
  font-size: 300px;
  font-weight: 800;
  position: absolute;
  color: #3e9d78bd !important;

  right: -40rpx;
  top: -10px;
}

.xufei {
  position: absolute;
  height: 46rpx;
  right: 20rpx;
  color: rgba(244, 43, 51, 0.85) !important;
  font-size: 24rpx;
  border-radius: 50rpx;
  line-height: 46rpx;
  padding: 0rpx 20rpx;
  background: rgba(255, 255, 255, 1);
}

.hasVipSuper {
  border: 2rpx solid #fff1ca;
  background-image: linear-gradient(90deg, #fff0dc 0%, #f8e483 100%);

  .current_identity {
    background-color: #fdefb5;

    color: #c47029;
  }

  .PM_font {
    color: #f4a04c;
  }
}

.hasVipZmZm {
  // border: 2rpx solid rgb(112, 179, 177);
  box-shadow: 0px 0px 5px 1px RGBA(235, 247, 243, 0.45);
  background-image: linear-gradient(90deg, #aff7d6 0%, #edf5f1 100%);

  // color: #38710A;
  .viptime {
    color: #486a65;
  }

  .vip_name {
    letter-spacing: 1px;
  }

  .current_identity {
    background-color: #a9ddc4;

    color: #20575c;
  }

  .PM_font {
    color: #3e9d78;
  }

  .viptime {
    color: #9acbce;
  }

  .hasVip .quanyi {
    border-color: #b7f6ed;
    color: #ffd598;
  }

  .xufei {
    background-image: linear-gradient(90deg, #f6dc95 0%, #ffc45e 100%);
    color: #3d2700 !important;
  }

  .vip_info_bottom {
    color: #486a65;
  }
}

.hasVipWumen {
  background-image: linear-gradient(90deg, #c4e8fe 0%, #60bcff 100%);
  // border: 2rpx solid rgb(112, 179, 177);
  box-shadow: 0px 0px 5px 1px RGBA(235, 247, 243, 0.45);

  // color: #38710A;
  .viptime {
    color: #486a65;
  }

  .vip_name {
    letter-spacing: 1px;
  }

  .current_identity {
    background-color: #e8f9ff;

    color: #243a61;
  }

  .PM_font {
    color: #127dff;
  }

  .viptime {
    color: #1d3a65;
  }

  .hasVip .quanyi {
    border-color: #e3f7fe;
    color: #ffd598;
  }

  .xufei {
    background-image: linear-gradient(90deg, #f6dc95 0%, #ffc45e 100%);
    color: #3d2700 !important;
  }

  .vip_info_bottom {
    color: #3583c3;
  }

  .vbg {
    color: #d1effc !important;
  }
}

.hasVip {
  position: relative;
  display: block !important;

  .zhanghu {
    display: block;
  }

  .vip_image {
    position: absolute;
    right: 20rpx;
    top: -20rpx;
    width: 120rpx;
    height: 120rpx;
    // margin-right: 10rpx;
  }

  .zhanghu {
  }

  .quanyi {
    border-top: 1rpx solid #f2d494;
    width: 100% !important;
    width: 100% !important;
  }
}

.vip_info_bottom {
  height: 64rpx;
}
.user_vip_box {
  width: 125rpx;
  position: absolute;
  margin-top: -40rpx;
  z-index: 99;
}
.user_vip_item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.user_vip_item {
  border-radius: 20rpx;
  background: linear-gradient(90deg, #ff1f00 0%, #fa9f93 100%);
  color: #fff;
  font-size: 20rpx;
  line-height: 40rpx;
  height: 40rpx;
  font-weight: bold;
  margin-bottom: 5rpx;
}
.user_vip_item image {
  width: 49rpx;
  height: 16rpx;
}
.vip_type {
  display: flex;
  align-items: center;
}
.vip_type_item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10rpx;
  background: linear-gradient(90deg, #3AB3AE  0%, #00e1ec 100%);
  border-radius: 20rpx;
  font-size: 18rpx;
  line-height: 40rpx;
  height: 40rpx;
  font-weight: bold;
  color: #fff;
  margin-right: 8rpx;
}
.vip_type_item_len {
  padding: 0 7rpx;
  font-size: 13rpx;
  line-height: 34rpx;
  height: 34rpx;
  margin-right: 4rpx;
}
.vip_type_item:last-child {
  margin-right: 0;
}
.vip_type_item image {
  width: 34rpx;
  height: 24rpx;
}
.vip_infor {
  padding-left: 15rpx;
}
.vip_infor_item {
  display: block;
  color: #fff;
  font-size: 26rpx;
  line-height: 36rpx;
  font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
  font-weight: normal;
}
.vip_infor_item text {
  color: #fff;
}
.vip_btn {
  margin-right: 15rpx;
  height: 50rpx;
}
.vip_btn button {
  background: none;
  border: 2rpx solid #3ab3ae;
  border-radius: 40rpx;
  font-size: 24rpx;
  width: 82rpx;
  line-height: 42rpx;
  color: #3ab3ae;
  font-weight: bold;
}
.vip_null {
  color: #fff;
  font-size: 26rpx;
  line-height: 34rpx;
}
.expired {
  opacity: 0.55;
}
</style>
