510 lines
12 KiB
Vue
510 lines
12 KiB
Vue
<template>
|
||
<view class="order">
|
||
<view class="info-address" @click="changeAddress">
|
||
<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 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="item[0].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[index].store_id})">
|
||
<view class="title">优惠券折扣</view>
|
||
<view class="value">
|
||
<view>￥{{ item.coupon_price ? item.coupon_price : '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})">
|
||
<view class="title">平台优惠券</view>
|
||
<view class="value">
|
||
<view>-￥{{ choiceCoupon.vouchertemplate_id ? choiceCoupon.voucher_price : '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" style="height: 800rpx;">
|
||
<view class="title">优惠券详情</view>
|
||
<view class="text">使用优惠券</view>
|
||
<Coupon :couponInfo="coupon" :status='0' :type="1" @use="useCoupon($event)" v-for="(coupon) in couponList" :key="coupon.vouchertemplate_id"></Coupon>
|
||
<u-empty text="无可用优惠券" mode="coupon" v-if="!couponList.length"></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="sendOrder">结算</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/index";
|
||
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,
|
||
choiceCoupon: {}, // 使用的平台优惠券
|
||
}
|
||
},
|
||
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];
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.orderInfo = this.$store.state.cartInfo;
|
||
},
|
||
onShow() {
|
||
// 判断是不是从选择地址页面返回
|
||
if(JSON.stringify(this.$store.state.orderAddress) == '{}') {
|
||
this.$store.commit('updateAddress', this.orderInfo.address_info);
|
||
} else {
|
||
this.addressInfo = this.$store.state.orderAddress;
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
this.$store.commit('updateAddress', {});
|
||
},
|
||
watch: {
|
||
'$store.state.orderAddress'(value) {
|
||
this.addressInfo = value;
|
||
this.getFreight();
|
||
}
|
||
},
|
||
methods: {
|
||
sendOrder() {
|
||
// 拼接后端需要的数据形式
|
||
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 = '';
|
||
})
|
||
}
|
||
}
|
||
this.$u.api.sendOrder({
|
||
ifcart: 1,
|
||
cart_id: id,
|
||
address_id: this.addressInfo.address_id,
|
||
buy_city_id: this.addressInfo.city_id,
|
||
}).then(res => {
|
||
if(res.errCode == 0) {
|
||
this.$u.route({
|
||
url: '/pageC/cart/cashier',
|
||
params: {
|
||
pay_sn: res.data.pay_sn,
|
||
price: res.data.order_total_amount,
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
async getCoupon({ type, store_id, status }) {
|
||
const res = await this.$u.api.getMemberCouponList({
|
||
type: type,
|
||
store_id: store_id,
|
||
status: status,
|
||
})
|
||
return res;
|
||
},
|
||
showCoupon({ type, store_id }) {
|
||
// this.getCoupon({
|
||
// type: type, // 优惠券类型: 1平台券, 2店铺券
|
||
// store_id: store_id,
|
||
// status: 1, // 代金券状态 1:未用 2:已用 3:过期 4:收回
|
||
// }).then(res => {
|
||
// this.couponStatus = true;
|
||
// })
|
||
this.$u.api.getMemberCouponList({
|
||
type: type, // 优惠券类型: 1平台券, 2店铺券
|
||
store_id: store_id,
|
||
status: 1, // 代金券状态 1:未用 2:已用 3:过期 4:收回
|
||
}).then(res => {
|
||
this.couponList = res.data;
|
||
this.couponStatus = true;
|
||
})
|
||
},
|
||
useCoupon(coupon) {
|
||
this.choiceCoupon = coupon;
|
||
this.couponStatus = false;
|
||
},
|
||
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(object) {
|
||
const goods = this.orderInfo.store_goods_total;
|
||
const freight = this.freight;
|
||
let price = 0;
|
||
[goods, freight].forEach(object => {
|
||
for (const key in object) {
|
||
if (object.hasOwnProperty(key)) {
|
||
const element = object[key];
|
||
price += Number(element);
|
||
}
|
||
}
|
||
})
|
||
// console.log(price);
|
||
this.totalPrice = price.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'
|
||
});
|
||
},
|
||
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;
|
||
}
|
||
}
|
||
.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%;
|
||
border: 1rpx solid #000;
|
||
margin-right: 15rpx;
|
||
}
|
||
> 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;
|
||
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> |