mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 10:57:26 +08:00
manager 升级到vue3
This commit is contained in:
pikachu1995@126.com
@@ -1,154 +1,141 @@
|
||||
|
||||
<template>
|
||||
<Card class="card">
|
||||
|
||||
<el-card class="card">
|
||||
<div class="cardBox">
|
||||
<div class="methodItem">
|
||||
<img src="../../../assets/aliyun.png" height="172" width="440"/>
|
||||
<h4>阿里云短信</h4></div>
|
||||
<img src="../../../assets/aliyun.png" height="172" width="440" />
|
||||
<h4>阿里云短信</h4>
|
||||
</div>
|
||||
<div class="bar">
|
||||
<div class="status" style="color: rgb(53, 189, 129);">已启用</div>
|
||||
<div class="status" style="color: rgb(53, 189, 129)">已启用</div>
|
||||
<div><a class="links">编辑</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 阿里云的短信参数 -->
|
||||
<Modal
|
||||
:title="modalTitle"
|
||||
v-model="modalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
>
|
||||
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
|
||||
<FormItem label="accessKeyId" prop="addressName">
|
||||
<Input v-model="form.accessKeyId" clearable style="width: 100%"/>
|
||||
</FormItem>
|
||||
<FormItem label="accessSecret" prop="accessSecret">
|
||||
<Input v-model="form.accessSecret" clearable style="width: 100%"/>
|
||||
</FormItem>
|
||||
<FormItem label="signName" prop="signName">
|
||||
<Input v-model="form.signName" clearable style="width: 100%"/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="modalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="saveSetting"
|
||||
>提交
|
||||
</Button
|
||||
>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
</Card>
|
||||
<el-dialog v-model="modalVisible" :title="modalTitle" width="500px" :close-on-click-modal="false">
|
||||
<el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
|
||||
<el-form-item label="accessKeyId" prop="addressName">
|
||||
<el-input v-model="form.accessKeyId" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="accessSecret" prop="accessSecret">
|
||||
<el-input v-model="form.accessSecret" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="signName" prop="signName">
|
||||
<el-input v-model="form.signName" clearable style="width: 100%" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="modalVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="saveSetting">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-card>
|
||||
</template>
|
||||
<script>
|
||||
import {getSetting, setSetting} from "@/api/index.js";
|
||||
import template from "./template";
|
||||
export default {
|
||||
name: "smsSettingManage",
|
||||
components: {
|
||||
template
|
||||
},
|
||||
import { getSetting, setSetting } from "@/api/index.js";
|
||||
import template from "./template";
|
||||
export default {
|
||||
name: "smsSettingManage",
|
||||
components: {
|
||||
template,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
submitLoading: false, // 提交状态
|
||||
template, // 模板
|
||||
selected: "", // 已选数据
|
||||
settingData: "", // 设置数据
|
||||
modalTitle: '设置', // modal标题
|
||||
modalVisible: false, // modal显隐
|
||||
form: {}, // 表单数据
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
submitLoading: false,
|
||||
template,
|
||||
selected: "",
|
||||
settingData: "",
|
||||
modalTitle: "设置",
|
||||
modalVisible: false,
|
||||
form: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
settingInfo("SMS_SETTING");
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
settingInfo("SMS_SETTING")
|
||||
},
|
||||
// 保存设置
|
||||
saveSetting() {
|
||||
setSetting("SMS_SETTING", this.form).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("保存成功!");
|
||||
} else {
|
||||
this.$Message.error("保存失败!");
|
||||
}
|
||||
this.modalVisible = false
|
||||
});
|
||||
},
|
||||
// 查看
|
||||
settingInfo(v) {
|
||||
alert()
|
||||
this.selected = v
|
||||
getSetting(v).then((res) => {
|
||||
if (res.result) {
|
||||
console.log(res)
|
||||
this.modalVisible = true
|
||||
this.form = res
|
||||
}
|
||||
});
|
||||
}
|
||||
saveSetting() {
|
||||
setSetting("SMS_SETTING", this.form).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("保存成功!");
|
||||
} else {
|
||||
this.$Message.error("保存失败!");
|
||||
}
|
||||
this.modalVisible = false;
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
settingInfo(v) {
|
||||
alert();
|
||||
this.selected = v;
|
||||
getSetting(v).then((res) => {
|
||||
if (res.result) {
|
||||
console.log(res);
|
||||
this.modalVisible = true;
|
||||
this.form = res;
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
.cardBox {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
line-height: 1.5;
|
||||
margin-right: 20px;
|
||||
width: 300px;
|
||||
border: 1px solid #eee;
|
||||
padding: 10px;
|
||||
}
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
.cardBox {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
line-height: 1.5;
|
||||
margin-right: 20px;
|
||||
width: 300px;
|
||||
border: 1px solid #eee;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.methodItem {
|
||||
width: 100%;
|
||||
border: 1px solid #f5f5f5;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.methodItem {
|
||||
width: 100%;
|
||||
border: 1px solid #f5f5f5;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
methodItem img {
|
||||
width: 220px;
|
||||
height: 86px;
|
||||
}
|
||||
methodItem img {
|
||||
width: 220px;
|
||||
height: 86px;
|
||||
}
|
||||
|
||||
methodItem h4 {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 5px;
|
||||
}
|
||||
methodItem h4 {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.methodItem img {
|
||||
width: 220px;
|
||||
height: 86px;
|
||||
}
|
||||
.methodItem img {
|
||||
width: 220px;
|
||||
height: 86px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 10px 8px 0;
|
||||
}
|
||||
.bar {
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 10px 8px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user