xmhjc-applet/pages/market/confirmOrder.vue

<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} 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)

        util.toastFunc('提交订单成功',()=>{
            uni.switchTab({
                url: '/pages/market/market',
            });
        })
    },
    openaddress(){
        uni.navigateTo({
             url: '/pages/myinfo/address?selectAddress=1'
        });
    }
}
}
</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>