对接推广人员

kiisoo-ic-ui/src/pages/shop/IncreaseStaffManager.vue

@@ -31,10 +31,10 @@
             </i-col>
         </Row>
 
-        <Table :columns="columns1" :data="data1" style="margin-top: 20px;">
+        <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" style="margin-right: 5px" @click="show(row)">预览</Button>
-                <Button ghost type="primary" size="small" @click="download(index)">下载</Button>
+                <Button ghost type="primary" size="small" @click="download(row)">下载</Button>
             </template>
 
             <template slot-scope="{ row, index }" slot="state">
@@ -60,8 +60,8 @@
                 >
             <div slot="header">{{this.showStoreName}}</div>
             <img :src="qrCodeImage" style="width:200px;height:200px;"/>
-            <div style="text-align: center;">
+            <div  style="text-align: center;">
-                <Button ghost type="primary">下载</Button>
+                <Button ghost type="primary" @click="download(rowData)">下载</Button>
             </div>
         </Modal>
 
@@ -124,12 +124,19 @@
                 </FormItem>
             </Form>
         </Modal>
+
+            <div style="margin: 30px;overflow: hidden">
+                <div style="float: right;">
+                    <Page :total="total" :current="pageNum" :pageSize="pageSize"></Page>
+                </div>
+            </div>
     </div>
 </template>
 
 <script>
     import data from "../../utils/PhoneRegionData";
 
+    import staff from "../../services/staff/staff";
     export default {
         name: "IncreaseStaffManager",
         data () {
@@ -141,10 +148,17 @@
                 isShowAdd: false,
                 showStoreName: '',
                 qrCodeImage: '',
+                loading:true,
+                spuLoading:false,
+                // 分页
+                total: 0,
+                pageSize: 15,
+                pageNum: 1,
                 selectedRegion: null,
                 regionList: [],
                 selectedStore: null,
                 storeList: [],
+                rowData:{},
                 columns1: [
                     {
                         title: '序号',
@@ -158,12 +172,12 @@
                     },
                     {
                         title: '员工ID',
-                        key: 'code',
+                        key: 'staffCode',
                         width: 100
                     },
                     {
                         title: '手机号码',
-                        key: 'phone',
+                        key: 'mobil',
                         width: 160
                     },
                     {
@@ -184,6 +198,7 @@
                     {
                         title: '推广码',
                         slot: 'qrCodeAction',
+                        key:'epWechatQrCode',
                         width: 150
                     },
                     {
@@ -197,48 +212,7 @@
                         slot: 'action',
                     }
                 ],
-                data1: [
+                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
-                    }
-                ],
                 // 开通企业微信 表单
                 formValidate: {
                     staffCode: '',
@@ -270,20 +244,73 @@
                 }
             }
         },
+        mounted() {
+            this.listOfLogistics();
+        },
         methods: {
+            changePage (page) {
+                this.pageNum = page;
+                this.listOfLogistics();
+            },
+            listOfLogistics() {
+                let that = this;
+                let request = {
+                    userId: 1 ,
+                    region: that.region,
+                    shopId: that.store,
+                    pageNum: that.pageNum,
+                    pageSize: that.pageSize,
+                };
+                staff.getStaffList(request, function (data) {
+                    data = data.data;
+                    if(data.code == "0000") {
+
+                        that.data1 = [];
+                        let datas = data.results;
+                        //总页数
+                        if (datas.total == null) {
+                            that.total = 0;
+                        } else {
+                            that.total = datas.total;
+                        }
+                        if (datas.records == null) {
+                            datas.records = [];
+                        }
+                        that.data1 = datas.records;
+                    }
+                })
+            },
             // 日期选择
             onChangeDateLister: function () {
 
             },
             // 预览二维码
-            show: function () {
+            show: function (index) {
                 this.isShow = true;
-                this.showStoreName = '店铺1';
+                this.showStoreName = index.storeName;
-                this.qrCodeImage = '../static/img/logo-title.png';
+                this.qrCodeImage = index.epWechatQrCode;
+                this.rowData = index;
             },
             // 下载二维码
-            download: function () {
+            download: function (index) {
-
+                let name = index.staffCode+"-"+index.name
+                let image = new Image();
+                // 解决跨域 Canvas 污染问题
+                image.setAttribute("crossOrigin", "anonymous");
+                image.onload = function() {
+                    let canvas = document.createElement("canvas");
+                    canvas.width = image.width;
+                    canvas.height = image.height;
+                    let context = canvas.getContext("2d");
+                    context.drawImage(image, 0, 0, image.width, image.height);
+                    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
+                    let a = document.createElement("a"); // 生成一个a元素
+                    let event = new MouseEvent("click"); // 创建一个单击事件
+                    a.download = name || "photo"; // 设置图片名称
+                    a.href = url; // 将生成的URL设置为a.href属性
+                    a.dispatchEvent(event); // 触发a的单击事件
+                };
+                image.src = index.epWechatQrCode;
             },
             // 添加、修改推广人员
             open: function (flag) {

kiisoo-ic-ui/src/services/staff/staff.js

@@ -0,0 +1,21 @@
+/**
+ * 登录 server层
+ * @author dexiang.jiang
+ * @date 2019/05/08 18:25
+ */
+
+import http from '../CommonHttp'
+
+/**
+ * 店铺人员
+ * @param params 参数
+ * @param call 成功的回调
+ * @returns {Promise<any>} 返回Promise对象
+ */
+export function getStaffList(params, call) {
+    return http.get('/store/staff/list', params).then(call)
+}
+
+export default {
+    getStaffList
+}