133 lines
2.8 KiB
Vue
133 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<!-- 取消订单弹窗 -->
|
||
|
|
<view class="">
|
||
|
|
<up-popup :show="showCancel" mode="bottom" :round="10" @close="close" catchtouchmove="preventD">
|
||
|
|
<view class="cancel">
|
||
|
|
<view class="cancel-title">订单取消</view>
|
||
|
|
<view class="tip">请选择取消订单原因</view>
|
||
|
|
<view class="cancel-list">
|
||
|
|
<view class="cancel-list-item" v-for="item in list" :key="item.id" @click="checked = item.id">
|
||
|
|
<text>{{item.name}}</text>
|
||
|
|
<span class="iconfont icon-checked" v-if="item.id === checked"></span>
|
||
|
|
<span class="iconfont icon-circle" v-else></span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="cancel-btn">
|
||
|
|
<view class="btn1" @click="close">暂不取消</view>
|
||
|
|
<view class="btn2" @click="cancelOrder">确定取消</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</up-popup>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { ref, reactive, toRefs } from 'vue'
|
||
|
|
import { showToast } from '../common.js'
|
||
|
|
import { Style } from '@/utils/list.js'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
showCancel: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setup(props, context) {
|
||
|
|
const data = reactive({
|
||
|
|
list: [
|
||
|
|
{ id: 0, name: '价格有点贵' },
|
||
|
|
{ id: 1, name: '规格/款式/数量拍错' },
|
||
|
|
{ id: 2, name: '收货地址拍错' },
|
||
|
|
{ id: 3, name: '暂时不需要了' },
|
||
|
|
{ id: 4, name: '其他' }
|
||
|
|
],
|
||
|
|
checked: '',
|
||
|
|
Color: uni.getStorageSync('theme_color'),
|
||
|
|
cartColor: Style[uni.getStorageSync('theme_index') * 1].cartColor
|
||
|
|
})
|
||
|
|
|
||
|
|
function change(e) {
|
||
|
|
console.log(e)
|
||
|
|
data.checked = e.detail
|
||
|
|
}
|
||
|
|
|
||
|
|
function cancelOrder() {
|
||
|
|
if (data.checked !== '') {
|
||
|
|
context.emit('cancelOrder', data.list[Number(data.checked)].name)
|
||
|
|
data.checked = ''
|
||
|
|
} else {
|
||
|
|
showToast('请选择取消订单原因')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function close() {
|
||
|
|
context.emit('close')
|
||
|
|
data.checked = ''
|
||
|
|
}
|
||
|
|
|
||
|
|
function preventD() {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
...toRefs(data),
|
||
|
|
close,
|
||
|
|
change,
|
||
|
|
cancelOrder,
|
||
|
|
preventD
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.cancel {
|
||
|
|
font-size: 28rpx;
|
||
|
|
padding: 30rpx 30rpx;
|
||
|
|
&-title {
|
||
|
|
text-align: center;
|
||
|
|
padding: 0 0 20rpx;
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
letter-spacing: 5rpx;
|
||
|
|
}
|
||
|
|
.tip {
|
||
|
|
color: #98989f;
|
||
|
|
padding: 20rpx 0;
|
||
|
|
}
|
||
|
|
&-list {
|
||
|
|
padding-bottom: 60rpx;
|
||
|
|
&-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 20rpx 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-btn {
|
||
|
|
display: flex;
|
||
|
|
.btn1,
|
||
|
|
.btn2 {
|
||
|
|
width: 50%;
|
||
|
|
height: 80rpx;
|
||
|
|
line-height: 80rpx;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.btn1 {
|
||
|
|
background-color: v-bind('cartColor');
|
||
|
|
border-radius: 40rpx 0px 0px 40rpx;
|
||
|
|
}
|
||
|
|
.btn2 {
|
||
|
|
background-color: v-bind('Color');
|
||
|
|
border-radius: 0rpx 40rpx 40rpx 0rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.icon-checked{
|
||
|
|
color: v-bind('Color');
|
||
|
|
}
|
||
|
|
</style>
|