warm_man/pages/Feed/index.vue

<template>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#ffffff"
  ></u-navbar>
  <view class="body-background">

  </view>
  <u-row :custom-style="{padding:'16rpx 26rpx'}">
    <u-col :span="12" :custom-style="{
      backgroundColor:'#FFFFFF',
      borderRadius:'20rpx',
      padding:'40rpx 32rpx',
      minHeight:'1000rpx',
      position:'relative'
    }">
      <u-form
          errorType="toast"
          labelWidth="auto"
          labelPosition="left"
          :model="model"
          :rules="rules"
          ref="feedForm"
      >
        <u-form-item
            prop="remark"
            :custom-style="{padding:'0'}"
        >
          <u-textarea
              v-model="model.remark"
              border="none"
              placeholder="请描述您遇到的问题"
              height="220"
              :custom-style="{
                backgroundColor:'#FAFAFA',
                padding:'8rpx 20rpx'
              }"
          ></u-textarea>
        </u-form-item>
        <u-form-item
            label="街道"
            prop="connect"
            borderBottom
            :custom-style="{padding:'34rpx 0'}"
        >
          <u-text
              :text="shows.street_name || '请选择街道'"
              :custom-style="{paddingRight:'28rpx'}"
              size="30rpx"
              align="right"
              suffix-icon="arrow-right"
              @click="openStreetPicker"
          ></u-text>
        </u-form-item>
        <u-form-item
            label="社区"
            prop="connect"
            borderBottom
            :custom-style="{padding:'34rpx 0'}"
        >
          <u-text
              :text="shows.community_name || '请选择社区'"
              :custom-style="{paddingRight:'28rpx'}"
              size="30rpx"
              align="right"
              suffix-icon="arrow-right"
              @click="openCommunityPicker"
          ></u-text>
        </u-form-item>
        <u-form-item
            label="联系方式"
            prop="connect"
            borderBottom
            :custom-style="{padding:'34rpx 0'}"
        >
          <u-input
              v-model="model.connect"
              inputAlign="right"
              disabledColor="#ffffff"
              placeholder="请填写手机号，以便我们联系您"
              border="none"
              :custom-style="{paddingRight:'28rpx'}"
          ></u-input>
        </u-form-item>
        <u-form-item
            prop="userInfo.sex"
            :custom-style="{padding:'34rpx 0'}"
        >
          <u-upload
              width="160"
              height="160"
              :fileList="fileList"
              name="1"
              multiple
              :maxCount="10"
              uploadIcon="plus"
              @afterRead="afterFileRead"
              @delete="deleteFile"
          ></u-upload>
        </u-form-item>
      </u-form>
      <view class="row">
        <view class="col-6" style="padding:0 15rpx">
          <u-button
              type="default"
              text="我的留言"
              shape="circle"
              :custom-style="{
              color:'#020b18',
              fontSize:'36',
              fontWeight:'400',
              marginTop:'48rpx',
              height:'80rpx',
              border:'2rpx solid #020b18'
            }"
              @click="api.navTo('/pages/Feed/leave')"

          ></u-button>
        </view>
        <view class="col-6" style="padding:0 15rpx">
          <u-button
              type="primary"
              text="保存"
              shape="circle"
              :custom-style="{
              color:'#020B18',
              backgroundColor:'#FF9545',
              border:'none',
              fontSize:'36',
              fontWeight:'400',
              marginTop:'48rpx',
              height:'80rpx'
            }"
              @click="submit"

          ></u-button>
        </view>
      </view>
<!--      <view class="bottom-btn border-box">-->
<!--        <u-button-->
<!--            type="primary"-->
<!--            text="保存"-->
<!--            shape="circle"-->
<!--            :custom-style="{-->
<!--              color:'#020B18',-->
<!--              backgroundColor:'#FF9545',-->
<!--              border:'none',-->
<!--              fontSize:'36',-->
<!--              fontWeight:'400',-->
<!--              marginTop:'48rpx',-->
<!--              height:'80rpx'-->
<!--            }"-->
<!--            @click="submit"-->

<!--        ></u-button>-->
<!--      </view>-->
    </u-col>
  </u-row>
  <view class="footer-content">
    <view class="footer-contact">联系我们</view>
    <view class="footer-wechat row">
      <view class="foot-title">微信公众号：</view>
      <view class="foot-url">暖新家公众平台 <text @click="copyContent()">复制</text></view>
    </view>
    <view class="footer-email row">
      <view class="foot-title">官方邮箱：</view>
      <view class="foot-url">1256896@qq.com <text @click="copyContent()">复制</text></view>
    </view>
  </view>
  <uv-picker
      ref="street"
      :columns="[streetList]"
      keyName="name"
      @confirm="selectStreet"></uv-picker>
  <uv-picker
      ref="community"
      :columns="[communityList]"
      keyName="name"
      @confirm="selectCommunity"></uv-picker>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import MzSubsection from '@/components/MzSubsection/Index.vue';
import api from '@/utils/functions.js';
import {feedback} from "@/api/feed";
import {userDetail, userEdit} from "@/api/user";
import {streetList} from "../../api/shop";
import {getCommonStreet} from "../../api/other";

export default {
  components: {
    MzSubsection
  },
  data() {
    return {
      title: '意见反馈',
      loading: true,
      staticImage: {
        bg: imghost + '/BG.png',
        newIcon: imghost + '/new-icon.png',
      },
      isTop: false,
      fileList:[],
      model:{
        street_id:'',
        community_id:'',
        connect:'',
        remark:'',
        path:[],
      },
      shows:{
        street_name:'',
        community_name:'',
      },
      rules:{
        'connect': {
          type: 'string',
          required: true,
          message: '请填写联系方式',
          trigger: ['blur', 'change']
        },
        'remark': {
          type: 'string',
          required: true,
          message: '请填写内容',
          trigger: ['blur', 'change']
        },
      },
      streetList:[],
      communityList:[],
    }
  },
  onLoad() {

  },
  computed: {
    api() {
      return api
    },
  },
  methods: {
    submit(){
      let file = [];
      this.fileList.forEach(item => {
        file.push({url:item.url})
      });
      this.model.path = file;
      this.$refs.feedForm.validate().then(res => {
        feedback(this.model).then((res) => {
          if(res.code === 200){
            uni.$u.toast('反馈成功')

            this.model = {
              connect:'',
              remark:'',
              file:[]
            }
            this.fileList = [];
          }else{
            uni.$u.toast(res.msg)
          }
        })
      }).catch(errors => {
        uni.$u.toast(errors[0].message)
      })

    },
    //上传文件
    async afterFileRead  (event){
      let lists = [].concat(event.file);

      let fileListLen = this.fileList.length;
      lists.map((item) => {
        this.fileList.push({
          ...item,
          status: 'uploading',
          message: '上传中',
        });
      });
      for (let i = 0; i < lists.length; i++) {

        api.uploadOssFile(lists[i].url).then(res => {
          let item = this.fileList[fileListLen];
          this.fileList.splice(fileListLen, 1, {
            ...item,
            status: 'success',
            message: '',
            url: res.show_path,
            thumb: res.show_path,
          });
          fileListLen++;
        })
        // const result = await uploadFilePromise(lists[i].url);

      }
    },
    //删除上传图片
    deleteFile(event){
      this.fileList.splice(event.index, 1);
    },
    copyContent(){
      uni.setClipboardData({
        data: '',
        success: function () {
          //调用方法成功
        }
      })
    },
    getConfig(){
      getCommonStreet({}).then(res => {
        this.streetList = res.data
      });
    },
    selectStreet(e){
      this.model.street_id = e.value[0].id;
      this.shows.street_name = e.value[0].name;
      this.communityList = e.value[0].children;
    },
    selectCommunity(e){
      this.model.community_id = e.value[0].id;
      this.shows.community_name = e.value[0].name;
    },
    openStreetPicker(){
      this.$refs.street.open();
    },
    openCommunityPicker(){
      this.$refs.community.open();
    },
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }
  },
  created() {

  },
  mounted() {
    this.getConfig();
  },
}
</script>

<style lang="scss">
@import './components/index.scss';
</style>