7 changed files with 330 additions and 31 deletions
-
13src/pages/order/list.vue
-
20src/subpackage/groupon/components/site/table.vue
-
6src/subpackage/groupon/pages/confirm_order/venue.vue
-
6src/subpackage/order/api/index.js
-
163src/subpackage/order/components/detail/cancel_modal.vue
-
10src/subpackage/order/components/detail/contact.vue
-
139src/subpackage/order/pages/detail.vue
@ -1,5 +1,11 @@ |
|||||
import server from '@/api/server'; |
import server from '@/api/server'; |
||||
|
|
||||
export const orderGet = params => server.post({ url: '/stadium/order/get', ...params }); // 预约订单详情
|
export const orderGet = params => server.post({ url: '/stadium/order/get', ...params }); // 预约订单详情
|
||||
|
export const cancelCheck = params => server.post({ url: '/stadium/order/cancelCheck', ...params }); // 检测预约订单是否可以取消
|
||||
|
export const orderCancel = params => server.post({ url: '/stadium/order/cancel', ...params }); // A我的预约订单-取消预约订单 申请退款
|
||||
|
export const getCreateOrderProxyData = params => server.post({ url: '/pay/douyin/getCreateOrderProxyData', ...params }); // 获取抖音退款信息
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
@ -0,0 +1,163 @@ |
|||||
|
<script setup> |
||||
|
import { onLoad } from '@dcloudio/uni-app'; |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
import { showNone, showModal } from "@/utils/polish"; |
||||
|
const emits = defineEmits([ 'click:confirm' ]); |
||||
|
const reasonList = [ |
||||
|
{txt: '计划有变'}, |
||||
|
{txt: '订单信息有误,重新预定'}, |
||||
|
{txt: '其他原因'}, |
||||
|
]; |
||||
|
const curTxt = ref(''); |
||||
|
const isShow = ref(false); |
||||
|
const successFunc = ref(null); |
||||
|
onLoad(() => { |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
function init(data){ |
||||
|
curTxt.value = ''; |
||||
|
isShow.value = true; |
||||
|
successFunc.value = data?.successFunc || null; |
||||
|
} |
||||
|
|
||||
|
function confirmBtn(){ |
||||
|
if(!curTxt.value)return showNone('请选择取消预约原因'); |
||||
|
emits('click:confirm', curTxt.value); |
||||
|
if(successFunc.value && typeof successFunc.value === 'function'){ |
||||
|
successFunc.value(curTxt.value); |
||||
|
} |
||||
|
isShow.value = false; |
||||
|
} |
||||
|
|
||||
|
defineExpose({ init }); |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<view class="vod-cancel-modal" v-show="isShow"> |
||||
|
<view class="vcm-box"> |
||||
|
<view class="vb-close" @click="isShow = false"></view> |
||||
|
<view class="vb-title">取消预约原因</view> |
||||
|
<view class="vb-list"> |
||||
|
<view |
||||
|
:class="['vl-item', curTxt == e.txt?'active':'']" |
||||
|
v-for="(e,i) in reasonList" |
||||
|
:key="i" |
||||
|
@click="curTxt = e.txt">{{ e.txt }}</view> |
||||
|
</view> |
||||
|
<view class="vb-btn" hover-class="hover" @click="confirmBtn">确认</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.vod-cancel-modal{ |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: rgba(0,0,0,.5); |
||||
|
.vcm-box{ |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%,-50%); |
||||
|
padding-top: 78upx; |
||||
|
padding-bottom: 78upx; |
||||
|
width: 620upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
@mixin closeIcon($width,$height,$color) { |
||||
|
transform: rotateZ(45deg); |
||||
|
&::before{ |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%,-50%); |
||||
|
width: $width; |
||||
|
height: $height; |
||||
|
background-color: $color; |
||||
|
border-radius: $height; |
||||
|
} |
||||
|
&::after{ |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%,-50%); |
||||
|
width: $height; |
||||
|
height: $width; |
||||
|
background-color: $color; |
||||
|
border-radius: $height; |
||||
|
} |
||||
|
} |
||||
|
.vb-close{ |
||||
|
position: absolute; |
||||
|
right: 30upx; |
||||
|
top: 30upx; |
||||
|
width: 40upx; |
||||
|
height: 40upx; |
||||
|
@include closeIcon(4upx,40upx,#9a9a9d); |
||||
|
} |
||||
|
.vb-title{ |
||||
|
margin-bottom: 42upx; |
||||
|
line-height: 44upx; |
||||
|
text-align: center; |
||||
|
font-size: 32upx; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
.vb-list{ |
||||
|
margin-bottom: 50upx; |
||||
|
padding: 0 26upx; |
||||
|
.vl-item{ |
||||
|
padding: 0 32upx; |
||||
|
border-radius: 10upx; |
||||
|
border: 2upx solid #F2F2F7; |
||||
|
background-color: #f2f2f7; |
||||
|
@include flcw(28upx, 104upx, #9a9a9d); |
||||
|
@include tHide; |
||||
|
&:not(:last-child){ |
||||
|
margin-bottom: 16upx; |
||||
|
} |
||||
|
&.active{ |
||||
|
border-color: $mColor; |
||||
|
background-color: rgba(0,152,116,0.2); |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
@mixin hover { |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
&::after{ |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
z-index: 2; |
||||
|
background-color: rgba(0,0,0,.1); |
||||
|
} |
||||
|
} |
||||
|
.vb-btn{ |
||||
|
margin: 0 auto; |
||||
|
width: 240upx; |
||||
|
text-align: center; |
||||
|
border-radius: 44upx; |
||||
|
background-color: $mColor; |
||||
|
@include flcw(32upx, 88upx, #fff); |
||||
|
&.hover{ |
||||
|
@include hover; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue