|
|
@@ -1,8 +1,17 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-dialog width="700px" :show-close="false" destroy-on-close :visible.sync="dialogTableVisible">
|
|
|
+ <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="top-juhe"
|
|
|
+ @click.stop="changeDeliveryType"
|
|
|
+ :class="{ active: deliveryType == 1 }"
|
|
|
+ >
|
|
|
<div class="left-content">
|
|
|
<div class="juhe-icon">
|
|
|
<img src="../../../static/image/juhe-icon.png" />
|
|
|
@@ -17,23 +26,53 @@
|
|
|
<div class="right-content">
|
|
|
<div class="right-title">
|
|
|
预估
|
|
|
- <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"
|
|
|
+ >{{ 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>
|
|
|
元
|
|
|
</div>
|
|
|
- <div class="youhui" v-if="deliveryList.length >= 1">优惠合计{{discount(deliveryList.length > 1 ? computedAmountMax : computedAmountOther, tipAmount, couponPrice, order.firstCoupon || 0, 0)}}元</div>
|
|
|
+ <div class="youhui" v-if="deliveryList.length >= 1">
|
|
|
+ 优惠合计{{
|
|
|
+ discount(
|
|
|
+ deliveryList.length > 1
|
|
|
+ ? computedAmountMax
|
|
|
+ : computedAmountOther,
|
|
|
+ tipAmount,
|
|
|
+ couponPrice,
|
|
|
+ order.firstCoupon || 0,
|
|
|
+ 0
|
|
|
+ )
|
|
|
+ }}元
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <img v-if="deliveryType == 1" src="../../../static/image/choose-icon.png" class="choose-icon" />
|
|
|
+ <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" />
|
|
|
+ <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="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" />
|
|
|
@@ -45,12 +84,46 @@
|
|
|
</div>
|
|
|
<div class="item-right">
|
|
|
<div>
|
|
|
- <div class="item-price">预估 <span>{{ computePrice(item.deliveryAmount, tipAmount, couponPrice, order.firstCoupon || 0, item.isMine) }}</span> 元</div>
|
|
|
- <div v-if="!item.isMine && item.deliveryAmount.toFixed(2) > couponParams.limitFee" class="item-coupon">{{order.firstCoupon ? `新人首单立减${order.firstCoupon}元 ` : ''}}优惠合计{{discount(item.deliveryAmount, tipAmount, couponPrice, order.firstCoupon || 0, item.isMine)}}元</div>
|
|
|
+ <div class="item-price">
|
|
|
+ 预估 <span>{{
|
|
|
+ computePrice(
|
|
|
+ item.deliveryAmount,
|
|
|
+ tipAmount,
|
|
|
+ couponPrice,
|
|
|
+ order.firstCoupon || 0,
|
|
|
+ item.isMine
|
|
|
+ )
|
|
|
+ }}</span
|
|
|
+ > 元
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ !item.isMine &&
|
|
|
+ item.deliveryAmount.toFixed(2) > couponParams.limitFee
|
|
|
+ "
|
|
|
+ class="item-coupon"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ order.firstCoupon
|
|
|
+ ? `新人首单立减${order.firstCoupon}元 `
|
|
|
+ : ""
|
|
|
+ }}优惠合计{{
|
|
|
+ discount(
|
|
|
+ item.deliveryAmount,
|
|
|
+ tipAmount,
|
|
|
+ couponPrice,
|
|
|
+ order.firstCoupon || 0,
|
|
|
+ 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-if="!item.isChoose"
|
|
|
+ src="../../../static/image/item-choose-icon.png"
|
|
|
+ />
|
|
|
<img v-else src="../../../static/image/select_yes@2x.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -63,10 +136,23 @@
|
|
|
<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">
|
|
|
+ <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>
|
|
|
+ <span
|
|
|
+ style="float: right; color: #8492a6; font-size: 13px"
|
|
|
+ v-if="item.num"
|
|
|
+ >x{{ item.num }}</span
|
|
|
+ >
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
<!-- <span>选择优惠券</span>
|
|
|
@@ -77,23 +163,48 @@
|
|
|
<div class="coupon-list"></div>
|
|
|
</div>
|
|
|
<!-- 支付方式 -->
|
|
|
- <div class="choose-self" style="border: none;">
|
|
|
+ <div class="choose-self" style="border: none">
|
|
|
<div class="self-top">
|
|
|
- <img src="../../../static/image/choose-self-icon.png" class="choose-self-icon" />
|
|
|
+ <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">
|
|
|
+ <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>
|
|
|
- <el-button type="primary" class="submit-btn" @click.stop="payMoney">确定支付</el-button>
|
|
|
+ <el-button
|
|
|
+ :loading="loading"
|
|
|
+ type="primary"
|
|
|
+ class="submit-btn"
|
|
|
+ @click.stop="payMoney"
|
|
|
+ >确定支付</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
<!-- 支付二维码弹出层 -->
|
|
|
- <qr-code v-if="showCode" @paySuccess="paySuccess" @refreshCode="payMoney" @closeCode="showCode = false" ref="code" :payAmount="payAmount" :link="link" :paymentType="payId" :orderSn="orderSn"></qr-code>
|
|
|
+ <qr-code
|
|
|
+ v-if="showCode"
|
|
|
+ @paySuccess="paySuccess"
|
|
|
+ @refreshCode="payMoney"
|
|
|
+ @closeCode="showCode = false"
|
|
|
+ ref="code"
|
|
|
+ :payAmount="payAmount"
|
|
|
+ :link="link"
|
|
|
+ :paymentType="payId"
|
|
|
+ :orderSn="orderSn"
|
|
|
+ ></qr-code>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -140,13 +251,14 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
id: 4,
|
|
|
- name: "余额支付",
|
|
|
+ name: "余额/三方支付",
|
|
|
icon: "../../../static/image/yu-e.png",
|
|
|
},
|
|
|
],
|
|
|
showCode: false,
|
|
|
link: "",
|
|
|
orderSn: "",
|
|
|
+ loading: false,
|
|
|
};
|
|
|
},
|
|
|
components: {
|
|
|
@@ -352,6 +464,7 @@ export default {
|
|
|
paySuccess() {
|
|
|
this.showCode = false;
|
|
|
this.dialogTableVisible = false;
|
|
|
+ this.loading = false;
|
|
|
bus.$emit("pullData", 2);
|
|
|
},
|
|
|
payMoney() {
|
|
|
@@ -366,6 +479,7 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
+ this.loading = true;
|
|
|
let params = {
|
|
|
...this.requestParams,
|
|
|
createType: 1,
|
|
|
@@ -384,6 +498,7 @@ export default {
|
|
|
if (res.code == 200) {
|
|
|
if (this.payId == 4) {
|
|
|
this.dialogTableVisible = false;
|
|
|
+ this.loading = false;
|
|
|
bus.$emit("pullData", 2);
|
|
|
} else if (
|
|
|
(this.payId == 1 || this.payId == 2) &&
|
|
|
@@ -397,12 +512,14 @@ export default {
|
|
|
(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: "取消",
|
|
|
@@ -413,6 +530,7 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
} else {
|
|
|
+ this.loading = false;
|
|
|
this.$message({
|
|
|
message: res.msg,
|
|
|
type: "error",
|
Funny