williamet/jinhuaihua-h5
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
熊丽君
2021-09-03 18:50:36 +08:00
parent 1d6989e2b1
commit 03ac65acaf
4 changed files with 275 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
App.vue
View File

@ -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>

10
pages.json
View File

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

136
pages/index/fillForm.vue Normal file
View File

@ -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>

144
pages/index/index.vue
View File

@ -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"><u-parse :html="info.note"></u-parse></view>
</view>
<view class="u-content ql-editor img"><u-parse :html="info.note"></u-parse></view>
</div>
<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: {},
form: {
name: '',
intro: '',
phone: '',
sex: '',
sex3: '',
val: '',
},
show: false,
val: '',
arrCode: []
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>