Feat(订单详情)：订单详情重构（未完成）
This commit is contained in:
linxi
@@ -1,24 +1,29 @@
|
||||
<template>
|
||||
<view class="order-details" style="padding: 30rpx;">
|
||||
<!-- 给header上与data上加on为退款订单-->
|
||||
<view class="header acea-row row-middle" :class="refundOrder ? 'on' : ''"
|
||||
style="background: #0DC5C5;border-radius: 24rpx;">
|
||||
<view class="status-img-box">
|
||||
<view class=" v12-pa-3 v12-white" :class="refundOrder ? 'on' : ''" style="border-radius: 20rpx;">
|
||||
<!-- <view class="status-img-box">
|
||||
<image class="status-img" :src="getStatusImg(orderInfo)" mode=""></image>
|
||||
</view>
|
||||
<view class="data" :class="refundOrder ? 'on' : ''">
|
||||
<view class="state" v-if="orderInfo.isTickets===1 && orderInfo._status._type == 2">待核销</view>
|
||||
<view class="state" v-else>{{ getStatus(orderInfo) }}</view>
|
||||
<view v-if="getStatus(orderInfo)!=='待付款'">{{ orderInfo._status._msg }}</view>
|
||||
<view class="pending-payments flex ai-center" v-else>
|
||||
</view> -->
|
||||
<view :class="refundOrder ? 'on' : ''">
|
||||
<view class="state v12-primary-text v12-font-32 v12-font-bold" v-if="orderInfo.isTickets===1 && orderInfo._status._type == 2">待核销</view>
|
||||
<view class="state v12-primary-text v12-font-32 v12-font-bold" v-else>{{ getStatus(orderInfo) }}</view>
|
||||
<view v-if="getStatus(orderInfo)!=='待付款'" class="v12-mt-2 v12-font-24 v12-secondary-dark-text">{{ orderInfo._status._msg }}</view>
|
||||
<!-- <view class="pending-payments flex ai-center" v-else>
|
||||
<text>请在</text>
|
||||
<u-count-down :time="$global.diffSSS(this.orderInfo.paymentTimeout)"/>
|
||||
<text>内支付，逾期订单将自动取消</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<u-divider></u-divider>
|
||||
<div class="name v12-mb-3 v12-font-28 v12-font-bold">
|
||||
<text class="v12-mr-3"> {{ orderInfo.realName }}</text>
|
||||
<text class="phone">{{ orderInfo.userPhone }}</text>
|
||||
</div>
|
||||
<div class="v12-font-28 v12-secondary-dark-text more-t">{{ orderInfo.userAddress }}</div>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="reject-reason" v-if="orderInfo._status._type==-3 && orderInfo.refundRejectReason">驳回原因：{{ orderInfo.refundRejectReason }}</view>
|
||||
<!-- <view class="reject-reason" v-if="orderInfo._status._type==-3 && orderInfo.refundRejectReason">驳回原因：{{ orderInfo.refundRejectReason }}</view> -->
|
||||
|
||||
<template v-if="!refundOrder">
|
||||
<view class="code-box flex jc-center ai-center" v-if="orderInfo.isTickets===1 && orderInfo._status._type==2">
|
||||
@@ -61,28 +66,10 @@
|
||||
<span class="iconfont icon-weizhi"></span>查看位置
|
||||
</div>
|
||||
</div>
|
||||
<view class="address acea-row row-middle" style="margin-top: 30rpx;border-radius: 24rpx;flex-wrap: nowrap;"
|
||||
v-if="orderInfo.shippingType === 1">
|
||||
<view class="" style="flex-shrink: 0;margin-right: 20rpx;">
|
||||
<image style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20230304135530688212.png'" mode=""></image>
|
||||
</view>
|
||||
<view class="acea-row row-middle" style="flex-grow: 1;">
|
||||
<view class="name acea-row row-middle row-between" style="flex-wrap: nowrap;width: 100%;">
|
||||
<view class="acea-row row-middle">
|
||||
{{ orderInfo.realName }}
|
||||
<text class="phone">{{ orderInfo.userPhone }}</text>
|
||||
</view>
|
||||
<!-- <view class="acea-row row-middle">
|
||||
<image style="width: 32rpx;height: 32rpx;" :src="webUrl+'/20210808005541949297.png'" mode=""
|
||||
@click="call(orderInfo.userPhone)"></image>
|
||||
</view> -->
|
||||
</view>
|
||||
<view>{{ orderInfo.userAddress }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<div class="address" v-else>
|
||||
|
||||
<div class="address" v-if="orderInfo.shippingType !== 1">
|
||||
<div class="name">
|
||||
{{ system_store.name }}
|
||||
{{ system_store.name }}
|
||||
<span class="phone">{{ system_store.phone }}</span>
|
||||
<span class="iconfont icon-tonghua font-color-red" :href="'tel:' + system_store.phone"></span>
|
||||
</div>
|
||||
@@ -91,50 +78,139 @@
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<view style="margin-top: 30rpx;border-radius:24rpx;overflow: hidden;">
|
||||
<OrderGoods :evaluate="status.type || 0" :cartInfo="orderInfo.cartInfo || []" title="商品信息"></OrderGoods>
|
||||
<view style="margin-top: 30rpx;border-radius:20rpx;overflow: hidden;" class="v12-white">
|
||||
<!-- <OrderGoods :evaluate="status.type || 0" :cartInfo="orderInfo.cartInfo || []" title="商品信息"></OrderGoods> -->
|
||||
<view class="v12-radius-20 v12-pa-3" v-for="(cart, d) in orderInfo.cartInfo" :key="d">
|
||||
<view class="v12-justify-between">
|
||||
<view class="">
|
||||
<image style="width: 120rpx; height: 120rpx" class="v12-radius-8" :src="cart.productInfo.image"></image>
|
||||
</view>
|
||||
<view class="v12-justify-between v12-flex-column v12-ml-2" style="flex: 2">
|
||||
<view class="v12-font-28 v12-dark-text v12-font-bold more-t">
|
||||
{{ cart.productInfo.storeName }}
|
||||
</view>
|
||||
<view v-if="cart.productInfo.attrInfo" class="more-t v12-secondary-dark-text v12-font-24">
|
||||
{{ cart.productInfo.attrInfo.sku }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-justify-between v12-flex-column v12-dark-text v12-text-right">
|
||||
<view class=" ">
|
||||
<text class="v12-font-22">
|
||||
￥
|
||||
</text>
|
||||
<text class="v12-font-28">{{ cart.truePrice }}</text>
|
||||
</view>
|
||||
<view class="v12-font-22">
|
||||
<text>x{{ cart.cartNum }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-if="orderInfo.cartInfo &&( d === orderInfo.cartInfo.length - 1)">
|
||||
<view class="v12-justify-between v12-mt-3 v12-dark-text">
|
||||
<view class="v12-font-24 v12-dark-text">
|
||||
商品总价
|
||||
</view>
|
||||
<view class="v12-text-right">
|
||||
<text class="v12-font-22">￥</text>
|
||||
<text class="v12-font-28">
|
||||
{{ force2Decimal(orderInfo.totalPrice) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-justify-between v12-mt-3" v-if="orderInfo.payPostage > 0">
|
||||
<view class="v12-font-24 v12-dark-text">
|
||||
运费
|
||||
</view>
|
||||
<view class="v12-text-right">
|
||||
<text class="v12-font-22">￥</text>
|
||||
<text class="v12-font-28">
|
||||
{{ force2Decimal(orderInfo.payPostage) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-justify-between v12-mt-3" v-if="orderInfo.couponPrice > 0">
|
||||
<view class="v12-font-24 v12-dark-text">
|
||||
满减优惠
|
||||
</view>
|
||||
<view class="v12-text-right">
|
||||
-
|
||||
<text class="v12-font-22">￥</text>
|
||||
<text class="v12-font-28">
|
||||
{{ force2Decimal(orderInfo.couponPrice) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-justify-between v12-mt-3" v-if="orderInfo.useIntegral > 0">
|
||||
<view class="v12-font-24 v12-dark-text">
|
||||
积分抵扣
|
||||
</view>
|
||||
<view class="v12-text-right">
|
||||
-
|
||||
<text class="v12-font-22">￥</text>
|
||||
<text class="v12-font-28">
|
||||
{{ force2Decimal(orderInfo.deductionPrice) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-divider></u-divider>
|
||||
<view class="v12-justify-between v12-mt-3">
|
||||
<view class="v12-font-28 v12-font-bold v12-dark-text">
|
||||
实付款
|
||||
</view>
|
||||
<view class="v12-text-right v12-font-bold v12-primary-text">
|
||||
<text class="v12-font-22">￥</text>
|
||||
<text class="v12-font-28">
|
||||
{{ force2Decimal(orderInfo.payPrice) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="wrapper" style="margin-top: 30rpx;border-radius: 24rpx;">
|
||||
<view class="item acea-row row-middle"
|
||||
<view class="wrapper v12-radius-20 v12-mt-7" style="margin-top: 30rpx">
|
||||
<!-- <view class="item acea-row row-middle"
|
||||
style="font-size: 40rpx;color: #080F1A;font-weight: bold;flex-wrap: nowrap;">
|
||||
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210808003431044270.png'"
|
||||
mode=""></image>
|
||||
<text style="font-size: 26rpx;color: #080F1A;">订单信息</text>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">订单编号：</view>
|
||||
<view class="conter acea-row row-middle row-right">
|
||||
</view> -->
|
||||
<view class="item acea-row row-between v12-font-24 v12-dark-text ">
|
||||
<view class="flex-0">订单编号</view>
|
||||
<view class="v12-text-right ">
|
||||
{{ orderInfo.orderId }}
|
||||
<image @click="copyClipboard(orderInfo.orderId)" style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
|
||||
:src="webUrl+'/20210808003517657208.png'" mode=""></image>
|
||||
<text class="v12-px-2 v12-py-1 v12-ml-1 v12-primary-text v12-primary-border v12-radius-40" @click="copyClipboard(orderInfo.orderId)">
|
||||
复制
|
||||
</text>
|
||||
<!-- <image @click="copyClipboard(orderInfo.orderId)" style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
|
||||
:src="webUrl+'/20210808003517657208.png'" mode=""></image> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">下单时间：</view>
|
||||
<view class="conter">
|
||||
<view class="item acea-row row-between v12-font-24 v12-dark-text ">
|
||||
<view class="flex-0">下单时间</view>
|
||||
<view class="v12-text-right">
|
||||
<text>{{ orderInfo.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">订单类型：</view>
|
||||
<view class="conter">{{ orderTypeName }}</view>
|
||||
<view class="item acea-row row-between v12-font-24 v12-dark-text ">
|
||||
<view class="flex-0">订单类型</view>
|
||||
<view class="v12-text-right">{{ orderTypeName }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">支付状态：</view>
|
||||
<view class="conter">{{ orderInfo.paid ? "已支付" : "未支付" }}</view>
|
||||
<view class="item acea-row row-between v12-font-24 v12-dark-text ">
|
||||
<view class="flex-0">支付状态</view>
|
||||
<view class="v12-text-right">{{ orderInfo.paid ? "已支付" : "未支付" }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">支付方式：</view>
|
||||
<view class="conter">{{ orderInfo._status._payType }}</view>
|
||||
<view class="item acea-row row-between v12-font-24 v12-dark-text ">
|
||||
<view class="flex-0">支付方式</view>
|
||||
<view class="v12-text-right">{{ orderInfo._status._payType }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between" v-if="orderInfo.mark">
|
||||
<!-- <view class="item acea-row row-between" v-if="orderInfo.mark">
|
||||
<view class="flex-0">买家留言：</view>
|
||||
<view class="conter conttent-left">{{ orderInfo.mark }}</view>
|
||||
</view>
|
||||
<view class="v12-text-right conttent-left">{{ orderInfo.mark }}</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view v-if="orderInfo.status != 0">
|
||||
<view v-if="false">
|
||||
<view class="wrapper" v-if="true">
|
||||
<view class="item acea-row row-between">
|
||||
<view class="flex-0">配送方式：</view>
|
||||
@@ -169,7 +245,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 退款订单详情 -->
|
||||
<view class="wrapper" v-if="refundOrder">
|
||||
<view class="wrapper" v-if="false">
|
||||
<view class="item acea-row row-between">
|
||||
<view>收货人：</view>
|
||||
<view class="conter">{{ orderInfo.realName }}</view>
|
||||
@@ -183,7 +259,7 @@
|
||||
<view class="conter">{{ orderInfo.userAddress }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="wrapper" style="margin-top: 30rpx;border-radius: 24rpx;">
|
||||
<view v-if="false" class="wrapper" style="margin-top: 30rpx;border-radius: 24rpx;">
|
||||
<view class="item acea-row row-between" style="flex-wrap: nowrap;">
|
||||
<view class="acea-row row-middle" style="font-size: 40rpx;color: #080F1A;font-weight: bold;flex-wrap: nowrap;">
|
||||
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210808003453973795.png'"
|
||||
@@ -212,36 +288,96 @@
|
||||
<view style="height:100rpx;" v-if="!refundOrder && offlineStatus"></view>
|
||||
<view class="footer acea-row row-right row-middle" v-if="!refundOrder && offlineStatus">
|
||||
<template v-if="status.type == 0">
|
||||
<view class="bnt cancel" @click="cancelOrder">取消订单</view>
|
||||
<view class="bnt bg-color-red" @click="subscribePay">立即付款</view>
|
||||
<view class="v12-justify-between v12-align-center full-width" style="width: 100%">
|
||||
<view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
|
||||
<view class="v12-justify-between v12-align-center">
|
||||
<view class="">
|
||||
<text class="v12-font-22 v12-dark1-text">
|
||||
共{{ orderInfo.totalNum }}件商品
|
||||
</text>
|
||||
<text class="v12-font-bold v12-dark-text v12-font-28 v12-mx-2">
|
||||
实付款
|
||||
</text>
|
||||
<text class="v12-font-bold v12-primary-text v12-font-22">
|
||||
￥
|
||||
</text>
|
||||
<text class="v12-font-bold v12-primary-text v12-font-28">
|
||||
{{ force2Decimal(orderInfo.payPrice) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="bnt v12-primary-text v12-primary-border v12-ml-1" @click="subscribePay">立即付款</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="status.type == 1">
|
||||
<view class="bnt cancel" @click="goGoodsReturn(orderInfo)">申请退款</view>
|
||||
<template v-if="status.type == 1" >
|
||||
<view class="v12-justify-between " style="width: 100%">
|
||||
<view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
|
||||
<view class="bnt v12-primary-text v12-primary-border cancel" @click="goGoodsReturn(orderInfo)">申请退款</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="status.type == 2">
|
||||
<view class="bnt default"
|
||||
@click="$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})"
|
||||
v-if="orderInfo.isTickets!==1">查看物流
|
||||
<view class="v12-justify-between " style="width: 100%">
|
||||
<view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
|
||||
<view class="v12-justify-between">
|
||||
<view class="" style="position: relative">
|
||||
<text class="btn-more v12-font-24 v12-mr-2" @click="showMore = !showMore">更多</text>
|
||||
<view class="group-float" v-show="showMore">
|
||||
<view class="btn flex jc-center ai-center v12-font-24">延长收货</view>
|
||||
<view class="btn flex jc-center ai-center v12-font-24" @click="goGoodsReturn(orderInfo)">申请退款</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bnt v12-dark-text v12-dark-border default"
|
||||
@click="$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})"
|
||||
v-if="orderInfo.isTickets!==1">查看物流
|
||||
</view>
|
||||
<view class="bnt v12-primary-text v12-primary-border" @click="takeOrder">确认收货</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bnt bg-color-red" @click="takeOrder">确认收货</view>
|
||||
</template>
|
||||
<template v-if="status.type == 3">
|
||||
<view class="bnt default" @click="
|
||||
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
|
||||
" v-if="orderInfo.isTickets!==1">查看物流
|
||||
<view class="v12-justify-between " style="width: 100%">
|
||||
<view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
|
||||
<view class="v12-justify-between">
|
||||
<view class="bnt v12-dark-text v12-dark-border cancel" >再买一单</view>
|
||||
<view class="bnt v12-primary-text v12-primary-border" @click="routerGo(orderInfo.cartInfo[0])">立即评价</view>
|
||||
<!-- <view class="bnt v12-dark-text v12-dark-border default" @click="
|
||||
$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
|
||||
" v-if="orderInfo.isTickets!==1">查看物流
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="status.type == -1">
|
||||
<view style="width: 100%">
|
||||
<view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="status.type == -2">
|
||||
<view class="v12-justify-between " style="width: 100%">
|
||||
<view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
|
||||
<view class="bnt v12-dark-text v12-dark-border cancel" >再买一单</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="status.type == -3">
|
||||
<view class="v12-justify-between " style="width: 100%">
|
||||
<view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
|
||||
<view class="">
|
||||
<view class="bnt v12-dark-text v12-dark-border cancel" >再买一单</view>
|
||||
<view class="bnt v12-primary-text v12-primary-border">立即评价</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="status.type == 4">
|
||||
<view class="bnt cancel" @click="delOrder">删除订单</view>
|
||||
<view class="bnt v12-dark-text v12-dark-border cancel" @click="delOrder">删除订单</view>
|
||||
<view
|
||||
v-if="orderInfo.isTickets !== 1"
|
||||
class="bnt default"
|
||||
class="bnt v12-dark-text v12-dark-border default"
|
||||
@click="$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})"
|
||||
>查看物流
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="status.type == 6">
|
||||
<view class="bnt bg-color-red" @click="goGroupRule(orderInfo)">查看拼团</view>
|
||||
<view class="bnt v12-primary-text v12-primary-border" @click="goGroupRule(orderInfo)">查看拼团</view>
|
||||
</template>
|
||||
</view>
|
||||
<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
|
||||
@@ -292,6 +428,7 @@ export default {
|
||||
mixins: [pageListenMixins],
|
||||
data: function () {
|
||||
return {
|
||||
showMore: false,
|
||||
isShowPayPwdPop: false,
|
||||
offlinePayStatus: 2,
|
||||
orderTypeName: "普通订单",
|
||||
@@ -329,6 +466,25 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
copyClipboard,
|
||||
routerGo(cart) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/shop/GoodsEvaluate/index",
|
||||
query: { id: cart.unique }
|
||||
});
|
||||
},
|
||||
goOrderDetails(order) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/order/OrderDetails/index",
|
||||
query: {
|
||||
id: order.orderId
|
||||
}
|
||||
});
|
||||
},
|
||||
goRoom(order) {
|
||||
uni.navigateTo({
|
||||
url: `/pkg_common/views/room?id=${order.merId}&name=${order.merName}`
|
||||
})
|
||||
},
|
||||
force2Decimal(v) {
|
||||
return this.$force2Decimal(v);
|
||||
},
|
||||
@@ -590,6 +746,35 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.footer{
|
||||
height: 122rpx;
|
||||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||||
}
|
||||
.group-float {
|
||||
position: absolute;
|
||||
width: 196rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
|
||||
padding: 0 20rpx;
|
||||
background: #fff;
|
||||
left: -40px;
|
||||
right: 0;
|
||||
top: -62px;
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 0;
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn-service {
|
||||
border-bottom: 1rpx solid #F0F0F0;
|
||||
}
|
||||
}
|
||||
.bnt{
|
||||
font-size: 28rpx !important;
|
||||
}
|
||||
.geoPage {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user