188 lines
4.0 KiB
Vue
188 lines
4.0 KiB
Vue
<template>
|
|
<view class="pages">
|
|
<u-navbar title="故障申报" :border-bottom="false" :background="bgc" title-color='#262B37'
|
|
height='44'></u-navbar>
|
|
|
|
<view class="problem">
|
|
<view class="title">
|
|
问题描述 <text style="font-size: 36rpx; color: red; vertical-align: top;margin-left: 32rpx;">✲</text>
|
|
</view>
|
|
<view class="input-container">
|
|
<view class="placeholder" v-if="!textValue">请详细描述您的问题或建议</view>
|
|
<textarea class="custom-textarea" v-model="textValue" @focus="hidePlaceholder" :maxlength="500" style="border: none;"
|
|
@input="updateWordCount" @blur="showPlaceholder"></textarea>
|
|
<text class="word-count">{{ currentCount }}/500</text>
|
|
</view>
|
|
</view>
|
|
<view class="problem">
|
|
<view class="title">
|
|
联系方式
|
|
</view>
|
|
<input type="text" v-model="contact" placeholder="请留下手机号，以便我们回复您"/>
|
|
</view>
|
|
|
|
<view class="btn" @click="sub()">提交</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "",
|
|
},
|
|
textValue: '',
|
|
currentCount: 0,
|
|
cutidx: -1,
|
|
imglist: [],
|
|
token: '',
|
|
contact: '',
|
|
picdomain:'',
|
|
userId:'',
|
|
orderobj:{}
|
|
}
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
onLoad(option) {
|
|
this.orderobj = JSON.parse(option.obj)
|
|
},
|
|
methods: {
|
|
hidePlaceholder() {
|
|
this.placeholderVisible = false
|
|
},
|
|
showPlaceholder() {
|
|
if (!this.textValue) {
|
|
this.placeholderVisible = true
|
|
}
|
|
},
|
|
updateWordCount() {
|
|
this.currentCount = this.textValue.trim().replace(/\s+/g, '').length
|
|
},
|
|
sub() {
|
|
if (this.textValue == '') {
|
|
uni.showToast({
|
|
title: '请输入问题描述',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
} else if (this.contact == '') {
|
|
uni.showToast({
|
|
title: '请输入联系方式',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
} else {
|
|
let data = {
|
|
content: this.textValue,
|
|
mobile: this.contact,
|
|
deviceNo:this.orderobj.deviceNo,
|
|
orderNo:this.orderobj.billNo,
|
|
orderId:this.orderobj.billId
|
|
}
|
|
this.$u.post("/app/abnormal/submit", data).then((res) => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateBack()
|
|
},1500)
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.btn {
|
|
width: 590rpx;
|
|
height: 84rpx;
|
|
background: #8883F0;
|
|
filter: blur(0px);
|
|
color: #fff;
|
|
font-size: 36rpx;
|
|
line-height: 84rpx;
|
|
text-align: center;
|
|
border-radius: 50rpx;
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 80rpx;
|
|
}
|
|
page {
|
|
background: linear-gradient( 180deg, #8883F0 0%, rgba(204,229,255,0) 100%);
|
|
}
|
|
.pages {
|
|
padding: 0 66rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.problem {
|
|
margin-top: 40rpx;
|
|
.title {
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #3D3D3D;
|
|
line-height: 50rpx;
|
|
}
|
|
input{
|
|
width: 612rpx;
|
|
height: 80rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(61,61,61,0.1);
|
|
line-height: 80rpx;
|
|
padding-left: 30rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 32rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
.input-container {
|
|
position: relative;
|
|
width: 612rpx;
|
|
height: 248rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
|
border-radius: 20rpx;
|
|
margin-top: 40rpx;
|
|
overflow: hidden;
|
|
padding-right: 38rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.placeholder {
|
|
position: absolute;
|
|
top: 18rpx;
|
|
left: 38rpx;
|
|
color: #999;
|
|
pointer-events: none;
|
|
}
|
|
.custom-textarea {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: 18rpx;
|
|
padding-left: 38rpx;
|
|
padding-bottom: 54rpx;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
border: 1px solid #ccc;
|
|
}
|
|
.word-count {
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
</style> |