EveryLike/pages/component/form/form.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view class="scroll-view">
  <!-- #endif -->
    <view class="page">
      <form @submit="onFormSubmit" @reset="onFormReset">
        <view class="uni-form-item">
          <text class="title">姓名</text>
          <input class="uni-input" name="nickname" :value="nickname" placeholder="请输入姓名" maxlength="-1" />
        </view>
        <view class="uni-form-item">
          <text class="title">性别</text>
          <radio-group name="gender" class="flex-row">
            <view class="group-item">
              <radio value="0" :checked="gender=='0'" /><text>男</text>
            </view>
            <view class="group-item">
              <radio value="1" :checked="gender=='1'" /><text>女</text>
            </view>
          </radio-group>
        </view>
        <view class="uni-form-item">
          <text class="title">爱好</text>
          <checkbox-group name="loves" class="flex-row">
            <view class="group-item">
              <checkbox value="0" :checked="loves.indexOf('0')>-1" /><text>读书</text>
            </view>
            <view class="group-item">
              <checkbox value="1" :checked="loves.indexOf('1')>-1" /><text>写字</text>
            </view>
          </checkbox-group>
        </view>
        <view class="uni-form-item">
          <text class="title">年龄</text>
          <slider name="age" :value="age" :show-value="true"></slider>
        </view>
        <view class="uni-form-item">
          <text class="title">保留选项</text>
          <view>
            <switch name="switch" :checked="switch" />
          </view>
        </view>
        <view class="uni-form-item">
          <text class="title">备注</text>
          <textarea name="comment" :value="comment" placeholder="请输入备注" style="background: #FFF;" />
          <!-- <textarea class="uni-input" name="comment" :value="comment" placeholder="这个class的写法，导致iOS和Android产生了高度差异"/> -->
        </view>
        <!-- picker -->
        <!-- #ifdef APP-HARMONY -->
        <view class="uni-form-item flex-row">
          <text class="title">时区</text>
          <picker class="picker" name="timeZone" @change="onTimeZoneChange" :value="timeZoneIndex" :range="timeZoneList">
            <view class="uni-input pickerValue">{{timeZoneList[timeZoneIndex]}}</view>
          </picker>
        </view>
        <view class="uni-form-item flex-row">
          <text class="title">多列选择器</text>
          <picker class="picker pickerMulti" mode="multiSelector" @columnchange="onMultiPickerColumnChange"
            :value="multiIndex" :range="multiArray">
            <view class="uni-input pickerMultiValue">
              {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
            </view>
          </picker>
        </view>
        <view class="uni-form-item flex-row">
          <text class="title">时间选择器</text>
          <picker class="picker pickerTime" mode="time" :value="timePickerValue" start="09:01" end="21:01" @change="onTimeChange">
            <view class="uni-input">{{timePickerValue}}</view>
          </picker>
        </view>
        <view class="uni-form-item flex-row">
          <text class="title">日期选择器</text>
          <picker class="picker pickerDate" mode="date" :value="datePickerValue" :start="startDate" :end="endDate"
            @change="onDateChange">
            <view class="uni-input">{{datePickerValue}}</view>
          </picker>
        </view>
        <!-- #endif -->
        <view class="uni-form-item">
          <text class="title">时间</text>
          <picker-view class="picker-view" name="time" :value="time" indicator-style="height:50px">
            <picker-view-column>
              <view class="picker-view-item" v-for="(item,index) in hours" :key="index">
                <text class="picker-view-text">{{item}}时</text>
              </view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-view-item" v-for="(item,index) in minutes" :key="index">
                <text class="picker-view-text">{{item}}分</text>
              </view>
            </picker-view-column>
          </picker-view>
        </view>
        <view class="flex-row">
          <button class="btn btn-submit" form-type="submit" type="primary">Submit</button>
          <button class="btn btn-reset" type="default" form-type="reset">Reset</button>
        </view>
      </form>
      <view class="result">提交的表单数据</view>
      <textarea class="textarea" :value="formDataText" :maxlength="-1" :auto-height="true"></textarea>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  function getDate(type ?: string) : string {
    const date = new Date();

    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();

    if (type === 'start') {
      year = year - 10;
    } else if (type === 'end') {
      year = year + 10;
    }

    const monthString = month > 9 ? month.toString() : '0' + month;
    const dayString = day > 9 ? day.toString() : '0' + day;

    return `${year}-${monthString}-${dayString}`;
  }
  export default {
    data() {
      let hours = new Array<string>()
      let minutes = new Array<string>()
      for (let i = 1; i <= 24; i++) {
        hours.push(i.toString())
      }
      for (let i = 1; i <= 60; i++) {
        minutes.push(i.toString())
      }
      const date = new Date()
      return {
        nickname: '',
        gender: '0',
        age: 18,
        loves: ['0'],
        switch: true,
        timeZoneIndex: 0,
        timeZoneList: ['中国', '美国', '巴西', '日本'] as Array<string>,
        multiArray: [
          ['亚洲', '欧洲'],
          ['中国', '日本'],
          ['北京', '上海', '广州']
        ] as Array<Array<string>>,
        multiIndex: [0, 0, 0] as Array<number>,
        datePickerValue: getDate(null),
        startDate: getDate('start'),
        endDate: getDate('end'),
        timePickerValue: '12:01',
        time: [date.getHours() - 1, date.getMinutes() - 1] as Array<number>,
        hours: hours as Array<string>,
        minutes: minutes as Array<string>,
        comment: '',
        formData: {} as UTSJSONObject,
        // 仅测试
        testVerifySubmit: false,
        testVerifyReset: false,
      }
    },
    computed: {
      formDataText() : string {
        return JSON.stringify(this.formData)
      }
    },
    methods: {
      // #ifdef APP-HARMONY
      onTimeZoneChange(e : UniPickerChangeEvent) {
        this.timeZoneIndex = e.detail.value as number
        console.log('时区选择改变，携带值为：' + e.detail.value)
      },
      onMultiPickerColumnChange(e : UniPickerChangeEvent) {
        console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
        this.multiIndex[e.detail.column] = e.detail.value as Array<number>
        switch (e.detail.column) {
          case 0: //拖动第1列
            switch (this.multiIndex[0]) {
              case 0:
                this.multiArray[1] = ['中国', '日本']
                this.multiArray[2] = ['北京', '上海', '广州']
                break
              case 1:
                this.multiArray[1] = ['英国', '法国']
                this.multiArray[2] = ['伦敦', '曼彻斯特']
                break
            }
            this.multiIndex.splice(1, 1, 0)
            this.multiIndex.splice(2, 1, 0)
            break
          case 1: //拖动第2列
            switch (this.multiIndex[0]) { //判断第一列是什么
              case 0:
                switch (this.multiIndex[1]) {
                  case 0:
                    this.multiArray[2] = ['北京', '上海', '广州']
                    break
                  case 1:
                    this.multiArray[2] = ['东京', '北海道']
                    break
                }
                break
              case 1:
                switch (this.multiIndex[1]) {
                  case 0:
                    this.multiArray[2] = ['伦敦', '曼彻斯特']
                    break
                  case 1:
                    this.multiArray[2] = ['巴黎', '马赛']
                    break
                }
                break
            }
            this.multiIndex.splice(2, 1, 0)
            break
        }
        this.$forceUpdate()
      },
      onDateChange(e : UniPickerChangeEvent) {
        this.date = e.detail.value as number
      },
      onTimeChange(e : UniPickerChangeEvent) {
        this.time = e.detail.value as string
      },
      // #endif
      onFormSubmit(e : UniFormSubmitEvent) {
        this.formData = e.detail.value

        // 仅测试
        this.testVerifySubmit = (e.type == 'submit' && (e.target?.tagName ?? '') == "FORM")
      },
      onFormReset(e : UniFormResetEvent) {
        this.formData = {}
        this.timeZoneIndex = 0

        // 仅测试
        this.testVerifyReset = (e.type == 'reset' && (e.target?.tagName ?? '') == "FORM")
      }
    }
  }
</script>

<style>
  .scroll-view {
    flex: 1;
  }

  .page {
    padding: 15px;
  }

  .flex-row {
    flex-direction: row;
    align-items: center;
  }

  .uni-form-item {
    padding: 15px 0;
  }

  .title {
    margin-bottom: 10px;
    opacity: 0.8;
  }

  .picker {
    margin-left: 15px;
  }

  .group-item {
    flex-direction: row;
    margin-right: 20px;
  }

  .picker-view {
    width: 200px;
    height: 320px;
    margin-top: 10px;
  }

  .picker-view-item {
    height: 50px;
  }

  .picker-view-text {
    line-height: 50px;
    text-align: center;
  }

  .btn {
    flex: 1;
  }

  .btn-submit {
    margin-right: 5px;
  }

  .btn-reset {
    margin-left: 5px;
  }

  .result {
    margin-top: 30px;
  }

  .textarea {
    margin-top: 5px;
    padding: 5px;
    background-color: #fff;
  }
</style>