deming/pageC/cart/ConfirmOrder.vue
2020-08-21 11:18:01 +08:00

633 lines
17 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="order">
<view class="info-address" @click="changeAddress" v-if="JSON.stringify(addressInfo) != '{}'">
<image src="../static/image/2.png" class="address-icon"></image>
<view class="address">
<view class="user-info">
<view>{{ addressInfo.address_realname }}</view>
<view>{{ addressInfo.address_mob_phone }}</view>
</view>
<view class="address-text u-line-2">{{ addressInfo.area_info + addressInfo.address_detail }}</view>
</view>
<image src="../static/image/1.png" class="right"></image>
</view>
<view v-else class="address-none" @click="changeAddress">请选择地址</view>
<view class="main">
<view v-for="(item, index) in orderInfo.store_cart_list" :key="index">
<view class="goods-info">
<view class="store">
<image class="avatar" :src="orderInfo.store_list[index].store_avatar"></image>
<view>{{ item[0].store_name }}</view>
<image src="../static/image/1.png" class="right"></image>
</view>
<view class="goods">
<view v-for="(goods, g_index) in item" :key="g_index" class="goods-item">
<image :src="goods.goods_image_url"></image>
<view class="info">
<view class="name u-line-2">{{ goods.goods_name }}</view>
<view class="cart-info">
<view class="price">¥{{ goods.goods_price }}</view>
<view>×{{ goods.goods_num }}</view>
</view>
</view>
</view>
</view>
</view>
<view class="order-info">
<view @click="showCoupon({type: 2, store_id: item[0].store_id})" v-if="orderType == 1 || orderType == 5">
<view class="title">优惠券折扣</view>
<view class="value">
<view>-¥{{ storeCoupon[item[0].store_id] ? storeCoupon[item[0].store_id].voucher_price.toFixed(2) : '0.00' }}</view>
<image src="../static/image/1.png"></image>
</view>
</view>
<view>
<view class="title">运费</view>
<view class="value">
<view v-if="freight">¥{{ freight | setFreight(index) }}</view>
</view>
</view>
</view>
</view>
</view>
<view class="common-active">
<view @click="showCoupon({type: 1})" v-if="orderType == 1 || orderType == 5">
<view class="title">平台优惠券</view>
<view class="value">
<view>-¥{{ choiceCoupon.vouchertemplate_id ? choiceCoupon.voucher_price.toFixed(2) : '0.00' }}</view>
<image src="../static/image/1.png"></image>
</view>
</view>
<view @click="showDelivery=true">
<view class="title">配送方式</view>
<view class="value">
<view>{{ delivery.text }}</view>
<image src="../static/image/1.png"></image>
</view>
</view>
</view>
<u-popup v-model="couponStatus" mode="bottom">
<scroll-view class="coupon-choose" scroll-y style="height: 50vh;" v-if="this.couponType.type == 1">
<view class="title">优惠券详情</view>
<view class="text">平台优惠券</view>
<Coupon :couponInfo="coupon" @use="useCoupon($event)" :goodsClass="goodsClass" v-for="(coupon, index) in orderInfo.store_voucher_all_list" :key="index"></Coupon>
<u-empty text="无可用优惠券" mode="coupon" v-if="!orderInfo.store_voucher_all_list.length" style="height: 200rpx"></u-empty>
</scroll-view>
<scroll-view class="coupon-choose" scroll-y style="height: 50vh;" v-if="this.couponType.type == 2">
<view class="title">优惠券详情</view>
<view class="text">店铺优惠券</view>
<Coupon :couponInfo="coupon" @use="useCoupon($event)" :goodsClass="goodsClass" v-for="(coupon, index) in orderInfo.store_voucher_list[this.couponType.store_id]" :key="index"></Coupon>
<u-empty text="无可用优惠券" mode="coupon" v-if="!orderInfo.store_voucher_list[this.couponType.store_id].length" style="height: 200rpx"></u-empty>
</scroll-view>
</u-popup>
<view class="bottom">
<view class="left">
<view class="title">合计:</view>
<view class="price">¥{{ totalPrice }}</view>
</view>
<view class="right">
<view class="num">共件{{ orderInfo.store_cart_list | setTotalNumber }}商品</view>
<view class="btn" @click="intermediate">结算</view>
</view>
</view>
<u-action-sheet :list="deliveryList" @click="setDelivery" border-radius="10" v-model="showDelivery"></u-action-sheet>
</view>
</template>
<script>
import Coupon from "@/components/mine/coupon/mine";
export default {
data() {
return {
showDelivery: false,
orderInfo: {},
totalPrice: '0.00',
addressInfo: {},
freight: {}, // 运费
isTakeawayer: '', // 是否支持骑手
deliveryList: [{
text: '快递',
value: 'express',
}, {
text: '骑手',
value: 'takeawayer',
}],
delivery: {
text: '快递',
value: 'express',
}, // 配送方式
couponList: [],
couponStatus: false,
couponType: {}, // 选择的优惠券
storeCoupon: {}, // 选中的店铺优惠券
choiceCoupon: {}, // 使用的平台优惠券
goodsClass: [],
orderType: '', // 订单类型 1 普通订单 2 拼团订单 3 秒杀订单 4 优惠券 5 购物车订单
debounce: true,
}
},
components: {
Coupon
},
filters: {
setTotalNumber(data) {
let num = 0;
for (const key in data) {
if (data.hasOwnProperty(key)) {
const element = data[key];
element.forEach(item => {
num += item.goods_num;
})
}
}
return num;
},
setFreight(freight, index) {
return freight[index] || '0.00';
}
},
onLoad(option) {
this.orderType = this.$store.state.orderType;
this.orderInfo = this.$store.state.orderInfo;
// console.log('orderType' + this.orderType);
// console.log(this.orderInfo);
this.getGoodsClass();
this.setTotalPrice();
},
onShow() {
this.debounce = true;
this.storeCoupon = {};
this.choiceCoupon = {};
// 判断是不是从选择地址页面返回
if(JSON.stringify(this.$store.state.orderAddress) == '{}') {
if(this.orderInfo.address_info) this.$store.commit('updateAddress', this.orderInfo.address_info);
} else {
if(this.$store.getters.getOrderAddress) this.addressInfo = this.$store.state.orderAddress;
}
},
beforeDestroy() {
this.$store.commit('updateAddress', {});
},
watch: {
'$store.state.orderAddress'(value) {
this.addressInfo = value;
if(JSON.stringify(value) != '{}') this.getFreight();
},
},
methods: {
// 如果有pintuangroup_headid为参团不然为开团
async withImmediate(type) {
let params = {
pintuan_id: this.orderInfo.pintuan_id,
}
// console.log(this.orderInfo);
// console.log(this.$store.state.pintuangroup_headid);
if(this.orderInfo.pintuangroup_id) {
Object.assign(params, { pintuangroup_headid: this.$store.state.pintuangroup_headid });
Object.assign(params, { pintuangroup_id: this.orderInfo.pintuangroup_id });
}
console.log(params);
this.$u.api.withImmediate(params).then(res => {
this.showGroupUser = false;
this.showInvolvementUser = false;
if(res.errCode == 0) {
this.sendOrder(0);
} else {
this.debounce = true;
this.$u.toast(res.message);
}
})
},
intermediate() {
if(!this.debounce) return;
this.debounce = false;
if(this.orderType == 2) {
this.withImmediate();
} else if(this.orderType == 1) {
this.sendOrder(0);
} else if(this.orderType == 3) {
this.sendOrder(0);
} else {
this.sendOrder(1);
}
},
// @params {Number} ifcart 是否是购物车商品
sendOrder(ifcart) {
// 拼接后端需要的数据形式
let id = [], temp = '';
const object = this.orderInfo.store_cart_list;
for (const key in object) {
if (object.hasOwnProperty(key)) {
const element = object[key];
element.forEach(item => {
temp = item.cart_id + '|' + item.goods_num;
id.push(temp);
temp = '';
})
}
}
// 拼接优惠券
let coupon = [];
for (const key in this.storeCoupon) {
if (this.storeCoupon.hasOwnProperty(key)) {
const element = this.storeCoupon[key];
temp = key + '|' + element.voucher_id;
coupon.push(temp);
temp = '';
}
}
// 平台券store_id写0
if(JSON.stringify(this.choiceCoupon) != '{}') {
coupon.push(0 + '|' + this.choiceCoupon.voucher_id)
}
// 验证是否选择地址
if(!this.addressInfo || JSON.stringify(this.addressInfo) == '{}') {
this.$u.toast('收货地址不能为空');
return false;
}
let params = {
ifcart: ifcart,
cart_id: id,
address_id: this.addressInfo.address_id,
buy_city_id: this.addressInfo.city_id,
}
if(coupon.length) Object.assign(params, { voucher_id: coupon });
if(this.orderType == 2) {
Object.assign(params, { pintuan_id: this.orderInfo.pintuan_id });
if(this.orderInfo.pintuangroup_id) Object.assign(params, { pintuangroup_id: this.orderInfo.pintuangroup_id });
}
// console.log(params);
this.$u.api.sendOrder(params).then(res => {
if(res.errCode == 0) {
this.$u.route({
type: 'redirect',
url: '/pageC/cart/cashier',
params: {
ifcart: params.ifcart,
pay_sn: res.data.pay_sn,
price: res.data.order_total_amount,
order_id: res.data.order_list[0].order_id,
}
})
} else {
this.debounce = true;
this.$u.toast(res.message);
}
})
},
showCoupon({ type, store_id = -1 } = {}) {
this.couponType = {
type: type,
store_id: store_id
}
this.couponStatus = true;
},
useCoupon(coupon) {
if(this.couponType.type == 1) this.choiceCoupon = coupon;
if(this.couponType.type == 2) {
Object.assign(this.storeCoupon, {
[this.couponType.store_id]: coupon
})
}
// console.log(this.choiceCoupon);
// console.log(this.storeCoupon);
this.couponStatus = false;
this.setTotalPrice(); // 计算总价
},
getFreight() {
this.$u.api.getFreight({
freight_hash: this.orderInfo.freight_hash,
city_id: this.addressInfo.city_id,
area_id: this.addressInfo.area_id,
delivery: this.delivery.value,
}).then(res => {
if(res.errCode == 0) {
this.freight = res.data.content;
this.isTakeawayer = res.data.delivery.takeawayer;
this.setTotalPrice(); // 计算总价
}
})
},
setTotalPrice() {
const goods = this.orderInfo.store_goods_total;
let [freight, price, minPrice] = [0, 0, 0];
// 运费
for (const key in this.freight) {
if (this.freight.hasOwnProperty(key)) {
const element = this.freight[key];
freight += Number(element);
}
}
// 商品价格减去优惠券
// 店铺
for (const gid in goods) {
if (goods.hasOwnProperty(gid)) {
// 计算最小价格
minPrice += 0.01;
// 每个店铺所有商品的价格
let sprice = Number(goods[gid]);
if(JSON.stringify(this.storeCoupon) != '{}') {
for (const cid in this.storeCoupon) {
if (this.storeCoupon.hasOwnProperty(cid)) {
const cprice = this.storeCoupon[cid];
// 商品减去优惠券价格
if(gid == cid) {
sprice -= cprice.voucher_price;
// 每个店铺最低付款 0.01
if(sprice <= 0) sprice = 0.01;
}
}
}
}
// 所有商品总价
price += sprice;
}
}
// 平台
if(JSON.stringify(this.choiceCoupon) != '{}') price -= Number(this.choiceCoupon.voucher_price);
// 每个店铺最低付款 0.01
if(price <= minPrice) price = minPrice;
// console.log("minPrice" + minPrice);
// console.log("freight:" + freight);
// console.log("price:" + price);
this.totalPrice = (price + freight).toFixed(2);
},
setDelivery(index) {
if(index == 1) {
if(!this.isTakeawayer) this.$u.toast('此地区不支持骑手配送');
return false;
}
this.delivery = this.deliveryList[index];
this.getFreight();
},
settlement() {
uni.navigateTo({
url: '/pageE/order/Details'
});
},
getGoodsClass() {
this.$u.api.getGoodsClass().then(res => {
this.goodsClass = res.data;
})
},
changeAddress() {
uni.navigateTo({
url: '/pageE/more/Address?type=choose'
});
}
},
};
</script>
<style lang="scss" scoped>
.order {
min-height: calc(100vh - var(--window-top));
background-color: #ECECEC;
padding-top: 1rpx;
.info-address {
padding: 30rpx;
display: flex;
align-items: center;
margin-bottom: 10rpx;
background:rgba(255,255,255,1);
.address-icon {
width: 28rpx;
height: 34rpx;
margin-right: 31rpx;
flex-shrink: 0;
}
.address {
width: 570rpx;
.user-info {
display: flex;
align-items: center;
font-size: 28rpx;
color: rgba(51,51,51,1);
margin-bottom: 20rpx;
> view:first-child {
margin-right: 13rpx;
}
}
.address-text {
font-size: 24rpx;
color: rgba(102,102,102,1);
line-height: 42rpx;
}
}
.right {
flex-shrink: 0;
margin-left: auto;
width: 12rpx;
height: 22rpx;
}
}
.address-none {
height: 150rpx;
line-height: 150rpx;
margin-bottom: 10rpx;
background:rgba(255,255,255,1);
text-align: center;
color: #333;
}
.main {
margin-bottom: 50rpx;
> view {
margin-bottom: 20rpx;
.goods-info {
background-color: #ffffff;
padding: 30rpx;
margin-bottom: 2rpx;
.store {
display: flex;
align-items: center;
margin-bottom: 20rpx;
.avatar {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-right: 15rpx;
background-color: aquamarine;
}
> view {
font-size: 28rpx;
color: rgba(51,51,51,1);
margin-right: 15rpx;
}
.right {
flex-shrink: 0;
width: 11rpx;
height: 22rpx;
}
}
.goods {
.goods-item {
display: flex;
align-items: center;
&:not(:last-child) {
margin-bottom: 20rpx;
}
> image {
margin-right: 30rpx;
width: 180rpx;
height: 160rpx;
border-radius: 10rpx;
background-color: aqua;
flex-shrink: 0;
}
.info {
flex: 1;
// width: 418rpx;
height: 160rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
font-size: 30rpx;
height: 88rpx;
line-height: 44rpx;
color: rgba(51,51,51,1);
}
.cart-info {
display: flex;
align-items: center;
justify-content: space-between;
.price {
font-size: 30rpx;
font-weight: 500;
color: rgba(255,49,49,1);
}
.u-numberbox {
border: 1rpx solid rgba(217,215,215,1);
border-radius:4px;
/deep/ .u-number-input {
margin: 0;
color: #333 !important;
border: 1rpx #D9D7D7 solid {
top: 0px;
bottom: 0px;
}
}
}
}
}
}
}
}
.order-info {
> view {
height: 98rpx;
background: rgba(255,255,255,1);
padding: 35rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rpx;
.title {
font-size: 28rpx;
color: rgba(102,102,102,1);
}
.value {
display: flex;
align-items: center;
font-size: 30rpx;
color:rgba(51,51,51,1);
> image {
width: 12rpx;
height: 22rpx;
flex-shrink: 0;
margin-left: 20rpx;
}
}
}
}
}
}
.common-active {
padding-bottom: 200rpx;
> view {
height: 98rpx;
background: rgba(255,255,255,1);
padding: 35rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rpx;
.title {
font-size: 28rpx;
color: rgba(102,102,102,1);
}
.value {
display: flex;
align-items: center;
font-size: 30rpx;
color:rgba(51,51,51,1);
> image {
width: 12rpx;
height: 22rpx;
flex-shrink: 0;
margin-left: 20rpx;
}
}
}
}
.coupon-choose {
box-sizing: border-box;
padding: 30rpx;
.title {
padding-bottom: 30rpx;
font-size: 32rpx;
font-weight: 500;
color: rgba(51,51,51,1);
text-align: center;
}
.text {
padding-bottom: 30rpx;
font-size: 28rpx;
font-weight: 500;
color: rgba(102,102,102,1);
}
}
.bottom {
padding: 35rpx 30rpx;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 98rpx;
background-color: rgba(255,255,255,1);
box-shadow: 0rpx 10rpx 14rpx 2rpx rgba(0, 0, 0, 0.34);
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
font-size: 30rpx;
.title {
color:rgba(153,153,153,1);
margin-right: 10rpx;
}
.price {
color: #F40E0E;
}
}
.right {
display: flex;
align-items: center;
.num {
font-size: 26rpx;
color: rgba(153,153,153,1);
margin-right: 50rpx;
}
.btn {
width: 160rpx;
height: 60rpx;
background: rgba(255,120,15,1);
border-radius: 30rpx;
font-size: 30rpx;
color: rgba(255,255,255,1);
line-height: 60rpx;
text-align: center;
}
}
}
}
</style>