applyRefund.vue
3.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<template>
<view class="apply_refund">
<view class="box">
<view class="arenaInfo">
<view class="detail">预约详情</view>
<view class="info">场馆信息</view>
<ArenaCard />
</view>
<u-cell-group :border="false">
<u-cell :border="false" v-for="(item, index) in orderInfo" :key="index" :titleStyle="{color: '#666', fontSize: '24rpx'}" :title="item.title">
<text slot="right-icon" style="font-size: 24rpx;color: #333;">{{ item.info }}</text>
</u-cell>
</u-cell-group>
</view>
<!-- 退款原因 -->
<view class="user_intro">
<view class="intro">退款原因：</view>
<u--textarea v-model="introStr" :placeholder="defaultTip" placeholderClass height="188rpx" count ></u--textarea>
</view>
<!-- 联系方式 -->
<view class="user_intro">
<view class="intro">联系方式：</view>
<u--form :model="form" ref="uForm" :labelStyle="{color: '#666', fontSize: '24rpx'}">
<u-form-item label="联系人:" prop="name">
<u-input v-model="form.name" placeholder="请输入您的姓名" :customStyle="{padding: '10rpx', backgroundColor: '#F6F6F6'}" />
</u-form-item>
<u-form-item label="手机号:" prop="phone">
<u-input v-model="form.phone" placeholder="请输入正确的手机号码，便于商家联系" :customStyle="{padding: '10rpx', backgroundColor: '#F6F6F6'}" />
</u-form-item>
</u--form>
</view>
<!-- 提交申请 -->
<view class="footer">
<MyButton title="提交申请" />
</view>
</view>
</template>
<script>
import MyButton from '@/components/myButton.vue'
import ArenaCard from '@/pages/home/components/arenaCard.vue'
export default {
components: { ArenaCard, MyButton },
data() {
return {
form: {
name: '',
phone: ''
},
introStr: '',
defaultTip: '请正确输入退款原因，以便于商家审核，小于5小时退款订单，有可能对商家造成损失，可能无法进行退款。请尽可能的与商家进行友好协商',
orderInfo: [
{ title: '订单信息', info: '' },
{ title: '订单编号', info: '000026' },
{ title: '预约时间', info: '2022-12-26 14:00-16:66' },
{ title: '支付金额', info: '¥ 268' },
{ title: '支付流水号', info: '123456' }
]
};
}
}
</script>
<style lang="scss" scoped>
// :deep(.textarea-placeholder) {
// font-size: 22rpx;
// color: #999;
// line-height: 40rpx;
// }
// :deep(.input-placeholder) {
// font-size: 24rpx;
// color: #999;
// }
.apply_refund{
min-height: 100vh;
padding: 18rpx 30rpx;
background-color: #F6F6F6;
box-sizing: border-box;
padding-bottom: 10rpx;
.box{
padding: 24rpx 0;
background: #FFFFFF;
border-radius: 12rpx;
}
.arenaInfo{
font-size: 28rpx;
color: #333;
line-height: 36rpx;
padding-bottom: 10rpx;
border-bottom: 2rpx solid #D8D8D8;
.detail{
padding: 0 30rpx;
}
.info{
padding: 0 30rpx;
font-size: 24rpx;
color: #999;
line-height: 32rpx;
margin: 16rpx 0 8rpx 0;
}
}
.user_intro{
margin-top: 24rpx;
padding: 28rpx;
background: #FFFFFF;
border-radius: 12rpx;
.intro{
font-size: 26rpx;
color: #333;
margin-bottom: 24rpx;
line-height: 36rpx;
}
}
.footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 16rpx 30rpx;
}
}
</style>