|
|
@@ -0,0 +1,192 @@
|
|
|
+<template>
|
|
|
+ <div class="address-content">
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field v-model="formData.name" clearable label="联系人" placeholder="请填写您的姓名" />
|
|
|
+ <van-field v-model="formData.phone" label="手机号" placeholder="请输入手机号" />
|
|
|
+ </van-cell-group>
|
|
|
+
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ class="address"
|
|
|
+ v-model="address"
|
|
|
+ label="收货地址"
|
|
|
+ placeholder="请选择您的地址"
|
|
|
+ right-icon="arrow"
|
|
|
+ disabled
|
|
|
+ @click="show = true"
|
|
|
+ />
|
|
|
+
|
|
|
+ <van-field
|
|
|
+ class="address-detail"
|
|
|
+ type="textarea"
|
|
|
+ v-model="formData.address"
|
|
|
+ clearable
|
|
|
+ label="详细地址"
|
|
|
+ placeholder="请填写您的详细地址"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+
|
|
|
+ <div class="radio-content" @click="formData.isDefault = !formData.isDefault">
|
|
|
+ <van-radio-group v-model="formData.isDefault" disabled>
|
|
|
+ <van-radio :name="true">
|
|
|
+ <span class="radio-text">默认地址</span>
|
|
|
+ <img
|
|
|
+ class="radio-img"
|
|
|
+ slot="icon"
|
|
|
+ slot-scope="props"
|
|
|
+ :src="props.checked ? activeIcon : inactiveIcon"
|
|
|
+ />
|
|
|
+ </van-radio>
|
|
|
+ </van-radio-group>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="submit-btn">
|
|
|
+ <van-button block round type="primary" :disabled="!canNext" @click="onSave">确定</van-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <van-popup v-model="show" position="bottom">
|
|
|
+ <van-area :area-list="areaList" value="110101" @confirm="addressConfirm" />
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapState } from 'vuex';
|
|
|
+import areaList from '../../areaList';
|
|
|
+export default {
|
|
|
+ name: '',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ areaList,
|
|
|
+ searchResult: [],
|
|
|
+ formData: {
|
|
|
+ name: '',
|
|
|
+ phone: '',
|
|
|
+ province: '',
|
|
|
+ city: '',
|
|
|
+ district: '',
|
|
|
+ address: '',
|
|
|
+ isDefault: true
|
|
|
+ },
|
|
|
+ show: false,
|
|
|
+ isDefault: false,
|
|
|
+ activeIcon: require('../../assets/icon_xuanzhong_pre.png'),
|
|
|
+ inactiveIcon: require('../../assets/icon_xuanzhong.png'),
|
|
|
+ address: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['userInfo']),
|
|
|
+ canNext() {
|
|
|
+ var val = false;
|
|
|
+ if (
|
|
|
+ this.formData.name &&
|
|
|
+ this.formData.province &&
|
|
|
+ this.checkPhone(this.formData.phone) &&
|
|
|
+ this.formData.city &&
|
|
|
+ this.formData.district &&
|
|
|
+ this.formData.address
|
|
|
+ ) {
|
|
|
+ val = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.$route.query.id) {
|
|
|
+ this.getInfo();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onSave() {
|
|
|
+ this.$http
|
|
|
+ .post(
|
|
|
+ '/address/save',
|
|
|
+ {
|
|
|
+ ...this.formData,
|
|
|
+ userId: this.userInfo.id
|
|
|
+ },
|
|
|
+ { body: 'json' }
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ this.$toast.success('保存成功');
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$router.go(-1);
|
|
|
+ }, 1000);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.$toast(e.error);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addressConfirm(addressList) {
|
|
|
+ console.log(addressList);
|
|
|
+ var nameList = addressList.map(item => {
|
|
|
+ return item.name;
|
|
|
+ });
|
|
|
+ for (var i = 0; i < 3; i++) {
|
|
|
+ if (nameList.length > i) {
|
|
|
+ if (i == 0) {
|
|
|
+ this.formData.province = nameList[i];
|
|
|
+ } else if (i == 1) {
|
|
|
+ this.formData.city = nameList[i];
|
|
|
+ } else if (i == 2) {
|
|
|
+ this.formData.district = nameList[i];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.address = nameList.join(' ');
|
|
|
+ this.show = false;
|
|
|
+ },
|
|
|
+ getInfo() {
|
|
|
+ this.$http.get('/address/get/' + this.$route.query.id).then(res => {
|
|
|
+ this.formData = res;
|
|
|
+ this.address = res.province + ' ' + res.city + ' ' + res.district;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.address-content {
|
|
|
+ background: rgba(242, 244, 245, 1);
|
|
|
+ padding: 15px;
|
|
|
+}
|
|
|
+.van-cell-group {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .van-cell:not(:last-child)::after {
|
|
|
+ right: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-cell {
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-detail {
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.radio-content {
|
|
|
+ width: 115px;
|
|
|
+ height: 36px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 17px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 15px 0;
|
|
|
+ .radio-img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .radio-text {
|
|
|
+ font-size: 13px;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|