xmhjc-applet/pages/market/OrderDetails.vue

<template>
    <view class="bg">
        <view class="head">
            <view class="head_text1">
                {{ computerStatus(orderDetailData.status) }}
            </view>
            <view class="head_text2">
                <!-- 订单已提交，请在30分钟内完成支付，超时订单将自动取消 -->
                确认订单详情
            </view>
        </view>
        <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 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 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>

        <view class="PriceInfo2">
            <view class="PriceInfo_title">订单信息</view>
            <view class="PriceInfo_item">
                <view>订单编号</view>
                <view>{{orderDetailData.orderNo}}</view>
            </view>
            <view class="PriceInfo_item">
                <view>下单时间</view>
                <view>{{orderDetailData.createTime}}</view>
            </view>
            <!-- <view class="PriceInfo_item">
                <view>支付方式</view>
                <view>微信支付</view>
            </view>
            <view class="PriceInfo_item">
                <view>发票类型</view>
                <view>普通发票</view>
            </view>
            <view class="PriceInfo_item">
                <view>发票内容</view>
                <view>商品明细</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>¥ 450.00</view>
            </view> -->
            <view class="PriceInfo_item">
                <view>实付金额</view>
                <view style="color: #F6514F;font-weight: bold;font-size: 28rpx;">¥ {{orderDetailData.totalPrice}}</view>
            </view>
        </view>
        <view style="height: 200rpx;">

        </view>

        <view class="btnBox" >
            <view class="bm_btn">
                <view v-if="orderDetailData.status=='1'" @click="cancelOrder" class="bm_btn1">取消订单</view>
                <view v-else @click="returnPage" class="bm_btn2">返回</view>
            </view>
        </view>
    </view>
</template>
<script>
import {orderDetail,cancelOrder} from '@/http/api/common.js'
export default {
components: {
},
data() {
    return {
        orderDetailData:{
            deliveryAddress:'',
            consignee:'',
            contact:'',
            detailVoList:[]//订单列表
        },
    }
},
async onLoad(e) {
    if (e?.orderId) {
        await this.getOrderDetail(e?.orderId)
    }
},
methods: {
    computerStatus(status){
        let a = {
            '1':'未确认',
            '2':'已确认',
            '3':'已取消',
            '4':'已完成',
        }
        return a[status]
    },
    async getOrderDetail(id){
        let res = await orderDetail(id)
        if (res.data.code ==200) {
            this.orderDetailData = res.data.data
            
        }
    },
    openaddress(){
        //打开地址设置
        uni.navigateTo({
             url: '/pages/myinfo/address'
        });
    },
    async cancelOrder(){
        //取消订单
        let res = await cancelOrder(id)
        if (res.data.code == 200) {
            util.toastFunc('取消成功',()=>{
                uni.navigateBack({ delta: 1 })
            })
        }
    },
    returnPage(){
        uni.navigateBack({ delta: 1 })
    }
}
}
</script>

<style>
.bg{
    width: 750rpx;
    height: auto;
    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: -40px;
}
.commodity{
    width: 702rpx;
    height: auto;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    margin-top: 24rpx;
}
.PriceInfo2{
    width: 702rpx;
    height: 230rpx;
    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{
    width: 702rpx;
    height: 461rpx;
    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;
}
.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: 250rpx;
    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;
}

.address{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}
.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;
}
.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;
}

.head{
    width: 750rpx;
    height: 300rpx;
    background: #46A6FF;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
}
.head_text1{
    width: 96rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #FFFFFF;
    margin-left: 24rpx;
    margin-top: 40rpx;
}
.head_text2{
    width: 678rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #FFFFFF;
    margin-left: 24rpx;
    margin-top: 40rpx;
}
</style>