|
@@ -0,0 +1,232 @@
|
|
|
+<template>
|
|
|
+ <view class="feedback">
|
|
|
+ <view class="header-bg"></view>
|
|
|
+
|
|
|
+ <view class="header">
|
|
|
+ <view class="title">
|
|
|
+ 意见反馈
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="" style="margin: 0 20upx;">
|
|
|
+ <view class="">
|
|
|
+ <label class="label" for="">我要反馈</label>
|
|
|
+ <view style="background: white;margin: 20upx 0;border-radius: 10upx;">
|
|
|
+ <view>
|
|
|
+ <textarea class="textarea" v-model="form.content" placeholder="" maxlength="300" />
|
|
|
+ </view>
|
|
|
+ <view class="tips">您还能输入{{300-form.content.length}}个字符</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ <label class="label" for="">上传图片</label>
|
|
|
+ <view style="background: white;border-radius: 10upx;margin-top: 20upx;">
|
|
|
+ <view class="images-wrapper">
|
|
|
+ <view class="image-item" v-for="(image,i) in mainImages">
|
|
|
+ <view class="del" @tap="mainImages.splice(i,1)">删除</view>
|
|
|
+ <image class="image" :src="image|imagesFilter" mode="aspectFill" @tap="replaceImage(i)">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="image-item" v-if="mainImagesLimit>mainImages.length">
|
|
|
+ <view class="add" @tap="addImage">
|
|
|
+ <uni-icons type="plusempty" size="40" color="#EEEEEE" style="font-weight: 500;">
|
|
|
+ </uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="" style="margin-top: 100upx;">
|
|
|
+ <button type="default" class="btn submit-btn" @tap="submit">提交</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ mainImages: [],
|
|
|
+ mainImagesLimit: 4,
|
|
|
+ form: {
|
|
|
+ content: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ addImage() {
|
|
|
+ this.chooseImage().then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ for (let i in res.tempFilePaths) {
|
|
|
+ this.$http.upload({
|
|
|
+ file: res.tempFiles[i],
|
|
|
+ filePath: res.tempFilePaths[i],
|
|
|
+ name: 'file',
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res.data.data)
|
|
|
+ this.mainImages.push(res.data.data.url)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ replaceImage(index) {
|
|
|
+ console.log(index)
|
|
|
+ this.chooseImage().then((res) => {
|
|
|
+ this.$http.upload({
|
|
|
+ file: res.tempFiles[0],
|
|
|
+ filePath: res.tempFilePaths[0],
|
|
|
+ name: 'file',
|
|
|
+ success: (res) => {
|
|
|
+ // this.mainImages[index] = res.data.data.url
|
|
|
+ this.$set(this.mainImages, index, res.data.data.url)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ chooseImage() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: this.mainImagesLimit - this.mainImages.length,
|
|
|
+ extension: ['jpg', 'png', 'bmp', 'jpeg'],
|
|
|
+ success(res) {
|
|
|
+ resolve(res)
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ reject(err)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (this.$verified.required(this.form.content,"请输入反馈内容")) {
|
|
|
+ this.$http.post({
|
|
|
+ url: "/feedback/create",
|
|
|
+ data: this.form,
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res)
|
|
|
+ uni.showModal({
|
|
|
+ title: "意见反馈",
|
|
|
+ content: "提交成功,平台将于三个工作日之内为您处理",
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.navigateBack()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .feedback {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-bg {
|
|
|
+ background: $primary-color;
|
|
|
+ height: 100upx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ margin: 20upx;
|
|
|
+ background: white;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 20upx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ height: 100upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ line-height: 100upx;
|
|
|
+ // font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 30upx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ font-size: 28upx;
|
|
|
+ text-align: right;
|
|
|
+ padding: 10upx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .textarea {
|
|
|
+ padding: 20upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .images-wrapper {
|
|
|
+ padding: 0;
|
|
|
+ padding-top: 40upx;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ // justify-content: space-between;
|
|
|
+
|
|
|
+ .image-item {
|
|
|
+ position: relative;
|
|
|
+ width: 25%;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 40upx;
|
|
|
+
|
|
|
+ .del {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 30upx;
|
|
|
+ z-index: 1;
|
|
|
+ font-size: 24upx;
|
|
|
+ background-color: $primary-color;
|
|
|
+ color: white;
|
|
|
+ padding: 2upx 15upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 120upx;
|
|
|
+ height: 120upx;
|
|
|
+ background: #EEEEEE;
|
|
|
+ flex: 0 0 150upx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .add {
|
|
|
+ width: 120upx;
|
|
|
+ height: 120upx;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 110upx;
|
|
|
+
|
|
|
+ border: 8upx #EEEEEE solid;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit-btn {
|
|
|
+ font-size: 30upx;
|
|
|
+ line-height: 60upx;
|
|
|
+ width: 250upx;
|
|
|
+ background: $primary-color;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+</style>
|