提交
This commit is contained in:
熊丽君
@ -1,135 +1,44 @@
|
||||
<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>
|
||||
<u-image width="203rpx" height="184rpx" :src="img"></u-image>
|
||||
<view class="text">包裹已整装待发~</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getInfo } from '@/common/api.js'
|
||||
import img from '@/static/icon.png'
|
||||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
img: img
|
||||
}
|
||||
},
|
||||
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)
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</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 {
|
||||
height: 100%;
|
||||
padding-top: 206rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 15px;
|
||||
.cro {
|
||||
padding: 40rpx;
|
||||
// /deep/.uni-input-placeholder,
|
||||
/deep/.uni-input-input {
|
||||
color: #666 !important;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.u-image {
|
||||
margin: auto;
|
||||
}
|
||||
.text {
|
||||
margin-top: 40rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="cro_right_bottom"></div>
|
||||
<view class="img">
|
||||
<u-image width="100%" height="580rpx" :src="info.pic"></u-image>
|
||||
<view class="" style="font-size: 36rpx;color: #333333;margin-top: 40rpx;">红色西柚新鲜砧板水果原产地加拿大美食新鲜爆汁5斤</view>
|
||||
<view class="" style="font-size: 36rpx;color: #333333;margin-top: 40rpx;">{{ info.name }}</view>
|
||||
</view>
|
||||
</div>
|
||||
<div class="cro cro2">
|
||||
@ -24,20 +24,22 @@
|
||||
<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-item label="选择地区" prop="city"><u-input v-model="form.city" type="select" placeholder="请选择省市区" @click="show = true" /></u-form-item>
|
||||
<u-form-item label="详细地址" prop="details"><u-input v-model="form.details" type="text" placeholder="街道楼栋门牌号" /></u-form-item>
|
||||
</u-form>
|
||||
<u-button class="custom-style" shape="circle" hover-class="none" @click="submit">提交</u-button>
|
||||
<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>
|
||||
<!-- <view class="m_btn"><u-button type="error" @click="handlePage">填写收货地址</u-button></view> -->
|
||||
<u-popup v-model="show2" mode="center" border-radius="14" :mask-close-able="false" closeable width="60%" height="100px">
|
||||
<view style="height: 100%;line-height: 100px;text-align: center;">{{ message }}</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getInfo } from '@/common/api.js'
|
||||
import { getInfo, getCode, addOrder } from '@/common/api.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -45,13 +47,14 @@ export default {
|
||||
options: {},
|
||||
form: {
|
||||
name: '',
|
||||
intro: '',
|
||||
phone: '',
|
||||
sex: '',
|
||||
sex3: '',
|
||||
val: '',
|
||||
city: '',
|
||||
details: '',
|
||||
address: ''
|
||||
},
|
||||
show: false,
|
||||
show2: false,
|
||||
message: '',
|
||||
arrCode: [],
|
||||
radio: '',
|
||||
switchVal: false,
|
||||
@ -65,15 +68,29 @@ export default {
|
||||
trigger: ['change', 'blur']
|
||||
}
|
||||
],
|
||||
intro: [
|
||||
phone: [
|
||||
{
|
||||
required: true,
|
||||
min: 5,
|
||||
message: '简介不能少于5个字',
|
||||
min: 11,
|
||||
message: '请输入正确的手机号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
sex3: [
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
city: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
details: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入详细地址',
|
||||
@ -96,6 +113,22 @@ export default {
|
||||
this.$refs.uForm.validate(valid => {
|
||||
if (valid) {
|
||||
console.log('验证通过')
|
||||
this.form.address = this.form.city + this.form.details
|
||||
this.form.activityId = this.options.id
|
||||
addOrder(this.form)
|
||||
.then(({ code, message }) => {
|
||||
if (code != 200) {
|
||||
this.show2 = true
|
||||
this.message = message
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url:'/pages/index/fillForm'
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
} else {
|
||||
console.log('验证失败')
|
||||
}
|
||||
@ -107,24 +140,29 @@ export default {
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
if (this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
if (this.form.phone.length !== 11) return
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码',
|
||||
mask: true
|
||||
})
|
||||
setTimeout(() => {
|
||||
getCode({ phone: this.form.phone, activityId: this.options.id }).then(({ code, data, message }) => {
|
||||
if (code != 200) {
|
||||
this.show2 = true
|
||||
this.message = message
|
||||
return
|
||||
}
|
||||
this.form.unit = data.unit
|
||||
this.form.id = data.id
|
||||
uni.hideLoading()
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
this.$u.toast('验证码已发送')
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start()
|
||||
}, 2000)
|
||||
})
|
||||
} else {
|
||||
this.$u.toast('倒计时结束后再发送')
|
||||
}
|
||||
},
|
||||
change(e) {
|
||||
this.form.val = e.province.label + e.city.label + e.area.label
|
||||
this.form.city = e.province.label + e.city.label + e.area.label
|
||||
this.arrCode = [e.province.value, e.city.value, e.area.value]
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user