门店推广页面开发。
kevin jiang
6 years ago
parent
95f28c5103
commit
da6c5aff31
@ -1,15 +1,198 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>IncreaseStaffManager</p>
|
||||
<Row style="margin-top: 20px;width: 100%;background-color: #F7F8FA;">
|
||||
<i-col span="24" style="text-align: left;padding-left: 10px;">
|
||||
<Row class="row-style">
|
||||
<i-col span="1" style="text-align: right;">
|
||||
<span class="region">区域选择</span>
|
||||
</i-col>
|
||||
<i-col span="4" style="padding-left: 10px;">
|
||||
<Select v-model="selectedRegion" filterable style="width: 200px;">
|
||||
<Option v-for="item in regionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
</i-col>
|
||||
<i-col span="1" style="text-align: right;">
|
||||
<span class="region">店铺选择</span>
|
||||
</i-col>
|
||||
<i-col span="4" style="padding-left: 10px;">
|
||||
<Select v-model="selectedStore" filterable style="width: 200px;">
|
||||
<Option v-for="item in storeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
</i-col>
|
||||
<i-col span="2">
|
||||
<Button type="primary">查询</Button>
|
||||
</i-col>
|
||||
<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>
|
||||
</i-col>
|
||||
</Row>
|
||||
</i-col>
|
||||
</Row>
|
||||
|
||||
<Table :columns="columns1" :data="data1" style="margin-top: 20px;">
|
||||
<template slot-scope="{ row, index }" slot="qrCodeAction">
|
||||
<Button ghost type="primary" size="small" style="margin-right: 5px" @click="show(index)">预览</Button>
|
||||
<Button ghost type="primary" size="small" @click="download(index)">下载</Button>
|
||||
</template>
|
||||
|
||||
<template slot-scope="{ row, index }" slot="state">
|
||||
<i-switch size="large" :value="row.qrCodeState" @on-change="onSwitchChangeLister(row, index)">
|
||||
<span slot="open">开启</span>
|
||||
<span slot="close">关闭</span>
|
||||
</i-switch>
|
||||
</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>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "IncreaseStaffManager"
|
||||
name: "IncreaseStaffManager",
|
||||
data () {
|
||||
return {
|
||||
selectedRegion: null,
|
||||
regionList: [],
|
||||
selectedStore: null,
|
||||
storeList: [],
|
||||
columns1: [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'id',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '员工ID',
|
||||
key: 'code',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '手机号码',
|
||||
key: 'phone',
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
title: '店铺',
|
||||
key: 'storeName',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '角色',
|
||||
key: 'role',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '客户数',
|
||||
key: 'customerNum',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '推广码',
|
||||
slot: 'qrCodeAction',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '推广码',
|
||||
key: 'qrCodeState',
|
||||
width: 150,
|
||||
slot: 'state'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
}
|
||||
],
|
||||
data1: [
|
||||
{
|
||||
id: 1,
|
||||
name: '王老吉',
|
||||
code: 'D1',
|
||||
phone: '13112345678',
|
||||
storeName: '店铺1',
|
||||
role: 1,
|
||||
customerNum: 999,
|
||||
qrCodeState: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '王老吉2',
|
||||
code: 'D2',
|
||||
phone: '13112345678',
|
||||
storeName: '店铺2',
|
||||
role: 2,
|
||||
customerNum: 999,
|
||||
qrCodeState: true
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '王老吉3',
|
||||
code: 'D3',
|
||||
phone: '13112345678',
|
||||
storeName: '店铺3',
|
||||
role: 3,
|
||||
customerNum: 999,
|
||||
qrCodeState: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '王老吉4',
|
||||
code: 'D4',
|
||||
phone: '13112345678',
|
||||
storeName: '店铺4',
|
||||
role: 3,
|
||||
customerNum: 999,
|
||||
qrCodeState: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 日期选择
|
||||
onChangeDateLister: function () {
|
||||
|
||||
},
|
||||
// 预览二维码
|
||||
show: function () {
|
||||
|
||||
},
|
||||
// 下载二维码
|
||||
download: function () {
|
||||
|
||||
},
|
||||
// 开通企业微信号
|
||||
open: function () {
|
||||
|
||||
},
|
||||
// 删除
|
||||
remove: function () {
|
||||
|
||||
},
|
||||
// switch开关
|
||||
onSwitchChangeLister: function () {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.region {
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.row-style {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,15 +1,150 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>IncreaseStoreManager</p>
|
||||
<Row style="margin-top: 20px;width: 100%;background-color: #F7F8FA;">
|
||||
<i-col span="24" style="text-align: left;padding-left: 10px;">
|
||||
<Row class="row-style">
|
||||
<i-col span="1" style="text-align: right;">
|
||||
<span class="region">区域选择</span>
|
||||
</i-col>
|
||||
<i-col span="4" style="padding-left: 10px;">
|
||||
<Select v-model="selectedRegion" filterable style="width: 200px;">
|
||||
<Option v-for="item in regionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
</i-col>
|
||||
<i-col span="1" style="text-align: right;">
|
||||
<span class="region">店铺选择</span>
|
||||
</i-col>
|
||||
<i-col span="4" style="padding-left: 10px;">
|
||||
<Select v-model="selectedStore" filterable style="width: 200px;">
|
||||
<Option v-for="item in storeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
|
||||
</Select>
|
||||
</i-col>
|
||||
<i-col span="2">
|
||||
<Button type="primary">查询</Button>
|
||||
</i-col>
|
||||
<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>
|
||||
</i-col>
|
||||
</Row>
|
||||
</i-col>
|
||||
</Row>
|
||||
|
||||
<Table :columns="columns1" :data="data1" style="margin-top: 20px;">
|
||||
<template slot-scope="{ row, index }" slot="qrCodeAction">
|
||||
<Button ghost type="primary" size="small" style="margin-right: 5px" @click="show(index)">预览</Button>
|
||||
<Button ghost type="primary" size="small" @click="download(index)">下载</Button>
|
||||
</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>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "IncreaseStoreManager"
|
||||
name: "IncreaseStoreManager",
|
||||
data () {
|
||||
return {
|
||||
selectedRegion: null,
|
||||
regionList: [],
|
||||
selectedStore: null,
|
||||
storeList: [],
|
||||
columns1: [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'id',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '门店名称',
|
||||
key: 'storeName'
|
||||
},
|
||||
{
|
||||
title: '门店企业号',
|
||||
key: 'storeWx'
|
||||
},
|
||||
{
|
||||
title: '员工数',
|
||||
key: 'staffNum',
|
||||
},
|
||||
{
|
||||
title: '客户数',
|
||||
key: 'customerNum',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '推广码',
|
||||
slot: 'qrCodeAction',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
}
|
||||
],
|
||||
data1: [
|
||||
{
|
||||
id: 1,
|
||||
storeName: '店铺1',
|
||||
storeWx: 'D1',
|
||||
staffNum: 10,
|
||||
customerNum: 999
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
storeName: '店铺2',
|
||||
storeWx: 'D2',
|
||||
staffNum: 10,
|
||||
customerNum: 999
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
storeName: '店铺3',
|
||||
storeWx: 'D3',
|
||||
staffNum: 10,
|
||||
customerNum: 999
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
storeName: '店铺4',
|
||||
storeWx: 'D4',
|
||||
staffNum: 10,
|
||||
customerNum: 999
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChangeDateLister: function () {
|
||||
|
||||
},
|
||||
show: function () {
|
||||
|
||||
},
|
||||
download: function () {
|
||||
|
||||
},
|
||||
open: function () {
|
||||
|
||||
},
|
||||
remove: function () {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.region {
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.row-style {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue