caimei-applets-hehe/pages/user/address/addressManage.vue

<template>
    <view class="container clearfix">
        <view class="add-content">
            <view class="input-row b-b">
                <view class="label">收货人姓名</view>
                <input
                    class="input"
                    type="text"
                    v-model="addressData.shouHuoRen"
                    @input="onShouHuoRen"
                    placeholder="请输入收货人姓名"
                    placeholder-class="placeholder"
                />
            </view>
            <view class="input-row b-b">
                <view class="label">联系方式</view>
                <input
                    class="input"
                    type="number"
                    maxlength="11"
                    v-model="addressData.mobile"
                    @input="onMobile"
                    placeholder="请输入联系方式"
                    placeholder-class="placeholder"
                />
            </view>
            <view class="input-row b-b" @click="showMulLinkageThreePicker">
                <view class="label">收货地址</view> <text class="input"> {{ addressData.allAddress }} </text>
                <text class="iconfont icon-chakangengduo"></text>
            </view>
            <view class="text-textarea b-b">
                <view class="textarea show" v-if="isShowInput">{{
                    addressData.address ? addressData.address : '详细地址：如道路、门牌号、小区、楼房号、单元室等'
                }}</view>
                <textarea
                    v-else
                    class="textarea"
                    type="text"
                    v-model="addressData.address"
                    placeholder="详细地址：如道路、门牌号、小区、楼房号、单元室等"
                    placeholder-class="placeholder"
                    maxlength="50"
                    @input="onTextareaInput"
                    :class="isShowInput ? '' : ''"
                />
            </view>
            <view class="text-input default-row">
                <text class="tit">设为默认地址</text>
                <switch :checked="switchDefault" color="#ff457b" @change="switchChange" style="transform:scale(0.6)" />
            </view>
            <button
                class="add-btn"
                :disabled="isConfirm"
                :class="[isConfirm == true ? 'disabled' : '']"
                @click="confirm"
            >
                {{ buttonText }}
            </button>
        </view>
        <city-picker
            :themeColor="themeColor"
            ref="mpvueCityPicker"
            :pickerValueDefault="cityPickerValueDefault"
            @onCancel="onCancel"
            @onConfirm="onConfirm"
        >
        </city-picker>
    </view>
</template>

<script>
import CityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
import { mapGetters } from 'vuex'
export default {
    components: {
        CityPicker
    },
    data() {
        return {
            buttonText: '保存',
            addType: 1, //记录添加地址的类型
            isConfirm: true,
            isShowInput: false,
            switchDefault: false,
            addressData: {
                addressId: '',
                allAddress: '请选择所在地区',
                userId: '', //用户id ,只在新增收货地址时传
                shouHuoRen: '', //收货人
                mobile: '', //收货人手机
                townId: '', //区ID
                address: '', //地址
                defaultFlag: 0 //是否默认收货地址(0 不是默认,1 默认)
            },
            params: {} //参数
        }
    },
    computed: {
        ...mapGetters(['userId'])
    },
    onLoad(option) {
        let title = '添加新地址'
        if (option.type === 'edit') {
            title = '编辑收货地址'
            this.isConfirm = false
            this.addType = 2
            let optionData = JSON.parse(option.data)
            console.log(optionData)
            // 设置默认值
            this.addressData.allAddress = `${optionData.provinceName}-${optionData.cityName}-${optionData.townName}`
            this.addressData.address = optionData.address
            this.addressData.defaultFlag = optionData.defaultFlag
            this.addressData.userId = this.userId
            this.addressData.mobile = optionData.mobile
            this.addressData.townId = optionData.townId
            this.addressData.addressId = optionData.addressId
            this.addressData.shouHuoRen = optionData.shouHuoRen
            this.addressData.addressId = optionData.addressId
            if (optionData.defaultFlag == 1) {
                this.switchDefault = true
            } else {
                this.switchDefault = false
            }
        }
        uni.setNavigationBarTitle({
            title
        })
    },
    methods: {
        switchChange(e) {
            if (e.detail.value == true) {
                this.addressData.defaultFlag = 1
            } else {
                this.addressData.defaultFlag = 0
            }
        },
        // 三级联动选择
        showMulLinkageThreePicker() {
            this.isShowInput = true
            this.$refs.mpvueCityPicker.show()
        },
        onConfirm(e) {
            this.addressData.allAddress = e.name
            this.addressData.townId = e.townCode
            console.log(e)
            this.initInput()
        },
        //提交
        confirm() {
            if (!this.addressData.shouHuoRen) {
                this.$util.msg('请填写收货人')
            }
            if (this.addressData.address == '请选择所在地区') {
                this.$util.msg('请选择所在地区')
            }
            if (!/(^1[0-9][0-9]{9}$)/.test(this.addressData.mobile)) {
                this.$util.msg('请输入正确的手机号码')
                return
            }
            if (this.addType == 1) {
                this.params = {
                    // 测试id
                    userId: this.userId, //用户id ,只在新增收货地址时传
                    shouHuoRen: this.addressData.shouHuoRen, //收货人
                    townId: this.addressData.townId, //区ID
                    address: this.addressData.address, //地址
                    mobile: this.addressData.mobile, //手机
                    defaultFlag: this.addressData.defaultFlag //是否默认收货地址(0 不是默认,1 默认)
                }
                this.postAddressData(this.params)
            } else {
                this.params = this.addressData
                this.postAddressData(this.params)
            }
        },
        postAddressData(params) {
            this.btnText(true)
            // 保存地址
            this.UserService.AddOtherSaveAddress(params)
                .then(response => {
                    this.$util.msg('保存成功', 2000, true, 'success')
                    this.btnText(false)
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 2000)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                    setTimeout(function() {
                        uni.switchTab({
                            url: '/seller/pages/index/index'
                        })
                    }, 1000)
                })
        },
        btnText(flg) {
            if (flg) {
                this.isConfirm = true
                this.buttonText = '保存中...'
            } else {
                this.isConfirm = false
                this.buttonText = '保存'
            }
        },
        onShouHuoRen(e) {
            this.addressData.shouHuoRen = e.detail.value
            this.initInput()
        },
        onMobile(e) {
            this.addressData.mobile = e.detail.value
            this.initInput()
        },
        onTextareaInput(e) {
            this.addressData.address = e.detail.value
            this.initInput()
        },
        initInput() {
            if (
                this.addressData.shouHuoRen !== '' &&
                this.addressData.mobile !== '' &&
                this.addressData.address !== '' &&
                this.addressData.townId !== ''
            ) {
                this.isConfirm = false
            } else {
                this.isConfirm = true
            }
        }
    },
    onShow() {
        this.$api.getComStorage('userInfo').then(resolve => {
            this.addressData.userId = resolve.userId ? resolve.userId : 0
        })
    }
}
</script>

<style lang="scss">
page {
    height: auto;
    background: $bg-color;
}
.add-content {
    width: 702rpx;
    padding: 0 24rpx;
    .input-row {
        display: flex;
        align-items: center;
        position: relative;
        width: 702rpx;
        height: 88rpx;
        margin: 0 auto;
        border-bottom: 2rpx solid #e1e1e1;
        .label {
            font-size: $font-size-28;
            color: #666666;
            line-height: 88rpx;
            flex: 2;
        }
        .input {
            height: 100%;
            font-size: $font-size-28;
            line-height: 88rpx;
            color: #333333;
            flex: 7;
            box-sizing: border-box;
            padding-left: 20rpx;
        }
        &.b-b {
            margin: 20rpx 0;
        }
    }
}
.icon-chakangengduo {
    font-size: 36rpx;
    color: #b2b2b2;
    position: absolute;
    right: 0;
}
.text-textarea {
    width: 100%;
    height: 146rpx;
    border-bottom: 2rpx solid #e1e1e1;
    .textarea {
        width: 100%;
        height: 100%;
        font-size: $font-size-28;
        color: $text-color;
        z-index: 1;
        line-height: 32rpx;
    }
    .textarea.hide {
        opacity: 0;
    }
    .textarea.show {
        color: #999999;
    }
}
.default-row {
    background: #ffffff;
    margin-top: 16upx;
    padding: 24rpx 24rpx 24rpx 0;
    .tit {
        font-size: $font-size-28;
        line-height: 40rpx;
        color: #666666;
        flex: 1;
    }
    switch {
        transform: translateX(16upx) scale(0.9);
    }
}
.add-btn {
    width: 600rpx;
    height: 90rpx;
    font-size: $font-size-28;
    line-height: 90rpx;
    color: #ffffff;
    margin: 0 auto;
    text-align: center;
    background: $btn-confirm;
    border-radius: 45rpx;
    margin-top: 80rpx;
}
.add-btn.disabled {
    background: #e1e1e1;
    border-radius: 45rpx;
}
</style>