lotteryDraw_admin/src/views/AddNewTreatment.vue

<template>
    <div class="site-setting-wrap pagePadding min-flex-right">
        <p class="pageTitle bold">新增套餐</p>
        <div class="siteMessage flex-common" id="siteMessage2">
            <p class="littleTitle mb32">套餐信息</p>
            <el-form :model="siteForm1" :rules="siteFormrules1" ref="siteForm1">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipFormItem column="column" class="mb24" label="套餐名称" :required="true">
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="numSettingForm.times"
                                prop="times" placeholder="输入" />
                        </GuipFormItem>
                    </div>
                    <div class="flex-line"></div>
                    <div class="flex-right">
                        <GuipFormItem column="column" class="mb24" label="套餐价格" :required="true">
                            <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="numSettingForm.times"
                                prop="times" placeholder="输入" unit="元" />
                        </GuipFormItem>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
import store from '../store';
import { mapState } from 'vuex';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipInput from '@/components/GuipInput.vue';
export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        GuipFormItem,
        GuipInput,

    },
    data() {
        return {
            numSettingForm: {
                times: '',
                hours: '',
                nums: '',
                days: ''
            },
            numSettingFormRule: {
                times: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                hours: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                nums: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
                days: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ],
            },
            fileList: [
                { name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
            ],
            options_payword: [{
                value: '选项1',
                name:'hhahhaa',
                id:'11',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶',
                name:'hha222hhaa',
                id:'1111',
            }, {
                value: '选项3',
                name:'hha333haa',
                id:'1331',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            siteForm: {
                company_name: '',
                company_address: '',
                company_phone: '',
                site_alias: '',
            },
            form: {
                description: '',
                detailDesc: '',
                tags:'1331'
            },
            siteFormrules: {
                site_alias: [
                    { required: true, message: '请输入站点简称', trigger: 'blur' }
                ]
            },
            siteForm1: {
                domain_set: '',
                domain_source: '平台免费域名',
            },
            siteForm2: {
                zhifubao_pay: '',
                weixin_pay: '',
            },
            siteFormrules1: {
                domain_source: [
                    { required: true, message: '请输入站点简称', trigger: 'blur' }
                ]
            },
            domain_source: [
                { label: '平台免费域名', value: '平台免费域名', selectedLabel: "平台免费域名" },
                { label: '我自己有域名', value: '我自己有域名', selectedLabel: "我自己有域名" },
            ],
            options_weixin_null: {
                label: '暂无收款账号',
                value: '暂时没有收款账号，我想稍后配置',
                desc: '暂无收款账号，稍后配置'
            },
            select_placeholder_weixin: '暂无收款账号，稍后配置',
            selectedItemWeixin: {},//微信收款方式
            options_weixin: [],
            options_zhifubao: [],
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    mounted() {
        store.commit('SET_PAGETITLE', '基本设置');
    },
    methods: {
        changeSelect(value){
            console.log(value,'--');
        },
        btnClick() {
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        // 上传图片
        handleAvatarSuccess(res, file) {
            this.imageUrl1 = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        changeNormalWeixin() {

        },
        changeSelectWeixin(item, flag) {
            if (flag) {
                this.select_placeholder_weixin = this.options_weixin_null.desc;
                return
            }
            this.selectedItem = { ...item };
            console.log(this.selectedItem, 'this.selectedItem====');
        },
        //  销售渠道
        domain_radioChange(type) {
            console.log(type, '--');
        },
        onSwitchChange(data) {
            console.log(data, '---');
        },
        submitForm(form) {
            console.log(this.$refs[form], '-----');
            this.$refs[form].validate((valid) => {
                console.log(this[form], '======formxinxi');
                if (valid) {
                    alert('提交成功!');
                } else {
                    return false;
                }
            });
        },
        cancelClick() {
            console.log('quxiao');
        },
        confirmClick(type) {
            console.log(type, '确认');
        }

    }
}
</script>
<style lang="scss">
.siteMessage {
    border-radius: 4px;
    transition: all .5s;
    border: 1px solid transparent;
}

.addStore {
    margin-top: 12px;
}

.qqCode-wrap {
    margin-bottom: 14px;

    .labelImg {
        opacity: .7;
        margin-left: 8px;
    }

    .avatar-uploader {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 12px 0 8px;
    }

    .avatar-desc {
        text-align: left;
    }
}


.site-setting-wrap {
    width: 100%;
}

#siteMessage2 {
    margin: 12px 0;
}

.domain-wrap {
    .domain-item {
        margin-bottom: 10px;
    }


    .domain-item p:last-child {
        padding-left: 23px;
        color: #8A9099;
    }

    p {
        text-align: left;
        line-height: 18px;
        margin-bottom: 8px;
    }

    .domain-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
}
</style>