客户明细数据

kiisoo-ic-ui/src/iview.js

@@ -25,7 +25,9 @@ import {
     Switch,
     Modal,
     Message,
-    Radio
+    Radio,
+    List,
+    Divider
 } from "view-design";
 import 'view-design/dist/styles/iview.css';
 
@@ -58,3 +60,5 @@ Vue.component('Modal', Modal);
 Vue.component('Message', Message);
 Vue.prototype.$Modal = Modal;
 Vue.component('Radio', Radio);
+Vue.component('List', List);
+Vue.component('Divider', Divider);

kiisoo-ic-ui/src/pages/CustomerDetail.vue

@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <Row :gutter="32">
+      <i-col span="32">
+        <row>
+          <row style="height: 90px;background: #f7f8fa;border: 1px solid #E8ECF2;line-height: 90px">
+            <span style="margin-left: 48px">开始时间</span>
+            <DatePicker v-model="startDate"  class="left-15" type="date" :options="options1" placeholder="Select date" style="width: 200px"></DatePicker>
+            <span class="left-15">结束时间</span>
+            <DatePicker v-model="endDate"  class="left-15" :options="options2" type="date" placeholder="Select date" style="width: 200px"></DatePicker>
+            <span  class="left-15">区域选择</span>
+            <Select filterable placeholder="请选择区域" v-model="regionId" class="left-15" style="width:190px" size="small">
+              <Option v-for="item in regionList" :value="item.id" :key="item.id">{{ item.name }}</Option>
+            </Select>
+            <span class="left-15">店铺选择</span>
+            <Select filterable placeholder="请选择店铺" v-model="shopId" class="left-15" style="width:190px" size="small">
+              <Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.name }}</Option>
+            </Select>
+            <span class="left-15">导购选择测试</span>
+            <Select filterable placeholder="请选择导购" v-model="sellerId" class="left-15" style="width:190px" size="small">
+              <Option v-for="item in sellerList" :value="item.id" :key="item.id">{{ item.name }}</Option>
+            </Select>
+            <Button type="primary" style="width: 70px;margin-left: 20px" @click="searchCustomerDataBtnClick" size="small">查询</Button>
+          </row>
+          <row>
+            <Table :columns="columns1" :data="data1" style="margin-top: 20px;"></Table>
+          </row>
+          <Modal v-model="modal12" draggable scrollable title="客户信息" >
+            <row style="padding: 10px 0">
+                <i-col span="12" style="border-right: 1px solid #000;height: 200px">
+                  <row><span style="width: 60px;display:inline-block;text-align: right">客户名称</span>&nbsp;<input></input></row>
+                  <row><span style="width: 60px;display:inline-block;text-align: right">客户Id</span>&nbsp;<span>{{customerId}}</span></row>
+                </i-col>
+                <i-col  span="12"  style="height: 100%">
+                  <row><span style="width: 60px;display:inline-block;text-align: right">关联会员</span></row>
+                  <row><span style="width: 60px;display:inline-block;text-align: right">会员名称</span>&nbsp;<span>客户Id</span></row>
+                  <row><span style="width: 60px;display:inline-block;text-align: right">手机号</span></row>
+                  <row><span style="width: 60px;display:inline-block;text-align: right">会员生日</span>&nbsp;<span>客户Id</span></row>
+                  <row><span style="width: 60px;display:inline-block;text-align: right">消费次数</span></row>
+                  <row><span style="width: 60px;display:inline-block;text-align: right">消费金额</span>&nbsp;<span>客户Id</span></row>
+                  <row><span style="width: 60px;display:inline-block;text-align: right">最近消费</span></row>
+                  <row><span style="width: 60px;display:inline-block;text-align: right">专属导购</span>&nbsp;<span>客户Id</span></row>
+                  <row><span style="width: 60px;display:inline-block;text-align: right">所属门店</span></row>
+                </i-col>
+            </row>
+
+
+<!--            <div style="width: 250px;position:relative;">-->
+<!--              <div>ssss</div>-->
+<!--              <div>ssss</div>-->
+<!--              <div>ssss</div>-->
+<!--            </div >-->
+<!--            <div style="width: 50%;position:relative;float: right">-->
+<!--                <div>ssss</div>-->
+<!--                <div>ssss</div>-->
+<!--                <div>ssss</div>-->
+<!--            </div>-->
+          </Modal>
+        </row>
+      </i-col>
+    </Row>
+  </div>
+</template>
+<script>
+
+    export default {
+
+        data() {
+            return {
+              //开始时间，结束时间
+              modal12: false,
+              startDate: null,
+              endDate: null,
+              regionId: null,
+              regionList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
+              shopId: null,
+              shopList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
+              sellerId: null,
+              sellerList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
+              customerId:255,
+              columns1: [
+                {
+                  title: '序号',
+                  key: 'id'
+                },
+                {
+                  title: '客户名称',
+                  key: 'customerName'
+                },
+                {
+                  title: '客户手机',
+                  key: 'customerPhone'
+                },
+                {
+                  title: '所属导购',
+                  key: 'seller'
+                },
+                {
+                  title: '关联会员',
+                  key: 'vipName'
+                },
+                {
+                  title: '消费次数',
+                  key: 'salesNum'
+                },
+                {
+                  title: '消费金额',
+                  key: 'salesAmt'
+                },
+                {
+                  title: '会员等级',
+                  key: 'vipLevel'
+                },
+                {
+                  title: '会员生日',
+                  key: 'vipBirth'
+                },
+                {
+                  title: '操作',
+                  key: 'operation',
+                  render: (h, params) => {
+                    let that = this;
+                    return h('Button', {
+                              on: {
+                                'click': (value) => {
+                                  that.modal12 = true
+                                }
+                              }
+                            },[
+                              h('span', {
+                                domProps: {
+                                  innerHTML: '查看详情'
+                                }
+                              })
+                              ]
+
+                    );
+                  }
+                }
+              ],
+              data1: [
+                {
+                  id: 1,
+                  customerName: '会员名称',
+                  customerPhone: '会员手机',
+                  seller: '会员导购',
+                  vipName: 'vip名称',
+                  salesNum: '消费次数',
+                  salesAmt: '消费金额',
+                  vipLevel: '会员等级',
+                  vipBirth: '会员生日'
+                },
+              ]
+            }
+        },
+        mounted: function () {
+
+        },
+        methods: {
+          searchCustomerDataBtnClick: function () {
+
+          },
+
+          // /**商品mainList*/
+          // getMainList: function(){
+          //
+          // },
+          // //切页处理
+          // handlePage:function (value) {
+          //
+          // },
+
+        },
+        computed:{
+          options1() {
+            let that = this;
+            return{
+              disabledDate (date) {
+                if(that.endDate == null || that.endDate == ""){
+                  return false;
+                }else{
+                  return date && date.valueOf() > that.endDate;
+                }
+              }
+            }
+
+          },
+          options2() {
+            let that = this;
+            return{
+              disabledDate (date) {
+                if(that.startDate == null || that.startDate == ""){
+                  return false;
+                }else{
+                  return date && date.valueOf() < that.startDate;
+                }
+              }
+            }
+          },
+        }
+    }
+</script>
+<style scoped>
+
+  .left-15{
+    margin-left: 15px;
+  }
+
+</style>

kiisoo-ic-ui/src/pages/Home.vue

@@ -32,6 +32,7 @@
               数据中心
             </template>
             <MenuItem name="3-1" to="/customer/data">客户数据</MenuItem>
+            <MenuItem name="3-2" to="/customer/data/detail">客户数据明细</MenuItem>
 
           </Submenu>
         </Menu>

kiisoo-ic-ui/src/router/index.js

@@ -7,6 +7,7 @@ import AccountManager from '@/pages/user/AccountManager';
 import RoleManager from '@/pages/user/RoleManager';
 import IncreaseManager from '@/pages/shop/IncreaseManager';
 import CustomerData from "@/pages/CustomerData";
+import CustomerDetail from "@/pages/CustomerDetail";
 import IncreaseData from '@/pages/shop/IncreaseData';
 import IncreaseDataRegion from '@/pages/shop/IncreaseDataRegion';
 import IncreaseDataStaff from '@/pages/shop/IncreaseDataStaff';
@@ -101,6 +102,11 @@ const router = new Router({
           path: '/customer/data',
           name: 'CustomerData',
           component: CustomerData,
+        },
+        {
+          path: '/customer/data/detail',
+          name: 'CustomerDetail',
+          component: CustomerDetail,
         }
       ]
     }