123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163 |
- <template>
- <view class="apply-wrap">
- <view class="login-body">
- <u-form :model="form" :error-type="['toast']" ref="uForm" label-position="top">
- <u-form-item label="门店名称" required prop="name">
- <u-input v-model="form.name" maxlength="30" placeholder="请输入门店名称(最多30个字符)"/>
- </u-form-item>
- <u-form-item label="门店地址" required prop="addrDetail">
- <u-input v-model="form.addrDetail" placeholder="请输入门店详细地址"/>
- </u-form-item>
- <u-form-item label="手机号码" required prop="contactPhone">
- <u-input v-model="form.contactPhone" type="number" maxlength="11" placeholder="请输入手机号码"/>
- </u-form-item>
- <u-form-item label="姓名" required prop="userName">
- <u-input v-model="form.userName" maxlength="11" placeholder="请输入姓名"/>
- </u-form-item>
- </u-form>
- <view class="login-form">
- <view class="form-btn-con">
- <button class="form-btn" :style="{background:$config('primaryColor')}" @click="formSubmit">提交</button>
- <text class="apply-btn" @click="goLogin">已有账号?去登录</text>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import Address from '@/components/address.vue'
- import { clzConfirm } from '@/libs/tools.js'
- import { register } from '@/api/user.js'
- export default{
- components: {
- Address,
- },
- data(){
- return{
- theme: '',
- form: {
- name: '',
- addrProvince: '',
- addrCity: '',
- addrDistrict: '',
- addrDetail: '',
- contactPhone: '',
- userName: '',
- },
- rules: {
- name: [
- {
- required: true,
- message: '请输入门店名称',
- // 可以单个或者同时写两个触发验证方式
- trigger: ['change','blur'],
- }
- ],
- addrDetail: [
- {
- required: true,
- message: '请输入详细地址',
- trigger: 'change'
- }
- ],
- contactPhone: [
- {
- required: true,
- message: '请输入手机号',
- trigger: 'change'
- }
- ],
- userName: [
- {
- required: true,
- message: '请输入姓名',
- trigger: 'change'
- }
- ],
- },
- areaIdArr: [], // 省市区id数组
- }
- },
- // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
- onReady() {
- this.$refs.uForm.setRules(this.rules);
- this.theme = getApp().globalData.theme;
- },
- methods: {
- // 表单提交
- formSubmit(){
- this.$refs.uForm.validate(valid => {
- if (valid) {
- console.log('验证通过');
- this.submitData()
- } else {
- console.log('验证失败');
- }
- });
- },
- submitData(){
- let obj = this.form
- // 申请试用
- uni.showLoading({
- title: '正在提交申请...'
- })
- register(obj).then(res => {
- uni.hideLoading()
- clzConfirm({
- title: '提示',
- content: '资料已提交成功,客服会在3个工作日内同您联系。请保持电话畅通,谢谢!',
- showCancel: false,
- success: function (ret) {
- if (ret.confirm||ret.index==0) {
- uni.reLaunch({
- url: '/pages/login/login'
- })
- }
- }
- })
- })
- },
- // 选择省区市
- areaConfirm(e) {
- console.log('已选择的省市区', e)
- this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
- this.form.label = e.label
- },
- openAddress(){
- // 省市区 回显 参数为省市区id数组
- this.$refs.applyAddress.open(this.areaIdArr)
- },
- // 去登录
- goLogin(){
- uni.navigateBack()
- },
- }
- }
- </script>
- <style scoped lang="scss">
- @import './login.scss';
- .apply-wrap .login-form{
- padding-top: 40upx;
- .form-btn-con{
- margin: 0;
- }
- }
- .apply-wrap .login-body{
- display: block;
- }
- .apply-wrap .authUserYs{
- padding: 60upx 0 30upx 0;
- }
- .getcode-btn {
- color: #0485F6 !important;
- border: none !important;
- background: none !important;
- font-size: 28upx;
- margin: 0;
- padding: 0;
- &:after{
- border: none !important;
- }
- }
- </style>
|