<template>
|
<div class="payOrderBox size12">
|
<div class="bookDetailBox">
|
<div class="payTitle shop">商品信息</div>
|
<div class="detailInfoBox" v-if="bookInfos.length > 0 && !loading">
|
<div
|
class="classList"
|
v-for="(bookInfo, index) in bookInfos"
|
:key="index"
|
>
|
<div class="imgBox">
|
<img :src="bookInfo.productInfo.icon" alt="" />
|
</div>
|
<div class="txtBox">
|
<p class="title">
|
{{ bookInfo.productInfo.name }}
|
</p>
|
<span class="price" v-if="bookInfo.orderSaleMethod.price > 0"
|
>商品价格：¥{{
|
tool.toDecimal2(bookInfo.orderSaleMethod.price)
|
}}</span
|
>
|
<span class="price free" v-else>免费</span>
|
<span class="price2" v-if="bookInfo.orderSaleMethod.price > 0"
|
>实付价格：¥{{ tool.toDecimal2(bookInfo.payPrice) }}</span
|
>
|
<span
|
v-if="bookInfo.orderSaleMethod.price > 0"
|
class="priceSale"
|
@click="getProductPromtecode(bookInfo)"
|
>
|
{{
|
bookInfo.productPromoteCode
|
? "已优惠" + bookInfo.productPromoteCode.value + "元"
|
: "选券"
|
}}
|
<van-icon name="arrow" />
|
</span>
|
</div>
|
</div>
|
</div>
|
<!-- 商品优惠券 -->
|
<van-popup
|
v-model="showCouponValue"
|
position="bottom"
|
:style="{ height: '73%' }"
|
>
|
<div class="couponListWrap">
|
<div class="couponListTitle">
|
<div>
|
<p class="txt">优惠券</p>
|
<p class="tips">
|
订单优惠券和商品优惠券可叠加使用,且每种类型最多选择一张
|
</p>
|
</div>
|
<van-icon @click="showCouponValue = false" name="cross" size="16" />
|
</div>
|
<div v-if="couponListbyproduct.length > 0">
|
<div
|
class="couponList"
|
v-for="(item, index) in couponListbyproduct"
|
:key="index"
|
>
|
<div
|
:class="
|
item.use ? 'couponInfo yellowBg' : 'couponInfo yellowBg grayBg'
|
"
|
@click="selectCoupon(item, bookInfos, index)"
|
>
|
<div class="priceBox yellowBor">
|
<div class="">
|
<span v-if="item.promoteCode.useType != 'Discount'">¥</span>
|
<span
|
class="priceFont"
|
v-if="item.promoteCode && item.promoteCode.value"
|
>{{
|
item.promoteCode.useType == "Discount"
|
? tool.toDecimal1(item.promoteCode.value)
|
: item.promoteCode.value
|
}}
|
<span
|
v-if="item.promoteCode.useType == 'Discount'"
|
style="font-size: 14px;"
|
>折</span
|
></span
|
>
|
</div>
|
<div class="couponType">
|
<span
|
v-if="
|
item.promoteCode && item.promoteCode.type == 'Product'
|
"
|
>商品券</span
|
>
|
<span v-else>订单券</span>
|
</div>
|
</div>
|
<div class="conditionBox yellow">
|
<div
|
class="condition"
|
v-if="item.promoteCode && item.promoteCode.conditionValue"
|
>
|
满{{ item.promoteCode.conditionValue }}减{{
|
item.promoteCode.value
|
}}
|
</div>
|
<div
|
v-if="
|
item.promoteCode &&
|
item.promoteCode.value &&
|
item.promoteCode.useType == 'Discount'
|
"
|
class="condition"
|
>
|
{{ tool.toDecimal1(item.promoteCode.value) }}折优惠券
|
</div>
|
<div
|
v-if="
|
item.promoteCode &&
|
item.promoteCode.value &&
|
item.promoteCode.useType == 'Subtraction'
|
"
|
class="condition"
|
>
|
立减{{ item.promoteCode.value }}元
|
</div>
|
<div class="time">
|
{{ item.createDate ? item.createDate.split("T")[0] : "" }}
|
-
|
{{ item.endDate ? item.endDate.split("T")[0] : "" }}
|
</div>
|
</div>
|
<div v-if="item.use" class="btnBox">
|
<span v-if="item.select">
|
<van-icon name="checked" color="#f24B3B" size="24" />
|
</span>
|
<span v-else>
|
<van-icon name="checked" color="#999999" size="24" />
|
</span>
|
</div>
|
<div v-else><span style="width: 24px"></span></div>
|
</div>
|
</div>
|
</div>
|
<div v-else><van-empty description="暂无数据" image-size="100" /></div>
|
</div>
|
</van-popup>
|
<div class="noData" v-if="loading">
|
<van-loading></van-loading>
|
</div>
|
<div class="noData" v-if="bookInfos.length == 0 && !loading">
|
<van-empty
|
class="custom-image"
|
image="https://img.yzcdn.cn/vant/custom-empty-image.png"
|
description="暂无商品"
|
/>
|
</div>
|
</div>
|
<div class="spline"></div>
|
<div class="payWayBox">
|
<div class="payTitle" style="padding-top: 0">支付方式</div>
|
<div class="wxBox">
|
<img src="@/assets/images/wx-icon.png" alt="" />
|
<span>微信支付</span>
|
</div>
|
</div>
|
<div class="spline"></div>
|
<div class="payWayBox" v-if="payPrice > 0">
|
<div class="payTitle couponBoxTitle">
|
<span>订单优惠券</span>
|
<span class="selectNum">已选{{ selectNum }}张</span>
|
</div>
|
<div class="wxBox couponBox" @click="openCoupon">
|
<span>已优惠 {{ selectPrice }} 元</span>
|
<span>
|
<van-icon name="arrow" />
|
</span>
|
</div>
|
</div>
|
<div class="spline"></div>
|
<div class="orderDetailBox">
|
<div class="payTitle" style="padding-top: 0">订单金额明细</div>
|
<div class="detailItemBox">
|
<span class="name">商品总价</span>
|
<span class="value">¥ {{ tool.toDecimal2(orderInfo.totalPrice) }}</span>
|
</div>
|
<div
|
class="detailItemBox"
|
style="color: #dd0000;"
|
v-if="bookInfos.findIndex(item => item.productPromoteCode) > -1"
|
>
|
<span class="name" style="font-weight: initial;">商品优惠</span>
|
</div>
|
<div
|
v-for="(bookInfo, index) in bookInfos"
|
:key="index"
|
style="color: #dd0000;"
|
>
|
<div class="detailItemBox" v-if="bookInfo.productPromoteCode">
|
<span class="name" style="margin-left: 20px;font-weight: initial;">{{
|
bookInfo.productPromoteCode.name
|
}}</span>
|
<span class="value" style="font-weight: initial;"
|
>¥ {{ tool.toDecimal2(bookInfo.productPromoteCode.value) }}</span
|
>
|
</div>
|
</div>
|
<div
|
class="detailItemBox"
|
style="color: #dd0000;"
|
v-if="orderInfo.orderPromoteCode"
|
>
|
<span class="name" style="font-weight: initial;">订单优惠</span>
|
</div>
|
<div
|
class="detailItemBox"
|
style="color: #dd0000;"
|
v-if="orderInfo.orderPromoteCode"
|
>
|
<span class="name" style="margin-left: 20px;font-weight: normal;">{{
|
orderInfo.orderPromoteCode.name
|
}}</span>
|
<span class="value" style="font-weight: initial;"
|
>¥ {{ selectPrice }}</span
|
>
|
</div>
|
<div class="detailItemBox" style="color: #dd0000;">
|
<span class="name">共减</span>
|
<span class="value"
|
>¥
|
{{ tool.toDecimal2(orderInfo.totalPrice - orderInfo.payPrice) }}</span
|
>
|
</div>
|
<div class="detailItemBox">
|
<span class="name">合计</span>
|
<span class="value">¥ {{ tool.toDecimal2(payPrice) }}</span>
|
</div>
|
</div>
|
<div class="payBox" v-if="showBtnBox">
|
<div class="countBtn">
|
<p>
|
<span>¥ {{ tool.toDecimal2(payPrice) }} 元</span>
|
</p>
|
<!-- <p style="font-size: 12px">
|
共减
|
<span style="font-size: 12px"
|
>¥
|
{{ tool.toDecimal2(orderInfo.totalPrice - orderInfo.payPrice) }}
|
元</span
|
>
|
</p> -->
|
</div>
|
<div class="btn buyBtn" @click="getOrderCreate">
|
{{ payPrice > 0 ? "立即支付" : "立即领取" }}
|
</div>
|
</div>
|
<!-- 优惠券弹层 -->
|
<van-popup
|
v-model="showCoupon"
|
position="bottom"
|
:style="{ height: '73%' }"
|
>
|
<div class="couponListWrap">
|
<div class="couponListTitle">
|
<div>
|
<p class="txt">优惠券</p>
|
<p class="tips">
|
订单优惠券和商品优惠券可叠加使用,且每种类型最多选择一张
|
</p>
|
</div>
|
<van-icon @click="showCoupon = false" name="cross" size="16" />
|
</div>
|
<div v-if="couponList.length > 0">
|
<div
|
|
class="couponList"
|
v-for="(item, index) in couponList"
|
:key="index"
|
>
|
<div
|
:class="
|
item.use ? 'couponInfo yellowBg' : 'couponInfo yellowBg grayBg'
|
"
|
@click="selectCoupon(item)"
|
>
|
<div class="priceBox yellowBor">
|
<div class="price">
|
<span>¥</span>
|
<span
|
class="priceFont"
|
v-if="item.promoteCode && item.promoteCode.value"
|
>{{
|
item.promoteCode.useType == "Discount"
|
? tool.toDecimal1(item.promoteCode.value)
|
: item.promoteCode.value
|
}}</span
|
>
|
</div>
|
<div class="couponType">
|
<span
|
v-if="item.promoteCode && item.promoteCode.type == 'Product'"
|
>商品券</span
|
>
|
<span v-else>订单券</span>
|
</div>
|
</div>
|
<div class="conditionBox yellow">
|
<div
|
class="condition"
|
v-if="item.promoteCode && item.promoteCode.conditionValue"
|
>
|
满{{ item.promoteCode.conditionValue }}减{{
|
item.promoteCode.value
|
}}
|
</div>
|
<div
|
v-if="
|
item.promoteCode &&
|
item.promoteCode.value &&
|
item.promoteCode.useType == 'Discount'
|
"
|
class="condition"
|
>
|
{{ tool.toDecimal1(item.promoteCode.value) }}折优惠券
|
</div>
|
<div
|
v-if="
|
item.promoteCode &&
|
item.promoteCode.value &&
|
item.promoteCode.useType == 'Subtraction'
|
"
|
class="condition"
|
>
|
立减{{ item.promoteCode.value }}元
|
</div>
|
<div class="time">
|
{{ item.createDate ? item.createDate.split("T")[0] : "" }}
|
-
|
{{ item.endDate ? item.endDate.split("T")[0] : "" }}
|
</div>
|
</div>
|
<div v-if="item.use" class="btnBox">
|
<span v-if="item.select">
|
<van-icon name="checked" color="#f24B3B" size="24" />
|
</span>
|
<span v-else>
|
<van-icon name="checked" color="#999999" size="24" />
|
</span>
|
</div>
|
<div v-else><span style="width: 24px"></span></div>
|
</div>
|
</div>
|
</div>
|
<div v-else><van-empty description="暂无数据" image-size="100" /></div>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import { Icon, Toast, Dialog, Field, Popup, Loading, Empty } from "vant";
|
import { getPublicImage } from "@/assets/js/middleGround/tool";
|
Vue.use(Icon);
|
Vue.use(Toast);
|
Vue.use(Field);
|
Vue.use(Popup);
|
Vue.use(Loading);
|
Vue.use(Empty);
|
Vue.use(Dialog);
|
export default {
|
name: "pay",
|
data() {
|
return {
|
loading: false,
|
//商品id
|
productId: this.$route.query.productId ? this.$route.query.productId : 0,
|
productIds: [],
|
productPrice: 0,
|
//优惠券弹层
|
showCoupon: false,
|
// 优惠券列表
|
couponList: [],
|
couponListbyproduct: [],
|
// 实际付款金额
|
payPrice: 0,
|
//已选择优惠券张数
|
selectNum: 0,
|
//已优惠金额
|
selectPrice: 0,
|
orderSaleMethodsId: 0,
|
bookInfos: [],
|
showBtnBox: false,
|
showCouponValue: false,
|
oldRoute: this.$route.query.fromPath ? this.$route.query.fromPath : -1,
|
orderInfo: "",
|
goBack: false,
|
paymentSuccess: false
|
};
|
},
|
created() {
|
this.getDetail();
|
},
|
beforeRouteLeave(to, from, next) {
|
if (this.paymentSuccess) {
|
next();
|
} else {
|
next(false);
|
|
if (this.goBack) {
|
next();
|
} else {
|
// 如果是退出就确定是否要退出
|
setTimeout(() => {
|
Dialog.confirm({
|
title: "提示",
|
message: "是否放弃本次支付?",
|
confirmButtonText: "继续支付",
|
cancelButtonText: "放弃支付"
|
})
|
.then(res => {
|
this.getDetail();
|
})
|
.catch(() => {
|
next();
|
});
|
}, 200);
|
}
|
}
|
},
|
methods: {
|
//获取详情
|
getDetail() {
|
let that = this;
|
// that.loading = true;
|
if (that.$route.query.orderNum) {
|
const data = { orderNum: that.$route.query.orderNum };
|
that.MG.store.getOrderByOrderNum(data).then(res => {
|
that.orderInfo = res;
|
that.payPrice = res.payPrice;
|
that.loading = false;
|
that.handleBookInfo(res.saleMethodLinks);
|
that.handleOrderPromoteCodeInfo();
|
});
|
} else {
|
that.MG.store
|
.getProductList({
|
queryType: "*",
|
handelEBooK: true,
|
fields: {
|
bookshelf_picture: [],
|
bookshelf_author: [],
|
bookshelf_publisher: [],
|
bookshelf_isbn: [],
|
bookshelf_paperLink: [],
|
bookshelf_brief: [],
|
bookshelf_catalog: [],
|
bookshelf_pdf: [],
|
bookshelf_probationPage: [],
|
"Id=": that.$route.query.productIds
|
}
|
})
|
.then(res => {
|
let list = res.datas;
|
that.handleBookInfo(list);
|
// that.loading = false;
|
});
|
}
|
},
|
// 处理商品信息
|
handleBookInfo(datas) {
|
var that = this;
|
for (let i = 0; i < datas.length; i++) {
|
const item = datas[i];
|
if (that.$route.query.orderNum) {
|
if (item.orderSaleMethod.type == "defaultSaleMethod") {
|
item.productInfo = item.orderSaleMethod.product;
|
item.productInfo.icon = getPublicImage(
|
item.orderSaleMethod.product.icon,
|
120
|
);
|
} else {
|
item.productInfo = item.orderSaleMethod.product;
|
item.productInfo.saleMethodName = item.orderSaleMethod.name;
|
item.productInfo.icon = getPublicImage(
|
item.orderSaleMethod.product.icon,
|
120
|
);
|
}
|
that.linkId = item.id;
|
//图书信息
|
// that.bookInfos.push(item);
|
} else {
|
item.productInfo = item.datas;
|
item.productInfo.name = item.datas.Name;
|
item.productInfo.icon = item.datas.Icon;
|
item.payPrice = item.price;
|
that.productPrice = item.price;
|
// that.bookInfos.push(item);
|
}
|
that.showBtnBox = true;
|
}
|
that.bookInfos = datas;
|
//初始化微信sdk
|
// that.init_WeiXinSdk(that);
|
},
|
// 处理订单优惠券
|
handleOrderPromoteCodeInfo() {
|
if (this.orderInfo.orderPromoteCode) {
|
this.selectNum = 1;
|
if (this.orderInfo.orderPromoteCode.useType == "Discount") {
|
let productPayPrice = 0;
|
for (let i = 0; i < this.orderInfo.saleMethodLinks.length; i++) {
|
const item = this.orderInfo.saleMethodLinks[i];
|
productPayPrice += item.payPrice;
|
}
|
this.selectPrice = (
|
productPayPrice *
|
(1 - this.orderInfo.orderPromoteCode.value)
|
).toFixed(2);
|
} else {
|
this.selectPrice = this.orderInfo.orderPromoteCode.value;
|
}
|
}
|
},
|
//获取我的可用订单优惠券列表
|
getCouponList() {
|
let that = this;
|
const data = {
|
orderNum: that.$route.query.orderNum
|
};
|
that.MG.store.getOrderPromoteCodeList(data).then(res => {
|
//循环判断根据productId判断此商品是否可用
|
for (let item of res) {
|
if (that.orderInfo.orderPromoteCode) {
|
// 已经使用了优惠券
|
if (item.id == that.orderInfo.orderPromoteCode.linkId) {
|
item.select = true;
|
that.$set(item, "use", true);
|
} else {
|
that.$set(item, "use", false);
|
}
|
} else {
|
// 未使用优惠券
|
if (item.promoteCode.conditionValue - 0 <= that.payPrice - 0) {
|
that.$set(item, "use", true);
|
} else {
|
that.$set(item, "use", false);
|
}
|
}
|
}
|
that.couponList = res;
|
});
|
},
|
// 选择优惠券点击
|
getProductPromtecode(item) {
|
this.couponListbyproduct = [];
|
this.linkId = item.id;
|
this.getCouponListbyProduct(item);
|
this.showCouponValue = true;
|
},
|
//获取我的可用商品优惠券列表
|
getCouponListbyProduct(ele) {
|
let that = this;
|
const data = {
|
orderNum: that.$route.query.orderNum,
|
orderSaleMethodLinkId: ele.id
|
};
|
that.MG.store.getSaleMethodPromoteCodeList(data).then(res => {
|
for (let item of res) {
|
if (ele.productPromoteCode) {
|
// 已经使用了优惠券
|
if (item.id == ele.productPromoteCode.linkId) {
|
item.select = true;
|
that.$set(item, "use", true);
|
} else {
|
that.$set(item, "use", false);
|
}
|
} else {
|
// 未使用优惠券
|
if (item.promoteCode.conditionValue - 0 <= that.payPrice - 0) {
|
that.$set(item, "use", true);
|
} else {
|
that.$set(item, "use", false);
|
}
|
}
|
}
|
that.couponListbyproduct = res;
|
});
|
},
|
openCoupon() {
|
if (this.createOrder) {
|
Toast("订单已生成，请完成支付！");
|
} else {
|
this.couponList = [];
|
this.getCouponList();
|
this.showCoupon = true;
|
}
|
},
|
|
// 点击立即支付，创建订单
|
getOrderCreate() {
|
var that = this;
|
Toast.loading({ mask: false, duration: 0, message: "加载中..." });
|
const data = {
|
orderNum: that.$route.query.orderNum
|
};
|
that.MG.store.getOrderByOrderNum(data).then(res => {
|
if (res && res.state != "WaitPay") {
|
that.MG.store.confirmOrder(data).then(res => {
|
if (res.orderNumber) {
|
const resOrderNum = {
|
orderNum: res.orderNumber
|
};
|
if (res.payPrice != 0) {
|
that.MG.store.makeWeChatPay(resOrderNum).then(payRes => {
|
that.WeChat.pay(payRes, (success, msg) => {
|
Toast.clear();
|
if (success) {
|
Toast.success("支付成功");
|
this.paymentSuccess = true;
|
setTimeout(() => {
|
Dialog.confirm({
|
title: "提示",
|
message: "是否前往学习?",
|
confirmButtonText: "确认",
|
cancelButtonText: "取消"
|
})
|
.then(() => {
|
this.$router.push({
|
path: "/bookDetail",
|
query: {
|
id: this.$route.query.shopId
|
}
|
});
|
})
|
.catch(() => {
|
this.goBack = true;
|
this.$router.go(-1);
|
});
|
}, 1000);
|
} else {
|
if (msg) {
|
Toast.fail(msg);
|
} else {
|
Toast.fail("支付失败");
|
}
|
}
|
});
|
});
|
} else {
|
Toast("领取成功");
|
that.$router.go(-1);
|
}
|
}
|
});
|
} else {
|
that.MG.store
|
.makeWeChatPay({
|
orderNum: that.$route.query.orderNum
|
})
|
.then(payRes => {
|
that.WeChat.pay(payRes, (success, msg) => {
|
Toast.clear();
|
if (success) {
|
Toast.success("支付成功");
|
setTimeout(() => {
|
Dialog.confirm({
|
title: "提示",
|
message: "是否前往学习?",
|
confirmButtonText: "确认",
|
cancelButtonText: "取消"
|
})
|
.then(() => {
|
this.$router.push({ path: "/myTextBook" });
|
})
|
.catch(() => {
|
this.goBack = true;
|
this.$router.go(-1);
|
});
|
}, 1000);
|
} else {
|
if (msg) {
|
Toast.fail(msg);
|
} else {
|
Toast.fail("支付失败");
|
}
|
}
|
});
|
});
|
}
|
});
|
},
|
//点击优惠券
|
selectCoupon(item, datas, i) {
|
let that = this;
|
//如果优惠券可以点击
|
if (item.use) {
|
//如果取消
|
if (item.select) {
|
that.$set(item, "select", false);
|
//更新取消折扣后价格
|
if (item.promoteCode.type == "Product") {
|
that.updatePrice("");
|
//将其他优惠券变回
|
for (let citem of that.couponListbyproduct) {
|
if (citem.promoteCode.useType == item.promoteCode.useType) {
|
that.$set(citem, "use", true);
|
}
|
}
|
} else {
|
that.initNum(item);
|
that.updateOrderPrice("");
|
//将其他优惠券变回
|
for (let citem of that.couponList) {
|
if (citem.id != item.id) {
|
that.$set(citem, "use", true);
|
}
|
}
|
}
|
} else {
|
//如果选中
|
// if (datas) {
|
// that.$set(datas[i], 'promoteCodeName', item.promoteCode.name);
|
// }
|
that.$set(item, "select", true);
|
//更新折扣后价格
|
if (item.promoteCode.type == "Product") {
|
that.updatePrice(item);
|
//将其他优惠券变灰
|
for (let citem of that.couponListbyproduct) {
|
if (citem.id != item.id) {
|
that.$set(citem, "use", false);
|
}
|
}
|
} else {
|
that.initNum(item);
|
that.updateOrderPrice(item);
|
//将其他优惠券变灰
|
for (let citem of that.couponList) {
|
if (citem.id != item.id) {
|
that.$set(citem, "use", false);
|
}
|
}
|
}
|
}
|
} else {
|
return false;
|
}
|
},
|
//初始化优惠券选中张数,优惠价格及优惠后金额
|
initNum(item) {
|
let that = this;
|
if (item.select) {
|
that.selectNum = 1;
|
if (item.promoteCode.useType == "Discount") {
|
let productPayPrice = 0;
|
for (let i = 0; i < that.bookInfos.length; i++) {
|
const item = that.bookInfos[i];
|
productPayPrice += item.payPrice;
|
}
|
that.selectPrice = (
|
productPayPrice *
|
(1 - item.promoteCode.value)
|
).toFixed(2);
|
} else {
|
that.selectPrice = item.promoteCode.value;
|
}
|
} else {
|
that.selectNum = 0;
|
that.selectPrice = 0;
|
}
|
},
|
// 更新商品价格信息
|
updatePrice(item) {
|
let that = this;
|
let data = {};
|
if (item == "") {
|
data = {
|
orderNum: that.$route.query.orderNum,
|
saleMethodLinkId: that.linkId,
|
userPromoteCodeId: 0
|
};
|
} else {
|
data = {
|
orderNum: that.$route.query.orderNum,
|
saleMethodLinkId: that.linkId,
|
userPromoteCodeId: item.id
|
};
|
}
|
that.MG.store.updateSaleMethodPromoteCode(data).then(res => {
|
if (res) {
|
that.orderInfo = res;
|
if (res.state == "Init") {
|
for (let i = 0; i < this.bookInfos.length; i++) {
|
const item = this.bookInfos[i];
|
for (let j = 0; j < res.saleMethodLinks.length; j++) {
|
const ele = res.saleMethodLinks[j];
|
if (item.productInfo.id == ele.orderSaleMethod.product.id) {
|
item.payPrice = ele.payPrice;
|
}
|
}
|
}
|
that.getDetail();
|
that.payPrice = res.payPrice;
|
}
|
} else {
|
Toast("优惠券使用失败:" + res.errormsg);
|
}
|
});
|
},
|
// 更新订单价格信息
|
updateOrderPrice(item) {
|
let that = this;
|
let data = {};
|
if (item == "") {
|
data = {
|
orderNum: that.$route.query.orderNum,
|
userPromoteCodeId: 0
|
};
|
} else {
|
data = {
|
orderNum: that.$route.query.orderNum,
|
userPromoteCodeId: item.id
|
};
|
}
|
that.MG.store.updateOrderPromoteCode(data).then(res => {
|
if (res) {
|
that.orderInfo = res;
|
if (res.state == "Init") {
|
// that.getDetail();
|
that.payPrice = res.payPrice;
|
}
|
} else {
|
Toast("优惠券使用失败:" + res.errormsg);
|
}
|
});
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.payOrderBox {
|
height: 100vh;
|
background: #f1f1f1;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.payWayBox {
|
padding: 20px 20px;
|
background: #fff;
|
}
|
|
.orderDetailBox {
|
padding: 20px 20px 118px;
|
background: #fff;
|
flex: 1;
|
}
|
|
.payTitle {
|
font-size: 16px;
|
padding: 10px 0;
|
border-bottom: 1px solid #ddd;
|
color: #999;
|
}
|
|
.wxBox {
|
display: flex;
|
align-items: center;
|
color: #333;
|
margin-top: 15px;
|
}
|
|
.wxBox img {
|
width: 20px;
|
margin-right: 20px;
|
}
|
|
.couponBoxTitle {
|
display: flex;
|
align-items: center;
|
}
|
|
.selectNum {
|
font-size: 14px;
|
color: #fff;
|
background: #f24b3b;
|
padding: 3px 10px;
|
border-radius: 10px;
|
margin-left: 30px;
|
}
|
|
/* 书籍信息 */
|
.detailInfoBox {
|
padding: 15px 20px;
|
background: #fff;
|
max-height: 58vh;
|
overflow-y: auto;
|
}
|
|
.shop {
|
padding: 10px 20px;
|
}
|
|
.classList {
|
display: flex;
|
justify-content: flex-start;
|
margin-top: 20px;
|
/* min-height: 500px; */
|
}
|
|
.classList .imgBox {
|
position: relative;
|
margin-right: 40px;
|
width: 105px;
|
height: 140px;
|
border-radius: 8px;
|
box-shadow: #aba8a8 2px 4px 6px 0px;
|
}
|
|
.classList .imgBox img {
|
width: auto;
|
height: auto;
|
max-width: 100%;
|
max-height: 100%;
|
position: absolute;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
margin: auto;
|
}
|
|
.classList .txtBox {
|
position: relative;
|
flex: 1;
|
}
|
|
.classList .title {
|
margin-top: 20px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 3;
|
-webkit-box-orient: vertical;
|
}
|
|
.classList .author {
|
color: #999;
|
margin-top: 20px;
|
}
|
|
.classList .count {
|
color: #999;
|
margin-top: 20px;
|
}
|
|
.classList .txtBox .price {
|
position: absolute;
|
left: 0;
|
bottom: 40px;
|
color: #f24b3b;
|
font-weight: 600;
|
/* font-size: 28px; */
|
}
|
|
.classList .txtBox .price2 {
|
position: absolute;
|
left: 0;
|
bottom: 10px;
|
color: #f24b3b;
|
font-weight: 600;
|
/* font-size: 28px; */
|
}
|
|
.classList .txtBox .priceSale {
|
position: absolute;
|
right: 0;
|
bottom: 10px;
|
color: #f24b3b;
|
/* font-size: 28px; */
|
}
|
|
.classList .txtBox .free {
|
color: #65e49e;
|
}
|
|
/* 优惠券 */
|
.couponBox {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 15px;
|
/* padding: 10px 0; */
|
flex-wrap: wrap;
|
}
|
|
.couponListBox {
|
display: flex;
|
align-items: center;
|
flex: 1;
|
flex-wrap: wrap;
|
}
|
|
.couponListBox span {
|
display: inline-block;
|
padding: 8px 12px;
|
color: #f24b3b;
|
background: #ffe7e5;
|
border-radius: 8px;
|
margin-right: 12px;
|
margin-bottom: 12px;
|
}
|
|
.getCouponBtn {
|
display: flex;
|
width: 78px;
|
align-items: center;
|
color: #f24b3b;
|
margin-bottom: 12px;
|
}
|
|
/* 优惠券列表 */
|
.couponListWrap {
|
padding-bottom: 30px;
|
}
|
|
.couponList {
|
margin-top: 18px;
|
padding: 0 30px;
|
}
|
|
.couponInfo {
|
display: flex;
|
align-content: center;
|
justify-content: space-between;
|
background: #ffc8c8;
|
border-radius: 12px 12px 0 0;
|
padding: 30px;
|
}
|
|
.couponListWrap .priceBox {
|
display: flex;
|
width: 110px;
|
align-items: center;
|
flex-direction: column;
|
color: #cd1e21;
|
border-right: 1px dashed #cd1e21;
|
padding: 5px 20px 0 0;
|
}
|
|
.priceFont {
|
font-size: 40px;
|
margin-left: 6px;
|
}
|
|
.conditionBox {
|
display: flex;
|
flex-direction: column;
|
padding: 10px 30px 10px 0;
|
color: #d78003;
|
}
|
|
.couponType {
|
margin-top: 3px;
|
}
|
|
.condition {
|
font-size: 28px;
|
margin-bottom: 10px;
|
}
|
|
.btnBox {
|
display: flex;
|
align-items: center;
|
}
|
|
.getBtn {
|
color: #d78003;
|
background: #fff;
|
padding: 10px 20px;
|
border-radius: 6px;
|
}
|
|
.getBtn.selected {
|
color: #fff;
|
background: #d78003;
|
}
|
|
.couponInfo.yellowBg {
|
background: #f9ebd3;
|
}
|
|
.couponListWrap .priceBox.yellowBor {
|
color: #d78003;
|
border-right: 1px dashed #d78003;
|
}
|
|
.couponListTitle {
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
/* margin-top: 18px; */
|
padding: 20px;
|
/* padding-bottom: 18px; */
|
border-bottom: 1px solid #ddd;
|
}
|
|
.couponListTitle .txt {
|
font-size: 16px;
|
color: #666;
|
}
|
|
.couponListTitle .tips {
|
/* font-size: 24px; */
|
/* width: 200px; */
|
margin-top: 10px;
|
color: #ff0000;
|
}
|
|
.grayBg {
|
color: #666666 !important;
|
background: #eeeeee;
|
}
|
|
.couponInfo.grayBg {
|
background: #eeeeee;
|
}
|
|
.grayBg .priceBox.yellowBor {
|
color: #666666;
|
border-right: 1px dashed #666666;
|
}
|
|
.grayBg .conditionBox {
|
color: #666666;
|
}
|
|
/* 购买相关按钮 */
|
.payBox {
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
width: 100%;
|
height: 60px;
|
padding: 20px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.payBox .btn {
|
height: 40px;
|
text-align: center;
|
line-height: 40px;
|
color: #ffffff;
|
font-size: 16px;
|
box-sizing: border-box;
|
}
|
|
.countBtn {
|
background: #fff;
|
}
|
|
.payBox .countBtn {
|
color: #666;
|
flex: 1;
|
text-align: left;
|
/* text-indent: 35px; */
|
}
|
|
.payBox .countBtn span {
|
font-size: 18px;
|
font-weight: 800;
|
color: #ff0000;
|
}
|
|
.payBox .buyBtn {
|
width: 140px;
|
background: #f24b3b;
|
}
|
|
.emptypayBox {
|
position: relative;
|
width: 100%;
|
height: 98px;
|
z-index: -1;
|
}
|
|
.detailItemBox {
|
margin-top: 10px;
|
/* padding: 0 0 0 20px; */
|
}
|
|
.detailItemBox .name {
|
/* font-weight: bold; */
|
}
|
|
.detailItemBox .value {
|
float: right;
|
font-weight: bold;
|
}
|
</style>
|
