|
|
@@ -4,8 +4,11 @@
|
|
|
<ul>
|
|
|
<li class="introduce-wrap">
|
|
|
<div class="main">
|
|
|
- <img src="./image/introduce@2x.png" alt="">
|
|
|
- <a class="login" href="javascript:;" @click="showEditInfo = true">注册领会员</a>
|
|
|
+ <ul class="member-benefits">
|
|
|
+ <li v-for="(item, index) in memberBenefits" :key="index" @click="handleObjBenefits(item)"></li>
|
|
|
+ </ul>
|
|
|
+ <a class="login" href="javascript:;" v-if="checkMyBenfits === 1 && isRegistered">已领取</a>
|
|
|
+ <a class="login" href="javascript:;" @click="showEditInfo = true" v-else>注册领会员</a>
|
|
|
<p class="checked-wrap">
|
|
|
<img src="./image/checked@2x.png" alt="">
|
|
|
<span>注册代表您同意</span>
|
|
|
@@ -45,7 +48,7 @@
|
|
|
<div class="value-wrap">
|
|
|
<input type="tel" placeholder="请输入验证码" v-myBlur v-model.trim="postData.code" @input="funLimitLength">
|
|
|
</div>
|
|
|
- <button class="get-code" @click="funGetCode">{{[0, 60].includes(numCount) ? '获取': numCount + '秒'}}</button>
|
|
|
+ <button class="get-code" @click="funGetCode">{{[0, 60].includes(numCount) ? '获取' : numCount + '秒'}}</button>
|
|
|
</li>
|
|
|
<li>
|
|
|
<label class="required">
|
|
|
@@ -62,9 +65,11 @@
|
|
|
<span class="label-city" v-for="(str, index) in '城市：城市'" :key="index">{{ str }}</span>
|
|
|
</label>
|
|
|
<div class="value-wrap" @click="showPicker0 = true">
|
|
|
- <p class="value-city" v-show="postData.orderUserProvince">{{ postData.orderUserProvince +
|
|
|
- postData.orderUserCity +
|
|
|
- postData.orderUserDistrict}}</p>
|
|
|
+ <p class="value-city" v-show="postData.orderUserProvince">{{
|
|
|
+ postData.orderUserProvince +
|
|
|
+ postData.orderUserCity +
|
|
|
+ postData.orderUserDistrict
|
|
|
+ }}</p>
|
|
|
<p class="value-city init" v-show="!postData.orderUserProvince">请选择所在城市</p>
|
|
|
<img class="icon_next" src="./image/btn_next@2x.png" alt="">
|
|
|
</div>
|
|
|
@@ -125,576 +130,690 @@
|
|
|
@cancel="showPicker2 = false"
|
|
|
@confirm="onConfirm2"/>
|
|
|
</van-popup>
|
|
|
+ <van-popup class="popup-benefits" v-model="objBenefits.show">
|
|
|
+ <p class="benefits-title">{{ objBenefits.title }}</p>
|
|
|
+ <p class="benefits-msg">{{ objBenefits.msg }}</p>
|
|
|
+ </van-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import BScroll from 'better-scroll'
|
|
|
- import { Picker, Popup, Toast } from 'vant'
|
|
|
- import { getChinaArea, sendSMS } from '../../../api/common'
|
|
|
- import { getCommunity, register } from './api'
|
|
|
- import { getUserInfo } from '../mine/api'
|
|
|
-
|
|
|
- const STRCAPTURE = process.env.API_DOMAIN + '/api/captcha'
|
|
|
- export default {
|
|
|
- name: 'register',
|
|
|
- components: {
|
|
|
- 'van-popup': Popup,
|
|
|
- 'van-picker': Picker
|
|
|
- },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- scroll: null,
|
|
|
- showEditInfo: false,
|
|
|
- postData: {
|
|
|
- orderUserName: '', // 用户名称
|
|
|
- orderUserPhone: '', // 手机号码
|
|
|
- code: '',
|
|
|
- capture: '',
|
|
|
- orderUserProvince: '', // 省份
|
|
|
- orderUserCity: '', // 城市
|
|
|
- orderUserDistrict: '', // 区域
|
|
|
- orderCommunity: '', // 小区
|
|
|
- orderBuilding: '', // 楼号
|
|
|
- orderRoom: '' // 房号
|
|
|
+import BScroll from 'better-scroll'
|
|
|
+import { Picker, Popup, Toast } from 'vant'
|
|
|
+import { getChinaArea, sendSMS } from '../../../api/common'
|
|
|
+import { getCommunity, register } from './api'
|
|
|
+import { getUserInfo } from '../mine/api'
|
|
|
+
|
|
|
+const STRCAPTURE = process.env.API_DOMAIN + '/api/captcha'
|
|
|
+const memberBenefits = [
|
|
|
+ {
|
|
|
+ title: '私人客服',
|
|
|
+ msg: '为每一位妥妥会员安排一位专属的私人客服。'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '专车接送',
|
|
|
+ msg: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '"头等舱"服',
|
|
|
+ msg: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '新人有礼',
|
|
|
+ msg: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '周边福利',
|
|
|
+ msg: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '妥妥秒杀',
|
|
|
+ msg: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '分享有礼',
|
|
|
+ msg: ''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '家装妥妥帮',
|
|
|
+ msg: ''
|
|
|
+
|
|
|
+ }
|
|
|
+]
|
|
|
+export default {
|
|
|
+ name: 'register',
|
|
|
+ components: {
|
|
|
+ 'van-popup': Popup,
|
|
|
+ 'van-picker': Picker
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ scroll: null,
|
|
|
+ showEditInfo: false,
|
|
|
+ postData: {
|
|
|
+ orderUserName: '', // 用户名称
|
|
|
+ orderUserPhone: '', // 手机号码
|
|
|
+ code: '',
|
|
|
+ capture: '',
|
|
|
+ orderUserProvince: '', // 省份
|
|
|
+ orderUserCity: '', // 城市
|
|
|
+ orderUserDistrict: '', // 区域
|
|
|
+ orderCommunity: '', // 小区
|
|
|
+ orderBuilding: '', // 楼号
|
|
|
+ orderRoom: '' // 房号
|
|
|
+ },
|
|
|
+ arrErrorList: [],
|
|
|
+ showPicker0: false,
|
|
|
+ columnsOfCity: [],
|
|
|
+ showPicker1: false,
|
|
|
+ columnsOfCommunity: [],
|
|
|
+ showPicker2: false,
|
|
|
+ columnsOfBuildingy: [
|
|
|
+ {
|
|
|
+ values: BUILDING(),
|
|
|
+ defaultIndex: 0
|
|
|
},
|
|
|
- arrErrorList: [],
|
|
|
- showPicker0: false,
|
|
|
- columnsOfCity: [],
|
|
|
- showPicker1: false,
|
|
|
- columnsOfCommunity: [],
|
|
|
- showPicker2: false,
|
|
|
- columnsOfBuildingy: [
|
|
|
- {
|
|
|
- values: BUILDING(),
|
|
|
- defaultIndex: 0
|
|
|
- },
|
|
|
- {
|
|
|
- values: ROOM(),
|
|
|
- defaultIndex: 0
|
|
|
- }
|
|
|
- ],
|
|
|
- numCount: 60,
|
|
|
- strCapture: STRCAPTURE,
|
|
|
- timer: null,
|
|
|
- numPositionY: 0
|
|
|
- }
|
|
|
- },
|
|
|
- async mounted () {
|
|
|
- this.funGetChinaArea()
|
|
|
- await this.$nextTick()
|
|
|
- const textarea = this.$refs.myTextarea
|
|
|
- if (textarea) {
|
|
|
- this.handleTextarea(textarea)
|
|
|
+ {
|
|
|
+ values: ROOM(),
|
|
|
+ defaultIndex: 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ numCount: 60,
|
|
|
+ strCapture: STRCAPTURE,
|
|
|
+ timer: null,
|
|
|
+ numPositionY: 0,
|
|
|
+ isRegistered: false, // 是否注册
|
|
|
+ objBenefits: {
|
|
|
+ show: false,
|
|
|
+ title: '',
|
|
|
+ msg: ''
|
|
|
+ },
|
|
|
+ memberBenefits: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async mounted () {
|
|
|
+ this.funGetChinaArea()
|
|
|
+ await this.$nextTick()
|
|
|
+ const textarea = this.$refs.myTextarea
|
|
|
+ if (textarea) {
|
|
|
+ this.handleTextarea(textarea)
|
|
|
+ textarea.addEventListener('input', this.handleTextarea(textarea, 1), false)
|
|
|
+ this.$once('hook:beforeDestroy', () => {
|
|
|
textarea.addEventListener('input', this.handleTextarea(textarea, 1), false)
|
|
|
- this.$once('hook:beforeDestroy', () => {
|
|
|
- textarea.addEventListener('input', this.handleTextarea(textarea, 1), false)
|
|
|
- })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activated () {
|
|
|
+ if (!this.$route.meta.isUseCache) {
|
|
|
+ this.showEditInfo = false
|
|
|
+ this.postData = {
|
|
|
+ orderUserName: '', // 用户名称
|
|
|
+ orderUserPhone: '', // 手机号码
|
|
|
+ code: '',
|
|
|
+ capture: '',
|
|
|
+ orderUserProvince: '', // 省份
|
|
|
+ orderUserCity: '', // 城市
|
|
|
+ orderUserDistrict: '', // 区域
|
|
|
+ orderCommunity: '', // 小区
|
|
|
+ orderBuilding: '', // 楼号
|
|
|
+ orderRoom: '' // 房号
|
|
|
}
|
|
|
- },
|
|
|
- activated () {
|
|
|
- if (!this.$route.meta.isUseCache) {
|
|
|
- this.showEditInfo = false
|
|
|
- this.postData = {
|
|
|
- orderUserName: '', // 用户名称
|
|
|
- orderUserPhone: '', // 手机号码
|
|
|
- code: '',
|
|
|
- capture: '',
|
|
|
- orderUserProvince: '', // 省份
|
|
|
- orderUserCity: '', // 城市
|
|
|
- orderUserDistrict: '', // 区域
|
|
|
- orderCommunity: '', // 小区
|
|
|
- orderBuilding: '', // 楼号
|
|
|
- orderRoom: '' // 房号
|
|
|
- }
|
|
|
- this.arrErrorList = []
|
|
|
- this.numCount = 60
|
|
|
- this.timer = null
|
|
|
- this.numPositionY = 0
|
|
|
- this.$nextTick(() => {
|
|
|
- if (!this.scroll) {
|
|
|
- this.scroll = new BScroll(this.$refs.wrapper, {
|
|
|
- click: true,
|
|
|
- pullUpLoad: {
|
|
|
- threshold: -20
|
|
|
- },
|
|
|
- scrollbar: true
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- this.funInit()
|
|
|
- this.fetchCommunity()
|
|
|
- } else {
|
|
|
- this.$nextTick(() => {
|
|
|
- if (this.scroll) {
|
|
|
- this.scroll.refresh()
|
|
|
- this.scroll.scrollTo(0, this.numPositionY)
|
|
|
- }
|
|
|
- })
|
|
|
- if (this.timer) {
|
|
|
- clearInterval(this.timer)
|
|
|
+ this.arrErrorList = []
|
|
|
+ this.numCount = 60
|
|
|
+ this.timer = null
|
|
|
+ this.numPositionY = 0
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (!this.scroll) {
|
|
|
+ this.scroll = new BScroll(this.$refs.wrapper, {
|
|
|
+ click: true,
|
|
|
+ pullUpLoad: {
|
|
|
+ threshold: -20
|
|
|
+ },
|
|
|
+ scrollbar: true
|
|
|
+ })
|
|
|
}
|
|
|
+ })
|
|
|
+ this.isRegistered = false
|
|
|
+ this.objBenefits = {
|
|
|
+ show: false,
|
|
|
+ title: '',
|
|
|
+ msg: ''
|
|
|
}
|
|
|
+ this.memberBenefits = memberBenefits
|
|
|
+ this.funInit()
|
|
|
+ this.fetchCommunity()
|
|
|
+ } else {
|
|
|
this.$nextTick(() => {
|
|
|
- this.$refreshTitle('注册')
|
|
|
+ if (this.scroll) {
|
|
|
+ this.scroll.refresh()
|
|
|
+ this.scroll.scrollTo(0, this.numPositionY)
|
|
|
+ }
|
|
|
})
|
|
|
- this.$route.meta.isUseCache = false
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refreshTitle('注册')
|
|
|
+ })
|
|
|
+ this.$route.meta.isUseCache = false
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ checkMyBenfits () {
|
|
|
+ return this.$store.getters['loan/checkMyBenfits']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleObjBenefits (item) {
|
|
|
+ this.objBenefits = {
|
|
|
+ ...item,
|
|
|
+ show: true
|
|
|
+ }
|
|
|
},
|
|
|
- methods: {
|
|
|
- funGetChinaArea () {
|
|
|
- getChinaArea().then(res => {
|
|
|
- if (res.status) {
|
|
|
- this.columnsOfCity = res.data.filter(province => province.text === '浙江').map(province => {
|
|
|
- return {
|
|
|
- ...province,
|
|
|
- children: province.children.filter(city => city.text === '杭州')
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- Toast(res.msg)
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- Toast(err)
|
|
|
- })
|
|
|
- },
|
|
|
- handleTextarea (el, auto) {
|
|
|
- return () => {
|
|
|
- if (auto) {
|
|
|
- el.style.height = 'auto'
|
|
|
- }
|
|
|
- el.style.height = el.scrollHeight + 'px'
|
|
|
+ funGetChinaArea () {
|
|
|
+ getChinaArea().then(res => {
|
|
|
+ if (res.status) {
|
|
|
+ this.columnsOfCity = res.data.filter(province => province.text === '浙江').map(province => {
|
|
|
+ return {
|
|
|
+ ...province,
|
|
|
+ children: province.children.filter(city => city.text === '杭州')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ Toast(res.msg)
|
|
|
}
|
|
|
- },
|
|
|
- onConfirm0 (value) {
|
|
|
- this.$set(this.postData, 'orderUserProvince', value[0])
|
|
|
- this.$set(this.postData, 'orderUserCity', value[1])
|
|
|
- this.$set(this.postData, 'orderUserDistrict', value[2])
|
|
|
- this.showPicker0 = false
|
|
|
- },
|
|
|
- onConfirm1 (value) {
|
|
|
- this.$set(this.postData, 'orderCommunity', value[0])
|
|
|
- this.showPicker1 = false
|
|
|
- },
|
|
|
- onConfirm2 (value) {
|
|
|
- this.$set(this.postData, 'orderBuilding', value[0] + value[1])
|
|
|
- this.showPicker2 = false
|
|
|
- },
|
|
|
- funLimitLength () {
|
|
|
- const { orderUserPhone, code } = this.postData
|
|
|
- this.postData.orderUserPhone = orderUserPhone.length > 11 ? orderUserPhone.slice(0, 11) : orderUserPhone
|
|
|
- this.postData.code = code.length > 4 ? code.slice(0, 4) : code
|
|
|
- },
|
|
|
- funCutDown () {
|
|
|
- clearInterval(this.timer)
|
|
|
- this.timer = setInterval(() => {
|
|
|
- if (this.numCount === 0) {
|
|
|
- clearInterval(this.timer)
|
|
|
- this.numCount = 0
|
|
|
- return
|
|
|
- }
|
|
|
- this.numCount--
|
|
|
- }, 1000)
|
|
|
- },
|
|
|
- // 获取验证码
|
|
|
- funGetCode () {
|
|
|
- const numCount = this.numCount
|
|
|
- const { orderUserPhone, capture } = this.postData
|
|
|
- if (numCount < 60 && numCount > 0) {
|
|
|
- return
|
|
|
+ }).catch(err => {
|
|
|
+ Toast(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleTextarea (el, auto) {
|
|
|
+ return () => {
|
|
|
+ if (auto) {
|
|
|
+ el.style.height = 'auto'
|
|
|
}
|
|
|
- this.numCount = 60
|
|
|
- if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(orderUserPhone))) {
|
|
|
- Toast('请输入手机号码')
|
|
|
+ el.style.height = el.scrollHeight + 'px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onConfirm0 (value) {
|
|
|
+ this.$set(this.postData, 'orderUserProvince', value[0])
|
|
|
+ this.$set(this.postData, 'orderUserCity', value[1])
|
|
|
+ this.$set(this.postData, 'orderUserDistrict', value[2])
|
|
|
+ this.showPicker0 = false
|
|
|
+ },
|
|
|
+ onConfirm1 (value) {
|
|
|
+ this.$set(this.postData, 'orderCommunity', value[0])
|
|
|
+ this.showPicker1 = false
|
|
|
+ },
|
|
|
+ onConfirm2 (value) {
|
|
|
+ this.$set(this.postData, 'orderBuilding', value[0] + value[1])
|
|
|
+ this.showPicker2 = false
|
|
|
+ },
|
|
|
+ funLimitLength () {
|
|
|
+ const { orderUserPhone, code } = this.postData
|
|
|
+ this.postData.orderUserPhone = orderUserPhone.length > 11 ? orderUserPhone.slice(0, 11) : orderUserPhone
|
|
|
+ this.postData.code = code.length > 4 ? code.slice(0, 4) : code
|
|
|
+ },
|
|
|
+ funCutDown () {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ if (this.numCount === 0) {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.numCount = 0
|
|
|
return
|
|
|
}
|
|
|
+ this.numCount--
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ // 获取验证码
|
|
|
+ funGetCode () {
|
|
|
+ const numCount = this.numCount
|
|
|
+ const { orderUserPhone, capture } = this.postData
|
|
|
+ if (numCount < 60 && numCount > 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.numCount = 60
|
|
|
+ if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(orderUserPhone))) {
|
|
|
+ Toast('请输入手机号码')
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- // if (!capture) {
|
|
|
- // Toast('请输入图片验证码')
|
|
|
- // return
|
|
|
- // }
|
|
|
- this.funCutDown()
|
|
|
- sendSMS(orderUserPhone, 3, capture).then(res => {
|
|
|
- if (res.status) {
|
|
|
- Toast('发送成功')
|
|
|
- } else {
|
|
|
- Toast(res.msg)
|
|
|
- this.funUpdateCapture()
|
|
|
- clearInterval(this.timer)
|
|
|
- this.numCount = 60
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- Toast(err.msg)
|
|
|
+ // if (!capture) {
|
|
|
+ // Toast('请输入图片验证码')
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ this.funCutDown()
|
|
|
+ sendSMS(orderUserPhone, 3, capture).then(res => {
|
|
|
+ if (res.status) {
|
|
|
+ Toast('发送成功')
|
|
|
+ } else {
|
|
|
+ Toast(res.msg)
|
|
|
this.funUpdateCapture()
|
|
|
clearInterval(this.timer)
|
|
|
this.numCount = 60
|
|
|
- })
|
|
|
- },
|
|
|
- verifyData () {
|
|
|
- const { orderUserName, orderUserPhone, code, orderUserProvince, orderUserCity, orderUserDistrict, orderCommunity, orderBuilding } = this.postData
|
|
|
- this.arrErrorList = []
|
|
|
- if (!/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(orderUserPhone)) {
|
|
|
- this.arrErrorList.push('请输入手机号码')
|
|
|
}
|
|
|
- if (!(/^\d{4}$/.test(code))) {
|
|
|
- this.arrErrorList.push('请输入验证码')
|
|
|
- }
|
|
|
- if (!orderUserName) {
|
|
|
- this.arrErrorList.push('请输入姓名')
|
|
|
- }
|
|
|
- if (!orderUserProvince || !orderUserCity || !orderUserDistrict) {
|
|
|
- this.arrErrorList.push('请选择所在城市')
|
|
|
- }
|
|
|
- if (!orderCommunity) {
|
|
|
- this.arrErrorList.push('请选择所在小区')
|
|
|
+ }).catch(err => {
|
|
|
+ Toast(err.msg)
|
|
|
+ this.funUpdateCapture()
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.numCount = 60
|
|
|
+ })
|
|
|
+ },
|
|
|
+ verifyData () {
|
|
|
+ const { orderUserName, orderUserPhone, code, orderUserProvince, orderUserCity, orderUserDistrict, orderCommunity, orderBuilding } = this.postData
|
|
|
+ this.arrErrorList = []
|
|
|
+ if (!/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(orderUserPhone)) {
|
|
|
+ this.arrErrorList.push('请输入手机号码')
|
|
|
+ }
|
|
|
+ if (!(/^\d{4}$/.test(code))) {
|
|
|
+ this.arrErrorList.push('请输入验证码')
|
|
|
+ }
|
|
|
+ if (!orderUserName) {
|
|
|
+ this.arrErrorList.push('请输入姓名')
|
|
|
+ }
|
|
|
+ if (!orderUserProvince || !orderUserCity || !orderUserDistrict) {
|
|
|
+ this.arrErrorList.push('请选择所在城市')
|
|
|
+ }
|
|
|
+ if (!orderCommunity) {
|
|
|
+ this.arrErrorList.push('请选择所在小区')
|
|
|
+ }
|
|
|
+ if (!orderBuilding) {
|
|
|
+ this.arrErrorList.push('请选择所在楼号')
|
|
|
+ }
|
|
|
+ return this.arrErrorList.length <= 0
|
|
|
+ },
|
|
|
+ funUpdateCapture () {
|
|
|
+ this.strCapture = STRCAPTURE + '?' + new Date().getTime()
|
|
|
+ },
|
|
|
+ funInit () {
|
|
|
+ getUserInfo().then(res => {
|
|
|
+ const { status } = res
|
|
|
+ if (status) {
|
|
|
+ this.isRegistered = true
|
|
|
+ if (this.checkMyBenfits === 1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$router.replace({ path: '/loan/mine' })
|
|
|
}
|
|
|
- if (!orderBuilding) {
|
|
|
- this.arrErrorList.push('请选择所在楼号')
|
|
|
+ }).catch((err) => {
|
|
|
+ Toast(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fetchCommunity () {
|
|
|
+ getCommunity().then(res => {
|
|
|
+ const { status, data } = res
|
|
|
+ if (status) {
|
|
|
+ this.columnsOfCommunity = [
|
|
|
+ {
|
|
|
+ values: data.map(item => item.addressName),
|
|
|
+ defaultIndex: 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
- return this.arrErrorList.length <= 0
|
|
|
- },
|
|
|
- funUpdateCapture () {
|
|
|
- this.strCapture = STRCAPTURE + '?' + new Date().getTime()
|
|
|
- },
|
|
|
- funInit () {
|
|
|
- getUserInfo().then(res => {
|
|
|
- const { status } = res
|
|
|
- if (status) {
|
|
|
- this.$router.replace({ path: '/loan/mine' })
|
|
|
- }
|
|
|
- }).catch((err) => {
|
|
|
- Toast(err)
|
|
|
- })
|
|
|
- },
|
|
|
- fetchCommunity () {
|
|
|
- getCommunity().then(res => {
|
|
|
- const { status, data } = res
|
|
|
- if (status) {
|
|
|
- this.columnsOfCommunity = [
|
|
|
- {
|
|
|
- values: data.map(item => item.addressName),
|
|
|
- defaultIndex: 0
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- }).catch((err) => {
|
|
|
- Toast(err)
|
|
|
+ }).catch((err) => {
|
|
|
+ Toast(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ funSubmit () {
|
|
|
+ const { orderUserName, orderUserPhone, code, orderUserProvince, orderUserCity, orderUserDistrict, orderCommunity, orderBuilding, orderRoom } = this.postData
|
|
|
+ const postData = {
|
|
|
+ orderUserName,
|
|
|
+ orderUserPhone,
|
|
|
+ code,
|
|
|
+ orderUserProvince,
|
|
|
+ orderUserCity,
|
|
|
+ orderUserDistrict,
|
|
|
+ orderUserAddress: orderCommunity + orderBuilding + orderRoom
|
|
|
+ }
|
|
|
+ if (!this.verifyData()) {
|
|
|
+ Toast({
|
|
|
+ message: this.arrErrorList[0],
|
|
|
+ forbidClick: true
|
|
|
})
|
|
|
- },
|
|
|
- funSubmit () {
|
|
|
- const { orderUserName, orderUserPhone, code, orderUserProvince, orderUserCity, orderUserDistrict, orderCommunity, orderBuilding, orderRoom } = this.postData
|
|
|
- const postData = {
|
|
|
- orderUserName,
|
|
|
- orderUserPhone,
|
|
|
- code,
|
|
|
- orderUserProvince,
|
|
|
- orderUserCity,
|
|
|
- orderUserDistrict,
|
|
|
- orderUserAddress: orderCommunity + orderBuilding + orderRoom
|
|
|
- }
|
|
|
- if (!this.verifyData()) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const myToast = Toast.loading({
|
|
|
+ message: '提交中...',
|
|
|
+ duration: 1000 * 100,
|
|
|
+ forbidClick: true
|
|
|
+ })
|
|
|
+ register(postData).then(res => {
|
|
|
+ myToast.clear()
|
|
|
+ if (res.status) {
|
|
|
Toast({
|
|
|
- message: this.arrErrorList[0],
|
|
|
- forbidClick: true
|
|
|
+ type: 'success',
|
|
|
+ message: '提交成功',
|
|
|
+ forbidClick: true,
|
|
|
+ onClose: () => {
|
|
|
+ this.$router.replace({ path: '/loan/mine' })
|
|
|
+ }
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
- const myToast = Toast.loading({
|
|
|
- message: '提交中...',
|
|
|
- duration: 1000 * 100,
|
|
|
- forbidClick: true
|
|
|
- })
|
|
|
- register(postData).then(res => {
|
|
|
- myToast.clear()
|
|
|
- if (res.status) {
|
|
|
- Toast({
|
|
|
- type: 'success',
|
|
|
- message: '提交成功',
|
|
|
- forbidClick: true,
|
|
|
- onClose: () => {
|
|
|
- this.$router.replace({ path: '/loan/mine' })
|
|
|
- }
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- Toast(res.msg)
|
|
|
- }).catch(err => {
|
|
|
- myToast.clear()
|
|
|
- Toast(err)
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- beforeDestroy () {
|
|
|
- if (this.scroll) {
|
|
|
- this.scroll.destroy()
|
|
|
- }
|
|
|
- },
|
|
|
- beforeRouteLeave (to, from, next) {
|
|
|
- if (['loanPrivacy', 'loanVipAgreement'].includes(to.name)) {
|
|
|
- from.meta.isUseCache = true
|
|
|
- }
|
|
|
- this.numPositionY = this.scroll ? this.scroll.y : 0
|
|
|
- next()
|
|
|
+ Toast(res.msg)
|
|
|
+ }).catch(err => {
|
|
|
+ myToast.clear()
|
|
|
+ Toast(err)
|
|
|
+ })
|
|
|
}
|
|
|
+ },
|
|
|
+ beforeDestroy () {
|
|
|
+ if (this.scroll) {
|
|
|
+ this.scroll.destroy()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeRouteLeave (to, from, next) {
|
|
|
+ if (['loanPrivacy', 'loanVipAgreement'].includes(to.name)) {
|
|
|
+ from.meta.isUseCache = true
|
|
|
+ }
|
|
|
+ this.numPositionY = this.scroll ? this.scroll.y : 0
|
|
|
+ next()
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- const BUILDING = () => {
|
|
|
- const res = []
|
|
|
- for (let i = 1; i < 101; i++) {
|
|
|
- if (res.indexOf(i) < 0) {
|
|
|
- res.push(i + '幢')
|
|
|
- }
|
|
|
+const BUILDING = () => {
|
|
|
+ const res = []
|
|
|
+ for (let i = 1; i < 101; i++) {
|
|
|
+ if (res.indexOf(i) < 0) {
|
|
|
+ res.push(i + '幢')
|
|
|
}
|
|
|
- return res
|
|
|
}
|
|
|
- const ROOM = () => {
|
|
|
- const res = []
|
|
|
- for (let i = 1; i < 7; i++) {
|
|
|
- if (res.indexOf(i) < 0) {
|
|
|
- res.push(i + '单元')
|
|
|
- }
|
|
|
+ return res
|
|
|
+}
|
|
|
+const ROOM = () => {
|
|
|
+ const res = []
|
|
|
+ for (let i = 1; i < 7; i++) {
|
|
|
+ if (res.indexOf(i) < 0) {
|
|
|
+ res.push(i + '单元')
|
|
|
}
|
|
|
- return res
|
|
|
}
|
|
|
+ return res
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .container {
|
|
|
- position: relative;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
+.container {
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.wrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
width: 100%;
|
|
|
- background: #fff;
|
|
|
}
|
|
|
|
|
|
- .wrapper {
|
|
|
+ .introduce-wrap {
|
|
|
width: 100%;
|
|
|
- height: 100vh;
|
|
|
- overflow: hidden;
|
|
|
+ padding-top: 206px;
|
|
|
+ background: url("./image/card@2x.png") center 24px/344px 181px no-repeat;
|
|
|
+ }
|
|
|
|
|
|
- ul {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ .main {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 375px;
|
|
|
+ padding: 31px 0 97px;
|
|
|
+ border-radius: 18px 18px 0 0;
|
|
|
+ box-shadow: 0px -2px 11px 0px rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
|
|
|
- .introduce-wrap {
|
|
|
- width: 100%;
|
|
|
- padding-top: 206px;
|
|
|
- background: url("./image/card@2x.png") center 24px/344px 181px no-repeat;
|
|
|
- }
|
|
|
+ .member-benefits {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: row wrap;
|
|
|
+ width: 344px;
|
|
|
+ height: 267px;
|
|
|
+ padding: 66px 40px 0 35px;
|
|
|
+ background: url("./image/introduce@2x.png") center top/100% 100% no-repeat;
|
|
|
|
|
|
- .main {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- width: 375px;
|
|
|
- padding: 31px 0 97px;
|
|
|
- border-radius: 18px 18px 0 0;
|
|
|
- box-shadow: 0px -2px 11px 0px rgba(0, 0, 0, 0.2);
|
|
|
-
|
|
|
- img {
|
|
|
- display: block;
|
|
|
- width: 344px;
|
|
|
- height: 267px;
|
|
|
+ li {
|
|
|
+ width: 40px;
|
|
|
+ height: 80px;
|
|
|
+ margin-left: 36px;
|
|
|
+
|
|
|
+ &:nth-of-type(4n+1) {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-of-type(1),
|
|
|
+ &:nth-of-type(2),
|
|
|
+ &:nth-of-type(3),
|
|
|
+ &:nth-of-type(4) {
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .checked-wrap {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-top: 14px;
|
|
|
+ .checked-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 14px;
|
|
|
|
|
|
- img {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- }
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
|
|
|
- span,
|
|
|
- a {
|
|
|
- line-height: 17px;
|
|
|
- font-size: 12px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
+ span,
|
|
|
+ a {
|
|
|
+ line-height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
|
|
|
- a {
|
|
|
- text-decoration: underline;
|
|
|
- }
|
|
|
+ a {
|
|
|
+ text-decoration: underline;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .login {
|
|
|
+}
|
|
|
+
|
|
|
+.login {
|
|
|
+ width: 327px;
|
|
|
+ height: 45px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 40px;
|
|
|
+ line-height: 45px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
|
|
|
+ box-shadow: 0 14px 9px -10px #DBD0C2;
|
|
|
+}
|
|
|
+
|
|
|
+img.title {
|
|
|
+ display: block;
|
|
|
+ width: 93px;
|
|
|
+ height: 22px;
|
|
|
+ margin: 23px auto 0;
|
|
|
+}
|
|
|
+
|
|
|
+.form-wrap {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ li {
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
width: 327px;
|
|
|
- height: 45px;
|
|
|
+ padding: 8px 14px;
|
|
|
+ margin-top: 8px;
|
|
|
+ border: 1px solid #E8E8E8;
|
|
|
border-radius: 4px;
|
|
|
- margin-top: 40px;
|
|
|
- line-height: 45px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
- background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
|
|
|
- box-shadow: 0 14px 9px -10px #DBD0C2;
|
|
|
- }
|
|
|
|
|
|
- img.title {
|
|
|
- display: block;
|
|
|
- width: 93px;
|
|
|
- height: 22px;
|
|
|
- margin: 23px auto 0;
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .form-wrap {
|
|
|
+ label {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
|
|
|
- li {
|
|
|
+ &.required {
|
|
|
position: relative;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- width: 327px;
|
|
|
- padding: 8px 14px;
|
|
|
- margin-top: 8px;
|
|
|
- border: 1px solid #E8E8E8;
|
|
|
- border-radius: 4px;
|
|
|
-
|
|
|
- &:nth-of-type(1) {
|
|
|
- margin-top: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- label {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- &.required {
|
|
|
- position: relative;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
-
|
|
|
- &:before {
|
|
|
- position: absolute;
|
|
|
- left: -12px;
|
|
|
- top: -4px;
|
|
|
- z-index: 1;
|
|
|
- content: '*';
|
|
|
- line-height: 33px;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 500;
|
|
|
- color: #FF3B30;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- line-height: 22px;
|
|
|
- font-size: 16px;
|
|
|
+ &:before {
|
|
|
+ position: absolute;
|
|
|
+ left: -12px;
|
|
|
+ top: -4px;
|
|
|
+ z-index: 1;
|
|
|
+ content: '*';
|
|
|
+ line-height: 33px;
|
|
|
+ font-size: 24px;
|
|
|
font-weight: 500;
|
|
|
- color: #333;
|
|
|
-
|
|
|
- &.label-code:nth-of-type(5),
|
|
|
- &.label-name:nth-of-type(4),
|
|
|
- &.label-name:nth-of-type(5),
|
|
|
- &.label-city:nth-of-type(4),
|
|
|
- &.label-city:nth-of-type(5),
|
|
|
- &.label-community:nth-of-type(4),
|
|
|
- &.label-community:nth-of-type(5),
|
|
|
- &.label-buildingy:nth-of-type(4),
|
|
|
- &.label-buildingy:nth-of-type(5),
|
|
|
- &.label-room:nth-of-type(4),
|
|
|
- &.label-room:nth-of-type(5) {
|
|
|
- visibility: hidden;
|
|
|
- }
|
|
|
+ color: #FF3B30;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .value-wrap {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- margin-left: 9px;
|
|
|
- }
|
|
|
-
|
|
|
- input,
|
|
|
- textarea {
|
|
|
- width: 100%;
|
|
|
- min-height: 20px;
|
|
|
- padding-top: 2px;
|
|
|
- line-height: 20px;
|
|
|
- font-size: 15px;
|
|
|
+ span {
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
color: #333;
|
|
|
- word-break: break-all;
|
|
|
- resize: none;
|
|
|
- outline: 0 none;
|
|
|
- overflow: hidden;
|
|
|
- background: transparent;
|
|
|
- -webkit-text-fill-color: #333;
|
|
|
- opacity: 1;
|
|
|
|
|
|
- &::-webkit-input-placeholder {
|
|
|
- color: #999;
|
|
|
- -webkit-text-fill-color: #999;
|
|
|
- opacity: 1;
|
|
|
+ &.label-code:nth-of-type(5),
|
|
|
+ &.label-name:nth-of-type(4),
|
|
|
+ &.label-name:nth-of-type(5),
|
|
|
+ &.label-city:nth-of-type(4),
|
|
|
+ &.label-city:nth-of-type(5),
|
|
|
+ &.label-community:nth-of-type(4),
|
|
|
+ &.label-community:nth-of-type(5),
|
|
|
+ &.label-buildingy:nth-of-type(4),
|
|
|
+ &.label-buildingy:nth-of-type(5),
|
|
|
+ &.label-room:nth-of-type(4),
|
|
|
+ &.label-room:nth-of-type(5) {
|
|
|
+ visibility: hidden;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .value-name {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ .value-wrap {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ margin-left: 9px;
|
|
|
+ }
|
|
|
|
|
|
- .value-city {
|
|
|
- flex: 1;
|
|
|
- line-height: 22px;
|
|
|
- font-size: 15px;
|
|
|
- color: #333;
|
|
|
+ input,
|
|
|
+ textarea {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 20px;
|
|
|
+ padding-top: 2px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333;
|
|
|
+ word-break: break-all;
|
|
|
+ resize: none;
|
|
|
+ outline: 0 none;
|
|
|
+ overflow: hidden;
|
|
|
+ background: transparent;
|
|
|
+ -webkit-text-fill-color: #333;
|
|
|
+ opacity: 1;
|
|
|
|
|
|
- &.init {
|
|
|
- color: #999;
|
|
|
- }
|
|
|
+ &::-webkit-input-placeholder {
|
|
|
+ color: #999;
|
|
|
+ -webkit-text-fill-color: #999;
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .icon_next {
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
- }
|
|
|
+ .value-name {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
|
|
|
- .capture-img {
|
|
|
- @include vertical-center;
|
|
|
- right: 14px;
|
|
|
- z-index: 1;
|
|
|
- display: block;
|
|
|
- width: 125px;
|
|
|
- height: 31px;
|
|
|
- border-radius: 4px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+ .value-city {
|
|
|
+ flex: 1;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333;
|
|
|
|
|
|
- .get-code {
|
|
|
- @include vertical-center;
|
|
|
- right: 0;
|
|
|
- z-index: 1;
|
|
|
- display: block;
|
|
|
- min-width: 87px;
|
|
|
- padding: 6px;
|
|
|
- line-height: 22px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- color: #C9A585;
|
|
|
+ &.init {
|
|
|
+ color: #999;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .submit {
|
|
|
+ .icon_next {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .capture-img {
|
|
|
+ @include vertical-center;
|
|
|
+ right: 14px;
|
|
|
+ z-index: 1;
|
|
|
display: block;
|
|
|
- width: 327px;
|
|
|
- height: 45px;
|
|
|
- margin: 20px auto 12px;
|
|
|
+ width: 125px;
|
|
|
+ height: 31px;
|
|
|
border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .get-code {
|
|
|
+ @include vertical-center;
|
|
|
+ right: 0;
|
|
|
+ z-index: 1;
|
|
|
+ display: block;
|
|
|
+ min-width: 87px;
|
|
|
+ padding: 6px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #C9A585;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.submit {
|
|
|
+ display: block;
|
|
|
+ width: 327px;
|
|
|
+ height: 45px;
|
|
|
+ margin: 20px auto 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
|
|
|
+ box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
|
|
|
+}
|
|
|
+
|
|
|
+.popup-benefits {
|
|
|
+ width: 274px;
|
|
|
+ min-height: 150px;
|
|
|
+ padding: 30px 0 40px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16px;
|
|
|
+
|
|
|
+ .benefits-title {
|
|
|
+ width: 210px;
|
|
|
+ margin: 0 auto;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .benefits-msg {
|
|
|
+ width: 210px;
|
|
|
+ margin: 20px auto 0;
|
|
|
line-height: 20px;
|
|
|
font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- color: #fff;
|
|
|
- background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
|
|
|
- box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
|
|
|
+ color: #666;
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
panyong
