liebao-web/src/components/orderComponents/sendOrderPopup.vue

<template>
  <div>
    <el-dialog width="700px" :show-close="false" destroy-on-close :visible.sync="dialogTableVisible">
      <div class="send-content">
        <div class="top-juhe" @click.stop="changeDeliveryType" :class="{ active: deliveryType == 1 }">
          <div class="left-content">
            <div class="juhe-icon">
              <img src="../../../static/image/juhe-icon.png" />
            </div>
            <div>
              <div class="juhe-title">聚合配送</div>
              <div class="quan-wang">
                <span>{{ order.desc }}</span>
              </div>
            </div>
          </div>
          <div class="right-content">
            <div class="right-title">
              预估&nbsp;
              <span v-if="deliveryList && deliveryList.length > 1">{{ computedAmount >= 0 ? computedAmount : 0 }}~{{
                  computedAmountMax >= 0 ? computedAmountMax : 0
                }}</span>
              <span v-if="deliveryList && deliveryList.length == 1">{{
                computedAmountOther >= 0 ? computedAmountOther : 0
              }}</span>
              <span v-if="deliveryList && deliveryList.length < 1">--</span>
              &nbsp;元
            </div>
            <div class="youhui" v-if="deliveryList.length >= 1">
              {{
                order.firstCoupon
                        ? `新人首单立减${order.firstCoupon}元，`
                        : ""
                }}优惠合计最高{{
                discount(
                  deliveryList.length > 1
                    ? computedAmountMax
                    : computedAmountOther,
                  tipAmount,
                  couponPrice,
                  Number(order.firstCoupon),
                  0
                )
              }}元
            </div>
          </div>
          <img v-if="deliveryType == 1" src="../../../static/image/choose-icon.png" class="choose-icon" />
        </div>
        <!-- 自选运力 -->
        <div class="choose-self">
          <div class="self-top">
            <img src="../../../static/image/choose-self-icon.png" class="choose-self-icon" />
            <span>自选运力</span>
          </div>
          <div class="delivery-list">
            <div class="delivery-list-item" @click.stop="deliveryItem(item)" v-for="(item, index) in deliveryList" :key="index">
              <div class="item-left">
                <div class="item-logo">
                  <img :src="item.logo" />
                </div>
                <div>
                  <div class="item-title">{{ item.name }}</div>
                  <div class="item-miters">{{ item.desc }}</div>
                </div>
              </div>
              <div class="item-right">
                <div>
                  <div class="item-price">
                    预估&nbsp;<span>{{
                      computePrice(
                        item.deliveryAmount,
                        tipAmount,
                        couponPrice,
                        Number(order.firstCoupon),
                        item.isMine
                      )
                    }}</span>&nbsp;元
                  </div>
                  <div v-if="
                      !item.isMine &&
                      item.deliveryAmount.toFixed(2) > couponParams.limitFee
                    " class="item-coupon">
                    {{
                      order.firstCoupon
                        ? `新人首单立减${order.firstCoupon}元，`
                        : ""
                    }}优惠合计{{
                      discount(
                        item.deliveryAmount,
                        tipAmount,
                        couponPrice,
                        Number(order.firstCoupon),
                        item.isMine
                      )
                    }}元
                  </div>
                  <div v-if="item.isMine" class="item-coupon">绑定的自运力</div>
                </div>
                <div class="item-choose">
                  <img v-if="!item.isChoose" src="../../../static/image/item-choose-icon.png" />
                  <img v-else src="../../../static/image/select_yes@2x.png" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 选择优惠券 -->
        <div>
          <div class="choose-coupon">
            <div></div>
            <div class="coupon-box">
              <!-- <img src="../../../static/image/coupon-icon.png" class="coupon-icon" /> -->
              <el-select @change="chooseCoupon" v-model="coupon" placeholder="请选择使用优惠券">
                <el-option v-for="item in couponList" :key="item.id" :label="item.name" :value="item.id">
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px" v-if="item.num">x{{ item.num }}</span>
                </el-option>
              </el-select>
              <!-- <span>选择优惠券</span>
            <img src="../../../static/image/arrow-down.png" class="arrow-down" /> -->
            </div>
          </div>
          <!-- 预留优惠券列表 -->
          <div class="coupon-list"></div>
        </div>
        <!-- 支付方式 -->
        <div class="choose-self" style="border: none">
          <div class="self-top">
            <img src="../../../static/image/choose-self-icon.png" class="choose-self-icon" />
            <span>支付方式</span>
          </div>
          <div class="pay-list">
            <div class="pay-item" @click="payId = item.id" :class="payId == item.id ? 'pay-active' : ''" v-for="(item, index) in payList" :key="index">
              <img :src="item.icon" class="pay-icon" />
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
        <div class="btn-wrap">
          <el-button :loading="loading" type="primary" class="submit-btn" @click.stop="payMoney">确定支付</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 支付二维码弹出层 -->
    <qr-code v-if="showCode" @paySuccess="paySuccess" @refreshCode="payMoney" @closeCode="closeCode" ref="code" :payAmount="payAmount" :link="link" :paymentType="payId" :orderSn="orderSn"></qr-code>
  </div>
</template>

<script>
import bus from "../../common/bus.js";
import qrCode from "../../common/qrCode.vue";
import { mapState } from "vuex";
import { getCouponList } from "../../api/amount.js";
import { sendOrder } from "../../api/order.js";
export default {
  data() {
    return {
      payId: 1,
      itemParams: null,
      payAmount: 0,
      minPrice: 0,
      maxPrice: 0,
      tipAmount: 0,
      couponPrice: 0,
      deliveryType: 1, // 1 ->聚合配送, 2-> 自选运力
      showCode: false, // 支付二维码弹出层
      coupon: "",
      order: {},
      deliveryList: [],
      couponList: [
        {
          id: -1,
          name: "不使用优惠券",
        },
      ],
      couponParams: {},
      requestParams: {},
      dialogTableVisible: false, // 发起配送弹出层
      payList: [
        {
          id: 1,
          name: "支付宝支付",
          icon: "../../../static/image/alipay.png",
        },
        {
          id: 2,
          name: "微信支付",
          icon: "../../../static/image/we-chat.png",
        },
        {
          id: 4,
          name: "余额/三方支付",
          icon: "../../../static/image/yu-e.png",
        },
      ],
      showCode: false,
      link: "",
      orderSn: "",
      loading: false,
    };
  },
  props: { tabNum: Number },
  components: {
    qrCode,
  },
  computed: {
    ...mapState(["userInfo"]),
    computedAmount() {
      console.log("computed里面的coupon", this.couponParams);
      let num = this.order.firstCoupon || 0;
      let min =
        this.order.optionals &&
        this.order.optionals.find((item) => {
          return item.deliveryAmount == this.minPrice && item.isMine == 0;
        });
      if (Object.keys(this.couponParams).length < 1) {
        if (min) {
          return this.minPrice >= this.couponParams.limitFee
            ? (this.minPrice - this.couponPrice + this.tipAmount - num).toFixed(
                2
              )
            : (this.minPrice + this.tipAmount - num).toFixed(2);
        } else {
          return (this.minPrice + this.tipAmount - num).toFixed(2);
        }
      } else if (
        Object.keys(this.couponParams).length > 0 &&
        this.couponParams.type == 1
      ) {
        if (min) {
          return this.minPrice >= this.couponParams.limitFee
            ? (this.minPrice - this.couponPrice + this.tipAmount - num).toFixed(
                2
              )
            : (this.minPrice + this.tipAmount - num).toFixed(2);
        } else {
          return (this.minPrice + this.tipAmount - num).toFixed(2);
        }
      } else if (
        Object.keys(this.couponParams).length > 0 &&
        this.couponParams.type == 3
      ) {
        if (min) {
          return this.minPrice - this.couponPrice + this.tipAmount <= 0
            ? 0
            : (this.minPrice - this.couponPrice + this.tipAmount - num).toFixed(
                2
              );
        } else {
          return (this.minPrice + this.tipAmount - num).toFixed(2);
        }
      } else if (
        Object.keys(this.couponParams).length > 0 &&
        this.couponParams.type == 2
      ) {
        if (min) {
          let newCouponPrice =
            this.minPrice * (1 - this.couponParams.discount / 10) <
            this.couponParams.maxDiscount
              ? this.minPrice *
                (1 - (this.couponParams.discount / 10).toFixed(2))
              : this.couponParams.maxDiscount;
          return this.minPrice - newCouponPrice + this.tipAmount <= 0
            ? 0
            : (this.minPrice - newCouponPrice + this.tipAmount - num).toFixed(
                2
              );
        } else {
          return (this.minPrice + this.tipAmount - num).toFixed(2);
        }
      }
    },
    computedAmountMax() {
      let num = this.order.firstCoupon || 0;
      let max =
        this.order.optionals &&
        this.order.optionals.find((item) => {
          return item.deliveryAmount == this.maxPrice && item.isMine == 0;
        });
      if (Object.keys(this.couponParams).length < 1) {
        if (max) {
          return this.maxPrice >= this.couponParams.limitFee
            ? (this.maxPrice - this.couponPrice + this.tipAmount - num).toFixed(
                2
              )
            : (this.maxPrice + this.tipAmount - num).toFixed(2);
        } else {
          return (this.maxPrice + this.tipAmount - num).toFixed(2);
        }
      } else if (
        Object.keys(this.couponParams).length > 0 &&
        this.couponParams.type == 1
      ) {
        if (max) {
          return this.maxPrice >= this.couponParams.limitFee
            ? (this.maxPrice - this.couponPrice + this.tipAmount - num).toFixed(
                2
              )
            : (this.maxPrice + this.tipAmount - num).toFixed(2);
        } else {
          return (this.maxPrice + this.tipAmount - num).toFixed(2);
        }
      } else if (
        Object.keys(this.couponParams).length > 0 &&
        this.couponParams.type == 3
      ) {
        if (max) {
          return this.maxPrice - this.couponPrice + this.tipAmount <= 0
            ? 0
            : (this.maxPrice - this.couponPrice + this.tipAmount - num).toFixed(
                2
              );
        } else {
          return (this.maxPrice + this.tipAmount - num).toFixed(2);
        }
      } else if (
        Object.keys(this.couponParams).length > 0 &&
        this.couponParams.type == 2
      ) {
        if (max) {
          let newCouponPrice =
            this.maxPrice * (1 - this.couponParams.discount / 10) <
            this.couponParams.maxDiscount
              ? this.maxPrice *
                (1 - (this.couponParams.discount / 10).toFixed(2))
              : this.couponParams.maxDiscount;
          return this.maxPrice - newCouponPrice + this.tipAmount <= 0
            ? 0
            : (this.maxPrice - newCouponPrice + this.tipAmount - num).toFixed(
                2
              );
        } else {
          return (this.maxPrice + this.tipAmount - num).toFixed(2);
        }
      }
    },
    computedAmountOther() {
      let num = this.order.firstCoupon || 0;
      let min =
        this.order.optionals &&
        this.order.optionals.find((item) => {
          return item.deliveryAmount == this.minPrice && item.isMine == 0;
        });
      if (Object.keys(this.couponParams).length < 1) {
        if (min) {
          return this.minPrice >= this.couponParams.limitFee
            ? (this.minPrice - this.couponPrice + this.tipAmount - num).toFixed(
                2
              )
            : (this.minPrice + this.tipAmount - num).toFixed(2);
        } else {
          return (this.minPrice + this.tipAmount - num).toFixed(2);
        }
      } else if (
        Object.keys(this.couponParams).length > 0 &&
        this.couponParams.type == 1
      ) {
        if (min) {
          return this.minPrice >= this.couponParams.limitFee
            ? (this.minPrice - this.couponPrice + this.tipAmount - num).toFixed(
                2
              )
            : (this.minPrice + this.tipAmount - num).toFixed(2);
        } else {
          return (this.minPrice + this.tipAmount - num).toFixed(2);
        }
      } else if (
        Object.keys(this.couponParams).length > 0 &&
        this.couponParams.type == 3
      ) {
        if (min) {
          return this.minPrice - this.couponPrice + this.tipAmount <= 0
            ? 0
            : (this.minPrice - this.couponPrice + this.tipAmount - num).toFixed(
                2
              );
        } else {
          return (this.minPrice + this.tipAmount - num).toFixed(2);
        }
      } else if (
        Object.keys(this.couponParams).length > 0 &&
        this.couponParams.type == 2
      ) {
        if (min) {
          let newCouponPrice =
            this.minPrice * (1 - this.couponParams.discount / 10) <
            this.couponParams.maxDiscount
              ? this.minPrice *
                (1 - (this.couponParams.discount / 10).toFixed(2))
              : this.couponParams.maxDiscount;
          return this.minPrice - newCouponPrice + this.tipAmount <= 0
            ? 0
            : (this.minPrice - newCouponPrice + this.tipAmount - num).toFixed(
                2
              );
        } else {
          return (this.minPrice + this.tipAmount - num).toFixed(2);
        }
      }
    },
  },
  methods: {
    closeCode() {
      this.showCode = false;
      this.loading = false;
    },
    paySuccess() {
      this.showCode = false;
      this.dialogTableVisible = false;
      this.loading = false;
      if (this.tabNum === -1) {
        bus.$emit("refreshData2");
        return;
      }
      bus.$emit("pullData", 2);
    },
    payMoney() {
      if (this.deliveryType !== 1) {
        let arr = this.deliveryList.filter((item) => {
          return item.isChoose;
        });
        if (arr && arr.length < 1) {
          return this.$message({
            message: "请选择运力",
            type: "error",
          });
        }
      }
      this.loading = true;
      let params = {
        ...this.requestParams,
        createType: 1,
        valuationRes:
          this.deliveryType == 1
            ? this.deliveryList
            : this.deliveryList.filter((v) => {
                return v.isChoose;
              }),
        paymentType: this.payId,
      };
      if (Object.keys(this.couponParams).length > 0) {
        params.couponId = this.couponParams.id;
      }
      sendOrder(params).then((res) => {
        if (res.code == 200) {
          if (this.payId == 4) {
            this.dialogTableVisible = false;
            this.loading = false;
            if (this.tabNum === -1) {
              bus.$emit("refreshData2");
              return;
            }
            bus.$emit("pullData", 2);
            if(this.$route.name === 'manualCreate'){
              this.$route.push({
                path:'/'
              })
            }
            console.log('path',this.$route);
          } else if (
            (this.payId == 1 || this.payId == 2) &&
            res.data.status == 1
          ) {
            this.payAmount = res.data.amount || 0;
            this.link = res.data.data;
            this.orderSn = res.data.orderSn;
            this.showCode = true;
          } else if (
            (this.payId == 1 || this.payId == 2) &&
            res.data.status == 0
          ) {
            this.loading = false;
            return this.$message({
              message: "获取二维码失败，请联系客服",
              type: "error",
            });
          }
        } else if (res.code === 250) {
          this.loading = false;
          this.$confirm("当前账户余额不足, 是否前去充值?", "提示", {
            confirmButtonText: "立即充值",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.$router.push({
              path: "/shopInfo/shopAccount",
            });
          });
        } else {
          this.loading = false;
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 自选运力点击事件
    deliveryItem(item) {
      this.deliveryType = 2;
      this.$set(item, "isChoose", !item.isChoose);
      this.$forceUpdate();
      console.log(item.isChoose);
    },
    selectCouponChange(coupon) {
      if (coupon.type == 1 || coupon.type == 3) {
        this.couponPrice = coupon.money;
      } else if (coupon.type == 2) {
        this.couponPrice = coupon.maxDiscount;
      }
      let self = this;
      if (this.order.optionals) {
        this.order.optionals.forEach((item) => {
          if (coupon.type === 1) {
            if (item.deliveryAmount >= coupon.limitFee) {
              item.couponPrice = coupon.money;
            } else {
              item.couponPrice = 0;
            }
          } else if (coupon.type === 3) {
            item.couponPrice = coupon.money;
          } else if (coupon.type == 2) {
            if (
              item.deliveryAmount * (1 - coupon.discount / 10) >
              coupon.maxDiscount
            ) {
              item.couponPrice = coupon.maxDiscount;
            } else {
              item.couponPrice = (
                item.deliveryAmount *
                (1 - coupon.discount / 10)
              ).toFixed(2);
            }
          }
        });
      }
    },
    discount(cost, tipPrice, couponPrice, firstCoupon, select) {
      if (
        this.couponParams.type == 1 &&
        select == 0 &&
        cost >= this.couponParams.limitFee
      ) {
        let price = couponPrice + firstCoupon;
        return price >= 0 ? price.toFixed(2) : 0;
      } else if (this.couponParams.type == 3 && select == 0) {
        let price = couponPrice + firstCoupon;
        return price >= 0 ? price.toFixed(2) : 0;
      } else if (this.couponParams.type == 2 && select == 0) {
        let newCouponPrice =
          cost * (1 - this.couponParams.discount / 10) <
          this.couponParams.maxDiscount
            ? cost * (1 - this.couponParams.discount / 10)
            : this.couponParams.maxDiscount;
        let price = newCouponPrice + firstCoupon;
        return price >= 0 ? price.toFixed(2) : 0;
      } else {
        let price = firstCoupon;
        console.log("初始加载值", this.couponParams.type);
        return price >= 0 ? price.toFixed(2) : 0;
      }
    },
    computePrice(cost, tipPrice, couponPrice, firstCoupon, select) {
      if (
        this.couponParams.type == 1 &&
        select == 0 &&
        cost >= this.couponParams.limitFee
      ) {
        let price = cost + parseFloat(tipPrice) - couponPrice - firstCoupon;
        return price >= 0 ? price.toFixed(2) : 0;
      } else if (this.couponParams.type == 3 && select == 0) {
        let price = cost + parseFloat(tipPrice) - couponPrice - firstCoupon;
        return price >= 0 ? price.toFixed(2) : 0;
      } else if (this.couponParams.type == 2 && select == 0) {
        let newCouponPrice =
          cost * (1 - this.couponParams.discount / 10) <
          this.couponParams.maxDiscount
            ? cost * (1 - this.couponParams.discount / 10)
            : this.couponParams.maxDiscount;
        let price = cost + parseFloat(tipPrice) - newCouponPrice - firstCoupon;
        return price >= 0 ? price.toFixed(2) : 0;
      } else {
        let price = cost + parseFloat(tipPrice) - firstCoupon;
        console.log("初始加载值", this.couponParams.type);
        return price >= 0 ? price.toFixed(2) : 0;
      }
    },
    // 选择优惠券
    chooseCoupon(e) {
      this.couponParams =
        this.couponList.find((item) => {
          return item.id == e && e != -1;
        }) || {};
      console.log("couponParams", this.couponParams);
      if (this.couponParams.type == 1 || this.couponParams.type == 3) {
        this.couponPrice = this.couponParams.money;
      } else if (this.couponParams.type == 2) {
        this.couponPrice = this.couponParams.maxDiscount;
      }
      this.selectCouponChange(this.couponParams);
    },
    changeDeliveryType() {
      if (this.deliveryType == 1) return;
      this.deliveryType = 1;
      this.deliveryList.forEach((v) => {
        v.isChoose = false;
      });
    },
    init(order, data) {
      console.log(order, "-----------------------------------");
      this.requestParams = data;
      this.order = order;
      this.minPrice = 0;
      this.maxPrice = 0;
      this.tipAmount = order.tipAmount || 0;
      this.deliveryList = order.optionals;
      this.deliveryList.forEach((item) => {
        if (item.preferredDelivery) {
          item.isChoose = true;
          this.deliveryType = 2;
        } else {
          item.isChoose = false;
        }
      });

      if (this.order.optionals) {
        this.minPrice = this.order.optionals[0].deliveryAmount;
        for (var i = 0; i < this.order.optionals.length; i++) {
          var item = this.order.optionals[i];
          this.minPrice =
            this.minPrice >= item.deliveryAmount
              ? item.deliveryAmount
              : this.minPrice;
          this.maxPrice =
            this.maxPrice <= item.deliveryAmount
              ? item.deliveryAmount
              : this.maxPrice;
        }
      }
      this.payId = 4;
      this.dialogTableVisible = true;
      this.getCouponList();
    },
    getCouponList() {
      let params = {
        status: 0,
        isNew: 1,
      };
      getCouponList(params).then((res) => {
        if (res.code == 200) {
          let data = res.data.data;
          if (!data.length) return;
          this.couponList = [
            {
              id: -1,
              name: "不使用优惠券",
            },
          ].concat(data);
          // 默认选中一个优惠券
          this.coupon = data[0].id;
          this.chooseCoupon(data[0].id);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__header {
  padding: 0;
}

/deep/ .el-dialog__body {
  padding: 0px !important;
}

.pay-modal {
  overflow: hidden;

  .pay-top {
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    background: url(../../../static/image/pay-bg.png) no-repeat;
    background-size: 100% 100%;
  }
}

.code-content {
  width: 640px;
  margin: 40px auto 0;
  padding-bottom: 100px;
  box-sizing: border-box;

  .code-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;

    .code-left {
      .l-title {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #0d1e40;
      }

      .l-price {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #9ea7b7;
      }
    }

    .code-right {
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #f74141;
    }
  }

  .code-bottom {
    text-align: center;
    padding-top: 30px;

    .code-img {
      width: 260px;
      height: 260px;
      margin: 0 auto;
    }

    .des {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #0d1e40;
      margin: 10px 0 20px 0;
    }

    .guo-qi {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #9ea7b7;

      span {
        color: #175199;
        cursor: pointer;
      }
    }
  }
}

.send-content {
  border-radius: 10px;
  padding: 22px;
}

.top-juhe {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  position: relative;
  border: 1px solid #999;
  border-radius: 8px;
  overflow: hidden;

  &.active {
    border-color: #fc7200;
  }

  .left-content {
    display: flex;

    .juhe-icon {
      align-self: center;
      font-size: 0;
      width: 41px;
      height: 40px;
      margin-right: 12px;

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

    .juhe-title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #0d1e40;
    }

    .quan-wang {
      margin-top: 8px;

      span {
        display: inline-block;
        padding: 0px 4px;
        border: 1px solid #fc7200;
        border-radius: 2px;
        color: #fc7200;
        font-size: 14px;
      }
    }
  }

  .right-content {
    .right-title {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #0d1e40;

      span {
        font-size: 22px;
        color: #fc7200;
      }
    }

    .youhui {
      text-align: right;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #fc7200;
    }
  }

  .choose-icon {
    width: 32px;
    height: 32px;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

.choose-self {
  padding-top: 25px;
  border-bottom: 1px solid #eee;

  .self-top {
    display: flex;
    align-items: center;
    margin-bottom: 11px;

    .choose-self-icon {
      width: 4px;
      height: 15px;
      margin-right: 10px;
    }

    span {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #92959b;
    }
  }

  .delivery-list {
    max-height: 340px;
    overflow-y: auto;
    &-item {
      /*height: 76px;*/
      padding: 18px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .item-left {
        display: flex;

        .item-logo {
          font-size: 0;
          width: 40px;
          height: 40px;
          margin-right: 15px;

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

        .item-title {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #0d1e40;
        }

        .item-miters {
          margin-top: 4px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #9ea7b7;
        }
      }

      .item-right {
        display: flex;
        align-items: center;

        .item-price {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #0d1e40;

          span {
            font-size: 22px;
          }
        }

        .item-coupon {
          text-align: right;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #fc7200;
        }

        .item-choose {
          margin-left: 26px;
          font-size: 0;
          width: 26px;
          height: 26px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .delivery-list::-webkit-scrollbar {
    width: 6px;
  }
  .delivery-list::-webkit-scrollbar-track {
    background-color: #eee;
    /*border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;*/
  }
  .delivery-list::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
  }
  .pay-list {
    display: flex;
    align-items: center;
    padding-top: 10px;

    .pay-item {
      flex: 1;
      display: flex;
      justify-content: center;
      text-align: center;
      align-items: center;
      height: 67px;
      border: 1px solid #eee;
      border-radius: 8px;
      cursor: pointer;

      &.pay-active {
        border-color: #fc7200;
      }

      &:nth-child(2) {
        margin: 0 13px;
      }

      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
      }

      .pay-icon {
        margin-right: 6px;
      }

      .pay-icon:nth-child(1) {
        width: 25px;
        height: 24px;
      }
    }
  }
}
.btn-wrap {
  display: flex;
  justify-content: flex-end;
  .submit-btn {
    border: none;
    background: #fc7200;
    color: #ffffff;
    margin-top: 20px;
  }
}

.choose-coupon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;

  .coupon-box {
    display: flex;
    align-items: center;

    .coupon-icon {
      width: 14px;
      height: 14px;
    }

    span {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #b1b1b1;
      margin-left: 2px;
      margin-right: 6px;
      cursor: pointer;
    }

    .arrow-down {
      width: 10px;
      height: 6px;
    }
  }
}
</style>