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.
shop-app/pages/order/detail/index.vue

242 lines
5.9 KiB

<!--
* @Author: ch
* @Date: 2022-03-31 14:26:09
* @LastEditors: ch
* @LastEditTime: 2022-04-11 11:28:36
* @Description: file content
-->
<template>
<view>
<StatusTips :orderInfo="orderInfo" @close="timerCloseOrder"></StatusTips>
<UiWhiteBox>
<UiGoodsInfo v-for="(item, index) in orderInfo.products" :data="item" :key="index">
<template slot="operation">
<UiButton>申请售后</UiButton>
</template>
</UiGoodsInfo>
</UiWhiteBox>
<UiWhiteBox>
<u-cell class="address" title="是的发生的" label="陈先生 190****2342"
:border="false" isLink @click="$Router.push('/addressList')">
<image class="address--icon" slot="icon" src="@/static/order/dw.png" />
</u-cell>
</UiWhiteBox>
<UiWhiteBox class="cellBox">
<view class="cell">
<text class="cell--title">订单编号:</text>
<text class="cell--value">{{orderInfo.orderNo}}</text>
</view>
<view class="cell">
<text class="cell--title">订单时间:</text>
<text class="cell--value">{{orderInfo.submitTime}}</text>
</view>
<view class="cell">
<text class="cell--title">支付方式:</text>
<text class="cell--value">{{orderInfo.payTypeDesc}}</text>
</view>
<view class="cell">
<text class="cell--title">买家留言:</text>
<text class="cell--value">{{orderInfo.userMessage}}</text>
</view>
</UiWhiteBox>
<UiWhiteBox class="cellBox">
<view class="cell">
<text class="cell--title">商品总额:</text>
<text class="cell--value">{{orderInfo.totalAmount}}</text>
</view>
<view class="cell">
<text class="cell--title">运费:</text>
<text class="cell--value">{{orderInfo.shippingAmount}}</text>
</view>
</UiWhiteBox>
<view class="footer">
<UiButton>查看物流</UiButton>
<UiButton class="footer--btn" @click="cancelShow = true">取消订单</UiButton>
<UiButton class="footer--btn" type="gradual">去支付</UiButton>
</view>
<u-popup :show="cancelShow" @close="closeCancel" round="16rpx" closeable>
<view class="cancel--title">取消订单原因</view>
<radio-group class="cancel--cell" @change="cancelChange">
<UiCell title="我不想买了">
<radio slot="right-icon" value="1" class="cancel--radio" color="$color-yellow3"/>
</UiCell>
<UiCell title="地址信息填写错误">
<radio slot="right-icon" value="2" class="cancel--radio" color="$color-yellow3"/>
</UiCell>
<UiCell title="商品降价">
<radio slot="right-icon" value="3" class="cancel--radio" color="$color-yellow3"/>
</UiCell>
<UiCell title="商品无货">
<radio slot="right-icon" value="4" class="cancel--radio" color="$color-yellow3"/>
</UiCell>
<UiCell title="其他">
<radio slot="right-icon" value="5" class="cancel--radio" color="$color-yellow3"/>
</UiCell>
</radio-group>
<view class="cancel--footer">
<UiButton @click="closeCancel"></UiButton>
<UiButton type="gradual" :disabed="cancelValue == 0">确认取消</UiButton>
</view>
</u-popup>
</view>
</template>
<script>
import UiPageHeader from '@/components/UiPageHeader.vue'
import UiGoodsInfo from '../../../components/UiGoodsInfo.vue'
import UiWhiteBox from '../../../components/UiWhiteBox.vue'
import {ApiGetOrderDetail, ApiPutCancelOrder} from '@/common/api/order'
import UiButton from '../../../components/UiButton.vue'
import StatusTips from './components/StatusTips.vue'
import UiCell from '../../../components/UiCell.vue'
export default {
components: { UiPageHeader, UiGoodsInfo, UiWhiteBox, UiButton, StatusTips, UiCell },
data(){
return {
orderInfo : {
products:[]
},
// 取消订单弹窗
cancelShow : false,
cancelValue : 0
}
},
onLoad(){
this.getOrderInfo();
},
methods : {
/**
* 获取订单最新信息
*/
async getOrderInfo(){
const {error, result} = await ApiGetOrderDetail(this.$Route.query.id);
if(error){
uni.$u.totast(error.message);
return false;
}
this.orderInfo = {...result, orderStatus : 7};
},
/**
* 超时自动关闭订单
*/
timerCloseOrder(){
this.orderInfo = {...this.orderInfo, orderStatus : 2, closeReason:'超时未支付'};
// this.getOrderInfo();
},
closeCancel(){
this.cancelShow = false;
this.cancelValue = 0;
},
cancelChange(val){
this.cancelValue = val;
},
async cancelOrder(){
const {error, result} = await ApiPutCancelOrder({
cancelReasonType : this.cancelValue,
orderId : this.$Route.query.id
});
if(error){
uni.$u.totast(error.message);
return false;
}
// 取消成功,跳到订单关闭页
}
}
}
</script>
<style lang="scss" scoped>
page{
// background: linear-gradient(180deg, #FDF9F5 0%, rgba(254, 253, 252, 0) 50%) $color-grey1;
background: $color-grey1;
padding-bottom: 138rpx;
}
.header{
background: none;
}
.address{
// background: $color-grey0;
&--icon{
width: 28rpx;
height: 34rpx;
margin-right: 30rpx;
}
}
.status{
padding: 30rpx 60rpx 0;
position: relative;
&--icon{
width: 100rpx;
height: 100rpx;
position: absolute;
right: 60rpx;
top: 10rpx;
}
&--name{
font-size: 36rpx;
margin-bottom: 20rpx;
}
&--desc{
font-size: $font-size-base;
color: $color-grey4;
margin-bottom: 48rpx;
}
}
.cellBox{
padding: 30rpx;
}
.cell{
height: 56rpx;
line-height: 56rpx;
display: flex;
justify-content: space-between;
&--value{
font-size: $font-size-sm;
}
&--title{
color: $color-grey4;
font-size: $font-size-sm;
}
}
.footer{
height: 138rpx;
padding: 0 30rpx;
background: $color-grey0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: flex-end;
align-items: center;
&--btn{
display: block;
margin: 0 0 0 30rpx;
}
}
.cancel{
&--title{
text-align: center;
font-size: 34rpx;
margin: 40rpx 0 30rpx;
}
&--cell{
padding: 0 40rpx;
}
&--footer{
padding: 68rpx 40rpx;
display: flex;
justify-content: space-between;
}
&--radio{
transform: scale(60%);
}
}
</style>