qimall/backend/modules/admin/views/addons/pay-setting-edit.php

<?php
/**
 * @link:http://www.gdqijianshi.com/
 * @copyright: Copyright (c) 2020 广东七件事集团
 * Created by PhpStorm
 * Author: lun
 * Date: 2021-09-02
 * Time: 12:36
 */
?>
<div id="app" v-cloak>
    <el-card v-loading="loading" style="border:0;min-width: 1200px;" shadow="never" body-style="background-color: #f3f3f3;padding: 0 0;">
        <el-form :model="ruleForm"
                 :rules="rules"
                 ref="ruleForm"
                 label-width="172px"
                 style="position: relative"
                 size="small">
            <el-card shadow="never" class="mt-24">
                <div slot="header">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{path:'/'}"><span @click="$navigate({r:'admin/addons/pay-setting'})">应用列表</span></el-breadcrumb-item>
                        <el-breadcrumb-item>付费设置</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <el-input type="text" v-model="ruleForm.id" style="display: none;"></el-input>
                <el-form-item label="应用名称" prop="title">
                    <el-col :span="12">
                        {{ruleForm.title}}
                    </el-col>
                </el-form-item>

                <el-form-item label="支付方式" prop="payment_type">
                    <el-col :span="12">
                        <el-checkbox-group v-model="ruleForm.payment_type" >
                            <el-checkbox :label="1" >微信支付</el-checkbox>
                            <el-checkbox :label="2" >支付宝支付</el-checkbox>
                        </el-checkbox-group>
                    </el-col>
                </el-form-item>

                <el-form-item label="设置永久价格">
                    <el-col :span="12">
                        <el-radio-group v-model="is_set_price" @change="setPrice">
                            <el-radio :label="1" >是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-form-item>

                <el-form-item label="设置售价">
                    <div v-for="(item,key) in setting">
                        <!-- 永久价格特殊处理 -->
                        <div v-if="key == 0 && item.duration == -1">
                            <el-input placeholder="0.00" style="width:300px" v-model="item.money" onInput="value=toNumber(value,2)">
                                <template slot="prepend">永久</template>
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                        <div v-else style="margin-top: 10px;">
                            <el-input style="width:150px" type="number" v-model="item.duration" onInput="value=toNumber(value)">
                            </el-input>
                            <el-select v-model="item.unit" style="width: 64px;">
                                <el-option label="月"  value="1">月</el-option>
                                <el-option label="年"  value="2">年</el-option>
                            </el-select><el-input placeholder="0.00" style="width:150px" v-model="item.money" onInput="value=toNumber(value,2)">
                                <template slot="append">元</template>
                            </el-input>
                            <el-button type="text" @click="handle('delete',key)" style="margin-left: 10px;">删除</el-button>
                        </div>
                    </div>

                    <div v-if="setting && setting.length <= 3 && is_set_price == 1 || setting && setting.length < 3 && is_set_price == 0"><el-button type="text" @click="handle('add')">+添加售价</el-button> <span style="font-size: 12px; color: #cccbcb;">最多可添加3条</span></div>

                </el-form-item>
                <el-form-item>
                    <el-col :span="12">
                        <el-button :loading="submitLoading" size="small" type="primary"
                                   @click="submit('ruleForm')">保存
                        </el-button>
                    </el-col>
                </el-form-item>
            </el-card>

        </el-form>
    </el-card>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                submitLoading: false,
                del_setting:null,
                post_data:[],
                is_set_price: 0,
                ruleForm: {
                    id: 0,
                    title: '',
                    status: 0,
                    payment_type:[],
                },
                setting: [
                    {
                        "unit":"0",
                        "money":"0",
                        "duration":"-1",
                    }
                ],
                rules: {
                    payment_type: [
                        {required: true, message: '支付方式必须选择', trigger: 'blur'},
                    ],
                }
            };
        },
        created() {
            this.loadData();
        },
        methods: {
            setPrice(event) {
                this.handle('set',event)
            },
            handle(type, data = null) {
                switch (type) {
                    case 'add':// 添加规格
                        this.setting.push({
                            unit:"1",
                            money:"0",
                            duration:"",
                        });

                        break;
                    case 'delete':// 删除规格
                        this.setting.splice(data,1);
                        break;
                    case 'set':// 是否设置永久价格
                        if(data == 0 && this.setting.length>0 && this.setting[0].duration == -1) {
                            this.setting.splice(0, 1);
                            // if(this.del_setting && this.setting && this.setting.length==3){
                            //     this.setting[3] = this.del_setting;
                            // }
                        }
                        if(data == 1 && this.setting.length>0 && this.setting[0].duration != -1) {
                            this.setting.unshift({
                                unit:"0",
                                money:"0",
                                duration:"-1",
                            });
                            if(this.setting && this.setting.length>=4){
                                this.del_setting = this.setting[4];
                                this.setting.splice(4,1);
                            }
                        }
                        if(data == 1 && this.setting.length<=0){
                            this.setting.unshift({
                                unit:"0",
                                money:"0",
                                duration:"-1",
                            });
                        }
                        break;
                }
            },
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'admin/addons/pay-setting-edit',
                        name: getQuery('name')
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.ruleForm = e.data.data;
                        if (!isEmpty(e.data.data.setting)) {
                            this.setting = JSON.parse(e.data.data.setting);
                            if (this.setting[0].duration == -1) this.is_set_price = 1;
                        }else{
                            this.setting.splice(0, 1);
                        }
                        if(!this.ruleForm.payment_type){
                            this.ruleForm.payment_type = [];
                        }

                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            settingValidate() {
                let text = "";
                this.setting.forEach(function (item) {
                    if(item.unit >= 1){
                        if (item.duration == "") {
                            text = '单位不能为空';
                        } else if (item.duration <= 0) {
                            text = '单位数值不能小于1';
                        }else if (typeof item.duration ==! 'number' || item.duration%1 !== 0) {
                            text = '单位数值必须为整数';
                        }else if (item.money < 0) {
                            text = '金额不可以小于0';
                        }else if(!item.money){
                            text = '金额必须设置';
                        }
                    }
                })
                return text;
            },
            submit(formName) {
                if (this.setting.length == 0) {
                    this.$message.error('售价不能为空');
                    return;
                }
                let text = this.settingValidate();
                if (text) {
                    this.$message.error(text);
                    return;
                }
                this.post_data.price_setting = this.setting;
                this.post_data.payment_type = this.ruleForm.payment_type;
                this.post_data.name = this.ruleForm.name;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.submitLoading = true;
                        request({
                            params: {
                                r: 'admin/addons/pay-setting-edit',
                            },
                            method: 'post',
                            data: this.post_data,
                        }).then(e => {
                            this.submitLoading = false;
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'admin/addons/pay-setting'
                                })
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        computed: {

        }
    });
</script>