merchant/src/pages/subPages/view.vue

<template>
<div>
    <!-- 用户设置 -->
    <el-card>
        <el-container direction="vertical">
            <h3 style="margin-bottom:20px">用户设置：</h3>
            <el-form label-width="120px" :model="userForm" :rules="userRule" ref="userForm">
                <el-form-item label="用户名：">
                    <el-input v-model.trim="userForm.name" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="联系方式：" prop="phone">
                    <el-input v-model.trim="userForm.phone" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" size="small" @click="onSubUser">提交</el-button>
                    <el-button type="danger" size="small" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-container>
    </el-card>
    <!-- 开发者设置 -->
    <el-card>
        <el-container direction="vertical">
            <h3 style="margin-bottom:20px">开发者设置：</h3>
            <el-form label-width="120px" :model="formKey" :rules="ruleKey" ref="keyForm">
                <el-form-item label="密钥设置：" :prop="useKey == '1' ? 'ReSecurityKey' : 'securityKey'"  class="keySet">
                    <el-input v-if="useKey == '1'" v-model.trim="formKey.ReSecurityKey" autocomplete="off" style="width: 300px;margin-right:10px"></el-input>
                    <el-input v-else v-model.trim="formKey.securityKey" autocomplete="off" style="width: 300px;margin-right:10px"></el-input>
                    <el-button type="primary" size="small" @click="updateKey">{{useKey == '1' ? '重设' : '设置'}}</el-button>
                    <!-- <el-alert
                        title="请输入32位字符串，用于接口生成签名"
                        type="info"
                        show-icon
                        style="width:880px;display:inline"
                        :closable="false">
                    </el-alert> -->
                    <span style="color:rgb(255 1 1 / 0.7);margin-left:10px;font-size:12px;">请输入32位字符串，用于接口生成签名</span>
                </el-form-item>
                <el-form-item label="ip白名单：" >
                    <div v-if="cIpList">
                        <el-input style="width: 300px;margin-bottom: 10px;margin-right: 10px;" :value="ipFormData.name"></el-input>
                        <i class="el-icon-circle-plus-outline" style="color:#409EFF;font-size:22px;" @click="add"></i>
                    </div>
                    <template v-else>
                        <div v-for="(item, idx) in ipList" :key="item">
                            <el-input style="width: 300px;margin-bottom: 10px;margin-right: 10px;" :value="item"></el-input>
                            <template v-if="idx == 0">
                                <i class="el-icon-circle-plus-outline" style="color:#409EFF;font-size:22px;" @click="add"></i>
                                <i class="el-icon-remove-outline" style="color:#F56C6C;margin-left:10px;font-size:22px;" @click="del(item)"></i>
                            </template>
                            <!-- <i v-if="idx == 0" class="el-icon-circle-plus-outline" style="color:#409EFF;" @click="add"></i> -->
                            <i v-else class="el-icon-remove-outline" style="color:#F56C6C;font-size:22px;" @click="del(item)"></i>
                        </div>
                    </template>
                </el-form-item>
            </el-form>
            <!-- 添加ip弹层 -->
            <el-dialog title="添加ip白名单" :visible="dialogFormVisible" @close="btnCancle">
                <el-form :model="ipFormData" :rules="rules" ref="ipFormData" label-width="80px">
                    <el-form-item label="ip：" prop="name">
                        <el-input v-model="ipFormData.name" autocomplete="off" style="width: 300px"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="btnCancle">取 消</el-button>
                    <el-button type="primary" @click="onSubmit('ipFormData')">确 定</el-button>
                </span>
            </el-dialog>
        </el-container>
    </el-card>
    <!-- 余额预警电话设置 -->
    <el-card>
        <el-container direction="vertical">
            <h3 style="margin-bottom:20px">余额预警电话设置：</h3>
            <el-form label-width="120px" ref="formWarning" :model="balanceForm" :rules="balanceRules">
                <el-form-item
                    label="设置余额预警："
                    prop="alarm_amount"
                    style="margin-bottom: 10px;">
                    <el-input
                        size="small"
                        v-model="balanceForm.alarm_amount"
                        autocomplete="off"
                        style="width: 140px;margin-right:10px"
                        onkeyup="value=value.replace(/[^\d.]/g,'')"
                        @blur="balanceForm.alarm_amount = $event.target.value"
                        ></el-input>
                    <el-button type="primary" size="small" @click="onBalance">设置</el-button>
                    <span style="color:rgb(255 1 1 / 0.7);margin-left:10px;font-size:12px;">建议设置50000及以上余额预警</span>
                </el-form-item>
                <el-form-item style="margin-bottom: 0;color:#606266">
                    <span>请设置余额预警电话，当账户所剩余额达到预警额度时，将会给预留电话发送短信提醒，以免给您的业务带来不便。每隔五分钟提醒一次，最多提示五次。</span>
                </el-form-item>
                <el-form-item label="设置预警电话：">
                    <div v-if="cWarningList">
                        <el-input style="width: 300px;margin-bottom: 10px;margin-right: 10px;" :value="addphone.phone"></el-input>
                        <i class="el-icon-circle-plus-outline" style="color:#409EFF;font-size:22px;" @click="addwphone"></i>
                    </div>
                    <template v-else>
                        <div v-for="(item, idx) in warningList" :key="item">
                            <el-input style="width: 300px;margin-bottom: 10px;margin-right: 10px;" :value="item"></el-input>
                            <template v-if="idx == 0">
                                <i class="el-icon-circle-plus-outline" style="color:#409EFF;font-size:22px;" @click="addwphone"></i>
                                <i class="el-icon-remove-outline" style="color:#F56C6C;margin-left:10px;font-size:22px;" @click="delwphone(item)"></i>
                            </template>
                            <i v-else class="el-icon-remove-outline" style="color:#F56C6C;font-size:22px;" @click="delwphone(item)"></i>
                        </div>
                    </template>
                </el-form-item>
            </el-form>
            <!-- 添加预警弹层 -->
            <el-dialog title="添加预警电话" :visible="warningDialogVisible" @close="cancleWarning">
                <el-form :model="addphone" :rules="ruleAddphone" ref="addphone" label-width="100px">
                    <el-form-item label="预警电话：" prop="phone">
                        <el-input v-model="addphone.phone" autocomplete="off" style="width: 300px"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancleWarning">取 消</el-button>
                    <el-button type="primary" @click="onSubmitWarning('addphone')">确 定</el-button>
                </span>
            </el-dialog>
        </el-container>
    </el-card>
    <!-- 话费充值设置 -->
    <el-card>
        <el-container direction="vertical">
            <h3 style="margin-bottom:20px">话费充值设置：</h3>
            <el-form label-width="120px" ref="phoneForm" :model="phoneForm" :rules="phoneRules">
                <el-form-item
                    label="回调时间："
                    prop="time_out"
                    style="margin-bottom: 10px;">
                    <el-input
                        size="small"
                        v-model.number="phoneForm.time_out"
                        autocomplete="off"
                        style="width: 140px;margin-right:10px"
                        ></el-input>
                    <span style="color:rgb(255 1 1 / 0.7);margin-left:10px;font-size:12px;">单位分钟，建议设置3分钟及以上时间</span>
                </el-form-item>
                <el-form-item label="充值质量：">
                    <el-radio-group v-model="phoneForm.quality">
                        <el-radio :label="1">普通通道</el-radio>
                        <el-radio :label="2">快速通道</el-radio>
                        <el-radio :label="3">普通+快速通道</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="onSetTime">设置</el-button>
                </el-form-item>
            </el-form>
        </el-container>
    </el-card>
</div>
</template>

<script>
// getIpList获取Ip列表 delIpList-删除 addIp-添加 getUserInfo-用户信息 onSubUser-提交用户设置 addwphone-添加预警电话 delwphone-删除
import {
    // getIpList,
    delIpList,
    addIp,
    getUserInfo,
    updateKey,
    onSubUser,
    addwphone,
    delwphone,
    phonrRec
} from "@/api";
export default {
    name: 'pageView',
    data() {
        var checkAmount = (rule, value, callback) => {
            console.log('rule', rule, value);
            console.log('value', value);
            if (value === '') {
                return callback(new Error('余额预警不能为空'));
            } else if (value.indexOf(".") != -1 && value.split('.').length > 2) {
                callback(new Error('请输入正确格式，只能有一位小数点'));
            } else if (value.indexOf(".") != -1 && value.split('.')[1].length > 2) {
                callback(new Error('小数点后面只能有两位'));
            } else {
                var Money = parseFloat(value).toFixed(3);
                var MoneyResult = Money.substring(0, Money.length - 1);
                var xsd = MoneyResult.toString().split(".");
                // console.log('Money', Money, MoneyResult, xsd, xsd[1].length);
                // if (xsd.length == 1) {
                //     this.balanceForm.alarm_amount = creditResult.toString() + ".00";
                // }
                if (xsd.length > 1) {
                    if (xsd[1].length == 1) {
                        this.balanceForm.alarm_amount = MoneyResult;
                    }
                    if (xsd[1].length > 1) {
                        this.balanceForm.alarm_amount = xsd[0].toString() + "." + xsd[1].toString().substring(0, 2);
                    }
                }
                callback()
            }
        };
        var checkPhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('联系方式不能为空'));
            } else if (!/^1[3-9]\d{9}$/.test(value)) {
                callback(new Error('请输入合法手机号'));
            } else {
                callback()
            }
        };
        var checkTime = (rule, value, callback) => {
            if (value < 3) {
                return callback(new Error('回调时间必须输入大于等于3的数字'));
            } else {
                callback()
            }
        };
        return {
            pageSize: 10,
            pageNumber: 1,
            ipList: [],
            total: 0,
            // ip
            ip: null,
            // ip弹层
            dialogFormVisible: false,
            // 新增ip数据
            ipFormData: {
                name: ''
            },
            // 表单校验
            rules: {
                name: [
                    { required: true, message: '请输入ip', trigger: 'blur' },
                    { pattern: /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/, message:'请输入合法ip', trigger: 'blur' }
                ]
            },
            repeatIp: false,
            // 密钥校验，只能是数字和字母
            formKey: { 
                securityKey: '',
                ReSecurityKey: ''
            },
            ruleKey: {
                securityKey: [
                    { required: true, message: '请输入密钥', trigger: 'blur' },
                    { min: 1, max: 32, message:'请输入32位的字符串', trigger: 'blur' }
                ],
                // 之前设置过密钥
                ReSecurityKey: [
                    { min: 1, max: 32, message:'请输入32位的字符串', trigger: 'blur' }
                ]
            },
            // 是否设置过密钥 1-设置过
            useKey: '',
            // 用户设置
            userForm: {
                name: '',
                phone: ''
            },
            userRule: {
                phone: [
                    {validator: checkPhone, trigger: 'blur'}
                ]
            },
            // 预警电话列表
            warningList: [],
            // 添加预警
            addphone: {
                phone: ''
            },
            ruleAddphone: {
                phone: [
                    { required: true, message: '请输入预警电话', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message:'请输入正确的电话', trigger: 'blur' }
                ]
            },
            warningDialogVisible: false,
            repeatPhone: false,
            // 余额预警
            balanceForm: {
                alarm_amount: '',
            },
            balanceRules: {
                alarm_amount: [
                    {validator: checkAmount, trigger: 'blur'}
                ]
            },
            // 话费充值设置
            phoneForm: {
                time_out: '',
                quality: 1
            },
            phoneRules: {
                time_out: [
                    { required: true, message: '请输入回调时间', trigger: 'blur' },
                    { required: true, type: 'number', message: '回调时间必须为数字值', trigger: 'blur'},
                    { validator: checkTime, trigger: 'blur'}
                ]
            }
        };
    },
    created() {
        // this.getIpList();
        this.getUserInfo()
    },
    computed: {
        cIpList() {
            return this.ipList < 1
        },
        cWarningList() {
            return this.warningList < 1
        }
    },
    methods: {
        // 删除
        del(ip) {
            console.log('ip', ip);
            // 提示
            this.$confirm("确认删除该ip?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(async () => {
                // 调用删除接口
                try {
                    let param = new URLSearchParams()
                    param.append('ip', ip)
                    // const res = await delIpList({ip: ip})
                    const res = await delIpList(param)
                    console.log('删除ip', res);
                    if (res && res.code == 200) {
                        // 提示
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        // 获取列表
                        this.getUserInfo()
                    } else {
                        this.$message.error('删除失败')
                    }
                } catch (error) {
                    console.log(error);
                    this.$message.error('删除失败')
                }
            })
            .catch(() => {
                return false;
            });
        },
        // 添加
        add() {
            this.ipFormData.name = ''
            this.dialogFormVisible = true
        },
        // 关闭弹层
        btnCancle() {
            this.dialogFormVisible = false
            this.$refs.ipFormData.resetFields()
        },
        // 确定添加
        onSubmit(formName) {
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    // console.log(valid);
                    if (this.ipList.length > 0) {
                        // this.ipList.forEach(item => {
                        //     this.repeatIp = item.ip == this.ipFormData.name
                        // })
                        this.repeatIp = this.ipList.find((item => item == this.ipFormData.name))
                    }
                    if (this.repeatIp) {
                        this.$message.error('该ip已存在')
                        return
                    }
                    // console.log('校验通过');
                    try {
                        let param = new URLSearchParams()
                        param.append('ip', this.ipFormData.name)
                        const res = await addIp(param)
                        console.log('添加ip', res);
                        if (res && res.code == 200) {
                            this.$message({
                                message: '添加ip成功',
                                type: 'success'
                            });
                            this.getUserInfo()
                            // this.dialogFormVisible = false
                            // this.ipFormData.name = ''
                        } else {
                            this.$message.error('添加ip失败')
                        } 
                        this.dialogFormVisible = false
                        this.ipFormData.name = ''
                    } catch (error) {
                        console.log(error);
                        this.dialogFormVisible = false
                        this.ipFormData.name = ''
                        this.$message.error('添加ip失败')
                    }
                }
            });
        },
        // 获取商户号
        async getUserInfo() {
            try {
                const res = await getUserInfo()
                console.log('个人中心', res);
                if (res && res.code == 200) {
                    this.ipList = res.datas.ips
                    this.useKey = res.datas.use_key
                    this.userForm.name = res.datas.contact_name != 'null' ? res.datas.contact_name : ''
                    this.userForm.phone = res.datas.contact_phone != 'null' ? res.datas.contact_phone : ''
                    this.balanceForm.alarm_amount = res.datas.alarm_amount != 'null' ? res.datas.alarm_amount : ''
                    this.warningList = res.datas.warning_phone
                    this.phoneForm.time_out = res.datas.timeout
                    this.phoneForm.quality = res.datas.quality
                }
            } catch (error) {
                console.log(error);
            }
        },
        // 设置密钥
        async updateKey() {
            let res
            this.$refs.keyForm.validate(async(valid) => {
                if (valid) {
                    if (this.useKey == '1') {
                        try {
                            let param = new URLSearchParams()
                            param.append('secure_key', this.formKey.ReSecurityKey)
                            // res = await updateKey(this.formKey.ReSecurityKey)
                            res = await updateKey(param)
                        } catch (error) {
                            console.log(error);
                        }
                    } else {
                        try {
                            let param = new URLSearchParams()
                            param.append('secure_key', this.formKey.securityKey)
                            // res = await updateKey(this.formKey.securityKey)
                            res = await updateKey(param)
                        } catch (error) {
                            console.log(error);
                        }
                    }
                    console.log('密钥', res);
                    if (res && res.code == 200) {
                        this.$message.success('设置密钥成功')
                    } else {
                        this.$message.error('设置密钥失败')
                    }
                    this.formKey.ReSecurityKey = ''
                    this.formKey.securityKey = ''
                }
            })
        },
        // 提交用户设置
        onSubUser() {
            this.$refs.userForm.validate(async(valid) => {
                // console.log('valid', valid);
                if (valid) {
                    try {
                        let param = new URLSearchParams()
                        param.append('contact_name', this.userForm.name)
                        param.append('contact_phone', this.userForm.phone)
                        const res = await onSubUser(param)
                        if (res && res.code && res.code == 200) {
                            this.$message.success('提交用户设置成功')
                            this.getUserInfo()
                        }
                        // this.userForm.name = ''
                        // this.userForm.phone = ''
                        console.log('用户设置提交', res);
                    } catch (error) {
                        console.log(error);
                        this.$message.error('提交用户设置失败')
                    }
                }
            })
        },
        // 重置
        resetForm() {
            this.userForm.name = ''
            this.$refs.userForm.resetFields();
        },
        // 添加预警
        addwphone() {
            this.addphone.phone = ''
            this.warningDialogVisible = true
        },
        // 关闭预警弹层
        cancleWarning() {
            this.warningDialogVisible = false
            this.$refs.addphone.resetFields()
        },
        // 确认添加
        onSubmitWarning(formName) {
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    console.log(valid);
                    if (this.warningList.length > 0) {
                        this.repeatPhone = this.warningList.find((item => item == this.addphone.phone))
                    }
                    if (this.repeatPhone) {
                        this.$message.error('该预警电话已存在')
                        return
                    }
                    // console.log('校验通过');
                    try {
                        let param = new URLSearchParams()
                        param.append('phone', this.addphone.phone)
                        const res = await addwphone(param)
                        console.log('添加预警电话', res);
                        if (res && res.code == 200) {
                            this.$message({
                                message: '添加预警电话成功',
                                type: 'success'
                            });
                            this.getUserInfo()
                            // this.dialogFormVisible = false
                            // this.ipFormData.name = ''
                        } else {
                            this.$message.error('添加预警电话失败')
                        } 
                        this.warningDialogVisible = false
                        this.addphone.phone = ''
                    } catch (error) {
                        console.log(error);
                        this.warningDialogVisible = false
                        this.addphone.phone = ''
                        this.$message.error('添加预警电话失败')
                    }
                }
            });
        },
        // 删除预警电话
        delwphone(phone) {
            console.log('phone',phone);
            // 提示
            this.$confirm("确认删除该预警电话?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(async () => {
                // 调用删除接口
                try {
                    let param = new URLSearchParams()
                    param.append('phone', phone)
                    // const res = await delIpList({ip: ip})
                    const res = await delwphone(param)
                    console.log('删除预警电话', res);
                    if (res && res.code == 200) {
                        // 提示
                        this.$message({
                            message: '删除预警电话成功',
                            type: 'success'
                        });
                        // 获取列表
                        this.getUserInfo()
                    } else {
                        this.$message.error('删除预警电话失败')
                    }
                } catch (error) {
                    console.log(error);
                    this.$message.error('删除预警电话失败')
                }
            })
            .catch(() => {
                return false;
            });
        },
        // 设置余额预警
        async onBalance() {
            try {
                // if (!this.warningList.length) {
                //     this.warningDialogVisible = true
                //     return
                // }
                let param = new URLSearchParams()
                param.append('alarm_amount', this.balanceForm.alarm_amount)
                const res = await onSubUser(param)
                // console.log('设置余额预警', res);
                if (res && res.code == 200) {
                    this.getUserInfo()
                    this.$message.success('设置余额预警成功')
                }
            } catch (error) {
                console.log(error);
                this.$message.error('设置余额预警失败')
            }
        },
        // 设置回调时间
        async onSetTime() {
            try {
                let param = new URLSearchParams()
                param.append('quality', this.phoneForm.quality)
                param.append('time_out', this.phoneForm.time_out)
                const res = await phonrRec(param)
                // console.log('设置-话费', res);
                if (res && res.code == 200) {
                    this.getUserInfo()
                    this.$message.success('设置话费充值成功')
                }
            } catch (error) {
                console.log(error);
                this.$message.error('设置话费充值失败')
            }
        }
    },
};
</script>

<style scoped>
.dialog-footer {
  display: block;
  text-align: center;
}
.dialog-footer .el-button {
    margin: 0 30px;

}
.el-icon-circle-plus-outline,
.el-icon-remove-outline {
    font-size: 25px;
    vertical-align: middle;
}
.el-alert {
    padding: 0px 10px;
}
.keySet {
    /* border-bottom: 1px solid #DCDFE6; */
    /* padding-bottom: 10px; */
}
.keySet .el-button {
    margin-right: 10px;
}
.el-card {
    padding-bottom: 0px;
}
</style>
<style>
.el-main {
  padding: 0;
}
.el-card {
  margin: 20px 30px;
}
</style>