浏览代码

标签管理,会员卡管理

zhengchengwu 5 年前
父节点
当前提交
8fe6030af5

+ 1 - 3
config/index.js 查看文件

@@ -17,10 +17,8 @@ module.exports = {
17 17
     // can be overwritten by process.env.HOST
18 18
     // if you want dev by ip, please set host: '0.0.0.0'
19 19
 
20
-    // host: 'test1.sgjyun.com',
20
+    host: 'test1.sgjyun.com',
21 21
     // host: 'jk.kuyicloud.com',
22
-    //host: 'test1.sgjyun.com',
23
-    host:'localhost',
24 22
     port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
25 23
     autoOpenBrowser: true,
26 24
     errorOverlay: true,

+ 54 - 1
src/api/member/member.js 查看文件

@@ -56,11 +56,64 @@ export function EditMemberCard(params) {
56 56
   })
57 57
 }
58 58
 
59
-export function GetTags() {
59
+export function GetTags(params) {
60 60
   return request({
61 61
     url: '/api/members/tags',
62 62
     method: 'get',
63
+    params: params
64
+  })
65
+}
66
+
67
+export function CreateTag(data) {
68
+  return request({
69
+    url: '/api/members/tag/create',
70
+    method: 'post',
71
+    data: data
63 72
   })
64 73
 }
65 74
 
75
+export function EditTag(id,data) {
76
+  return request({
77
+    url: '/api/members/tag/edit?id='+id,
78
+    method: 'put',
79
+    data: data
80
+  })
81
+}
82
+export function DeleteTags(data) {
83
+  return request({
84
+    url: '/api/members/tags/delete',
85
+    method: 'delete',
86
+    data: data
87
+  })
88
+}
66 89
 
90
+export function GetCards() {
91
+  return request({
92
+    url: '/api/membercards',
93
+    method: 'get',
94
+  })
95
+}
96
+
97
+export function CreateMemberShipCard(data) {
98
+  return request({
99
+    url: '/api/membercard/create',
100
+    method: 'post',
101
+    data: data
102
+  })
103
+}
104
+
105
+export function EditMemberShipCard(id,data) {
106
+  return request({
107
+    url: '/api/membercard/edit?id='+id,
108
+    method: 'put',
109
+    data: data
110
+  })
111
+}
112
+
113
+export function DeleteMemberShipCard(data) {
114
+  return request({
115
+    url: '/api/membercards/delete',
116
+    method: 'delete',
117
+    data: data
118
+  })
119
+}

+ 6 - 0
src/router/modules/member.js 查看文件

@@ -24,5 +24,11 @@ export default {
24 24
       name: 'memberTaglist',
25 25
       meta: { title: '标签管理', noCache: true }
26 26
     },
27
+    {
28
+      path: '/member/cards',
29
+      component: () => import('@/scrm_pages/members/cards'),
30
+      name: 'memberCardlist',
31
+      meta: { title: '会员卡管理', noCache: true }
32
+    },
27 33
   ]
28 34
 }

+ 24 - 18
src/router/modules/system.js 查看文件

@@ -1,21 +1,27 @@
1 1
 import Layout from '@/views/layout/Layout'
2 2
 
3
-export default{
4
-    alwaysShow: true,
5
-    path: '/Systemsetting',
6
-    component: Layout,
7
-    redirect: 'noredirect',
8
-    name: 'Systemsetting',
9
-    meta: {
10
-        title: 'systemsetting',
11
-        icon: 'peoples'
12
-      },
13
-      children: [
14
-        {
15
-          path: '/Systemsetting/staffmanagement',
16
-          component: () => import('@/scrm_pages/Systemsetting/staffmanagement'),
17
-          name: 'memberslist',
18
-          meta: { title: 'staffmanagement', noCache: true }
19
-        },
20
-      ]  
3
+export default {
4
+  alwaysShow: true,
5
+  path: '/Systemsetting',
6
+  component: Layout,
7
+  redirect: 'noredirect',
8
+  name: 'Systemsetting',
9
+  meta: {
10
+    title: 'systemsetting',
11
+    icon: 'peoples'
12
+  },
13
+  children: [
14
+    {
15
+      path: '/weixinmp/authorization',
16
+      component: () => import('@/scrm_pages/weixinmp/authorization'),
17
+      name: 'weixinMpAuth',
18
+      meta: { title: '公众号授权', noCache: true }
19
+    },
20
+    {
21
+      path: '/Systemsetting/staffmanagement',
22
+      component: () => import('@/scrm_pages/Systemsetting/staffmanagement'),
23
+      name: 'memberslist',
24
+      meta: { title: 'staffmanagement', noCache: true }
25
+    },
26
+  ]
21 27
 }

+ 207 - 0
src/scrm_pages/members/cards.vue 查看文件

@@ -0,0 +1,207 @@
1
+<template>
2
+  <div class="main-contain">
3
+    <div class="position">
4
+      <bread-crumb :crumbs='crumbs'></bread-crumb>
5
+      <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="openCreate">添加会员卡</el-button>
6
+    </div>
7
+    <div class="app-container">
8
+        <div class="filter-container" style="margin-top: 10px;margin-left: 5px " id="member-cards-box">
9
+          <div class="col" v-for="(card, index) in cardsData" :key="index">
10
+              <div class="thumbnail">
11
+
12
+                  <div class="pic" v-if="card.background_type==1" :style="'background: '+card.background">
13
+                      <div class="ico_crow" ></div>
14
+                  </div>
15
+                  <div class="pic" v-else>
16
+                      <img :src="card.background" alt="...">
17
+                  </div>
18
+                  <h3 class="tit">{{card.card_name}}</h3>
19
+                  <div class="caption">
20
+                      <h3 class="card_edier">
21
+                        <span @click="openEdit(card, index)">编辑会员卡</span> -
22
+                        <span @click="openDelete(card, index)">删除会员卡</span>
23
+                      </h3>
24
+                  </div>
25
+              </div>
26
+          </div>
27
+        </div>
28
+        <!--create-card-form 添加会员卡-->
29
+        <create-card-form ref="createCardForm" :cardsData="cardsData" ></create-card-form>
30
+        <!--create-card-form 编辑会员卡-->
31
+        <edit-card-form ref="editCardForm" :cardsData="cardsData" :cardIndex="cardIndex" :form="editFormData"></edit-card-form>
32
+    </div>
33
+  </div>
34
+</template>
35
+
36
+<script>
37
+  import {GetCards, DeleteMemberShipCard} from "@/api/member/member";
38
+  import BreadCrumb from '../components/bread-crumb';
39
+  import CreateCardForm from "./components/CreateCardForm";
40
+  import EditCardForm from "./components/EditCardForm";
41
+
42
+  export default {
43
+    name: 'memberCardList',
44
+    components:{
45
+      BreadCrumb,
46
+      CreateCardForm,
47
+      EditCardForm,
48
+    },
49
+    data(){
50
+      return{
51
+        crumbs: [
52
+          { path: false, name: '会员管理' },
53
+          { path: false, name: '会员卡管理' }
54
+        ],
55
+        cardsData:[],
56
+        editFormData:{
57
+            background_type:1,
58
+            background:"#409EFF",
59
+            background_color:"#409EFF",
60
+            background_image:"",
61
+            card_name:'',
62
+            use_notice:'',
63
+            card_right:'',
64
+            service_phone:'',
65
+            upgrade_integral:0,
66
+            id:0,
67
+        },
68
+        cardIndex:-1,
69
+      }
70
+    },
71
+    methods:{
72
+        openCreate:function(){
73
+          this.$refs.createCardForm.open();
74
+        },
75
+        openEdit(row, index) {
76
+          for (const key in this.editFormData) {
77
+            this.editFormData[key] = row[key];
78
+          }
79
+          this.cardIndex = index;
80
+          this.$refs.editCardForm.open();
81
+        },
82
+        openDelete:function(row,index){
83
+          this.$confirm('确认要删除该会员卡吗?<br>删除后,该会员卡将无法恢复', '删除提示', {
84
+            dangerouslyUseHTMLString:true,
85
+            confirmButtonText: '确定',
86
+            cancelButtonText: '取消',
87
+            type: 'warning'
88
+          }).then(() => {
89
+            var ids = [];
90
+            ids.push(row.id);
91
+            DeleteMemberShipCard({ids:ids}).then(response=>{
92
+              var res = response.data;
93
+              if (res.state === 1) {
94
+                this.cardsData.splice(index, 1);
95
+                this.$message.success("删除会员卡成功");
96
+              }else {
97
+                this.$message.error(res.msg);
98
+              }
99
+            }).catch(e=>{});
100
+          }).catch(() => {
101
+            return false        
102
+          });
103
+        },
104
+        GetCards(){
105
+            GetCards().then(response=>{
106
+                var res = response.data;
107
+                if(res.state===1) {
108
+                    this.cardsData = res.data.cards;
109
+                }
110
+            }).catch(e=>{})
111
+        }
112
+    },
113
+    created(){
114
+        this.GetCards();
115
+    }
116
+  }
117
+</script>
118
+
119
+<style scoped>
120
+ #member-cards-box .col {
121
+    float: left;
122
+    padding: 0 6px;
123
+ }
124
+ #member-cards-box .thumbnail {
125
+    padding: 0;
126
+    position: relative;
127
+    border: none;
128
+    background: #dde1e4;
129
+    color: #58a2ec;
130
+    display: block;
131
+    padding: 4px;
132
+    margin-bottom: 20px;
133
+    line-height: 1.42857143;
134
+    background-color: #fff;
135
+    border-radius: 4px;
136
+    -webkit-transition: border .2s ease-in-out;
137
+    -o-transition: border .2s ease-in-out;
138
+    transition: border .2s ease-in-out;
139
+}
140
+ #member-cards-box .thumbnail .pic {
141
+    width: 20rem;
142
+    height: 8rem;
143
+    background: #58a2ec;
144
+    border-radius: 25px 25px 0 0;
145
+    position: relative;
146
+}
147
+ #member-cards-box .thumbnail .ico_crow {
148
+    position: absolute;
149
+    right: 18px;
150
+    top: 10px;
151
+    width: 64px;
152
+    height: 54px;
153
+    background: url("https://images.shengws.com/icos-201906141103.png") no-repeat -58px -422px;
154
+}
155
+ #member-cards-box .thumbnail .pic img {
156
+    width: 100%;
157
+    height: 100%;
158
+    object-position: top left;
159
+    object-fit: cover;
160
+    border-radius: 25px 25px 0 0;
161
+    margin: 0;
162
+    border: 0;
163
+    vertical-align: middle;
164
+}
165
+
166
+ #member-cards-box .thumbnail .tit {
167
+    position: absolute;
168
+    top: 1.5rem;
169
+    left: 1.5rem;
170
+    font-size: 1rem;
171
+    color: #fff;
172
+}
173
+ #member-cards-box .thumbnail .caption {
174
+    background: #eef6fd;
175
+    border-radius: 0 0 20px 20px;
176
+    height: 38px;
177
+    cursor: pointer;
178
+    max-width: 100%;
179
+    padding: 9px;
180
+    color: #333;
181
+}
182
+ #member-cards-box .thumbnail .caption .card_edier {
183
+    font-size: 12px;
184
+    color: #58a2ec;
185
+    padding-left: 0.8rem;
186
+}
187
+ #member-cards-box .thumbnail .caption .card_edier span {
188
+    color: #58a2ec;
189
+    text-decoration: none;
190
+}
191
+
192
+ #member-cards-box .thumbnail .caption .card_edier span:hover {
193
+    color: #58a2ec;
194
+    text-decoration: underline;
195
+}
196
+  /*.app-container .cell.clearfix .time ul li {*/
197
+    /*float: left;*/
198
+    /*list-style: none;*/
199
+    /*cursor: pointer;*/
200
+    /*padding: 6px 20px;*/
201
+    /*color: #606266;*/
202
+    /*border-radius: 4px;*/
203
+    /*margin: 0 8px 0 0;*/
204
+    /*font-size: 14px;*/
205
+    /*text-align: center;*/
206
+  /*}*/
207
+</style>

+ 385 - 0
src/scrm_pages/members/components/CreateCardForm.vue 查看文件

@@ -0,0 +1,385 @@
1
+<template>
2
+    <div id="create-card-form-box">
3
+        <el-dialog title="添加会员卡" :visible.sync="createCardFormVisible" width="900px" id="create-member-card-show" v-loading="submitLoading" :element-loading-text="loadingText">
4
+            <el-row>
5
+                <el-col :span="10">
6
+                    <div class="membercard-area" :style="membercardAreaBackground">
7
+                        <span class="ico_crown"></span>
8
+                        <div class="card-header clearfix">
9
+                            <h4 class="shop-name">
10
+                                <span class="shop-logo">
11
+                                    <img :src="orgLogo"> 
12
+                                </span>
13
+                                <span class="tit">{{form.card_name}}</span>
14
+                            </h4>
15
+                            <div class="qr-code"></div>
16
+                        </div>
17
+                        <h3 class="member-type"></h3>
18
+                        <div class="card-content">
19
+                            <p class="expiry-date">
20
+                                有效期:
21
+                                <span>无限期</span>
22
+                            </p>
23
+                        </div>
24
+                    </div>
25
+                </el-col>
26
+                <el-col :span="14">
27
+                    <el-form ref="cardForm" :rules="cardRules" :model="form" label-width="100px" id="create-member-card-form">
28
+                        <el-form-item label="机构Logo:" >
29
+                            <el-upload class="org-logo" action="https://upload.qiniup.com" disabled >
30
+                                <img v-if="orgLogo" :src="orgLogo" class="org-logo-image">
31
+                                <i v-else class="el-icon-plus org-logo-icon"></i>
32
+                                <div class="el-upload__tip" slot="tip">如需修改机构Logo信息,请在<em>机构中心</em>中更新。</div>
33
+                            </el-upload>
34
+                        </el-form-item>
35
+                        <el-form-item label="卡片封面:" required prop="background_type">
36
+                            <el-radio-group v-model="form.background_type">
37
+                                <el-radio :label="bgt.id" :value="bgt.id" :key="index" v-for="(bgt, index) in backgroundTypeOptions">{{bgt.name}}</el-radio>
38
+                            </el-radio-group>
39
+                        </el-form-item>
40
+                        <el-form-item label="背景色:"  prop="background_color"  v-show="form.background_type==1">
41
+                            <el-color-picker v-model="form.background_color" @change="handleChangeColor" :predefine="predefineData"></el-color-picker>
42
+                        </el-form-item>
43
+                        <el-form-item label="封面图片:"  prop="background_image"  v-show="form.background_type==2">
44
+                           <el-upload
45
+                                v-loading="uploading"
46
+                                :element-loading-text="loadingText"
47
+                                class="bg-image-uploader"
48
+                                :data="uploadData"
49
+                                action="https://upload.qiniup.com"
50
+                                :show-file-list="false"
51
+                                :on-error="handleBackImageError"
52
+                                :on-success="handleBackImageSuccess"
53
+                                :before-upload="beforeBackImageUpload"
54
+                            >
55
+                                <img v-if="form.background_image" :src="form.background_image" class="bg-image">
56
+                                <i v-else class="el-icon-plus bg-image-uploader-icon"></i>
57
+                                <div class="el-upload__tip" slot="tip">尺寸:906*498像素,小于2M,支持jpg、png、jpeg格式</div>
58
+                            </el-upload>
59
+                        </el-form-item>
60
+
61
+                        <el-form-item label="会员卡名称:" required prop="card_name" >
62
+                            <el-input v-model="form.card_name" placeholder="最多可输入9个字符" maxlength="9"></el-input>
63
+                        </el-form-item>
64
+                        <el-form-item label="使用须知:"  prop="use_notice">
65
+                            <el-input v-model="form.use_notice" type="textarea" rows='4' placeholder="会员特权会根据您上文的勾选情况系统自动生成,此处可填写其它补充信息以便会员知晓,最多可输入300个字符"  maxlength="300"></el-input>
66
+                        </el-form-item>
67
+                        <el-form-item label="会员权益:"  prop="card_right">
68
+                            <el-input v-model="form.card_right" type="textarea" rows='4' placeholder="会员特权会根据您上文的勾选情况系统自动生成,此处可填写其它补充信息以便会员知晓,最多可输入300个字符"  maxlength="300"></el-input>
69
+                        </el-form-item>
70
+                        <el-form-item label="客服电话:"  prop="service_phone" >
71
+                            <el-input v-model="form.service_phone" placeholder="请输入手机号或固定电话" ></el-input>
72
+                        </el-form-item>
73
+                        <el-form-item label="升级条件:"  prop="upgrade_integral" >
74
+                            累积积分达到
75
+                            <el-input v-model.number="form.upgrade_integral" style="width:100px;" placeholder="" ></el-input>
76
+                            分
77
+                        </el-form-item>
78
+                    </el-form>
79
+                </el-col>
80
+            </el-row>
81
+            
82
+            <div slot="footer" class="dialog-footer">
83
+                <el-button @click="createCardFormVisible = false">取消</el-button>
84
+                <el-button
85
+                type="primary"
86
+                @click="submitForm('cardForm')"
87
+                >保 存
88
+                </el-button>
89
+            </div>
90
+        </el-dialog>  
91
+    </div>
92
+</template>
93
+
94
+<script>
95
+import {CreateMemberShipCard} from "@/api/member/member";
96
+import { getFileExtension,checkHexColor,checkMobileOrPhone } from "@/utils/tools";
97
+import { getToken } from "@/api/qiniu";
98
+
99
+export default {
100
+    name:'CreateCardForm',
101
+    props:{
102
+        cardsData:{
103
+            type: Array,
104
+            default: function () {
105
+                return [];
106
+            }
107
+        },
108
+    },
109
+    data(){
110
+        var checkBgColorRule = (rule, value, callback) => {
111
+            if (this.form.background_type == 1 && !checkHexColor(value)) {
112
+                callback(new Error('请选择背景色'));
113
+            }else {
114
+               callback(); 
115
+            }
116
+        };
117
+        var checkBgImageRule = (rule, value, callback) => {
118
+            if (this.form.background_type == 2 && !value) {
119
+                callback(new Error('请上图片封面图片'));
120
+            }else {
121
+               callback(); 
122
+            }
123
+        };
124
+        var checkTelRule = (rule, value, callback) => {
125
+            if (value && !checkMobileOrPhone(value)) {
126
+                callback(new Error('请填写正确的客服电话:13888888888 或 0756-1234567'));
127
+            }else {
128
+               callback(); 
129
+            }
130
+        };
131
+        var checkIntegralRule = (rule, value, callback) => {
132
+            if(!value) {
133
+                callback(); 
134
+            }else {
135
+                if(!Number.isInteger(value)) {
136
+                    callback(new Error('必须是整数'));
137
+                }else {
138
+                    if (value<0) {
139
+                        callback(new Error('不能小于0'));
140
+                    }else {
141
+                        callback(); 
142
+                    }
143
+                }
144
+            }
145
+        };
146
+        return {
147
+            createCardFormVisible:false,
148
+            qiniuDomain: "https://images.shengws.com/",
149
+            uploading:false,
150
+            loadingText:'',
151
+            submitLoading:false,
152
+            uploadData: { token: "", key: "" },
153
+            predefineData:['#65d3e3','#82cecb','#5bd18b','#58a2ec','#9675cc','#f2ca68','#ff7979','#aed15b','#75c075','#67b192','#7b8a97','#34495e','#262626'],
154
+            backgroundTypeOptions:[
155
+                {id:1, name:'背景色'},
156
+                {id:2, name:'封面图片'},
157
+            ],
158
+            
159
+            cardRules: {
160
+                card_name: [{required: true, message: "请填写会员卡名称",},],
161
+                background_color: [{ validator: checkBgColorRule}],
162
+                background_image: [{ validator: checkBgImageRule}],
163
+                service_phone: [{ validator: checkTelRule}],
164
+                upgrade_integral: [{ validator:checkIntegralRule}],
165
+            },
166
+            form:{
167
+                background_type:1,
168
+                background:"#409EFF",
169
+                background_color:"#409EFF",
170
+                background_image:"",
171
+                card_name:'',
172
+                use_notice:'',
173
+                card_right:'',
174
+                service_phone:'',
175
+                upgrade_integral:0,
176
+            },
177
+        }
178
+    },
179
+    methods:{
180
+        open:function(){
181
+            this.resetForm("cardForm");
182
+            this.createCardFormVisible = true;
183
+        },
184
+        resetForm:function(formName) {
185
+            if (typeof(this.$refs[formName]) !='undefined') {
186
+                this.$refs[formName].resetFields();
187
+            }
188
+        },
189
+        handleChangeColor:function(color){
190
+            this.form.background = color;
191
+        },
192
+        handleBackImageError(err, file, fileList) {
193
+            this.$message.error(err);
194
+            this.uploading = false;
195
+            return false;
196
+        },
197
+        handleBackImageSuccess(res, file) {
198
+            var url = this.qiniuDomain + res.url;
199
+            this.form.background_image = url
200
+            this.form.background = url;
201
+            this.uploading = false;
202
+        },
203
+        beforeBackImageUpload(file) {
204
+            var fileType = file.type;
205
+            const isJPG = fileType.indexOf("image") > -1;
206
+            const isLt2M = file.size / 1024 / 1024 < 2;
207
+            if (!isJPG) {
208
+                this.$message.error("只能上传图片");
209
+                return false;
210
+            }
211
+            if (!isLt2M) {
212
+                this.$message.error("图片大小不能超过 2MB!");
213
+                return false;
214
+            }
215
+
216
+            var date = new Date();
217
+            var ext = getFileExtension(file.name);
218
+            var key = "" + date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours() + date.getMinutes() + date.getSeconds() + "_card_" +file.uid +"." + ext;
219
+            this.uploading = true;
220
+            this.loadingText = "图片上传中";
221
+
222
+            const _self = this;
223
+            return new Promise((resolve, reject) => {
224
+                getToken()
225
+                .then(response => {
226
+                    const token = response.data.data.uptoken;
227
+                    _self._data.uploadData.token = token;
228
+                    _self._data.uploadData.key = key;
229
+                    resolve(true);
230
+                })
231
+                .catch(err => {
232
+                    reject(false);
233
+                    this.uploading = false;
234
+                });
235
+            });
236
+        },
237
+        submitForm:function(formName){
238
+            this.$refs[formName].validate((valid) => {
239
+                if (valid) {
240
+                    this.loadingText = "正在保存...";
241
+                    this.submitLoading = true;
242
+                    CreateMemberShipCard(this.form).then(response=>{
243
+                        var res = response.data;
244
+                        if(res.state === 1) {
245
+                            var card = res.data.card;
246
+                            this.cardsData.push(card);
247
+                            this.resetForm("cardForm");
248
+                            this.createCardFormVisible = false;
249
+                            this.$message.success("添加会员卡成功");
250
+                        }else {
251
+                            this.$message.error(res.msg);
252
+                        }
253
+                        this.submitLoading = false;
254
+                    }).catch(e=>{
255
+                        this.submitLoading = false;
256
+                    });
257
+                } else {
258
+                    return false;
259
+                }
260
+            });
261
+        },
262
+    },
263
+    computed: {
264
+      orgLogo: function() {
265
+        var avatar = this.$store.getters.xt_user.org.org_logo
266
+        return avatar.length > 0
267
+          ? avatar
268
+          : require('../../../assets/home/userData.png')
269
+      },
270
+      membercardAreaBackground:function(){
271
+          if (this.form.background_type == 1) {
272
+              return 'background:' + this.form.background_color;
273
+          }else {
274
+              return 'background: url("' + this.form.background_image + '") 0% 0% / 100% 100% no-repeat;'
275
+          }
276
+      }
277
+    },
278
+}
279
+</script>
280
+
281
+<style rel="stylesheet/scss" >
282
+#create-member-card-form .org-logo .el-upload {
283
+  border: 1px dashed #d9d9d9;
284
+  border-radius: 25px;
285
+  cursor: pointer;
286
+  position: relative;
287
+  overflow: hidden;
288
+}
289
+#create-member-card-form .org-logo .el-upload:hover {
290
+  border-color: #409eff;
291
+}
292
+#create-member-card-form .org-logo-icon {
293
+  font-size: 28px;
294
+  color: #8c939d;
295
+  width: 50px;
296
+  height: 50px;
297
+  line-height: 50px;
298
+  text-align: center;
299
+}
300
+
301
+#create-member-card-form .el-upload__tip em {
302
+    color: #5599eb;
303
+}
304
+
305
+#create-member-card-form .org-logo-image {
306
+  width: 50px;
307
+  height: 50px;
308
+  display: block;
309
+}
310
+
311
+
312
+#create-member-card-form .bg-image-uploader .el-upload {
313
+  border: 1px dashed #d9d9d9;
314
+  border-radius: 10px;
315
+  cursor: pointer;
316
+  position: relative;
317
+  overflow: hidden;
318
+}
319
+#create-member-card-form .bg-image-uploader .el-upload:hover {
320
+  border-color: #409eff;
321
+}
322
+#create-member-card-form .bg-image-uploader-icon {
323
+  font-size: 28px;
324
+  color: #8c939d;
325
+  width: 278px;
326
+  height: 130px;
327
+  line-height: 130px;
328
+  text-align: center;
329
+}
330
+#create-member-card-form .bg-image {
331
+  width: 278px;
332
+  height: 130px;
333
+  display: block;
334
+}
335
+
336
+#create-member-card-show .membercard-area {
337
+    margin: 9px;
338
+    padding: 14px 18px 24px 17px;
339
+    background: #5599eb;
340
+    color: #fff;
341
+    border-radius: 20px 20px 20px 20px;
342
+    position: relative;
343
+}
344
+#create-member-card-show  .membercard-area .ico_crown {
345
+    position: absolute;
346
+    right: 18px;
347
+    width: 64px;
348
+    height: 54px;
349
+    background: url("https://images.shengws.com/icos-201906141103.png") no-repeat -58px -422px;
350
+}
351
+#create-member-card-show .clearfix {
352
+    clear: both;
353
+}
354
+#create-member-card-show .clearfix:before {
355
+    display: table;
356
+    content: " ";
357
+}
358
+#create-member-card-show .membercard-area .shop-name {
359
+    font-size: 14px;
360
+}
361
+#create-member-card-show .membercard-area .shop-name .shop-logo {
362
+    display: inline-block;
363
+    width: 40px;
364
+    height: 40px;
365
+    float: left;
366
+    margin-right: 13px;
367
+}
368
+#create-member-card-show .membercard-area .shop-name .shop-logo img {
369
+    width: 40px;
370
+    height: 40px;
371
+    border-radius: 50%;
372
+}
373
+#create-member-card-show .membercard-area .shop-name .tit {
374
+    height: 41px;
375
+    line-height: 41px;
376
+}
377
+#create-member-card-show  .member-type {
378
+    height: 70px;
379
+    line-height: 70px;
380
+}
381
+#create-member-card-show .membercard-area .card-content .expiry-date {
382
+    font-size: 12px;
383
+}
384
+</style>
385
+

+ 87 - 0
src/scrm_pages/members/components/CreateTagForm.vue 查看文件

@@ -0,0 +1,87 @@
1
+<template>
2
+    <div id="create-tag-form-box">
3
+        <el-dialog title="添加标签" :visible.sync="createTagFormVisible" width="700px" >
4
+            <el-form ref="tagForm" :rules="tagRules" :model="form" label-width="60px">
5
+                <el-row>
6
+                    <el-col :span="24">
7
+                        <el-form-item label="标签:" required prop="tag_name">
8
+                        <el-input v-model="form.tag_name"></el-input>
9
+                        </el-form-item>
10
+                    </el-col>
11
+                </el-row>
12
+            </el-form>
13
+            <div slot="footer" class="dialog-footer">
14
+                <el-button @click="createTagFormVisible = false">取消</el-button>
15
+                <el-button
16
+                type="primary"
17
+                @click="submitForm('tagForm')"
18
+                >保 存
19
+                </el-button>
20
+            </div>
21
+        </el-dialog>  
22
+    </div>
23
+</template>
24
+
25
+<script>
26
+import {CreateTag} from "@/api/member/member";
27
+
28
+export default {
29
+    name:'CreateTagForm',
30
+    props:{
31
+        tagsData:{
32
+            type: Array,
33
+            default: function () {
34
+                return [];
35
+            }
36
+        },
37
+    },
38
+    data(){
39
+        return {
40
+            createTagFormVisible:false,
41
+            
42
+            tagRules: {
43
+                tag_name: [{required: true, message: "请填写标签",},],
44
+                
45
+            },
46
+            form:{
47
+                tag_name:'',
48
+            },
49
+            
50
+        }
51
+    },
52
+    methods:{
53
+        open:function(){
54
+            this.resetForm("tagForm");
55
+            this.createTagFormVisible = true;
56
+        },
57
+        resetForm(formName) {
58
+            if (typeof(this.$refs[formName]) !='undefined') {
59
+                this.$refs[formName].resetFields();
60
+            }
61
+        },
62
+        submitForm(formName){
63
+            this.$refs[formName].validate((valid) => {
64
+                if (valid) {
65
+                    CreateTag(this.form).then(response=>{
66
+                        var res = response.data;
67
+                        if(res.state === 1) {
68
+                            var tag = res.data.tag;
69
+                            tag["member_count"] = 0;
70
+                            this.tagsData.unshift(tag);
71
+                            this.resetForm("tagForm");
72
+                            this.createTagFormVisible = false;
73
+                            this.$message.success("添加标签成功");
74
+                        }else {
75
+                            this.$message.error(res.msg);
76
+                        }
77
+                    }).catch(e=>{});
78
+
79
+                } else {
80
+                    return false;
81
+                }
82
+            });
83
+        },
84
+    }
85
+}
86
+</script>
87
+

+ 396 - 0
src/scrm_pages/members/components/EditCardForm.vue 查看文件

@@ -0,0 +1,396 @@
1
+<template>
2
+    <div id="edit-card-form-box">
3
+        <el-dialog title="编辑会员卡" :visible.sync="editCardFormVisible" width="900px" id="edit-member-card-show" v-loading="submitLoading" :element-loading-text="loadingText">
4
+            <el-row>
5
+                <el-col :span="10">
6
+                    <div class="membercard-area" :style="membercardAreaBackground">
7
+                        <span class="ico_crown"></span>
8
+                        <div class="card-header clearfix">
9
+                            <h4 class="shop-name">
10
+                                <span class="shop-logo">
11
+                                    <img :src="orgLogo"> 
12
+                                </span>
13
+                                <span class="tit">{{form.card_name}}</span>
14
+                            </h4>
15
+                            <div class="qr-code"></div>
16
+                        </div>
17
+                        <h3 class="member-type"></h3>
18
+                        <div class="card-content">
19
+                            <p class="expiry-date">
20
+                                有效期:
21
+                                <span>无限期</span>
22
+                            </p>
23
+                        </div>
24
+                    </div>
25
+                </el-col>
26
+                <el-col :span="14">
27
+                    <el-form ref="cardForm" :rules="cardRules" :model="form" label-width="100px" id="edit-member-card-form">
28
+                        <el-form-item label="机构Logo:" >
29
+                            <el-upload class="org-logo" action="https://upload.qiniup.com" disabled >
30
+                                <img v-if="orgLogo" :src="orgLogo" class="org-logo-image">
31
+                                <i v-else class="el-icon-plus org-logo-icon"></i>
32
+                                <div class="el-upload__tip" slot="tip">如需修改机构Logo信息,请在<em>机构中心</em>中更新。</div>
33
+                            </el-upload>
34
+                        </el-form-item>
35
+                        <el-form-item label="卡片封面:" required prop="background_type">
36
+                            <el-radio-group v-model="form.background_type">
37
+                                <el-radio :label="bgt.id" :value="bgt.id" :key="index" v-for="(bgt, index) in backgroundTypeOptions">{{bgt.name}}</el-radio>
38
+                            </el-radio-group>
39
+                        </el-form-item>
40
+                        <el-form-item label="背景色:"  prop="background_color"  v-show="form.background_type==1">
41
+                            <el-color-picker v-model="form.background_color" @change="handleChangeColor" :predefine="predefineData"></el-color-picker>
42
+                        </el-form-item>
43
+                        <el-form-item label="封面图片:"  prop="background_image"  v-show="form.background_type==2">
44
+                           <el-upload
45
+                                v-loading="uploading"
46
+                                :element-loading-text="loadingText"
47
+                                class="bg-image-uploader"
48
+                                :data="uploadData"
49
+                                action="https://upload.qiniup.com"
50
+                                :show-file-list="false"
51
+                                :on-error="handleBackImageError"
52
+                                :on-success="handleBackImageSuccess"
53
+                                :before-upload="beforeBackImageUpload"
54
+                            >
55
+                                <img v-if="form.background_image" :src="form.background_image" class="bg-image">
56
+                                <i v-else class="el-icon-plus bg-image-uploader-icon"></i>
57
+                                <div class="el-upload__tip" slot="tip">尺寸:906*498像素,小于2M,支持jpg、png、jpeg格式</div>
58
+                            </el-upload>
59
+                        </el-form-item>
60
+
61
+                        <el-form-item label="会员卡名称:" required prop="card_name" >
62
+                            <el-input v-model="form.card_name" placeholder="最多可输入9个字符" maxlength="9"></el-input>
63
+                        </el-form-item>
64
+                        <el-form-item label="使用须知:"  prop="use_notice">
65
+                            <el-input v-model="form.use_notice" type="textarea" rows='4' placeholder="会员特权会根据您上文的勾选情况系统自动生成,此处可填写其它补充信息以便会员知晓,最多可输入300个字符"  maxlength="300"></el-input>
66
+                        </el-form-item>
67
+                        <el-form-item label="会员权益:"  prop="card_right">
68
+                            <el-input v-model="form.card_right" type="textarea" rows='4' placeholder="会员特权会根据您上文的勾选情况系统自动生成,此处可填写其它补充信息以便会员知晓,最多可输入300个字符"  maxlength="300"></el-input>
69
+                        </el-form-item>
70
+                        <el-form-item label="客服电话:"  prop="service_phone" >
71
+                            <el-input v-model="form.service_phone" placeholder="请输入手机号或固定电话" ></el-input>
72
+                        </el-form-item>
73
+                        <el-form-item label="升级条件:"  prop="upgrade_integral" >
74
+                            累积积分达到
75
+                            <el-input v-model.number="form.upgrade_integral" style="width:100px;" placeholder="" ></el-input>
76
+                            分
77
+                        </el-form-item>
78
+                    </el-form>
79
+                </el-col>
80
+            </el-row>
81
+            
82
+            <div slot="footer" class="dialog-footer">
83
+                <el-button @click="editCardFormVisible = false">取消</el-button>
84
+                <el-button
85
+                type="primary"
86
+                @click="submitForm('cardForm')"
87
+                >保 存
88
+                </el-button>
89
+            </div>
90
+        </el-dialog>  
91
+    </div>
92
+</template>
93
+
94
+<script>
95
+import {EditMemberShipCard} from "@/api/member/member";
96
+import { getFileExtension,checkHexColor,checkMobileOrPhone } from "@/utils/tools";
97
+import { getToken } from "@/api/qiniu";
98
+
99
+export default {
100
+    name:'EditCardForm',
101
+    props:{
102
+        cardsData:{
103
+            type: Array,
104
+            default: function () {
105
+                return [];
106
+            }
107
+        },
108
+        cardIndex:{
109
+            type:Number,
110
+            default:-1.
111
+        },
112
+        form:{
113
+            background_type:1,
114
+            background:"#409EFF",
115
+            background_color:"#409EFF",
116
+            background_image:"",
117
+            card_name:'',
118
+            use_notice:'',
119
+            card_right:'',
120
+            service_phone:'',
121
+            upgrade_integral:0,
122
+            id:0,
123
+        },
124
+    },
125
+    data(){
126
+        var checkBgColorRule = (rule, value, callback) => {
127
+            if (this.form.background_type == 1 && !checkHexColor(value)) {
128
+                callback(new Error('请选择背景色'));
129
+            }else {
130
+               callback(); 
131
+            }
132
+        };
133
+        var checkBgImageRule = (rule, value, callback) => {
134
+            if (this.form.background_type == 2 && !value) {
135
+                callback(new Error('请上图片封面图片'));
136
+            }else {
137
+               callback(); 
138
+            }
139
+        };
140
+        var checkTelRule = (rule, value, callback) => {
141
+            if (value && !checkMobileOrPhone(value)) {
142
+                callback(new Error('请填写正确的客服电话:13888888888 或 0756-1234567'));
143
+            }else {
144
+               callback(); 
145
+            }
146
+        };
147
+        var checkIntegralRule = (rule, value, callback) => {
148
+            if(!value) {
149
+                callback(); 
150
+            }else {
151
+                if(!Number.isInteger(value)) {
152
+                    callback(new Error('必须是整数'));
153
+                }else {
154
+                    if (value<0) {
155
+                        callback(new Error('不能小于0'));
156
+                    }else {
157
+                        callback(); 
158
+                    }
159
+                }
160
+            }
161
+        };
162
+        return {
163
+            editCardFormVisible:false,
164
+            qiniuDomain: "https://images.shengws.com/",
165
+            uploading:false,
166
+            loadingText:'',
167
+            submitLoading:false,
168
+            uploadData: { token: "", key: "" },
169
+            predefineData:['#65d3e3','#82cecb','#5bd18b','#58a2ec','#9675cc','#f2ca68','#ff7979','#aed15b','#75c075','#67b192','#7b8a97','#34495e','#262626'],
170
+            backgroundTypeOptions:[
171
+                {id:1, name:'背景色'},
172
+                {id:2, name:'封面图片'},
173
+            ],
174
+            
175
+            cardRules: {
176
+                card_name: [{required: true, message: "请填写会员卡名称",},],
177
+                background_color: [{ validator: checkBgColorRule}],
178
+                background_image: [{ validator: checkBgImageRule}],
179
+                service_phone: [{ validator: checkTelRule}],
180
+                upgrade_integral: [{ validator:checkIntegralRule}],
181
+            },
182
+        }
183
+    },
184
+    methods:{
185
+        open:function(){
186
+            this.form.background_color = '';
187
+            this.form.background_image = '';
188
+            if (this.form.background_type == 1) {
189
+                this.form.background_color = this.form.background;
190
+            }else {
191
+                this.form.background_image = this.form.background;
192
+            }
193
+            this.editCardFormVisible = true;
194
+        },
195
+        resetForm:function(formName) {
196
+            if (typeof(this.$refs[formName]) !='undefined') {
197
+                this.$refs[formName].resetFields();
198
+            }
199
+        },
200
+        handleChangeColor:function(color){
201
+            this.form.background = color;
202
+        },
203
+        handleBackImageError(err, file, fileList) {
204
+            this.$message.error(err);
205
+            this.uploading = false;
206
+            return false;
207
+        },
208
+        handleBackImageSuccess(res, file) {
209
+            var url = this.qiniuDomain + res.url;
210
+            this.form.background_image = url
211
+            this.form.background = url;
212
+            this.uploading = false;
213
+        },
214
+        beforeBackImageUpload(file) {
215
+            var fileType = file.type;
216
+            const isJPG = fileType.indexOf("image") > -1;
217
+            const isLt2M = file.size / 1024 / 1024 < 2;
218
+            if (!isJPG) {
219
+                this.$message.error("只能上传图片");
220
+                return false;
221
+            }
222
+            if (!isLt2M) {
223
+                this.$message.error("图片大小不能超过 2MB!");
224
+                return false;
225
+            }
226
+
227
+            var date = new Date();
228
+            var ext = getFileExtension(file.name);
229
+            var key = "" + date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours() + date.getMinutes() + date.getSeconds() + "_card_" +file.uid +"." + ext;
230
+            this.uploading = true;
231
+            this.loadingText = "图片上传中";
232
+
233
+            const _self = this;
234
+            return new Promise((resolve, reject) => {
235
+                getToken()
236
+                .then(response => {
237
+                    const token = response.data.data.uptoken;
238
+                    _self._data.uploadData.token = token;
239
+                    _self._data.uploadData.key = key;
240
+                    resolve(true);
241
+                })
242
+                .catch(err => {
243
+                    reject(false);
244
+                    this.uploading = false;
245
+                });
246
+            });
247
+        },
248
+        submitForm:function(formName){
249
+            this.$refs[formName].validate((valid) => {
250
+                if (valid) {
251
+                    this.loadingText = "正在保存...";
252
+                    this.submitLoading = true;
253
+                    EditMemberShipCard(this.form.id, this.form).then(response=>{
254
+                        var res = response.data;
255
+                        if(res.state === 1) {
256
+                            var card = res.data.card;
257
+                            this.cardsData.splice(this.cardIndex, 1, card);
258
+                            this.resetForm("cardForm");
259
+                            this.editCardFormVisible = false;
260
+                            this.$message.success("编辑会员卡成功");
261
+                        }else {
262
+                            this.$message.error(res.msg);
263
+                        }
264
+                        this.submitLoading = false;
265
+                    }).catch(e=>{
266
+                        this.submitLoading = false;
267
+                    });
268
+                } else {
269
+                    return false;
270
+                }
271
+            });
272
+        },
273
+    },
274
+    computed: {
275
+      orgLogo: function() {
276
+        var avatar = this.$store.getters.xt_user.org.org_logo
277
+        return avatar.length > 0
278
+          ? avatar
279
+          : require('../../../assets/home/userData.png')
280
+      },
281
+      membercardAreaBackground:function(){
282
+          if (this.form.background_type == 1) {
283
+              return 'background:' + this.form.background_color;
284
+          }else {
285
+              return 'background: url("' + this.form.background_image + '") 0% 0% / 100% 100% no-repeat;'
286
+          }
287
+      }
288
+    },
289
+}
290
+</script>
291
+
292
+<style rel="stylesheet/scss" >
293
+#edit-member-card-form .org-logo .el-upload {
294
+  border: 1px dashed #d9d9d9;
295
+  border-radius: 25px;
296
+  cursor: pointer;
297
+  position: relative;
298
+  overflow: hidden;
299
+}
300
+#edit-member-card-form .org-logo .el-upload:hover {
301
+  border-color: #409eff;
302
+}
303
+#edit-member-card-form .org-logo-icon {
304
+  font-size: 28px;
305
+  color: #8c939d;
306
+  width: 50px;
307
+  height: 50px;
308
+  line-height: 50px;
309
+  text-align: center;
310
+}
311
+
312
+#edit-member-card-form .el-upload__tip em {
313
+    color: #5599eb;
314
+}
315
+
316
+#edit-member-card-form .org-logo-image {
317
+  width: 50px;
318
+  height: 50px;
319
+  display: block;
320
+}
321
+
322
+
323
+#edit-member-card-form .bg-image-uploader .el-upload {
324
+  border: 1px dashed #d9d9d9;
325
+  border-radius: 10px;
326
+  cursor: pointer;
327
+  position: relative;
328
+  overflow: hidden;
329
+}
330
+#edit-member-card-form .bg-image-uploader .el-upload:hover {
331
+  border-color: #409eff;
332
+}
333
+#edit-member-card-form .bg-image-uploader-icon {
334
+  font-size: 28px;
335
+  color: #8c939d;
336
+  width: 278px;
337
+  height: 130px;
338
+  line-height: 130px;
339
+  text-align: center;
340
+}
341
+#edit-member-card-form .bg-image {
342
+  width: 278px;
343
+  height: 130px;
344
+  display: block;
345
+}
346
+
347
+#edit-member-card-show .membercard-area {
348
+    margin: 9px;
349
+    padding: 14px 18px 24px 17px;
350
+    background: #5599eb;
351
+    color: #fff;
352
+    border-radius: 20px 20px 20px 20px;
353
+    position: relative;
354
+}
355
+#edit-member-card-show  .membercard-area .ico_crown {
356
+    position: absolute;
357
+    right: 18px;
358
+    width: 64px;
359
+    height: 54px;
360
+    background: url("https://images.shengws.com/icos-201906141103.png") no-repeat -58px -422px;
361
+}
362
+#edit-member-card-show .clearfix {
363
+    clear: both;
364
+}
365
+#edit-member-card-show .clearfix:before {
366
+    display: table;
367
+    content: " ";
368
+}
369
+#edit-member-card-show .membercard-area .shop-name {
370
+    font-size: 14px;
371
+}
372
+#edit-member-card-show .membercard-area .shop-name .shop-logo {
373
+    display: inline-block;
374
+    width: 40px;
375
+    height: 40px;
376
+    float: left;
377
+    margin-right: 13px;
378
+}
379
+#edit-member-card-show .membercard-area .shop-name .shop-logo img {
380
+    width: 40px;
381
+    height: 40px;
382
+    border-radius: 50%;
383
+}
384
+#edit-member-card-show .membercard-area .shop-name .tit {
385
+    height: 41px;
386
+    line-height: 41px;
387
+}
388
+#edit-member-card-show  .member-type {
389
+    height: 70px;
390
+    line-height: 70px;
391
+}
392
+#edit-member-card-show .membercard-area .card-content .expiry-date {
393
+    font-size: 12px;
394
+}
395
+</style>
396
+

+ 94 - 0
src/scrm_pages/members/components/EditTagForm.vue 查看文件

@@ -0,0 +1,94 @@
1
+<template>
2
+    <div id="edit-tag-form-box">
3
+        <el-dialog title="编辑标签" :visible.sync="editTagFormVisible" width="700px" >
4
+            <el-form ref="tagForm" :rules="tagRules" :model="form" label-width="60px">
5
+                <el-row>
6
+                    <el-col :span="24">
7
+                        <el-form-item label="标签:" required prop="tag_name">
8
+                        <el-input v-model="form.tag_name"></el-input>
9
+                        </el-form-item>
10
+                    </el-col>
11
+                </el-row>
12
+            </el-form>
13
+            <div slot="footer" class="dialog-footer">
14
+                <el-button @click="editTagFormVisible = false">取消</el-button>
15
+                <el-button
16
+                type="primary"
17
+                @click="submitForm('tagForm')"
18
+                >保 存
19
+                </el-button>
20
+            </div>
21
+        </el-dialog>  
22
+    </div>
23
+</template>
24
+
25
+<script>
26
+import {EditTag} from "@/api/member/member";
27
+
28
+export default {
29
+    name:'EditTagForm',
30
+    props:{
31
+        tagsData:{
32
+            type: Array,
33
+            default: function () {
34
+                return [];
35
+            }
36
+        },
37
+        form:{
38
+            tag_name:'',
39
+            id:0,
40
+        },
41
+        tagIndex:{
42
+            type:Number,
43
+            default:-1,
44
+        },
45
+    },
46
+    data(){
47
+        return {
48
+            editTagFormVisible:false,
49
+            tagRules: {
50
+                tag_name: [{required: true, message: "请填写标签",},],
51
+            },
52
+            oldTagName:'',
53
+        }
54
+    },
55
+    methods:{
56
+        open:function(){
57
+            this.oldTagName = this.form.tag_name;
58
+            this.editTagFormVisible = true;
59
+        },
60
+        resetForm(formName) {
61
+            if (typeof(this.$refs[formName]) !='undefined') {
62
+                this.$refs[formName].resetFields();
63
+            }
64
+        },
65
+        submitForm(formName){
66
+            this.$refs[formName].validate((valid) => {
67
+                if (valid) {
68
+                    if(this.oldTagName == this.form.tag_name) {
69
+                        this.$message.success("标签名未变化");
70
+                        this.editTagFormVisible = false;
71
+                        return false;
72
+                    }
73
+                    EditTag(this.form.id, this.form).then(response=>{
74
+                        var res = response.data;
75
+                        if(res.state === 1) {
76
+                            var tag = res.data.tag;
77
+                            this.tagsData[this.tagIndex].tag_name = tag.tag_name;
78
+                            this.resetForm("tagForm");
79
+                            this.editTagFormVisible = false;
80
+                            this.$message.success("编辑标签成功");
81
+                        }else {
82
+                            this.$message.error(res.msg);
83
+                        }
84
+                    }).catch(e=>{});
85
+
86
+                } else {
87
+                    return false;
88
+                }
89
+            });
90
+        },
91
+    }
92
+}
93
+</script>
94
+

+ 111 - 12
src/scrm_pages/members/tags.vue 查看文件

@@ -15,7 +15,7 @@
15 15
         </div>
16 16
         <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
17 17
             <el-checkbox style="width: 30px" @change="changeCheck" v-model="checkAllStatus">全选</el-checkbox>
18
-            <el-button size="small" icon="el-icon-delete" >批量删除</el-button>
18
+            <el-button size="small" icon="el-icon-delete" @click="openDeleteTags">批量删除</el-button>
19 19
         </div>
20 20
         <el-table ref="multipleTable"  @selection-change="handleSelectionChange"  :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="tagsData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;">
21 21
             <el-table-column
@@ -30,7 +30,7 @@
30 30
             </el-table-column>
31 31
             <el-table-column label="会员数" align="center">
32 32
                 <template slot-scope="scope">
33
-                <span>{{scope.row.created_time}}</span>
33
+                <span>{{scope.row.member_count}}</span>
34 34
                 </template>
35 35
             </el-table-column>
36 36
             <el-table-column label="操作" align="center">
@@ -44,24 +44,44 @@
44 44
                 </template>
45 45
             </el-table-column>
46 46
         </el-table>
47
+        <el-pagination
48
+            @size-change="handleSizeChange"
49
+            @current-change="handleCurrentChange"
50
+            :page-sizes="[10,20,50,100]"
51
+            :page-size="10"
52
+            background
53
+            style="margin-top:20px;"
54
+            align="right"
55
+            layout="total, sizes, prev, pager, next, jumper"
56
+            :total="total">
57
+        </el-pagination>
58
+
59
+        <!--create-tag-form 添加标签-->
60
+        <create-tag-form ref="createTagForm" :tagsData="tagsData" ></create-tag-form>
61
+        <!--edit-tag-form 编辑标签-->
62
+        <edit-tag-form ref="editTagForm" :tagsData="tagsData" :tagIndex="tagIndex" :form="editForm"></edit-tag-form>
47 63
     </div>
48 64
   </div>
49 65
 </template>
50 66
 
51 67
 <script>
52
-  import {GetTags} from "@/api/member/member";
68
+  import {GetTags,DeleteTags} from "@/api/member/member";
53 69
   import BreadCrumb from '../components/bread-crumb';
54
-  
70
+  import CreateTagForm from "./components/CreateTagForm";
71
+  import EditTagForm from "./components/EditTagForm";
72
+
55 73
   export default {
56 74
     name: 'memberTagList',
57 75
     components:{
58 76
       BreadCrumb,
77
+      CreateTagForm,
78
+      EditTagForm,
59 79
     },
60 80
     data(){
61 81
       return{
62 82
         crumbs: [
63 83
           { path: false, name: '会员管理' },
64
-          { path: false, name: '标签列表' }
84
+          { path: false, name: '标签管理' }
65 85
         ],
66 86
         total:0,
67 87
         listQuery:{
@@ -70,30 +90,109 @@
70 90
             search:'',
71 91
         },
72 92
         checkAllStatus:false,
73
-       
93
+        selectedTags:[],
74 94
         tagsData:[],
95
+        tagIndex:-1,
96
+        editForm:{
97
+            id:0,
98
+            tag_name:'',
99
+        },
75 100
       }
76 101
     },
77 102
     methods:{
78 103
         openCreate:function(){
79
-            this.tagsData.push({id:1,tag_name:'2'});
104
+          this.$refs.createTagForm.open();
80 105
         },
81
-        openEdit:function(row,index){},
82
-        openDelete:function(row,index){},
83
-        changeCheck:function(){
106
+        openEdit:function(row,index){
107
+            this.tagIndex = index;
108
+            this.editForm.id = row.id;
109
+            this.editForm.tag_name = row.tag_name;
110
+            this.$refs.editTagForm.open();
111
+        },
112
+        openDeleteTags:function(){
113
+          if (this.selectedTags.length==0) {
114
+            this.$message.error("请选择要删除的标签");
115
+            return false;
116
+          }
84 117
 
118
+          this.$confirm('确认要删除所选的标签吗?<br>删除后,标签将无法恢复', '删除提示', {
119
+            dangerouslyUseHTMLString:true,
120
+            confirmButtonText: '确定',
121
+            cancelButtonText: '取消',
122
+            type: 'warning'
123
+          }).then(() => {
124
+            var ids = [];
125
+            var idMap = {};
126
+            for (const index in this.selectedTags) {
127
+              ids.push(this.selectedTags[index].id);
128
+              idMap[this.selectedTags[index].id] = this.selectedTags[index].id;
129
+            }
130
+            DeleteTags({ids:ids}).then(response=>{
131
+              var res = response.data;
132
+              if (res.state === 1) {
133
+                var tagsDataLength = this.tagsData.length;
134
+                for (let index = tagsDataLength-1; index >= 0; index--) {
135
+                  if(this.tagsData[index].id in idMap) {
136
+                    this.tagsData.splice(index, 1);
137
+                  }                  
138
+                }
139
+                this.$message.success("删除标签成功");
140
+              }else {
141
+                this.$message.error(res.msg);
142
+              }
143
+            }).catch(e=>{});
144
+          }).catch(() => {
145
+            return false        
146
+          });
147
+        },
148
+        openDelete:function(row,index){
149
+          this.$confirm('确认要删除该标签吗?<br>删除后,该标签将无法恢复', '删除提示', {
150
+            dangerouslyUseHTMLString:true,
151
+            confirmButtonText: '确定',
152
+            cancelButtonText: '取消',
153
+            type: 'warning'
154
+          }).then(() => {
155
+            var ids = [];
156
+            ids.push(row.id);
157
+            DeleteTags({ids:ids}).then(response=>{
158
+              var res = response.data;
159
+              if (res.state === 1) {
160
+                this.tagsData.splice(index, 1);
161
+                this.$message.success("删除标签成功");
162
+              }else {
163
+                this.$message.error(res.msg);
164
+              }
165
+            }).catch(e=>{});
166
+          }).catch(() => {
167
+            return false        
168
+          });
169
+        },
170
+        changeCheck:function(){
171
+          this.$refs.multipleTable.clearSelection();
172
+          if (this.checkAllStatus) {
173
+            this.$refs.multipleTable.toggleAllSelection();
174
+          }
85 175
         },
86 176
         handleSelectionChange:function (val) {
87
-            
177
+          this.selectedTags = val;
178
+        },
179
+        handleSizeChange(limit) {
180
+            this.listQuery.limit = limit;
181
+            this.GetTags();
182
+        },
183
+        handleCurrentChange(page) {
184
+            this.listQuery.page = page;
185
+            this.GetTags();
88 186
         },
89 187
         changeKey(){
90 188
             this.GetTags();
91 189
         },
92 190
         GetTags(){
93
-            GetTags().then(response=>{
191
+            GetTags(this.listQuery).then(response=>{
94 192
                 var res = response.data;
95 193
                 if(res.state===1) {
96 194
                     this.tagsData = res.data.tags;
195
+                    this.total = res.data.total;
97 196
                 }
98 197
             }).catch(e=>{})
99 198
         }

+ 180 - 0
src/scrm_pages/weixinmp/authorization.vue 查看文件

@@ -0,0 +1,180 @@
1
+<template>
2
+  <div class="main-contain">
3
+    <div class="position">
4
+      <bread-crumb :crumbs="crumbs"></bread-crumb>
5
+    </div>
6
+    <div class="app-container" id="winxin-auth-box">
7
+      <div class="filter-container" style="margin-top: 10px;margin-left: 5px ">
8
+        <div v-if="authData.authorizer_status==1">
9
+          <div class="bind-title-box">
10
+            <span class="bind-title">您已绑定公众号,如需更换绑定公众号,请点击下面按钮</span>
11
+          </div>
12
+          <el-button type="warning">更换绑定公众号</el-button>
13
+          <div class="bind-massage-box">
14
+            <span>
15
+              授权公众号:{{authData.authorizer_nick_name}},类型:{{mpTypeName}},
16
+              <!--授权方公众号类型,0代表订阅号,1代表由历史老帐号升级后的订阅号,2代表服务号-->
17
+              <!-- authorizer_service_type_info -->
18
+            </span>
19
+          </div>
20
+        </div>
21
+        <div v-else>
22
+          <div class="bind-title-box">
23
+            <span class="bind-title">您尚未绑定公众号</span>
24
+          </div>
25
+          <el-button type="warning">已有公众号,立刻绑定</el-button>
26
+          <div class="bind-massage-box">
27
+            <span>
28
+              如果还没有公众号,需要先在微信公众号平台进行申请。 去
29
+              <a href="https://mp.weixin.qq.com/" title="申请微信公众号">申请>></a>
30
+            </span>
31
+          </div>
32
+        </div>
33
+
34
+      </div>
35
+      <div style="height:20px">&nbsp;</div>
36
+      <div class="dataTitle title-15">授权公众号后可以使用什么功能?</div>
37
+      <div class="dataBody">
38
+        <p>1.微信公众号的菜单设置</p>
39
+        <p>2.微网站分享功能</p>
40
+      </div>
41
+
42
+      <div style="height:20px">&nbsp;</div>
43
+      <div class="dataTitle title-7">授权有风险吗?</div>
44
+      <div class="dataBody">
45
+        <p>没有,酷医云使用了微信平台提供的官方授权接口,是非常安全的。</p>
46
+      </div>
47
+
48
+      <div style="height:20px">&nbsp;</div>
49
+      <div class="dataTitle title-23">我的公众号已经授权了其它的第三方平台,怎么办?</div>
50
+      <div class="dataBody">
51
+        <p>没问题,秀米的授权不会影响任何第三方平台,也不影响现有的任何自定义菜单、开发模式、自定义回复等功能。</p>
52
+      </div>
53
+
54
+      <div style="height:20px">&nbsp;</div>
55
+      <div class="dataTitle title-12">如何取消给酷医云的授权?</div>
56
+      <div class="dataBody">
57
+        <p>公众号取消授权,进入微信后台,点击“+添加功能插件”,进入“授权管理”,就可以看到酷医云的授权,并且解除授权了。</p>
58
+      </div>
59
+    </div>
60
+  </div>
61
+</template>
62
+
63
+<script>
64
+import BreadCrumb from "../components/bread-crumb";
65
+
66
+export default {
67
+  name: "authorization",
68
+  components: {
69
+    BreadCrumb
70
+  },
71
+  data() {
72
+    return {
73
+      crumbs: [
74
+        { path: false, name: "系统设置" },
75
+        { path: false, name: "公众号授权" }
76
+      ],
77
+
78
+      authData: {
79
+        id: 0,
80
+        user_org_id: 0,
81
+        authorizer_appid: "",
82
+        authorizer_access_token: "",
83
+        authorizer_refresh_token: "",
84
+        authorizer_jsapi_ticket: "",
85
+        authorizer_funcscope_category: "",
86
+        authorizer_nick_name: "",
87
+        authorizer_head_img: "",
88
+        authorizer_service_type_info: 0,
89
+        authorizer_verify_type_info: 0,
90
+        authorizer_user_name: "",
91
+        authorizer_principal_name: "",
92
+        authorizer_business_info: "",
93
+        authorizer_qrcode_url: "",
94
+        created_time: "",
95
+        updated_time: "",
96
+        authorizer_status: 1
97
+      }
98
+    };
99
+  },
100
+  methods: {},
101
+  created() {},
102
+  computed:{
103
+    mpTypeName:function(){
104
+      return 'xx';
105
+    }
106
+  },
107
+};
108
+</script>
109
+
110
+<style scoped>
111
+#winxin-auth-box .bind-title-box {
112
+  margin-bottom: 20px;
113
+}
114
+
115
+#winxin-auth-box .bind-title {
116
+  color: #000;
117
+  font-size: 24px;
118
+}
119
+
120
+#winxin-auth-box .bind-massage-box {
121
+  margin-top: 10px;
122
+  color: #303133;
123
+  font-size: 14px;
124
+}
125
+#winxin-auth-box .bind-massage-box a,#winxin-auth-box .bind-massage-box a:visited,#winxin-auth-box .bind-massage-box a:active {
126
+  color: #409eff;
127
+}
128
+#winxin-auth-box .bind-massage-box a:hover {
129
+  color: #409eff;
130
+  text-decoration: underline;
131
+}
132
+
133
+#winxin-auth-box .dataTitle {
134
+  color: #303133;
135
+  font-size: 14px;
136
+  border-bottom: 1px #409eff solid;
137
+  height: 36px;
138
+  line-height: 36px;
139
+  margin: 0 0 20px 0;
140
+  position: relative;
141
+}
142
+
143
+#winxin-auth-box .dataTitle::before {
144
+  position: absolute;
145
+  left: 0;
146
+  bottom: -1px;
147
+  content: "";
148
+  height: 3px;
149
+  background: #409eff;
150
+}
151
+
152
+#winxin-auth-box .title-15::before {
153
+  width: 200px;
154
+}
155
+#winxin-auth-box .title-12::before {
156
+  width: 158px;
157
+}
158
+#winxin-auth-box .title-7::before {
159
+  width: 88px;
160
+}
161
+#winxin-auth-box .title-23::before {
162
+  width: 312px;
163
+}
164
+#winxin-auth-box .dataBody {
165
+  color: #303133;
166
+  font-size: 14px;
167
+  line-height: 18px;
168
+}
169
+/*.app-container .cell.clearfix .time ul li {*/
170
+/*float: left;*/
171
+/*list-style: none;*/
172
+/*cursor: pointer;*/
173
+/*padding: 6px 20px;*/
174
+/*color: #606266;*/
175
+/*border-radius: 4px;*/
176
+/*margin: 0 8px 0 0;*/
177
+/*font-size: 14px;*/
178
+/*text-align: center;*/
179
+/*}*/
180
+</style>

+ 12 - 0
src/utils/tools.js 查看文件

@@ -175,4 +175,16 @@ export function uParseTime(time, cFormat) {
175 175
         return false; 
176 176
     } 
177 177
     return true;
178
+  } 
179
+  
180
+  export function checkMobileOrPhone(tel){ 
181
+    var mobile = /^1[2-9][0-9]\d{8}$/ , phone = /^0\d{2,3}-?\d{7,8}$/;
182
+    return mobile.test(tel) || phone.test(tel);
183
+  } 
184
+
185
+  export function checkHexColor(color){ 
186
+    if(!(/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color))){ 
187
+        return false; 
188
+    } 
189
+    return true;
178 190
   } 

+ 8 - 8
src/xt_permission.js 查看文件

@@ -10,14 +10,14 @@ const permissionWhiteList = loginWhiteList.concat(['/']) // 权限验证白名
10 10
 
11 11
 router.beforeEach((to, from, next) => {
12 12
   // 线上注释
13
-  if (store.getters.permission_routers === undefined) {
14
-    store.dispatch('xt_GenerateRoutes', []).then(() => {
15
-      next()
16
-    })
17
-  } else {
18
-    next()
19
-  }
20
-  return
13
+  // if (store.getters.permission_routers === undefined) {
14
+  //   store.dispatch('xt_GenerateRoutes', []).then(() => {
15
+  //     next()
16
+  //   })
17
+  // } else {
18
+  //   next()
19
+  // }
20
+  // return
21 21
   // 线上注释
22 22
 
23 23
   NProgress.start()