323 lines
6.7 KiB
Vue
323 lines
6.7 KiB
Vue
<template>
|
||
<!-- 退款 -->
|
||
<view class="refund">
|
||
<view class="refundBox">
|
||
<view class="refundBoxA">
|
||
<image src="../../static/avatar.png"
|
||
style="width: 86rpx;height: 86rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;" mode=""></image>
|
||
<view>
|
||
【辣与不辣随心选】汉堡3选1MT19
|
||
</view>
|
||
</view>
|
||
<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 18rpx;"> </view>
|
||
<view class="refundBoxB">
|
||
<view>
|
||
退款数量
|
||
</view>
|
||
<view>
|
||
最多可退1张
|
||
</view>
|
||
<!-- 计步器 -->
|
||
<u-number-box class="Unumber" v-model="Unumbervalue" style="position: absolute;right: 20rpx;"
|
||
:disabled="true"></u-number-box>
|
||
</view>
|
||
<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 32rpx;"> </view>
|
||
<view class="refundBoxC">
|
||
<view>
|
||
退款金额
|
||
</view>
|
||
<view>
|
||
1-3 个工作日退还至原支付方，以实际退款金额为准
|
||
</view>
|
||
<view>$9.9</view>
|
||
</view>
|
||
<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 32rpx;"> </view>
|
||
<view class="refundBoxD">
|
||
<view>退款原因 <text style="color: #FF4C11;">*</text> </view>
|
||
<view class="as-input" @click="openFood">
|
||
<view class="placeholder" v-if="fruitName==undefined||fruitName==''">请至少选择一项</view>
|
||
<view class="as-content" v-else>{{fruitName}}</view>
|
||
<!-- <uni-icons type="forward" size="16" color="#c0c4cc" class="customer-icon"></uni-icons> -->
|
||
<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view style="width: 100%;height: 2rpx;background-color: #E6E6E6;margin-top: 32rpx;"> </view>
|
||
<view class="refundBoxE">
|
||
<view>退款说明 </view>
|
||
<textarea placeholder-style="font-size: 24rpx;color: #999999;" @input="sumfontnum" :value='tareaValue'
|
||
placeholder="请输入退款说明，我们将用心倾听你的任何不满" name="" id="" maxlength="200" cols="30" rows="10"
|
||
style="padding: 16rpx 26rpx;margin-top: 16rpx;border: solid 2rpx #999;border-radius: 18rpx 18rpx 18rpx 18rpx;"></textarea>
|
||
<view class="Unumberxz"><text>{{fontNum}}</text>/200</view>
|
||
</view>
|
||
</view>
|
||
<view class="buttonBox">
|
||
<button class="buttonStyle">
|
||
提交订单
|
||
</button>
|
||
</view>
|
||
<niceui-popup-select ref="showFruit" :columns="foods" :selectValue="fruitId" :is-search="false"
|
||
:option="{label:'name', value:'id'}" @confirm="confirmFruit"></niceui-popup-select>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
Unumbervalue: 1,
|
||
tareaValue: '',
|
||
fontNum: 0,
|
||
foods: [{
|
||
id: '1',
|
||
name: '计划有变没时间消费'
|
||
},
|
||
{
|
||
id: '2',
|
||
name: '买多了/买错了'
|
||
},
|
||
{
|
||
id: '3',
|
||
name: '担心安全问题（天气等）'
|
||
}, {
|
||
id: '3',
|
||
name: '担心安全问题（天气等）'
|
||
}, {
|
||
id: '3',
|
||
name: '担心安全问题（天气等）'
|
||
}, {
|
||
id: '3',
|
||
name: '担心安全问题（天气等）'
|
||
}, {
|
||
id: '3',
|
||
name: '担心安全问题（天气等）'
|
||
},
|
||
],
|
||
fruitId: [],
|
||
fruitName:''
|
||
}
|
||
},
|
||
methods: {
|
||
// 限制文本框字数
|
||
sumfontnum(e) {
|
||
console.log(e)
|
||
this.fontNum = e.detail.value.length
|
||
},
|
||
confirmFruit(value, data) {
|
||
this.fruitId = value
|
||
this.fruitName = data.map(it => it.name)
|
||
this.$refs.showFruit.closePopup()
|
||
},
|
||
|
||
openFood() {
|
||
this.$refs.showFruit.showPopup()
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.refundBox {
|
||
background-color: #fff;
|
||
padding: 32rpx 64rpx;
|
||
|
||
.refundBoxA {
|
||
.df(flex-start, stretch);
|
||
|
||
>view {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.refundBoxB {
|
||
position: relative;
|
||
|
||
>view:first-child {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
>view:nth-child(2) {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.Unumber {
|
||
|
||
// transform: translateY(-50%);
|
||
}
|
||
}
|
||
|
||
.refundBoxC {
|
||
position: relative;
|
||
|
||
>view:first-child {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
>view:nth-child(2) {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
>view:last-child {
|
||
position: absolute;
|
||
right: 0rpx;
|
||
top: 20rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #FF4C11;
|
||
}
|
||
}
|
||
|
||
.refundBoxD {
|
||
.df(space-between);
|
||
// margin-top: 32rpx;
|
||
padding-top: 32rpx;
|
||
|
||
>view:first-child {
|
||
.df;
|
||
width: 160rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
>view:last-child {
|
||
// .df();
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.refundBoxE {
|
||
margin-top: 32rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
position: relative;
|
||
|
||
.Unumberxz {
|
||
position: absolute;
|
||
right: 40rpx;
|
||
bottom: 14rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
|
||
>text {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.buttonBox {
|
||
width: 100%;
|
||
height: 136rpx;
|
||
background: #FFFFFF;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
// .df(center,center);
|
||
|
||
.buttonStyle {
|
||
margin-left: 50%;
|
||
margin-top: 40rpx;
|
||
transform: translateX(-50%);
|
||
width: 712rpx;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
text-align: center;
|
||
background: linear-gradient(110deg, #F1A666 0%, #FF4C11 100%);
|
||
border-radius: 48rpx 48rpx 48rpx 48rpx;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.df(@start: flex-start, @position: center) {
|
||
// @start: flex-start(默认) space-between(两端对齐) space-around(间隔相等)
|
||
// @position:stretch(默认) center(垂直居中)
|
||
display: flex;
|
||
align-items: @position;
|
||
justify-content: @start;
|
||
}
|
||
</style>
|
||
<style>
|
||
/deep/ .u-number-box {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 30%;
|
||
}
|
||
|
||
radio-group,
|
||
checkbox-group {
|
||
width: 92%;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
background-color: #f7f7f7;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
|
||
}
|
||
|
||
.uni-title {
|
||
font-size: 33rpx;
|
||
font-weight: bold;
|
||
padding: 20rpx 20rpx;
|
||
}
|
||
|
||
.uni-list-cell {
|
||
background-color: #fff;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 20rpx;
|
||
|
||
.uni-list-cell-left {
|
||
font-size: 35rpx;
|
||
}
|
||
}
|
||
|
||
.uni-list-cell-db {
|
||
flex: 1
|
||
}
|
||
|
||
.as-input {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
.customer-icon {
|
||
padding: 0 0 0 5rpx;
|
||
}
|
||
|
||
.placeholder {
|
||
font-size: 33rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.as-content {
|
||
color: #333;
|
||
font-size: 33rpx;
|
||
}
|
||
}
|
||
</style> |