192 lines
3.4 KiB
Vue
192 lines
3.4 KiB
Vue
<template>
|
||
<view class="app">
|
||
<view class="content">
|
||
<view class="item">退款类型
|
||
<span>我要退货退款</span>
|
||
</view>
|
||
<view class="item">退款原因
|
||
<span @tap='show=true'>请选择</span>
|
||
<image src="../../static/pic.png" mode=""></image>
|
||
</view>
|
||
<view class="priceinfo">退款金额
|
||
<view class="priceback">￥36.0
|
||
</view>
|
||
<view class="words">
|
||
已修改，最多 36.00，含发货邮费 0.00
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<view class="discribe">
|
||
<view class="voucher">补充描述和凭证</view>
|
||
<view class="supplement">
|
||
<input type="text" placeholder="补充描述，有助于商家更好的处理售后问题">
|
||
</view>
|
||
|
||
</view>
|
||
<view class="Submit" @tap="goafterdetail">提交</view>
|
||
<!-- 弹框 -->
|
||
<view class="frame">
|
||
<u-popup v-model="show" mode="bottom" length="45%" border-radius="30">
|
||
<view class="payment">
|
||
<span>请选择退款原因</span>
|
||
<view class="cancel" @tap="show = false">
|
||
<image src="../../static/gb.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="elderly count">不想要了
|
||
</view>
|
||
<view class="elderly count">拍错、不喜欢
|
||
</view>
|
||
<view class="elderly count">与商品不符
|
||
</view>
|
||
<view class="elderly count">质量问题
|
||
</view>
|
||
<view class="elderly">其他原因
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
goafterdetail() {
|
||
uni.navigateTo({
|
||
url: '/pages/After sales details/After sales details'
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.app {
|
||
padding: 3%;
|
||
|
||
.elderly {
|
||
width: 93%;
|
||
margin: 0 auto;
|
||
padding: 3%;
|
||
|
||
height: 80rpx;
|
||
font-size: 42rpx;
|
||
line-height: 40rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.count {
|
||
border-bottom: 1rpx solid #D8D4D4;
|
||
}
|
||
|
||
.payment {
|
||
width: 95%;
|
||
height: 115rpx;
|
||
font-size: 42rpx;
|
||
color: #000000;
|
||
line-height: 130rpx;
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
border-bottom: 1rpx solid #D8D4D4;
|
||
display: flex;
|
||
|
||
span {
|
||
margin-left: 30%;
|
||
}
|
||
|
||
.cancel {
|
||
margin-left: 20%;
|
||
|
||
image {
|
||
width: 31rpx;
|
||
height: 31rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.Submit {
|
||
width: 217rpx;
|
||
height: 68rpx;
|
||
background: #4C7BC9;
|
||
border-radius: 26rpx;
|
||
text-align: center;
|
||
line-height: 68rpx;
|
||
color: #FFFFFF;
|
||
margin-left: 65%;
|
||
margin-top: 45%;
|
||
}
|
||
|
||
.discribe {
|
||
margin-top: 3%;
|
||
width: 99%;
|
||
height: 342rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||
border-radius: 20rpx;
|
||
padding: 3%;
|
||
|
||
.supplement input {
|
||
margin-top: 3%;
|
||
margin-left: 5%;
|
||
font-size: 26rpx;
|
||
color: #BAB7B8;
|
||
line-height: 67rpx;
|
||
}
|
||
|
||
.voucher {
|
||
height: 70rpx;
|
||
border-bottom: 1rpx solid #D8D4D4;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
width: 99%;
|
||
height: 342rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||
border-radius: 20rpx;
|
||
margin: 0 auto;
|
||
line-height: 60rpx;
|
||
padding: 3%;
|
||
font-size: 30rpx;
|
||
|
||
.priceinfo {
|
||
.words {
|
||
font-size: 26rpx;
|
||
color: #BAB7B8;
|
||
}
|
||
|
||
.priceback {
|
||
font-size: 38rpx;
|
||
color: #D43953;
|
||
}
|
||
}
|
||
|
||
.item {
|
||
border-bottom: 1rpx solid #D8D4D4;
|
||
height: 70rpx;
|
||
|
||
image {
|
||
width: 16rpx;
|
||
height: 25rpx;
|
||
top: 3%;
|
||
margin-left: 5%;
|
||
}
|
||
|
||
span {
|
||
margin-left: 50%;
|
||
color: #BAB7B8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|