168 lines
4.0 KiB
Vue
168 lines
4.0 KiB
Vue
<template>
|
|
<view class="uni-container">
|
|
<uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
|
|
<uni-forms-item name="content" label="留言内容/回复内容" required>
|
|
<textarea @input="binddata('content', $event.detail.value)" class="uni-textarea-border" v-model="formData.content" trim="right"></textarea>
|
|
</uni-forms-item>
|
|
<uni-forms-item name="imgs" label="图片列表">
|
|
<uni-file-picker file-mediatype="image" :limit="6" return-type="array" v-model="formData.imgs"></uni-file-picker>
|
|
</uni-forms-item>
|
|
<uni-forms-item name="contact" label="联系人">
|
|
<uni-easyinput v-model="formData.contact" trim="both"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item name="mobile" label="联系电话">
|
|
<uni-easyinput v-model="formData.mobile" trim="both"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<view class="uni-button-group">
|
|
<button type="primary" class="uni-button" @click="submit">提交</button>
|
|
</view>
|
|
</uni-forms>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { validator } from '../../js_sdk/validator/opendb-feedback.js';
|
|
|
|
const db = uniCloud.database();
|
|
const dbCollectionName = 'opendb-feedback';
|
|
|
|
function getValidator(fields) {
|
|
let result = {}
|
|
for (let key in validator) {
|
|
if (fields.indexOf(key) > -1) {
|
|
result[key] = validator[key]
|
|
}
|
|
}
|
|
return result
|
|
}
|
|
|
|
export default {
|
|
data() {
|
|
let formData = {
|
|
"content": "",
|
|
"imgs": [],
|
|
"contact": "",
|
|
"mobile": ""
|
|
}
|
|
return {
|
|
formData,
|
|
formOptions: {},
|
|
rules: {
|
|
...getValidator(Object.keys(formData))
|
|
}
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
if (e.id) {
|
|
const id = e.id
|
|
this.formDataId = id
|
|
this.getDetail(id)
|
|
}
|
|
},
|
|
onReady() {
|
|
this.$refs.form.setRules(this.rules)
|
|
},
|
|
methods: {
|
|
/**
|
|
* 触发表单提交
|
|
*/
|
|
submit() {
|
|
uni.showLoading({
|
|
mask: true
|
|
})
|
|
this.$refs.form.validate().then((res) => {
|
|
this.submitForm(res)
|
|
}).catch(() => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
|
|
submitForm(value) {
|
|
// 使用 clientDB 提交数据
|
|
db.collection(dbCollectionName).doc(this.formDataId).update(value).then((res) => {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '修改成功'
|
|
})
|
|
this.getOpenerEventChannel().emit('refreshData')
|
|
setTimeout(() => uni.navigateBack(), 500)
|
|
}).catch((err) => {
|
|
uni.showModal({
|
|
content: err.message || '请求服务失败',
|
|
showCancel: false
|
|
})
|
|
}).finally(() => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 获取表单数据
|
|
* @param {Object} id
|
|
*/
|
|
getDetail(id) {
|
|
uni.showLoading({
|
|
mask: true
|
|
})
|
|
db.collection(dbCollectionName).doc(id).field("content,imgs,contact,mobile").get().then((res) => {
|
|
const data = res.result.data[0]
|
|
if (data) {
|
|
this.formData = data
|
|
}
|
|
}).catch((err) => {
|
|
uni.showModal({
|
|
content: err.message || '请求服务失败',
|
|
showCancel: false
|
|
})
|
|
}).finally(() => {
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.uni-container {
|
|
padding: 15px;
|
|
}
|
|
|
|
.uni-input-border,
|
|
.uni-textarea-border {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
color: #666;
|
|
border: 1px #e5e5e5 solid;
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.uni-input-border {
|
|
padding: 0 10px;
|
|
height: 35px;
|
|
|
|
}
|
|
|
|
.uni-textarea-border {
|
|
padding: 10px;
|
|
height: 80px;
|
|
}
|
|
|
|
.uni-button-group {
|
|
margin-top: 50px;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
justify-content: center;
|
|
}
|
|
|
|
.uni-button {
|
|
width: 184px;
|
|
padding: 12px 20px;
|
|
font-size: 14px;
|
|
border-radius: 4px;
|
|
line-height: 1;
|
|
margin: 0;
|
|
}
|
|
</style>
|