liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(订单详情)：订单详情重构（未完成）

Browse Source
This commit is contained in:
linxi
2024-09-06 18:13:17 +08:00
parent d7e290911d
commit 5640e3e24c
4 changed files with 268 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.less
+3 -3
View File
@@ -3461,10 +3461,10 @@ page {
}
.order-details .footer .bnt {
width: 1.76*100rpx;
height: 0.6*100rpx;
width: 1.36*100rpx;
height: 0.5*100rpx;
text-align: center;
line-height: 0.6*100rpx;
line-height: 0.5*100rpx;
border-radius: 0.5*100rpx;
color: #fff;
font-size: 0.27*100rpx;
assets/css/v12-style.less
+3 -1
View File
@@ -138,7 +138,9 @@ each(@colors, {
/*==============v12 按钮样式======================*/
.v12-text-right{
text-align: right;
}
pages/order/OrderDetails/index.vue
+259 -74
View File
@@ -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%;
pages/user/User/index.vue
+3
View File
@@ -525,6 +525,9 @@ export default {
</script>
<style lang="less">
.full-width{
width: 100%;
}
.innTag {
margin-left: -30rpx;
width: 196rpx;