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/components/Operation.vue

112 lines
2.7 KiB

<!--
* @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>