xl-mobile/src/pages/addAccount/index.vue

<script setup>
import XNav from "../../components/XNav.vue";
import XFormItem from "../../components/XFormItem.vue";
import XForm from "../../components/XForm.vue";
import XSelect from "../../components/XSelect.vue";
import Api from "../../api/index.js";
import XInput from "../../components/XInput.vue";
import XUpload from "../../components/XUpload.vue";
import {reactive} from "vue";
import {backPage, showToast} from "../../utils/uils.js";
import {onLoad} from "@dcloudio/uni-app";

const form = reactive({
    status: null,
    qrcode: [],
    abnormaltime: null,
    nickname: null,
    account: null,
    pid: null,
    homepage: [],
});

const success = async () => {
    if (!form.id) {
        const {msg} = await Api.system.addAccount({
            ...form,
            homepage: form.homepage[0],
            qrcode: form.qrcode[0]
        });
        showToast(msg);
    } else {
        const {msg} = await Api.system.editAccount({
            ...form,
            homepage: form.homepage[0],
            qrcode: form.qrcode[0]
        });
        showToast(msg);
    }
    backPage();
}

onLoad((options) => {
    const {id} = options;
    Api.system.getAccountInfo(id).then(({data}) => {
        data.homepage = [data.homepage];
        data.qrcode = [data.qrcode];
        Object.assign(form, data);
    });
})
</script>

<template>
    <!--添加账号-->
    <x-nav></x-nav>

    <view class="min-h-[calc(100vh-100rpx)] bg-[#fff] px-[30rpx] py-[25rpx]">
        <x-form>
            <x-form-item label="宣发平台">
                <x-select v-model:model-value="form.pid" :api="Api.system.getPlatform"></x-select>
            </x-form-item>
            <x-form-item label="账号">
                <x-input v-model:model-value="form.account" height="80rpx" placeholder="请输入帐号"></x-input>
            </x-form-item>
            <x-form-item label="昵称">
                <x-input v-model:model-value="form.nickname" height="80rpx" placeholder="请输入昵称"></x-input>
            </x-form-item>
            <x-form-item label="账号状态">
                <x-select v-model:model-value="form.status" :api="Api.system.getAccountStatus"></x-select>
            </x-form-item>
            <x-form-item label="主页截图">
                <x-upload v-model:files="form.homepage"></x-upload>
            </x-form-item>
            <x-form-item label="主页二维码">
                <x-upload v-model:files="form.qrcode"></x-upload>
            </x-form-item>
        </x-form>

        <tui-button @click="success" class="!fixed bottom-[30rpx] left-0 !mx-[30rpx] !w-[calc(100vw-60rpx)]">确认提交
        </tui-button>
    </view>
</template>

<style lang="scss">
.x-form-item-label {
    font-size: 28rpx;
    color: #4E5969 !important;
}
</style>