134 lines
4.7 KiB
Vue
134 lines
4.7 KiB
Vue
<template>
|
|
<view class="min-height bg-main-light">
|
|
<HeaderItem title="我要反馈"/>
|
|
<view class="rounded-top p-30">
|
|
<TitleItem title="基础信息"/>
|
|
<view class="my-20 card p-30">
|
|
<u-form label-width="140rpx">
|
|
<u-form-item label="活动名称" border-bottom>
|
|
<u-input v-model="formData.title" border="none" placeholder="请输入活动名称">
|
|
</u-input>
|
|
</u-form-item>
|
|
<u-form-item label="活动单位" border-bottom>
|
|
<u-input v-model="formData.company" border="none" placeholder="请输入活动单位"/>
|
|
</u-form-item>
|
|
<u-form-item label="活动地点" border-bottom>
|
|
<u-input v-model="formData.address" border="none" placeholder="请输入活动地点"/>
|
|
</u-form-item>
|
|
<u-form-item label="活动日期" border-bottom @click="showDate = true">
|
|
<u-input v-model="formData.date" border="none" placeholder="请选择活动日期" readonly>
|
|
</u-input>
|
|
</u-form-item>
|
|
<u-form-item label="上传图片" border-bottom>
|
|
<view class="flex justify-start items-start flex-wrap">
|
|
<view class="album-item pos-r" style="border: 1px dashed #ECECEC" v-for="(item, index) in pics"
|
|
:key="index">
|
|
<u-image :src="item" width="190rpx" height="190rpx" mode="aspectFill"/>
|
|
<view class="del-wrap" @click="delImage(index)">
|
|
<u-icon name="trash" color="white" size="40rpx"/>
|
|
</view>
|
|
</view>
|
|
<view class="album-item" style="border: 1px dashed #ECECEC" @click="chooseImage">
|
|
<u-icon name="plus"/>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="上传视频" border-bottom>
|
|
<view class="album-item" style="border: 1px dashed #ECECEC">
|
|
<u-icon name="play-circle" v-if="!formData.video" @click="chooseVideo" size="40rpx"/>
|
|
<template v-else>
|
|
<video :src="formData.video" style="width: 190rpx; height: 190rpx" :controls="false"/>
|
|
</template>
|
|
</view>
|
|
<view class="ml-15" v-if="formData.video">
|
|
<u-button @click="chooseVideo" size="mini" type="primary">更换</u-button>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="活动概览">
|
|
<u-textarea maxlength="-1" v-model="formData.content" border="none" placeholder="请输入活动概览"/>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
<view class="mt-30">
|
|
<u-button type="primary" shape="circle" @click="save">保存</u-button>
|
|
</view>
|
|
</view>
|
|
<u-datetime-picker
|
|
:show="showDate"
|
|
v-model="checkDate"
|
|
mode="date"
|
|
@confirm="selectDate"
|
|
@cancel="showDate = false"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HeaderItem from "@/components/HeaderItem.vue";
|
|
import TitleItem from "@/components/TitleItem.vue";
|
|
import dayjs from "dayjs";
|
|
import {chooseImg, chooseVideo} from "@/util";
|
|
import {feedbackReq} from "@/api/common";
|
|
import {userInfoReq} from "@/api/user";
|
|
|
|
export default {
|
|
name: "feedback",
|
|
components: {TitleItem, HeaderItem},
|
|
data() {
|
|
return {
|
|
formData: {
|
|
title: '',
|
|
company: '',
|
|
address: '',
|
|
date: '',
|
|
pics: '',
|
|
video: '',
|
|
content: '',
|
|
},
|
|
pics: [],
|
|
showDate: false,
|
|
checkDate: Number(new Date()),
|
|
userInfo: null
|
|
}
|
|
},
|
|
methods: {
|
|
selectDate({value}) {
|
|
this.showDate = false
|
|
this.formData.date = dayjs(value).format("YYYY-MM-DD")
|
|
},
|
|
async chooseImage() {
|
|
const res = await chooseImg(9 - this.pics.length)
|
|
res.map(item => {
|
|
this.pics.push(item.path)
|
|
})
|
|
},
|
|
delImage(index) {
|
|
this.pics.splice(index, 1)
|
|
},
|
|
async chooseVideo() {
|
|
const res = await chooseVideo()
|
|
this.formData.video = res.path
|
|
},
|
|
async save() {
|
|
if (this.pics) this.formData.pics = JSON.stringify(this.pics)
|
|
if (!this.formData.title) return this.$toast('请输入活动名称')
|
|
if (!this.formData.company) return this.$toast('请输入活动单位')
|
|
if (!this.formData.address) return this.$toast('请输入活动地点')
|
|
if (!this.formData.date) return this.$toast('请选择活动日期')
|
|
await feedbackReq(this.formData)
|
|
this.$toast('提交成功')
|
|
uni.navigateBack()
|
|
},
|
|
async getUserData() {
|
|
const res = await userInfoReq()
|
|
if (res) {
|
|
this.userInfo = res.data
|
|
this.formData.company = res.data.companyName
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getUserData()
|
|
},
|
|
}
|
|
</script> |