YXGJ/store/deliveryAddress/insert.vue

<template>
    <My_listbox :pullDown="false" boxBackground="#fff">
        <my-form ref="form" :form="form" @isUncomplete="isUncomplete" />
        <view class="footer">
            <view class="add" :class="uncomplete ? 'forbidden' : ''" hover-class="navigator-hover"
                @click="uncomplete || loading ? '' : submit()">
                <u-loading-icon v-if="loading" />
                <block v-else>
                    {{ contactsid == 0 ? '确定添加' : '保存' }}
                </block>
            </view>
        </view>
    </My_listbox>
</template>

<script>
import myForm from "../../components/my_form.vue";

export default {
    components: { myForm },
    data() {
        return {
            form: [],
            uncomplete: true,
            contactsid: 0,
            loading: false,
        }
    },
    onLoad(options) {
        console.log(options)
        if (options.data) {
            let data = JSON.parse(options.data)
            this.contactsid = data.contactsid;
            this.initForm(data)
        } else {
            this.initForm()
        }
        uni.setNavigationBarTitle({
            title: this.contactsid ? '编辑地址' : '添加地址',
        })
    },
    methods: {
        async initForm(data = null) {
            let form = [{
                key: "name",
                type: "text",
                label: "收货人",
                isMust: true,//是否必填
                value: "",
                placeholder: "请输入收货人姓名"
            }, {
                key: "phonenumber",
                type: "text",
                label: "手机号",
                isMust: true,//是否必填
                value: "",
                placeholder: "请输入收货人手机号",
                inputmode: 'number',
                verify: [this.getReg("phonenumber")]
            }, {
                key: "region",
                type: "region",
                label: "所在地区",
                isMust: true,//是否必填
                value: [],
            }, {
                key: "address",
                type: "textarea",
                label: "详细地址",
                isMust: true,//是否必填
                value: '',
            }, {
                key: "isdefault",
                type: "switch",
                label: "设为默认地址",
                isMust: false,//是否必填
                value: false,
                isNum: true,
                unBorBot: true
            }];

            if (data) {
                data.isdefault = data.isdefault == 1;
                data.region = [data.province, data.city, data.county];
                form = form.map(v => {
                    v.value = data[v.key]
                    return v
                })
            }
            this.form = form;
        },
        isUncomplete(uncomplete) {
            this.uncomplete = uncomplete;
        },
        submit() {
            this.loading = true;
            this.$refs.form.submit().then(data => {
                console.log("提交", data)
                this.$Http.basic({
                    "id": 20240506103402,
                    "content": {
                        "contactsid": this.contactsid,
                        ...data
                    }
                }).then(res => {
                    this.loading = false;
                    console.log("编辑地址", res)
                    if (res.msg == '成功') this.$Http.updateList && this.$Http.updateList();
                    if (this.cutoff(res.msg, this.contactsid == 0 ? '添加成功' : '保存成功', true, 800)) return;
                })
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.footer {
    position: fixed;
    width: 100vw;
    height: 65px;
    background: #FFFFFF;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    padding: 10px;
    padding-top: 5px;
    bottom: 0;

    .add {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 45px;
        background: #C30D23;
        border-radius: 5px;
        font-family: PingFang SC, PingFang SC;
        font-size: 14px;
        color: #FFFFFF;
    }

    .forbidden {
        opacity: .6;
    }
}
</style>