zhenghuang
/
bsdgy-server
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

门店推广-推广人员管理页面开发。

Browse Source
master
kevin jiang 6 years ago
parent 37cd9fb2f9
commit 8367dd9b91
3 changed files with 143 additions and 35 deletions
Show Stats Download Patch File Download Diff File

2
kiisoo-ic-ui/src/pages/Home.vue
Unescape Escape View File

@ -8,7 +8,7 @@
<span>拓客营销</span>
</div>
<Menu active-name="3" theme="dark" width="auto" :class="menuitemClasses" @on-select="onSelectLister">
<Menu active-name="3" theme="dark" width="auto" :class="menuitemClasses" @on-select="onSelectLister" :accordion="true">
<Submenu name="1">
<template slot="title">
<Icon type="ios-paper" />

149
kiisoo-ic-ui/src/pages/shop/IncreaseStaffManager.vue
Unescape Escape View File

@ -25,7 +25,7 @@
<i-col span="12" style="text-align: right;padding-right: 20px;">
<Button type="primary" style="margin-right: 10px;">批量下载</Button>
<Button type="primary" style="margin-right: 10px;">批量添加</Button>
<Button type="primary">添加推广人员</Button>
<Button type="primary" @click="open(1)">添加推广人员</Button>
</i-col>
</Row>
</i-col>
@ -45,18 +45,105 @@
</template>
<template slot-scope="{ row, index }" slot="action">
<Button ghost type="primary" size="small" style="margin-right: 5px" @click="open(index)">开通门店企微号</Button>
<Button ghost type="error" size="small" @click="remove(index)">删除微信号</Button>
<Button ghost type="primary" size="small" style="margin-right: 5px" @click="open(2, index)">修改</Button>
<Button ghost type="error" size="small" @click="remove(index)">删除</Button>
</template>
</Table>
<!-- 预览二维码 -->
<Modal
v-model="isShow"
:title="showStoreName"
:footer-hide="true"
width="230"
class-name="vertical-center-modal"
>
<div slot="header">{{this.showStoreName}}</div>
<img :src="qrCodeImage" style="width:200px;height:200px;"/>
<div style="text-align: center;">
<Button ghost type="primary">下载</Button>
</div>
</Modal>
<!-- 添加推广人员 -->
<Modal
v-model="isShowAdd"
:footer-hide="true"
>
<div slot="header">
<template v-if="flag === 1">
<span>添加推广人员</span>
</template>
<template v-else>
<span>修改推广人员</span>
</template>
</div>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="名称" prop="name">
<i-input v-model="formValidate.name" placeholder="请输入名字"></i-input>
</FormItem>
<FormItem label="手机" prop="phone">
<i-input v-model="formValidate.phone" placeholder="成员通过验证该手机号后可加入企业">
</i-input>
</FormItem>
<FormItem label="工号" prop="staffCode">
<i-input v-model="formValidate.staffCode" placeholder="请输入工号" :disabled="flag !== 1 ? true : false" ></i-input>
</FormItem>
<FormItem label="角色" prop="role">
<Select v-model="formValidate.role" placeholder="选择角色">
<Option value="1">角色1</Option>
<Option value="2">角色2</Option>
<Option value="3">角色3</Option>
</Select>
</FormItem>
<FormItem label="所属区域" prop="region">
<Select v-model="formValidate.region" placeholder="选择区域">
<Option value="1">区域1</Option>
<Option value="2">区域2</Option>
<Option value="3">区域3</Option>
</Select>
</FormItem>
<FormItem label="所属店铺" prop="store">
<Select v-model="formValidate.store" placeholder="选择店铺">
<Option value="1">店铺1</Option>
<Option value="2">店铺2</Option>
<Option value="3">店铺3</Option>
</Select>
</FormItem>
<FormItem style="text-align: left;">
<Row>
<i-col span="16">
<Button type="primary" @click="handleSubmit('formValidate')">保存并生成推广码</Button>
<Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
</i-col>
<i-col span="8" style="text-align: right;">
<Button>继续添加</Button>
</i-col>
</Row>
</FormItem>
</Form>
</Modal>
</div>
</template>
<script>
import data from "../../utils/PhoneRegionData";
export default {
name: "IncreaseStaffManager",
data () {
return {
// 标记 1添加 2修改
flag: 1,
prefixDefault: data.prefixDefault,
isShow: false,
isShowAdd: false,
showStoreName: '',
qrCodeImage: '',
selectedRegion: null,
regionList: [],
selectedStore: null,
@ -154,7 +241,36 @@
customerNum: 999,
qrCodeState: false
}
]
],
// 开通企业微信 表单
formValidate: {
staffCode: '',
region: '',
phone: '',
role: '',
store: ''
},
ruleValidate: {
name: [
{ required: true, message: '名称不能为空', trigger: 'blur' }
],
staffCode: [
{ required: true, message: '工号不能为空', trigger: 'blur' }
],
// mail: [
// { required: true, message: '邮箱不能为空', trigger: 'blur' },
// { type: 'email', message: '邮箱格式错误', trigger: 'blur' }
// ],
role: [
{ required: true, message: '请选择角色', trigger: 'change' }
],
region: [
{ required: true, message: '请选择区域', trigger: 'change' }
],
store: [
{ required: true, message: '请选择店铺', trigger: 'change' }
]
}
}
},
methods: {
@ -164,15 +280,18 @@
},
// 预览二维码
show: function () {
this.isShow = true;
this.showStoreName = '店铺1';
this.qrCodeImage = '../static/img/logo-title.png';
},
// 下载二维码
download: function () {
},
// 开通企业微信号
open: function () {
// 添加、修改推广人员
open: function (flag) {
this.flag = flag;
this.isShowAdd = true;
},
// 删除
remove: function () {
@ -181,6 +300,20 @@
// switch开关
onSwitchChangeLister: function () {
},
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
// 调用添加接口
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
this.isShowAdd = false;
}
}
}

27
kiisoo-ic-ui/src/pages/shop/IncreaseStoreManager.vue
Unescape Escape View File

@ -123,8 +123,6 @@
<Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
</FormItem>
</Form>
</Modal>
</div>
</template>
@ -222,7 +220,7 @@
position: '',
interest: [],
desc: '',
checkbox: 'vail'
checkbox: ['vail']
},
ruleValidate: {
account: [
@ -240,11 +238,6 @@
// ],
party: [
{ required: true, message: '请选择部门', trigger: 'change' }
],
interest: [
{ required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
{ type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
]
}
}
@ -257,24 +250,6 @@
this.isShow = true;
this.showStoreName = '店铺1';
this.qrCodeImage = '../static/img/logo-title.png';
// const content = '<img src="'+ this.qrCodeImage +'" style="width: 200px;height: 200px;"/>';
// this.$Modal.info({
// title: this.showStoreName,
// content: content,
// width: 300,
// render: (h) => {
// return h('img', {
// attrs: {
// src: this.qrCodeImage,
// },
// style:{
// width:'200px',
// height:'200px'
// }
// })
// }
// });
},
ok: function () {
this.isShow = false;

Write Preview
Loading…
Cancel
Save