mteacher/src/views/shopMall/GoodsSale.vue

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

      <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"
        />
        <div class="studentContainer">
          <van-cell
            v-for="(item, index) in goodsList"
            :key="index"
            class="input-cell"
            :center="true"
          >
            <template slot="icon">
              <van-image class="logo" :src="item.pic" alt="" />
            </template>
            <template slot="title">
              <div class="content">
                <div class="name">
                  <span style="vertical-align: middle; line-height: 0.16rem">{{
                    item.name
                  }}</span>
                  <van-tag
                    plain
                    color="#C2A076"
                    style="
                      margin-left: 0;
                      padding: 0.01rem 0.03rem;
                      margin-right: 0.05rem;
                    "
                    >品牌：{{ item.brandName }}</van-tag
                  >
                </div>
                <div class="operation" @click="onGoodDel(goodsList, item)">
                  <i class="icon_del"></i>删除
                </div>
              </div>
              <p style="padding: 0.02rem 0; font-size: 0.14rem; color: #808080">
                型号：{{ item.productSn }}
              </p>
              <div class="price-section">
                <div>
                  <span class="money"
                    ><span style="font-weight: 400; font-size: 0.14rem"
                      >现价:</span
                    ><i>￥</i>{{ item.price | moneyFormat }}</span
                  ><del>原价:￥{{ item.originalPrice | moneyFormat }}</del>
                </div>
                <div style="font-size: 0.14rem; color: #808080">
                  ×{{ item.goodsNum }}
                </div>
              </div>
            </template>
          </van-cell>
        </div>
      </van-cell-group>

      <van-cell @click="addressStatus = true" class="cell-address" is-link>
        <template #icon>
          <img src="./images/icon-address.png" />
        </template>
        <template #title>
          <div v-if="addressInfo.id">
            <span class="userName">{{ addressInfo.name }}</span>
            <span class="phone">
              {{
                addressInfo.phoneNumber &&
                addressInfo.phoneNumber.replace(
                  /^(\d{3})\d{4}(\d+)/,
                  "$1****$2"
                )
              }}
            </span>
          </div>
          <div class="emtry" v-else>请选择收货地址</div>
        </template>
        <template #label v-if="addressInfo.id">
          <span class="addressInfo"
            >{{ addressInfo.province }} {{ addressInfo.city }}
            {{ addressInfo.region }} {{ addressInfo.detailAddress }}</span
          >
        </template>
      </van-cell>

      <!-- 是否用余额支付 支付金额大于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 + ''"
        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' }"
    >
      <GoodsList v-model="goodsStatus" @getChoiceGood="getChoiceGood" />
    </van-popup>

    <!-- 选择地址 -->
    <van-action-sheet
      v-model="addressStatus"
      title="选择地址"
      :style="{ height: '60%' }"
    >
      <AddAddress
        v-model="addressStatus"
        :addressInfo="addressInfo"
        :userId="studentId"
        @onDetail="
          (item) => {
            addressInfo = item;
          }
        "
      />
    </van-action-sheet>

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

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

    <m-payment
      :closeStatus="isStatus"
      :amount="payMoney"
      :payment="payment"
      @onChangeStatus="onChangeStatus"
    />
  </div>
</template>
<script>
import GoodsList from "./model/goodsList";
import AddAddress from "./model/addAddress";
import MHeader from "@/components/header";
import MPayment from "@/components/MPayment";
import Protocol from "@/components/Protocol";
import MRefund from "@/components/MRefund";
import { mallGenerateOrder, mallCartAddAll } from "./api";
import { getUserCashAccount } from "../service/api";
import { browser, validStudentUrl } from "@/common/util";
import qs from "query-string";
import VueQr from "vue-qr";
export default {
  name: "teacherList",
  components: {
    MHeader,
    VueQr,
    MPayment,
    Protocol,
    MRefund,
    GoodsList,
    AddAddress,
  },
  data() {
    let query = this.$route.query;
    // 保存之前输入的内容
    return {
      couponObj: {
        INSTRUMENT: "MUSICAL",
        ACCESSORIES: "ACCESSORIES",
        TEACHING: "TEACHING",
        STAFF: "OTHER",
      },
      addressStatus: false,
      addressInfo: {}, // 选择的地址对象
      goodsStatus: false,
      dataList: [],
      radio: "1",
      studentId: query.studentId, // 学生编号
      organId: query.organId,
      studentName: query.studentName,
      goodsList: [],
      marketAmount: null,
      tempForm: {}, // 临时存数据
      payType: false, // 是否使用余额
      balance: 0, // 余额
      backUrl: {
        status: true,
        path: "/serviceStudent?type=shop",
      },
      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,
      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();
      }
    },
    getChoiceGood(item) {
      let goodsList = this.goodsList;
      // console.log(item, "getChoiceGoods", goodsList);
      let status = false;
      let stockStatus = false;
      goodsList.forEach((good) => {
        if (good.id == item.id) {
          const num = good.goodsNum + item.goodsNum;
          if (num > item.stock) {
            this.$toast("库存不足");
            stockStatus = true;
          } else {
            status = true;
            good.goodsNum = good.goodsNum + item.goodsNum;
          }
        }
      });
      // 判断是否有同样的商品, 并库存够
      if (!status && !stockStatus) {
        goodsList.push(item);
      }
      this.goodsStatus = false;
      this.calcPrice();
      this.hashState("goods");
    },
    onGoodDel(goodsList, item) {
      this.$dialog
        .confirm({
          message: "确定删除该商品",
          confirmButtonColor: "#01C1B5",
        })
        .then(() => {
          let index = goodsList.indexOf(item);
          if (index !== -1) {
            goodsList.splice(index, 1);
          }
          // this.resetCoupon();
          this.calcPrice();
        });
    },
    async __init() {
      try {
        await getUserCashAccount({ id: this.studentId }).then((res) => {
          this.balance = res.data.balance || 0;
        });
      } catch {
        //
      }
    },
    async onCreateCode() {
      if (!this.onCheckFiled()) {
        return;
      }
      // 确认退费规则
      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;
        this.afterPayMent((res) => {
          this.sGoodsOrderId = res.data.pay.orderNo;
          this.onPosterCode(res.data.pay.orderNo);
        });
      }
      setTimeout(() => {
        this.isClick = false;
      }, 500);
    },
    onPosterCode(goodsId) {
      this.$refs.goodsOrder.style.filter = "blur(3px)";
      this.qrCodeStatus = true;
      let url =
        validStudentUrl() +
        "/#/goodsOrderBuyMall?id=" +
        goodsId +
        "&studentId=" +
        this.studentId;
      // console.log(url);
      this.config.value = url;
      // 可以点击下载按钮了
      this.downloadStatus = false;
    },
    async afterPayMent(callBack) {
      try {
        let goodsList = this.goodsList;
        // console.log(goodsList, this.addressInfo);
        const params = [];
        goodsList.forEach((good) => {
          params.push({
            price: good.groupPurchasePrice,
            productSkuId: good.id,
            quantity: good.goodsNum,
            productId: good.productId,
            hidden: 1,
            memberId: this.studentId,
          });
        });
        // 购买时，需要添加商品到购物车
        const carts = await mallCartAddAll(params);
        const cartConfirm = carts.data || [];
        const ids = cartConfirm.reduce((arr, value) => {
          arr.push(value.id);
          return arr;
        }, []);
        const body = {
          cartIds: ids,
          memberReceiveAddressId: this.addressInfo.id,
          orderAmount: this.payCountMoney,
          userId: this.studentId,
        };
        const res = await mallGenerateOrder(body);
        if (res.data.orderType == "success") {
          this.$toast(res.msg);
          this.$router.push({
            path: "/paymentResult",
            query: {
              type: "on",
              isBack: "off",
              groupType: "GOODS_SELL",
            },
          });
        } else {
          callBack && callBack(res);
        }
      } catch {
        //
      }
    },
    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) {
      this.isStatus = val;
      this.__init();
      this.payType = false;
      this.calcPrice();
    },
    async onCheckSubmit() {
      if (!this.onCheckFiled()) {
        return;
      }
      // 确认退费规则
      if (!this.refundSure && this.payCountMoney > 0) {
        this.refundStatus = true;
        return;
      }
      this.afterPayMent((res) => {
        this.result = res.data.pay;
        this.onSubmit();
      });
      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.addressInfo.id) {
        this.$toast("请选择地址");
        return;
      }

      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") {
        this.payment = result;
        this.payMoney = result.payMap.amount;
        // 开始支付窗口
        this.isStatus = true;
      }
    },
    onClickCheckbox() {
      // 使用余额方法
      this.payType = !this.payType;
      this.calcPrice();
    },
    setCoupon(obj) {
      if (obj) {
        this.couponList = obj.couponList;
        this.valuePirce = obj.valuePirce;
        this.dataLists = obj.dataList;
      }

      this.calcPrice();
    },

    setNoMore() {
      this.calcPrice();
    },
    calcPrice() {
      let goodsList = this.goodsList;
      let tempPrice = 0;
      this.groupPrice = 0;
      this.buyList = [];
      this.moneyList = [];
      this.disCountList = [];
      goodsList.forEach((item) => {
        const price = Number((item.goodsNum * item.price).toFixed(2));
        this.buyList.push({
          name:
            item.goodsNum > 1 ? `${item.name} * ${item.goodsNum}` : item.name,
          type: "购买",
          price: price,
          couponType: this.couponObj[item.type],
        });
        tempPrice += price;
        this.groupPrice += price;
      });
      // 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;
}
.pay-name {
  // padding-left: 0.1rem;
  flex: 1 auto;
  font-weight: bold;
}

/deep/.van-cell-group {
  .van-cell {
    padding: 14px 16px;
    /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,
.cell-address {
  margin-top: 0.12rem;
}

.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;
  }
}

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

.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;
  }
}

.studentContainer {
  /deep/.van-cell-group {
    margin-top: 0;
  }
  /deep/.van-cell__title {
    font-size: 0.16rem;
    color: @mFontColor;
    flex: 1 auto;
    width: 70%;
  }

  .logo {
    width: 0.82rem;
    height: 0.82rem;
    margin-right: 0.12rem;
    border-radius: 0.05rem;
    overflow: hidden;
  }

  .input-cell {
    padding: 0.12rem 0.16rem;
    align-items: flex-start;
    .van-radio {
      justify-content: flex-end;
    }

    .price-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      del {
        font-size: 0.12rem;
        color: #666666;
        padding-left: 0.1rem;
      }
    }

    .money {
      color: #ff3535;
      font-weight: 600;
      font-size: 0.16rem;
      i {
        font-style: normal;
        font-size: 0.14rem;
      }
    }
  }

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

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

  .content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    .name {
      // display: flex;
      // align-items: center;
    }
    .operation {
      font-size: 0.13rem;
      color: #999;
      display: flex;
      align-items: center;
      width: 1.2rem;
      justify-content: flex-end;
      .icon_del {
        display: inline-block;
        width: 0.13rem;
        height: 0.13rem;
        background: url("../../assets/images/icon_del.png") no-repeat center;
        background-size: contain;
        margin-right: 0.02rem;
      }
    }
  }
}

.cell-address {
  align-items: center;

  /deep/.van-cell__title {
    margin-left: 14px;
  }

  img {
    width: 0.2rem;
    height: 0.2rem;
  }
}
</style>