提交

App.vue

@@ -15,6 +15,4 @@
 <style lang="scss">
 	/*每个页面公共css */
   @import "uview-ui/index.scss";
-  @import "static/css/quill.core.css";
-  @import "static/css/quill.snow.css";
 </style>

pages.json

@@ -12,6 +12,16 @@
           "titleNView": false
         }
       }
+    }, {
+      "path": "pages/index/fillForm",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom",
+        "app-plus": {
+          "titleNView": false
+        }
+      }
     }
   ],
   "globalStyle": {

pages/index/fillForm.vue

@@ -0,0 +1,136 @@
+<template>
+  <view class="content">
+    <view class="info">
+      <div class="cro">
+        <!-- :error-type="['border-bottom']" -->
+        <u-form :model="form" ref="uForm" label-width="200" :label-style="{ color: '#333333', fontSize: '34rpx', fontWeight: 'bold' }">
+          <view style="text-align: center;color: #333;font-size: 36rpx;font-weight: bold;">添加收货地址</view>
+          <u-form-item label="收货人" prop="name"><u-input v-model="form.name" placeholder="请填写收货人姓名" /></u-form-item>
+          <u-form-item label="手机号码" prop="phone"><u-input placeholder="请填写收货人手机号" v-model="form.phone" type="number" maxlength="11"></u-input></u-form-item>
+          <u-form-item label="验证码" prop="code">
+            <u-input placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
+            <view slot="right" @click="getCode" style="color: #F09B38;">{{ codeTips }}</view>
+          </u-form-item>
+          <u-form-item label="单位"><u-input v-model="form.sex" type="text" placeholder="请填写单位名称" /></u-form-item>
+          <u-form-item label="选择地区"><u-input v-model="form.sex2" type="select" placeholder="请选择省市区" /></u-form-item>
+          <u-form-item label="详细地址" prop="sex3"><u-input v-model="form.sex3" type="text" placeholder="街道楼栋门牌号" /></u-form-item>
+        </u-form>
+        <u-button @click="submit">提交</u-button>
+        <u-picker mode="region" v-model="show" :area-code="arrCode" @confirm="change"></u-picker>
+        <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
+      </div>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getInfo } from '@/common/api.js'
+export default {
+  data() {
+    return {
+      form: {
+        name: '',
+        intro: '',
+        phone: '',
+        sex: '',
+        sex3: ''
+      },
+      show: false,
+      val: '',
+      arrCode: [],
+      radio: '',
+      switchVal: false,
+      codeTips: '',
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '请输入姓名',
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ['change', 'blur']
+          }
+        ],
+        intro: [
+          {
+            required: true,
+            min: 5,
+            message: '简介不能少于5个字',
+            trigger: 'blur'
+          }
+        ],
+        sex3: [
+          {
+            required: true,
+            message: '请输入详细地址',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    submit() {
+      this.$refs.uForm.validate(valid => {
+        if (valid) {
+          console.log('验证通过')
+        } else {
+          console.log('验证失败')
+        }
+      })
+    },
+    codeChange(text) {
+      this.codeTips = text
+    },
+    // 获取验证码
+    getCode() {
+      if (this.$refs.uCode.canGetCode) {
+        // 模拟向后端请求验证码
+        uni.showLoading({
+          title: '正在获取验证码',
+          mask: true
+        })
+        setTimeout(() => {
+          uni.hideLoading()
+          // 这里此提示会被this.start()方法中的提示覆盖
+          this.$u.toast('验证码已发送')
+          // 通知验证码组件内部开始倒计时
+          this.$refs.uCode.start()
+        }, 2000)
+      } else {
+        this.$u.toast('倒计时结束后再发送')
+      }
+    },
+    change(e) {
+      this.val = e.province.label + e.city.label + e.area.label
+      this.arrCode = [e.province.value, e.city.value, e.area.value]
+    }
+  },
+  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
+  onReady() {
+    this.$refs.uForm.setRules(this.rules)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '/static/css/quill.core.css';
+@import '/static/css/quill.snow.css';
+.content {
+  height: 100vh;
+  background: url(../../static/bgi.png) no-repeat;
+  background-size: 100% 100%;
+  padding: 52rpx 25rpx 34rpx;
+  .info {
+    background-color: #ffffff;
+    border-radius: 15px;
+    .cro {
+      padding: 40rpx;
+      // /deep/.uni-input-placeholder,
+      /deep/.uni-input-input {
+        color: #666 !important;
+        font-size: 30rpx;
+      }
+    }
+  }
+}
+</style>

pages/index/index.vue

@@ -12,17 +12,27 @@
       <div class="cro cro2">
         <div class="cro_left_top"></div>
         <div class="cro_right_top"></div>
-        <view class="img">
+        <view class="u-content ql-editor img"><u-parse :html="info.note"></u-parse></view>
-          <view class="u-content"><u-parse :html="info.note"></u-parse></view>
+      </div>
-        </view>
+      <div class="cro3">
+        <!-- :error-type="['border-bottom']" -->
+        <u-form :model="form" ref="uForm" label-width="200" :label-style="{ color: '#333333', fontSize: '34rpx', fontWeight: 'bold' }">
+          <view style="text-align: center;color: #333;font-size: 36rpx;font-weight: bold;">添加收货地址</view>
+          <u-form-item label="收货人" prop="name"><u-input v-model="form.name" placeholder="请填写收货人姓名" /></u-form-item>
+          <u-form-item label="手机号码" prop="phone"><u-input placeholder="请填写收货人手机号" v-model="form.phone" type="number" maxlength="11"></u-input></u-form-item>
+          <u-form-item label="验证码" prop="code">
+            <u-input placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
+            <view slot="right" @click="getCode" style="color: #F09B38;">{{ codeTips }}</view>
+          </u-form-item>
+          <u-form-item label="选择地区"><u-input v-model="form.val" type="select" placeholder="请选择省市区" @click="show=true" /></u-form-item>
+          <u-form-item label="详细地址" prop="sex3"><u-input v-model="form.sex3" type="text" placeholder="街道楼栋门牌号" /></u-form-item>
+        </u-form>
+        <u-button class="custom-style" shape="circle" hover-class="none" @click="submit">提交</u-button>
+        <u-picker mode="region" v-model="show" :area-code="arrCode" @confirm="change"></u-picker>
+        <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
       </div>
-      <!-- <view class="" @click="show = true">设置城市</view>
-      <view class="">{{ val }}</view>
-      <u-picker mode="region" v-model="show" :area-code="arrCode" @confirm="change"></u-picker> -->
-    </view>
-    <view class="" style="position: absolute;bottom: 0;width: 100%;">
-      <u-button type="error" style="background: #FF4900;border-radius: 0;height: 100rpx;font-size: 36rpx;color: #FFFEFD;">填写收货地址</u-button>
     </view>
+    <!-- <view class="m_btn"><u-button type="error" @click="handlePage">填写收货地址</u-button></view> -->
   </view>
 </template>
 
@@ -33,32 +43,106 @@ export default {
     return {
       info: {},
       options: {},
-      show: false,
+      form: {
+        name: '',
+        intro: '',
+        phone: '',
+        sex: '',
+        sex3: '',
         val: '',
-      arrCode: []
+      },
+      show: false,
+      arrCode: [],
+      radio: '',
+      switchVal: false,
+      codeTips: '',
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '请输入姓名',
+            // 可以单个或者同时写两个触发验证方式
+            trigger: ['change', 'blur']
+          }
+        ],
+        intro: [
+          {
+            required: true,
+            min: 5,
+            message: '简介不能少于5个字',
+            trigger: 'blur'
+          }
+        ],
+        sex3: [
+          {
+            required: true,
+            message: '请输入详细地址',
+            trigger: 'blur'
+          }
+        ]
+      }
     }
   },
   onLoad(options) {
-    if (!options.id) return uni.$showMsg('请扫描二维码访问')
+    if (!options.id) return this.$u.toast('请扫描二维码访问')
+    // uni.$showMsg('请扫描二维码访问')
     this.options = options
     getInfo(options).then(({ data }) => {
       this.info = data
     })
   },
   methods: {
+    submit() {
+      this.$refs.uForm.validate(valid => {
+        if (valid) {
+          console.log('验证通过')
+        } else {
+          console.log('验证失败')
+        }
+      })
+    },
+    codeChange(text) {
+      this.codeTips = text
+    },
+    // 获取验证码
+    getCode() {
+      if (this.$refs.uCode.canGetCode) {
+        // 模拟向后端请求验证码
+        uni.showLoading({
+          title: '正在获取验证码',
+          mask: true
+        })
+        setTimeout(() => {
+          uni.hideLoading()
+          // 这里此提示会被this.start()方法中的提示覆盖
+          this.$u.toast('验证码已发送')
+          // 通知验证码组件内部开始倒计时
+          this.$refs.uCode.start()
+        }, 2000)
+      } else {
+        this.$u.toast('倒计时结束后再发送')
+      }
+    },
     change(e) {
-      this.val = e.province.label + e.city.label + e.area.label
+      this.form.val = e.province.label + e.city.label + e.area.label
       this.arrCode = [e.province.value, e.city.value, e.area.value]
     }
+  },
+  onReady() {
+    this.$refs.uForm.setRules(this.rules)
   }
 }
 </script>
 
 <style lang="scss" scoped>
+@import '/static/css/quill.core.css';
+@import '/static/css/quill.snow.css';
 .content {
-  height: calc(100vh - 100rpx);
+  // height: calc(100vh - 100rpx);
+  height: 100vh;
   background: url(../../static/bgi.png) no-repeat;
   background-size: 100% 100%;
+  overflow: auto;
   .info {
     padding: 52rpx 25rpx 34rpx;
     .cro {
@@ -68,6 +152,8 @@ export default {
       border-radius: 15px 15px 0 0;
       .img {
         padding: 40rpx;
+        font-size: 30rpx;
+        color: #666666;
         .u-image {
           border-radius: 15px !important;
           overflow: hidden !important;
@@ -76,12 +162,21 @@ export default {
     }
     .cro2 {
       width: 100%;
-      height: 100px;
       border-top: 1px dashed #dedede;
       background-color: #ffffff;
       position: relative;
       border-radius: 0 0 15px 15px;
     }
+    .cro3 {
+      margin-top: 15px;
+      background-color: #ffffff;
+      padding: 40rpx;
+      border-radius: 15px;
+      /deep/.uni-input-input {
+        color: #666 !important;
+        font-size: 30rpx;
+      }
+    }
     .cro_left_top,
     .cro_right_top,
     .cro_left_bottom,
@@ -115,5 +210,24 @@ export default {
       border-radius: 10px 0 0 0;
     }
   }
+  .custom-style {
+    height: 88rpx;
+    color: #fffefd;
+    background: #f09b38;
+    border-radius: 44px;
+    font-size: 36rpx;
+  }
+  .m_btn {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    .u-btn {
+      background: #ff4900;
+      border-radius: 0;
+      height: 100rpx;
+      font-size: 36rpx;
+      color: #fffefd;
+    }
+  }
 }
 </style>