vue/src/views/jd/updateCookies.vue

<template>
    <div class="container">
        <Breadcrumb :items="['menu.jd', 'menu.jd.updateCookies']" />
        <a-card class="general-card" :title="$t('menu.jd.updateCookies')">
            <a-row class="wrapper">
                <a-col :span="24">
                    <a-form ref="formRef" :model="formData" class="form" :label-col-props="{ span: 4 }"
                        :wrapper-col-props="{ span: 19 }">
                        <a-form-item field="cookie" :label="$t('taobao.cookies.label')" :rules="[{ required: true }]"
                            row-class="keep-margin">
                            <a-textarea v-model="formData.cookie" :auto-size="{ minRows: 10 }" class="cookie"
                                :placeholder="$t('taobao.cookies.placeholder')" />
                        </a-form-item>
                        <a-form-item field="cookie" label="联盟cookie" :rules="[{ required: true }]"
                            row-class="keep-margin">
                            <a-textarea v-model="formData.union_cookies" :auto-size="{ minRows: 10 }" class="cookie"
                                placeholder="联盟cookie，用来查询收益和订单" />
                        </a-form-item>

                        <a-form-item field="user_agent" label="User Agent" row-class="keep-margin">
                            <a-textarea v-model="formData.user_agent" auto-size placeholder="留空的话，忽略更新" />
                        </a-form-item>
                        <a-form-item field="h5st" label="h5st" row-class="keep-margin">
                            <a-textarea v-model="formData.h5st" :auto-size="{ minRows: 5 }" placeholder="留空的话，忽略更新" />
                        </a-form-item>
                        <a-form-item>
                            <a-space>
                                <a-button type="primary" @click="validate">
                                    {{ $t('form.save') }}
                                </a-button>
                                <a-button type="secondary" @click="reset">
                                    {{ $t('form.reset') }}
                                </a-button>
                            </a-space>
                        </a-form-item>
                    </a-form>
                </a-col>
            </a-row>
        </a-card>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { UpdateCookieModel, updateCookies } from '@/api/jd';


const router = useRouter();

const formRef = ref<FormInstance>();
const formData = ref<UpdateCookieModel>({
    cookie: '',
    union_cookies: '',
    user_agent: '',
    h5st: '',
});
const validate = async () => {
    const res = await formRef.value?.validate();
    if (!res) {
        try {
            const { data } = await updateCookies(formData.value);
            console.log(data, data.msg);
            const msg = data.msg || '更新成功!';
            if (data.success) {
                Message.success(msg);
                router.push('./list');
            } else {
                Message.error(data.msg);
            }
        } catch (err) {
            console.error(err)
        }
    }
};
const reset = async () => {
    await formRef.value?.resetFields();
};
</script>

<style scoped lang="less">
.container {
    padding: 0 20px 20px 20px;
}

.wrapper {
    padding: 20px 0 0 20px;
    min-height: 580px;
    background-color: var(--color-bg-2);
    border-radius: 4px;
}

:deep(.section-title) {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 14px;
}

.form {
    margin: 0 auto;
}

.form .cookie {
    height: 100%;
    min-height: 500px;
}
</style>