|
|
@@ -0,0 +1,166 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-card padding="30" box-shadow="0px 1px 10px rgba(0,0,0,0.2)" border-radius="20" :show-foot="false">
|
|
|
+ <view slot="head">
|
|
|
+ <view class="u-flex">
|
|
|
+ <view style="width: 8rpx;height: 34rpx;background: #0292FD;margin-right:20rpx;"></view>
|
|
|
+ 基本信息
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view slot="body">
|
|
|
+ <u-form :model="form" ref="uForm">
|
|
|
+ <u-form-item prop="store">
|
|
|
+ <view style="margin-right: 10rpx;">
|
|
|
+ <u-icon name="home" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-input v-model="form.store" placeholder="请输入门店名称" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item prop="company">
|
|
|
+ <view style="margin-right: 10rpx;">
|
|
|
+ <u-icon name="home" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-input v-model="form.company" placeholder="请输入公司名称" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item prop="name">
|
|
|
+ <view style="margin-right: 10rpx;">
|
|
|
+ <u-icon name="account" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-input v-model="form.name" placeholder="请输入联系人" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item prop="phone">
|
|
|
+ <view style="margin-right: 10rpx;">
|
|
|
+ <u-icon name="phone" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-input v-model="form.phone" placeholder="请输入联系电话" type="number"/>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item prop="code">
|
|
|
+ <view style="margin-right: 10rpx;">
|
|
|
+ <u-icon name="lock" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-input v-model="form.code" placeholder="请输入验证码" type="number"/>
|
|
|
+ <view class="" slot="right">
|
|
|
+ <u-button size="mini" type="primary" @click="getCode" shape="circle">{{codeText}}</u-button>
|
|
|
+ </view>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item prop="region">
|
|
|
+ <view style="margin-right: 10rpx;">
|
|
|
+ <u-icon name="map" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-input :select-open="pickerShow" v-model="form.region" placeholder="点击选择省市区" @click="pickerShow = true" :disabled="true"></u-input>
|
|
|
+ <view class="" slot="right">
|
|
|
+ <u-icon name="arrow-right" color="#666666" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item>
|
|
|
+ <view style="margin-right: 10rpx;">
|
|
|
+ <u-icon name="map" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ <u-input placeholder="点击选择详细地址"></u-input>
|
|
|
+ <view class="" slot="right">
|
|
|
+ <u-icon name="arrow-right" color="#666666" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ </u-form-item>
|
|
|
+ </u-form>
|
|
|
+ <u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
|
|
|
+ <u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
|
|
|
+ </view>
|
|
|
+ </u-card>
|
|
|
+ <view style="margin: 30rpx;">
|
|
|
+ <u-button @click="nextStep" type="primary">下一步</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ codeText: '',
|
|
|
+ pickerShow: false,
|
|
|
+ form: {
|
|
|
+ store: '',
|
|
|
+ company: '',
|
|
|
+ name: "",
|
|
|
+ phone: "",
|
|
|
+ code: '',
|
|
|
+ region: '',
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ store: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入门店名称',
|
|
|
+ trigger: 'blur,change'
|
|
|
+ }],
|
|
|
+ company: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入公司名称',
|
|
|
+ trigger: 'blur,change'
|
|
|
+ }],
|
|
|
+ name: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入联系人',
|
|
|
+ trigger: 'blur,change'
|
|
|
+ }],
|
|
|
+ phone: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入联系电话',
|
|
|
+ trigger: 'blur,change'
|
|
|
+ }],
|
|
|
+ code: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入验证码',
|
|
|
+ trigger: 'blur,change'
|
|
|
+ }],
|
|
|
+ region: [{
|
|
|
+ required: true,
|
|
|
+ message: '请选择地区',
|
|
|
+ trigger: 'change',
|
|
|
+ }],
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ nextStep() {
|
|
|
+ this.$refs.uForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ console.log('验证通过');
|
|
|
+ this.$u.route({
|
|
|
+ url: 'pages/login/register_3',
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.log('验证失败');
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ codeChange(text) {
|
|
|
+ this.codeText = text;
|
|
|
+ },
|
|
|
+ getCode() {
|
|
|
+ if (this.$refs.uCode.canGetCode) {
|
|
|
+ // 模拟向后端请求验证码
|
|
|
+ uni.showLoading({
|
|
|
+ title: '正在获取验证码',
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ // 通知验证码组件内部开始倒计时
|
|
|
+ this.$refs.uCode.start();
|
|
|
+ }, 1000);
|
|
|
+ } else {
|
|
|
+ this.$u.toast('倒计时结束后再发送');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ regionConfirm(e) {
|
|
|
+ this.form.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.$refs.uForm.setRules(this.rules);
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+</style>
|
qukaidi
