<script>
|
import {
|
mapState
|
} from 'vuex'
|
|
export default {
|
name: "订单详情",
|
computed: {
|
...mapState({
|
address: state => {
|
return state.defaultaddress || {}
|
},
|
}),
|
|
},
|
async onShow() {
|
|
},
|
onLoad(options) {
|
// console.log('dto',options)
|
|
// let item = JSON.parse(decodeURIComponent(options.query.dto));
|
let item = JSON.parse(this.$storage.getItem('_cache_shopping_dto') || '{}') || {}
|
this.dto = {
|
...this.dto,
|
...item
|
}
|
//先获取直接的全部地址
|
// @ApiModelProperty(value = "订单商品")
|
// private List<FlowerCartListDTO> flowers;
|
// @ApiModelProperty(value = "打包费")
|
// private BigDecimal packing;
|
|
},
|
data() {
|
return {
|
dto: {
|
remarks: '',
|
specialNeeds: '',
|
transportId: '',
|
addressId: '',
|
flowers: [],
|
},
|
current_transport: {},
|
cacheAddressId: '',
|
transportList: [],
|
|
|
}
|
},
|
watch: {
|
address(nv, ov) {
|
if (nv && nv.id !== this.cacheAddressId) {
|
this.loadTransportList()
|
this.cacheAddressId = nv.id
|
|
}
|
}
|
},
|
methods: {
|
async loadTransportList() {
|
let that = this;
|
console.log('address', that.address, that.cacheAddressId)
|
if (that.address && that.address.id && that.cacheAddressId !== that.address.id) {
|
that.$message.showLoading()
|
const {
|
code,
|
data
|
} = await that.$http.request('post', '/api/customer/flower/order/confirm/transports', {
|
data: {
|
addressId: that.address.id,
|
weight: that.dto.totalWeight || 0
|
}
|
})
|
that.$message.hideLoading()
|
that.transportList = []
|
if (code === 0) {
|
that.transportList = data || []
|
}
|
}
|
|
},
|
async submitOrder() {
|
console.log('submitOrder', this.dto)
|
if (!this.dto.transportId) {
|
this.$message.showToast('请选择配送方式')
|
return
|
}
|
if (!this.address.id) {
|
this.$message.showToast('请选择收货地址')
|
return
|
}
|
this.dto.addressId = this.address.id
|
|
let tmp = this
|
wx.login({
|
success: async res => {
|
console.log(res)
|
if (res.code) {
|
tmp.$message.showLoading()
|
const {
|
code,
|
data
|
} = await tmp.$http.request('post', '/api/customer/flower/order/commit', {
|
data: {
|
...tmp.dto,
|
wxcode: res.code
|
}
|
})
|
tmp.$message.hideLoading()
|
if (code === 0) {
|
//提交信息
|
console.log('pay,', data)
|
if (data && data['_testOrderId']) {
|
//回调
|
tmp.$message.showLoading()
|
const res2 = await tmp.$http.request('get',
|
'/api/customer/flower/order/callback/tmp', {
|
params: {
|
id: res2.data['_testOrderId']
|
}
|
})
|
tmp.$message.hideLoading()
|
} else if (data) {
|
wx.requestPayment({
|
...data,
|
async success(res) {
|
console.log('pay success', res)
|
tmp.$message.showToast('支付成功')
|
//返回上一页
|
await tmp.$store.dispatch('sign_add', 'shopping')
|
uni.navigateBack()
|
},
|
fail(err) {
|
console.error('pay fail', err)
|
tmp.$message.showToast('支付失败')
|
}
|
})
|
|
}
|
}
|
|
} else {
|
tmp.$message.showToast('获取微信信息失败');
|
}
|
},
|
error: res => {
|
tmp.$message.showToast('获取微信信息失败:' + res);
|
}
|
});
|
|
|
}
|
}
|
}
|
</script>
|
|
<template>
|
<view class="page-confirm">
|
<view class="p10 bg-white br-4">
|
<common-address-select ref="addressselect"></common-address-select>
|
</view>
|
<view>
|
<view class="flower-container m-t-12 br-4 p10">
|
<view class="shopping-item m-b-20" v-for="(item,index) of dto.flowers" :key="index">
|
<u-divider v-if="index>0"></u-divider>
|
<view class="sup-title flex">
|
<image class="icon-dp img100 m-r-10" src="/static/common/icon-dp.png"></image>
|
<view>{{ item.supplierName || '-' }}</view>
|
</view>
|
<view class="item-each m-t-12 flex">
|
<image class="img img100 m-r-6" :src="item.url||item.cover"></image>
|
<view>
|
<view class="title"><span class="m-r-5"
|
style="display: inline-block;">{{item.categoryStr||''}}</span><span
|
v-if="item.levelStr" class="m-r-5"
|
style="display: inline-block;">{{ item.levelStr || '' }}</span>{{ item.name || '-' }}
|
</view>
|
<view class="price">
|
{{ item.price || 0 }}*{{ item.num }}扎
|
</view>
|
<view class="desc m-t-12">
|
<view class="m-r-15">每扎重量:{{ item.weight || 0 }}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="price">
|
<view class="m-l-a m-r-0 text-right">
|
共{{ dto.flowers.length }}件，小计<span class="t-red">￥{{ dto.totalAmount || 0 }}</span>
|
</view>
|
</view>
|
</view>
|
<!-- 查看商品列表，和选择运费 -->
|
<view class="br-4 transform-container m-t-12 p10">
|
<view class="title">
|
<view>运输方式：</view>
|
<view class="flex transform-list flex-wrap-normal">
|
<view v-for="(transform,index) of transportList"
|
:class="[transform.id===dto.transportId?'cur':'']" :key="index" class="transform-item"
|
@click="()=>{
|
dto.transportId = transform.id;
|
current_transport = transform
|
}">
|
<view class="title">{{ transform.name }}</view>
|
<view class="price">￥{{ transform.fee }}</view>
|
</view>
|
</view>
|
</view>
|
<view class="m-t-20" v-if="false">
|
<view class="desc-red">
|
10kg以下的零买订单将收取打包费，花店建议购满20kg， 可选冷链物流
|
</view>
|
<view class="desc">
|
预计装1Mini件，运费约18.00元(5公斤内18元，不满5公斤按5公斤计费，每件货不能超过5公斤)，第一汤下单预计次日凌晨发货，备货高峰期除外，冷链汽车运输，发货后72小时左右到货，三线城市会推迟6-12小时，顺丰送货到店。
|
优势:价格便宜，顺丰配送
|
弊端:订单必须是5kg以内
|
</view>
|
</view>
|
</view>
|
|
<view class="p10 bg-white m-t-20 br-4">
|
<view class="form-item ">
|
<view class="label">特殊需求</view>
|
<view class="m-l-a m-r-0 flex1">
|
<view class="m-t-12 m-b-12">
|
<u-textarea v-model="dto.specialNeeds" placeholder="请输入特殊需求">
|
|
</u-textarea>
|
</view>
|
</view>
|
</view>
|
<view class="form-item m-t-12 ">
|
<view class="label">留言</view>
|
<view class="m-l-a m-r-0 flex1">
|
<view class="m-t-12 m-b-12">
|
<u-textarea v-model="dto.remarks" placeholder="填写内容需与卖家协商并确认">
|
|
</u-textarea>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
<view class="m-t-20 br-4 info-container p10 bg-white">
|
<view class="desc flex">
|
<view>商品金额:</view>
|
<view class="m-l-a m-r-0 text-right">
|
{{ (dto.totalAmount || 0) || 0 }}
|
</view>
|
</view>
|
<view class="desc flex">
|
<view>打包费:</view>
|
<view class="m-l-a m-r-0 text-right">
|
{{ (dto.packing || 0) }}
|
</view>
|
</view>
|
<view class="desc flex">
|
<view>运费:</view>
|
<view class="m-l-a m-r-0 text-right">
|
{{ (current_transport.fee || 0) }}
|
</view>
|
</view>
|
</view>
|
|
|
<view style="min-height:200rpx">
|
</view>
|
<view class="bottom-price flex">
|
<view class="m-t-12 m-l-0 m-r-a">
|
合计 <span class="t-red">￥
|
{{ (dto.totalAmount || 0) + (dto.packing || 0) + (current_transport.fee || 0) || 0 }} </span>元
|
</view>
|
<view class="button-green-1 m-l-a m-r-0" style="min-width: 240rpx" @click="submitOrder">
|
提交订单
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<style scoped lang="scss">
|
.page-confirm {
|
padding: 20rpx 30rpx;
|
|
.bottom-price {
|
position: fixed;
|
background-color: #ffffff;
|
left: 0rpx;
|
padding: 20rpx;
|
right: 0rpx;
|
bottom: 0rpx;
|
}
|
|
.flower-container {
|
background-color: #ffffff;
|
|
.shopping-item {
|
padding: 28rpx 22rpx;
|
position: relative;
|
|
.sup-title {
|
border-bottom: 2rpx solid #EEEEEE;
|
line-height: 50rpx;
|
|
.icon-dp {
|
width: 36rpx;
|
height: 36rpx;
|
margin-top: 7rpx;
|
}
|
}
|
|
.item-each {
|
padding-left: 20rpx;
|
|
.img {
|
width: 124rpx;
|
height: 124rpx;
|
}
|
|
.title {
|
font-weight: 600;
|
font-size: 28rpx;
|
|
color: #000000;
|
line-height: 40rpx;
|
|
.level {
|
color: #20613D;
|
}
|
}
|
|
.price {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #CF0000;
|
line-height: 40rpx;
|
}
|
|
.desc {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #666666;
|
line-height: 34rpx;
|
|
}
|
}
|
|
.button-icons {
|
position: absolute;
|
line-height: 40rpx;
|
|
}
|
}
|
|
}
|
|
.info-container {
|
.desc {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #666666;
|
line-height: 40rpx;
|
|
.value {
|
text-align: right;
|
}
|
}
|
}
|
|
.transform-container {
|
background-color: #ffffff;
|
|
.transform-list {
|
.transform-item {
|
background: rgba(225, 240, 231, 0.38);
|
border-radius: 8rpx;
|
//min-height: 112rpx;
|
border: 2rpx solid rgba(225, 240, 231, 0.38);
|
padding: 10rpx;
|
text-align: center;
|
//margin: 0 auto;
|
margin-left: 10rpx;
|
margin-top: 10rpx;
|
margin-right: auto;
|
max-width: 32%;
|
width: 130rpx;
|
|
.title {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #000000;
|
line-height: 40rpx;
|
word-break: break-word;
|
}
|
|
.price {
|
font-weight: 600;
|
font-size: 30rpx;
|
color: #20613D;
|
//line-height: 44rpx;
|
}
|
}
|
|
.transform-item.cur {
|
background: #E1F0E7;
|
border-radius: 8rpx;
|
border: 2rpx solid #20613D;
|
}
|
}
|
|
.transform-list:nth-child(3n+0) {
|
margin-left: 0
|
}
|
|
.transform-list:nth-child(3n+2) {
|
margin-right: 0;
|
}
|
|
}
|
|
}
|
</style>
|
