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.
112 lines
2.7 KiB
112 lines
2.7 KiB
3 years ago
|
<!--
|
||
|
|
* @Author: ch
|
||
|
|
* @Date: 2022-04-15 17:46:10
|
||
|
|
* @LastEditors: ch
|
||
|
|
* @LastEditTime: 2022-04-15 18:02:18
|
||
|
|
* @Description: file content
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<view class="footer">
|
||
|
|
<UiButton>查看物流</UiButton>
|
||
|
|
<UiButton class="footer--btn" @click="cancelShow = true">取消订单</UiButton>
|
||
|
|
<UiButton class="footer--btn" type="gradual">去支付</UiButton>
|
||
|
|
<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="#FF875B"/>
|
||
|
|
</UiCell>
|
||
|
|
<UiCell title="地址信息填写错误">
|
||
|
|
<radio slot="right-icon" value="2" class="cancel--radio" color="#FF875B"/>
|
||
|
|
</UiCell>
|
||
|
|
<UiCell title="商品降价">
|
||
|
|
<radio slot="right-icon" value="3" class="cancel--radio" color="#FF875B"/>
|
||
|
|
</UiCell>
|
||
|
|
<UiCell title="商品无货">
|
||
|
|
<radio slot="right-icon" value="4" class="cancel--radio" color="#FF875B"/>
|
||
|
|
</UiCell>
|
||
|
|
<UiCell title="其他">
|
||
|
|
<radio slot="right-icon" value="5" class="cancel--radio" color="#FF875B"/>
|
||
|
|
</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 UiButton from '@/components/UiButton.vue'
|
||
|
|
import UiCell from '@/components/UiCell.vue'
|
||
|
|
import {ApiPutCancelOrder} from '@/common/api/order'
|
||
|
|
export default {
|
||
|
|
components: { UiButton, UiCell },
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
// 取消订单弹窗
|
||
|
|
cancelShow : false,
|
||
|
|
cancelValue : 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods : {
|
||
|
|
|
||
|
|
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>
|
||
|
|
|
||
|
|
.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>
|