warm_man/pages/Line/components/ListPage/index.vue

<template>
  <view class="list-page" :style="{padding:'20rpx'}">
    <u-form
        labelPosition="left"
        :model="model1"
        :rules="rules"
        ref="form1"
        labelWidth="200rpx"
    >
      <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"
          borderBottom
          ref="item1"
      >
        <view class="font-info">文字说明</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:'34rpx 0'
              }"
          label="上传照片或视频(非必填)"
          prop="userInfo.name"
          borderBottom
          ref="item1"
      >
        <u-upload
            width="160"
            height="160"
            :fileList="fileList1"
            name="1"
            multiple
            :maxCount="10"
            uploadIcon="plus"

        ></u-upload>
        <u-upload
            width="160"
            height="160"
            :fileList="fileList1"
            name="1"
            multiple
            :maxCount="10"
            uploadIcon="plus"

        ></u-upload>
      </u-form-item>
    </u-form>
  </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: {
    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 + '/static/image/index-user-title-hi.png',
      dogImage: imghost + '/static/image/index-user-title-dog.png',
      couponsImage: imghost + '/static/image/index-user-coupons-background.png',
      indexButtonGroup: [{
          image: imghost + '/static/image/index-five-1.png',
          url: '/pages/Authentication/index',
          title:'丰行侠认证'
        },{
          image: imghost + '/static/image/index-five-2.png',
          url: '/pages/Index/index',
          title:'顾问认证'
        },{
          image: imghost + '/static/image/index-five-3.png',
          url: '/pages/Index/index',
          title:'线索上传'
        },{
          image: imghost + '/static/image/index-five-4.png',
          url: '/pages/Index/index',
          title:'社区顾问库'
        },{
          image: imghost + '/static/image/index-five-5.png',
          url: '/pages/Index/index',
          title:'暖新服务'
        },
      ],
      wallpaperBgImage: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
      bg: imghost + '/static/image/BG.png',
    },
    indexBanner: [
      {
        image: imghost + '/static/image/banner.png',
        url: '',
      }
    ],
    user: {
      avatar: imghost + '/static/image/banner.png',
      nickname: '清晨的风',
      coupons: 221,
      id: 88685
    },
    isTop: false,
    pagePadding: 100,
    userInfo: {},
    userExtends: {},
  },
  onLoad() {

  },
  methods: {
    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>