景徳镇旅游微信小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

165 lines
3.9 KiB

<template>
<!-- 我要帮助 -->
<view class="help">
<navbar title="我要帮助" leftClick @leftClick="$utils.navigateBack" />
<view class="help-box">
<view>
<view class="help-issue">
<text>问题和意见</text>
<text style="color: #BD3624;">*</text>
</view>
<uv-textarea v-model="value" :count="true" border="none" height="400"
placeholder="请把游览中发现的问题提交给我们,感谢您的参与(必填)" :text-style="{color:'#BCB7B7',fontSize:'28rpx'}" />
</view>
<view>
<view class="help-issue">
<text>问题截图</text>
<text style="color: #BD3624;">*</text>
</view>
<view class="help-screenshot">
<uv-upload :fileList="fileList1" accept="all " name="1" multiple :maxCount="3" width="220"
height="220" multiple @afterRead="afterRead" @delete="deletePic">
<image src="../static/help/uploading.png" mode="aspectFit"
style="width: 220rpx;height: 220rpx;" />
</uv-upload>
</view>
</view>
<view>
<view class="help-issue">
<text>联系方式</text>
<text style="color: #BD3624;">*</text>
</view>
<uv-input placeholder="请输入联系方式" fontSize="24rpx" border="bottom"
:custom-style="{backgroundColor: '#fff'}">
<template #prefix>
<uv-text text="联系姓名" size="24rpx" margin="20rpx 10rpx 20rpx 10rpx" />
</template>
</uv-input>
<uv-input placeholder="请输入联系姓名" border="none" fontSize="24rpx"
:custom-style="{backgroundColor: '#fff'}">
<template #prefix>
<uv-text text="联系方式" size="24rpx" margin="20rpx 10rpx 20rpx 10rpx" />
</template>
</uv-input>
</view>
<view class="help-button">
<view>历史反馈</view>
<view>确认</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: "",
fileList1: []
}
},
onLoad(args) {
},
methods: {
// 删除图片
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: 'http://127.0.0.1/upload', // 仅为示例,非真实的接口地址
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
setTimeout(() => {
resolve(res.data.data)
}, 1000)
}
});
})
}
}
}
</script>
<style scoped lang="scss">
.help {
.help-box {
width: 92%;
margin-left: 4%;
.help-issue {
margin: 20rpx;
font-size: 28rpx;
font-weight: 600;
color: #333333;
}
.help-screenshot {
display: flex;
align-items: center;
background-color: #fff;
image {
padding: 60rpx;
}
}
.help-button {
display: flex;
justify-content: space-between;
font-size: 24rpx;
flex-shrink: 0;
margin-top: 60rpx;
view {
padding: 14rpx 120rpx;
border-radius: 38rpx;
}
view:nth-child(1) {
color: #C8C8C8;
background-color: #FFFDF6;
border: 2rpx solid #C8C8C8;
}
view:nth-child(2) {
color: #FFFDF6;
background-color: #C83741;
}
}
}
}
</style>