219 lines
4.3 KiB
Vue
219 lines
4.3 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="处理反馈" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
|
title-size='36' height='50' id="navbar">
|
|
</u-navbar>
|
|
<view class="name">
|
|
处理方式
|
|
</view>
|
|
<view class="xuanze">
|
|
<view class="renke" @click="btntab(1)">
|
|
<view class="lt">
|
|
<view class="one">认可并在线退款</view>
|
|
<view class="two">将从账户余额中扣除指定金额原路返还用户</view>
|
|
</view>
|
|
<view class="rt">
|
|
<image v-if="tabindex == 1" src="https://api.ccttiot.com/smartmeter/img/static/uqxbvIOWrlXfwrKgEd5g" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="burenke" @click="btntab(2)">
|
|
<view class="lt">
|
|
<view class="one">不认可，驳回反馈</view>
|
|
</view>
|
|
<view class="rt">
|
|
<image v-if="tabindex == 2" src="https://api.ccttiot.com/smartmeter/img/static/uqxbvIOWrlXfwrKgEd5g" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="name" v-if="tabindex == 1">
|
|
处理方式
|
|
</view>
|
|
<view class="jine" v-if="tabindex == 1">
|
|
<view class="zongjia">
|
|
<view class="">
|
|
可退款金额
|
|
</view>
|
|
<view class="">
|
|
<input type="text" placeholder="50" :disabled="true" /> 元
|
|
</view>
|
|
</view>
|
|
<view class="zongjia" style="border-top: 1px solid #D8D8D8;">
|
|
<view class="">
|
|
退款金额
|
|
</view>
|
|
<view class="">
|
|
<input type="text" placeholder="请输入金额" /> 元
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tishi">
|
|
温馨提示：退款不包含押金，使用储值卡下单 时退还储值卡余额。
|
|
</view>
|
|
<view class="name">
|
|
补充描述（选填）
|
|
</view>
|
|
<view class="buchong">
|
|
<textarea value="" placeholder="请输入补充描述，将会反馈给用户" />
|
|
</view>
|
|
|
|
<view class="anniu" @click="btncl">
|
|
<view class="but">
|
|
确定处理
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
tabindex:0
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
// 点击确定处理
|
|
btncl(){
|
|
|
|
},
|
|
// 点击选择处理方式
|
|
btntab(num){
|
|
this.tabindex = num
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
/deep/ .u-iconfont,
|
|
/deep/ .u-title{
|
|
padding-bottom: 20rpx;
|
|
}
|
|
.anniu{
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 750rpx;
|
|
height: 152rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
padding-top: 24rpx;
|
|
box-sizing: border-box;
|
|
.but{
|
|
width: 680rpx;
|
|
height: 104rpx;
|
|
background: #48893B;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 104rpx;
|
|
margin: auto;
|
|
border-radius: 30rpx;
|
|
}
|
|
}
|
|
.buchong{
|
|
width: 750rpx;
|
|
height: 224rpx;
|
|
overflow: scroll;
|
|
background: #FFFFFF;
|
|
margin-top: 34rpx;
|
|
padding: 0 36rpx;
|
|
padding-top: 34rpx;
|
|
padding-bottom: 30rpx;
|
|
box-sizing: border-box;
|
|
textarea{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.jine{
|
|
width: 750rpx;
|
|
height: 200rpx;
|
|
background: #FFFFFF;
|
|
margin-top: 34rpx;
|
|
.zongjia{
|
|
padding: 0 36rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
view{
|
|
display: flex;
|
|
align-items: center;
|
|
input{
|
|
text-align: right;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.xuanze{
|
|
width: 750rpx;
|
|
height: 254rpx;
|
|
background: #FFFFFF;
|
|
margin-top: 34rpx;
|
|
.burenke{
|
|
height: 100rpx !important;
|
|
line-height: 100rpx !important;
|
|
border-top: 1rpx solid #D8D8D8;
|
|
}
|
|
.burenke,
|
|
.renke{
|
|
width: 100%;
|
|
height: 154rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 36rpx;
|
|
box-sizing: border-box;
|
|
.lt{
|
|
.one{
|
|
font-size: 30rpx;
|
|
color: #3D3D3D;
|
|
}
|
|
.two{
|
|
font-size: 26rpx;
|
|
color: #7C7C7C;
|
|
margin-top: 16rpx;
|
|
}
|
|
}
|
|
.rt{
|
|
image{
|
|
width: 60rpx;
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.name{
|
|
font-size: 30rpx;
|
|
color: #3D3D3D;
|
|
margin-top: 36rpx;
|
|
padding: 0 36rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.tishi{
|
|
margin-top: 44rpx;
|
|
padding: 0 50rpx;
|
|
box-sizing: border-box;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #FF1818;
|
|
}
|
|
page {
|
|
background: #F6F6F6;
|
|
}
|
|
|
|
|
|
</style> |