第一次提交
This commit is contained in:
gxwebsoft
321
sub_pages/feedback/feedback.vue
Normal file
321
sub_pages/feedback/feedback.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<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 dict, * 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>
|
||||
Reference in New Issue
Block a user