|
@@ -0,0 +1,236 @@
|
|
|
+<template>
|
|
|
+ <div class="select-layout">
|
|
|
+ <div class="address-input-con">
|
|
|
+ <div class="address-input-item">
|
|
|
+ <div class="address-sub address-name">
|
|
|
+ <div class="top-title">{{ $t('mall.receiver') }}</div>
|
|
|
+ <div class="ant-input">
|
|
|
+ <input v-model="tempAddress.shipName" type="text" :placeholder="langAccount.placeholder.name" maxlength="10" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="address-input-item">
|
|
|
+ <div class="address-sub address-phone">
|
|
|
+ <div class="top-title">{{ $t('mall.phone') }}</div>
|
|
|
+ <div class="ant-input">
|
|
|
+ <input v-model="tempAddress.shipMobile" oninput="value=value.replace(/[^\d]/g,'')" maxlength='11' type="text" :placeholder="langAccount.placeholder.phone" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="address-input-item">
|
|
|
+ <div class="address-sub prov-name">
|
|
|
+ <div class="top-title">{{$t('mall.receiveAddress')}}</div>
|
|
|
+ <div class="ant-input prov" @click="handleSelect('prov')">
|
|
|
+ {{citylist[currentPID]['p']||'省份'}}
|
|
|
+ <ul v-if="prov">
|
|
|
+ <li v-for="(item,i) in citylist" :key="i" @click="handleClick('currentPID',i)">{{item.p}}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="address-sub prov-name">
|
|
|
+ <div class="top-title notrequired"></div>
|
|
|
+ <div class="ant-input city" @click.stop="handleSelect('city')">
|
|
|
+ {{currentProv[currentCID]['n']||'城市'}}
|
|
|
+ <ul v-if="city">
|
|
|
+ <li v-for="(item,i) in currentProv" :key="i" @click="handleClick('currentCID',i)">{{item.n}}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="address-sub prov-name">
|
|
|
+ <div class="top-title notrequired"></div>
|
|
|
+ <div class="ant-input city" @click.stop="handleSelect('dist')">
|
|
|
+ {{currentCity[currentSID]['s']||'区/县'}}
|
|
|
+ <ul v-if="dist">
|
|
|
+ <li v-for="(item,i) in currentCity" :key="i" @click="handleClick('currentSID',i)">{{item.s}}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="address-input-item">
|
|
|
+ <div class="address-sub">
|
|
|
+ <!-- <div class="top-title">{{langAccount.placeholder.address}}</div> -->
|
|
|
+ <div class="ant-input">
|
|
|
+ <input v-model="tempAddress.shipAddress" type="text" :placeholder="langAccount.placeholder.address" maxlength="50" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="address-input-item">
|
|
|
+ <p class="p-dec">{{ langAccount.recaddress }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="actions-w">
|
|
|
+ <button type="submit" class="ant-btn ant-btn-primary cancel" @click="$emit('cancle', true)">
|
|
|
+ <span>{{langAccount.cancel}}</span>
|
|
|
+ </button>
|
|
|
+ <button type="submit" class="ant-btn ant-btn-primary" @click="uAddress">
|
|
|
+ <span>{{langAccount.save}}</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { citylist } from './city'
|
|
|
+import { mapState } from 'vuex'
|
|
|
+
|
|
|
+let sle = ['prov', 'city', 'dist']
|
|
|
+var cloneObj = function (obj) {
|
|
|
+ var newObj = {}
|
|
|
+ if (obj instanceof Array) {
|
|
|
+ newObj = []
|
|
|
+ }
|
|
|
+ for (var key in obj) {
|
|
|
+ var val = obj[key] || ''
|
|
|
+ newObj[key] = typeof val === 'object' ? cloneObj(val) : val
|
|
|
+ }
|
|
|
+ return newObj
|
|
|
+}
|
|
|
+export default {
|
|
|
+ props: ['address', 'token'],
|
|
|
+ data () {
|
|
|
+ let idArr = ['', '', '']
|
|
|
+ if (this.address.shipAreaPath) {
|
|
|
+ let tempArr = this.address.shipAreaPath.split(',')
|
|
|
+ let [p, c, d] = tempArr
|
|
|
+ idArr = (() => {
|
|
|
+ let tmp = []
|
|
|
+ citylist.forEach((item, index) => {
|
|
|
+ if (item.p === p) {
|
|
|
+ tmp.push(index)
|
|
|
+ item.c.forEach((t2, i2) => {
|
|
|
+ if (t2.n === c) {
|
|
|
+ tmp.push(i2)
|
|
|
+ t2.a.forEach((t3, i3) => {
|
|
|
+ if (t3.s === d) {
|
|
|
+ tmp.push(i3)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return tmp
|
|
|
+ })()
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ citylist,
|
|
|
+ prov: false,
|
|
|
+ city: false,
|
|
|
+ dist: false,
|
|
|
+ currentPID: idArr[0] || 18,
|
|
|
+ currentCID: idArr[1] || 3,
|
|
|
+ currentSID: idArr[2] || 2,
|
|
|
+ areaPath: cloneObj(this.address.areaPath)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ langAccount: state => state.language.home.manage.account
|
|
|
+ }),
|
|
|
+ tempAddress: function () {
|
|
|
+ return cloneObj(this.address)
|
|
|
+ },
|
|
|
+
|
|
|
+ currentProv: function () {
|
|
|
+ let tmp = this.citylist[this.currentPID]
|
|
|
+ return tmp.c
|
|
|
+ },
|
|
|
+ currentCity: function () {
|
|
|
+ let cprov = this.citylist[this.currentPID]
|
|
|
+ let tmp = cprov.c[this.currentCID]
|
|
|
+ return tmp.a
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ currentProv () {
|
|
|
+ this.currentCID = 0
|
|
|
+ this.currentSID = 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ uAddress () {
|
|
|
+ this.tempAddress.province = this.areaPath[0]
|
|
|
+ this.tempAddress.city = this.areaPath[1]
|
|
|
+ this.tempAddress.shipAreaPath = this.areaPath.join(',')
|
|
|
+ let {
|
|
|
+ shipAddress,
|
|
|
+ shipAreaPath,
|
|
|
+ province,
|
|
|
+ city,
|
|
|
+ shipMobile,
|
|
|
+ shipName,
|
|
|
+ id
|
|
|
+ } = this.tempAddress
|
|
|
+
|
|
|
+ let isObject = function (obj) {
|
|
|
+ return JSON.stringify(obj) === '{}' ? '' : obj
|
|
|
+ }
|
|
|
+
|
|
|
+ let params = {
|
|
|
+ shipAddress,
|
|
|
+ shipAreaPath,
|
|
|
+ province,
|
|
|
+ city,
|
|
|
+ shipMobile,
|
|
|
+ shipName,
|
|
|
+ id
|
|
|
+ }
|
|
|
+ let test = Object.keys(params)
|
|
|
+ for (let i = 0; i < test.length; i++) {
|
|
|
+ if (!isObject(params[test[i]])) {
|
|
|
+ return this.$toast.show('warn', this.langAccount.fill)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ params['id'] = this.address.id
|
|
|
+ let url = this.address.id ? 'updateAddress' : 'insertAddress'
|
|
|
+ this.$http
|
|
|
+ .post(`/user/${url}`, params, {
|
|
|
+ headers: {
|
|
|
+ token: this.token
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(data => {
|
|
|
+ let res = data.data
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$emit('closeSelect', true)
|
|
|
+ this.$store.dispatch('getInfo', {
|
|
|
+ url: '/user/getReceiverInfo',
|
|
|
+ name: 'address'
|
|
|
+ })
|
|
|
+ this.$emit('submit', params)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSelect (item) {
|
|
|
+ sle.forEach(i => {
|
|
|
+ console.log(i, item)
|
|
|
+ if (i === item) {
|
|
|
+ this[i] = !this[i]
|
|
|
+ } else {
|
|
|
+ this[i] = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleClick (id, i) {
|
|
|
+ this[id] = i
|
|
|
+ this.handleChange()
|
|
|
+ },
|
|
|
+ handleChange () {
|
|
|
+ setTimeout(() => {
|
|
|
+ let prov = this.citylist[this.currentPID]
|
|
|
+ let city = prov.c[this.currentCID]
|
|
|
+ let dist = city.a[this.currentSID]
|
|
|
+ this.areaPath = [prov.p, city.n, dist.s]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.handleChange()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import './style.scss';
|
|
|
+</style>
|