400 lines
12 KiB
Vue
400 lines
12 KiB
Vue
<template>
|
||
<view class="mine_order_info_warp">
|
||
<view class="order_info_header">
|
||
<up-image src="/static/common/left_b.png" width="20" height="19" bgColor="#f1f6ff00" @click="jumpLeft"></up-image>
|
||
<view class="header_status">
|
||
<up-image src="/static/common/order_status_1.png" width="20" height="19" bgColor="#f1f6ff00"></up-image>
|
||
<text class="msg">{{getValue(ORDER_STATUS,orderInfo.status)}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="order_info_content">
|
||
<!-- 等待付款 -->
|
||
<view class="content_due" v-if="orderInfo.status === ORDER_TYPE.UNPAID">
|
||
<view style="">
|
||
<text style="font-size: 28rpx;font-weight: bold;">需付款：</text>
|
||
<text style="font-size: 28rpx;">￥</text>
|
||
<text style="font-size: 36rpx;font-weight: bold;">234</text>
|
||
<text style="font-size: 28rpx;">.00</text>
|
||
<text style="font-size: 20rpx;font-weight: bold;margin-left: 20rpx;">剩余</text>
|
||
<text style="font-size: 28rpx;font-weight: bold;margin-left: 10rpx;">29:32:20</text>
|
||
<text style="font-size: 20rpx;font-weight: bold;"> 订单自动取消</text>
|
||
</view>
|
||
<view class="payment_but">
|
||
<view class="but">去支付</view>
|
||
</view>
|
||
</view>
|
||
<view class="content_cancel" v-if="orderInfo.status === ORDER_TYPE.CANCELED">取消原因：超时未支付</view>
|
||
<!-- 地址 -->
|
||
<view class="steps_warp">
|
||
<!-- 物流单号 -->
|
||
<view class="address_info" v-if="[ORDER_TYPE.NOT_RECEIVE].includes(orderInfo.status)">
|
||
<view class="address_data_warp">
|
||
<up-image src="/static/common/waybill.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
|
||
<view class="address_info_name">运单号：</view>
|
||
<view class="address_info_mobile" style="margin-right: 20rpx;">{{orderInfo.waybillNumber}}</view>
|
||
<up-image src="/static/common/copy.png" width="14" height="14" bgColor="#f1f6ff00" @click="copyData(orderInfo.waybillNumber)"></up-image>
|
||
</view>
|
||
</view>
|
||
<view class="address_info_right" v-if="[ORDER_TYPE.NOT_RECEIVE].includes(orderInfo.status)"> </view>
|
||
<!-- 收货地址 -->
|
||
<view class="address_warp">
|
||
<view class="address_info">
|
||
<view class="address_data_warp">
|
||
<up-image src="/static/common/address.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
|
||
<view class="address_info_name">{{orderInfo.name}}</view>
|
||
<view class="address_info_mobile">{{orderInfo.mobile}}</view>
|
||
</view>
|
||
<view class="address_but">修改地址</view>
|
||
</view>
|
||
<view class="address_content">
|
||
{{orderInfo.address}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 产品 -->
|
||
<view class="order_comm order_product_warp">
|
||
<!-- 头部 -->
|
||
<view class="order_product_header">
|
||
<up-image :src="orderInfo.product.url" width="22" height="22" bgColor="#f1f6ff00"></up-image>
|
||
<view class="order_product_title">{{orderInfo.product.name}}</view>
|
||
</view>
|
||
<!-- 产品详情 -->
|
||
<view class="order_item_content">
|
||
<view v-for="pItem in orderInfo.product.productList" :key="pItem.id" class="content_item">
|
||
<up-image :src="pItem.url" width="80" height="80" bgColor="#f1f6ff00"></up-image>
|
||
<view class="content_info">
|
||
<view class="content_info_title">{{pItem.title}}</view>
|
||
<view class="content_info_tag">{{pItem.tag.join(" ")}}</view>
|
||
<view>
|
||
<text class="content_info_description" v-for="dItem in pItem.description" :key="dItem">
|
||
{{dItem}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="content_right">
|
||
<view class="content_right_total">￥{{pItem.total}}</view>
|
||
<view class="content_right_quantity">x{{pItem.quantity}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 金额等数据汇总 -->
|
||
<view class="order_comm order_data_warp">
|
||
<view class="data_item">
|
||
<view class="item_title">商品总价</view>
|
||
<view class="item_value">￥3599.00</view>
|
||
</view>
|
||
<view class="data_item">
|
||
<view class="item_title">快递运费</view>
|
||
<view class="item_value">￥0.00</view>
|
||
</view>
|
||
<view class="data_item">
|
||
<view class="item_title">平台优惠<text class="copy_order_coupon">优惠券</text></view>
|
||
<view class="item_value">-￥10.00</view>
|
||
</view>
|
||
<view class="data_item">
|
||
<view class="item_title">应付款</view>
|
||
<view class="item_value pay_amount">￥3589.00</view>
|
||
</view>
|
||
<view class="order_data_but"></view>
|
||
<view class="data_item">
|
||
<view class="item_title">订单编号</view>
|
||
<view class="item_value">2324124232424 <text class="copy_order_number" @click="copyData('2324124232424')">复制</text></view>
|
||
</view>
|
||
<view class="data_item">
|
||
<view class="item_title">买家留言</view>
|
||
<view class="item_value">快点发货~</view>
|
||
</view>
|
||
<view class="data_item">
|
||
<view class="item_title">配送方式</view>
|
||
<view class="item_value">普通快递</view>
|
||
</view>
|
||
<view class="data_item">
|
||
<view class="item_title">支付方式</view>
|
||
<view class="item_value">微信支付</view>
|
||
</view>
|
||
<view class="data_item">
|
||
<view class="item_title">下单时间</view>
|
||
<view class="item_value">2024-10-12 20:18:25</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="collect_operate order_but_warp">
|
||
<view class="operate_comm operate_but_1" v-if="orderInfo.status === ORDER_TYPE.UNSHIPPED">取消订单</view>
|
||
<view class="operate_comm operate_but_2" v-if="orderInfo.status === ORDER_TYPE.UNPAID" @click="goPay">去付款</view>
|
||
<view class="operate_comm operate_but_1" v-if="orderInfo.status === ORDER_TYPE.COMPLETED">申请退款</view>
|
||
<view class="operate_comm operate_but_2" v-if="orderInfo.status === ORDER_TYPE.NOT_RECEIVE">确认收货</view>
|
||
<view class="operate_comm operate_but_3" v-if="orderInfo.status === ORDER_TYPE.UNSHIPPED">提醒发货</view>
|
||
<view class="operate_comm operate_but_1" v-if="orderInfo.status === ORDER_TYPE.COMPLETED">申请售后</view>
|
||
<view class="operate_comm operate_but_1" v-if="orderInfo.status === ORDER_TYPE.AFTER_SALE">查看售后</view>
|
||
<view class="operate_comm operate_but_1" v-if="[ORDER_TYPE.COMPLETED].includes(orderInfo.status)">删除记录</view>
|
||
<view class="operate_comm operate_but_3" v-if="[ORDER_TYPE.COMPLETED,ORDER_TYPE.CANCELED].includes(orderInfo.status)">再次购买</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ORDER_TYPE,ORDER_STATUS,getValue } from '@/utils/enumUtils.js';
|
||
import { copyData } from '@/utils/index.js';
|
||
|
||
export default {
|
||
computed: {
|
||
ORDER_TYPE() {
|
||
return ORDER_TYPE;
|
||
},
|
||
ORDER_STATUS() {
|
||
return ORDER_STATUS;
|
||
},
|
||
ORDER_STATUS_CSS() {
|
||
return ORDER_STATUS_CSS;
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
type:0,
|
||
orderInfo:{
|
||
// status:ORDER_TYPE.UNPAID,// 待付款
|
||
// status:ORDER_TYPE.CANCELED,// 已取消
|
||
// status:ORDER_TYPE.UNSHIPPED,// 待发货
|
||
status:ORDER_TYPE.NOT_RECEIVE,// 待收货
|
||
// status:ORDER_TYPE.COMPLETED,// 完成
|
||
// status:ORDER_TYPE.AFTER_SALE,
|
||
name:"张先生",
|
||
mobile:"18****2848",
|
||
address:"河南省郑州市金水区东风路街道北三环索凌路交叉口明明小区1号楼1座",
|
||
waybillNumber:'SF23423443242',
|
||
product:{
|
||
id:1,
|
||
url:'/static/common/order_defal.png',
|
||
name:"哈希店铺",
|
||
status:1,
|
||
paymentTime:29,// 剩余付款时间，单位：分钟
|
||
productList:[
|
||
{
|
||
id:1,
|
||
url:'/static/common/product_def.png',
|
||
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
|
||
description:['双开门','大容量'],
|
||
tag:['7天无理由退货','退货险'],
|
||
quantity:1,
|
||
total:3599,
|
||
},{
|
||
id:2,
|
||
url:'/static/common/product_def.png',
|
||
title:'美的双开门冰箱大容量多美的双开门冰箱大容量多',
|
||
description:['双开门','大容量'],
|
||
tag:['7天无理由退货','退货险'],
|
||
quantity:1,
|
||
total:3599,
|
||
}
|
||
],
|
||
productTotal:7599,
|
||
},
|
||
},
|
||
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
const type = options.type;
|
||
this.type = type ? parseInt(type,10) : 0;
|
||
},
|
||
methods: {
|
||
getValue,
|
||
copyData,
|
||
jumpLeft(){
|
||
uni.navigateTo({
|
||
url:"/pages/mine_order/mine_order?type="+this.type,
|
||
})
|
||
},
|
||
// 去支付
|
||
goPay(){
|
||
console.log("goPay.....")
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mine_order_info_warp{
|
||
height: calc(100vh - 180rpx);
|
||
background-color: $app-bj;
|
||
position: relative;
|
||
overflow-y: auto;
|
||
}
|
||
.order_info_header{
|
||
background-color: $app-bt-bj;
|
||
height: 288rpx;
|
||
display: flex;
|
||
padding: 100rpx 30rpx 30rpx;
|
||
.header_status{
|
||
width: 90%;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 58rpx;
|
||
align-items: center;
|
||
.msg{
|
||
margin-left: 20rpx;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
.order_info_content{
|
||
position: absolute;
|
||
top: 184rpx;
|
||
width: 100%;
|
||
padding: 0 20rpx;
|
||
.content_due{
|
||
display: grid;
|
||
justify-content: center;
|
||
width: 100%;
|
||
color: #FFFFFF;
|
||
.payment_but{
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.but{
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
text-align: center;
|
||
width: 200rpx;
|
||
padding: 10rpx 0;
|
||
color: $app-bt-bj;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
.content_cancel{
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.steps_warp{
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
padding: 20rpx;
|
||
width: calc(100% - 80rpx);
|
||
margin-top: 66rpx;
|
||
.address_info_right{
|
||
border-left: 1rpx dashed #99999959;
|
||
height: 26rpx;
|
||
width: 10rpx;
|
||
margin: 20rpx;
|
||
}
|
||
.address_warp{
|
||
}
|
||
.address_info{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.address_data_warp{
|
||
font-weight: bold;
|
||
color: #1A1A1A;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.address_info_name{
|
||
margin-left: 10rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
.address_info_mobile{
|
||
margin-left: 10rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
.address_but{
|
||
border-radius: 30rpx;
|
||
border: 1px solid #9A9A9A;
|
||
font-size: 20rpx;
|
||
color: #222222;
|
||
padding: 8rpx 20rpx;
|
||
}
|
||
.address_content{
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
padding: 20rpx 10rpx 20rpx 44rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.order_comm{
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-top: 30rpx;
|
||
width: calc(100% - 96rpx);
|
||
}
|
||
.order_product_warp{
|
||
.order_product_header{
|
||
display: flex;
|
||
}
|
||
.order_product_title{
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #1A1A1A;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.order_data_warp{
|
||
margin-bottom: 20rpx;
|
||
.data_item{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
line-height: 60rpx;
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
}
|
||
.item_title{
|
||
color: #808080;
|
||
}
|
||
.item_value{
|
||
color: #1A1A1A;
|
||
}
|
||
.pay_amount{
|
||
color: $app-bt-bj;
|
||
}
|
||
.copy_order_number{
|
||
background: #F2F2F2;
|
||
border-radius: 18rpx;
|
||
font-weight: bold;
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
padding: 4rpx 14rpx;
|
||
|
||
margin-left: 10rpx;
|
||
}
|
||
.copy_order_coupon{
|
||
margin-left: 24rpx;
|
||
border-radius: 6rpx;
|
||
border: 1px solid $app-bt-bj;
|
||
padding: 4rpx 18rpx;
|
||
color: $app-bt-bj;
|
||
}
|
||
.order_data_but{
|
||
border: 1rpx solid #F6F6F6;
|
||
}
|
||
}
|
||
|
||
.order_but_warp{
|
||
position: fixed;
|
||
height: 140rpx;
|
||
bottom: 0;
|
||
background-color: #ffffff;
|
||
right: 14rpx;
|
||
width: calc(100% - 40rpx);
|
||
background-color: #ffffff;
|
||
padding: 20rpx;
|
||
.operate_comm{
|
||
height: 34rpx;
|
||
}
|
||
}
|
||
</style>
|