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";
import XDateTime from "../../components/XDateTime.vue";
import {useSystemStore} from "../../pinia/SystemStore/index.js";

const SystemStore = useSystemStore();

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;
    if (id) Api.system.getAccountInfo(id).then(({data}) => {
        data.homepage = [data.homepage];
        data.qrcode = [data.qrcode];
        Object.assign(form, data);
    });
    if (SystemStore.accountManagementPo.pid) form.pid = Number(SystemStore.accountManagementPo.pid);
})

const getSelect = async () => {
    const {data} = await Api.system.getPlatform();
    data.shift();
    return {
        data: 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="getSelect"></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="恢复时间" v-if="form.status === 2">
                <x-date-time :type="1" v-model:model-value="form.abnormaltime"></x-date-time>
            </x-form-item>
            <x-form-item label="主页截图">
                <x-upload v-model:files="form.homepage" single></x-upload>
            </x-form-item>
            <x-form-item label="主页二维码">
                <x-upload v-model:files="form.qrcode" single></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>