321 lines
7.2 KiB
Vue
321 lines
7.2 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 表单组件 -->
|
|
<view class="form-wrapper">
|
|
<u-cell title="反馈类型" :value="form.type" @click="showFeedbackType = true" :isLink="true"></u-cell>
|
|
<u-cell>
|
|
<view slot="title" class="textarea">
|
|
<u--textarea v-model="form.content" placeholder="请补充详细内容和意见,小红娘会在第一时间回复你"
|
|
:customStyle="{backgroundColor: '#f3f3f3'}" maxlength="200"></u--textarea>
|
|
<view class="images">
|
|
<u-upload :fileList="fileList1" :maxSize="3145728" :width="72" :height="72" @afterRead="afterRead"
|
|
@delete="deletePic" name="1" multiple :maxCount="6"></u-upload>
|
|
</view>
|
|
|
|
</view>
|
|
</u-cell>
|
|
<u-cell title="联系方式" :value="form.phone" :isLink="true">
|
|
<u-input slot="value" class="nickname" :border="false" inputAlign="right" v-model="form.phone" maxlength="30" placeholder="请输入联系方式"
|
|
@input="onInputNickName" @blur="onInputNickName" />
|
|
</u-cell>
|
|
<u-picker :show="showFeedbackType" :columns="dict.feedbackType" @confirm="confirmFeedbackType" @cancel="showFeedbackType = false"
|
|
:closeOnClickOverlay="true" @close="showFeedbackType = false">
|
|
</u-picker>
|
|
<!-- 操作按钮 -->
|
|
<view class="footer">
|
|
<view class="btn-wrapper">
|
|
<u-button text="提交" color="linear-gradient(to bottom, #010002, #681752)" :disabled="disabled"
|
|
shape="circle" @click="handleSubmit()"></u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import store from '@/store'
|
|
import {
|
|
fileUrl
|
|
} from '@/config.js'
|
|
import {
|
|
dateFormat
|
|
} from '@/utils/util.js'
|
|
import * as UserApi from '@/api/user'
|
|
import * as UserProfileApi from '@/api/love-user-profile.js'
|
|
import * as UploadApi from '@/api/upload'
|
|
import * as UserFeedbackApi from '@/api/user-feedback.js'
|
|
import * as DictApi from '@/api/dict.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
dict: null,
|
|
// 按钮禁用
|
|
disabled: false,
|
|
// 临时图片 (用于上传)
|
|
tempFile: null,
|
|
// 表单数据
|
|
form: {
|
|
type: ''
|
|
},
|
|
fileList1: [],
|
|
interest: [],
|
|
loading: false,
|
|
showFeedbackType: false,
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad() {
|
|
this.getDict()
|
|
this.getUserProfile()
|
|
},
|
|
methods: {
|
|
// 用户资料表
|
|
getUserProfile() {
|
|
const app = this
|
|
const userId = uni.getStorageSync('userId')
|
|
UserProfileApi.getUserProfile(userId).then(res => {
|
|
app.form = res.data
|
|
const userInfo = res.data.userInfo
|
|
app.form.phone = userInfo.phone
|
|
// app.interest = JSON.parse(app.form.interest) || []
|
|
// app.fileList1 = JSON.parse(app.form.images) || []
|
|
app.isLogin = false
|
|
}).catch(err => {
|
|
app.$success(err)
|
|
})
|
|
},
|
|
|
|
getDict() {
|
|
DictApi.listDictionary().then(res => {
|
|
this.dict = res.data;
|
|
})
|
|
},
|
|
|
|
// 上传图片
|
|
uploadFile() {
|
|
const app = this
|
|
UploadApi.uploadFile({
|
|
filePath: app.tempFile,
|
|
fileType: 'image',
|
|
name: 'file'
|
|
}).then(res => {
|
|
// UserProfileApi.updateUserProfile(app.form)
|
|
})
|
|
},
|
|
|
|
// 确认修改
|
|
async handleSubmit() {
|
|
const app = this
|
|
if (app.disabled === true) return
|
|
if (app.form.type == undefined) {
|
|
app.$error('请选择反馈类型')
|
|
return false
|
|
}
|
|
if (app.form.content == undefined) {
|
|
app.$error('请填写内容')
|
|
return false
|
|
}
|
|
app.form.interest = JSON.stringify(app.interest)
|
|
app.form.images = JSON.stringify(app.fileList1)
|
|
UserFeedbackApi.addFeedback(app.form).then(result => {
|
|
app.$toast(result.message)
|
|
setTimeout(function() {
|
|
uni.navigateBack()
|
|
}, 2000)
|
|
}).catch(err => {
|
|
uni.$u.toast(err)
|
|
})
|
|
},
|
|
onInterest(text) {
|
|
const app = this
|
|
if (app.interest.indexOf(text) > -1) {
|
|
console.log("1: ");
|
|
app.interest.splice(app.interest.indexOf(text), 1)
|
|
} else {
|
|
console.log("2: ");
|
|
app.interest.push(text)
|
|
}
|
|
},
|
|
|
|
// 绑定昵称输入框 (用于微信小程序端快速填写昵称能力)
|
|
onInputNickName(val) {
|
|
console.log("val: ", val);
|
|
if (val) {
|
|
this.form.nickname = val
|
|
}
|
|
},
|
|
confirmFeedbackType(e) {
|
|
console.log("e: ",e.value);
|
|
this.form.type = e.value[0]
|
|
this.showFeedbackType = false
|
|
},
|
|
|
|
// 删除图片
|
|
deletePic(event) {
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
|
},
|
|
// 新增图片
|
|
async afterRead(event) {
|
|
console.log("event: ", 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.url,
|
|
thumb: result.thumbUrl
|
|
}))
|
|
fileListLen++
|
|
}
|
|
},
|
|
uploadFilePromise(url) {
|
|
return new Promise((resolve, reject) => {
|
|
UploadApi.uploadFile({
|
|
filePath: url,
|
|
fileType: 'image',
|
|
name: 'file',
|
|
header: {
|
|
Authorization: uni.getStorageSync('AccessToken')
|
|
},
|
|
}).then(result => {
|
|
setTimeout(() => {
|
|
resolve(result.data)
|
|
}, 1000)
|
|
}).catch(err => {
|
|
console.log("err: ", err);
|
|
})
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: #f7f8fa;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.container {}
|
|
|
|
.form-wrapper {
|
|
margin: 20rpx auto 20rpx auto;
|
|
padding: 20rpx;
|
|
width: 680rpx;
|
|
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
|
border-radius: 16rpx;
|
|
background: #fff;
|
|
|
|
.nickname {
|
|
text-align: right !important;
|
|
border: none;
|
|
}
|
|
|
|
.interest {
|
|
padding: 10rpx;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
|
|
.u-page__tag-item {
|
|
margin-bottom: 10rpx;
|
|
margin-right: 10rpx;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 底部操作栏 */
|
|
|
|
.footer {
|
|
margin-top: 50rpx;
|
|
padding-bottom: 50rpx;
|
|
|
|
.btn-wrapper {
|
|
width: 360rpx;
|
|
margin: auto;
|
|
// display: flex;
|
|
// align-items: center;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.btn-item {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
height: 86rpx;
|
|
color: #fff;
|
|
border-radius: 50rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn-item-wechat {
|
|
background: #0ba90b;
|
|
margin-bottom: 26rpx;
|
|
}
|
|
|
|
.btn-item-main {
|
|
background: linear-gradient(to right, $main-bg, $main-bg2);
|
|
color: $main-text;
|
|
|
|
// 禁用按钮
|
|
&.disabled {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.tabs {
|
|
width: 700rpx;
|
|
margin: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.textarea {
|
|
padding: 0;
|
|
}
|
|
|
|
.images {
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.his-head {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
padding: 20rpx 0 20rpx 0;
|
|
color: #681752;
|
|
|
|
.line {
|
|
background-color: #681752;
|
|
width: 8rpx;
|
|
height: 30rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.icon {
|
|
float: right;
|
|
}
|
|
|
|
}
|
|
</style> |