<template>
<view class="bg">
<view class="address" >
<view>
<u--image width="40rpx" height="40rpx" src="/static/market/icomm_dizhi.png" ></u--image>
</view>
<view class="address_text">
<view class="flex_start">
<view v-if="orderDetailData.defaultAddress=='1'" class="mr">默认</view>
<!-- <view class="mr1">{{orderDetailData.deliveryAddress}}</view> -->
</view>
<view class="address_conter">
{{orderDetailData.deliveryAddress}}
</view>
<view class="flex_start address_bottom" >
<view>{{orderDetailData.consignee}}</view>
<view style="margin-left:8rpx">{{orderDetailData.contact}}</view>
</view>
</view>
<view @click="openaddress">
<u--image width="40rpx" height="40rpx" src="/static/myinfo/btn_right.png" ></u--image>
</view>
</view>
<view class="commodity">
<view class="commodity_title">厦门海嘉成商城</view>
<view class="mc_item" v-for="(item,index) in orderDetailData.detailVoList" :key="index">
<view class="item_swipe">
<view class="box_img">
<u--image radius='16rpx' width="180rpx" height="180rpx" :src="item.fileList[0].fileUrl" ></u--image>
</view>
<view class="box_text">
<view class="box_title">
{{ item.productTitle }}
</view>
<view class="box_type">
已选择 {{item.specsName}}
</view>
<view class="box_num">
<view class="bn_left">
￥{{item.price}}
</view>
<view class="bn_right">
{{ 'x' + item.num }}
</view>
</view>
</view>
</view>
</view>
<view style="margin-left: 12px;margin-bottom: 12px;" class="PriceInfo_item">
<view>备注</view>
<view @click="openPopup()" style="color: #999999;display: flex;">
<view class="beizhu">{{ remark == ''?'备注留言信息':remark }}</view>
<u--image width="40rpx" height="40rpx" src="/static/myinfo/btn_right.png" ></u--image>
</view>
</view>
</view>
<view class="PriceInfo">
<view class="PriceInfo_title">费用明细</view>
<view class="PriceInfo_item">
<view>商品总额</view>
<view>¥ {{orderDetailData.productPrice}}</view>
</view>
<view class="PriceInfo_item">
<view>加工费用</view>
<view>¥ {{orderDetailData.processPrice}}</view>
</view>
<view class="PriceInfo_item">
<view>包装袋费</view>
<view>¥ {{orderDetailData.packagePrice}}</view>
</view>
<!-- <view class="PriceInfo_item">
<view>优惠券</view>
<view>¥ {{item.price}}</view>
</view> -->
<view class="PriceInfo_item">
<view>总价</view>
<view style="color: #F6514F;font-weight: bold;font-size: 28rpx;">¥ {{orderDetailData.totalPrice}}</view>
</view>
</view>
<u-popup mode="center" :round="10" :show="popupShow" @close="close" @open="open">
<view style="width: 700rpx;height: 300rpx;padding: 20rpx;">
<view>
<u-form-item :labelWidth="labelWidth" label="备注信息" borderBottom >
<u--textarea v-model="beizhu" placeholder="请输入备注信息"
count maxlength="200" ></u--textarea>
</u-form-item>
</view>
<view style="display: flex;
justify-content: center;
margin-top: 10rpx;">
<view @click="submitbeizhu" class="bm_btn2">
保存
</view>
</view>
</view>
</u-popup>
<view style="height: 200rpx;">
</view>
<view class="btnBox" >
<view class="bm_btn">
<view @click="cancelOrder" class="bm_btn1">取消订单</view>
<view @click="submitOrder" class="bm_btn2">提交订单</view>
</view>
</view>
</view>
</template>
<script>
import {orderDetail,cancelOrderByConfirm,
confirmOrder,deliveryAddressList,prePayOrder,
payPaying} from '@/http/api/common.js'
import * as util from '@/pages/util/util.js'
export default {
components: {
},
data() {
return {
orderDetailData:{
deliveryAddress:'',
deliveryAddressId:'',
defaultAddress:'',
consignee:'',
contact:'',
detailVoList:[],//订单列表
},
beizhu:'',
remark:'',
labelWidth:100,
popupShow:false,
AddressData:{}
}
},
async onLoad(e) {
if (e?.orderId) {
await this.getOrderDetail(e?.orderId)
}
},
onShow(){
let selectAddress = uni.getStorageSync('selectAddress');
if (selectAddress) {
selectAddress = JSON.parse(selectAddress)
this.orderDetailData.deliveryAddress = selectAddress.address
this.orderDetailData.defaultAddress = selectAddress.defaultAddress
this.orderDetailData.deliveryAddressId = selectAddress.id
}
},
methods: {
async getdeliveryAddressList(){
let res = await deliveryAddressList()
if (res.data.code == 200) {
if (res.data.data) {
this.AddressData = res.data.data.find(v=>v.defaultAddress == '1')
}
}
},
openPopup() {
this.popupShow = true
},
open() {
},
submitbeizhu(){
this.close()
this.remark = this.beizhu
},
close() {
this.popupShow = false
// console.log('close');
},
async getOrderDetail(id){
let res = await orderDetail(id)
if (res.data.code ==200) {
this.orderDetailData = res.data.data
}
},
async cancelOrder(){
//取消订单
let res = await cancelOrderByConfirm(this.orderDetailData.id)
util.toastFunc('取消成功',()=>{
uni.switchTab({
url: '/pages/market/market',
});
})
},
async submitOrder(){
//提交订单
let res = await confirmOrder({
remark:this.remark,
deliveryAddressId:this.orderDetailData.deliveryAddressId,
},this.orderDetailData.id)
if (res.data.code == 200) {
let Payres = await prePayOrder(this.orderDetailData.id)
let PaymentData = Payres.data.data
console.log('PaymentData',PaymentData);
const that = this;
// 调用微信支付
uni.requestPayment({
provider: 'wxpay',
timeStamp: PaymentData.timeStamp,
nonceStr: PaymentData.nonceStr,
package: PaymentData.packageVal,
signType: PaymentData.signType,
paySign: PaymentData.paySign,
appId: PaymentData.appId,
success(res) {
uni.showLoading({
title: '确认支付状态中...'
});
that.ConfirmPaymentStatus()
},
fail(err) {
console.log('支付失败', err)
uni.showToast({
icon: 'none',
title: '支付失败',
})
}
})
}
},
async ConfirmPaymentStatus(){
//确认支付状态
let res = await payPaying(this.orderDetailData.id)
uni.hideLoading()
if (res.data.code == 200) {
util.toastFunc('支付成功',()=>{
uni.switchTab({
url: '/pages/market/market',
});
})
}else{
util.toastFunc(res.data.msg)
}
},
openaddress(){
uni.navigateTo({
url: '/pages/myinfo/address?selectAddress=1'
});
},
createUuid() {
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return (S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
},
}
}
</script>
<style>
.bg{
width: 750rpx;
height: 100vh;
min-height: 1160rpx;
background: #F1F1F1;
border-radius: 0rpx 0rpx 0rpx 0rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.address{
width: 702rpx;
height: 200rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
margin-top: 24rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.commodity{
width: 702rpx;
height: auto;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
margin-top: 24rpx;
}
.PriceInfo{
width: 702rpx;
height: 400rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
margin-top: 24rpx;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
}
.PriceInfo_item{
display: flex;
justify-content: space-between;
width: 654rpx;
height: 40rpx;
font-size: 28rpx;
font-weight: 500;
color: #666666;
line-height: 36rpx;
}
.PriceInfo_title{
display: flex;
width: 654rpx;
height: 40rpx;
font-size: 32rpx;
font-weight: bold;
color: #333333;
line-height: 36rpx;
margin: 20rpx 0;
}
.btnBox{
width: 750rpx;
height: 100rpx;
background: #FFFFFF;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
position: fixed;
z-index: 10088;
bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
.bm_btn{
display: flex;
flex-direction: row;
align-items: center;
width: 450rpx;
height: 72rpx;
justify-content: space-evenly;
}
.bm_btn1{
width: 200rpx;
height: 72rpx;
background: #EEEEEE;
border-radius: 60rpx 60rpx 60rpx 60rpx;
opacity: 1;
font-size: 28rpx;
font-weight: 500;
color: #666;
line-height: 72rpx;
text-align: center;
}
.bm_btn2{
width: 200rpx;
height: 72rpx;
background: #46A6FF;
border-radius: 60rpx 60rpx 60rpx 60rpx;
opacity: 1;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
line-height: 72rpx;
text-align: center;
}
.flex_start{
display: flex;
justify-content: flex-start;
align-items: center;
}
.mr{
width: 64rpx;
height: 32rpx;
background: #FF8C33;
border-radius: 8rpx 8rpx 8rpx 8rpx;
opacity: 1;
font-size: 24rpx;
font-weight: 500;
color: #FFFFFF;
text-align: center;
}
.mr1{
width: 440rpx;
margin-left: 8rpx;
font-size: 28rpx;
font-weight: 500;
color: #333333;
}
.commodity_title{
width: 196rpx;
height: 40rpx;
font-size: 28rpx;
font-weight: bold;
color: #333333;
line-height: 40rpx;
padding: 24rpx 0 0 24rpx;
}
.address_text{
width: 550rpx;
height: 200rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.address_conter{
width: 550rpx;
height: 45rpx;
font-size: 32rpx;
font-weight: bold;
color: #333333;
line-height: 45rpx;
margin-top: 8rpx;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:1;
}
.address_bottom{
width: 550rpx;
height: 40rpx;
font-size: 28rpx;
font-weight: bold;
color: #999999;
margin-top: 8rpx;
}
.mc_item{
width: 702rpx;
height: 244rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
margin-top: 24rpx;
}
.item_swipe{
width: 678rpx;
height: 244rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
display: flex;
align-items: center;
flex-direction: row;
padding-left: 24rpx;
}
.box_img{
width: 180rpx;
height: 180rpx;
background-color: #999999;
border-radius: 16rpx;
}
.box_text{
width: 392rpx;
height: 200rpx;
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box_title{
width: 392rpx;
height: 40rpx;
font-size: 28rpx;
font-weight: bold;
color: #333333;
line-height: 40rpx;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:1;
}
.box_type{
width: 410rpx;
height: 48rpx;
background: #EEEEEE;
border-radius: 8rpx 8rpx 8rpx 8rpx;
opacity: 1;
font-size: 28rpx;
font-weight: 500;
color: #999999;
padding-left: 24rpx;
line-height: 48rpx;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:1;
}
.box_num{
width: 410rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.bn_left{
width: 106rpx;
height: 38rpx;
font-size: 28rpx;
font-weight: bold;
color: #333333;
line-height: 36rpx;
}
.beizhu{
max-width: 500rpx;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:1;
}
</style>