warm_man/pages/Shop/components/SubmitPage/index.vue

<template>
  <view class="list-page" :style="{padding:'20rpx',marginBottom:'100rpx'}">
    <u-form
        labelPosition="left"
        :model="model1"
        :rules="rules"
        ref="form1"
        labelWidth="200rpx"
        :labelStyle="{
          fontSize:'32rpx',
          fontWeight:'400',
          color:'#020b18',
          lineHeight:'50rpx',
        }"
    >
      <u-form-item
          :custom-style="{
                  padding:'34rpx 0'
              }"
          label="事件类型"
          prop="userInfo.name"
          borderBottom
          ref="item1"
      >
        <u-input
            fontSize="28"
            placeholder="请选择"
            v-model="model1.userInfo.name"
            border="none"
        ></u-input>
      </u-form-item>
      <u-form-item
          :custom-style="{
                  padding:'34rpx 0'
              }"
          label="手机号"
          prop="userInfo.name"
          borderBottom
          ref="item1"
      >
        <u-input
            fontSize="28"
            placeholder="请输入"
            v-model="model1.userInfo.name"
            border="none"
        ></u-input>
      </u-form-item>
      <u-form-item
          :custom-style="{
                  padding:'34rpx 0'
              }"
          label="事件地址"
          prop="userInfo.name"
          borderBottom
          ref="item1"
      >
        <u-input
            fontSize="28"
            placeholder="请选择"
            v-model="model1.userInfo.name"
            border="none"
        ></u-input>
      </u-form-item>
      <u-form-item
          :custom-style="{
                  padding:'34rpx 0'
              }"
          prop="userInfo.name"
          ref="item1"
      >
        <view class="label-title">文字说明</view>

        <view class="tag-group row">
          <view class="tag-container" v-for="(item,index) in tags">
            <view class="tag border-box" :class="{checked:item.checked}" @click="checkboxClick(index)">
              {{ item.name }}
            </view>
          </view>
        </view>
        <u-textarea
            border="none"
            placeholder="请描述您遇到的问题"
            height="220"
            :custom-style="{
                backgroundColor:'#FAFAFA',
                padding:'8rpx 20rpx'
              }"
        ></u-textarea>
      </u-form-item>

      <u-form-item
          :custom-style="{
                  padding:'0 0 34rpx 0'
              }"
          prop="userInfo.name"
          ref="item1"
      >
          <view class="upload-container row">
            <view class="row">
              <view class="label-title">上传照片或视频</view>
              <view class="label-desc">(非必填)</view>
            </view>
            <view class="upload-item">
              <view class="upload">
                <u-upload
                    width="160"
                    height="160"
                    :fileList="fileList1"
                    name="1"
                    multiple
                    :maxCount="10"
                    uploadIcon="plus"
                ></u-upload>
              </view>
              <view class="title">上传照片</view>
            </view>
            <view class="upload-item">
              <view class="upload">
                <u-upload
                    width="160"
                    height="160"
                    :fileList="fileList1"
                    name="1"
                    multiple
                    :maxCount="10"
                    uploadIcon="plus"
                ></u-upload>
              </view>
              <view class="title">上传视频</view>
            </view>

        </view>
      </u-form-item>
    </u-form>
  </view>
  <view class="foot-button border-box">
    <u-button
        type="primary"
        text="保存"
        shape="circle"
        :custom-style="{
              color:'#020B18',
              backgroundColor:'#FF9545',
              border:'none',
              fontSize:'36',
              fontWeight:'400',
              height:'80rpx'
            }"
    ></u-button>
  </view>
</template>

<script>
import {
  imghost
} from '@/config/host.js'
import api from '@/utils/functions.js';
import MzCard from "@/components/MzCard/index.vue";


export default {
  components:{
    MzCard
  },
  data: {
    tags:[
        {
          checked:true,
          name:'红绿灯故障'
        },{
          checked:false,
          name:'存在安全隐患'
        },{
          checked:false,
          name:'公共设施损坏了'
        },{
          checked:false,
          name:'环境污染污水'
        },
    ],
    fileList1:[],
    model1: {
      userInfo: {
        name: '',
        sex: 1,
      },
    },
    rules: {
      'userInfo.name': {
        type: 'string',
        required: true,
        message: '请填写姓名',
        trigger: ['blur', 'change']
      },
      'userInfo.sex': {
        type: 'string',
        max: 1,
        required: true,
        message: '请选择男或女',
        trigger: ['blur', 'change']
      },
    },
    sexList:[
      {
        id:1,
        name: '男',
        disabled: false,
      },
      {
        i:2,
        name: '女',
        disabled: false,
      },
    ],
    list1: [
      'https://cdn.uviewui.com/uview/swiper/swiper1.png',
      'https://cdn.uviewui.com/uview/swiper/swiper2.png',
      'https://cdn.uviewui.com/uview/swiper/swiper3.png',
    ],
    title: '暖新人',
    loading: true,
    staticImage: {
      hiImage: imghost + '/index-user-title-hi.png',
      dogImage: imghost + '/index-user-title-dog.png',
      couponsImage: imghost + '/index-user-coupons-background.png',
      indexButtonGroup: [{
        image: imghost + '/index-five-1.png',
        url: '/pages/Authentication/index',
        title:'丰行侠认证'
      },{
        image: imghost + '/index-five-2.png',
        url: '/pages/Index/index',
        title:'顾问认证'
      },{
        image: imghost + '/index-five-3.png',
        url: '/pages/Index/index',
        title:'线索上传'
      },{
        image: imghost + '/index-five-4.png',
        url: '/pages/Index/index',
        title:'社区顾问库'
      },{
        image: imghost + '/index-five-5.png',
        url: '/pages/Index/index',
        title:'暖新服务'
      },
      ],
      wallpaperBgImage: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
      bg: imghost + '/BG.png',
    },
    indexBanner: [
      {
        image: imghost + '/banner.png',
        url: '',
      }
    ],
    user: {
      avatar: imghost + '/banner.png',
      nickname: '清晨的风',
      coupons: 221,
      id: 88685
    },
    isTop: false,
    pagePadding: 100,
    userInfo: {},
    userExtends: {},
    size:{
      height:0
    }
  },
  onLoad() {

  },
  onReady() {
    let that = this;
    let info = uni.createSelectorQuery().in(this).select('.foot-button');
    info.boundingClientRect(function (data) {
      that.size.height = data.height;
      console.log('height',that.size.height)
    }).exec(function (res) {});
  },
  methods: {
    checkboxClick(index){
      console.log(index)
      this.tags[index].checked = !this.tags[index].checked;
    },
    userCouponsPage() {
      wx.navigateTo({
        url: '/pages/UserCoupons/index'
      })
    },
    navTo(url) {
      wx.navigateTo({
        url: url
      })
    },
    updateUserInfo() {
      if (this.userInfo) {
        this.user.id = this.userInfo.id
        this.user.nickname = this.userInfo.name
        this.user.avatar = this.userInfo.avatar
      }
      if (this.userExtends) {
        this.user.coupons = this.userExtends.coupon_count
      }
    }
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }

  },
  created() {
    this.pagePadding = (api.navHeight().navPaddingTop +
        api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },
  mounted() {

  },
  updated() {

  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.userInfo = newVal;
        this.updateUserInfo();
      }
    },
    "$store.state.userExtends": {
      handler(newVal, oldVal) {
        this.userExtends = newVal;
        this.updateUserInfo();
      }
    }
  }
}
</script>

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