<template>
|
<!--
|
作者：lyzflash
|
时间：2021-11-20
|
描述：设置商户通知人
|
-->
|
<div class="product-add">
|
<!--form表单-->
|
<el-form size="small" ref="form" :model="form" label-width="200px">
|
<!--消息通知设置-->
|
<div class="common-form">消息通知设置</div>
|
<el-alert title="警告提示的文案" type="warning" :closable="false">
|
<template slot="title">
|
<div>需要成为公众号会员才能成为通知人。<a href="#" @click="dialogMpVisible = true">扫码成为公众号会员</a></div>
|
</template>
|
</el-alert>
|
<el-form-item label="新订单通知">
|
<el-row>
|
<el-button type="primary" @click="addClick">选择会员</el-button>
|
<div v-if="form.order__user_list && form.order__user_list.length > 0" class="d-s-c f-w">
|
<div v-for="(item, index) in form.order__user_list" :key="index" class="img pr">
|
<a href="javascript:void(0)" class="delete-btn" @click="deleteFunc(index)"><i class="el-icon-error"></i></a>
|
<img :src="item.avatarUrl" width="100" height="100" />
|
<p class="text-ellipsis">{{ item.nickName }}</p>
|
</div>
|
</div>
|
<div>
|
<el-link :underline="false" disabled>可以指定多人，不指定则不发送通知</el-link>
|
</div>
|
</el-row>
|
</el-form-item>
|
|
<!--提交-->
|
<div class="common-button-wrapper"><el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button></div>
|
</el-form>
|
|
<el-dialog title="扫码成为公众号会员" :visible.sync="dialogMpVisible" width="500px">
|
<div class="qrcode">
|
<img :src="qrcode" width="300" height="300" />
|
</div>
|
<div class="qrcode-note">请让通知人用微信扫一扫</div>
|
</el-dialog>
|
|
<!--添加-->
|
<GetMpUser :is_open="open_add" @close="closeDialogFunc($event, 'add')"></GetMpUser>
|
|
</div>
|
</template>
|
|
<script>
|
import SettingApi from '@/api/setting.js';
|
import GetMpUser from '@/components/user/GetMpUser.vue';
|
export default {
|
components: {
|
/*编辑组件*/
|
GetMpUser
|
},
|
data() {
|
return {
|
form: {
|
order__user_ids: []
|
},
|
|
/*是否打开添加弹窗*/
|
open_add: false,
|
loading: false,
|
open_mp: false,
|
qrcode: '',
|
dialogMpVisible: false
|
};
|
},
|
created() {
|
this.getParams()
|
},
|
|
methods: {
|
getParams() {
|
let self = this;
|
SettingApi.getMessage({}, true).then(res => {
|
self.form = res.data.vars.values;
|
self.qrcode = res.data.vars.qrcode;
|
if (!self.form.order__user_list) {
|
self.form.order__user_list = [];
|
}
|
})
|
.catch(error => {
|
|
});
|
|
},
|
onSubmit() {
|
let self = this;
|
let params = this.form;
|
self.loading = true;
|
SettingApi.editMessage(params, true)
|
.then(data => {
|
self.loading = false;
|
self.$message({
|
message: '恭喜你，设置成功',
|
type: 'success'
|
});
|
// self.$router.push('/setting/Printing');
|
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
},
|
|
/*删除会员*/
|
deleteFunc(i) {
|
this.form.order__user_ids.splice(i, 1);
|
this.form.order__user_list.splice(i, 1);
|
},
|
|
/*打开弹出层*/
|
addClick() {
|
this.open_add = true;
|
},
|
|
/*关闭获取用户弹窗*/
|
closeDialogFunc(e) {
|
if (e.type != 'error') {
|
//console.log(e.params);
|
if (this.form.order__user_ids.indexOf(e.params.user_id) == -1) {
|
this.form.order__user_ids.push(e.params.user_id);
|
this.form.order__user_list.push({ user_id: e.params.user_id, avatarUrl: e.params.avatarUrl,nickName: e.params.nickName });
|
} else {
|
this.$message({
|
message: '已选择该会员',
|
type: 'warning'
|
});
|
}
|
}
|
this.open_add = false;
|
},
|
|
/*取消*/
|
cancelFunc() {
|
this.$router.back(-1);
|
},
|
|
}
|
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.basic-setting-content {}
|
|
.product-add {
|
padding-bottom: 50px;
|
}
|
|
.el-alert {
|
margin-bottom: 20px;
|
}
|
|
.img {
|
margin-top: 10px;
|
margin-right: 10px;
|
}
|
|
.img img {
|
border: 1px solid #eeeeee;
|
}
|
|
.delete-btn {
|
position: absolute;
|
display: block;
|
width: 20px;
|
height: 20px;
|
line-height: 20px;
|
right: -8px;
|
top: -8px;
|
color: red;
|
}
|
|
.qrcode {
|
text-align: center;
|
}
|
|
.qrcode img {
|
display: inline-block;
|
}
|
|
.qrcode-note {
|
text-align: center;
|
font-size: 16px;
|
color: #999;
|
padding: 10px 0;
|
}
|
</style>
|
