234 lines
6.6 KiB
Vue
234 lines
6.6 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="info">
|
|
<div class="cro">
|
|
<div class="cro_left_bottom"></div>
|
|
<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>
|
|
</div>
|
|
<div class="cro cro2">
|
|
<div class="cro_left_top"></div>
|
|
<div class="cro_right_top"></div>
|
|
<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>
|
|
<!-- <view class="m_btn"><u-button type="error" @click="handlePage">填写收货地址</u-button></view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getInfo } from '@/common/api.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
info: {},
|
|
options: {},
|
|
form: {
|
|
name: '',
|
|
intro: '',
|
|
phone: '',
|
|
sex: '',
|
|
sex3: '',
|
|
val: '',
|
|
},
|
|
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 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.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: 100vh;
|
|
background: url(../../static/bgi.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: auto;
|
|
.info {
|
|
padding: 52rpx 25rpx 34rpx;
|
|
.cro {
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
border-radius: 15px 15px 0 0;
|
|
.img {
|
|
padding: 40rpx;
|
|
font-size: 30rpx;
|
|
color: #666666;
|
|
.u-image {
|
|
border-radius: 15px !important;
|
|
overflow: hidden !important;
|
|
}
|
|
}
|
|
}
|
|
.cro2 {
|
|
width: 100%;
|
|
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,
|
|
.cro_right_bottom {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
z-index: 1;
|
|
background-color: #fc843f;
|
|
}
|
|
.cro_left_top {
|
|
top: -1px;
|
|
left: -1px;
|
|
border-radius: 0 0 10px 0;
|
|
}
|
|
.cro_right_top {
|
|
top: -1px;
|
|
right: -1px;
|
|
background-color: #f99954;
|
|
border-radius: 0 0 0 10px;
|
|
}
|
|
.cro_left_bottom {
|
|
left: -1px;
|
|
bottom: -1px;
|
|
border-radius: 0 10px 0 0;
|
|
}
|
|
.cro_right_bottom {
|
|
right: -1px;
|
|
bottom: -1px;
|
|
background-color: #f99954;
|
|
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>
|