android-cloud-H5/pages/claimCloudPhone/components/bargainingAssistance.vue

<template>
  <div class="bargaining-assistance">
    <!-- 邀请人提示 -->
    <div class="inviter-tips" v-if="+type">
      <div>恭喜您选到喜欢的云手机</div>
      <div>您一定要免费带走</div>
      好友注册获得助力 好友下单加速助力
    </div>
    <!-- 被邀请人提示 -->
    <div v-else class="invitee-tips">
      <div class="invitee-tips-user">用户01</div>
      <div class="invitee-tips-text">
        亲，我在用双子星云手机，可以<span>24小时运行游戏/聊天/看视频</span>，双子星云手机已经帮我节省<span>10086小时</span>，我得任务全做完了，游戏升级哇哇快，现在官方活动领云机，麻烦帮我助力！
      </div>
    </div>
    <!-- 砍价进度 -->
    <div class="bargaining-assistance-main">
      <!-- 被邀请人助力、邀请人砍价 -->
      <template v-if="true">
        <div class="package-name">
          <span> {{ info.phoneType }}{{ info.validityPeriod }}天</span>
        </div>
        <div class="package-price"><span>￥</span>{{ info.totalAmount }}</div>
        <div class="package-progress">
          <customProgress v-model="info.schedule" />
        </div>
        <div class="package-tips">
          <div>
            仅差<span>{{ info.remainingPrice }}元</span>
          </div>
          <div>
            必得价值<span>{{ info.totalAmount }}元</span>的免费云机
          </div>
        </div>
        <div
          class="package-btn"
          :style="!+type ? 'margin-bottom: 24px;' : ''"
          @click="btnFun"
        >
          {{
            +type
              ? info.bargainingStatus === 1
                ? `继续砍价${info.remainingQuantity || 0}次`
                : '邀请好友助力免单'
              : '帮他助力'
          }}
        </div>
        <div class="package-expire" v-if="+type && time">
          免单失效时间：<van-count-down :time="time" />
        </div>
      </template>
      <!-- 被邀请人点击助力之后领取手机的页面 -->
      <template v-else>
        <div class="invitee-to-claim">
          <div class="invitee-to-claim_btn">免费领取</div>
        </div>
      </template>
    </div>
    <!-- 邀请人显示 -->
    <template v-if="+type">
      <!-- 砍价记录 -->
      <div class="bargaining-record">
        <div class="title">砍价记录</div>
        <div class="container">
          <loadList
            ref="assistRecodeList"
            url="activity/v5/assist/operation/assistRecodeList"
            description="暂无砍价记录"
          >
            <template #default="{ list }">
              <div
                v-for="item in list"
                :key="item.id"
                class="bargaining-record-item"
              >
                <div class="bargaining-record-item_info">
                  <div>{{ item.surfaceName }}</div>
                  <div>
                    道具砍掉<span>{{ item.assistPrice }}元</span>
                  </div>
                </div>
              </div>
            </template>
          </loadList>
        </div>
      </div>
      <!-- 云机发放记录 -->
      <div class="distribution-records">
        <div class="title">云机发放记录</div>
        <div class="container">
          <div>
            <div>序号</div>
            <div>云机名称</div>
            <div>套餐类型</div>
            <div>云机时长</div>
          </div>
          <div>
            <loadList
              ref="assistGetPhoneRecode"
              url="activity/v5/assist/operation/assistGetPhoneRecode"
              description="当前您还没有白嫖到云手机"
            >
              <template #default="{ list }">
                <div
                  v-for="(item, index) in list"
                  :key="item.id"
                  class="distribution-records-item"
                >
                  <div>{{ index + 1 }}</div>
                  <div>{{ item.diskName }}</div>
                  <div>{{ item.phoneTypeStr }}</div>
                  <div>{{ item.validTime }}天</div>
                </div>
              </template>
            </loadList>
          </div>
        </div>
      </div>
    </template>

    <!-- 参加活动的所有信息 -->
    <template v-if="barrageList.length">
      <div class="barrage"></div>
    </template>

    <div class="rule" @click="ruleVisible = true" v-if="+type">规则</div>
    <!-- 规则弹窗 -->
    <van-dialog v-model="ruleVisible" :showConfirmButton="false">
      <div class="rule-title">活动规则</div>
      <div class="rule-content">
        <div v-html="ruleHtml"></div>
      </div>
      <div class="rule-close">
        <van-icon name="cross" @click="ruleVisible = false" />
      </div>
    </van-dialog>

    <!-- 邀请人首次到砍价的页面的弹窗 -->
    <van-dialog v-model="bargainingVisible" :showConfirmButton="false">
      <div
        class="bargaining-img"
        @click="bargainingFun(true)"
        v-if="!bargainingTipsBool"
      ></div>
      <template v-else>
        <div class="bargaining-amount">
          <div class="bargaining-amount-text">
            恭喜您，砍价成功<span>{{ bargainingAmount }}元</span>
          </div>
          <div class="bargaining-amount-img"></div>
        </div>
      </template>
    </van-dialog>

    <!-- 退出活动页的弹窗 -->
    <van-dialog v-model="exitVisible" :showConfirmButton="false">
      <div class="exit">
        <div class="exit-content">
          <div>确定要退出吗？</div>
          <div>
            仅差<span>{{ info.remainingPrice }}元</span>免费带走云机
          </div>
          <div class="exit-content-progress">
            <customProgress v-model="info.schedule" />
          </div>
          <div class="exit-content-btn">
            <img
              @click="exitVisible = false"
              src="@/assets/image/claimCloudPhone/Inviting-others-img.png"
              alt=""
            />
            <div class="exit-content-btn_leave" @click="leaveFun">狠心离开</div>
          </div>
        </div>
        <img src="@/assets/image/claimCloudPhone/inviter-exit.png" alt="" />
      </div>
    </van-dialog>

    <!-- 砍价成功的弹窗-->
    <van-dialog
      v-model="successfulBargainingVisible"
      :showConfirmButton="false"
    >
      <div class="bargaining-success">
        <div class="bargaining-success-title">恭喜您，砍价成功</div>
        <div class="bargaining-success-tips">
          您的云手机【获取云手机名称】发放成功/续费成功
        </div>
        <div class="bargaining-success-btn">
          <div @click="claimTheNextOne">免费领下一台云机</div>
          <div @click="leaveFun">返回云手机首页</div>
        </div>
      </div>
    </van-dialog>

    <!-- 免单时间过期弹窗 -->
    <van-dialog v-model="expireVisible" :showConfirmButton="false">
      <div class="expire">
        <div class="expire-btn" @click="claimTheNextOne">免费领下一台云机</div>
      </div>
    </van-dialog>

    <!-- 被邀请人登录 -->
    <van-dialog v-model="loginVisible" :showConfirmButton="false">
      <div class="login">
        <div class="login-title">双子星快捷登录</div>
        <van-field placeholder="手机号" />
        <van-field placeholder="验证码">
          <template #button>
            <div class="login-code">获取验证码</div>
          </template>
        </van-field>
        <van-button color="#3666F2">登录</van-button>
        <div class="login-agreement">
          <van-checkbox icon-size="16px" v-model="agreementBool">
            通过登录即可完成注册，成为我们的新用户登录后表示同意
            <span>用户协议</span>
          </van-checkbox>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import customProgress from './customProgress.vue';
import loadList from '@/components/loadList';
import { fileKeyToUrl } from '@/plugins/file-center.js';
export default {
  props: {
    operateActivityId: {
      type: [String, Number],
      default: '',
    },
    type: {
      type: [Number, String],
      default: '',
    },
    getSystemTime: {
      type: Function,
      default: () => {
        return () => {};
      },
    },
    leaveFun: {
      type: Function,
      default: () => {
        return () => {};
      },
    },
    wxIntercept: {
      type: Function,
      default: () => {
        return () => {};
      },
    },
  },
  data() {
    return {
      total: 50, // 砍价百分比
      barrageList: [], // 滚动轮播数据
      ruleVisible: false, // 规则弹窗
      bargainingVisible: false, // 首次砍价弹窗
      bargainingTipsBool: false, // 是否切换成砍价金额的页面
      exitVisible: false, // 退出弹窗
      successfulBargainingVisible: false, // 砍价成功弹窗
      expireVisible: false, // 免单时间过期弹窗
      loginVisible: false, // 被邀请人登录框
      agreementBool: false, // 是否勾选协议
      ruleHtml: '', // 规则内容
      info: {}, // 砍价相关信息
      bargainingAmount: '', // 砍价金额
      systemTime: '', // 系统时间
    };
  },
  components: {
    customProgress,
    loadList,
  },
  mounted() {
    console.log(process.env.API_URL);
    if (+this.type === 1 || +this.type === 2) {
      this.getRule();
      this.getAssistAwardRecode();
    }

    this.bargainingStatus(true);
    switch (+this.type) {
      case 3: // 成功，领取下一台云机界面
        this.successfulBargainingVisible = true;
        break;
      case 4: // 失败，领取下一台云机界面
        this.expireVisible = true;
        break;
    }
  },
  computed: {
    time() {
      const { validityPeriodTimeStamp = 0 } = this.info;
      return validityPeriodTimeStamp
        ? validityPeriodTimeStamp - this.systemTime * 1000
        : 0;
    },
  },
  methods: {
    // 轮播活动参加的人的信息
    startBarrage() {
      const barrage = document.querySelector('.barrage');

      if (!barrage.childNodes.length) {
        const data = this.barrageList[0];
        this.barrageList.shift();
        this.barrageList.push(data);
        barrage.appendChild(writeIn(data));
      }
      const first = barrage.childNodes[0];
      setTimeout(() => {
        first.className = 'start';
        first.addEventListener('animationstart', () => {
          const data = this.barrageList[0];
          this.barrageList.shift();
          this.barrageList.push(data);
          const div = writeIn(data);
          barrage.appendChild(div);
          setTimeout(() => {
            div.style = 'opacity: 1';
          }, 100);
        });
        first.addEventListener('animationend', () => {
          barrage.removeChild(first);
          this.startBarrage();
        });
      }, 1000);

      function writeIn({ price, phoneNumber, phoneType, duration }) {
        const div = document.createElement('div');
        div.style = 'opacity: 0';
        div.innerHTML = `<div>
            <div>${phoneNumber}</div>
            <span> 领取了6次 </span>
          </div>
          <div>${phoneType}${duration}天，价值<span>${price}元</span></div>`;
        return div;
      }
    },
    bargainingFun(bool = false) {
      // 首次砍价的时候进此判断
      if (bool) {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 0,
        });
        const { menuRuleId, userCardId } = this.$route.query;
        const obj = {
          operateActivityId: this.operateActivityId,
          menuRuleId,
        };
        // 如果是续费，选择了对应云机，需要传云机id
        if (userCardId) obj.userCardId = userCardId;
        this.$axios
          .$post('activity/v5/assist/bargaining/userSelectedPackage', obj)
          .then((res) => {
            if (res.success) {
              // 砍价金额
              this.bargainingAmount = res.data.fristKnifeAmount;
              setTimeout(() => {
                this.bargainingTipsBool = true;
              });
              // 重新获取用户最新的数据
              setTimeout(this.bargainingStatus, 1000);
            }
          })
          .catch((error) => {
            setTimeout(() => {
              this.$toast(error.message);
            });
          })
          .finally(() => {
            this.$toast.clear();
          });
        return;
      }
      this.chopAKnife();
    },
    // 获取规则
    getRule() {
      this.$axios
        .$get('public/v4/agreement/content', {
          params: { agreementCoding: 'YDQLBHD10000' },
        })
        .then((res) => {
          if (res.success) {
            const html = res.data.content;
            const rx = /<body[^>]*>([\s\S]+?)<\/body>/i;
            let m = rx.exec(html);
            if (m) {
              m = m[1];
            }
            this.ruleHtml = m;
          }
        });
    },
    // 获取用户数据接口
    bargainingStatus(bool = false) {
      if (bool) {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 0,
        });
      }
      this.$axios
        .$get('activity/v5/assist/bargaining/current/bargainingStatus')
        .then(async (res) => {
          if (res.success) {
            this.info = res.data;
            const data = await this.getSystemTime();
            this.systemTime = data.data;
            if (this.info.bargainingStatus === 0) {
              this.bargainingVisible = true;
            }
            // 如果是安卓客户端登录的情况且bargainingStatus为 1 2 ，
            if (
              this.info.bargainingStatus === 1 ||
              this.info.bargainingStatus === 2
            ) {
              // 对安卓返回键做拦截
              if (
                (this.$userAgent.isSzx || this.$userAgent.isSzxBrowser) &&
                this.$userAgent.isAndroid
              ) {
                window.native.webBackStatus(true);
                window.appGoBackCallback = () => {
                  this.exitVisible = true;
                };
                return;
              }
              // 对微信做拦截
              if (this.$userAgent.isWx) {
                this.wxIntercept(() => {
                  history.pushState(null, null, document.URL);
                  this.exitVisible = true;
                });
                return;
              }
            }

            if (
              [1, 2].includes(this.info.bargainingStatus) &&
              this.$refs.assistRecodeList &&
              this.$refs.assistGetPhoneRecode
            ) {
              this.$refs.assistRecodeList.data = [];
              this.$refs.assistGetPhoneRecode.data = [];
              this.$refs.assistRecodeList.list();
              this.$refs.assistGetPhoneRecode.list();
            }
          }
        })
        .catch((error) => {
          this.$toast(error.message);
        })
        .finally(() => {
          if (this.info.bargainingStatus !== 0) this.bargainingVisible = false;
          this.$toast.clear();
        });
    },
    // 滚动的相关数据
    getAssistAwardRecode() {
      this.$axios
        .$get('activity/v5/assist/operation/getAssistAwardRecode', {})
        .then((res) => {
          if (res.success) {
            this.barrageList = res.data;
            setTimeout(() => {
              this.barrageList.length && this.startBarrage();
            });
          }
        });
    },
    // 领取下一台手机
    claimTheNextOne() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0,
      });
      this.$axios
        .$get('activity/v5/assist/operation/reportCutStatus', {
          params: {
            userLaunchId: this.info.userLaunchId,
          },
        })
        .then((res) => {
          if (res.success) {
            // 解除安卓返回按键
            if (
              (this.$userAgent.isSzx || this.$userAgent.isSzxBrowser) &&
              this.$userAgent.isAndroid
            ) {
              window.native.webBackStatus(false);
            }
            this.$router.replace('/claimCloudPhone/chooseCloudPhone?exit=1');
          }
        })
        .catch((error) => {
          setTimeout(() => {
            this.$toast(error.message);
          });
        })
        .finally(() => {
          this.$toast.clear();
        });
    },
    // 砍一刀
    chopAKnife() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0,
      });
      this.$axios
        .$post('activity/v5/assist/operation/chopAKnife')
        .then((res) => {
          if (res.success) {
            this.bargainingTipsBool = true;
            this.bargainingAmount = res.data;
            setTimeout(() => {
              this.bargainingVisible = true;
            });
            // 重新获取用户最新的数据
            setTimeout(this.bargainingStatus, 1000);
          }
        })
        .catch((error) => {
          this.$toast(error.message);
          setTimeout(() => {
            this.$toast.clear();
          }, 500);
        });
    },
    btnFun() {
      if (+this.type) {
        switch (this.info.bargainingStatus) {
          case 1:
            this.chopAKnife();
            break;
          case 2:
            this.$toast.loading({
              message: '加载中...',
              forbidClick: true,
              duration: 0,
            });
            this.$axios
              .$post('activity/v5/assist/bargaining/getGenerateInvitationLink')
              .then(async (res) => {
                if (res.success) {
                  res.data.desc = res.data.content;
                  res.data.link = res.data.url;
                  res.data.imgUrl = fileKeyToUrl(res.data.imgUrl);
                  const shareInfo = { ...res.data };
                  if (this.$userAgent.isSzx || this.$userAgent.isSzxBrowser) {
                    this.$native.share(shareInfo);
                  } else {
                    // 微信环境不支持复制
                    if (this.$userAgent.isWx || this.$userAgent.isMiniProgram) {
                      setTimeout(() => {
                        this.$toast.fail(
                          '链接复制失败，请访问客户端或网页复制该链接',
                        );
                      });
                      return;
                    }
                    // 浏览器环境
                    await this.$native.clipboard.writeText(res.data.link);
                    setTimeout(() => {
                      this.$toast.success('链接复制成功');
                    });
                  }
                }
              })
              .finally(() => {
                this.$toast.clear();
              });
            break;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bargaining-assistance {
  height: 100%;
  .inviter-tips,
  .invitee-tips {
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  }
  .inviter-tips {
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;
    line-height: 17px;
    text-align: center;
    font-style: normal;
    margin-bottom: 14px;
    & > div {
      font-size: 26px;
      line-height: 30px;
    }
  }
  .invitee-tips {
    .invitee-tips-user {
      font-weight: bold;
      font-size: 18px;
      color: #ffffff;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      margin-bottom: 8px;
    }

    .invitee-tips-text {
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      span {
        color: #fceba9;
      }
      margin-bottom: 24px;
    }
  }
  .bargaining-assistance-main {
    background: #ffffff;
    border-radius: 20px;
    margin-bottom: 24px;
    overflow: hidden;
    .package-name {
      display: flex;
      justify-content: center;
      span {
        display: inline-block;
        padding: 5px 61px;
        background: #ffe8e8;
        border-radius: 0 0 15px 15px;
        margin: 0 auto;
        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
        font-weight: bold;
        font-size: 16px;
        color: #c00202;
        line-height: 20px;
        text-align: center;
        font-style: normal;
      }
    }
    .package-price {
      font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
      height: 120px;
      font-weight: normal;
      box-sizing: border-box;
      padding-top: 30px;
      font-size: 30px;
      color: #c70b0b;
      line-height: 62px;
      text-align: center;
      font-style: normal;
      font-weight: bold;
      width: calc(100% - 24px);
      margin: 0 auto;
      background: #ffffff;
      box-shadow: 0px 0px 8px 2px #f4f7f8, 0px 2px 4px 0px #ecedf8;
      border-radius: 20px;
      margin-top: -20px;
      span {
        font-size: 20px;
      }
    }
    .package-progress {
      margin: 40px 42px 28px;
    }
    .package-tips {
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      color: #000000;
      line-height: 22px;
      font-style: normal;
      margin-bottom: 24px;
      span {
        color: #f04646;
      }
      & > div:first-of-type {
        font-size: 21px;
        line-height: 29px;
      }
    }
    .package-btn {
      height: 54px;
      background: linear-gradient(178deg, #fd8c50 0%, #fc3307 100%);
      border-radius: 28px;
      margin: 0 27px;
      font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
      font-weight: bold;
      font-size: 20px;
      color: #ffffff;
      line-height: 54px;
      text-align: center;
      font-style: normal;
      // margin-bottom: 24px;
    }
    .package-expire {
      margin-top: 12px;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      text-align: center;
      font-style: normal;
      margin-bottom: 24px;
      &,
      .van-count-down {
        font-weight: 400;
        font-size: 12px;
        color: #7d6156;
        line-height: 16px;
      }
      .van-count-down {
        display: inline-block;
      }
    }
    .invitee-to-claim {
      height: 339px;
      border-radius: 20px;
      background: url('~/assets/image/claimCloudPhone/Invitee-to-claim.png')
        no-repeat 0 0;
      background-size: 100% 100%;
      position: relative;
      .invitee-to-claim_btn {
        height: 54px;
        background: linear-gradient(90deg, #ff6d2b 0%, #ff1500 100%);
        box-shadow: inset 9px -7px 19px 0px #ffba57,
          inset -1px 2px 6px 0px #ffbd63;
        border-radius: 27px;
        text-align: center;
        position: absolute;
        bottom: 14px;
        width: 200px;
        font-family: YouSheBiaoTiYuan;
        font-size: 28px;
        color: #ffffff;
        line-height: 23px;
        left: 50%;
        transform: translateX(-50%);
        font-style: normal;
        font-weight: bold;
        line-height: 54px;
      }
    }
  }
  .bargaining-record {
    margin-bottom: 24px;
  }
  .bargaining-record,
  .distribution-records {
    background: #ffffff;
    border-radius: 12px;
    .title {
      height: 44px;
      background: #ffe8e8;
      border-radius: 12px 12px 0px 0px;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: bold;
      font-size: 16px;
      color: #c00202;
      line-height: 44px;
      text-align: center;
      font-style: normal;
    }

    .container {
      height: 250px;
      overflow-y: auto;
      padding: 0 20px;
      scrollbar-width: none !important; /* 对于 Firefox 隐藏滚动条 */
      &::-webkit-scrollbar {
        display: none !important; /* 对于 Chrome, Safari 和 Opera 隐藏滚动条 */
      }
      .van-empty {
        padding: 0 !important;
      }
    }

    .bargaining-record-item {
      height: 53px;
      border-bottom: 2px #f1f1f1 solid;
      display: flex;
      align-items: center;

      .bargaining-record-item_info {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #7d6156;
        line-height: 18px;
        font-style: normal;
        & > div:first-of-type,
        span {
          font-weight: bold;
        }
        span {
          color: #c00202;
        }
      }
    }
  }

  .distribution-records {
    .container {
      padding: 0px;
      position: relative;
      & > div:first-of-type {
        position: absolute;
        width: 100%;
        left: 0;
        height: 20px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px #ecedf8;
        top: 0;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #7d6156;
        line-height: 20px;
        text-align: center;
        display: flex;
        font-style: normal;
        & > div {
          width: 25%;
        }
      }
      & > div:last-of-type {
        height: 100%;
        box-sizing: border-box;
        padding-top: 20px;
        overflow-y: auto;
        scrollbar-width: none !important; /* 对于 Firefox 隐藏滚动条 */
        &::-webkit-scrollbar {
          display: none !important; /* 对于 Chrome, Safari 和 Opera 隐藏滚动条 */
        }
        ::v-deep .van-empty {
          padding: 0px;
          .van-empty__image {
            img {
              display: none;
            }
            background: url('~/assets/image/claimCloudPhone/distribution-records-empty.png')
              no-repeat center bottom;
            background-size: 90px 90px;
          }
        }
        .distribution-records-item {
          height: 46px;
          line-height: 46px;
          box-sizing: border-box;
          display: flex;
          border-bottom: 2px #f1f1f1 solid;
          & > div {
            width: 25%;
            text-align: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #6d2b12;
            text-align: center;
            font-style: normal;
          }
        }
      }
    }
  }

  .barrage {
    position: fixed;
    bottom: 11%;
    transform: translateY(-11%);
    right: 11px;
    & > ::v-deep div {
      transition: all 0.7s;
      &.start {
        opacity: 1;
        animation: barrage 0.5s linear;
        @keyframes barrage {
          0% {
            opacity: 1;
            transform: translateY(0px);
          }
          100% {
            transform: translateY(-30px);
            opacity: 0;
          }
        }
      }
      opacity: 1;
      width: 143px;
      height: 40px;
      position: absolute;
      bottom: 11%;
      right: 11px;
      background: linear-gradient(
        90deg,
        #992bff 0%,
        rgba(255, 21, 0, 0.4) 100%
      );
      border-radius: 23px;
      border-image: linear-gradient(
          94deg,
          rgba(255, 255, 255, 1),
          rgba(255, 255, 255, 0.35)
        )
        1 1;
      padding: 0 10px;
      font-size: 10px;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      & > div {
        height: 16px;
        line-height: 16px;
        &:first-of-type {
          display: flex;
          & > div {
            width: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          & > span {
            display: inline-block;
            background: linear-gradient(to bottom, #fec37a 0%, #ff1500 100%);
            border-radius: 21px;
            padding: 0 10px;
          }
        }
        &:last-of-type span {
          color: #fddb2b;
        }
      }
    }
  }

  .rule {
    position: fixed;
    top: 12.5%;
    right: 0;
    width: 40px;
    height: 20px;
    line-height: 20px;
    background: #f04646;
    border-radius: 17px 0px 0px 17px;
    z-index: 2;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
    font-style: normal;
  }
  .rule-title {
    height: 53px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, #f6cdb9 0%, #fbdbde 100%);
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: bold;
    font-size: 18px;
    color: #751d13;
    line-height: 53px;
    text-align: center;
    font-style: normal;
  }

  .rule-content {
    height: 325px;
    padding: 16px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 0 0 16px 16px;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 400;
    font-size: 14px;
    color: #751d13;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    overflow-y: auto;
  }

  .rule-close {
    height: 32px;
    width: 32px;
    background: #c1c1c1;
    z-index: 5;
    margin: 20px auto 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #666666;
  }

  ::v-deep .van-dialog {
    background: transparent !important;
  }

  .bargaining-img {
    height: 512px;
    width: 100%;
    background: url('~/assets/image/claimCloudPhone/bargaining-popUp.png')
      no-repeat 0 20px;
    background-size: 100% 100%;
  }

  .bargaining-amount {
    height: 234px;
    background: url('~/assets/image/claimCloudPhone/bargaining-amount-img.png')
      no-repeat 0 20px;
    padding-top: 30px;
    box-sizing: border-box;
    background-size: 100% 210px;
    .bargaining-amount-text {
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: bold;
      font-size: 24px;
      color: #ffffff;
      text-align: center;
      font-style: normal;
      span {
        color: #ff0000;
      }
    }
  }

  .exit {
    height: 520px;
    position: relative;
    & > img {
      height: 100%;
      width: 100%;
    }

    .exit-content {
      position: absolute;
      top: 25%;
      left: 50%;
      width: 200px;
      transform: translateX(-50%);
      font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
      font-weight: bold;
      font-size: 16px;
      color: #171815;
      line-height: 24px;
      text-align: center;
      font-style: normal;
      & > div span {
        color: #f04646;
      }

      .exit-content-progress {
        margin: 50px 0 80px;
      }

      .exit-content-btn {
        & > img {
          height: 42px;
          width: 100%;
        }
        .exit-content-btn_leave {
          font-weight: 400;
          font-size: 12px;
          color: #faf3d8;
        }
      }
    }
  }

  .bargaining-success {
    height: 378px;
    background: url('~/assets/image/claimCloudPhone/successful-bargaining-img.png')
      no-repeat 0 0;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
    .bargaining-success-title {
      margin-top: 24px;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: bold;
      font-size: 28px;
      color: #fdf9c8;
      line-height: 38px;
      text-align: center;
      font-style: normal;
    }
    .bargaining-success-tips {
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      width: 165px;
      font-weight: bold;
      font-size: 12px;
      color: #ffffff;
      line-height: 17px;
      text-align: center;
      margin: 0 auto;
    }

    .bargaining-success-btn {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      & > div {
        width: 180px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        border-radius: 24px;
        color: #fff;
        font-weight: bold;
        &:first-of-type {
          margin-bottom: 8px;
          background: linear-gradient(178deg, #fd8c50 0%, #fc3307 100%);
        }
        &:last-of-type {
          color: #e63b47;
          border: 1px solid #e63b47;
        }
      }
    }
  }

  .expire {
    height: 378px;
    background: url('~/assets/image/claimCloudPhone/expire-img.png') no-repeat 0
      0;
    background-size: 100% 100%;
    position: relative;
    .expire-btn {
      position: absolute;
      bottom: 20px;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 48px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      font-style: normal;
      width: 180px;
      height: 48px;
      background: linear-gradient(178deg, #fd8c50 0%, #fc3307 100%);
      border-radius: 24px;
    }
  }

  .login {
    height: 312px;
    background: #ffffff;
    border-radius: 24px;
    padding: 16px 28px;
    box-sizing: border-box;
    .login-title {
      font-family: DingTalk, DingTalk;
      font-weight: normal;
      font-weight: bold;
      font-size: 24px;
      color: #0a132b;
      line-height: 28px;
      text-align: left;
      font-style: normal;
      margin-bottom: 14px;
    }
    .van-field {
      margin-bottom: 14px;
      border-radius: 8px;
      border: 1px solid #e6e6e6;
    }

    .van-button {
      width: 100%;
      border-radius: 8px;
    }

    .login-code {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #3666f2;
      line-height: 16px;
      text-align: left;
      font-style: normal;
    }

    .login-agreement {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      font-style: normal;
      margin-top: 12px;
      display: flex;
      span {
        color: #3666f2;
      }
      .van-checkbox {
        align-items: start;
        ::v-deep .van-checkbox__label {
          color: #999999;
        }

        ::v-deep .van-checkbox__icon {
          margin-top: 3px;
        }
      }
    }
  }

  ::v-deep .phone-container {
    background: transparent;
  }
}
</style>