初始化
This commit is contained in:
595
pages/confirmOrder/confirmOrder.vue
Normal file
595
pages/confirmOrder/confirmOrder.vue
Normal file
@@ -0,0 +1,595 @@
|
||||
<template>
|
||||
<view class="uni-page">
|
||||
<u-navbar placeholder :autoBack="true" bgColor="#fff0e7" title="订单信息"></u-navbar>
|
||||
<view class="content-main">
|
||||
<view class="info-box">
|
||||
<view class="info-title"> 地址信息 </view>
|
||||
<view class="info-content">
|
||||
<view class="step-line"> </view>
|
||||
<view class="step-item">
|
||||
<view class="step-icon"> 寄 </view>
|
||||
<view class="address-box" v-if="sendAddre">
|
||||
<view class="address-info">
|
||||
{{ sendAddre.name }} {{ sendAddre.phone }}
|
||||
</view>
|
||||
<view class="address-detail">
|
||||
{{ sendAddre.address }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="address-box" v-else>
|
||||
<view class="address-info">请选择寄件地址 </view>
|
||||
</view>
|
||||
<view class="addres-book-button" @click="toSelectAddress('sendAddre')">
|
||||
地址簿<img src="~@/static/01跳转@2x.png" alt="" style="width: 14rpx; height: 25rpx" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="step-item">
|
||||
<view class="step-icon step-icon-last"> 收 </view>
|
||||
<view class="address-box" v-if="takeAddre">
|
||||
<view class="address-info">
|
||||
{{ takeAddre.name }} {{ takeAddre.phone }}
|
||||
</view>
|
||||
<view class="address-info"> </view>
|
||||
<view class="address-detail">
|
||||
{{ takeAddre.address }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="address-box" v-else>
|
||||
<view class="address-info">请选择收件地址 </view>
|
||||
</view>
|
||||
<view class="addres-book-button" @click="toSelectAddress('takeAddre')">
|
||||
地址簿<img src="~@/static/01跳转@2x.png" alt="" style="width: 14rpx; height: 25rpx" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-box">
|
||||
<view class="info-title"> 邮寄方式 </view>
|
||||
<view class="info-content">
|
||||
<view class="info-content-flex">
|
||||
<view :class="{
|
||||
'post-pattern-item': true,
|
||||
'post-pattern-item-active':
|
||||
pattern.id === orderInfo.postPattern,
|
||||
}" v-for="pattern in postPattern" :key="pattern.id" @click="
|
||||
() => {
|
||||
orderInfo.postPattern = pattern.id;
|
||||
priceInfo.postage.value = pattern.balance;
|
||||
}
|
||||
">
|
||||
<view class="patter-price">
|
||||
{{ pattern.balance }}<text style="font-size: 24rpx">元</text>
|
||||
</view>
|
||||
<view class="patter-explain">
|
||||
{{ pattern.title }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <EventNotice content="最新活动，开通会员0元寄信">
|
||||
<template #leftIcon>
|
||||
<image src="/static/12活动@2x.png" style="width: 100%; height: 100%" alt=""></image>
|
||||
</template>
|
||||
<template #rightIcon>
|
||||
<u-icon name="arrow-right" color="#CE7A2C" size="16"></u-icon>
|
||||
</template>
|
||||
</EventNotice> -->
|
||||
</view>
|
||||
<view class="info-box">
|
||||
<PayPattern v-model="orderInfo.payPattern"></PayPattern>
|
||||
</view>
|
||||
<view class="info-box">
|
||||
<u-cell-group :border="false">
|
||||
<!-- <u-cell :border="false" title="我的会员" isLink>
|
||||
<template #value>
|
||||
<view class=""> 暂无会员 </view>
|
||||
</template>
|
||||
</u-cell> -->
|
||||
<u-cell :border="false" title="我的优惠券" isLink @click="toSelectDiscounts">
|
||||
<template #value>
|
||||
<view style="width: 300rpx; text-align: right">
|
||||
{{ discounts ? discounts.title : "" }}
|
||||
</view>
|
||||
</template>
|
||||
</u-cell>
|
||||
<u-cell :border="false" title="我的备注" isLink @click="
|
||||
() => {
|
||||
showExplainInput = true;
|
||||
}
|
||||
">
|
||||
<template #value>
|
||||
<view style="width: 300rpx">
|
||||
{{ orderInfo.note }}
|
||||
</view>
|
||||
</template>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="floor-button">
|
||||
<u-popup closeable :border="false" :show="showPrice" mode="bottom" :round="40" @close="closePricePanel">
|
||||
<view class="price-panel-box">
|
||||
<u-cell-group :border="false">
|
||||
<u-cell :border="false" v-for="item in priceInfo" :key="item.id">
|
||||
<template #title>
|
||||
<view class="price-info-title">{{ item.name }}</view>
|
||||
</template>
|
||||
<template #value>
|
||||
<view :class="{
|
||||
'price-info-value': true,
|
||||
'price-info-value-black': item.value <= 0,
|
||||
}">¥ {{ item.value.toFixed(2)}}</view>
|
||||
</template>
|
||||
</u-cell>
|
||||
<view class="" style="display: flex; margin-top: 50rpx">
|
||||
<view class="to-view-button">
|
||||
费用合计
|
||||
<text style="margin-left: 20rpx; color: #ce7a2c">¥<text
|
||||
style="font-size: 42rpx; margin-left: 10rpx">{{
|
||||
totalPrice
|
||||
}}</text></text>
|
||||
</view>
|
||||
<view class="nextstep-button" @click="tpPay"> 立即支付 </view>
|
||||
</view>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<u-popup :show="showExplainInput" @close="
|
||||
() => {
|
||||
showExplainInput = false;
|
||||
}
|
||||
">
|
||||
<view>
|
||||
<u--textarea v-model="orderInfo.note" placeholder="请输入备注信息"></u--textarea>
|
||||
</view>
|
||||
</u-popup>
|
||||
<view class="nextstep-button" @click="confirm"> 确认 </view>
|
||||
</view>
|
||||
<u-loading-page :loading="isPayOver"></u-loading-page>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
toPay,
|
||||
getPostList
|
||||
} from "../../request/wm.js";
|
||||
import EventNotice from "@/components/event-notice/event-notice.vue";
|
||||
import PayPattern from "@/components/Pay-patter/Pay-patter.vue";
|
||||
export default {
|
||||
components: {
|
||||
EventNotice,
|
||||
PayPattern,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orderInfo: {
|
||||
plan: "",
|
||||
postPattern: 1,
|
||||
payPattern: 1,
|
||||
note: "",
|
||||
},
|
||||
isPayOver: false,
|
||||
postPattern: [{
|
||||
id: 1,
|
||||
price: 5.2,
|
||||
explain: "平信(无物流)",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
price: 10.0,
|
||||
explain: "挂号信",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
price: 30.0,
|
||||
explain: "EMS",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
price: 30.0,
|
||||
explain: "顺丰",
|
||||
},
|
||||
],
|
||||
priceInfo: {
|
||||
print: {
|
||||
id: 1,
|
||||
name: "信件费用-普通打印",
|
||||
key: "print",
|
||||
value: 0,
|
||||
},
|
||||
picture: {
|
||||
id: 2,
|
||||
name: "照片费用",
|
||||
key: "picture",
|
||||
value: 0,
|
||||
},
|
||||
postage: {
|
||||
id: 3,
|
||||
name: "邮寄费用",
|
||||
key: "postage",
|
||||
value: 0,
|
||||
},
|
||||
discounts: {
|
||||
id: 4,
|
||||
name: "我的优惠券",
|
||||
key: "discounts",
|
||||
value: 0,
|
||||
},
|
||||
},
|
||||
showPrice: false,
|
||||
sendAddre: null,
|
||||
takeAddre: null,
|
||||
discounts: null,
|
||||
showExplainInput: false,
|
||||
postList: [],
|
||||
};
|
||||
},
|
||||
async onLoad() {
|
||||
if (!this.$store.letterInfo) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/index/index",
|
||||
});
|
||||
}
|
||||
let {
|
||||
data
|
||||
} = await getPostList();
|
||||
this.postPattern = data.data.data;
|
||||
this.priceInfo.postage.value = this.postPattern[0].balance;
|
||||
},
|
||||
methods: {
|
||||
test(e) {
|
||||
console.log(e, this.orderInfo);
|
||||
},
|
||||
confirm() {
|
||||
if (!this.sendAddre || !this.takeAddre) {
|
||||
uni.showToast({
|
||||
icon: "error",
|
||||
title: "请选择收货地址！",
|
||||
});
|
||||
return;
|
||||
}
|
||||
// console.log(this.orderInfo);
|
||||
if (!this.$store.letterInfo.coupon) {
|
||||
this.$store.letterInfo.coupon = 0;
|
||||
}
|
||||
this.$store.letterInfo.send_type = this.orderInfo.postPattern;
|
||||
this.$store.letterInfo.remark = this.orderInfo.note;
|
||||
console.log(this.$store.letterInfo);
|
||||
this.showPrice = true;
|
||||
},
|
||||
closePricePanel() {
|
||||
this.showPrice = false;
|
||||
},
|
||||
toSelectDiscounts() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/coupon/coupon",
|
||||
events: {
|
||||
select: ({
|
||||
data
|
||||
}) => {
|
||||
let baseValue = +this.totalPrice + (this.discounts?.balance || 0)
|
||||
console.log(baseValue, data.start);
|
||||
console.log(baseValue < data.start);
|
||||
if (baseValue < data.start) {
|
||||
console.log(uni.$u);
|
||||
setTimeout(() => {
|
||||
uni.$u.toast('不满足优惠券最低使用额度');
|
||||
}, 100)
|
||||
return
|
||||
|
||||
}
|
||||
if (data) {
|
||||
this.discounts = data;
|
||||
this.priceInfo.discounts.value = 0 - data.balance
|
||||
// this.priceInfo.discounts.value = 0 - 5;
|
||||
this.$store.letterInfo.coupon = data.id;
|
||||
} else {
|
||||
|
||||
// this.priceInfo.discounts.value = 0 - data.balance
|
||||
this.priceInfo.discounts.value = 0;
|
||||
this.$store.letterInfo.coupon = 0;
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
toSelectAddress(type) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/address/address",
|
||||
events: {
|
||||
selectAddres: ({
|
||||
data
|
||||
}) => {
|
||||
switch (type) {
|
||||
case "sendAddre":
|
||||
this.sendAddre = data;
|
||||
this.$store.letterInfo.send_address =
|
||||
`${data.name} ${data.phone} ${data.address}`;
|
||||
console.log(this.sendAddre);
|
||||
break;
|
||||
case "takeAddre":
|
||||
this.takeAddre = data;
|
||||
this.$store.letterInfo.take_address =
|
||||
`${data.name} ${data.phone} ${data.address}`;
|
||||
console.log(this.takeAddre);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
async tpPay() {
|
||||
this.isPayOver = true;
|
||||
try {
|
||||
this.$store.letterInfo.pay_payment = this.orderInfo.payPattern;
|
||||
let payData = {
|
||||
...this.$store.letterInfo,
|
||||
isMmanual: undefined,
|
||||
};
|
||||
let {
|
||||
data
|
||||
} = await toPay(this.$store.letterInfo);
|
||||
if (data.code === 1) {
|
||||
this.isPayOver = false;
|
||||
// #ifdef H5
|
||||
if (this.orderInfo.payPattern === 1) {
|
||||
uni.showToast({
|
||||
title: data.msg,
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/mine",
|
||||
});
|
||||
}, 1000);
|
||||
} else {
|
||||
location.href = data.data.pay.url;
|
||||
// window.lo
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.showToast({
|
||||
title: "小程序支付暂未配置",
|
||||
icon: "error",
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: data.msg,
|
||||
icon: "error",
|
||||
});
|
||||
this.isPayOver = false;
|
||||
}
|
||||
} catch (e) {
|
||||
this.isPayOver = false;
|
||||
//TODO handle the exception
|
||||
}
|
||||
console.log(data);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
totalPrice() {
|
||||
console.log(this.$store.letterInfo);
|
||||
this.$store.productionType.forEach((item) => {
|
||||
console.log(item.id, this.$store.letterInfo.mail_type);
|
||||
if (item.id === this.$store.letterInfo.mail_type) {
|
||||
this.priceInfo.print.name = "信件费用-" + item.title;
|
||||
this.priceInfo.print.value = +item.price;
|
||||
}
|
||||
});
|
||||
let photoPrices = null;
|
||||
if (this.$store.letterInfo.isMmanual) {
|
||||
photoPrices = this.$store.photoPrice?.photo_write;
|
||||
} else {
|
||||
photoPrices = this.$store.photoPrice?.photo_artificial;
|
||||
}
|
||||
this.$store.letterInfo.thumb?.forEach((file, index) => {
|
||||
if (!index) return;
|
||||
if (photoPrices && photoPrices[index] !== undefined) {
|
||||
this.priceInfo.picture.value += +photoPrices[index];
|
||||
} else {
|
||||
this.priceInfo.picture.value += +photoPrices[photoPrices.length - 1];
|
||||
}
|
||||
});
|
||||
let value = Object.values(this.priceInfo).reduce((total, next) => {
|
||||
console.log(total + next.value);
|
||||
return (+total + +next.value).toFixed(2);
|
||||
}, 0);
|
||||
return value < 0 ? 0 : value
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.content-main {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
// height: 100%;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
margin-top: 30rpx;
|
||||
background-color: white;
|
||||
min-height: 100rpx;
|
||||
border-radius: 40rpx;
|
||||
height: fit-content;
|
||||
padding: 30rpx 30rpx;
|
||||
|
||||
.info-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
position: relative;
|
||||
padding: 30rpx 0;
|
||||
|
||||
.step-line {
|
||||
position: absolute;
|
||||
height: calc(60%);
|
||||
width: 0;
|
||||
// background-color: black;
|
||||
border-left: 1rpx black dashed;
|
||||
left: 28rpx;
|
||||
top: 20%;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
margin-bottom: 50rpx;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.step-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.address-box {
|
||||
flex: 1;
|
||||
// padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.address-info,
|
||||
.addres-book-button {
|
||||
font-size: 32rpx;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.step-icon-box {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.address-detail {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-right: 10rpx;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
background-color: #e39b46;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// font-family: OPPOSans-bold, OPPOSans;
|
||||
color: white;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
// bottom: 0;
|
||||
}
|
||||
|
||||
.addres-book-button {
|
||||
width: fit-content;
|
||||
margin-right: 10rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-content-flex {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: 150rpx;
|
||||
gap: 30rpx;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.post-pattern-item {
|
||||
width: 196rpx;
|
||||
height: 134rpx;
|
||||
background: #fff7f2;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.patter-price {
|
||||
font-size: 42rpx;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.patter-explain {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
// opacity: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.post-pattern-item-active {
|
||||
background: #e39b46;
|
||||
|
||||
.patter-price {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.patter-explain {
|
||||
color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.to-view-button {
|
||||
width: 459rpx;
|
||||
min-height: 98rpx;
|
||||
background-color: #ffe4d9;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.nextstep-button {
|
||||
flex: 1;
|
||||
background: linear-gradient(to bottom right, #e8b648, #e08745);
|
||||
min-height: 98rpx;
|
||||
border-radius: 20rpx;
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.price-panel-box {
|
||||
box-sizing: border-box;
|
||||
height: 690rpx;
|
||||
padding: 37rpx;
|
||||
padding-top: 171rpx;
|
||||
|
||||
.price-info-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.price-info-value {
|
||||
color: #ce7a2c;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user