You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
388 lines
9.4 KiB
388 lines
9.4 KiB
<template>
|
|
<view class="order-detail">
|
|
<u-navbar :title="$t('page.orderDetail.order-detail')" placeholder @leftClick="leftClick()"></u-navbar>
|
|
<!-- <view class="user-info white">
|
|
<img src="../../static/orderDetail/position@3x.png" alt="" />
|
|
<view class="user-base-info">
|
|
<text class="name">{{ $t('page.orderDetail.receiving-information-name') }}</text>
|
|
<text class="phone">159****2932</text>
|
|
<text class="deliver-to">{{ $t('page.orderDetail.receiving-information-deliver') }}</text>
|
|
<text class="address">{{ $t('page.orderDetail.receiving-information-address') }}</text>
|
|
</view>
|
|
<u-icon name="arrow-down"></u-icon>
|
|
</view> -->
|
|
<view class="order-info white">
|
|
<view class="order-info-top white inside-margin">
|
|
<view class="merchant">
|
|
<!-- xxxxxx商家 -->
|
|
<!-- <u-icon name="arrow-right"></u-icon> -->
|
|
</view>
|
|
<text class="order-status">{{ classifyList[productList.state] }}</text>
|
|
</view>
|
|
<view class="product-list">
|
|
<orderProductList :product="productList"></orderProductList>
|
|
</view>
|
|
<view class="unknown inside-margin">
|
|
<!-- TôngcÃng:￥<text class="unknown-price">5280.0</text>(baogòmcàvànchuyên¥0.0) -->
|
|
{{ $t('page.orderDetail.total') }}<text
|
|
class="unknown-price">{{ productList.sumPrice }}</text>
|
|
</view>
|
|
<view class="account-payable">
|
|
<view class="account-payable-title">
|
|
<text>{{ $t('page.orderDetail.account-payable') }}</text>
|
|
<!-- <u-icon name="arrow-down"></u-icon> -->
|
|
</view>
|
|
<view class="account-payable-price">
|
|
<view class="money-symbol">
|
|
<!-- {{ $t('$') }} -->
|
|
</view>
|
|
<view class="num">{{ productList.sumPrice }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="order-number">
|
|
<text class="order-number-title">{{ $t('page.orderDetail.order-number') }}</text>
|
|
<view class="number">
|
|
<text class="code">{{ productList.id }}</text>
|
|
<text class="copy" @click="copy(productList.id)">{{ $t('page.orderDetail.copy') }}</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="productList.name && productList.state != '0'" class="receiving-information">
|
|
<text class="receiving-information-title">{{ $t('page.orderDetail.receiving-information') }}</text>
|
|
<!-- <text class="address">{{ productList.name + ", " + productList.phone + ", " +productList.detailAddress }}</text> -->
|
|
<text
|
|
class="address">{{ productList.name + ', ' + productList.phone + ', ' + productList.detailAddress }}</text>
|
|
</view>
|
|
<!-- <view class="transaction-number">
|
|
<text class="transaction-number-title">{{ $t('page.orderDetail.transaction-number') }}</text>
|
|
<text class="transaction-number-code">4750376583629697865656</text>
|
|
</view> -->
|
|
<view class="create-time">
|
|
<text class="create-time-title">{{ $t('page.orderDetail.create-time') }}</text>
|
|
<text class="create-time-detail">2024-04-27 12:23:22</text>
|
|
</view>
|
|
<!-- <view class="closing-time">
|
|
<text class="closing-time-title">{{ $t('page.orderDetail.closing-time') }}</text>
|
|
<text class="closing-time-detail">2024-04-27 12:23:56</text>
|
|
</view> -->
|
|
<!-- <view class="pack-more-information">
|
|
<text>{{ $t('page.orderDetail.more') }}</text>
|
|
<u-icon name="arrow-up"></u-icon>
|
|
</view> -->
|
|
</view>
|
|
<view class="contact-seller white">
|
|
<view @click="toServer()" class="box">
|
|
<img src="../../static/orderDetail/server@3x.png" alt="" />
|
|
<text>{{ $t('page.orderDetail.contact-seller') }}</text>
|
|
</view>
|
|
</view>
|
|
<view class=" product-list">
|
|
<productList :list="list"></productList>
|
|
</view>
|
|
<view v-if="productList.state != '0' && productList.state != '4'" class="order-detail-bottom">
|
|
<view v-if="productList.state == '3'" @click="deleteOrder(productList)" class="btn">
|
|
{{ $t('page.orderDetail.delete-order') }}
|
|
</view>
|
|
<view v-if="showRepurchase(productList.state)" @click="toRepurchase()" class="btn repurchaseBtn">
|
|
{{ $t('page.orderDetail.repurchase') }}
|
|
</view>
|
|
</view>
|
|
<orderPanel :open.sync="orderPanenOpen" @definiteExecution="definiteExecution" @closePanel="closePanel"
|
|
:title="panelTitle" :desc="panelDesc" :num="panelNum" :url="imageUrl"></orderPanel>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import productList from '@/components/product/productList.vue'
|
|
import orderProductList from '@/components/order-product/orderProductList.vue'
|
|
import orderPanel from '../../components/order-panel/orderPanel.vue';
|
|
export default {
|
|
components: {
|
|
orderProductList,
|
|
productList,
|
|
orderPanel
|
|
},
|
|
data() {
|
|
return {
|
|
classifyList: [
|
|
this.$t('page.order.pendingPayment'),
|
|
this.$t('page.order.pendingShipment'),
|
|
this.$t('page.order.pendingReceipt'),
|
|
this.$t('page.order.completed')
|
|
],
|
|
//商品数据
|
|
productList: {},
|
|
orderPanenOpen: false,
|
|
panelTitle: '',
|
|
panelDesc: '',
|
|
panelNum: '',
|
|
list: [],
|
|
imageUrl : '',
|
|
queryParams: {
|
|
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getorderDetail();
|
|
this.getProduct();
|
|
},
|
|
methods: {
|
|
getorderDetail() { //获取订单详情
|
|
this.request('getOrderOne', {}, {
|
|
id: this.$route.query.id,
|
|
}).then(res => {
|
|
this.productList = res.result
|
|
})
|
|
},
|
|
copy(e) {
|
|
uni.setClipboardData({
|
|
data: e + '',
|
|
success: () => {
|
|
uni.showToast({
|
|
title: this.$t('success-operation'),
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
leftClick() {
|
|
uni.switchTab({
|
|
url: '/pages/order/order'
|
|
})
|
|
},
|
|
toRepurchase() {
|
|
uni.navigateTo({
|
|
url: '/pages/repurchase/repurchase?id=' + this.$route.query.id
|
|
})
|
|
},
|
|
closePanel() {
|
|
this.orderPanenOpen = false;
|
|
},
|
|
definiteExecution() {
|
|
this.$MyToast("操作成功!", {
|
|
title: this.$t('myToactTitle'),
|
|
icon: true //是否开启icon
|
|
})
|
|
this.orderPanenOpen = false;
|
|
this.leftClick();
|
|
},
|
|
deleteOrder(item) { //删除订单
|
|
this.panelTitle = this.$t('page.orderDetail.delete-order-title')
|
|
this.panelDesc = this.$t('page.orderDetail.delete-order-desc')
|
|
this.panelNum = this.$t('page.orderDetail.delete-product-num');
|
|
this.imageUrl = item.image
|
|
this.orderPanenOpen = true;
|
|
},
|
|
getProduct() { //获取商品列表
|
|
this.request('getShopPage', {}, {
|
|
"pageSize": 10,
|
|
"currentPage": 1
|
|
})
|
|
.then(res => {
|
|
this.list = parseList(res.result.records);
|
|
})
|
|
},
|
|
showRepurchase(state) { //是否显示回购按钮
|
|
return state != '4' && state == '1' || state == '2' || state == '3'
|
|
},
|
|
toServer(){ //找客服
|
|
uni.navigateTo({
|
|
url: `/pages/login/contactCustomerService?title=${this.$t('page.orderDetail.contact-seller')}&url=/pages/orderDetail/orderDetail&id=` + this.$route.query.id
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.order-detail {
|
|
padding-bottom: 100rpx;
|
|
|
|
.inside-margin {
|
|
padding: 10px;
|
|
}
|
|
|
|
.white {
|
|
background: white;
|
|
}
|
|
|
|
.in-block {
|
|
display: inline-block;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 56px;
|
|
padding: 25px 10px;
|
|
|
|
img,
|
|
.u-icon {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
|
|
.user-base-info {
|
|
width: calc(100% - 60rpx);
|
|
padding-left: 10px;
|
|
font-size: 24rpx;
|
|
|
|
text {
|
|
margin: 0px 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-info {
|
|
margin-top: 10px;
|
|
|
|
.order-info-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: white;
|
|
font-size: 28rpx;
|
|
|
|
.merchant {
|
|
display: flex;
|
|
}
|
|
|
|
.order-status {
|
|
color: #ED762F;
|
|
}
|
|
}
|
|
|
|
.product-list {
|
|
padding: 0px 5px;
|
|
}
|
|
|
|
.unknown {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 24rpx;
|
|
|
|
.unknown-price {
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
.account-payable,
|
|
.order-number,
|
|
.receiving-information,
|
|
.transaction-number,
|
|
.create-time,
|
|
.closing-time {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 12px 10px;
|
|
|
|
>text,
|
|
>view {
|
|
width: 77%;
|
|
font-size: 26rpx;
|
|
|
|
&:nth-child(1) {
|
|
width: 23%;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
text-align: right;
|
|
color: #888;
|
|
}
|
|
}
|
|
|
|
.account-payable-title {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.number {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.copy {
|
|
margin-left: 5px;
|
|
border-left: 1px solid #ccc;
|
|
padding-left: 5px;
|
|
}
|
|
}
|
|
|
|
.account-payable-price {
|
|
display: flex;
|
|
|
|
.money-symbol {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.num {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 35rpx;
|
|
color: #E01717;
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pack-more-information {
|
|
display: flex;
|
|
padding: 5px 10px;
|
|
font-size: 25rpx;
|
|
}
|
|
}
|
|
|
|
.contact-seller {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 15px 10px;
|
|
margin-top: 15px;
|
|
font-size: 26rpx;
|
|
|
|
img {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
vertical-align: middle;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
.order-detail-bottom {
|
|
position: fixed;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 100rpx;
|
|
background: white;
|
|
width: 100%;
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 70rpx;
|
|
border-radius: 35rpx;
|
|
padding: 0px 50rpx;
|
|
border: 1px solid #ccc;
|
|
margin: 0px 5px;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.repurchaseBtn {
|
|
border: 1px solid #ED762F;
|
|
color: #ED762F;
|
|
}
|
|
}
|
|
}
|
|
</style>
|