<template>
  <div class="goodsOrder">
    <div ref="goodsOrder">
      <m-header />

      <van-cell-group>
        <van-field readonly clickable label="订单类型" :value="orderText" input-align="right" placeholder="选择类型" @click="showPicker = true" />
        <van-popup v-model="showPicker" round position="bottom">
          <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>
        <van-field :readonly="true" label="学生姓名" v-model="studentName" placeholder="请输入学生姓名" input-align="right" />
        <van-field
          label="选择商品"
          :readonly="true"
          @click="
            () => {
              goodsStatus = true;
              hashState('goods');
            }
          "
          is-link
          placeholder="选择商品"
          input-align="right"
        />
        <van-cell v-for="(item, index) in goodsList" :key="index" class="input-cell" :center="true">
          <template slot="icon">
            <van-image :src="item.image" class="logo">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </template>
          <template slot="title">
            <div>{{ item.goodsName }}</div>
            <div class="price-section detail">
              <span class="money"><i>现价：￥</i>{{ item.discountPrice | moneyFormat }}</span>
              <p class="groupPrice">
                <span class="groupTitle">团购价：</span><span class="groupMoney">￥{{ item.groupPurchasePrice | moneyFormat }}</span>
              </p>
            </div>

            <div style="position: absolute; right: 0.16rem; bottom: 0.1rem">
              <van-stepper @change="calcPrice" :disable-input="true" v-model="item.goodsNum" button-size="22" />
            </div>
            <van-icon class="icon_close" name="cross" @click="onGoodDel(goodsList, item)" />
          </template>
        </van-cell>
      </van-cell-group>

      <!-- 是否用余额支付 支付金额大于0时才会显示是否用余额支付 -->
      <van-cell-group class="pay-section">
        <van-cell :disabled="false" title="总价格" title-class="pay-name" value-class="pay-value" :center="true">
          <template #default> ￥{{ payCountMoney | moneyFormat }} </template>
        </van-cell>
        <van-field label="减免金额" @input="setNoMore" v-model="marketAmount" type="number" ref="marketInput" placeholder="请输入减免金额" input-align="right" />
      </van-cell-group>

      <protocol v-model="agreeStatus" :userId="studentId.toString()" style="padding-top: 0.08rem" />

      <div class="button-group">
        <van-button class="btn-sure" type="primary" @click="onRefundSure(obj)" round size="large">确认</van-button>
      </div>
    </div>

    <van-popup class="popup-qrcode" v-model="qrCodeStatus" closeable close-icon="cross" @close="onClose">
      <div id="qrcode">
        <vue-qr :logoSrc="config.imagePath" :text="config.value" :margin="10" :size="220"></vue-qr>
      </div>
      <a id="tt" ref="download" v-show="false" :href="downloadUrl" :download="downloadfilename"></a>
      <!-- <p>点击图片进行下载</p> -->
      <van-button v-if="!headerStatus" color="#01C1B5" :disabled="downloadStatus" type="primary" @click="createPoster" round>下载二维码</van-button>
    </van-popup>

    <van-popup v-model="goodsStatus" :lock-scroll="true" position="bottom" :style="{ height: '100%', borderRadius: '0', overflowY: 'auto' }">
      <van-sticky offset-top="0">
        <m-header :backUrl="backUrl2" name="商品列表" :isFixed="false" />
        <search @onSearch="onSearch" placeholder="请输入商品名称" />
        <van-dropdown-menu active-color="#01C1B5">
          <van-dropdown-item :title="valueText1" v-model="value1" :options="option1" @change="onOptionChange" />
          <van-dropdown-item :title="valueText2" v-model="value2" :options="option2" @change="onOptionChange" />
        </van-dropdown-menu>
      </van-sticky>

      <div>
        <van-list v-model="loading" class="studentContainer" v-if="dataShow" key="data" :finished="finished" finished-text="" @load="getGoodsList">
          <van-cell-group>
            <van-cell v-for="(item, index) in dataList" :key="index" class="input-cell" @click="onChoiceGood(item)" :center="true">
              <template slot="icon">
                <van-image :src="item.image" class="logo">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                </van-image>
              </template>
              <template slot="title">
                <div>{{ item.name }}</div>
                <van-tag plain color="#C2A076" style="margin: 0.04rem 0">品牌：{{ item.brand }}</van-tag>
                <div class="price-section">
                  <span class="money"><i>现价：￥</i>{{ item.discountPrice | moneyFormat }}</span>
                  <p class="groupPrice">
                    <span class="groupTitle">团购价：</span><span class="groupMoney">￥{{ item.groupPurchasePrice | moneyFormat }}</span>
                  </p>
                </div>
                <div class="price-section">
                  <del>原价：￥{{ item.marketPrice | moneyFormat }}</del>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </van-list>
        <m-empty class="empty" v-else />
      </div>
    </van-popup>

    <!-- 协议 -->
    <van-popup id="protocolPopup" v-model="popupStatus" position="bottom">
      <m-protocol :protocolHTML="protocolHTML" @onClose="popupStatus = !popupStatus" @onPopupSure="popupStatus = !popupStatus" />
    </van-popup>

    <van-popup v-model="refundStatus" position="bottom" v-if="refundStatus">
      <m-refund @onClose="refundStatus = !refundStatus" @onPopupSure="onRefundSure" :ids="[1, 2]" :buyList="buyList" :balance="this.orderType == 1 ? balance : 0" />
    </van-popup>

    <m-payment :closeStatus="isStatus" :amount="payMoney" :payment="payment" @onChangeStatus="onChangeStatus" />
  </div>
</template>
<script>
import MHeader from "@/components/header";
import MPayment from "@/components/MPayment";
import Protocol from "@/components/Protocol";
import MRefund from "@/components/MRefund";
import MEmpty from "@/components/MEmpty";
import Search from "@/components/Search";
import qs from "query-string";
import { addGoodsSellOrder, queryGoodsPage, queryGoodsCategoryPage, getUserCashAccount } from "./api";
import { browser, validStudentUrl } from "@/common/util";
import setLoading from "@/common/loading";
import VueQr from "vue-qr";
export default {
  name: "teacherList",
  components: {
    MHeader,
    VueQr,
    MPayment,
    MEmpty,
    Protocol,
    MRefund,
    Search,
  },
  data() {
    let query = this.$route.query;
    // 保存之前输入的内容
    return {
      value1: "all",
      valueText1: "类型: 全部",
      option1: [
        {
          text: "全部",
          value: "all",
        },
        {
          text: "乐器",
          value: "INSTRUMENT",
        },
        {
          text: "辅件",
          value: "ACCESSORIES",
        },
        {
          text: "教材",
          value: "TEACHING",
        },
        {
          text: "教谱",
          value: "STAFF",
        },
      ],
      couponObj: {
        INSTRUMENT: "MUSICAL",
        ACCESSORIES: "ACCESSORIES",
        TEACHING: "TEACHING",
        STAFF: "OTHER",
      },
      value2: "all",
      valueText2: "商品: 全部",
      search: null,
      option2: [],
      goodsStatus: false,
      dataList: [],
      radio: "1",
      studentId: query.studentId, // 学生编号
      organId: query.organId,
      studentName: query.studentName,
      goodsList: [],
      marketAmount: null,
      tempForm: {}, // 临时存数据
      payType: false, // 是否使用余额
      balance: 0, // 余额
      isClick: false,
      downloadStatus: true,
      qrCodeStatus: false,
      downloadUrl: null,
      downloadfilename: null,
      sGoodsOrderId: null,
      config: {
        value: null, //显示的值、跳转的地址
        imagePath: require("../../assets/images/logo-s.png"), //中间logo的地址
      },
      headerStatus: true,
      isStatus: false,
      payment: {}, // 支付对象
      payMoney: 0,
      payCountAmount: 0,
      loading: false,
      finished: false,
      params: {
        status: 1,
        // studentShowOrganId: query.organId || null,
        // educationalShow: 1, // 是否是教务端显示
        page: 1,
        rows: 20,
      },
      dataShow: true, // 是否有数据
      clickStatus: false,
      choiceGood: null,
      backUrl2: {
        callBack: () => {
          this.goodsStatus = false;
        },
      },
      refundStatus: false,
      refundSure: false, // 是否确认退费规则
      buyList: [],
      disCountList: [],
      moneyList: [],
      payCountMoney: 0,
      protocolHTML: null,
      agreeStatus: false,
      popupStatus: false,
      couponShow: false,
      couponList: [],
      valuePirce: 0,
      dataLists: [],
      countMoney: 0,
      groupPrice: 0,
      obj: null,
      showPicker: false,
      columns: ["老师代买", "创建订单"],
      orderType: null,
      orderText: null,
    };
  },
  mounted() {
    // 插入token
    if (browser().android || browser().iPhone) {
      this.headerStatus = false;
    }
    this.__init();

    window.addEventListener("hashchange", this.onHash, false);
  },
  methods: {
    onHash() {
      this.refundStatus = false;
      this.goodsStatus = false;
    },
    hashState(status) {
      // 打开弹窗
      const type = status === "goods" ? this.goodsStatus : this.refundStatus;
      if (type) {
        this.isDestroy = false;
        const splitUrl = window.location.hash.slice(1).split("?");
        const query = qs.parse(splitUrl[1]);
        let times = 0;
        for (let key in query) {
          times++;
        }
        const origin = window.location.href;
        const url = times > 0 ? "&cPop=" + +new Date() : "?cPop=" + +new Date();
        history.pushState("", "", `${origin}${url}`);
      } else {
        const splitUrl = window.location.hash.slice(1).split("?");
        const query = qs.parse(splitUrl[1]);
        if (query.cPop) {
          window.history.go(-1);
        }
      }
    },
    onConfirm(value, index) {
      this.orderText = value;
      if (index == 0) {
        this.orderType = 1;
      } else if (index == 1) {
        this.orderType = 2;
      } else {
        this.orderType = null;
      }
      this.showPicker = false;
    },
    onRefundSure(obj) {
      if (obj) {
        this.refundStatus = false;
        this.refundSure = true;
        this.obj = obj;
        if (this.orderType == 1) {
          this.onCheckSubmit();
        } else {
          this.onCreateCode();
        }
      } else {
        // 第一次 判断是否
        if (this.orderType == 1) {
          this.onCheckSubmit();
        } else {
          this.onCreateCode();
        }
      }
    },
    onOptionChange() {
      this.option1.forEach((item) => {
        if (item.value == this.value1) {
          this.valueText1 = item.value == "all" ? "类型: 全部" : item.text;
        }
      });

      this.option2.forEach((item) => {
        if (item.value == this.value2) {
          this.valueText2 = item.value == "all" ? "商品: 全部" : item.text;
        }
      });

      this.params.page = 1;
      this.dataList = [];
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.getGoodsList();
    },
    onChoiceGood(item) {
      let goodsList = this.goodsList;
      let status = false;
      goodsList.forEach((good) => {
        if (good.goodsId == item.id) {
          status = true;
          ++good.goodsNum;
        }
      });
      // 判断是否有同样的商品
      if (!status) {
        goodsList.push({
          goodsNum: 1, // 默认数据为1件
          goodsId: item.id,
          image: item.image,
          goodsName: item.name,
          marketPrice: item.marketPrice,
          discountPrice: item.discountPrice,
          complementGoodsIdList: item.complementGoodsIdList,
          groupPurchasePrice: item.groupPurchasePrice,
          type: item.type,
        });
      }
      this.goodsStatus = false;
      // this.resetCoupon();
      this.calcPrice();
      this.hashState("goods");
    },
    onGoodDel(goodsList, item) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否删除该商品",
          confirmButtonColor: "#01C1B5",
        })
        .then(() => {
          let index = goodsList.indexOf(item);
          if (index !== -1) {
            goodsList.splice(index, 1);
          }
          this.calcPrice();
        });
    },
    onSearch(value) {
      // 商品搜索
      this.search = value;
      this.params.page = 1;
      this.dataList = [];
      this.loading = true;
      this.finished = false;
      this.dataShow = true;
      this.getGoodsList();
    },
    async getGoodsList() {
      let params = this.params;
      params.type = this.value1 == "all" ? null : this.value1;
      params.goodsCategoryId = this.value2 == "all" ? null : this.value2;
      params.search = this.search ? this.search : null;
      await queryGoodsPage(params).then((res) => {
        let result = res.data;
        this.loading = false;
        if (result.code == 200) {
          params.page = result.data.pageNo;
          this.dataList = this.dataList.concat(result.data.rows);
          if (params.page >= result.data.totalPage) {
            this.finished = true;
          }
          this.params.page++;
        } else {
          this.finished = true;
        }
        // 判断是否有数据
        if (this.dataList.length <= 0) {
          this.dataShow = false;
        }
      });
    },
    async __init() {
      try {
        await getUserCashAccount({ id: this.studentId }).then((res) => {
          this.balance = res.data.balance || 0;
        });

        await queryGoodsCategoryPage({
          delFlag: 0,
          rows: 9999,
        }).then((res) => {
          let result = res.data;
          let tempArray = [
            {
              text: "全部",
              value: "all",
            },
          ];
          result.rows.forEach((row) => {
            tempArray.push({
              text: row.name,
              value: row.id,
            });
          });
          this.option2 = tempArray;
        });
      } catch {
        //
      }
    },
    async onCreateCode() {
      if (!this.onCheckFiled()) {
        return;
      }
      // console.log(!this.refundSure, this.payCountMoney - this.marketAmount > 0);
      // 确认退费规则
      if (!this.refundSure && this.payCountMoney - this.marketAmount > 0) {
        this.refundStatus = true;
        this.hashState();
        return;
      }
      let form = {
        studentId: this.studentId,
        goodsList: JSON.stringify(this.goodsList),
        marketAmount: this.marketAmount ? this.marketAmount : 0,
        couponIdList: this.obj.couponIdList,
      };
      let formCheckChange = false;
      let tempForm = this.tempForm;
      // 判断是否修改过内容
      if (form.studentId == tempForm.studentId && form.goodsList == tempForm.goodsList && form.marketAmount == tempForm.marketAmount && JSON.stringify(form.couponList) == JSON.stringify(tempForm.couponList)) {
        formCheckChange = true;
      }

      if (this.sGoodsOrderId && formCheckChange) {
        this.onPosterCode(this.sGoodsOrderId);
      } else {
        form.type = 1;
        this.tempForm = form;
        setLoading(true);
        await addGoodsSellOrder({
          userId: this.studentId,
          goodsSellDtos: this.goodsList,
          marketAmount: this.marketAmount ? this.marketAmount : 0,
          type: 1,
          couponIdList: this.obj ? this.obj.couponIdList : [],
        })
          .then((res) => {
            setLoading(false);
            let tempGoods = res.data;
            if (tempGoods.code == 200) {
              this.sGoodsOrderId = tempGoods.data.id;
              this.onPosterCode(tempGoods.data.id);
            } else {
              this.$toast(res.msg);
            }
          })
          .catch(() => {
            // console.log(e);
            setLoading(false);
          });
      }
      setTimeout(() => {
        this.isClick = false;
      }, 500);
    },
    onPosterCode(goodsId) {
      this.$refs.goodsOrder.style.filter = "blur(3px)";
      this.qrCodeStatus = true;
      let url = validStudentUrl() + "/#/goodsOrderBuy?id=" + goodsId + "&studentId=" + this.studentId;
      // console.log(url)
      this.config.value = url;
      // 可以点击下载按钮了
      this.downloadStatus = false;
    },
    createPoster() {
      let tempImg = document.querySelector("#qrcode img");
      this.downloadUrl = tempImg.src;
      this.downloadfilename = "qrCode.png";
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "下载中...",
      });
      if (browser().android) {
        setTimeout(() => {
          this.$toast.clear();
          //a 标签下载
          this.$refs.download.click();
        }, 2000);
      } else if (browser().iPhone) {
        setTimeout(() => {
          this.$toast.clear();
          //a 标签下载
          window.webkit.messageHandlers.DAYA.postMessage(
            JSON.stringify({
              api: "downLoadImg",
              content: {
                downloadUrl: tempImg.src,
              },
            })
          );
        }, 2000);
      }
    },
    onClose() {
      this.$refs.goodsOrder.style.filter = "blur(0px)";
    },
    async onChangeStatus(val) {
      try {
        this.isStatus = val;
        await getUserCashAccount({ id: this.studentId }).then((res) => {
          this.balance = res.data.balance || 0;
        });
        this.payType = false;
        this.calcPrice();
      } catch {
        //
      }
    },
    async onCheckSubmit() {
      if (!this.onCheckFiled()) {
        return;
      }
      // 确认退费规则
      if (!this.refundSure && this.payCountMoney - this.marketAmount > 0) {
        this.refundStatus = true;
        this.hashState();
        return;
      }

      let goodsList = this.goodsList;
      setLoading(true);
      await addGoodsSellOrder({
        userId: this.studentId,
        goodsSellDtos: goodsList,
        marketAmount: this.marketAmount ? this.marketAmount : 0,
        isUseBalancePayment: this.obj ? this.obj.payType : false,
        couponIdList: this.obj ? this.obj.couponIdList : [],
      })
        .then((res) => {
          setLoading(false);
          let result = res.data;
          if (result.code == 200) {
            // this.resetCoupon();
            this.result = result.data;
            this.onSubmit();
          } else if (result.code == 201) {
            this.$toast(result.msg);
            this.$router.push({
              path: "/paymentResult",
              query: {
                type: "on",
                isBack: "off",
                groupType: "GOODS_SELL",
              },
            });
          } else {
            this.$toast(result.msg);
          }
        })
        .catch(() => {
          setLoading(false);
        });
      this.refundSure = false;
    },
    onCheckFiled() {
      if (!this.orderType) {
        this.$toast("请选择订单类型");
        return false;
      }
      if (this.goodsList.length <= 0) {
        this.$toast("请选择商品");
        return false;
      }
      if (this.marketAmount) {
        let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        if (!reg.test(this.marketAmount)) {
          this.$toast("请选输入正确的减免金额");
          return false;
        }
      }
      if ((this.payCountMoney - Number(this.marketAmount)).toFixed(2) < this.groupPrice) {
        this.$toast("减免后支付金额不能低于团购价");
        return false;
      }
      if (this.payCountMoney - this.marketAmount < 0) {
        this.$toast("减免金额不能大于总金额");
        return false;
      }

      if (!this.agreeStatus) {
        this.$toast("请先阅读并同意《产品及服务协议》");
        return false;
      }
      return true;
    },
    onSubmit() {
      // submit 提交
      let result = this.result;
      if (result.type == "YQPAY") {
        let f = result.payMap;
        document.querySelector("#onSubmit").action = f.host;
        document.querySelector("#apiContent").value = f.apiContent;
        document.querySelector("#merNo").value = f.merNo;
        document.querySelector("#notifyUrl").value = f.notifyUrl;
        document.querySelector("#sign").value = f.sign;
        document.querySelector("#signType").value = f.signType;
        document.querySelector("#timestamp").value = f.timestamp;
        document.querySelector("#version").value = f.version;
        document.querySelector("#onSubmit").submit();
      } else if (result.type == "UNIONPAY") {
        localStorage.setItem("payInfo", JSON.stringify(result));
        this.$router.push({
          path: "/alipay",
          query: {
            balance: result.totalPrice,
          },
        });
      } else if (result.type == "ADAPAY" || result.type == "YEEPAY") {
        this.payment = result;
        this.payMoney = result.payMap.amount;
        // 开始支付窗口
        this.isStatus = true;
      }
    },
    onClickCheckbox() {
      // 使用余额方法
      this.payType = !this.payType;
      this.calcPrice();
    },
    setCoupon(obj) {
      // this.disCountList = [];
      if (obj) {
        this.couponList = obj.couponList;
        this.valuePirce = obj.valuePirce;
        this.dataLists = obj.dataList;
      }

      this.calcPrice();
    },
    // resetCoupon() {
    //   this.couponList = [];
    //   this.valuePirce = 0;
    //   this.disCountList = [];
    //   this.$refs.Mcoupon.resetCoupon();
    // },
    setNoMore() {
      // this.resetCoupon();
      this.calcPrice();
    },
    calcPrice() {
      let goodsList = this.goodsList;
      let tempPrice = 0;
      this.groupPrice = 0;
      this.buyList = [];
      this.moneyList = [];
      this.disCountList = [];
      // console.log(this.goodsList, "goodsList");
      goodsList.forEach((item) => {
        this.buyList.push({
          name: item.goodsNum > 1 ? `${item.goodsName} * ${item.goodsNum}` : item.goodsName,
          type: "购买",
          price: Number((item.goodsNum * item.discountPrice).toFixed(2)),
          couponType: this.couponObj[item.type],
        });
        tempPrice += Number((item.goodsNum * item.discountPrice).toFixed(2));
        this.groupPrice += Number((item.goodsNum * item.groupPurchasePrice).toFixed(2));
      });
      const couponType = {
        FULL_REDUCTION: "满减",
        DISCOUNT: "折扣",
      };
      if (this.dataLists && this.dataLists.length > 0) {
        this.dataLists.forEach((item) => {
          if (this.couponList.indexOf(item.couponCodeId) != -1) {
            this.disCountList.push({
              name: item.couponName,
              type: couponType[item.couponType],
              price: -item.faceValue.toFixed(2),
            });
          }
        });
      }

      if (this.marketAmount > 0) {
        this.buyList.push({
          name: "减免金额",
          type: "一次性",
          price: -this.marketAmount,
          couponType: "FULLCOUPON",
        });
      }

      this.payCountMoney = tempPrice;
      if (tempPrice - this.marketAmount <= 0) {
        tempPrice = 0;
      } else {
        tempPrice = Number((tempPrice - this.marketAmount).toFixed(2));
      }
      this.countMoney = tempPrice;
      tempPrice -= this.valuePirce;
      this.moneyList.push({ name: "应付金额", price: tempPrice });
      // 是否使用余额
      if (this.payType) {
        if (tempPrice - this.balance >= 0) {
          this.moneyList.push({ name: "余额支付", price: this.balance });
          tempPrice = Number((tempPrice - this.balance).toFixed(2));
          this.moneyList.push({ name: "现金支付", price: tempPrice });
        } else {
          this.moneyList.push({ name: "现金支付", price: 0 });
          this.moneyList.push({ name: "余额支付", price: tempPrice });
          tempPrice = 0;
        }
      } else {
        this.moneyList.push({ name: "余额支付", price: 0 });
        this.moneyList.push({ name: "现金支付", price: tempPrice });
      }
      this.payMoney = tempPrice;
    },
  },
  destroyed() {
    // 销毁页面时
    window.removeEventListener("hashchange", this.onHash, false);
    this.$toast.clear();
    this.qrCodeStatus = false;
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.goodsOrder {
  min-height: 100vh;
}
/deep/.van-popup--bottom {
  border-radius: 0px 0px 0px 0px !important;
  overflow: auto !important;
}
.pay-name {
  // padding-left: 0.1rem;
  flex: 1 auto;
  font-weight: bold;
}
/deep/.van-cell__title {
  font-size: 0.17rem;
  color: @mFontColor;
  flex: 1 auto;
  width: 65%;
}

/deep/.van-cell__value {
  font-size: 0.17rem;
  flex: 1 auto;
  width: 50%;
}

/deep/.van-cell-group {
  margin-top: 0.15rem;
}

.textarea {
  flex-direction: column;

  /deep/.van-cell__value {
    padding-top: 0.1rem;
    flex: 1 auto;
    width: 100%;
    font-size: 0.15rem;
    color: #666;
  }

  /deep/.van-field__control {
    color: #666;
  }
}

/deep/.van-popup__close-icon--top-right {
  font-size: 0.24rem;
  color: #c0c0c0;
  top: 0.1rem;
  right: 0.1rem;
}

/deep/.van-stepper__input {
  background-color: #fff;
}

.pay-section {
  .van-checkbox {
    float: right;

    /deep/.van-checkbox__icon .van-icon {
      border-color: #aeb3c0;
    }

    /deep/.van-checkbox__icon--checked .van-icon {
      background-color: #01c1b5;
      border-color: #01c1b5;
      color: #fff;
    }
  }

  .van-cell__value {
    width: auto;
  }

  .logo {
    margin-right: 0.08rem;
    width: 0.24rem;
    height: 0.24rem;
  }
}

#qrcode {
  background: #fff;
  // padding: .05rem;
  margin: 10px auto 0;
}

.popup-qrcode {
  width: 80%;
  // width: 220px;
  padding: 0.2rem 0;
  border-radius: 0.05rem;
  text-align: center;

  .van-button--primary {
    margin-top: 0.1rem;
  }

  .loading-section {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.button-group {
  margin: 0.3rem 0.26rem 0.2rem;

  .btn-sure {
    background: @mColor;
    border: 1px solid @mColor;
    font-size: 0.18rem;
  }

  .btn-qrcode {
    margin-top: 0.15rem;
    font-size: 0.18rem;
    background: transparent;
  }
}

.studentContainer {
  /deep/.van-cell-group {
    margin-top: 0;
  }

  /deep/.van-cell__title {
    font-size: 0.14rem;
    color: @mFontColor;
    flex: 1 auto;
  }

  .logo {
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.12rem;
    border-radius: 100%;
  }

  .input-cell {
    padding: 0.12rem 0.16rem;

    .van-radio {
      justify-content: flex-end;
    }
  }

  /deep/.van-cell__value {
    height: 0.2rem;
  }

  .van-tag {
    margin-left: 0.08rem;
  }
}

.pay-value {
  color: #01c1b5;
}

.input-cell {
  padding: 0.12rem 0.16rem;

  .logo {
    width: 0.82rem;
    height: 0.82rem;
    margin-right: 0.15rem;
    border-radius: 0.05rem;
    overflow: hidden;
  }
  .detail.price-section {
    display: inline-block;
  }
  .price-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    del {
      font-size: 0.12rem;
      color: #666666;
      // padding-left: 0.1rem;
    }
    .groupPrice {
      // min-width: 1.05rem;
      line-height: 0.16rem;
      height: 0.16rem;
      font-size: 0.12rem;
      border: 1px solid #ff4444;
      color: #fff;
      display: flex;
      flex-direction: row;
      text-align: center;
      line-height: 0.16rem;
      background-color: #fff0f0;
      .groupTitle {
        background: #ff4444;
        color: #fff;
        display: block;
        padding: 0 0.025rem;
      }
      .groupMoney {
        background-color: #fff0f0;
        color: #ff4444;
        display: block;
        padding: 0 0.025rem;
        line-height: 16px;
      }
    }
  }

  .money {
    color: #ff3535;
    font-weight: 600;
    font-size: 0.12rem;
    display: flex;
    flex-direction: row;
    i {
      font-style: normal;
      font-size: 0.12rem;
    }
  }

  /deep/.van-cell__title {
    font-size: 0.16rem;
    color: #000000;
    flex: 1 auto;
  }

  /deep/.van-cell__value {
    height: 0.2rem;
  }
}

.icon_close {
  position: absolute;
  right: 0.16rem;
  top: 0.16rem;
  font-size: 0.2rem;
  color: #929292;
}

.agreeProtocol {
  display: flex;
  align-items: center;
  color: #333333;
  margin-top: 0.1rem;
  padding: 0.05rem 0.16rem;
  font-size: 14px;
  line-height: 0.2rem;

  .van-checkbox {
    padding-right: 0.08rem;
  }

  /deep/.van-checkbox__icon .van-icon {
    background: #fff;
  }

  /deep/.van-checkbox__icon--checked .van-icon {
    color: #fff;
    background-color: #f85043;
    border-color: #f85043;
  }

  span {
    color: #01c1b5;
  }
}
</style>
