2023-9-11

.env.production

@@ -3,8 +3,8 @@ NODE_ENV=production
 VUE_APP_ENV='production'
 
 # 页面 title
-VUE_APP_TITLE=CRMEB
+VUE_APP_TITLE=壹柒科技
 # socket 系统连接地址 (ws)或(wss)://www.crmeb.com(换成你的域名)/ws 非独立部署默认为空
-VUE_APP_WS_ADMIN_URL=''
+VUE_APP_WS_ADMIN_URL='wss://mall.tzyqkj.com/ws'
 # 接口请求地址 (http)或 (https)://www.crmeb.com(换成你的域名)/adminapi 非独立部署默认为空
-VUE_APP_API_URL=''
+VUE_APP_API_URL='https://mall.tzyqkj.com/adminapi'

src/components/copyright/index.vue

@@ -1,64 +1,65 @@
 <template>
-  <!-- 底部企业logo -->
-  <GlobalFooter class="i-copyright" :links="links" :copyright="copyright" />
+	<!-- 底部企业logo -->
+	<!-- <GlobalFooter class="i-copyright" :links="links" :copyright="copyright" /> -->
 </template>
 <script>
-import { getCrmebCopyRight } from '@/api/system'
-export default {
-  name: 'i-copyright',
-  data() {
-    return {
-      links: [
-        {
-          title: '官网',
-          key: '官网',
-          href: 'https://www.crmeb.com',
-          blankTarget: true,
-        },
-        {
-          title: '社区',
-          key: '社区',
-          href: 'http://q.crmeb.com',
-          blankTarget: true,
-        },
-        {
-          title: '文档',
-          key: '文档',
-          href: 'http://doc.crmeb.com',
-          blankTarget: true,
-        },
-      ],
-      copyright: '',
-    }
-  },
-  mounted() {
-    this.getCopyRight()
-  },
-  methods: {
-    //获取版权信息
-    getCopyRight() {
-      getCrmebCopyRight().then((res) => {
-        let copyrightText = res.data.copyrightContext
-          ? res.data.copyrightContext
-          : 'Copyright © 2014-2023 '
-        this.$store
-          .dispatch('admin/db/get', {
-            dbName: 'sys',
-            path: 'user.info',
-            user: true,
-          })
-          .then((data) => {
-            copyrightText += (data.version && !res.data.copyrightContext) ?data.version : ''
-            this.copyright = copyrightText
-          })
-      })
-    },
-  },
-}
+	import {
+		getCrmebCopyRight
+	} from '@/api/system'
+	export default {
+		name: 'i-copyright',
+		data() {
+			return {
+				links: [{
+						title: '官网',
+						key: '官网',
+						href: 'https://www.crmeb.com',
+						blankTarget: true,
+					},
+					{
+						title: '社区',
+						key: '社区',
+						href: 'http://q.crmeb.com',
+						blankTarget: true,
+					},
+					{
+						title: '文档',
+						key: '文档',
+						href: 'http://doc.crmeb.com',
+						blankTarget: true,
+					},
+				],
+				copyright: '',
+			}
+		},
+		mounted() {
+			// this.getCopyRight()
+		},
+		methods: {
+			//获取版权信息
+			getCopyRight() {
+				getCrmebCopyRight().then((res) => {
+					let copyrightText = res.data.copyrightContext ?
+						res.data.copyrightContext :
+						'Copyright © 2014-2023 '
+					this.$store
+						.dispatch('admin/db/get', {
+							dbName: 'sys',
+							path: 'user.info',
+							user: true,
+						})
+						.then((data) => {
+							copyrightText += (data.version && !res.data.copyrightContext) ? data.version : ''
+							this.copyright = copyrightText
+						})
+				})
+			},
+		},
+	}
 </script>
 <style lang="less">
-.i-copyright {
-  flex: 0 0 auto;
-  z-index: 1;
-}
-</style>
+	.i-copyright {
+		flex: 0 0 auto;
+		z-index: 1;
+	}
+</style>

src/components/mobilePage/home_short_video.vue

@@ -1,376 +1,397 @@
 <template>
-    <div class="shortVideo" :style="{paddingLeft:prConfig+'px',paddingRight:prConfig+'px',marginTop:mTop+'px',background:bgColor}">
-        <div class="nav acea-row row-between-wrapper">
-            <div class="title" :style="'color:'+titleColor">短视频</div>
-            <div class="more">更多<span class="iconfont iconjinru"></span></div>
-        </div>
-        <div class="list on acea-row row-middle" v-if="itemStyle">
-            <div class="item" v-for="(item,index) in videoList" :key="index">
-                <div class="pictrue">
-                    <img v-if="item.image" :src="item.image">
-                    <div v-else class="empty-box"><span class="iconfont-diy icontupian"></span></div>
-                    <div class="like acea-row row-bottom">
-                        <span class="iconfont icona-shoucang"></span>{{item.like_num}}
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="list" v-else>
-            <div class="item acea-row row-between" v-for="(item,index) in videoList" :key="index">
-                <div class="pictrue">
-                    <img v-if="item.image" :src="item.image">
-                    <div v-else class="empty-box"><span class="iconfont-diy icontupian"></span></div>
-                    <div class="like acea-row row-bottom">
-                        <span class="iconfont icona-shoucang"></span>{{item.like_num}}
-                    </div>
-                </div>
-                <div class="text">
-                    <div class="conter">
-                        <div class="header acea-row row-middle">
-                            <img v-if="item.type_image" :src="item.type_image">
-                            <div v-else class="empty-icon"></div>
-                            <div class="name line1" :style="'color:'+titleColor">{{item.type_name}}</div>
-                        </div>
-                        <div class="info line2" :style="'color:'+infoColor">{{item.desc}}</div>
-                    </div>
-                    <div class="goodsList acea-row row-middle">
-                        <div class="pictrue" v-for="(j,jindex) in item.product_info" :key="jindex" v-if="jindex<3">
-                            <img v-if="j.image" :src="j.image">
-                            <div v-else class="empty-icon"></div>
-                            <div class="money acea-row row-bottom row-center" v-if="jindex<2">
-                                <span>¥{{j.price}}</span>
-                            </div>
-                            <div v-else class="num acea-row row-center-wrapper">
-                                <span>+{{item.product_num-2}}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+	<div class="shortVideo"
+		:style="{paddingLeft:prConfig+'px',paddingRight:prConfig+'px',marginTop:mTop+'px',background:bgColor}">
+		<div class="nav acea-row row-between-wrapper">
+			<div class="title" :style="'color:'+titleColor">短视频</div>
+			<div class="more">更多<span class="iconfont iconjinru"></span></div>
+		</div>
+		<div class="list on acea-row row-middle" v-if="itemStyle">
+			<div class="item" v-for="(item,index) in videoList" :key="index">
+				<div class="pictrue">
+					<img v-if="item.image" :src="item.image">
+					<div v-else class="empty-box"><span class="iconfont-diy icontupian"></span></div>
+					<div class="like acea-row row-bottom">
+						<span class="iconfont icona-shoucang"></span>{{item.like_num}}
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="list" v-else>
+			<div class="item acea-row row-between" v-for="(item,index) in videoList" :key="index">
+				<div class="pictrue">
+					<img v-if="item.image" :src="item.image">
+					<div v-else class="empty-box"><span class="iconfont-diy icontupian"></span></div>
+					<div class="like acea-row row-bottom">
+						<span class="iconfont icona-shoucang"></span>{{item.like_num}}
+					</div>
+				</div>
+				<div class="text">
+					<div class="conter">
+						<div class="header acea-row row-middle">
+							<img v-if="item.type_image" :src="item.type_image">
+							<div v-else class="empty-icon"></div>
+							<div class="name line1" :style="'color:'+titleColor">{{item.type_name}}</div>
+						</div>
+						<div class="info line2" :style="'color:'+infoColor">{{item.desc}}</div>
+					</div>
+					<div class="goodsList acea-row row-middle">
+						<div class="pictrue" v-for="(j,jindex) in item.product_info" :key="jindex" v-if="jindex<3">
+							<img v-if="j.image" :src="j.image">
+							<div v-else class="empty-icon"></div>
+							<div class="money acea-row row-bottom row-center" v-if="jindex<2">
+								<span>¥{{j.price}}</span>
+							</div>
+							<div v-else class="num acea-row row-center-wrapper">
+								<span>+{{item.product_num-2}}</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-    import { mapState, mapMutations } from 'vuex'
-    export default {
-        name: 'home_short_video',
-        cname: '短视频',
-        configName: 'c_short_video',
-        icon: 'iconduanshipin',
-        type:1,// 0 基础组件 1 营销组件 2工具组件
-        defaultName:'shortVideo', // 外面匹配名称
-        props: {
-            index: {
-                type: null
-            },
-            num: {
-                type: null
-            }
-        },
-        computed: {
-            ...mapState('admin/mobildConfig', ['defaultArray'])
-        },
-        watch: {
-            pageData: {
-                handler (nVal, oVal) {
-                    this.setConfig(nVal)
-                },
-                deep: true
-            },
-            num: {
-                handler (nVal, oVal) {
-                    let data = this.$store.state.admin.mobildConfig.defaultArray[nVal]
-                    this.setConfig(data)
-                },
-                deep: true
-            },
-            'defaultArray': {
-                handler (nVal, oVal) {
-                    let data = this.$store.state.admin.mobildConfig.defaultArray[this.num]
-                    this.setConfig(data);
-                },
-                deep: true
-            }
-        },
-        data () {
-            return {
-                // 默认初始化数据禁止修改
-                defaultConfig: {
-                    name: 'shortVideo',
-                    timestamp: this.num,
-                    setUp: {
-                        tabVal: 0
-                    },
-                    numConfig: {
-                        val: 0,
-                        title:'显示个数'
-                    },
-                    videoList: [],
-                    itemStyle: {
-                        title: '视频样式',
-                        name: 'itemStyle',
-                        type: 0,
-                        list: [
-                            {
-                                val: '列表模式',
-                                icon: 'iconshipinyangshi1'
-                            },
-                            {
-                                val: '图片模式',
-                                icon: 'iconshipinyangshi2'
-                            }
-                        ]
-                    },
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex'
+	export default {
+		name: 'home_short_video',
+		cname: '短视频',
+		configName: 'c_short_video',
+		icon: 'iconduanshipin',
+		type: 1, // 0 基础组件 1 营销组件 2工具组件
+		defaultName: 'shortVideo', // 外面匹配名称
+		props: {
+			index: {
+				type: null
+			},
+			num: {
+				type: null
+			}
+		},
+		computed: {
+			...mapState('admin/mobildConfig', ['defaultArray'])
+		},
+		watch: {
+			pageData: {
+				handler(nVal, oVal) {
+					this.setConfig(nVal)
+				},
+				deep: true
+			},
+			num: {
+				handler(nVal, oVal) {
+					let data = this.$store.state.admin.mobildConfig.defaultArray[nVal]
+					this.setConfig(data)
+				},
+				deep: true
+			},
+			'defaultArray': {
+				handler(nVal, oVal) {
+					let data = this.$store.state.admin.mobildConfig.defaultArray[this.num]
+					this.setConfig(data);
+				},
+				deep: true
+			}
+		},
+		data() {
+			return {
+				// 默认初始化数据禁止修改
+				defaultConfig: {
+					name: 'shortVideo',
+					timestamp: this.num,
+					setUp: {
+						tabVal: 0
+					},
+					numConfig: {
+						val: 0,
+						title: '显示个数'
+					},
+					videoList: [],
+					itemStyle: {
+						title: '视频样式',
+						name: 'itemStyle',
+						type: 0,
+						list: [{
+								val: '列表模式',
+								icon: 'iconshipinyangshi1'
+							},
+							{
+								val: '图片模式',
+								icon: 'iconshipinyangshi2'
+							}
+						]
+					},
 					titleColor: {
-					    title: '标题颜色',
-					    name: 'titleColor',
-					    default: [{
-					        item: '#333'
-					    }],
-					    color: [
-					        {
-					            item: '#333'
-					        }
-					    ]
+						title: '标题颜色',
+						name: 'titleColor',
+						default: [{
+							item: '#333'
+						}],
+						color: [{
+							item: '#333'
+						}]
 					},
 					infoColor: {
-					    title: '简介颜色',
-					    name: 'infoColor',
-					    default: [{
-					        item: '#666'
-					    }],
-					    color: [
-					        {
-					            item: '#666'
-					        }
-					    ]
+						title: '简介颜色',
+						name: 'infoColor',
+						default: [{
+							item: '#666'
+						}],
+						color: [{
+							item: '#666'
+						}]
+					},
+					bgColor: {
+						title: '背景颜色',
+						name: 'bgColor',
+						default: [{
+							item: '#fff'
+						}],
+						color: [{
+							item: '#fff'
+						}]
 					},
-                    bgColor: {
-                        title: '背景颜色',
-                        name: 'bgColor',
-                        default: [{
-                            item: '#fff'
-                        }],
-                        color: [
-                            {
-                                item: '#fff'
-                            }
-                        ]
-                    },
-                    prConfig: {
-                        title: '背景边距',
-                        val: 15,
-                        min: 0
-                    },
-                    mbCongfig: {
-                        title: '页面间距',
-                        val: 0,
-                        min: 0
-                    }
-                },
-                bgColor: '',
-				titleColor:'',
-				infoColor:'',
-                mTop: '',
-                prConfig:0,
-                pageData: {},
-                itemStyle: 0,
-                videoList: []
-            }
-        },
-        mounted () {
-            this.$nextTick(() => {
-                this.pageData = this.$store.state.admin.mobildConfig.defaultArray[this.num]
-                this.setConfig(this.pageData);
-            })
-        },
-        methods: {
-            setConfig (data) {
-                if(!data) return
-                if(data.mbCongfig){
-                    this.bgColor = data.bgColor.color[0].item;
+					prConfig: {
+						title: '背景边距',
+						val: 15,
+						min: 0
+					},
+					mbCongfig: {
+						title: '页面间距',
+						val: 0,
+						min: 0
+					}
+				},
+				bgColor: '',
+				titleColor: '',
+				infoColor: '',
+				mTop: '',
+				prConfig: 0,
+				pageData: {},
+				itemStyle: 0,
+				videoList: []
+			}
+		},
+		mounted() {
+			this.$nextTick(() => {
+				this.pageData = this.$store.state.admin.mobildConfig.defaultArray[this.num]
+				this.setConfig(this.pageData);
+			})
+		},
+		methods: {
+			setConfig(data) {
+				if (!data) return
+				if (data.mbCongfig) {
+					this.bgColor = data.bgColor.color[0].item;
 					this.titleColor = data.titleColor.color[0].item;
 					this.infoColor = data.infoColor.color[0].item;
-                    this.mTop = data.mbCongfig.val;
-                    this.prConfig = data.prConfig.val;
-                    this.itemStyle = data.itemStyle.type;
-                    let videoList = data.videoList || [];
-                    if(videoList.length){
-                        this.videoList = videoList
-                    }else {
-                        this.videoList = [
-                            {
-                                image:'',
-                                like_num:120,
-                                type_image:'',
-                                type_name:'众邦科技',
-                                desc:'观看视频crmeb更多好礼等你来抢，每天都有哟～ 更多好礼请联…'
-                            },
-                            {
-                                image:'',
-                                like_num:120,
-                                type_image:'',
-                                type_name:'众邦科技',
-                                desc:'观看视频crmeb更多好礼等你来抢，每天都有哟～ 更多好礼请联…'
-                            }
-                        ]
-                    }
-                }
-            }
-        }
-    }
+					this.mTop = data.mbCongfig.val;
+					this.prConfig = data.prConfig.val;
+					this.itemStyle = data.itemStyle.type;
+					let videoList = data.videoList || [];
+					if (videoList.length) {
+						this.videoList = videoList
+					} else {
+						this.videoList = [{
+								image: '',
+								like_num: 120,
+								type_image: '',
+								type_name: '壹柒科技',
+								desc: '观看视频去壹柒科技更多好礼等你来抢，每天都有哟～ 更多好礼请联…'
+							},
+							{
+								image: '',
+								like_num: 120,
+								type_image: '',
+								type_name: '壹柒科技',
+								desc: '观看视频壹柒科技更多好礼等你来抢，每天都有哟～ 更多好礼请联…'
+							}
+						]
+					}
+				}
+			}
+		}
+	}
 </script>
 
 <style scoped lang="less">
-    .shortVideo{
-        .nav{
-            width: 100%;
-            height: 45px;
-            .title{
-                font-weight: 600;
-                color: #333333;
-                font-size: 15px;
-            }
-            .more{
-                font-weight: 400;
-                color: #999999;
-                font-size: 12px;
-                .iconfont{
-                    font-size: 12px;
-                }
-            }
-        }
-        .list{
-            padding-bottom: 1px;
-            &.on{
-                flex-wrap: nowrap;
-                overflow: hidden;
-                padding-bottom: 15px;
-                .item{
-                    margin-right: 12px;
-                    margin-bottom: 0;
-                    .pictrue{
-                        margin-right: 0;
-                    }
-                }
-            }
-            .item{
-                margin-bottom: 20px;
-                .pictrue{
-                    width: 113px;
-                    height: 150px;
-                    border-radius: 4px;
-                    position: relative;
-                    margin-right: 15px;
-                    img{
-                        width: 100%;
-                        height: 100%;
-                        border-radius: 4px;
-                        object-fit:cover;
-                    }
-                    .like{
-                        position: absolute;
-                        bottom: 0;
-                        left: 0;
-                        font-size: 10px;
-                        font-weight: 400;
-                        color: #FFFFFF;
-                        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
-                        width: 100%;
-                        height: 50px;
-                        padding: 0 0 7px 7px;
-                        border-radius: 4px;
-                        .iconfont{
-                            font-size: 12px;
-                            margin-right: 3px;
-                        }
-                    }
-                }
-                .text{
-                    flex: 1;
-                    /*width: 219px;*/
-                    .goodsList{
-                        margin-top: 17px;
-                        overflow: hidden;
-                        .pictrue{
-                            width: 64px;
-                            height: 64px;
-                            border-radius: 3px;
-                            position: relative;
-                            margin-right: 13px;
-                            &:nth-of-type(3n){
-                                margin-right: 0;
-                            }
-                            .num{
-                                position: absolute;
-                                top:0;
-                                left:0;
-                                color: #fff;
-                                font-size: 15px;
-                                font-weight: 400;
-                                background: rgba(0, 0, 0, 0.3);
-                                width: 100%;
-                                height: 100%;
-                                border-radius: 3px;
-                            }
-                            img{
-                                width: 100%;
-                                height: 100%;
-                                display: block;
-                                border-radius: 3px;
-                            }
-                            .money{
-                                position: absolute;
-                                color: #fff;
-                                font-size: 11px;
-                                bottom: 0;
-                                left:0;
-                                width: 100%;
-                                height: 50px;
-                                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
-                                border-radius: 3px;
-                                padding-bottom: 3px;
-                                text-align: center;
-                            }
-                        }
-                    }
-                    .conter{
-                        height: 67px;
-                        .header{
-                            .name{
-                                flex: 1;
-                                width: 150px;
-                            }
-                            .empty-icon{
-                                width: 18px;
-                                height: 18px;
-                                border-radius: 50%;
-                                background-color: #f3f5f7;
-                                border: 1px solid #FFFFFF;
-                                margin-right: 5px;
-                            }
-                            img{
-                                width: 18px;
-                                height: 18px;
-                                border: 1px solid #FFFFFF;
-                                display: block;
-                                margin-right: 5px;
-                                border-radius: 50%;
-                            }
-                            font-weight: 500;
-                            color: #333333;
-                            font-size: 14px;
-                        }
-                        .info{
-                            font-weight: 400;
-                            color: #666666;
-                            font-size: 12px;
-                            margin-top: 10px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-</style>
+	.shortVideo {
+		.nav {
+			width: 100%;
+			height: 45px;
+
+			.title {
+				font-weight: 600;
+				color: #333333;
+				font-size: 15px;
+			}
+
+			.more {
+				font-weight: 400;
+				color: #999999;
+				font-size: 12px;
+
+				.iconfont {
+					font-size: 12px;
+				}
+			}
+		}
+
+		.list {
+			padding-bottom: 1px;
+
+			&.on {
+				flex-wrap: nowrap;
+				overflow: hidden;
+				padding-bottom: 15px;
+
+				.item {
+					margin-right: 12px;
+					margin-bottom: 0;
+
+					.pictrue {
+						margin-right: 0;
+					}
+				}
+			}
+
+			.item {
+				margin-bottom: 20px;
+
+				.pictrue {
+					width: 113px;
+					height: 150px;
+					border-radius: 4px;
+					position: relative;
+					margin-right: 15px;
+
+					img {
+						width: 100%;
+						height: 100%;
+						border-radius: 4px;
+						object-fit: cover;
+					}
+
+					.like {
+						position: absolute;
+						bottom: 0;
+						left: 0;
+						font-size: 10px;
+						font-weight: 400;
+						color: #FFFFFF;
+						background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
+						width: 100%;
+						height: 50px;
+						padding: 0 0 7px 7px;
+						border-radius: 4px;
+
+						.iconfont {
+							font-size: 12px;
+							margin-right: 3px;
+						}
+					}
+				}
+
+				.text {
+					flex: 1;
+
+					/*width: 219px;*/
+					.goodsList {
+						margin-top: 17px;
+						overflow: hidden;
+
+						.pictrue {
+							width: 64px;
+							height: 64px;
+							border-radius: 3px;
+							position: relative;
+							margin-right: 13px;
+
+							&:nth-of-type(3n) {
+								margin-right: 0;
+							}
+
+							.num {
+								position: absolute;
+								top: 0;
+								left: 0;
+								color: #fff;
+								font-size: 15px;
+								font-weight: 400;
+								background: rgba(0, 0, 0, 0.3);
+								width: 100%;
+								height: 100%;
+								border-radius: 3px;
+							}
+
+							img {
+								width: 100%;
+								height: 100%;
+								display: block;
+								border-radius: 3px;
+							}
+
+							.money {
+								position: absolute;
+								color: #fff;
+								font-size: 11px;
+								bottom: 0;
+								left: 0;
+								width: 100%;
+								height: 50px;
+								background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
+								border-radius: 3px;
+								padding-bottom: 3px;
+								text-align: center;
+							}
+						}
+					}
+
+					.conter {
+						height: 67px;
+
+						.header {
+							.name {
+								flex: 1;
+								width: 150px;
+							}
+
+							.empty-icon {
+								width: 18px;
+								height: 18px;
+								border-radius: 50%;
+								background-color: #f3f5f7;
+								border: 1px solid #FFFFFF;
+								margin-right: 5px;
+							}
+
+							img {
+								width: 18px;
+								height: 18px;
+								border: 1px solid #FFFFFF;
+								display: block;
+								margin-right: 5px;
+								border-radius: 50%;
+							}
+
+							font-weight: 500;
+							color: #333333;
+							font-size: 14px;
+						}
+
+						.info {
+							font-weight: 400;
+							color: #666666;
+							font-size: 12px;
+							margin-top: 10px;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

src/components/settingGuide/routine.vue

@@ -1,237 +1,233 @@
 <template>
-  <Tabs value="1" :animated="false">
-    <TabPane label="1.注册小程序" name="1">
-      <Timeline>
-        <TimelineItem>
-          <div class="dot" slot="dot">1</div>
-          <div class="title">打开公众平台</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  打开微信公众平台官网：<a
-                    href="https://mp.weixin.qq.com"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    >https://mp.weixin.qq.com</a
-                  >
-                </div>
-                <div>右上角点击“立即注册”</div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}statics/system/mp-1-1-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">2</div>
-          <div class="title">选择账号类型</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>选择账号类型，请选择“小程序”</div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/mp-1-2-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">3</div>
-          <div class="title">填写邮箱并激活</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>登录您的邮箱，查看激活邮件，然后在此填写邮箱验证码</div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/mp-1-3-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">4</div>
-          <div class="title">信息登记</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  主体请记得选择“企业”，之后的企业信息可根据您自己的企业情况填写
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/mp-1-4-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-      </Timeline>
-    </TabPane>
-    <TabPane label="2.完善小程序" name="2">
-      <Timeline>
-        <TimelineItem>
-          <div class="dot" slot="dot">1</div>
-          <div class="title">添加开发者</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>如果本人为小程序管理者可以跳过此步</div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/mp-2-1-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">2</div>
-          <div class="title">重置AppSecret</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>位置：点击小程序左侧菜单，开发 → 开发管理 → 开发设置</div>
-                <div>
-                  操作：点击图中的重置按钮，重置成功后记得保存AppID(小程序ID)、AppSecret(小程序密钥)
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/mp-2-2-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">3</div>
-          <div class="title">关闭IP白名单</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>位置：点击小程序左侧菜单，开发 → 开发管理 → 开发设置</div>
-                <div>
-                  操作：点击图中的关闭按钮，此开关需要管理员的微信扫码才可以关闭哦
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/mp-2-3-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">4</div>
-          <div class="title">配置服务器</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  填写您的域名，请注意填写域名的前缀，按照提示格式填写哦
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/mp-2-4-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">5</div>
-          <div class="title">修改业务域名</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>修改业务域名，同样填写上一步的域名即可</div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/mp-2-5-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-      </Timeline>
-    </TabPane>
-    <TabPane label="3.开发配置" name="3">
-      <Timeline>
-        <TimelineItem>
-          <div class="dot" slot="dot">1</div>
-          <div class="title">登录您的crmeb系统后台</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  位置：设置 → 应用设置 →
-                  小程序，填写小程序开发者信息，AppID、AppSecret、小程序名称
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/mp-3-1-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">2</div>
-          <div class="title">关闭小程序充值开关</div>
-          <div class="content">
-            <div class="item">
-              <Alert show-icon>
-                <div>
-                  目前小程序审核，带有充值功能会被要求提供相关资料（预付卡在线充值业务），CRMEB小程序提交前，
-                  请在后台关闭充值功能，等待审核通过后再打开
-                </div>
-              </Alert>
-              <div class="text">
-                <div>
-                  位置：营销→余额充值→充值设置，小程序充值开关，选择“关闭”（不要忘记底部的提交按钮哦~）
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/mp-3-2-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-      </Timeline>
-    </TabPane>
-  </Tabs>
+	<Tabs value="1" :animated="false">
+		<TabPane label="1.注册小程序" name="1">
+			<Timeline>
+				<TimelineItem>
+					<div class="dot" slot="dot">1</div>
+					<div class="title">打开公众平台</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									打开微信公众平台官网：<a href="https://mp.weixin.qq.com" target="_blank"
+										rel="noopener noreferrer">https://mp.weixin.qq.com</a>
+								</div>
+								<div>右上角点击“立即注册”</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}statics/system/mp-1-1-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">2</div>
+					<div class="title">选择账号类型</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>选择账号类型，请选择“小程序”</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/mp-1-2-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">3</div>
+					<div class="title">填写邮箱并激活</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>登录您的邮箱，查看激活邮件，然后在此填写邮箱验证码</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/mp-1-3-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">4</div>
+					<div class="title">信息登记</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									主体请记得选择“企业”，之后的企业信息可根据您自己的企业情况填写
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/mp-1-4-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+			</Timeline>
+		</TabPane>
+		<TabPane label="2.完善小程序" name="2">
+			<Timeline>
+				<TimelineItem>
+					<div class="dot" slot="dot">1</div>
+					<div class="title">添加开发者</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>如果本人为小程序管理者可以跳过此步</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/mp-2-1-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">2</div>
+					<div class="title">重置AppSecret</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>位置：点击小程序左侧菜单，开发 → 开发管理 → 开发设置</div>
+								<div>
+									操作：点击图中的重置按钮，重置成功后记得保存AppID(小程序ID)、AppSecret(小程序密钥)
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/mp-2-2-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">3</div>
+					<div class="title">关闭IP白名单</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>位置：点击小程序左侧菜单，开发 → 开发管理 → 开发设置</div>
+								<div>
+									操作：点击图中的关闭按钮，此开关需要管理员的微信扫码才可以关闭哦
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/mp-2-3-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">4</div>
+					<div class="title">配置服务器</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									填写您的域名，请注意填写域名的前缀，按照提示格式填写哦
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/mp-2-4-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">5</div>
+					<div class="title">修改业务域名</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>修改业务域名，同样填写上一步的域名即可</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/mp-2-5-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+			</Timeline>
+		</TabPane>
+		<TabPane label="3.开发配置" name="3">
+			<Timeline>
+				<TimelineItem>
+					<div class="dot" slot="dot">1</div>
+					<div class="title">登录您的壹柒科技系统后台</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									位置：设置 → 应用设置 →
+									小程序，填写小程序开发者信息，AppID、AppSecret、小程序名称
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/mp-3-1-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">2</div>
+					<div class="title">关闭小程序充值开关</div>
+					<div class="content">
+						<div class="item">
+							<Alert show-icon>
+								<div>
+									目前小程序审核，带有充值功能会被要求提供相关资料（预付卡在线充值业务），壹柒科技小程序提交前，
+									请在后台关闭充值功能，等待审核通过后再打开
+								</div>
+							</Alert>
+							<div class="text">
+								<div>
+									位置：营销→余额充值→充值设置，小程序充值开关，选择“关闭”（不要忘记底部的提交按钮哦~）
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/mp-3-2-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+			</Timeline>
+		</TabPane>
+	</Tabs>
 </template>
 
 <script>
-import Setting from '@/setting';
-export default {
-  name: 'routine',
-  data() {
-    return {
-      baseURL: Setting.apiBaseURL.replace(/adminapi/, ''),
-    };
-  },
-};
+	import Setting from '@/setting';
+	export default {
+		name: 'routine',
+		data() {
+			return {
+				baseURL: Setting.apiBaseURL.replace(/adminapi/, ''),
+			};
+		},
+	};
 </script>
 
 <style lang="stylus" scoped>
-/deep/.ivu-tabs-nav-wrap {
-  border-radius: 5px;
-}
+	/deep/.ivu-tabs-nav-wrap {
+		border-radius: 5px;
+	}
 
-/deep/.ivu-tabs-bar {
-  border-bottom: 0;
-}
+	/deep/.ivu-tabs-bar {
+		border-bottom: 0;
+	}
 
-/deep/.ivu-timeline-item-content {
-  padding-bottom: 40px !important;
+	/deep/.ivu-timeline-item-content {
+		padding-bottom: 40px !important;
 
-  .title {
-    font-weight: 600;
-  }
-}
+		.title {
+			font-weight: 600;
+		}
+	}
 
-.ivu-tabs {
-  padding: 0 !important;
-}
+	.ivu-tabs {
+		padding: 0 !important;
+	}
 
-.ivu-tabs>>>.ivu-tabs-tab:nth-child(2)::before {
-  display: none;
-}
-</style>
+	.ivu-tabs>>>.ivu-tabs-tab:nth-child(2)::before {
+		display: none;
+	}
+</style>

src/components/settingGuide/wechat.vue

@@ -1,376 +1,322 @@
 <template>
-  <Tabs value="1" :animated="false">
-    <TabPane label="1.注册公众号" name="1">
-      <Timeline>
-        <TimelineItem>
-          <div class="dot" slot="dot">1</div>
-          <div class="title">打开公众平台</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  打开微信公众平台官网：<a
-                    href="https://mp.weixin.qq.com"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    >https://mp.weixin.qq.com</a
-                  >
-                </div>
-                <div>右上角点击“立即注册”</div>
-              </div>
-              <div class="image">
-                <img
-                  :src="`${baseURL}/statics/system/wechat-1-1-1.png`"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">2</div>
-          <div class="title">选择账号类型：服务号</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>在选择注册账号类型中必须选择“服务号”</div>
-              </div>
-              <div class="image">
-                <img
-                  :src="`${baseURL}/statics/system/wechat-1-2-1.png`"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">3</div>
-          <div class="title">填写邮箱并激活</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>登录您的邮箱，查看激活邮件，然后在此填写邮箱验证码</div>
-              </div>
-              <div class="image">
-                <img
-                  :src="`${baseURL}/statics/system/wechat-1-3-1.png`"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">4</div>
-          <div class="title">信息登记</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  公司请记得选择
-                  企业→企业类型，之后的企业信息可根据您自己的企业情况填写
-                </div>
-              </div>
-              <div class="image">
-                <img
-                  :src="`${baseURL}/statics/system/wechat-1-4-1.png`"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">5</div>
-          <div class="title">填写公众号信息</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>填写公众号信息，包括帐号名称、功能介绍、选择运营地区</div>
-              </div>
-              <div class="image">
-                <img
-                  :src="`${baseURL}/statics/system/wechat-1-5-1.png`"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">6</div>
-          <div class="title">验证账号</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>根据所选择的验证方式，完成验证/认证后帐号功能即可使用</div>
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-      </Timeline>
-    </TabPane>
-    <TabPane label="2.公众号配置" name="2">
-      <Timeline>
-        <TimelineItem>
-          <div class="dot" slot="dot">1</div>
-          <div class="title">登录公众平台</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>点击左侧菜单，设置→公众设置</div>
-              </div>
-              <div class="image">
-                <img
-                  :src="`${baseURL}/statics/system/wechat-2-1-1.png`"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">2</div>
-          <div class="title">功能设置中配置3个域名</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  在功能设置中，配置“业务域名”、“JS接口安全域名”、“网页授权域名”
-                </div>
-              </div>
-              <div class="image">
-                <img
-                  :src="`${baseURL}/statics/system/wechat-2-2-1.png`"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">3</div>
-          <div class="title">配置域名</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  配置域名，直接填写你所绑定配置的域名即可，填写域名的注意事项。
-                </div>
-              </div>
-              <Alert show-icon>
-                <div>注意事项：</div>
-                <div>1. 填写的域名不支持IP地址、端口号及短链域名；</div>
-                <div>2. 域名须通过<span>ICP备案</span></div>
-                <div>
-                  3. 将验证文件上传至<span>public</span>下，并确保可以访问；
-                </div>
-                <div>4. 一个自然月内最多可修改并保存三次。</div>
-              </Alert>
-              <div class="image">
-                <img
-                  :src="`${baseURL}/statics/system/wechat-2-3-1.png`"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">4</div>
-          <div class="title">启用开发者密码</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  点击左侧菜单开发→基本配置，点击启用开发者密码（AppSecret），根据提示进行验证
-                </div>
-              </div>
-              <div class="image">
-                <img
-                  :src="`${baseURL}/statics/system/wechat-2-4-1.png`"
-                  alt=""
-                />
-                <img
-                  :src="`${baseURL}/statics/system/wechat-2-4-2.png`"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">5</div>
-          <div class="title">保存记录AppID、AppSecret</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>本地最好新建一个 txt 文本文档，用于记录相关配置数据</div>
-              </div>
-              <div class="image">
-                <img
-                  :src="`${baseURL}/statics/system/wechat-2-5-1.png`"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">6</div>
-          <div class="title">选择是否设置白名单</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>1.关闭白名单，无需做其他配置</div>
-              </div>
-              <div class="image">
-                <img
-                  :src="`${baseURL}/statics/system/wechat-2-6-1.png`"
-                  alt=""
-                />
-              </div>
-            </div>
-            <div class="item">
-              <div class="text">
-                <div>2.开启白名单，需要同时配置IP白名单</div>
-              </div>
-              <div class="image">
-                <img
-                  :src="`${baseURL}/statics/system/wechat-2-6-2.png`"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-      </Timeline>
-    </TabPane>
-    <TabPane label="3.开发配置" name="3">
-      <Timeline>
-        <TimelineItem>
-          <div class="dot" slot="dot">1</div>
-          <div class="title">登录您的CRMEB系统后台</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  点击设置→应用设置→公众号→基础配置，填写公众号开发者信息，AppID、AppSecret
-                </div>
-              </div>
-              <div class="image">
-                <img
-                  :src="`${baseURL}/statics/system/wechat-3-1-1.png`"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">2</div>
-          <div class="title">服务器配置（商城后台）</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  随机生成
-                  EncodingAESKey、微信验证TOKEN，消息加解密方式选择“明文模式”，完成后一定要点击“提交”
-                </div>
-              </div>
-              <div class="image">
-                <img
-                  :src="`${baseURL}/statics/system/wechat-3-2-1.png`"
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">3</div>
-          <div class="title">服务器配置（微信公众平台）</div>
-          <div class="content">
-            <div v-for="(item, index) in list" :key="index" class="item">
-              <div v-for="(txt, i) in item.text" :key="i" class="text">
-                <div :key="txt" v-html="txt"></div>
-              </div>
-              <Alert v-if="item.alert.length" show-icon>
-                <div>注意事项：</div>
-                <div v-for="(alt, j) in item.alert" :key="j">
-                  <div v-html="alt"></div>
-                </div>
-              </Alert>
-              <div class="image">
-                <img
-                  v-for="(img, k) in item.image"
-                  :src="`${baseURL}/statics/system/${item.image}`"
-                  alt=""
-                  :key="k"
-                />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-      </Timeline>
-    </TabPane>
-  </Tabs>
+	<Tabs value="1" :animated="false">
+		<TabPane label="1.注册公众号" name="1">
+			<Timeline>
+				<TimelineItem>
+					<div class="dot" slot="dot">1</div>
+					<div class="title">打开公众平台</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									打开微信公众平台官网：<a href="https://mp.weixin.qq.com" target="_blank"
+										rel="noopener noreferrer">https://mp.weixin.qq.com</a>
+								</div>
+								<div>右上角点击“立即注册”</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/wechat-1-1-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">2</div>
+					<div class="title">选择账号类型：服务号</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>在选择注册账号类型中必须选择“服务号”</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/wechat-1-2-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">3</div>
+					<div class="title">填写邮箱并激活</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>登录您的邮箱，查看激活邮件，然后在此填写邮箱验证码</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/wechat-1-3-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">4</div>
+					<div class="title">信息登记</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									公司请记得选择
+									企业→企业类型，之后的企业信息可根据您自己的企业情况填写
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/wechat-1-4-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">5</div>
+					<div class="title">填写公众号信息</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>填写公众号信息，包括帐号名称、功能介绍、选择运营地区</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/wechat-1-5-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">6</div>
+					<div class="title">验证账号</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>根据所选择的验证方式，完成验证/认证后帐号功能即可使用</div>
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+			</Timeline>
+		</TabPane>
+		<TabPane label="2.公众号配置" name="2">
+			<Timeline>
+				<TimelineItem>
+					<div class="dot" slot="dot">1</div>
+					<div class="title">登录公众平台</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>点击左侧菜单，设置→公众设置</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/wechat-2-1-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">2</div>
+					<div class="title">功能设置中配置3个域名</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									在功能设置中，配置“业务域名”、“JS接口安全域名”、“网页授权域名”
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/wechat-2-2-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">3</div>
+					<div class="title">配置域名</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									配置域名，直接填写你所绑定配置的域名即可，填写域名的注意事项。
+								</div>
+							</div>
+							<Alert show-icon>
+								<div>注意事项：</div>
+								<div>1. 填写的域名不支持IP地址、端口号及短链域名；</div>
+								<div>2. 域名须通过<span>ICP备案</span></div>
+								<div>
+									3. 将验证文件上传至<span>public</span>下，并确保可以访问；
+								</div>
+								<div>4. 一个自然月内最多可修改并保存三次。</div>
+							</Alert>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/wechat-2-3-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">4</div>
+					<div class="title">启用开发者密码</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									点击左侧菜单开发→基本配置，点击启用开发者密码（AppSecret），根据提示进行验证
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/wechat-2-4-1.png`" alt="" />
+								<img :src="`${baseURL}/statics/system/wechat-2-4-2.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">5</div>
+					<div class="title">保存记录AppID、AppSecret</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>本地最好新建一个 txt 文本文档，用于记录相关配置数据</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/wechat-2-5-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">6</div>
+					<div class="title">选择是否设置白名单</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>1.关闭白名单，无需做其他配置</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/wechat-2-6-1.png`" alt="" />
+							</div>
+						</div>
+						<div class="item">
+							<div class="text">
+								<div>2.开启白名单，需要同时配置IP白名单</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/wechat-2-6-2.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+			</Timeline>
+		</TabPane>
+		<TabPane label="3.开发配置" name="3">
+			<Timeline>
+				<TimelineItem>
+					<div class="dot" slot="dot">1</div>
+					<div class="title">登录您的壹柒科技系统后台</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									点击设置→应用设置→公众号→基础配置，填写公众号开发者信息，AppID、AppSecret
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/wechat-3-1-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">2</div>
+					<div class="title">服务器配置（商城后台）</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									随机生成
+									EncodingAESKey、微信验证TOKEN，消息加解密方式选择“明文模式”，完成后一定要点击“提交”
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/wechat-3-2-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">3</div>
+					<div class="title">服务器配置（微信公众平台）</div>
+					<div class="content">
+						<div v-for="(item, index) in list" :key="index" class="item">
+							<div v-for="(txt, i) in item.text" :key="i" class="text">
+								<div :key="txt" v-html="txt"></div>
+							</div>
+							<Alert v-if="item.alert.length" show-icon>
+								<div>注意事项：</div>
+								<div v-for="(alt, j) in item.alert" :key="j">
+									<div v-html="alt"></div>
+								</div>
+							</Alert>
+							<div class="image">
+								<img v-for="(img, k) in item.image" :src="`${baseURL}/statics/system/${item.image}`"
+									alt="" :key="k" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+			</Timeline>
+		</TabPane>
+	</Tabs>
 </template>
 
 <script>
-import Setting from '@/setting';
-export default {
-  name: 'wechat',
-  data() {
-    return {
-      baseURL: Setting.apiBaseURL.replace(/adminapi/, ''),
-      list: [
-        {
-          text: [
-            '1.点击左侧菜单 开发→基本配置→服务器配置，点击“修改配置“（如已启动，请先停止）',
-          ],
-          alert: [],
-          image: ['wechat-3-3-1.png'],
-        },
-        {
-          text: [
-            '2.将第 2 步商城后台保存提交的配置信息（再次强调上一步需要提交哦~），在微信公众平台上填写。',
-          ],
-          alert: [
-            '1.URL填写内容为http://你的域名/api/Wechat/serve，例如http://<a>www.crmeb.com</a>/api/Wechat/serve',
-            '2.AppID、AppSecret、Token、消息加密方式、EncodingAESKey，两边的服务器配置必须要<a href="javascript:;">完全一致</a>哦~',
-          ],
-          image: ['wechat-3-3-2.png'],
-        },
-      ],
-    };
-  },
-};
+	import Setting from '@/setting';
+	export default {
+		name: 'wechat',
+		data() {
+			return {
+				baseURL: Setting.apiBaseURL.replace(/adminapi/, ''),
+				list: [{
+						text: [
+							'1.点击左侧菜单 开发→基本配置→服务器配置，点击“修改配置“（如已启动，请先停止）',
+						],
+						alert: [],
+						image: ['wechat-3-3-1.png'],
+					},
+					{
+						text: [
+							'2.将第 2 步商城后台保存提交的配置信息（再次强调上一步需要提交哦~），在微信公众平台上填写。',
+						],
+						alert: [
+							'1.URL填写内容为http://你的域名/api/Wechat/serve，例如http://<a>mall.tzyqkj.com</a>/api/Wechat/serve',
+							'2.AppID、AppSecret、Token、消息加密方式、EncodingAESKey，两边的服务器配置必须要<a href="javascript:;">完全一致</a>哦~',
+						],
+						image: ['wechat-3-3-2.png'],
+					},
+				],
+			};
+		},
+	};
 </script>
 
 <style lang="stylus" scoped>
-/deep/.ivu-tabs-nav-wrap {
-  border-radius: 5px;
-}
+	/deep/.ivu-tabs-nav-wrap {
+		border-radius: 5px;
+	}
 
-/deep/.ivu-tabs-bar {
-  border-bottom: 0;
-}
+	/deep/.ivu-tabs-bar {
+		border-bottom: 0;
+	}
 
-/deep/.ivu-timeline-item-content {
-  padding-bottom: 40px !important;
+	/deep/.ivu-timeline-item-content {
+		padding-bottom: 40px !important;
 
-  .title {
-    font-weight: 600;
-  }
-}
+		.title {
+			font-weight: 600;
+		}
+	}
 
-.ivu-tabs {
-  padding: 0 !important;
-}
+	.ivu-tabs {
+		padding: 0 !important;
+	}
 
-.ivu-tabs>>>.ivu-tabs-tab:nth-child(2)::before {
-  display: none;
-}
-</style>
+	.ivu-tabs>>>.ivu-tabs-tab:nth-child(2)::before {
+		display: none;
+	}
+</style>

src/components/settingGuide/work.vue

@@ -1,426 +1,410 @@
 <template>
-  <Tabs value="1" :animated="false">
-    <TabPane label="1.基础配置" name="1">
-      <Timeline>
-        <TimelineItem>
-          <div class="dot" slot="dot">1</div>
-          <div class="title">注册企业微信</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  打开企业微信官网首页：<a
-                    href="https://work.weixin.qq.com/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    >https://work.weixin.qq.com/</a
-                  >
-                </div>
-                <div>点击图片上的“立即注册”，注册后进行下一步</div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-1-1-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">2</div>
-          <div class="title">获取企业ID</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  登录企业微信管理后台：<a
-                    href="https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    >https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu</a
-                  >
-                </div>
-                <div>位置：我的企业 → 企业信息，在最下方找到企业ID并复制</div>
-              </div>
-            </div>
-            <div class="image">
-              <img :src="`${baseURL}statics/system/work-1-1-2.png`" alt="" />
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">3</div>
-          <div class="title">前往商城后台填写企业ID</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>登录商城后台：http://您的域名/admin/work/config</div>
-                <div>
-                  位置：企业微信 → 企业微信设置，将企业ID复制到此处并保存
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-1-1-3.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-      </Timeline>
-    </TabPane>
-    <TabPane label="2.通讯录配置" name="2">
-      <Timeline>
-        <TimelineItem>
-          <div class="dot" slot="dot">1</div>
-          <div class="title">开启API接口同步</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  登录企业微信管理后台：<a
-                    href="https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    >https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu</a
-                  >
-                </div>
-                <div>位置：管理工具 → 通讯录同步，点击“开启API接口同步”</div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-2-1-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">2</div>
-          <div class="title">通讯录同步</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>1.权限一栏，勾选“API编辑通讯录”以及“开启手动编辑”；</div>
-                <div>2.点击查看Secret，然后打开企业微信客户端进行复制</div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-2-2-1.png`" alt="" />
-                <img :src="`${baseURL}/statics/system/work-2-2-2.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">3</div>
-          <div class="title">商城后台填写Secret</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  将复制的secret填写到商城后台端的 企业微信通讯录配置 → Secret
-                  中，如下图
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-2-3-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">4</div>
-          <div class="title">企业可信IP</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>1.点击企业可信IP一栏的“编辑”</div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-2-4-1.png`" alt="" />
-              </div>
-            </div>
-            <div class="item">
-              <div class="text">
-                <div>2.点击“确认操作”</div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-2-4-2.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">5</div>
-          <div class="title">打开接收事件服务器并编辑</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>1.位置：企业微信管理后台 → 管理工具 → 通讯录同步</div>
-                <div>
-                  操作：点击编辑进入配置页面（截图为已经配置后），需要当前登录的管理员在手机上确认进入编辑页面
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-2-5-1.png`" alt="" />
-              </div>
-            </div>
-            <div class="item">
-              <div class="text">
-                <div>
-                  2.进入编辑页面后，需要返回商城后台并复制下图1中的
-                  Token、EncodingAESKey、服务器地址到下图2中对应的位置中，点击保存。直到提示配置成功
-                </div>
-              </div>
-              <Alert show-icon
-                >这里的Token、EncodingAESKey、服务器地址将会在其他事件(如3.客户配置)接收器中使用到。</Alert
-              >
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-2-5-2.png`" alt="" />
-                <img :src="`${baseURL}/statics/system/work-2-5-3.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-      </Timeline>
-    </TabPane>
-    <TabPane label="3.客户配置" name="3">
-      <Timeline>
-        <TimelineItem>
-          <div class="dot" slot="dot">1</div>
-          <div class="title">获取Secret</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  登录企业微信管理后台：<a
-                    href="https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    >https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu</a
-                  >
-                </div>
-                <div>位置：客户与上下游 → 客户联系 → 客户</div>
-                <div>
-                  操作：点击“API”，首先需要绑定微信开发者ID，然后点击Secret一栏的查看按钮并返回企微客户端进行复制
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-3-1-1.png`" alt="" />
-                <img :src="`${baseURL}/statics/system/work-3-1-2.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">2</div>
-          <div class="title">商城后台填写Secret</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  将复制的secret填写到商城后台端的 企业微信客户配置 → Secret
-                  中，如下图
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-3-2-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">3</div>
-          <div class="title">打开接收事件服务器并编辑</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>1.位置：客户与上下游 → 客户联系 → 客户</div>
-                <div>
-                  操作：点击编辑进入配置页面（截图为已经配置后），需要当前登录的管理员在手机上确认进入编辑页面
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-3-3-1.png`" alt="" />
-              </div>
-            </div>
-            <div class="item">
-              <div class="text">
-                <div>
-                  2.进入编辑页面后，需要返回商城后台并复制下图1中的Token、EncodingAESKey、服务器地址到下图2中对应的位置中，点击保存。直到提示配置成功
-                </div>
-              </div>
-              <Alert show-icon
-                >客户事件接收的配置和企业微信通讯录一样，只要复制出刚配置的企业微信通讯录的配置，填入当前客户接受事件服务器中就可以</Alert
-              >
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-3-3-2.png`" alt="" />
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-3-3-3.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-      </Timeline>
-    </TabPane>
-    <TabPane label="4.自建应用设置" name="4">
-      <Timeline>
-        <TimelineItem>
-          <div class="dot" slot="dot">1</div>
-          <div class="title">获取Secret</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>
-                  登录企业微信管理后台：<a
-                    href="https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    >https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu</a
-                  >
-                </div>
-                <div>位置：应用管理 → 应用 → 自建</div>
-                <div>
-                  操作：进入创建应用页面，上传应用LOGO、设置应用名称、设置应用介绍、设置可见部门，然后点击创建应用进行创建
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-4-1-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">2</div>
-          <div class="title">网页授权及JS-SDK</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>位置：刚创建的应用界面 → 网页授权及JS-SDK</div>
-                <div>
-                  操作1：把自己的域名填写在下图两个输入框中，格式例如：www.crmeb.com
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-4-2-1.png`" alt="" />
-              </div>
-            </div>
-            <div class="item">
-              <div class="text">
-                操作2：点击“申请校验域名”下载文件上传到服务器根目录下的public里。使用域名加文件名称需要能访问到此文件就算
-                成功，最后点击【确定】提交可信域名配置
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-4-2-2.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">3</div>
-          <div class="title">企业微信授权登录</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>位置：刚创建的应用界面 → 企业微信授权登录</div>
-                <div>
-                  操作：点击“设置授权回调域”填写入自己的域名(例如：www.crmeb.com)，然后点击“保存”
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-4-3-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">4</div>
-          <div class="title">配置到聊天工具栏</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>1.位置：刚创建的应用界面 → 配置到聊天工具栏</div>
-                <div>2.操作：点击“配置页面”；</div>
-                <div>
-                  页面内容：选择“自定义”，填写连接：https://自己的域名/pages/work/userInfo/index
-                </div>
-                <div>配置到： 选择“客户联系聊天工具栏“</div>
-                <div>
-                  保存此配置，就可以在企业微信和客户聊天或者群聊中看到刚才配置的侧边栏
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-4-4-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">5</div>
-          <div class="title">企业可信IP</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>位置：刚创建的应用界面 → 企业可信IP</div>
-                <div>目前通讯录权限由自建应用获取，一定需要配置这里</div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-4-5-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-        <TimelineItem>
-          <div class="dot" slot="dot">6</div>
-          <div class="title">调用应用</div>
-          <div class="content">
-            <div class="item">
-              <div class="text">
-                <div>位置：客户上下游 → 客户联系 → 客户 → API → 可调用应用</div>
-                <div>
-                  操作：勾选上刚才创建的自定义应用，点击确定就可以使用该应用
-                </div>
-              </div>
-              <div class="image">
-                <img :src="`${baseURL}/statics/system/work-4-6-1.png`" alt="" />
-              </div>
-            </div>
-          </div>
-        </TimelineItem>
-      </Timeline>
-    </TabPane>
-  </Tabs>
+	<Tabs value="1" :animated="false">
+		<TabPane label="1.基础配置" name="1">
+			<Timeline>
+				<TimelineItem>
+					<div class="dot" slot="dot">1</div>
+					<div class="title">注册企业微信</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									打开企业微信官网首页：<a href="https://work.weixin.qq.com/" target="_blank"
+										rel="noopener noreferrer">https://work.weixin.qq.com/</a>
+								</div>
+								<div>点击图片上的“立即注册”，注册后进行下一步</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-1-1-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">2</div>
+					<div class="title">获取企业ID</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									登录企业微信管理后台：<a
+										href="https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu"
+										target="_blank"
+										rel="noopener noreferrer">https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu</a>
+								</div>
+								<div>位置：我的企业 → 企业信息，在最下方找到企业ID并复制</div>
+							</div>
+						</div>
+						<div class="image">
+							<img :src="`${baseURL}statics/system/work-1-1-2.png`" alt="" />
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">3</div>
+					<div class="title">前往商城后台填写企业ID</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>登录商城后台：http://您的域名/admin/work/config</div>
+								<div>
+									位置：企业微信 → 企业微信设置，将企业ID复制到此处并保存
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-1-1-3.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+			</Timeline>
+		</TabPane>
+		<TabPane label="2.通讯录配置" name="2">
+			<Timeline>
+				<TimelineItem>
+					<div class="dot" slot="dot">1</div>
+					<div class="title">开启API接口同步</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									登录企业微信管理后台：<a
+										href="https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu"
+										target="_blank"
+										rel="noopener noreferrer">https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu</a>
+								</div>
+								<div>位置：管理工具 → 通讯录同步，点击“开启API接口同步”</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-2-1-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">2</div>
+					<div class="title">通讯录同步</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>1.权限一栏，勾选“API编辑通讯录”以及“开启手动编辑”；</div>
+								<div>2.点击查看Secret，然后打开企业微信客户端进行复制</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-2-2-1.png`" alt="" />
+								<img :src="`${baseURL}/statics/system/work-2-2-2.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">3</div>
+					<div class="title">商城后台填写Secret</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									将复制的secret填写到商城后台端的 企业微信通讯录配置 → Secret
+									中，如下图
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-2-3-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">4</div>
+					<div class="title">企业可信IP</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>1.点击企业可信IP一栏的“编辑”</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-2-4-1.png`" alt="" />
+							</div>
+						</div>
+						<div class="item">
+							<div class="text">
+								<div>2.点击“确认操作”</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-2-4-2.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">5</div>
+					<div class="title">打开接收事件服务器并编辑</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>1.位置：企业微信管理后台 → 管理工具 → 通讯录同步</div>
+								<div>
+									操作：点击编辑进入配置页面（截图为已经配置后），需要当前登录的管理员在手机上确认进入编辑页面
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-2-5-1.png`" alt="" />
+							</div>
+						</div>
+						<div class="item">
+							<div class="text">
+								<div>
+									2.进入编辑页面后，需要返回商城后台并复制下图1中的
+									Token、EncodingAESKey、服务器地址到下图2中对应的位置中，点击保存。直到提示配置成功
+								</div>
+							</div>
+							<Alert show-icon>这里的Token、EncodingAESKey、服务器地址将会在其他事件(如3.客户配置)接收器中使用到。</Alert>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-2-5-2.png`" alt="" />
+								<img :src="`${baseURL}/statics/system/work-2-5-3.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+			</Timeline>
+		</TabPane>
+		<TabPane label="3.客户配置" name="3">
+			<Timeline>
+				<TimelineItem>
+					<div class="dot" slot="dot">1</div>
+					<div class="title">获取Secret</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									登录企业微信管理后台：<a
+										href="https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu"
+										target="_blank"
+										rel="noopener noreferrer">https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu</a>
+								</div>
+								<div>位置：客户与上下游 → 客户联系 → 客户</div>
+								<div>
+									操作：点击“API”，首先需要绑定微信开发者ID，然后点击Secret一栏的查看按钮并返回企微客户端进行复制
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-3-1-1.png`" alt="" />
+								<img :src="`${baseURL}/statics/system/work-3-1-2.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">2</div>
+					<div class="title">商城后台填写Secret</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									将复制的secret填写到商城后台端的 企业微信客户配置 → Secret
+									中，如下图
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-3-2-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">3</div>
+					<div class="title">打开接收事件服务器并编辑</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>1.位置：客户与上下游 → 客户联系 → 客户</div>
+								<div>
+									操作：点击编辑进入配置页面（截图为已经配置后），需要当前登录的管理员在手机上确认进入编辑页面
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-3-3-1.png`" alt="" />
+							</div>
+						</div>
+						<div class="item">
+							<div class="text">
+								<div>
+									2.进入编辑页面后，需要返回商城后台并复制下图1中的Token、EncodingAESKey、服务器地址到下图2中对应的位置中，点击保存。直到提示配置成功
+								</div>
+							</div>
+							<Alert show-icon>客户事件接收的配置和企业微信通讯录一样，只要复制出刚配置的企业微信通讯录的配置，填入当前客户接受事件服务器中就可以</Alert>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-3-3-2.png`" alt="" />
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-3-3-3.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+			</Timeline>
+		</TabPane>
+		<TabPane label="4.自建应用设置" name="4">
+			<Timeline>
+				<TimelineItem>
+					<div class="dot" slot="dot">1</div>
+					<div class="title">获取Secret</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>
+									登录企业微信管理后台：<a
+										href="https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu"
+										target="_blank"
+										rel="noopener noreferrer">https://work.weixin.qq.com/wework_admin/loginpage_wx?from=myhome_baidu</a>
+								</div>
+								<div>位置：应用管理 → 应用 → 自建</div>
+								<div>
+									操作：进入创建应用页面，上传应用LOGO、设置应用名称、设置应用介绍、设置可见部门，然后点击创建应用进行创建
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-4-1-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">2</div>
+					<div class="title">网页授权及JS-SDK</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>位置：刚创建的应用界面 → 网页授权及JS-SDK</div>
+								<div>
+									操作1：把自己的域名填写在下图两个输入框中，格式例如：mall.tzyqkj.com
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-4-2-1.png`" alt="" />
+							</div>
+						</div>
+						<div class="item">
+							<div class="text">
+								操作2：点击“申请校验域名”下载文件上传到服务器根目录下的public里。使用域名加文件名称需要能访问到此文件就算
+								成功，最后点击【确定】提交可信域名配置
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-4-2-2.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">3</div>
+					<div class="title">企业微信授权登录</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>位置：刚创建的应用界面 → 企业微信授权登录</div>
+								<div>
+									操作：点击“设置授权回调域”填写入自己的域名(例如：mall.tzyqkj.com)，然后点击“保存”
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-4-3-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">4</div>
+					<div class="title">配置到聊天工具栏</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>1.位置：刚创建的应用界面 → 配置到聊天工具栏</div>
+								<div>2.操作：点击“配置页面”；</div>
+								<div>
+									页面内容：选择“自定义”，填写连接：https://自己的域名/pages/work/userInfo/index
+								</div>
+								<div>配置到： 选择“客户联系聊天工具栏“</div>
+								<div>
+									保存此配置，就可以在企业微信和客户聊天或者群聊中看到刚才配置的侧边栏
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-4-4-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">5</div>
+					<div class="title">企业可信IP</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>位置：刚创建的应用界面 → 企业可信IP</div>
+								<div>目前通讯录权限由自建应用获取，一定需要配置这里</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-4-5-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+				<TimelineItem>
+					<div class="dot" slot="dot">6</div>
+					<div class="title">调用应用</div>
+					<div class="content">
+						<div class="item">
+							<div class="text">
+								<div>位置：客户上下游 → 客户联系 → 客户 → API → 可调用应用</div>
+								<div>
+									操作：勾选上刚才创建的自定义应用，点击确定就可以使用该应用
+								</div>
+							</div>
+							<div class="image">
+								<img :src="`${baseURL}/statics/system/work-4-6-1.png`" alt="" />
+							</div>
+						</div>
+					</div>
+				</TimelineItem>
+			</Timeline>
+		</TabPane>
+	</Tabs>
 </template>
 
 <script>
-import Setting from '@/setting';
-export default {
-  name: 'work',
-  data() {
-    return {
-      baseURL: Setting.apiBaseURL.replace(/adminapi/, ''),
-    };
-  },
-};
+	import Setting from '@/setting';
+	export default {
+		name: 'work',
+		data() {
+			return {
+				baseURL: Setting.apiBaseURL.replace(/adminapi/, ''),
+			};
+		},
+	};
 </script>
 
 <style lang="stylus" scoped>
-/deep/.ivu-tabs-nav-wrap {
-  border-radius: 5px;
-}
+	/deep/.ivu-tabs-nav-wrap {
+		border-radius: 5px;
+	}
 
-/deep/.ivu-tabs-bar {
-  border-bottom: 0;
-}
+	/deep/.ivu-tabs-bar {
+		border-bottom: 0;
+	}
 
-/deep/.ivu-timeline-item-content {
-  padding-bottom: 40px !important;
+	/deep/.ivu-timeline-item-content {
+		padding-bottom: 40px !important;
 
-  .title {
-    font-weight: 600;
-  }
-}
+		.title {
+			font-weight: 600;
+		}
+	}
 
-.ivu-tabs {
-  padding: 0 !important;
-}
+	.ivu-tabs {
+		padding: 0 !important;
+	}
 
-.ivu-tabs>>>.ivu-tabs-tab:nth-child(2)::before {
-  display: none;
-}
-</style>
+	.ivu-tabs>>>.ivu-tabs-tab:nth-child(2)::before {
+		display: none;
+	}
+</style>

src/pages/account/login/index.vue

@@ -1,791 +1,835 @@
 <template>
-<!-- 登录 -->
-    <div class="page-account">
-        <div class="container" :class="[fullWidth > 768 ? 'containerSamll' : 'containerBig']">
-            <swiper :options="swiperOption" class="swiperPross" v-if="fullWidth > 768">
-                <swiper-slide class="swiperPic" v-for="(item, index) in swiperList" :key="index">
-                    <img :src="item" style="object-fit: fill;">
-                </swiper-slide>
-                <div class="swiper-pagination" slot="pagination"></div>
-            </swiper>
-            <div class="index_from page-account-container">
-                <div class="page-account-top ">
-                    <div class="page-account-top-logo">
-                        <img :src="login_logo" alt="logo">
-                    </div>
-                </div>
-                <div v-if="this.resetStatus" class="login_tab flex">
-                    <div class="login_tab_item" v-for="(item, index) in loginTab" :key="index"
-                        :class="active == index ? 'active_tab' : ''" @click="loginTabSwitch(index)">{{ item }}</div>
-                </div>
-                <Form ref="formInline" :model="formInline" :rules="ruleInline" @keyup.enter="handleSubmit('formInline')"
-                    v-show="!active && resetStatus">
-                    <FormItem prop="username">
-                        <Input type="text" v-model="formInline.username" prefix="ios-contact-outline"
-                            placeholder="请输入用户名" size="large" />
-                    </FormItem>
-                    <FormItem prop="password">
-                        <Input type="password" v-model="formInline.password" prefix="ios-lock-outline"
-                            placeholder="请输入密码" size="large" />
-                    </FormItem>
-                    <!-- <FormItem prop="code">
+	<!-- 登录 -->
+	<div class="page-account">
+		<div class="container" :class="[fullWidth > 768 ? 'containerSamll' : 'containerBig']">
+			<swiper :options="swiperOption" class="swiperPross" v-if="fullWidth > 768">
+				<swiper-slide class="swiperPic" v-for="(item, index) in swiperList" :key="index">
+					<img :src="item" style="object-fit: fill;">
+				</swiper-slide>
+				<div class="swiper-pagination" slot="pagination"></div>
+			</swiper>
+			<div class="index_from page-account-container">
+				<div class="page-account-top ">
+					<div class="page-account-top-logo">
+						<img :src="login_logo" alt="logo">
+					</div>
+				</div>
+				<div v-if="this.resetStatus" class="login_tab flex">
+					<div class="login_tab_item" v-for="(item, index) in loginTab" :key="index"
+						:class="active == index ? 'active_tab' : ''" @click="loginTabSwitch(index)">{{ item }}</div>
+				</div>
+				<Form ref="formInline" :model="formInline" :rules="ruleInline" @keyup.enter="handleSubmit('formInline')"
+					v-show="!active && resetStatus">
+					<FormItem prop="username">
+						<Input type="text" v-model="formInline.username" prefix="ios-contact-outline"
+							placeholder="请输入用户名" size="large" />
+					</FormItem>
+					<FormItem prop="password">
+						<Input type="password" v-model="formInline.password" prefix="ios-lock-outline"
+							placeholder="请输入密码" size="large" />
+					</FormItem>
+					<!-- <FormItem prop="code">
                         <div class="code">
                             <Input type="text" v-model="formInline.code" prefix="ios-keypad-outline"
                                 placeholder="请输入验证码" size="large" />
                             <img :src="imgcode" class="pictrue" @click="captchas" />
                         </div>
                     </FormItem> -->
-                    <FormItem>
-                        <Button type="primary" long size="large" @click="handleSubmit('formInline')" class="btn">{{
+					<FormItem>
+						<Button type="primary" long size="large" @click="handleSubmit('formInline')" class="btn">{{
                                 $t('page.login.submit')
                         }}
-                        </Button>
-                    </FormItem>
-                    <div class="primary" @click="resetUpwd()" v-show="resetStatus">忘记密码</div>
-                </Form>
-                <Form ref="formInline" :model="formInline" :rules="ruleInline" @keyup.enter="handleSubmit('formInline')"
-                    v-show="active && resetStatus">
-                    <FormItem prop="phone">
-                        <Input style="width:100%" maxlength="11" type="text"  v-model="formInline.phone" prefix="ios-contact-outline" placeholder="请输入手机号"
-                            size="large" />
-                    </FormItem>
-                    <FormItem prop="code">
-                        <div class="code">
-                            <Input type="text" v-model="formInline.code" prefix="ios-keypad-outline"
-                                placeholder="请输入验证码" size="large" class="captch_input" />
-                            <Button class="send_code" :disabled="disabled" size="large" @click="code">{{ text
+						</Button>
+					</FormItem>
+					<div class="primary" @click="resetUpwd()" v-show="resetStatus">忘记密码</div>
+				</Form>
+				<Form ref="formInline" :model="formInline" :rules="ruleInline" @keyup.enter="handleSubmit('formInline')"
+					v-show="active && resetStatus">
+					<FormItem prop="phone">
+						<Input style="width:100%" maxlength="11" type="text" v-model="formInline.phone"
+							prefix="ios-contact-outline" placeholder="请输入手机号" size="large" />
+					</FormItem>
+					<FormItem prop="code">
+						<div class="code">
+							<Input type="text" v-model="formInline.code" prefix="ios-keypad-outline"
+								placeholder="请输入验证码" size="large" class="captch_input" />
+							<Button class="send_code" :disabled="disabled" size="large" @click="code">{{ text
                             }}</Button>
-                        </div>
-                    </FormItem>
-                    <FormItem>
-                        <Button type="primary" long size="large" @click="handleSubmit('formInline')" class="btn">{{
+						</div>
+					</FormItem>
+					<FormItem>
+						<Button type="primary" long size="large" @click="handleSubmit('formInline')" class="btn">{{
                                 $t('page.login.submit')
                         }}
-                        </Button>
-                    </FormItem>
-                </Form>
-                <Form ref="formInline" :model="formInline" :rules="ruleInline" @keyup.enter="handleSubmit('formInline')"
-                    v-show="!resetStatus">
-                    <FormItem>
-                        <Input type="text" maxlength="11" v-model="formInline.phone" prefix="ios-contact-outline" placeholder="请输入手机号"
-                            size="large" />
-                    </FormItem>
-                    <FormItem prop="code">
-                        <div class="code">
-                            <Input type="text" v-model="formInline.code" prefix="ios-keypad-outline"
-                                placeholder="请输入验证码" size="large" class="captch_input" />
-                            <Button class="send_code" :disabled="disabled" size="large" @click="code">{{ text
+						</Button>
+					</FormItem>
+				</Form>
+				<Form ref="formInline" :model="formInline" :rules="ruleInline" @keyup.enter="handleSubmit('formInline')"
+					v-show="!resetStatus">
+					<FormItem>
+						<Input type="text" maxlength="11" v-model="formInline.phone" prefix="ios-contact-outline"
+							placeholder="请输入手机号" size="large" />
+					</FormItem>
+					<FormItem prop="code">
+						<div class="code">
+							<Input type="text" v-model="formInline.code" prefix="ios-keypad-outline"
+								placeholder="请输入验证码" size="large" class="captch_input" />
+							<Button class="send_code" :disabled="disabled" size="large" @click="code">{{ text
                             }}</Button>
-                        </div>
-                    </FormItem>
-                    <FormItem>
-                        <Input type="text" v-model="formInline.new_pwd" prefix="ios-contact-outline" placeholder="请输入密码"
-                            size="large" />
-                    </FormItem>
-                    <FormItem>
-                        <Button type="primary" long size="large" @click="resetPwd('formInline')" class="btn">提交</Button>
-                    </FormItem>
-                    <div class="primary" @click="resetUpwd()" v-show="!resetStatus">返回登录</div>
-                </Form>
-            </div>
-        </div>
-        <!-- <vcode :show="isShow" @success="onSuccess()" @close="onClose()" successText="行为验证通过" /> -->
-        <Verify
-            @success="success"
-            captchaType="blockPuzzle"
-            :imgSize="{ width: '330px', height: '155px' }"
-            ref="verify"
-        ></Verify>
-      <div class="footer">
-        <div class="pull-right" v-if="copyright">{{copyright}}</div>
-        <div class="pull-right" v-else>Copyright ©2014-2023 <a class="infoUrl" href="https://www.crmeb.com" target="_blank">{{version}}</a></div>
-      </div>
-        <!--  :imgs="[Img1, Img2]" 支持自定义背景图片，详见 https://juejin.cn/post/6978777429447966757 -->
-    </div>
+						</div>
+					</FormItem>
+					<FormItem>
+						<Input type="text" v-model="formInline.new_pwd" prefix="ios-contact-outline" placeholder="请输入密码"
+							size="large" />
+					</FormItem>
+					<FormItem>
+						<Button type="primary" long size="large" @click="resetPwd('formInline')" class="btn">提交</Button>
+					</FormItem>
+					<div class="primary" @click="resetUpwd()" v-show="!resetStatus">返回登录</div>
+				</Form>
+			</div>
+		</div>
+		<!-- <vcode :show="isShow" @success="onSuccess()" @close="onClose()" successText="行为验证通过" /> -->
+		<Verify @success="success" captchaType="blockPuzzle" :imgSize="{ width: '330px', height: '155px' }"
+			ref="verify"></Verify>
+		<div class="footer">
+			<div class="pull-right" v-if="copyright">{{copyright}}</div>
+			<!-- <div class="pull-right" v-else>Copyright ©2014-2023 <a class="infoUrl" href="https://www.crmeb.com" target="_blank">{{version}}</a></div> -->
+		</div>
+		<!--  :imgs="[Img1, Img2]" 支持自定义背景图片，详见 https://juejin.cn/post/6978777429447966757 -->
+	</div>
 </template>
 <script>
-import { AccountLogin, loginInfoApi, mobilLogin, resetPassword, copyrightInfoApi, isCaptcha} from '@/api/account';
-import { getHeaderName, getHeaderSider, getMenuSider, getSiderSubmenu } from '@/libs/system';
-import mixins from '../mixins';
-import Setting from '@/setting';
-import util from '@/libs/util';
-import axios from 'axios';
-// import Vcode from "vue-puzzle-vcode";
-import Verify from "@/components/verifition/Verify";
-export default {
-    mixins: [mixins],
-    components: {
-        Verify,
-        // Vcode
-    },
-    data() {
-        return {
-            fullWidth: document.documentElement.clientWidth,
-            swiperOption: {
-                pagination: '.swiper-pagination',
-                autoplay: true
-            },
-            isShow: false, // 验证码模态框是否出现
-            loading: false,
-            autoLogin: true,
-            imgcode: '',
-            iscaptcha: false,
-            formInline: {
-                username: '',
-                password: '',
-                phone: '',
-                // code: '',
-                new_pwd: ''
-            },
-            ruleInline: {
-                username: [
-                    { required: true, message: '请输入用户名', trigger: 'blur' }
-                ],
-                password: [
-                    { required: true, message: '请输入密码', trigger: 'blur' }
-                ],
-                // code: [
-                //     { required: true, message: '请输入验证码', trigger: 'blur' }
-                // ],
-                phone: [
-                    { required: true, message: '请填写手机号码', trigger: 'change' },
-                    { pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "change" }
-                ],
-
-            },
-            errorNum: 0,
-            login_logo: '',
-            swiperList: [],
-            defaultSwiperList: require('@/assets/images/sw.jpg'),
-            loginTab: ['账号登录', '短信登录'],
-            active: 0,
-            isSms: false,
-            disabled: false,
-            text: "获取验证码",
-            resetStatus: true,
-            copyright: '',
-            version:''
-        }
-    },
-    created() {
-        var _this = this;
-        top != window && (top.location.href = location.href);
-        document.onkeydown = function (e) {
-            if (_this.$route.name === 'login') {
-                let key = window.event.keyCode;
-                if (key === 13) {
-                    _this.handleSubmit('formInline');
-                }
-            }
-        };
-        window.addEventListener('resize', this.handleResize)
-    },
-    watch: {
-        fullWidth(val) {
-            // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
-            if (!this.timer) {
-                // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
-                this.screenWidth = val
-                this.timer = true
-                let that = this
-                setTimeout(function () {
-                    // 打印screenWidth变化的值
-                    that.timer = false
-                }, 400)
-            }
-        },
-        $route(n) {
-            this.captchas();
-        }
-    },
-    mounted: function () {
-        this.$nextTick(() => {
-            if (this.screenWidth < 768) {
-                document.getElementsByTagName('canvas')[0] ? document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg') : '';
-            } else {
-                document.getElementsByTagName('canvas')[0] ? document.getElementsByTagName('canvas')[0].className = 'index_bg' : '';
-            }
-            this.swiperData();
-        });
-        this.captchas();
-        this.getCopyright();
-    },
-    methods: {
-        //切换登录方式
-        loginTabSwitch(index) {
-            this.active = index;
-            this.formInline.code = "";
-        },
-        //发送验证码
-        
-        sendCode(params) {
-            if(this.disabled) {
-                this.closeModel(params);
-            }
-            // if (this.disabled) return;
-            this.disabled = true;
-            let n = 60;
-            this.text = "剩余 " + n + "s";
-            const run = setInterval(() => {
-                n = n - 1;
-                if (n < 0) {
-                    clearInterval(run);
-                }
-                this.text = "剩余 " + n + "s";
-                if (this.text < "剩余 " + 0 + "s") {
-                    this.disabled = false;
-                    this.text = "重新获取";
-                }
-            }, 1000);
-        },
-        code() {
-            this.isSms = true;
-            if (!this.formInline.phone) return this.$Message.error('请填写手机号码');
-            if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.formInline.phone)) return this.$Message.error('请输入正确的手机号码');
-            this.$refs.verify.show()    
-
-        },
-        //忘记密码
-        resetUpwd() {
-            if (this.resetStatus) {
-                this.$set(this, 'loginTab', ['忘记密码']);
-                this.resetStatus = false;
-            } else {
-                this.$set(this, 'loginTab', ['账号登录', '短信登录']);
-                this.resetStatus = true;
-                this.active = 0;
-            }
-            this.$refs['formInline'].resetFields();
-        },
-        swiperData() {
-            loginInfoApi().then(res => {
-                let data = res.data || {};
-                this.login_logo = data.login_logo ? data.login_logo : require('@/assets/images/logo.png');
-                this.swiperList = data.slide.length ? data.slide : [this.defaultSwiperList];
-                // this.swiperList = data.slide.length ? data.slide : [{ slide: this.defaultSwiperList }];
-                this.$cache.local.setJSON( 'file_size_max',data.upload_file_size_max);
-            }).catch(res => {
-                this.$Message.error(res.msg)
-            })
-        },
-        getChilden(data) {
-            if(data.length && data[0].children) {
-                return this.getChilden(data[0].children)
-            }
-            return data[0].path
-        },
-        getCopyright() {
-          copyrightInfoApi().then(res => {
-            let data = res.data;
-            this.copyright = data.copyrightContext;
-            this.version = data.version;
-          }).catch(res => {
-            this.$Message.error(res.msg)
-          })
-        },
-        // 关闭模态框
-        closeModel(params) {    
-            if(this.resetStatus == false) {
-                if (this.formInline.phone == "") return this.$Message.error("手机号不能为空");
-                if (this.formInline.new_pwd == "") return this.$Message.error("新密码不能为空");
-                resetPassword({
-                    phone: this.formInline.phone,
-                    code: this.formInline.code,
-                    new_pwd: this.formInline.new_pwd,
-                    // captchaType: 'blockPuzzle',
-                    // captchaVerification: params.captchaVerification,
-                }).then(res => {
-                    this.$Message.success(res.msg);
-                    this.$set(this, 'loginTab', ['账号登录', '短信登录']);
-                    this.resetStatus = true;
-                    this.active = 0;
-                    this.$refs['formInline'].resetFields();
-                }).catch(err => {
-                    this.$Message.error(err.msg)
-                })
-            }else if (this.resetStatus == true && this.active == 0) {
-                if (this.formInline.username == "") return this.$Message.error("账号不能为空");
-                if (this.formInline.password == "") return this.$Message.error("密码不能为空");
-                let msg = this.$Message.loading({
-                    content: '登录中...',
-                    duration: 0
-                });
-                AccountLogin({
-                    account: this.formInline.username,
-                    pwd: this.formInline.password,
-                    // imgcode: this.formInline.code,
-                    captchaType: 'blockPuzzle',
-                    captchaVerification: params.captchaVerification,
-                }).then(async res => {
-                    msg();
-                    if (!res.data.unique_auth.length) return this.$Message.error('您暂无任何菜单权限');
-                    this.$store.dispatch('admin/account/setPageTitle')
-                    let expires = res.data.expires_time;
-                    // 记录用户登陆信息
-                    util.cookies.set('uuid', res.data.user_info.id, {
-                        expires: expires
-                    });
-                    util.cookies.set('token', res.data.token, {
-                        expires: expires
-                    });
-                    util.cookies.set('expires_time', res.data.expires_time, {
-                        expires: expires
-                    });
-                    const db = await this.$store.dispatch('admin/db/database', {
-                        user: true
-                    });
-                    // 保存菜单信息
-                    // db.set('menus', res.data.menus).set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info).write();
-                    db.set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info).write();
-                    util.makeMenu(Setting.roterPre, res.data.menus);
-                    const menuSider = res.data.menus;
-                    this.$store.commit('admin/menus/getmenusNav', menuSider);
-                    let headerSider = getHeaderSider(res.data.menus);
-                    this.$store.commit('admin/menu/setHeader', headerSider);
-                    let toPath = this.getChilden(res.data.menus);
-                    // 获取侧边栏菜单
-                    const headerName = getHeaderName({
-                        path: toPath,
-                        query:{},
-                        params:{},
-                    }, menuSider);
-                    const filterMenuSider = getMenuSider(menuSider, headerName);
-                    // 指定当前显示的侧边菜单
-                    this.$store.commit('admin/menu/setSider', filterMenuSider[0].children);
-                    //设置首页path
-                    this.$store.commit('admin/menus/setIndexPath', toPath);
-                    // 记录用户信息
-                    this.$store.dispatch('admin/user/set', {
-                        name: res.data.user_info.account,
-                        avatar: res.data.user_info.head_pic,
-                        access: res.data.unique_auth,
-                        logo: res.data.logo,
-                        logoSmall: res.data.logo_square,
-                        version: res.data.version,
-                        newOrderAudioLink: res.data.newOrderAudioLink
-                    });
-                    // if (this.jigsaw) this.jigsaw.reset();
-
-
-                    return this.$router.replace({ path: this.$route.query.redirect || toPath || '/' });
-                }).catch(res => {
-                    msg();
-                    let data = res === undefined ? {} : res;
-                    this.errorNum++;
-                    this.captchas();
-                    this.$Message.error(data.msg || '登录失败');
-                });
-            } else {
-                let msg = this.$Message.loading({
-                    content: '登录中...',
-                    duration: 0
-                });
-                mobilLogin({
-                    phone: this.formInline.phone,
-                    code: this.formInline.code,
-                }).then(async res => {
-                    msg();
-                    if (!res.data.unique_auth.length) return this.$Message.error('您暂无任何菜单权限');
-                    this.$store.dispatch('admin/account/setPageTitle')
-                    let expires = res.data.expires_time;
-                    // 记录用户登陆信息
-                    util.cookies.set('uuid', res.data.user_info.id, {
-                        expires: expires
-                    });
-                    util.cookies.set('token', res.data.token, {
-                        expires: expires
-                    });
-                    util.cookies.set('expires_time', res.data.expires_time, {
-                        expires: expires
-                    });
-                    const db = await this.$store.dispatch('admin/db/database', {
-                        user: true
-                    });
-                    // 保存菜单信息
-                    // db.set('menus', res.data.menus).set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info).write();
-                    db.set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info).write();
-                    util.makeMenu(Setting.roterPre, res.data.menus);
-                    const menuSider = res.data.menus;
-                    this.$store.commit('admin/menus/getmenusNav', menuSider);
-                    let headerSider = getHeaderSider(res.data.menus);
-                    this.$store.commit('admin/menu/setHeader', headerSider);
-                    let toPath = this.getChilden(res.data.menus);
-                    // 获取侧边栏菜单
-                    const headerName = getHeaderName({
-                        path: toPath,
-                        query:{},
-                        params:{},
-                    }, menuSider);
-                    const filterMenuSider = getMenuSider(menuSider, headerName);
-                    // 指定当前显示的侧边菜单
-                    this.$store.commit('admin/menu/setSider', filterMenuSider[0].children);
-                    //设置首页path
-                    this.$store.commit('admin/menus/setIndexPath', toPath);
-                    // 记录用户信息
-                    this.$store.dispatch('admin/user/set', {
-                        name: res.data.user_info.account,
-                        avatar: res.data.user_info.head_pic,
-                        access: res.data.unique_auth,
-                        logo: res.data.logo,
-                        logoSmall: res.data.logo_square,
-                        version: res.data.version,
-                        newOrderAudioLink: res.data.newOrderAudioLink
-                    });
-                    return this.$router.replace({ path: this.$route.query.redirect || toPath || '/' });
-                }).catch(res => {
-                    msg();
-                    let data = res === undefined ? {} : res;
-                    this.errorNum++;
-                    this.captchas();
-                    this.$Message.error(data.msg || '登录失败');
-                });
-            }
-        },
-        getExpiresTime(expiresTime) {
-            let nowTimeNum = Math.round(new Date() / 1000);
-            let expiresTimeNum = expiresTime - nowTimeNum;
-            return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);
-        },
-        handleResize(event) {
-            this.fullWidth = document.documentElement.clientWidth
-            if (this.fullWidth < 768) {
-                document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg');
-            } else {
-                document.getElementsByTagName('canvas')[0].className = 'index_bg';
-            }
-        },
-        captchas: function () {
-            this.imgcode = Setting.apiBaseURL + '/captcha_pro?' + Date.parse(new Date());
-        },
-        getLogin() {
-            if (this.formInline.username == "") return this.$Message.error("账号不能为空");
-            if (this.formInline.password == "") return this.$Message.error("密码不能为空");
-            let msg = this.$Message.loading({
-                content: '登录中...',
-                duration: 0
-            });
-            let data = {}
-            // console.log('+++++++',this.iscaptcha);
-            // if(this.iscaptcha === true) {
-            //     data= {
-            //         account: this.formInline.username,
-            //         pwd: this.formInline.password,
-            //         captchaType: 'blockPuzzle',
-            //         captchaVerification: params.captchaVerification,
-            //     }
-            // } else {
-                data= {
-                    account: this.formInline.username,
-                    pwd: this.formInline.password,
-                    captchaType: '',
-                    captchaVerification: '',
-                }
-            // }
-            // console.log(data,'-------****');
-            AccountLogin(data).then(async res => {
-                    msg();
-                    if (!res.data.unique_auth.length) return this.$Message.error('您暂无任何菜单权限');
-                    this.$store.dispatch('admin/account/setPageTitle')
-                    let expires = res.data.expires_time;
-                    // 记录用户登陆信息
-                    util.cookies.set('uuid', res.data.user_info.id, {
-                        expires: expires
-                    });
-                    util.cookies.set('token', res.data.token, {
-                        expires: expires
-                    });
-                    util.cookies.set('expires_time', res.data.expires_time, {
-                        expires: expires
-                    });
-                    const db = await this.$store.dispatch('admin/db/database', {
-                        user: true
-                    });
-                    // 保存菜单信息
-                    // db.set('menus', res.data.menus).set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info).write();
-                    db.set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info).write();
-                    util.makeMenu(Setting.roterPre, res.data.menus);
-                    const menuSider = res.data.menus;
-                    this.$store.commit('admin/menus/getmenusNav', menuSider);
-                    let headerSider = getHeaderSider(res.data.menus);
-                    this.$store.commit('admin/menu/setHeader', headerSider);
-                    let toPath = this.getChilden(res.data.menus);
-                    // 获取侧边栏菜单
-                    const headerName = getHeaderName({
-                        path: toPath,
-                        query:{},
-                        params:{},
-                    }, menuSider);
-                    const filterMenuSider = getMenuSider(menuSider, headerName);
-                    // 指定当前显示的侧边菜单
-                    this.$store.commit('admin/menu/setSider', filterMenuSider[0].children);
-                    //设置首页path
-                    this.$store.commit('admin/menus/setIndexPath', toPath);
-                    // 记录用户信息
-                    this.$store.dispatch('admin/user/set', {
-                        name: res.data.user_info.account,
-                        avatar: res.data.user_info.head_pic,
-                        access: res.data.unique_auth,
-                        logo: res.data.logo,
-                        logoSmall: res.data.logo_square,
-                        version: res.data.version,
-                        newOrderAudioLink: res.data.newOrderAudioLink
-                    });
-                    // if (this.jigsaw) this.jigsaw.reset();
-
-
-                    return this.$router.replace({ path: this.$route.query.redirect || toPath || '/' });
-                }).catch(res => {
-                msg();
-                let data = res === undefined ? {} : res;
-                this.errorNum++;
-                this.captchas();
-                this.$Message.error(data.msg || '登录失败');
-            });
-        },
-        handleSubmit(name) {
-            this.$refs[name].validate((valid) => {
-                if (valid && this.active == 0) {
-                    isCaptcha({
-                        account: this.formInline.username,
-                    }).then(res => {
-                        this.iscaptcha = res.data.is_captcha
-                        if (this.iscaptcha === true) {
-                            this.$refs.verify.show()
-                        } else {
-                            this.getLogin()
-                        }
-                    })
-                } else {
-                    this.closeModel()
-                }
-            })
-        },
-        resetPwd(name) {
-            this.$refs[name].validate((valid) => {
-                if (valid) {
-                    this.$refs.verify.show()
-                    // if (this.formInline.phone == "") return this.$Message.error("手机号不能为空");
-                    // if (this.formInline.new_pwd == "") return this.$Message.error("新密码不能为空");
-                    // resetPassword({
-                    //     phone: this.formInline.phone,
-                    //     code: this.formInline.code,
-                    //     new_pwd: this.formInline.new_pwd,
-                    //     captchaType: 'blockPuzzle',
-                    //     captchaVerification: params.captchaVerification,
-                    // }).then(res => {
-                    //     this.$Message.success(res.msg);
-                    //     this.$set(this, 'loginTab', ['账号登录', '短信登录']);
-                    //     this.resetStatus = true;
-                    //     this.active = 0;
-                    //     this.$refs['formInline'].resetFields();
-                    // }).catch(err => {
-                    //     this.$Message.error(err.msg)
-                    // })
-                }
-            })
-        },
-        success(params) {
-            if (this.isSms) {
-                let verification = Setting.apiBaseURL.replace(/adminapi/, 'api');
-                axios.get(verification + '/verify_code').then(res => {
-                    let codeData = {
-                        type: "login",
-                        phone: this.formInline.phone,
-                        key: res.data.data.key,
-                        code: '',
-                        captchaType: 'blockPuzzle',
-                        captchaVerification: params.captchaVerification,
-                    };
-                    fetch(verification + '/register/verify', {
-                        method: 'POST',
-                        headers: {
-                            "Content-Type": "application/json"
-                        },
-                        body: JSON.stringify(codeData)
-                    }
-                    ).then(response => {
-                        this.sendCode();
-                    }).catch(err => {
-                        this.$Message.error(err.msg);
-                    })
-                })
-            } else {
-                this.closeModel(params);
-                //可执行通过验证后的操作
-            }
-
-        },
-        // 用户点击遮罩层，应该关闭模态框
-        onClose() {
-            this.isShow = false;
-        },
-    },
-    beforeCreate() {
-        if (this.fullWidth < 768) {
-            document.getElementsByTagName('canvas')[0] ? document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg') : '';
-        } else {
-            document.getElementsByTagName('canvas')[0] ? document.getElementsByTagName('canvas')[0].className = 'index_bg' : '';
-        }
-    },
-    beforeDestroy: function () {
-        window.removeEventListener('resize', this.handleResize);
-        document.getElementsByTagName('canvas')[0] ? document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg') : '';
-    }
-};
+	import {
+		AccountLogin,
+		loginInfoApi,
+		mobilLogin,
+		resetPassword,
+		copyrightInfoApi,
+		isCaptcha
+	} from '@/api/account';
+	import {
+		getHeaderName,
+		getHeaderSider,
+		getMenuSider,
+		getSiderSubmenu
+	} from '@/libs/system';
+	import mixins from '../mixins';
+	import Setting from '@/setting';
+	import util from '@/libs/util';
+	import axios from 'axios';
+	// import Vcode from "vue-puzzle-vcode";
+	import Verify from "@/components/verifition/Verify";
+	export default {
+		mixins: [mixins],
+		components: {
+			Verify,
+			// Vcode
+		},
+		data() {
+			return {
+				fullWidth: document.documentElement.clientWidth,
+				swiperOption: {
+					pagination: '.swiper-pagination',
+					autoplay: true
+				},
+				isShow: false, // 验证码模态框是否出现
+				loading: false,
+				autoLogin: true,
+				imgcode: '',
+				iscaptcha: false,
+				formInline: {
+					username: '',
+					password: '',
+					phone: '',
+					// code: '',
+					new_pwd: ''
+				},
+				ruleInline: {
+					username: [{
+						required: true,
+						message: '请输入用户名',
+						trigger: 'blur'
+					}],
+					password: [{
+						required: true,
+						message: '请输入密码',
+						trigger: 'blur'
+					}],
+					// code: [
+					//     { required: true, message: '请输入验证码', trigger: 'blur' }
+					// ],
+					phone: [{
+							required: true,
+							message: '请填写手机号码',
+							trigger: 'change'
+						},
+						{
+							pattern: /^1[3456789]\d{9}$/,
+							message: "手机号码格式不正确",
+							trigger: "change"
+						}
+					],
+
+				},
+				errorNum: 0,
+				login_logo: '',
+				swiperList: [],
+				defaultSwiperList: require('@/assets/images/sw.jpg'),
+				loginTab: ['账号登录', '短信登录'],
+				active: 0,
+				isSms: false,
+				disabled: false,
+				text: "获取验证码",
+				resetStatus: true,
+				copyright: '',
+				version: ''
+			}
+		},
+		created() {
+			var _this = this;
+			top != window && (top.location.href = location.href);
+			document.onkeydown = function(e) {
+				if (_this.$route.name === 'login') {
+					let key = window.event.keyCode;
+					if (key === 13) {
+						_this.handleSubmit('formInline');
+					}
+				}
+			};
+			window.addEventListener('resize', this.handleResize)
+		},
+		watch: {
+			fullWidth(val) {
+				// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+				if (!this.timer) {
+					// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
+					this.screenWidth = val
+					this.timer = true
+					let that = this
+					setTimeout(function() {
+						// 打印screenWidth变化的值
+						that.timer = false
+					}, 400)
+				}
+			},
+			$route(n) {
+				this.captchas();
+			}
+		},
+		mounted: function() {
+			this.$nextTick(() => {
+				if (this.screenWidth < 768) {
+					document.getElementsByTagName('canvas')[0] ? document.getElementsByTagName('canvas')[0]
+						.removeAttribute('class', 'index_bg') : '';
+				} else {
+					document.getElementsByTagName('canvas')[0] ? document.getElementsByTagName('canvas')[0]
+						.className = 'index_bg' : '';
+				}
+				this.swiperData();
+			});
+			this.captchas();
+			this.getCopyright();
+		},
+		methods: {
+			//切换登录方式
+			loginTabSwitch(index) {
+				this.active = index;
+				this.formInline.code = "";
+			},
+			//发送验证码
+
+			sendCode(params) {
+				if (this.disabled) {
+					this.closeModel(params);
+				}
+				// if (this.disabled) return;
+				this.disabled = true;
+				let n = 60;
+				this.text = "剩余 " + n + "s";
+				const run = setInterval(() => {
+					n = n - 1;
+					if (n < 0) {
+						clearInterval(run);
+					}
+					this.text = "剩余 " + n + "s";
+					if (this.text < "剩余 " + 0 + "s") {
+						this.disabled = false;
+						this.text = "重新获取";
+					}
+				}, 1000);
+			},
+			code() {
+				this.isSms = true;
+				if (!this.formInline.phone) return this.$Message.error('请填写手机号码');
+				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.formInline.phone)) return this.$Message.error('请输入正确的手机号码');
+				this.$refs.verify.show()
+
+			},
+			//忘记密码
+			resetUpwd() {
+				if (this.resetStatus) {
+					this.$set(this, 'loginTab', ['忘记密码']);
+					this.resetStatus = false;
+				} else {
+					this.$set(this, 'loginTab', ['账号登录', '短信登录']);
+					this.resetStatus = true;
+					this.active = 0;
+				}
+				this.$refs['formInline'].resetFields();
+			},
+			swiperData() {
+				loginInfoApi().then(res => {
+					let data = res.data || {};
+					this.login_logo = data.login_logo ? data.login_logo : require('@/assets/images/logo.png');
+					this.swiperList = data.slide.length ? data.slide : [this.defaultSwiperList];
+					// this.swiperList = data.slide.length ? data.slide : [{ slide: this.defaultSwiperList }];
+					this.$cache.local.setJSON('file_size_max', data.upload_file_size_max);
+				}).catch(res => {
+					this.$Message.error(res.msg)
+				})
+			},
+			getChilden(data) {
+				if (data.length && data[0].children) {
+					return this.getChilden(data[0].children)
+				}
+				return data[0].path
+			},
+			getCopyright() {
+				copyrightInfoApi().then(res => {
+					let data = res.data;
+					this.copyright = data.copyrightContext;
+					this.version = data.version;
+				}).catch(res => {
+					this.$Message.error(res.msg)
+				})
+			},
+			// 关闭模态框
+			closeModel(params) {
+				if (this.resetStatus == false) {
+					if (this.formInline.phone == "") return this.$Message.error("手机号不能为空");
+					if (this.formInline.new_pwd == "") return this.$Message.error("新密码不能为空");
+					resetPassword({
+						phone: this.formInline.phone,
+						code: this.formInline.code,
+						new_pwd: this.formInline.new_pwd,
+						// captchaType: 'blockPuzzle',
+						// captchaVerification: params.captchaVerification,
+					}).then(res => {
+						this.$Message.success(res.msg);
+						this.$set(this, 'loginTab', ['账号登录', '短信登录']);
+						this.resetStatus = true;
+						this.active = 0;
+						this.$refs['formInline'].resetFields();
+					}).catch(err => {
+						this.$Message.error(err.msg)
+					})
+				} else if (this.resetStatus == true && this.active == 0) {
+					if (this.formInline.username == "") return this.$Message.error("账号不能为空");
+					if (this.formInline.password == "") return this.$Message.error("密码不能为空");
+					let msg = this.$Message.loading({
+						content: '登录中...',
+						duration: 0
+					});
+					AccountLogin({
+						account: this.formInline.username,
+						pwd: this.formInline.password,
+						// imgcode: this.formInline.code,
+						captchaType: 'blockPuzzle',
+						captchaVerification: params.captchaVerification,
+					}).then(async res => {
+						msg();
+						if (!res.data.unique_auth.length) return this.$Message.error('您暂无任何菜单权限');
+						this.$store.dispatch('admin/account/setPageTitle')
+						let expires = res.data.expires_time;
+						// 记录用户登陆信息
+						util.cookies.set('uuid', res.data.user_info.id, {
+							expires: expires
+						});
+						util.cookies.set('token', res.data.token, {
+							expires: expires
+						});
+						util.cookies.set('expires_time', res.data.expires_time, {
+							expires: expires
+						});
+						const db = await this.$store.dispatch('admin/db/database', {
+							user: true
+						});
+						// 保存菜单信息
+						// db.set('menus', res.data.menus).set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info).write();
+						db.set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info)
+						.write();
+						util.makeMenu(Setting.roterPre, res.data.menus);
+						const menuSider = res.data.menus;
+						this.$store.commit('admin/menus/getmenusNav', menuSider);
+						let headerSider = getHeaderSider(res.data.menus);
+						this.$store.commit('admin/menu/setHeader', headerSider);
+						let toPath = this.getChilden(res.data.menus);
+						// 获取侧边栏菜单
+						const headerName = getHeaderName({
+							path: toPath,
+							query: {},
+							params: {},
+						}, menuSider);
+						const filterMenuSider = getMenuSider(menuSider, headerName);
+						// 指定当前显示的侧边菜单
+						this.$store.commit('admin/menu/setSider', filterMenuSider[0].children);
+						//设置首页path
+						this.$store.commit('admin/menus/setIndexPath', toPath);
+						// 记录用户信息
+						this.$store.dispatch('admin/user/set', {
+							name: res.data.user_info.account,
+							avatar: res.data.user_info.head_pic,
+							access: res.data.unique_auth,
+							logo: res.data.logo,
+							logoSmall: res.data.logo_square,
+							version: res.data.version,
+							newOrderAudioLink: res.data.newOrderAudioLink
+						});
+						// if (this.jigsaw) this.jigsaw.reset();
+
+
+						return this.$router.replace({
+							path: this.$route.query.redirect || toPath || '/'
+						});
+					}).catch(res => {
+						msg();
+						let data = res === undefined ? {} : res;
+						this.errorNum++;
+						this.captchas();
+						this.$Message.error(data.msg || '登录失败');
+					});
+				} else {
+					let msg = this.$Message.loading({
+						content: '登录中...',
+						duration: 0
+					});
+					mobilLogin({
+						phone: this.formInline.phone,
+						code: this.formInline.code,
+					}).then(async res => {
+						msg();
+						if (!res.data.unique_auth.length) return this.$Message.error('您暂无任何菜单权限');
+						this.$store.dispatch('admin/account/setPageTitle')
+						let expires = res.data.expires_time;
+						// 记录用户登陆信息
+						util.cookies.set('uuid', res.data.user_info.id, {
+							expires: expires
+						});
+						util.cookies.set('token', res.data.token, {
+							expires: expires
+						});
+						util.cookies.set('expires_time', res.data.expires_time, {
+							expires: expires
+						});
+						const db = await this.$store.dispatch('admin/db/database', {
+							user: true
+						});
+						// 保存菜单信息
+						// db.set('menus', res.data.menus).set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info).write();
+						db.set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info)
+						.write();
+						util.makeMenu(Setting.roterPre, res.data.menus);
+						const menuSider = res.data.menus;
+						this.$store.commit('admin/menus/getmenusNav', menuSider);
+						let headerSider = getHeaderSider(res.data.menus);
+						this.$store.commit('admin/menu/setHeader', headerSider);
+						let toPath = this.getChilden(res.data.menus);
+						// 获取侧边栏菜单
+						const headerName = getHeaderName({
+							path: toPath,
+							query: {},
+							params: {},
+						}, menuSider);
+						const filterMenuSider = getMenuSider(menuSider, headerName);
+						// 指定当前显示的侧边菜单
+						this.$store.commit('admin/menu/setSider', filterMenuSider[0].children);
+						//设置首页path
+						this.$store.commit('admin/menus/setIndexPath', toPath);
+						// 记录用户信息
+						this.$store.dispatch('admin/user/set', {
+							name: res.data.user_info.account,
+							avatar: res.data.user_info.head_pic,
+							access: res.data.unique_auth,
+							logo: res.data.logo,
+							logoSmall: res.data.logo_square,
+							version: res.data.version,
+							newOrderAudioLink: res.data.newOrderAudioLink
+						});
+						return this.$router.replace({
+							path: this.$route.query.redirect || toPath || '/'
+						});
+					}).catch(res => {
+						msg();
+						let data = res === undefined ? {} : res;
+						this.errorNum++;
+						this.captchas();
+						this.$Message.error(data.msg || '登录失败');
+					});
+				}
+			},
+			getExpiresTime(expiresTime) {
+				let nowTimeNum = Math.round(new Date() / 1000);
+				let expiresTimeNum = expiresTime - nowTimeNum;
+				return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);
+			},
+			handleResize(event) {
+				this.fullWidth = document.documentElement.clientWidth
+				if (this.fullWidth < 768) {
+					document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg');
+				} else {
+					document.getElementsByTagName('canvas')[0].className = 'index_bg';
+				}
+			},
+			captchas: function() {
+				this.imgcode = Setting.apiBaseURL + '/captcha_pro?' + Date.parse(new Date());
+			},
+			getLogin() {
+				if (this.formInline.username == "") return this.$Message.error("账号不能为空");
+				if (this.formInline.password == "") return this.$Message.error("密码不能为空");
+				let msg = this.$Message.loading({
+					content: '登录中...',
+					duration: 0
+				});
+				let data = {}
+				// console.log('+++++++',this.iscaptcha);
+				// if(this.iscaptcha === true) {
+				//     data= {
+				//         account: this.formInline.username,
+				//         pwd: this.formInline.password,
+				//         captchaType: 'blockPuzzle',
+				//         captchaVerification: params.captchaVerification,
+				//     }
+				// } else {
+				data = {
+					account: this.formInline.username,
+					pwd: this.formInline.password,
+					captchaType: '',
+					captchaVerification: '',
+				}
+				// }
+				// console.log(data,'-------****');
+				AccountLogin(data).then(async res => {
+					msg();
+					if (!res.data.unique_auth.length) return this.$Message.error('您暂无任何菜单权限');
+					this.$store.dispatch('admin/account/setPageTitle')
+					let expires = res.data.expires_time;
+					// 记录用户登陆信息
+					util.cookies.set('uuid', res.data.user_info.id, {
+						expires: expires
+					});
+					util.cookies.set('token', res.data.token, {
+						expires: expires
+					});
+					util.cookies.set('expires_time', res.data.expires_time, {
+						expires: expires
+					});
+					const db = await this.$store.dispatch('admin/db/database', {
+						user: true
+					});
+					// 保存菜单信息
+					// db.set('menus', res.data.menus).set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info).write();
+					db.set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info).write();
+					util.makeMenu(Setting.roterPre, res.data.menus);
+					const menuSider = res.data.menus;
+					this.$store.commit('admin/menus/getmenusNav', menuSider);
+					let headerSider = getHeaderSider(res.data.menus);
+					this.$store.commit('admin/menu/setHeader', headerSider);
+					let toPath = this.getChilden(res.data.menus);
+					// 获取侧边栏菜单
+					const headerName = getHeaderName({
+						path: toPath,
+						query: {},
+						params: {},
+					}, menuSider);
+					const filterMenuSider = getMenuSider(menuSider, headerName);
+					// 指定当前显示的侧边菜单
+					this.$store.commit('admin/menu/setSider', filterMenuSider[0].children);
+					//设置首页path
+					this.$store.commit('admin/menus/setIndexPath', toPath);
+					// 记录用户信息
+					this.$store.dispatch('admin/user/set', {
+						name: res.data.user_info.account,
+						avatar: res.data.user_info.head_pic,
+						access: res.data.unique_auth,
+						logo: res.data.logo,
+						logoSmall: res.data.logo_square,
+						version: res.data.version,
+						newOrderAudioLink: res.data.newOrderAudioLink
+					});
+					// if (this.jigsaw) this.jigsaw.reset();
+
+
+					return this.$router.replace({
+						path: this.$route.query.redirect || toPath || '/'
+					});
+				}).catch(res => {
+					msg();
+					let data = res === undefined ? {} : res;
+					this.errorNum++;
+					this.captchas();
+					this.$Message.error(data.msg || '登录失败');
+				});
+			},
+			handleSubmit(name) {
+				this.$refs[name].validate((valid) => {
+					if (valid && this.active == 0) {
+						isCaptcha({
+							account: this.formInline.username,
+						}).then(res => {
+							this.iscaptcha = res.data.is_captcha
+							if (this.iscaptcha === true) {
+								this.$refs.verify.show()
+							} else {
+								this.getLogin()
+							}
+						})
+					} else {
+						this.closeModel()
+					}
+				})
+			},
+			resetPwd(name) {
+				this.$refs[name].validate((valid) => {
+					if (valid) {
+						this.$refs.verify.show()
+						// if (this.formInline.phone == "") return this.$Message.error("手机号不能为空");
+						// if (this.formInline.new_pwd == "") return this.$Message.error("新密码不能为空");
+						// resetPassword({
+						//     phone: this.formInline.phone,
+						//     code: this.formInline.code,
+						//     new_pwd: this.formInline.new_pwd,
+						//     captchaType: 'blockPuzzle',
+						//     captchaVerification: params.captchaVerification,
+						// }).then(res => {
+						//     this.$Message.success(res.msg);
+						//     this.$set(this, 'loginTab', ['账号登录', '短信登录']);
+						//     this.resetStatus = true;
+						//     this.active = 0;
+						//     this.$refs['formInline'].resetFields();
+						// }).catch(err => {
+						//     this.$Message.error(err.msg)
+						// })
+					}
+				})
+			},
+			success(params) {
+				if (this.isSms) {
+					let verification = Setting.apiBaseURL.replace(/adminapi/, 'api');
+					axios.get(verification + '/verify_code').then(res => {
+						let codeData = {
+							type: "login",
+							phone: this.formInline.phone,
+							key: res.data.data.key,
+							code: '',
+							captchaType: 'blockPuzzle',
+							captchaVerification: params.captchaVerification,
+						};
+						fetch(verification + '/register/verify', {
+							method: 'POST',
+							headers: {
+								"Content-Type": "application/json"
+							},
+							body: JSON.stringify(codeData)
+						}).then(response => {
+							this.sendCode();
+						}).catch(err => {
+							this.$Message.error(err.msg);
+						})
+					})
+				} else {
+					this.closeModel(params);
+					//可执行通过验证后的操作
+				}
+
+			},
+			// 用户点击遮罩层，应该关闭模态框
+			onClose() {
+				this.isShow = false;
+			},
+		},
+		beforeCreate() {
+			if (this.fullWidth < 768) {
+				document.getElementsByTagName('canvas')[0] ? document.getElementsByTagName('canvas')[0].removeAttribute(
+					'class', 'index_bg') : '';
+			} else {
+				document.getElementsByTagName('canvas')[0] ? document.getElementsByTagName('canvas')[0].className =
+					'index_bg' : '';
+			}
+		},
+		beforeDestroy: function() {
+			window.removeEventListener('resize', this.handleResize);
+			document.getElementsByTagName('canvas')[0] ? document.getElementsByTagName('canvas')[0].removeAttribute(
+				'class', 'index_bg') : '';
+		}
+	};
 </script>
 <style scoped lang="stylus">
-    .page-account {
-        display: flex;
-    }
-
-    .page-account .code {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .page-account .code .pictrue {
-        height: 40px;
-        margin-left: 10px;
-    }
-
-    .swiperPross {
-        border-radius: 6px 0px 0px 6px;
-    }
-
-    .swiperPross, .swiperPic, .swiperPic img {
-        width: 510px;
-        height: 100%;
-    }
-
-    .swiperPic img {
-        width: 100%;
-        height: 100%;
-    }
-
-    .container {
-        height: 420px !important;
-        padding: 0 !important;
-        /*overflow: hidden;*/
-        border-radius: 6px;
-        z-index: 1;
-        display: flex;
-    }
-
-    .containerSamll {
-        /*width: 56% !important;*/
-        background: #fff !important;
-    }
-
-    .containerBig {
-        width: auto !important;
-        background: #f7f7f7 !important;
-    }
-
-    .index_from {
-        padding: 0 40px 0 40px;
-        box-sizing: border-box;
-    }
-
-    .page-account-top {
-        padding: 20px 0 !important;
-        box-sizing: border-box !important;
-        display: flex;
-        justify-content: center;
-    }
-
-    .page-account-container {
-        border-radius: 0px 6px 6px 0px;
-    }
-
-    .btn {
-        background: linear-gradient(90deg, rgba(25, 180, 241, 1) 0%, rgba(14, 115, 232, 1) 100%) !important;
-    }
-
-    .captchaBox {
-        width: 310px;
-    }
-
-    input {
-        display: block;
-        width: 290px;
-        line-height: 40px;
-        margin: 10px 0;
-        padding: 0 10px;
-        outline: none;
-        border: 1px solid #c8cccf;
-        border-radius: 4px;
-        color: #6a6f77;
-    }
-
-    #msg {
-        width: 100%;
-        line-height: 40px;
-        font-size: 14px;
-        text-align: center;
-    }
-
-    a:link, a:visited, a:hover, a:active {
-        margin-left: 100px;
-        color: #0366D6;
-    }
-
-    .index_from >>> .ivu-input-large
-        font-size:14px!important
-    .flex{
-        display: flex;
-    }
-    .login_tab{
-        font-size: 16px;
-        margin:0 0 20px;
-        justify-content: center;
-    }
-    .login_tab_item{
-        width:50%;
-        text-align:center;
-        padding-bottom:15px;
-        border-bottom:1px solid #eee;
-        cursor :pointer;
-    }
-    .active_tab{
-        border-bottom:2px solid #1495ED;
-        color:#1495ED;
-        font-weight:600;
-    }
-    .captch_input{
-        width:200px;
-    }
-    .send_code{
-        flex:1;
-        border:1px solid #eee;
-        cursor: pointer;
-        margin-left: 10px;
-    }
-    .primary{
-        color:#1495ED;
-        font-size:12px;
-        cursor: pointer;
-    }
-    .pull-right {
-      float: right!important;
-      .infoUrl{
-        margin 0;
-        color #515a6e !important;
-        &:hover{
-           color #1890ff!important;
-        }
-      }
-    }
-    .footer{
-      position: fixed;
-      bottom: 0;
-      width: 100%;
-      left: 0;
-      margin: 0;
-      background: rgba(255,255,255,.8);
-      border-top: 1px solid #e7eaec;
-      overflow: hidden;
-      padding: 10px 20px;
-      height: 36px;
-    }
-</style>
+	.page-account {
+		display: flex;
+	}
+
+	.page-account .code {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.page-account .code .pictrue {
+		height: 40px;
+		margin-left: 10px;
+	}
+
+	.swiperPross {
+		border-radius: 6px 0px 0px 6px;
+	}
+
+	.swiperPross,
+	.swiperPic,
+	.swiperPic img {
+		width: 510px;
+		height: 100%;
+	}
+
+	.swiperPic img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.container {
+		height: 420px !important;
+		padding: 0 !important;
+		/*overflow: hidden;*/
+		border-radius: 6px;
+		z-index: 1;
+		display: flex;
+	}
+
+	.containerSamll {
+		/*width: 56% !important;*/
+		background: #fff !important;
+	}
+
+	.containerBig {
+		width: auto !important;
+		background: #f7f7f7 !important;
+	}
+
+	.index_from {
+		padding: 0 40px 0 40px;
+		box-sizing: border-box;
+	}
+
+	.page-account-top {
+		padding: 20px 0 !important;
+		box-sizing: border-box !important;
+		display: flex;
+		justify-content: center;
+	}
+
+	.page-account-container {
+		border-radius: 0px 6px 6px 0px;
+	}
+
+	.btn {
+		background: linear-gradient(90deg, rgba(25, 180, 241, 1) 0%, rgba(14, 115, 232, 1) 100%) !important;
+	}
+
+	.captchaBox {
+		width: 310px;
+	}
+
+	input {
+		display: block;
+		width: 290px;
+		line-height: 40px;
+		margin: 10px 0;
+		padding: 0 10px;
+		outline: none;
+		border: 1px solid #c8cccf;
+		border-radius: 4px;
+		color: #6a6f77;
+	}
+
+	#msg {
+		width: 100%;
+		line-height: 40px;
+		font-size: 14px;
+		text-align: center;
+	}
+
+	a:link,
+	a:visited,
+	a:hover,
+	a:active {
+		margin-left: 100px;
+		color: #0366D6;
+	}
+
+	.index_from>>>.ivu-input-large font-size:14px !important .flex {
+		display: flex;
+	}
+
+	.login_tab {
+		font-size: 16px;
+		margin: 0 0 20px;
+		justify-content: center;
+	}
+
+	.login_tab_item {
+		width: 50%;
+		text-align: center;
+		padding-bottom: 15px;
+		border-bottom: 1px solid #eee;
+		cursor: pointer;
+	}
+
+	.active_tab {
+		border-bottom: 2px solid #1495ED;
+		color: #1495ED;
+		font-weight: 600;
+	}
+
+	.captch_input {
+		width: 200px;
+	}
+
+	.send_code {
+		flex: 1;
+		border: 1px solid #eee;
+		cursor: pointer;
+		margin-left: 10px;
+	}
+
+	.primary {
+		color: #1495ED;
+		font-size: 12px;
+		cursor: pointer;
+	}
+
+	.pull-right {
+		float: right !important;
+
+		.infoUrl {
+			margin 0;
+			color #515a6e !important;
+
+			&:hover {
+				color #1890ff !important;
+			}
+		}
+	}
+
+	.footer {
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+		left: 0;
+		margin: 0;
+		background: rgba(255, 255, 255, .8);
+		border-top: 1px solid #e7eaec;
+		overflow: hidden;
+		padding: 10px 20px;
+		height: 36px;
+	}
+</style>

src/pages/app/wechat/card/index.vue

@@ -1,45 +1,51 @@
 <template>
-  <!-- 微信会员卡卷 -->
-  <div>
-    <Card :bordered="false" dis-hover class="ivu-mt flexs">
-      <Row :gutter="24">
-        <Col :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
-          <div class="card_box">
-            <div class="item_box">
-              <img src="../../../../assets/images/cardtopbar.png" >
-              <div v-if="colorList.length && formValidate.selet == 1" class="card" :style="{background: `url(${pic})`, backgroundColor: `${colors}`}">
-                <div class="top">
-                  <div class="user">
-                    <img :src="formValidate.logo_url" alt="">
-                    <div class="info_box">
-                      <div class="info">{{formValidate.brand_name}}</div>
-                      <div class="info_tit">{{formValidate.title}}</div>
-                    </div>
-                  </div>
-                  <img src="../../../../assets/images/qr.png" >
-                </div>
-                <div class="bottom">
-                  <div>0268 8888 8888</div>
-                  <div><Icon class="fz" type="ios-information-circle-outline" /></div>
-                </div>
-              </div>
-              <div v-if="formValidate.selet == 0 && colorList.length" class="card" :style="{'background-color': colors || `${colorList[0].value}`}">
-                <div class="top">
-                  <div class="user">
-                    <img :src="formValidate.logo_url" alt="">
-                    <div class="info_box">
-                      <div class="info">{{formValidate.brand_name}}</div>
-                      <div class="info_tit">{{formValidate.title}}</div>
-                    </div>
-                  </div>
-                  <img src="../../../../assets/images/qr.png" >
-                </div>
-                <div class="bottom">
-                  <div>0268 8888 8888</div>
-                  <div><Icon class="fz" type="ios-information-circle-outline" /></div>
-                </div>
-              </div>
-              <!-- <div class="legal">
+	<!-- 微信会员卡卷 -->
+	<div>
+		<Card :bordered="false" dis-hover class="ivu-mt flexs">
+			<Row :gutter="24">
+				<Col :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
+				<div class="card_box">
+					<div class="item_box">
+						<img src="../../../../assets/images/cardtopbar.png">
+						<div v-if="colorList.length && formValidate.selet == 1" class="card"
+							:style="{background: `url(${pic})`, backgroundColor: `${colors}`}">
+							<div class="top">
+								<div class="user">
+									<img :src="formValidate.logo_url" alt="">
+									<div class="info_box">
+										<div class="info">{{formValidate.brand_name}}</div>
+										<div class="info_tit">{{formValidate.title}}</div>
+									</div>
+								</div>
+								<img src="../../../../assets/images/qr.png">
+							</div>
+							<div class="bottom">
+								<div>0268 8888 8888</div>
+								<div>
+									<Icon class="fz" type="ios-information-circle-outline" />
+								</div>
+							</div>
+						</div>
+						<div v-if="formValidate.selet == 0 && colorList.length" class="card"
+							:style="{'background-color': colors || `${colorList[0].value}`}">
+							<div class="top">
+								<div class="user">
+									<img :src="formValidate.logo_url" alt="">
+									<div class="info_box">
+										<div class="info">{{formValidate.brand_name}}</div>
+										<div class="info_tit">{{formValidate.title}}</div>
+									</div>
+								</div>
+								<img src="../../../../assets/images/qr.png">
+							</div>
+							<div class="bottom">
+								<div>0268 8888 8888</div>
+								<div>
+									<Icon class="fz" type="ios-information-circle-outline" />
+								</div>
+							</div>
+						</div>
+						<!-- <div class="legal">
                 <div class="legal_box">
                   <div class="legal_top">积分</div>
                   <div class="legal_bottom">120</div>
@@ -49,108 +55,113 @@
                   <div class="legal_bottom">查看</div>
                 </div>
               </div> -->
-              <div class="entry" v-if="!centerstatus">
-                <div class="entry_btn">{{formValidate.center_title || '快速进入'}}</div>
-                <p class="entry_tit">{{formValidate.center_sub_title || '添加提示语'}}</p>
-              </div>
-              <div class="card_link">
-                <div class="link">适用门店 <span class="you">></span></div>
-                <div class="link">公众号 <span class="you">></span></div>
-              </div>
-              <div class="custom_card">
-                <div class="custom_link" v-if="formValidate.custom_cell != ''">
-                  <div class="link" v-for="(item,index) in formValidate.custom_cell">{{item.name ||' 自定义入口(选填)'}}<span class="you"><span class="guide">{{item.tips}}</span>></span></div>
-                </div>
-                <div class="custom_link" v-else>
-                  <div class="link">自定义入口<span class="tip">(选填)</span><span class="you">></span></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </Col>
-        <Col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
-          <div class="card_content">
-            <Alert show-icon>
-              使用会员卡券功能，需要您先开通<a target='_blank' href="https://mp.weixin.qq.com/">微信公众号</a>和<a target='_blank' href="https://mp.weixin.qq.com/merchant/membercardmgr?action=overview&t=cardticket/member_card_index&token=20898185&lang=zh_CN">微信会员卡券</a>，否则无法配置和使用
-            </Alert>
-            <div class="content_box">
-              <div class="title_bar">基本信息</div>
-              <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
-                <div class="title_text">
-                  <div class="left">商户头像：</div>
-                  <div class="right logoPictrue">
-                    <div class="img-boxs acea-row row-center-wrapper" @click="logoPicTap('dan',0)">
-                      <img v-if="formValidate.logo_url" :src="formValidate.logo_url" alt="" >
-                      <Icon v-else type="ios-add" size="16" />
-                      <!--										   <div class="img_font"></div>-->
-                      <!--										   <div class="img_fonts">更换图片</div>-->
-                    </div>
-                  </div>
-                </div>
-                <div class="title_text">
-                  <div class="left">商户名称：</div>
-                  <div class="right">
-                    <FormItem label="" prop="brand_name" class="nomarb">
-                      <Input v-model="formValidate.brand_name"  maxlength="12" show-word-limit placeholder="商户名称" class="input-width" />
-                    </FormItem>
-                  </div>
-                </div>
-                <div class="title_text">
-                  <div class="left">电话：</div>
-                  <div class="right">
-                    <FormItem label="" prop="service_phone" class="nomarb">
-                      <Input v-model="formValidate.service_phone" placeholder=""  class="input-width" />
-                    </FormItem>
-                  </div>
-                </div>
-                <div class="title_text">
-                  <div class="left">卡券封面：</div>
-                  <div class="right">
-                    <RadioGroup v-model="formValidate.selet"  @on-change='color'>
-                      <Radio :label="1">
-                        <span>图片</span>
-                      </Radio>
-                      <Radio :label="0">
-                        <span>颜色</span>
-                      </Radio>
-                    </RadioGroup>
-                  </div>
-                </div>
-                <div class="selst">
-                  <div v-if="formValidate.selet === 1">
-                    <!-- <div @click="modalPicTap('dan', 0)" class="btn">上传图片</div> -->
-                    <div
-                        class="acea-row row-middle"
-                        @click="modalPicTap('dan', 0)"
-                    >
-                      <div class="pictrue pictrueTab">
-                        <img v-if="pic" v-lazy="pic" />
-                        <Icon v-else type="ios-add" size="16" />
-                      </div>
-                    </div>
-                  </div>
-                  <div v-if="formValidate.selet === 0 && colorList.length">
-                    <div class="color_input" @click="seletcolor">
-                      <div class="input_color" :style="{backgroundColor: `${colors}` || `${colorList[0].value}`}"></div>
-                      <span class="xia">﹀</span>
-                      <div class="color_box" v-if="selecolor">
-                        <div class="color_link" :style="{backgroundColor: `${item.value}`}"  v-for="(item,index) in colorList" @click.stop="dancolor(item)">
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+						<div class="entry" v-if="!centerstatus">
+							<div class="entry_btn">{{formValidate.center_title || '快速进入'}}</div>
+							<p class="entry_tit">{{formValidate.center_sub_title || '添加提示语'}}</p>
+						</div>
+						<div class="card_link">
+							<div class="link">适用门店 <span class="you">></span></div>
+							<div class="link">公众号 <span class="you">></span></div>
+						</div>
+						<div class="custom_card">
+							<div class="custom_link" v-if="formValidate.custom_cell != ''">
+								<div class="link" v-for="(item,index) in formValidate.custom_cell">
+									{{item.name ||' 自定义入口(选填)'}}<span class="you"><span
+											class="guide">{{item.tips}}</span>></span></div>
+							</div>
+							<div class="custom_link" v-else>
+								<div class="link">自定义入口<span class="tip">(选填)</span><span class="you">></span></div>
+							</div>
+						</div>
+					</div>
+				</div>
+				</Col>
+				<Col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
+				<div class="card_content">
+					<Alert show-icon>
+						使用会员卡券功能，需要您先开通<a target='_blank' href="https://mp.weixin.qq.com/">微信公众号</a>和<a target='_blank'
+							href="https://mp.weixin.qq.com/merchant/membercardmgr?action=overview&t=cardticket/member_card_index&token=20898185&lang=zh_CN">微信会员卡券</a>，否则无法配置和使用
+					</Alert>
+					<div class="content_box">
+						<div class="title_bar">基本信息</div>
+						<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
+							<div class="title_text">
+								<div class="left">商户头像：</div>
+								<div class="right logoPictrue">
+									<div class="img-boxs acea-row row-center-wrapper" @click="logoPicTap('dan',0)">
+										<img v-if="formValidate.logo_url" :src="formValidate.logo_url" alt="">
+										<Icon v-else type="ios-add" size="16" />
+										<!--										   <div class="img_font"></div>-->
+										<!--										   <div class="img_fonts">更换图片</div>-->
+									</div>
+								</div>
+							</div>
+							<div class="title_text">
+								<div class="left">商户名称：</div>
+								<div class="right">
+									<FormItem label="" prop="brand_name" class="nomarb">
+										<Input v-model="formValidate.brand_name" maxlength="12" show-word-limit
+											placeholder="商户名称" class="input-width" />
+									</FormItem>
+								</div>
+							</div>
+							<div class="title_text">
+								<div class="left">电话：</div>
+								<div class="right">
+									<FormItem label="" prop="service_phone" class="nomarb">
+										<Input v-model="formValidate.service_phone" placeholder=""
+											class="input-width" />
+									</FormItem>
+								</div>
+							</div>
+							<div class="title_text">
+								<div class="left">卡券封面：</div>
+								<div class="right">
+									<RadioGroup v-model="formValidate.selet" @on-change='color'>
+										<Radio :label="1">
+											<span>图片</span>
+										</Radio>
+										<Radio :label="0">
+											<span>颜色</span>
+										</Radio>
+									</RadioGroup>
+								</div>
+							</div>
+							<div class="selst">
+								<div v-if="formValidate.selet === 1">
+									<!-- <div @click="modalPicTap('dan', 0)" class="btn">上传图片</div> -->
+									<div class="acea-row row-middle" @click="modalPicTap('dan', 0)">
+										<div class="pictrue pictrueTab">
+											<img v-if="pic" v-lazy="pic" />
+											<Icon v-else type="ios-add" size="16" />
+										</div>
+									</div>
+								</div>
+								<div v-if="formValidate.selet === 0 && colorList.length">
+									<div class="color_input" @click="seletcolor">
+										<div class="input_color"
+											:style="{backgroundColor: `${colors}` || `${colorList[0].value}`}"></div>
+										<span class="xia">﹀</span>
+										<div class="color_box" v-if="selecolor">
+											<div class="color_link" :style="{backgroundColor: `${item.value}`}"
+												v-for="(item,index) in colorList" @click.stop="dancolor(item)">
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
 
-                <div class="title_text mb60">
-                  <div class="left">会员卡标题：</div>
-                  <div class="right">
-                    <FormItem label="" prop="title" class="nomarb">
-                      <Input v-model="formValidate.title" maxlength="9" show-word-limit placeholder="" class="input-width" />
-                      <div class="tip">建议会员卡标题包含商户名或服务内容，如腾讯会员黄钻尊享卡</div>
-                    </FormItem>
-                  </div>
-                </div>
-                <!-- <div class="title_text marbottom">
+							<div class="title_text mb60">
+								<div class="left">会员卡标题：</div>
+								<div class="right">
+									<FormItem label="" prop="title" class="nomarb">
+										<Input v-model="formValidate.title" maxlength="9" show-word-limit placeholder=""
+											class="input-width" />
+										<div class="tip">建议会员卡标题包含商户名或服务内容，如腾讯会员黄钻尊享卡</div>
+									</FormItem>
+								</div>
+							</div>
+							<!-- <div class="title_text marbottom">
                   <div class="left">快速进入</div>
                   <div class="right">
                     <div>
@@ -173,803 +184,862 @@
                     </div>
                   </div>
                 </div> -->
-                <Divider dashed/>
-                <div class="title_bar">会员卡详情</div>
-                <div class="title_text required">
-                  <div class="left left-add">特权说明：</div>
-                  <div class="right" style="flex: 1;">
-                    <FormItem label="" prop="prerogative">
-                      <Input v-model="formValidate.prerogative" :rows="5" :autosize="{maxRows:5,minRows: 5}" type="textarea" placeholder="注：1、上文设置中，如已经填写“积分优惠”“折扣优惠”的内容，将会自动在用户会员卡详情展示，无需重复填写。2、建议填写其他特权，举例：100积分可兑换精美礼品；会员日可享受折上折优惠等" style="resize: none;border: none;width: 460px;"/>
-                    </FormItem>
-                  </div>
-                </div>
-                <div class="title_text required">
-                  <div class="left left-add" >介绍：</div>
-                  <div class="right" style="flex: 1;">
-                    <FormItem label="" prop="notice">
-                      <Input v-model="formValidate.description" maxlength="300" show-word-limit :rows="5" :autosize="{maxRows:5,minRows: 5}" type="textarea" placeholder="注：1、上文设置中，如已经填写“积分优惠”“折扣优惠”的内容，将会自动在用户会员卡详情展示，无需重复填写。2、建议填写其他注意事项，举例：积分不支持兑换现金" style="resize: none;border: none;width: 460px;"/>
-                    </FormItem>
-                  </div>
-                </div>
-                <Divider dashed />
-                <div class="title_bar">商户介绍<span>(选填)</span></div>
-                <div v-if=" formValidate.custom_cell && formValidate.custom_cell.length >0" class="addentrance">
-                  <div v-for="(item,index) in formValidate.custom_cell">
-                    <div class="add_bar">
-                      <div v-if="index == 0">入口一</div>
-                      <div v-if="index == 1">入口二</div>
-                      <div v-if="index == 2">入口三</div>
-                      <div class="del" @click="handleRemove(index)">删除</div>
-                    </div>
-                    <div class="title_text required">
-                      <div class="left">入口名称：</div>
-                      <div class="right">
-                        <div>
-                          <FormItem :prop="'custom_cell.' + index + '.name'" :rules="{required: true, message: '请输入入口名称', trigger: 'blur'}">
-                            <Input v-model="item.name" maxlength="5" show-word-limit placeholder=""  class="input-width" />
-                          </FormItem>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="title_text required">
-                      <div class="left">跳转链接：</div>
-                      <div class="right">
-                        <div>
-                          <FormItem :prop="'custom_cell.' + index + '.url'" :rules="{required: true, message: '请输入跳转链接', trigger: 'blur'}">
-                            <Input v-model="item.url" placeholder=""  class="input-width" />
-                          </FormItem>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="title_text">
-                      <div class="left">引导语：</div>
-                      <div class="right">
-                        <div>
-                          <Input v-model="item.tips" maxlength="6" show-word-limit placeholder=""  class="input-width" />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div v-if="formValidate.custom_cell && formValidate.custom_cell.length <= 2" class="add" @click="add">添加自定义入口</div>
-                </div>
-              </Form>
-            </div>
-          </div>
-        </Col>
-
-      </Row>
-      <div class="submit"><div class="btn" @click="submit()">提交</div></div>
-    </Card>
-    <!-- 上传图片 -->
-    <Modal
-        v-model="modalPic"
-        width="960px"
-        scrollable
-        footer-hide
-        closable
-        title="选择图片"
-        :mask-closable="false"
-        class="aaaa"
-    >
-      <uploadPictures
-          :isChoice="isChoice"
-          @getPic="getPic"
-          :gridBtn="gridBtn"
-          :gridPic="gridPic"
-          v-if="modalPic"
-      ></uploadPictures>
-    </Modal>
-    <!-- 上传logo -->
-    <Modal
-        v-model="logoPic"
-        width="960px"
-        scrollable
-        footer-hide
-        closable
-        title="选择图片"
-        :mask-closable="false"
-        class="aaaa"
-    >
-      <uploadPictures
-          :isChoice="isChoice"
-          @getPic="getlogoPic"
-          :gridBtn="gridBtn"
-          :gridPic="gridPic"
-          v-if="logoPic"
-      ></uploadPictures>
-    </Modal>
-  </div>
+							<Divider dashed />
+							<div class="title_bar">会员卡详情</div>
+							<div class="title_text required">
+								<div class="left left-add">特权说明：</div>
+								<div class="right" style="flex: 1;">
+									<FormItem label="" prop="prerogative">
+										<Input v-model="formValidate.prerogative" :rows="5"
+											:autosize="{maxRows:5,minRows: 5}" type="textarea"
+											placeholder="注：1、上文设置中，如已经填写“积分优惠”“折扣优惠”的内容，将会自动在用户会员卡详情展示，无需重复填写。2、建议填写其他特权，举例：100积分可兑换精美礼品；会员日可享受折上折优惠等"
+											style="resize: none;border: none;width: 460px;" />
+									</FormItem>
+								</div>
+							</div>
+							<div class="title_text required">
+								<div class="left left-add">介绍：</div>
+								<div class="right" style="flex: 1;">
+									<FormItem label="" prop="notice">
+										<Input v-model="formValidate.description" maxlength="300" show-word-limit
+											:rows="5" :autosize="{maxRows:5,minRows: 5}" type="textarea"
+											placeholder="注：1、上文设置中，如已经填写“积分优惠”“折扣优惠”的内容，将会自动在用户会员卡详情展示，无需重复填写。2、建议填写其他注意事项，举例：积分不支持兑换现金"
+											style="resize: none;border: none;width: 460px;" />
+									</FormItem>
+								</div>
+							</div>
+							<Divider dashed />
+							<div class="title_bar">商户介绍<span>(选填)</span></div>
+							<div v-if=" formValidate.custom_cell && formValidate.custom_cell.length >0"
+								class="addentrance">
+								<div v-for="(item,index) in formValidate.custom_cell">
+									<div class="add_bar">
+										<div v-if="index == 0">入口一</div>
+										<div v-if="index == 1">入口二</div>
+										<div v-if="index == 2">入口三</div>
+										<div class="del" @click="handleRemove(index)">删除</div>
+									</div>
+									<div class="title_text required">
+										<div class="left">入口名称：</div>
+										<div class="right">
+											<div>
+												<FormItem :prop="'custom_cell.' + index + '.name'"
+													:rules="{required: true, message: '请输入入口名称', trigger: 'blur'}">
+													<Input v-model="item.name" maxlength="5" show-word-limit
+														placeholder="" class="input-width" />
+												</FormItem>
+											</div>
+										</div>
+									</div>
+									<div class="title_text required">
+										<div class="left">跳转链接：</div>
+										<div class="right">
+											<div>
+												<FormItem :prop="'custom_cell.' + index + '.url'"
+													:rules="{required: true, message: '请输入跳转链接', trigger: 'blur'}">
+													<Input v-model="item.url" placeholder="" class="input-width" />
+												</FormItem>
+											</div>
+										</div>
+									</div>
+									<div class="title_text">
+										<div class="left">引导语：</div>
+										<div class="right">
+											<div>
+												<Input v-model="item.tips" maxlength="6" show-word-limit placeholder=""
+													class="input-width" />
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div>
+								<div v-if="formValidate.custom_cell && formValidate.custom_cell.length <= 2" class="add"
+									@click="add">添加自定义入口</div>
+							</div>
+						</Form>
+					</div>
+				</div>
+				</Col>
+
+			</Row>
+			<div class="submit">
+				<div class="btn" @click="submit()">提交</div>
+			</div>
+		</Card>
+		<!-- 上传图片 -->
+		<Modal v-model="modalPic" width="960px" scrollable footer-hide closable title="选择图片" :mask-closable="false"
+			class="aaaa">
+			<uploadPictures :isChoice="isChoice" @getPic="getPic" :gridBtn="gridBtn" :gridPic="gridPic" v-if="modalPic">
+			</uploadPictures>
+		</Modal>
+		<!-- 上传logo -->
+		<Modal v-model="logoPic" width="960px" scrollable footer-hide closable title="选择图片" :mask-closable="false"
+			class="aaaa">
+			<uploadPictures :isChoice="isChoice" @getPic="getlogoPic" :gridBtn="gridBtn" :gridPic="gridPic"
+				v-if="logoPic"></uploadPictures>
+		</Modal>
+	</div>
 </template>
 
 <script>
-import { wechatCardListApi, wechatCardApi} from '@/api/app'
-import uploadPictures from "@/components/uploadPictures";
-import { mapMutations } from "vuex";
-export default {
-  name: 'card',
-  components: { uploadPictures },
-  data () {
-    var checkPhone = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请输入电话'));
-      } else {
-        let regPone = null;
-        let mobile = /^1(3|4|5|6|7|8|9)\d{9}$/; //最新16手机正则
-        let tel = /^(0[0-9]{2,3}\-)([2-9][0-9]{4,7})+(\-[0-9]{1,4})?$/; //座机
-        let tel2 = /^400-[016789]\d{1,3}-\d{1,4}$/; //400电话的正则
-        if (value.charAt(0) == 0) {    // charAt查找第一个字符方法，用来判断输入的是座机还是手机号
-          regPone = tel;
-        }else if(value.charAt(0) == 4){
-          regPone = tel2;
-        } else {
-          regPone = mobile;
-        }
-        if (!regPone.test(value)) {
-          return callback(
-              new Error("请填写正确电话")
-          );
-        }
-        callback();
-      }
-    };
-    return {
-      isChoice: "",
-      modalPic: false,
-      logoPic: false,
-      gridBtn: {
-        xl: 4,
-        lg: 8,
-        md: 8,
-        sm: 8,
-        xs: 8,
-      },
-      gridPic: {
-        xl: 6,
-        lg: 8,
-        md: 12,
-        sm: 12,
-        xs: 12,
-      },
-      tableIndex: 0,
-      colorList: [],
-      colors:'',
-      colorsname: '',
-      formValidate: {
-        logo_url: '',
-        brand_name: 'CRMEB', // 商户名称
-        selet: 0, //卡券封面切换  0--颜色/1--图片
-        attrs: [{pic:''}],
-        title:'', //会员卡标题
-        prerogative: '', //特权说明
-        description: '', //介绍
-        service_phone: '',
-        background_pic_url: '',
-        color: '',//卡卷颜色
-        custom_cell: [
-          // {
-          // 	name: '', //入口名称
-          // 	tips: '', //引导语
-          // 	url: '' //跳转链接
-          // }
-        ],
-        center_title: '', //按钮描述
-        center_url: '', //跳转链接
-        center_sub_title: '', //提示语
-        center:[
-          // center_title: '', //按钮描述
-          // center_url: '', //跳转链接
-          // center_sub_title: '', //提示语
-        ],
-      },
-      ruleValidate: {
-        title: [
-          { required: true, message: '会员卡名称不能为空且长度不超过9个占位符', trigger: 'blur' }
-        ],
-        prerogative: [
-          { required: true, message: '特权说明不能为空', trigger: 'blur' }
-        ],
-        service_phone: [
-          { required: true, validator: checkPhone, trigger: "blur" },
-          // { pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur" },
-        ],
-        brand_name: [
-          { required: true, message: '商户名称不能为空', trigger: 'blur' }
-        ],
-        center_url:[
-          { required: true, message: '跳转链接不能为空', trigger: 'blur' }
-        ],
-        center_sub_title:[
-          { required: true, message: '提示语不能为空', trigger: 'blur' }
-        ],
-        center_title:[
-          { required: true, message: '按钮描述不能为空', trigger: 'blur' }
-        ]
-      },
-      pic: '',
-      selecolor: false, //颜色选择框
-      index:0,
-      centerstatus: true, //显示按钮添加
-      // addentrance: false //自定义入口框
-
-    }
-  },
-  created() {
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      this.getList()
-    })
-    this.setCopyrightShow({ value: false });
-  },
-  destroyed() {
-    this.setCopyrightShow({ value: true });
-  },
-  methods: {
-    ...mapMutations('admin/layout', [
-      'setCopyrightShow'
-    ]),
-    getList(){
-      wechatCardListApi().then(res=>{
-        this.colorList = res.data.color;
-        this.formValidate = Object.assign(this.formValidate, res.data.info);
-        this.$set(this.formValidate,"selet",res.data.selet || 0)
-        // let it = res.data.info.color || this.colorList[0].name
-        let it = res.data.info.color;
-        if (!it && this.colorList[0]) {
-          it = this.colorList[0].name;
-        }
-        this.colors =this.colorList.filter((item) => {
-          if(it == item.name){
-            return item.value
-          }
-        })
-        if(res.data.info.center_title != ""){
-          this.center_title = false
-        }
-        if (this.colors[0]) {
-          this.colorsname = this.colors[0].name;
-          this.colors = this.colors[0].value ;
-          if(this.colors==""){
-            this.dancolor(this.colorList[0])
-          }
-        }
-        if(res.data.selet == 1){
-          this.pic = res.data.info.background_pic_url
-        }
-        if(res.data.selet == 0){
-          this.pic = res.data.info.color
-        }
-      }).catch(err=>{
-        this.$Message.error(err.msg);
-      })
-    },
-    seletcolor(){
-      this.selecolor = !this.selecolor
-    },
-    dancolor(item){
-      this.selecolor = false
-      this.colors = item.value
-      this.colorsname = item.name
-    },
-    // 点击上传图片
-    modalPicTap(tit, index) {
-      this.modalPic = true;
-      this.isChoice = tit === "dan" ? "单选" : "多选";
-      this.tableIndex = index;
-    },
-    // 获取单张图片信息
-    getPic(pc) {
-      this.$nextTick(() => {
-        // this.formValidate.selet = 1
-        this.pic = pc.att_dir;
-        // this.pic = pc.att_dir;
-        this.modalPic = false;
-      })
-    },
-    // 点击logo图片
-    logoPicTap(tit, index) {
-      this.logoPic = true;
-      this.isChoice = tit === "dan" ? "单选" : "多选";
-      this.tableIndex = index;
-    },
-    // 获取logo图片信息
-    getlogoPic(pc) {
-      this.$nextTick(() => {
-        this.formValidate.logo_url = pc.att_dir;
-        this.logoPic = false;
-      })
-    },
-    color(e){
-      this.formValidate.selet = e
-    },
-    add(){
-      this.index ++;
-      // this.addentrance = true
-      this.formValidate.custom_cell.push({
-        name: '',
-        tips: '',
-        url: ''
-      });
-    },
-    //按钮添加
-    addcenter(){
-      this.centerstatus = false
-    },
-    //按钮取消
-    cancelcenter(){
-      this.formValidate.center_title= ''
-      this.formValidate.center_sub_title= ''
-      this.formValidate.center_url= ''
-      this.centerstatus = true
-    },
-    handleRemove(index) {
-      this.formValidate.custom_cell.splice(index,1);
-      this.index --;
-    },
-    submit() {
-      this.$refs.formValidate.validate((valid) => {
-        if (valid) {
-          if(this.formValidate.selet == 0){
-            this.formValidate.color = this.colorsname
-          }else{
-            this.formValidate.background_pic_url = this.pic
-          }
-          wechatCardApi(this.formValidate).then(res=>{
-            this.$Message.success(res.msg);
-            this.getList()
-          }).catch(err=>{
-            this.$Message.error(err.msg);
-          })
-        } else {
-          this.$Message.error('请完善信息');
-        }
-      })
-    },
-  }
-}
+	import {
+		wechatCardListApi,
+		wechatCardApi
+	} from '@/api/app'
+	import uploadPictures from "@/components/uploadPictures";
+	import {
+		mapMutations
+	} from "vuex";
+	export default {
+		name: 'card',
+		components: {
+			uploadPictures
+		},
+		data() {
+			var checkPhone = (rule, value, callback) => {
+				if (value === '') {
+					callback(new Error('请输入电话'));
+				} else {
+					let regPone = null;
+					let mobile = /^1(3|4|5|6|7|8|9)\d{9}$/; //最新16手机正则
+					let tel = /^(0[0-9]{2,3}\-)([2-9][0-9]{4,7})+(\-[0-9]{1,4})?$/; //座机
+					let tel2 = /^400-[016789]\d{1,3}-\d{1,4}$/; //400电话的正则
+					if (value.charAt(0) == 0) { // charAt查找第一个字符方法，用来判断输入的是座机还是手机号
+						regPone = tel;
+					} else if (value.charAt(0) == 4) {
+						regPone = tel2;
+					} else {
+						regPone = mobile;
+					}
+					if (!regPone.test(value)) {
+						return callback(
+							new Error("请填写正确电话")
+						);
+					}
+					callback();
+				}
+			};
+			return {
+				isChoice: "",
+				modalPic: false,
+				logoPic: false,
+				gridBtn: {
+					xl: 4,
+					lg: 8,
+					md: 8,
+					sm: 8,
+					xs: 8,
+				},
+				gridPic: {
+					xl: 6,
+					lg: 8,
+					md: 12,
+					sm: 12,
+					xs: 12,
+				},
+				tableIndex: 0,
+				colorList: [],
+				colors: '',
+				colorsname: '',
+				formValidate: {
+					logo_url: '',
+					brand_name: '壹柒科技', // 商户名称
+					selet: 0, //卡券封面切换  0--颜色/1--图片
+					attrs: [{
+						pic: ''
+					}],
+					title: '', //会员卡标题
+					prerogative: '', //特权说明
+					description: '', //介绍
+					service_phone: '',
+					background_pic_url: '',
+					color: '', //卡卷颜色
+					custom_cell: [
+						// {
+						// 	name: '', //入口名称
+						// 	tips: '', //引导语
+						// 	url: '' //跳转链接
+						// }
+					],
+					center_title: '', //按钮描述
+					center_url: '', //跳转链接
+					center_sub_title: '', //提示语
+					center: [
+						// center_title: '', //按钮描述
+						// center_url: '', //跳转链接
+						// center_sub_title: '', //提示语
+					],
+				},
+				ruleValidate: {
+					title: [{
+						required: true,
+						message: '会员卡名称不能为空且长度不超过9个占位符',
+						trigger: 'blur'
+					}],
+					prerogative: [{
+						required: true,
+						message: '特权说明不能为空',
+						trigger: 'blur'
+					}],
+					service_phone: [{
+							required: true,
+							validator: checkPhone,
+							trigger: "blur"
+						},
+						// { pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur" },
+					],
+					brand_name: [{
+						required: true,
+						message: '商户名称不能为空',
+						trigger: 'blur'
+					}],
+					center_url: [{
+						required: true,
+						message: '跳转链接不能为空',
+						trigger: 'blur'
+					}],
+					center_sub_title: [{
+						required: true,
+						message: '提示语不能为空',
+						trigger: 'blur'
+					}],
+					center_title: [{
+						required: true,
+						message: '按钮描述不能为空',
+						trigger: 'blur'
+					}]
+				},
+				pic: '',
+				selecolor: false, //颜色选择框
+				index: 0,
+				centerstatus: true, //显示按钮添加
+				// addentrance: false //自定义入口框
+
+			}
+		},
+		created() {},
+		mounted() {
+			this.$nextTick(() => {
+				this.getList()
+			})
+			this.setCopyrightShow({
+				value: false
+			});
+		},
+		destroyed() {
+			this.setCopyrightShow({
+				value: true
+			});
+		},
+		methods: {
+			...mapMutations('admin/layout', [
+				'setCopyrightShow'
+			]),
+			getList() {
+				wechatCardListApi().then(res => {
+					this.colorList = res.data.color;
+					this.formValidate = Object.assign(this.formValidate, res.data.info);
+					this.$set(this.formValidate, "selet", res.data.selet || 0)
+					// let it = res.data.info.color || this.colorList[0].name
+					let it = res.data.info.color;
+					if (!it && this.colorList[0]) {
+						it = this.colorList[0].name;
+					}
+					this.colors = this.colorList.filter((item) => {
+						if (it == item.name) {
+							return item.value
+						}
+					})
+					if (res.data.info.center_title != "") {
+						this.center_title = false
+					}
+					if (this.colors[0]) {
+						this.colorsname = this.colors[0].name;
+						this.colors = this.colors[0].value;
+						if (this.colors == "") {
+							this.dancolor(this.colorList[0])
+						}
+					}
+					if (res.data.selet == 1) {
+						this.pic = res.data.info.background_pic_url
+					}
+					if (res.data.selet == 0) {
+						this.pic = res.data.info.color
+					}
+				}).catch(err => {
+					this.$Message.error(err.msg);
+				})
+			},
+			seletcolor() {
+				this.selecolor = !this.selecolor
+			},
+			dancolor(item) {
+				this.selecolor = false
+				this.colors = item.value
+				this.colorsname = item.name
+			},
+			// 点击上传图片
+			modalPicTap(tit, index) {
+				this.modalPic = true;
+				this.isChoice = tit === "dan" ? "单选" : "多选";
+				this.tableIndex = index;
+			},
+			// 获取单张图片信息
+			getPic(pc) {
+				this.$nextTick(() => {
+					// this.formValidate.selet = 1
+					this.pic = pc.att_dir;
+					// this.pic = pc.att_dir;
+					this.modalPic = false;
+				})
+			},
+			// 点击logo图片
+			logoPicTap(tit, index) {
+				this.logoPic = true;
+				this.isChoice = tit === "dan" ? "单选" : "多选";
+				this.tableIndex = index;
+			},
+			// 获取logo图片信息
+			getlogoPic(pc) {
+				this.$nextTick(() => {
+					this.formValidate.logo_url = pc.att_dir;
+					this.logoPic = false;
+				})
+			},
+			color(e) {
+				this.formValidate.selet = e
+			},
+			add() {
+				this.index++;
+				// this.addentrance = true
+				this.formValidate.custom_cell.push({
+					name: '',
+					tips: '',
+					url: ''
+				});
+			},
+			//按钮添加
+			addcenter() {
+				this.centerstatus = false
+			},
+			//按钮取消
+			cancelcenter() {
+				this.formValidate.center_title = ''
+				this.formValidate.center_sub_title = ''
+				this.formValidate.center_url = ''
+				this.centerstatus = true
+			},
+			handleRemove(index) {
+				this.formValidate.custom_cell.splice(index, 1);
+				this.index--;
+			},
+			submit() {
+				this.$refs.formValidate.validate((valid) => {
+					if (valid) {
+						if (this.formValidate.selet == 0) {
+							this.formValidate.color = this.colorsname
+						} else {
+							this.formValidate.background_pic_url = this.pic
+						}
+						wechatCardApi(this.formValidate).then(res => {
+							this.$Message.success(res.msg);
+							this.getList()
+						}).catch(err => {
+							this.$Message.error(err.msg);
+						})
+					} else {
+						this.$Message.error('请完善信息');
+					}
+				})
+			},
+		}
+	}
 </script>
 
 <style scoped lang="stylus">
-.ivu-divider {
-  margin 30px 0;
-}
-.input-width {
-  width: 460px;
-}
-.left-add {
-  align-self: flex-start;
-  padding-top: 10px;
-  line-height: 14px;
-}
-.fz {
-  font-size:20px;
-}
-/deep/.ivu-form-item{
-  flex 1;
-  margin-bottom 0;
-}
-/deep/.ivu-form-item-content{
-  margin-left 0px !important;
-}
-/deep/.ivu-form-item-label{
-  width  auto !important;
-}
-.submit{
-  position fixed;
-  right 0;
-  bottom 0;
-  left 200px;
-  z-index 99;
-  padding 15px;
-  width 100%;
-  // border-top 1px solid #e7e7eb;
-  // margin-top 25px;
-  background-color #FFFFFF;
-  .btn{
-    margin 0 auto;
-    // background-color #55bd47;
-    color #FFFFFF
-  }
-}
-.tip{
-  color #9a9a9a;
-  position: absolute;
-}
-.bcl{
-  background-color #55bd47 !important;
-}
-.flexs{
-  justify-content space-around;
-  margin-bottom 79px;
-}
-.marbottom{
-  margin-bottom 20px;
-}
-.nomart{
-  margin-top 0px !important;
-}
-.nomarb{
-  margin-bottom 0px !important;
-}
-.you{
-  display inline-block;
-  margin-right 10px;
-  color #c6c6c6;
-  font-size 14px;
-  float: right;
-  font-family: serif;
-  font-weight: bold;
-  .guide{
-    display inline-block;
-    margin-right 10px;
-    font-size 14px;
-  }
-}
-.selst{
-  margin-left 114px;
-  margin-top 26px;
-  .color_input{
-    width 100px;
-    height 32px;
-    background-color #FFFFFF;
-    border 1px solid #d9dadc;
-    position relative;
-    cursor pointer;
-    .xia{
-      float: right;
-      margin-top: 10px;
-      margin-right: 10px;
-      font-size: 14px;
-    }
-    .input_color{
-      width 22px;
-      height 22px;
-      background-color #0000FF;
-      margin-top 4px;
-      margin-left 10px;
-      float left
-    }
-    .color_box{
-      width 140px;
-      // height 65px;
-      background-color #FFFFFF;
-      position absolute;
-      padding 5px
-      top 35px;
-      z-index 1;
-      display flex;
-      flex-wrap: wrap;
-      align-content: space-around;
-      justify-content: space-between;
-      border 1px solid #d9dadc;
-      .color_link{
-        width 22px;
-        height 22px;
-        margin  2px 0px;
-        background-color #0000FF;
-      }
-    }
-  }
-}
-.btn{
-  width 68px;
-  height 36px;
-  cursor: pointer;
-  background-color #1890FF;
-  text-align center;
-  line-height 36px;
-  // border 1px solid #e7e7eb;
-  border-radius 4px;
-}
-.pictrue {
-  width: 85px;
-  height: 85px;
-  // border: 1px dotted rgba(0, 0, 0, 0.1);
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.pictrueTab {
-  // margin-top 20px;
-  width: 60px !important;
-  height: 60px !important;
-  border 1px dashed #DDDDDD;
-  border-radius 4px;
-  background-color rgba(0, 0, 0, 0.02);
-  line-height 60px;
-  text-align center;
-}
-
-.card_box{
-  .item_box{
-    width 320px;
-    // height 536px;
-    margin 0 auto;
-    margin-bottom 30px;
-    overflow hidden;
-    // background-color #f6f6f8;
-    border 1px solid #e7e7eb;
-    img{
-      width 320px
-      display inline-block
-      margin 5px 0px;
-
-    }
-    .legal{
-      width 266px;
-      margin 0px auto;
-      margin-bottom 20px;
-      display flex;
-      justify-content space-around;
-      text-align center;
-      // padding 0px 20px;
-      .legal_box{
-        cursor pointer;
-        .legal_top{
-          color #9a9a9a;
-          font-size 12px;
-        }
-        .legal_bottom{
-          color #63b359;
-          font-size 15px;
-        }
-      }
-    }
-    .entry{
-      // width 266px;
-      margin 20px auto;
-      // margin-bottom 20px;
-      text-align center
-      .entry_btn{
-        width: fit-content;
-        padding 0px 30px;
-        height 40px;
-        line-height 40px;
-        margin 0px auto;
-        border 1px solid #63b359;
-        color #63b359;
-        font-weight 500;
-        font-size 14px;
-        margin-bottom 10px;
-        border-radius 5px;
-        cursor pointer;
-      }
-      .entry_tit{
-        color #9a9a9a;
-        font-size 12px;
-      }
-    }
-    .card{
-      width 266px;
-      height 147px;
-      margin 20px auto 10px;
-      border-radius 10px;
-      padding 20px;
-      color #FFFFFF;
-      background-repeat no-repeat !important;
-      background-size: 100% 100% !important;
-
-      .top{
-        height 80px;
-        display flex;
-        justify-content space-between;
-        img{
-          width 36px;
-          height 36px;
-          border 1px solid #FFFFFF;
-          border-radius 5px
-        }
-        .user{
-          display flex;
-          justify-content space-between;
-          img{
-            width 40px;
-            height 40px;
-            border 1px solid #FFFFFF;
-            border-radius 50%
-            overflow hidden;
-            background-color #FFFFFF;
-          }
-          .info_box{
-            margin-left 5px
-            font-weight bold;
-            margin-top 5px
-            .info{
-              max-width 150px;
-              font-size 15px;
-              overflow hidden;
-              text-overflow ellipsis;
-              white-space nowrap;
-            }
-          }
-        }
-      }
-      .bottom{
-        display flex;
-        justify-content space-between;
-        font-size 18px
-      }
-    }
-    .card_link{
-      padding 0px 5px;
-      .link{
-        height 40px;
-        line-height 40px;
-        border-bottom 1px solid #e7e7eb;
-
-      }
-      .link:nth-last-child(1){
-        border none
-      }
-    }
-    .custom_card{
-      height 222px;
-      background-color #f6f6f8;
-      padding 15px 0px 50px;
-      .custom_link{
-        background-color #FFFFFF
-        padding 0px 5px;
-        .link{
-          height 40px;
-          line-height 40px
-          border-bottom 1px solid #e7e7eb;
-        }
-        .link:nth-last-child(1){
-          border none
-        }
-      }
-
-    }
-  }
-}
-.card_content{
-  // border 1px solid #e7e7eb;
-  // background-color #f6f6f8;
-  .add{
-    width 138px;
-    height 36px;
-    // padding 0px 22px;
-    // border 1px solid #e6e9eb;
-    border-radius 4px;
-    background-color #1890FF;
-    margin 30px 0px 29px 30px;
-    line-height 36px;
-    text-align center;
-    cursor pointer;
-    color #FFFFFF;
-  }
-  .content_box{
-    // height 700px;
-    padding 20px 20px;
-    .addentrance{
-      padding-bottom 20px;
-      padding-left 30px;
-      // border-bottom 1px solid #e6e9eb;
-      .title_text{
-        .left{
-          width 95px;
-        }
-      }
-    }
-    .add_bar{
-      margin-top 30px;
-      display flex;
-      justify-content space-between;
-      align-items center;
-      height 34px;
-      padding 0 20px 0 15px;
-      background-color #F5F7FA;
-      .del{
-        color #F5222D;
-        cursor pointer;
-      }
-    }
-    .title_bar{
-      // height 30px;
-      padding-left 10px;
-      border-left 2px solid #1890FF;
-      font-weight bold;
-      line-height 15px;
-      color #000000;
-      // border-bottom 1px solid #e6e9eb;
-      span{
-        margin-left 6px;
-        font-weight normal;
-        font-size 12px;
-        color #999999;
-      }
-    }
-    .title_text{
-      display flex;
-      justify-content start;
-      align-items center;
-      margin-top 26px;
-      .left{
-        text-align right ;
-        width 114px;
-        padding-right 6px;
-        color rgba(0, 0, 0, 0.85);
-      }
-      &.required{
-        .left::before{
-          content: "*";
-          padding-right 5px;
-          vertical-align middle;
-          color #F56C6C;
-        }
-      }
-      .right{
-        display flex;
-        justify-content start;
-        position: relative;
-        &.logoPictrue{
-          border:1px dashed #ddd;
-          border-radius: 6px;
-        }
-        .tit{
-          display inline-block;
-          margin-top 10px;
-        }
-        .legaladd{
-          width 100px;
-          height 30px;
-          padding 0px 15px;
-          text-align center;
-          border 1px solid #e6e9eb;
-          background-color #FFFFFF;
-          line-height 30px;
-          cursor pointer;
-        }
-        img{
-          width 80px;
-          height 80px;
-        }
-        .img-boxs{
-          position relative
-          width: 60px;
-          height: 60px;
-          background: rgba(0, 0, 0, 0);
-          border-radius: 6px;
-          overflow hidden
-          img{
-            width 100%
-            height 100%
-          }
-          .img_font{
-            position absolute
-            bottom 0
-            left 0
-            width 100%
-            height: 24px;
-            background: #000000;
-            opacity: 0.4;
-            border-radius: 0px 0px 6px 6px;
-          }
-          .img_fonts{
-            position absolute
-            bottom 0
-            left 0
-            width 100%
-            height: 24px;
-            border-radius: 0px 0px 6px 6px;
-            color #FFFFFF
-            text-align center
-            line-height 24px
-
-          }
-        }
-
-
-      }
-    }
-  }
-}
-</style>
+	.ivu-divider {
+		margin 30px 0;
+	}
+
+	.input-width {
+		width: 460px;
+	}
+
+	.left-add {
+		align-self: flex-start;
+		padding-top: 10px;
+		line-height: 14px;
+	}
+
+	.fz {
+		font-size: 20px;
+	}
+
+	/deep/.ivu-form-item {
+		flex 1;
+		margin-bottom 0;
+	}
+
+	/deep/.ivu-form-item-content {
+		margin-left 0px !important;
+	}
+
+	/deep/.ivu-form-item-label {
+		width auto !important;
+	}
+
+	.submit {
+		position fixed;
+		right 0;
+		bottom 0;
+		left 200px;
+		z-index 99;
+		padding 15px;
+		width 100%;
+		// border-top 1px solid #e7e7eb;
+		// margin-top 25px;
+		background-color #FFFFFF;
+
+		.btn {
+			margin 0 auto;
+			// background-color #55bd47;
+			color #FFFFFF
+		}
+	}
+
+	.tip {
+		color #9a9a9a;
+		position: absolute;
+	}
+
+	.bcl {
+		background-color #55bd47 !important;
+	}
+
+	.flexs {
+		justify-content space-around;
+		margin-bottom 79px;
+	}
+
+	.marbottom {
+		margin-bottom 20px;
+	}
+
+	.nomart {
+		margin-top 0px !important;
+	}
+
+	.nomarb {
+		margin-bottom 0px !important;
+	}
+
+	.you {
+		display inline-block;
+		margin-right 10px;
+		color #c6c6c6;
+		font-size 14px;
+		float: right;
+		font-family: serif;
+		font-weight: bold;
+
+		.guide {
+			display inline-block;
+			margin-right 10px;
+			font-size 14px;
+		}
+	}
+
+	.selst {
+		margin-left 114px;
+		margin-top 26px;
+
+		.color_input {
+			width 100px;
+			height 32px;
+			background-color #FFFFFF;
+			border 1px solid #d9dadc;
+			position relative;
+			cursor pointer;
+
+			.xia {
+				float: right;
+				margin-top: 10px;
+				margin-right: 10px;
+				font-size: 14px;
+			}
+
+			.input_color {
+				width 22px;
+				height 22px;
+				background-color #0000FF;
+				margin-top 4px;
+				margin-left 10px;
+				float left
+			}
+
+			.color_box {
+				width 140px;
+				// height 65px;
+				background-color #FFFFFF;
+				position absolute;
+				padding 5px top 35px;
+				z-index 1;
+				display flex;
+				flex-wrap: wrap;
+				align-content: space-around;
+				justify-content: space-between;
+				border 1px solid #d9dadc;
+
+				.color_link {
+					width 22px;
+					height 22px;
+					margin 2px 0px;
+					background-color #0000FF;
+				}
+			}
+		}
+	}
+
+	.btn {
+		width 68px;
+		height 36px;
+		cursor: pointer;
+		background-color #1890FF;
+		text-align center;
+		line-height 36px;
+		// border 1px solid #e7e7eb;
+		border-radius 4px;
+	}
+
+	.pictrue {
+		width: 85px;
+		height: 85px;
+		// border: 1px dotted rgba(0, 0, 0, 0.1);
+		display: inline-block;
+		position: relative;
+		cursor: pointer;
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.pictrueTab {
+		// margin-top 20px;
+		width: 60px !important;
+		height: 60px !important;
+		border 1px dashed #DDDDDD;
+		border-radius 4px;
+		background-color rgba(0, 0, 0, 0.02);
+		line-height 60px;
+		text-align center;
+	}
+
+	.card_box {
+		.item_box {
+			width 320px;
+			// height 536px;
+			margin 0 auto;
+			margin-bottom 30px;
+			overflow hidden;
+			// background-color #f6f6f8;
+			border 1px solid #e7e7eb;
+
+			img {
+				width 320px display inline-block margin 5px 0px;
+
+			}
+
+			.legal {
+				width 266px;
+				margin 0px auto;
+				margin-bottom 20px;
+				display flex;
+				justify-content space-around;
+				text-align center;
+
+				// padding 0px 20px;
+				.legal_box {
+					cursor pointer;
+
+					.legal_top {
+						color #9a9a9a;
+						font-size 12px;
+					}
+
+					.legal_bottom {
+						color #63b359;
+						font-size 15px;
+					}
+				}
+			}
+
+			.entry {
+				// width 266px;
+				margin 20px auto;
+
+				// margin-bottom 20px;
+				text-align center .entry_btn {
+					width: fit-content;
+					padding 0px 30px;
+					height 40px;
+					line-height 40px;
+					margin 0px auto;
+					border 1px solid #63b359;
+					color #63b359;
+					font-weight 500;
+					font-size 14px;
+					margin-bottom 10px;
+					border-radius 5px;
+					cursor pointer;
+				}
+
+				.entry_tit {
+					color #9a9a9a;
+					font-size 12px;
+				}
+			}
+
+			.card {
+				width 266px;
+				height 147px;
+				margin 20px auto 10px;
+				border-radius 10px;
+				padding 20px;
+				color #FFFFFF;
+				background-repeat no-repeat !important;
+				background-size: 100% 100% !important;
+
+				.top {
+					height 80px;
+					display flex;
+					justify-content space-between;
+
+					img {
+						width 36px;
+						height 36px;
+						border 1px solid #FFFFFF;
+						border-radius 5px
+					}
+
+					.user {
+						display flex;
+						justify-content space-between;
+
+						img {
+							width 40px;
+							height 40px;
+							border 1px solid #FFFFFF;
+							border-radius 50% overflow hidden;
+							background-color #FFFFFF;
+						}
+
+						.info_box {
+							margin-left 5px font-weight bold;
+
+							margin-top 5px .info {
+								max-width 150px;
+								font-size 15px;
+								overflow hidden;
+								text-overflow ellipsis;
+								white-space nowrap;
+							}
+						}
+					}
+				}
+
+				.bottom {
+					display flex;
+					justify-content space-between;
+					font-size 18px
+				}
+			}
+
+			.card_link {
+				padding 0px 5px;
+
+				.link {
+					height 40px;
+					line-height 40px;
+					border-bottom 1px solid #e7e7eb;
+
+				}
+
+				.link:nth-last-child(1) {
+					border none
+				}
+			}
+
+			.custom_card {
+				height 222px;
+				background-color #f6f6f8;
+				padding 15px 0px 50px;
+
+				.custom_link {
+					background-color #FFFFFF padding 0px 5px;
+
+					.link {
+						height 40px;
+						line-height 40px border-bottom 1px solid #e7e7eb;
+					}
+
+					.link:nth-last-child(1) {
+						border none
+					}
+				}
+
+			}
+		}
+	}
+
+	.card_content {
+
+		// border 1px solid #e7e7eb;
+		// background-color #f6f6f8;
+		.add {
+			width 138px;
+			height 36px;
+			// padding 0px 22px;
+			// border 1px solid #e6e9eb;
+			border-radius 4px;
+			background-color #1890FF;
+			margin 30px 0px 29px 30px;
+			line-height 36px;
+			text-align center;
+			cursor pointer;
+			color #FFFFFF;
+		}
+
+		.content_box {
+			// height 700px;
+			padding 20px 20px;
+
+			.addentrance {
+				padding-bottom 20px;
+				padding-left 30px;
+
+				// border-bottom 1px solid #e6e9eb;
+				.title_text {
+					.left {
+						width 95px;
+					}
+				}
+			}
+
+			.add_bar {
+				margin-top 30px;
+				display flex;
+				justify-content space-between;
+				align-items center;
+				height 34px;
+				padding 0 20px 0 15px;
+				background-color #F5F7FA;
+
+				.del {
+					color #F5222D;
+					cursor pointer;
+				}
+			}
+
+			.title_bar {
+				// height 30px;
+				padding-left 10px;
+				border-left 2px solid #1890FF;
+				font-weight bold;
+				line-height 15px;
+				color #000000;
+
+				// border-bottom 1px solid #e6e9eb;
+				span {
+					margin-left 6px;
+					font-weight normal;
+					font-size 12px;
+					color #999999;
+				}
+			}
+
+			.title_text {
+				display flex;
+				justify-content start;
+				align-items center;
+				margin-top 26px;
+
+				.left {
+					text-align right;
+					width 114px;
+					padding-right 6px;
+					color rgba(0, 0, 0, 0.85);
+				}
+
+				&.required {
+					.left::before {
+						content: "*";
+						padding-right 5px;
+						vertical-align middle;
+						color #F56C6C;
+					}
+				}
+
+				.right {
+					display flex;
+					justify-content start;
+					position: relative;
+
+					&.logoPictrue {
+						border: 1px dashed #ddd;
+						border-radius: 6px;
+					}
+
+					.tit {
+						display inline-block;
+						margin-top 10px;
+					}
+
+					.legaladd {
+						width 100px;
+						height 30px;
+						padding 0px 15px;
+						text-align center;
+						border 1px solid #e6e9eb;
+						background-color #FFFFFF;
+						line-height 30px;
+						cursor pointer;
+					}
+
+					img {
+						width 80px;
+						height 80px;
+					}
+
+					.img-boxs {
+						position relative width: 60px;
+						height: 60px;
+						background: rgba(0, 0, 0, 0);
+						border-radius: 6px;
+
+						overflow hidden img {
+							width 100% height 100%
+						}
+
+						.img_font {
+							position absolute bottom 0 left 0 width 100% height: 24px;
+							background: #000000;
+							opacity: 0.4;
+							border-radius: 0px 0px 6px 6px;
+						}
+
+						.img_fonts {
+							position absolute bottom 0 left 0 width 100% height: 24px;
+							border-radius: 0px 0px 6px 6px;
+							color #FFFFFF text-align center line-height 24px
+						}
+					}
+
+
+				}
+			}
+		}
+	}
+</style>

src/pages/kefu/appChat/index.vue

@@ -1,1072 +1,1034 @@
 <template>
-  <div class="chat-room">
-    <div class="room" :class="{ win: !chatOptions.popup }" @click="roomClick">
-      <div v-drag class="head">
-        <div class="image">
-          <img v-lazy="serviceData && serviceData.avatar" />
-        </div>
-        <div class="name">{{ serviceData && serviceData.nickname }}</div>
-        <div
-          :class="[
+	<div class="chat-room">
+		<div class="room" :class="{ win: !chatOptions.popup }" @click="roomClick">
+			<div v-drag class="head">
+				<div class="image">
+					<img v-lazy="serviceData && serviceData.avatar" />
+				</div>
+				<div class="name">{{ serviceData && serviceData.nickname }}</div>
+				<div :class="[
             'iconfont',
             muted ? 'icon-shengyinjingyinxianxing' : 'icon-shengyinyinliang',
-          ]"
-          @click="muted = !muted"
-        ></div>
-        <div class="iconfont icon-guanbi5" @click="close"></div>
-      </div>
-      <div class="main">
-        <div class="chat">
-          <div ref="record" class="record" @scroll="onScroll">
-            <Spin v-show="loading">
-              <Icon
-                type="ios-loading"
-                size="18"
-                class="demo-spin-icon-load"
-              ></Icon>
-              <div>Loading</div>
-            </Spin>
-            <ul>
-              <template v-for="item in records">
-                <li
-                  :key="item.id"
-                  :class="{ right: item.to_uid === serviceData.uid }"
-                >
-                  <div v-if="item.show" class="time-tag">
-                    {{ item.add_time }}
-                  </div>
-                  <div class="avatar">
-                    <img v-lazy="item.avatar" />
-                  </div>
-                  <div class="content" ref="chatContent">
-                    <div
-                      v-if="item.msn_type === 1"
-                      class="text"
-                      v-html="item.msn"
-                    ></div>
-                    <div v-if="item.msn_type === 2" class="image">
-                      <div class="text">
-                        <i :class="`em ${item.msn}`"></i>
-                      </div>
-                    </div>
-                    <div v-if="item.msn_type === 3" class="image" v-viewer>
-                      <img :src="item.msn" />
-                    </div>
-                    <div v-if="item.msn_type === 5" class="goods">
-                      <div class="thumb">
-                        <img :src="item.productInfo.image" />
-                      </div>
-                      <div class="intro">
-                        <div class="name">
-                          {{ item.productInfo.store_name }}
-                        </div>
-                        <div class="attr">
-                          <span>库存：{{ item.productInfo.stock }}</span>
-                          <span>销量：{{ item.productInfo.sales }}</span>
-                        </div>
-                        <div class="group">
-                          <div class="money">
-                            ￥{{ item.productInfo.price }}
-                          </div>
-                          <nuxt-link
-                            target="_blank"
-                            :to="{
+          ]" @click="muted = !muted"></div>
+				<div class="iconfont icon-guanbi5" @click="close"></div>
+			</div>
+			<div class="main">
+				<div class="chat">
+					<div ref="record" class="record" @scroll="onScroll">
+						<Spin v-show="loading">
+							<Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
+							<div>Loading</div>
+						</Spin>
+						<ul>
+							<template v-for="item in records">
+								<li :key="item.id" :class="{ right: item.to_uid === serviceData.uid }">
+									<div v-if="item.show" class="time-tag">
+										{{ item.add_time }}
+									</div>
+									<div class="avatar">
+										<img v-lazy="item.avatar" />
+									</div>
+									<div class="content" ref="chatContent">
+										<div v-if="item.msn_type === 1" class="text" v-html="item.msn"></div>
+										<div v-if="item.msn_type === 2" class="image">
+											<div class="text">
+												<i :class="`em ${item.msn}`"></i>
+											</div>
+										</div>
+										<div v-if="item.msn_type === 3" class="image" v-viewer>
+											<img :src="item.msn" />
+										</div>
+										<div v-if="item.msn_type === 5" class="goods">
+											<div class="thumb">
+												<img :src="item.productInfo.image" />
+											</div>
+											<div class="intro">
+												<div class="name">
+													{{ item.productInfo.store_name }}
+												</div>
+												<div class="attr">
+													<span>库存：{{ item.productInfo.stock }}</span>
+													<span>销量：{{ item.productInfo.sales }}</span>
+												</div>
+												<div class="group">
+													<div class="money">
+														￥{{ item.productInfo.price }}
+													</div>
+													<nuxt-link target="_blank" :to="{
                               path: `/goods_detail/${item.productInfo.id}`,
-                            }"
-                            >查看商品 ></nuxt-link
-                          >
-                        </div>
-                      </div>
-                    </div>
-                    <template v-if="item.msn_type === 6">
-                      <div
-                        v-for="itm in item.orderInfo.cartInfo"
-                        :key="itm.id"
-                        class="order"
-                      >
-                        <div class="thumb">
-                          <img :src="itm.productInfo.image" />
-                        </div>
-                        <div class="intro">
-                          <div class="name">
-                            订单ID：{{ item.orderInfo.order_id }}
-                          </div>
-                          <div class="attr">商品数量：{{ itm.cart_num }}</div>
-                          <div class="group">
-                            <div class="money">
-                              ￥{{ itm.productInfo.price }}
-                            </div>
-                            <nuxt-link
-                              target="_blank"
-                              :to="{
+                            }">查看商品 ></nuxt-link>
+												</div>
+											</div>
+										</div>
+										<template v-if="item.msn_type === 6">
+											<div v-for="itm in item.orderInfo.cartInfo" :key="itm.id" class="order">
+												<div class="thumb">
+													<img :src="itm.productInfo.image" />
+												</div>
+												<div class="intro">
+													<div class="name">
+														订单ID：{{ item.orderInfo.order_id }}
+													</div>
+													<div class="attr">商品数量：{{ itm.cart_num }}</div>
+													<div class="group">
+														<div class="money">
+															￥{{ itm.productInfo.price }}
+														</div>
+														<nuxt-link target="_blank" :to="{
                                 path: '/order_detail',
                                 query: { orderId: item.orderInfo.order_id },
-                              }"
-                              >查看订单 ></nuxt-link
-                            >
-                          </div>
-                        </div>
-                      </div>
-                    </template>
-                  </div>
-                </li>
-              </template>
-            </ul>
-          </div>
-          <div class="editor">
-            <div class="editor-hd">
-              <div>
-                <button
-                  class="emoji-btn"
-                  title="表情"
-                  @click.stop="emojiSwitch"
-                >
-                  <span class="iconfont iconbiaoqing1"></span>
-                </button>
-                <button title="图片" v-if="kufuToken">
-                  <Upload
-                    :show-upload-list="false"
-                    :action="uploadAction"
-                    :before-upload="beforeUpload"
-                    :format="['jpg', 'jpeg', 'png', 'gif']"
-                    :on-format-error="handleFormatError"
-                    :data="uploadData"
-                    :on-success="uploadSuccess"
-                    :on-error="uploadError"
-                  >
-                    <span class="iconfont icontupian1"></span>
-                  </Upload>
-                </button>
-              </div>
-              <!--                            <div>-->
-              <!--                                <button class="end" @click="chatEnd">-->
-              <!--                                    <i class="iconfont icon-guanji"></i>结束-->
-              <!--                                </button>-->
-              <!--                            </div>-->
-              <!-- 表情 -->
-              <div class="emoji-panel" v-if="emojiShow">
-                <i
-                  class="em"
-                  :class="emoji"
-                  @click="selectEmoji(emoji)"
-                  v-for="(emoji, index) in emojiList"
-                  :key="index"
-                ></i>
-              </div>
-            </div>
-            <div class="editor-bd">
-              <textarea
-                v-model="chatCont"
-                placeholder="请输入文字内容"
-                @keydown.enter="ctrlEnter"
-              ></textarea>
-            </div>
-            <div class="editor-ft">
-              <button :disabled="!chatCont" @click="sendMessage">发送</button>
-            </div>
-          </div>
-        </div>
-        <div class="notice">
-          <div v-if="notice" class="rich" v-html="notice"></div>
-          <div class="copy">
+                              }">查看订单 ></nuxt-link>
+													</div>
+												</div>
+											</div>
+										</template>
+									</div>
+								</li>
+							</template>
+						</ul>
+					</div>
+					<div class="editor">
+						<div class="editor-hd">
+							<div>
+								<button class="emoji-btn" title="表情" @click.stop="emojiSwitch">
+									<span class="iconfont iconbiaoqing1"></span>
+								</button>
+								<button title="图片" v-if="kufuToken">
+									<Upload :show-upload-list="false" :action="uploadAction"
+										:before-upload="beforeUpload" :format="['jpg', 'jpeg', 'png', 'gif']"
+										:on-format-error="handleFormatError" :data="uploadData"
+										:on-success="uploadSuccess" :on-error="uploadError">
+										<span class="iconfont icontupian1"></span>
+									</Upload>
+								</button>
+							</div>
+							<!--                            <div>-->
+							<!--                                <button class="end" @click="chatEnd">-->
+							<!--                                    <i class="iconfont icon-guanji"></i>结束-->
+							<!--                                </button>-->
+							<!--                            </div>-->
+							<!-- 表情 -->
+							<div class="emoji-panel" v-if="emojiShow">
+								<i class="em" :class="emoji" @click="selectEmoji(emoji)"
+									v-for="(emoji, index) in emojiList" :key="index"></i>
+							</div>
+						</div>
+						<div class="editor-bd">
+							<textarea v-model="chatCont" placeholder="请输入文字内容" @keydown.enter="ctrlEnter"></textarea>
+						</div>
+						<div class="editor-ft">
+							<button :disabled="!chatCont" @click="sendMessage">发送</button>
+						</div>
+					</div>
+				</div>
+				<div class="notice">
+					<div v-if="notice" class="rich" v-html="notice"></div>
+					<!-- <div class="copy">
             <a href="http://www.crmeb.com/" target="_blank"
               >CRMEB提供技术支持</a
             >
-          </div>
-        </div>
-      </div>
-      <audio ref="audio" :src="audioSrc"></audio>
-    </div>
-    <feed-back
-      @closeChange="closeChange($event)"
-      v-if="change"
-      :change="change"
-    ></feed-back>
-  </div>
+          </div> -->
+				</div>
+			</div>
+			<audio ref="audio" :src="audioSrc"></audio>
+		</div>
+		<feed-back @closeChange="closeChange($event)" v-if="change" :change="change"></feed-back>
+	</div>
 </template>
 
 <script>
-import "emoji-awesome/dist/css/google.min.css";
-import emojiList from "@/utils/emoji";
-import { Socket } from "@/libs/socket";
-import Setting from "@/setting";
-import Cookies from "js-cookie";
-import { chatListApi, serviceListApi, getAdvApi } from "@/api/kefu";
-import feedBack from "./feedback";
-const chunk = function (arr, num) {
-  num = num * 1 || 1;
-  var ret = [];
-  arr.forEach(function (item, i) {
-    if (i % num === 0) {
-      ret.push([]);
-    }
-    ret[ret.length - 1].push(item);
-  });
-  return ret;
-};
-export default {
-  name: "ChatRoom",
-  auth: false,
-  components: {
-    feedBack,
-  },
-  props: {
-    chatOptions: {
-      type: Object,
-      default: function () {
-        return {
-          show: false,
-        };
-      },
-    },
-  },
-  directives: {
-    drag: {
-      inserted: function (el) {
-        let x = 0;
-        let y = 0;
-        let l = 0;
-        let t = 0;
-        let isDown = false;
-        el.onmousedown = function (e) {
-          x = e.clientX;
-          y = e.clientY;
-          l = el.parentNode.offsetLeft;
-          t = el.parentNode.offsetTop;
-          isDown = true;
-          el.style.cursor = "move";
-          window.onmousemove = function (e) {
-            if (isDown == false) {
-              return;
-            }
-            let nx = e.clientX;
-            let ny = e.clientY;
-            let nl = nx - (x - l);
-            let nt = ny - (y - t);
-            el.parentNode.style.left = nl + "px";
-            el.parentNode.style.top = nt + "px";
-          };
-          window.onmouseup = function () {
-            isDown = false;
-            el.style.cursor = "default";
-            window.onmousemove = null;
-            window.onmouseup = null;
-          };
-          return false;
-        };
-      },
-    },
-  },
-  data() {
-    return {
-      roterPre: Setting.roterPre,
-      locations: `${location.origin}`,
-      change: false,
-      emojiGroup: chunk(emojiList, 20), // 表情列表
-      emojiList: emojiList,
-      emojiShow: false,
-      recordList: [],
-      limit: 20,
-      loading: false,
-      finished: false,
-      chatCont: "",
-      service: null,
-      serviceData: {},
-      uploadAction: "",
-      notice: "",
-      audio: null,
-      muted: false,
-      audioSrc: "",
-      upperId: 0,
-      uploadData: {},
-      is_tourist: 1, // 0登录状态，1未登录状态游客
-      text: "",
-      isLoad: false,
-      page: 1,
-      tourist_avatar: "", // 游客头像
-      tourist_uid: "", // 游客id
-      toUid: "", // 客服id
-      kufuToken: "", // token
-      pageWs: "",
-    };
-  },
-  watch: {
-    muted(value) {
-      this.audio.muted = value;
-    },
-  },
-  computed: {
-    records() {
-      return this.recordList.map((item, index) => {
-        if (index) {
-          if (
-            new Date(item.add_time) -
-              new Date(this.recordList[index - 1].add_time) >=
-            300000
-          ) {
-            item.show = true;
-          } else {
-            item.show = false;
-          }
-        } else {
-          item.show = false;
-        }
-        return item;
-      });
-    },
-  },
-  created() {
-    if (location.href.indexOf(`${Setting.routePreKF}`) != -1)
-      this.uploadAction =
-        Setting.apiBaseURL.replace(/adminapi/, "kefuapi") + "/tourist/upload";
-    let token = Cookies.get("auth._token.local1");
-    this.kufuToken = token ? token.split("Bearer%20")[1] : "";
-  },
-  mounted() {
-    let that = this;
-    window.addEventListener("click", function () {
-      if (that.emojiShow) {
-        that.emojiShow = false;
-      }
-    });
-    if (this.$wechat._isMobile())
-      this.$router.replace(`${this.routePreKF}/mobile_user_chat`);
-    this.getService();
-    this.pageWs = Socket(true, this.kufuToken, this.tourist_uid);
-    this.text = this.replace_em("[em-smiling_imp]");
-    this.wsStart();
-  },
-  beforeDestroy() {
-    this.pageWs.close();
-  },
-  methods: {
-    wsStart() {
-      let that = this;
-      this.pageWs
-        .then((ws) => {
-          if (this.kufuToken) {
-            ws.send({
-              type: "login",
-              data: this.kufuToken,
-            });
-          }
-          this.getService();
-          ws.$on(["reply", "chat"], (data) => {
-            if (data.msn_type == 1) {
-              data.msn = this.replace_em(data.msn);
-            }
-            this.recordList.push(data);
-            setTimeout((res) => {
-              this.$nextTick(function () {
-                this.$refs.record.scrollTop =
-                  this.$refs.record.scrollHeight -
-                  this.$refs.record.clientHeight;
-              });
-            }, 300);
-          });
-          // 监听客服转接
-          ws.$on("to_transfer", (data) => {
-            this.toUid = data.toUid;
-            ws.send({
-              data: {
-                id: this.toUid,
-              },
-              type: "to_chat",
-            });
-          });
-          ws.$on("socket_error", () => {
-            this.$Message.error("连接失败");
-          });
-          ws.$on("err_tip", (data) => {
-            this.$Message.error(data.msg);
-          });
-          ws.$on("success", (data) => {
-            this.is_tourist = 0;
-          });
-          ws.$on("timeout", (data) => {
-            setTimeout(() => {
-              this.wsRestart();
-            }, 2000);
-          });
-        })
-        .catch((error) => {
-          setTimeout((res) => {
-            this.wsRestart();
-          }, 2000);
-        });
-    },
-    wsRestart() {
-      this.pageWs = Socket(true, this.kufuToken, this.tourist_uid);
-      this.wsStart();
-    },
-    onLook(id) {
-      window.open(`${location.origin}/home/goods_detail/${id}`);
-    },
-    // 关闭
-    closeChange(msg) {
-      this.change = msg;
-    },
-    // 统一发送处理
-    sendMsg(msn, type) {
-      let obj = {
-        type: "chat",
-        data: {
-          msn,
-          type,
-          is_tourist: this.is_tourist,
-          to_uid: this.toUid,
-          tourist_uid: this.tourist_uid,
-          tourist_avatar: this.tourist_avatar,
-          form_type: this.$wechat.isWeixin() ? 1 : 3,
-        },
-      };
-      this.pageWs.then((ws) => {
-        ws.send(obj);
-      });
-    },
-    // 随机客服
-    getService() {
-      serviceListApi({ token: this.kufuToken || "" })
-        .then((res) => {
-          this.serviceData = res.data;
-          this.upperId = 0;
-          this.toUid = res.data.uid;
-          this.tourist_uid = res.data.tourist_uid;
-          this.tourist_avatar = res.data.tourist_avatar;
-          let obj = {
-            data: {
-              id: res.data.uid,
-              tourist_uid: this.tourist_uid,
-            },
-            type: "to_chat",
-          };
-          this.pageWs.then((ws) => {
-            ws.send(obj);
-          });
-          if (this.kufuToken) {
-            this.getRecordList();
-          }
-        })
-        .catch((err) => {
-          // this.$Message.error(err.msg);
-          this.change = true;
-        });
-    },
-    roomClick(event) {
-      // if (
-      //     !event.target.classList.contains("emoji-panel") &&
-      //     !event.target.classList.contains("emoji-btn") &&
-      //     !event.target.classList.contains("icon-biaoqing") &&
-      //     this.emojiShow
-      // ) {
-      //     this.emojiShow = false;
-      // }
-    },
-    // enter 发送
-    ctrlEnter(e) {
-      if (e.keyCode == 13) {
-        e.preventDefault();
-      }
-      if (this.chatCont.trim()) {
-        this.sendMessage();
-      }
-    },
-    // 关闭聊天窗口
-    close() {
-      this.$emit("chat-close");
-    },
-    // 选择表情
-    selectEmoji(data) {
-      // let val = `[${data}]`;
-      // this.chatCont += val;
-      this.emojiShow = false;
-      this.sendMsg(`[${data}]`, 1);
-    },
-    // 聊天表情转换
-    replace_em(str) {
-      str = str.replace(/\[em-([\s\S]*?)\]/g, "<span class='em em-$1'/></span>");
-      return str;
-    },
-    onScroll(event) {
-      if (event.target.scrollTop <= 30) {
-        if (this.kufuToken) {
-          this.getRecordList();
-        }
-      }
-    },
-    // 聊天记录
-    getRecordList() {
-      if (this.loading) {
-        return;
-      }
-      if (this.finished) {
-        return;
-      }
-      this.loading = true;
-      chatListApi({
-        uid: this.serviceData.uid,
-        limit: this.limit,
-        upperId: this.upperId,
-        token: this.kufuToken,
-      })
-        .then((res) => {
-          if (res.data.length === 0) return (this.loading = false);
-          res.data.forEach((el) => {
-            if (el.msn_type == 1) {
-              el.msn = this.replace_em(el.msn);
-            }
-          });
-          let selector = "";
-          if (this.upperId == 0) {
-            selector = `chat_${res.data[res.data.length - 1].id}`;
-          } else {
-            selector = `chat_${this.recordList[0].id}`;
-          }
-
-          this.recordList = [...res.data, ...this.recordList];
-          this.upperId = res.data.length > 0 ? res.data[0].id : 0;
-          this.loading = false;
-          this.finished = res.data.length < this.limit;
-          this.$nextTick(function () {
-            this.setPageScrollTo(selector);
-          });
-        })
-        .catch((err) => {
-          this.$Message.error(err.msg);
-        });
-    },
-    // 设置页面滚动位置
-    setPageScrollTo(selector) {
-      this.$nextTick(() => {
-        if (selector) {
-          setTimeout(() => {
-            let num =
-              parseFloat(document.getElementById(selector).offsetTop) - 60;
-            this.$refs.record.scrollTop = num;
-          }, 0);
-        } else {
-          var container = document.querySelector("#chat_scroll");
-          this.$refs.record.scrollTop = container.offsetHeight;
-          setTimeout((res) => {
-            if (
-              this.$refs.record.scrollTop != this.$refs.scrollBox.offsetHeight
-            ) {
-              this.$refs.record.scrollTop = document.querySelector(
-                "#chat_scroll"
-              ).offsetHeight;
-            }
-          }, 300);
-        }
-      });
-    },
-    // 表情包显示隐藏
-    emojiSwitch() {
-      this.emojiShow = true;
-    },
-    // 发送消息
-    sendMessage() {
-      this.sendMsg(this.chatCont, 1);
-      this.chatCont = "";
-    },
-    chat(data) {
-      if (data.uid != this.$auth.user.uid && this.audio) {
-        this.audio.play();
-      }
-      this.recordList.push(data);
-      this.$nextTick(() => {
-        this.$refs.record.scrollTop =
-          this.$refs.record.scrollHeight - this.$refs.record.clientHeight;
-      });
-    },
-    sendGoods() {
-      if (this.chatOptions.goodsId) {
-        this.pageWs.then((ws) => {
-          ws.send({
-            data: {
-              msn: this.chatOptions.goodsId,
-              type: 5,
-              to_uid: this.toUid,
-            },
-            type: "to_chat",
-          });
-        });
-      }
-    },
-    sendOrder() {
-      if (this.chatOptions.orderId) {
-        this.pageWs.then((ws) => {
-          ws.send({
-            data: {
-              msn: this.chatOptions.orderId,
-              type: 6,
-              to_uid: this.toUid,
-            },
-            type: "to_chat",
-          });
-        });
-      }
-    },
-    chatEnd() {
-      if (navigator.userAgent.indexOf("MSIE") > 0) {
-        if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
-          window.opener = null;
-          window.close();
-        } else {
-          window.open("", "_top");
-          window.top.close();
-        }
-      } else if (navigator.userAgent.indexOf("Firefox") > 0) {
-        window.location.href = "about:blank ";
-      } else {
-        window.opener = null;
-        window.open("", "_self", "");
-        window.close();
-      }
-    },
-    // 广告
-    getNotice() {
-      getAdvApi().then((res) => {
-        this.notice = res.data.content;
-      });
-    },
-    beforeUpload(file) {
-      this.uploadData = {
-        filename: file,
-        token: this.kufuToken,
-      };
-      let promise = new Promise((resolve) => {
-        this.$nextTick(function () {
-          resolve(true);
-        });
-      });
-      return promise;
-    },
-    handleFormatError(file) {
-      this.$Message.error("上传图片只能是 jpg、jpg、jpeg、gif 格式!");
-    },
-    uploadSuccess(res) {
-      this.sendMsg(res.data.url, 3);
-    },
-    uploadError(error) {
-      this.$message.error(error);
-    },
-  },
-};
+	import "emoji-awesome/dist/css/google.min.css";
+	import emojiList from "@/utils/emoji";
+	import {
+		Socket
+	} from "@/libs/socket";
+	import Setting from "@/setting";
+	import Cookies from "js-cookie";
+	import {
+		chatListApi,
+		serviceListApi,
+		getAdvApi
+	} from "@/api/kefu";
+	import feedBack from "./feedback";
+	const chunk = function(arr, num) {
+		num = num * 1 || 1;
+		var ret = [];
+		arr.forEach(function(item, i) {
+			if (i % num === 0) {
+				ret.push([]);
+			}
+			ret[ret.length - 1].push(item);
+		});
+		return ret;
+	};
+	export default {
+		name: "ChatRoom",
+		auth: false,
+		components: {
+			feedBack,
+		},
+		props: {
+			chatOptions: {
+				type: Object,
+				default: function() {
+					return {
+						show: false,
+					};
+				},
+			},
+		},
+		directives: {
+			drag: {
+				inserted: function(el) {
+					let x = 0;
+					let y = 0;
+					let l = 0;
+					let t = 0;
+					let isDown = false;
+					el.onmousedown = function(e) {
+						x = e.clientX;
+						y = e.clientY;
+						l = el.parentNode.offsetLeft;
+						t = el.parentNode.offsetTop;
+						isDown = true;
+						el.style.cursor = "move";
+						window.onmousemove = function(e) {
+							if (isDown == false) {
+								return;
+							}
+							let nx = e.clientX;
+							let ny = e.clientY;
+							let nl = nx - (x - l);
+							let nt = ny - (y - t);
+							el.parentNode.style.left = nl + "px";
+							el.parentNode.style.top = nt + "px";
+						};
+						window.onmouseup = function() {
+							isDown = false;
+							el.style.cursor = "default";
+							window.onmousemove = null;
+							window.onmouseup = null;
+						};
+						return false;
+					};
+				},
+			},
+		},
+		data() {
+			return {
+				roterPre: Setting.roterPre,
+				locations: `${location.origin}`,
+				change: false,
+				emojiGroup: chunk(emojiList, 20), // 表情列表
+				emojiList: emojiList,
+				emojiShow: false,
+				recordList: [],
+				limit: 20,
+				loading: false,
+				finished: false,
+				chatCont: "",
+				service: null,
+				serviceData: {},
+				uploadAction: "",
+				notice: "",
+				audio: null,
+				muted: false,
+				audioSrc: "",
+				upperId: 0,
+				uploadData: {},
+				is_tourist: 1, // 0登录状态，1未登录状态游客
+				text: "",
+				isLoad: false,
+				page: 1,
+				tourist_avatar: "", // 游客头像
+				tourist_uid: "", // 游客id
+				toUid: "", // 客服id
+				kufuToken: "", // token
+				pageWs: "",
+			};
+		},
+		watch: {
+			muted(value) {
+				this.audio.muted = value;
+			},
+		},
+		computed: {
+			records() {
+				return this.recordList.map((item, index) => {
+					if (index) {
+						if (
+							new Date(item.add_time) -
+							new Date(this.recordList[index - 1].add_time) >=
+							300000
+						) {
+							item.show = true;
+						} else {
+							item.show = false;
+						}
+					} else {
+						item.show = false;
+					}
+					return item;
+				});
+			},
+		},
+		created() {
+			if (location.href.indexOf(`${Setting.routePreKF}`) != -1)
+				this.uploadAction =
+				Setting.apiBaseURL.replace(/adminapi/, "kefuapi") + "/tourist/upload";
+			let token = Cookies.get("auth._token.local1");
+			this.kufuToken = token ? token.split("Bearer%20")[1] : "";
+		},
+		mounted() {
+			let that = this;
+			window.addEventListener("click", function() {
+				if (that.emojiShow) {
+					that.emojiShow = false;
+				}
+			});
+			if (this.$wechat._isMobile())
+				this.$router.replace(`${this.routePreKF}/mobile_user_chat`);
+			this.getService();
+			this.pageWs = Socket(true, this.kufuToken, this.tourist_uid);
+			this.text = this.replace_em("[em-smiling_imp]");
+			this.wsStart();
+		},
+		beforeDestroy() {
+			this.pageWs.close();
+		},
+		methods: {
+			wsStart() {
+				let that = this;
+				this.pageWs
+					.then((ws) => {
+						if (this.kufuToken) {
+							ws.send({
+								type: "login",
+								data: this.kufuToken,
+							});
+						}
+						this.getService();
+						ws.$on(["reply", "chat"], (data) => {
+							if (data.msn_type == 1) {
+								data.msn = this.replace_em(data.msn);
+							}
+							this.recordList.push(data);
+							setTimeout((res) => {
+								this.$nextTick(function() {
+									this.$refs.record.scrollTop =
+										this.$refs.record.scrollHeight -
+										this.$refs.record.clientHeight;
+								});
+							}, 300);
+						});
+						// 监听客服转接
+						ws.$on("to_transfer", (data) => {
+							this.toUid = data.toUid;
+							ws.send({
+								data: {
+									id: this.toUid,
+								},
+								type: "to_chat",
+							});
+						});
+						ws.$on("socket_error", () => {
+							this.$Message.error("连接失败");
+						});
+						ws.$on("err_tip", (data) => {
+							this.$Message.error(data.msg);
+						});
+						ws.$on("success", (data) => {
+							this.is_tourist = 0;
+						});
+						ws.$on("timeout", (data) => {
+							setTimeout(() => {
+								this.wsRestart();
+							}, 2000);
+						});
+					})
+					.catch((error) => {
+						setTimeout((res) => {
+							this.wsRestart();
+						}, 2000);
+					});
+			},
+			wsRestart() {
+				this.pageWs = Socket(true, this.kufuToken, this.tourist_uid);
+				this.wsStart();
+			},
+			onLook(id) {
+				window.open(`${location.origin}/home/goods_detail/${id}`);
+			},
+			// 关闭
+			closeChange(msg) {
+				this.change = msg;
+			},
+			// 统一发送处理
+			sendMsg(msn, type) {
+				let obj = {
+					type: "chat",
+					data: {
+						msn,
+						type,
+						is_tourist: this.is_tourist,
+						to_uid: this.toUid,
+						tourist_uid: this.tourist_uid,
+						tourist_avatar: this.tourist_avatar,
+						form_type: this.$wechat.isWeixin() ? 1 : 3,
+					},
+				};
+				this.pageWs.then((ws) => {
+					ws.send(obj);
+				});
+			},
+			// 随机客服
+			getService() {
+				serviceListApi({
+						token: this.kufuToken || ""
+					})
+					.then((res) => {
+						this.serviceData = res.data;
+						this.upperId = 0;
+						this.toUid = res.data.uid;
+						this.tourist_uid = res.data.tourist_uid;
+						this.tourist_avatar = res.data.tourist_avatar;
+						let obj = {
+							data: {
+								id: res.data.uid,
+								tourist_uid: this.tourist_uid,
+							},
+							type: "to_chat",
+						};
+						this.pageWs.then((ws) => {
+							ws.send(obj);
+						});
+						if (this.kufuToken) {
+							this.getRecordList();
+						}
+					})
+					.catch((err) => {
+						// this.$Message.error(err.msg);
+						this.change = true;
+					});
+			},
+			roomClick(event) {
+				// if (
+				//     !event.target.classList.contains("emoji-panel") &&
+				//     !event.target.classList.contains("emoji-btn") &&
+				//     !event.target.classList.contains("icon-biaoqing") &&
+				//     this.emojiShow
+				// ) {
+				//     this.emojiShow = false;
+				// }
+			},
+			// enter 发送
+			ctrlEnter(e) {
+				if (e.keyCode == 13) {
+					e.preventDefault();
+				}
+				if (this.chatCont.trim()) {
+					this.sendMessage();
+				}
+			},
+			// 关闭聊天窗口
+			close() {
+				this.$emit("chat-close");
+			},
+			// 选择表情
+			selectEmoji(data) {
+				// let val = `[${data}]`;
+				// this.chatCont += val;
+				this.emojiShow = false;
+				this.sendMsg(`[${data}]`, 1);
+			},
+			// 聊天表情转换
+			replace_em(str) {
+				str = str.replace(/\[em-([\s\S]*?)\]/g, "<span class='em em-$1'/></span>");
+				return str;
+			},
+			onScroll(event) {
+				if (event.target.scrollTop <= 30) {
+					if (this.kufuToken) {
+						this.getRecordList();
+					}
+				}
+			},
+			// 聊天记录
+			getRecordList() {
+				if (this.loading) {
+					return;
+				}
+				if (this.finished) {
+					return;
+				}
+				this.loading = true;
+				chatListApi({
+						uid: this.serviceData.uid,
+						limit: this.limit,
+						upperId: this.upperId,
+						token: this.kufuToken,
+					})
+					.then((res) => {
+						if (res.data.length === 0) return (this.loading = false);
+						res.data.forEach((el) => {
+							if (el.msn_type == 1) {
+								el.msn = this.replace_em(el.msn);
+							}
+						});
+						let selector = "";
+						if (this.upperId == 0) {
+							selector = `chat_${res.data[res.data.length - 1].id}`;
+						} else {
+							selector = `chat_${this.recordList[0].id}`;
+						}
+
+						this.recordList = [...res.data, ...this.recordList];
+						this.upperId = res.data.length > 0 ? res.data[0].id : 0;
+						this.loading = false;
+						this.finished = res.data.length < this.limit;
+						this.$nextTick(function() {
+							this.setPageScrollTo(selector);
+						});
+					})
+					.catch((err) => {
+						this.$Message.error(err.msg);
+					});
+			},
+			// 设置页面滚动位置
+			setPageScrollTo(selector) {
+				this.$nextTick(() => {
+					if (selector) {
+						setTimeout(() => {
+							let num =
+								parseFloat(document.getElementById(selector).offsetTop) - 60;
+							this.$refs.record.scrollTop = num;
+						}, 0);
+					} else {
+						var container = document.querySelector("#chat_scroll");
+						this.$refs.record.scrollTop = container.offsetHeight;
+						setTimeout((res) => {
+							if (
+								this.$refs.record.scrollTop != this.$refs.scrollBox.offsetHeight
+							) {
+								this.$refs.record.scrollTop = document.querySelector(
+									"#chat_scroll"
+								).offsetHeight;
+							}
+						}, 300);
+					}
+				});
+			},
+			// 表情包显示隐藏
+			emojiSwitch() {
+				this.emojiShow = true;
+			},
+			// 发送消息
+			sendMessage() {
+				this.sendMsg(this.chatCont, 1);
+				this.chatCont = "";
+			},
+			chat(data) {
+				if (data.uid != this.$auth.user.uid && this.audio) {
+					this.audio.play();
+				}
+				this.recordList.push(data);
+				this.$nextTick(() => {
+					this.$refs.record.scrollTop =
+						this.$refs.record.scrollHeight - this.$refs.record.clientHeight;
+				});
+			},
+			sendGoods() {
+				if (this.chatOptions.goodsId) {
+					this.pageWs.then((ws) => {
+						ws.send({
+							data: {
+								msn: this.chatOptions.goodsId,
+								type: 5,
+								to_uid: this.toUid,
+							},
+							type: "to_chat",
+						});
+					});
+				}
+			},
+			sendOrder() {
+				if (this.chatOptions.orderId) {
+					this.pageWs.then((ws) => {
+						ws.send({
+							data: {
+								msn: this.chatOptions.orderId,
+								type: 6,
+								to_uid: this.toUid,
+							},
+							type: "to_chat",
+						});
+					});
+				}
+			},
+			chatEnd() {
+				if (navigator.userAgent.indexOf("MSIE") > 0) {
+					if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
+						window.opener = null;
+						window.close();
+					} else {
+						window.open("", "_top");
+						window.top.close();
+					}
+				} else if (navigator.userAgent.indexOf("Firefox") > 0) {
+					window.location.href = "about:blank ";
+				} else {
+					window.opener = null;
+					window.open("", "_self", "");
+					window.close();
+				}
+			},
+			// 广告
+			getNotice() {
+				getAdvApi().then((res) => {
+					this.notice = res.data.content;
+				});
+			},
+			beforeUpload(file) {
+				this.uploadData = {
+					filename: file,
+					token: this.kufuToken,
+				};
+				let promise = new Promise((resolve) => {
+					this.$nextTick(function() {
+						resolve(true);
+					});
+				});
+				return promise;
+			},
+			handleFormatError(file) {
+				this.$Message.error("上传图片只能是 jpg、jpg、jpeg、gif 格式!");
+			},
+			uploadSuccess(res) {
+				this.sendMsg(res.data.url, 3);
+			},
+			uploadError(error) {
+				this.$message.error(error);
+			},
+		},
+	};
 </script>
 
 <style lang="less" scoped>
-@import "../../../styles/emoji-awesome/css/google.min.css";
-li {
-  list-style-type: none;
-}
-.chat-room {
-  .room {
-    border-radius: 10px;
-    position: fixed;
-    top: calc(50% - 327px);
-    left: calc(50% - 365px);
-    z-index: 999;
-    display: flex;
-    flex-direction: column;
-    width: 730px;
-    height: 654px;
-    background-color: #ffffff;
-    overflow: hidden;
-    box-shadow: 1px 1px 15px 0 rgba(0, 0, 0, 0.1);
-
-    &.win {
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    .head {
-      display: flex;
-      align-items: center;
-      height: 50px;
-      padding-right: 15px;
-      padding-left: 20px;
-      background: linear-gradient(270deg, #1890ff 0%, #3875ea 100%);
-
-      .image {
-        width: 36px;
-        height: 36px;
-        border-radius: 50%;
-        overflow: hidden;
-
-        img {
-          display: block;
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-      }
-
-      .name {
-        flex: 1;
-        min-width: 0;
-        margin-left: 15px;
-        font-size: 16px;
-        color: #ffffff;
-      }
-
-      .iconfont {
-        width: 25px;
-        height: 25px;
-        font-size: 16px;
-        line-height: 25px;
-        text-align: center;
-        color: #ffffff;
-        cursor: pointer;
-      }
-    }
-
-    .main {
-      flex: 1;
-      display: flex;
-      min-height: 0;
-
-      .chat {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        min-width: 0;
-      }
-
-      .record {
-        flex: 1;
-        min-height: 0;
-        overflow-x: hidden;
-        overflow-y: auto;
-
-        &::-webkit-scrollbar {
-          display: none;
-        }
-
-        ul {
-          padding: 20px;
-        }
-
-        li {
-          ~ li {
-            margin-top: 20px;
-          }
-
-          &::after {
-            content: "";
-            display: block;
-            height: 0;
-            clear: both;
-            visibility: hidden;
-          }
-
-          &.right {
-            .avatar {
-              float: right;
-            }
-
-            .content {
-              text-align: right;
-
-              > div {
-                text-align: left;
-              }
-            }
-          }
-        }
-
-        .time-tag {
-          padding-top: 10px;
-          padding-bottom: 30px;
-          text-align: center;
-          color: #999999;
-        }
-
-        .avatar {
-          float: left;
-          width: 40px;
-          height: 40px;
-          border-radius: 50%;
-          overflow: hidden;
-
-          &.right {
-            float: right;
-          }
-
-          img {
-            display: block;
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-          }
-        }
-
-        .content {
-          margin-right: 56px;
-          margin-left: 56px;
-        }
-
-        .text {
-          display: inline-block;
-          min-height: 41px;
-          padding: 10px 12px;
-          border-radius: 10px;
-          background-color: #f5f5f5;
-          font-size: 15px;
-          line-height: 21px;
-          color: #000000;
-        }
-
-        .image {
-          display: inline-block;
-          max-width: 50%;
-          border-radius: 10px;
-          overflow: hidden;
-
-          img {
-            display: block;
-            max-width: 100%;
-          }
-        }
-
-        .goods,
-        .order {
-          display: inline-flex;
-          align-items: center;
-          width: 320px;
-          padding: 10px 13px;
-          border-radius: 10px;
-          background-color: #f5f5f5;
-        }
-
-        .thumb {
-          width: 60px;
-          height: 60px;
-          border-radius: 5px;
-          overflow: hidden;
-
-          img {
-            display: block;
-            width: 100%;
-            height: 100%;
-          }
-        }
-
-        .intro {
-          flex: 1;
-          min-width: 0;
-          margin-left: 10px;
-
-          .name {
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            font-size: 15px;
-            color: #000000;
-          }
-
-          .attr {
-            margin-top: 5px;
-            font-size: 12px;
-            color: #999999;
-
-            span {
-              vertical-align: middle;
-
-              ~ span {
-                margin-left: 10px;
-              }
-            }
-          }
-
-          .group {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-top: 5px;
-
-            .money {
-              font-size: 14px;
-              color: #ff0000;
-            }
-
-            a {
-              font-size: 12px;
-              color: #1890ff;
-            }
-          }
-        }
-      }
-
-      .editor {
-        display: flex;
-        flex-direction: column;
-        height: 162px;
-        border-top: 1px solid #ececec;
-
-        > div {
-          &:first-child {
-            font-size: 0;
-          }
-        }
-
-        button {
-          border: none;
-          background: none;
-          outline: none;
-
-          ~ button {
-            margin-left: 20px;
-          }
-
-          &.end {
-            font-size: 15px;
-          }
-
-          &:hover {
-            color: #1890ff;
-
-            .iconfont {
-              color: #1890ff;
-            }
-          }
-        }
-
-        .editor-hd {
-          position: relative;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          height: 50px;
-          padding-right: 20px;
-          padding-left: 20px;
-
-          .iconfont {
-            line-height: 1;
-            color: #333333;
-          }
-
-          .emoji-panel {
-            position: absolute;
-            bottom: 100%;
-            left: 5px;
-            width: 390px;
-            padding-bottom: 10px;
-            border: 1px solid #ececec;
-            margin-bottom: 5px;
-            background-color: #ffffff;
-            box-shadow: 1px 0 16px 0 rgba(0, 0, 0, 0.05);
-
-            .em {
-              width: 28px;
-              height: 28px;
-              padding: 4px;
-              margin-top: 10px;
-              margin-left: 10px;
-              box-sizing: border-box;
-
-              &:hover {
-                background-color: #ececec;
-              }
-            }
-          }
-        }
-
-        .icon-biaoqing1,
-        .icon-tupian1 {
-          font-size: 22px;
-        }
-
-        .icon-guanji {
-          margin-right: 5px;
-          font-size: 15px;
-        }
-
-        .editor-bd {
-          flex: 1;
-          min-height: 0;
-
-          textarea {
-            display: block;
-            width: 100%;
-            height: 100%;
-            padding-right: 20px;
-            padding-left: 20px;
-            border: none;
-            outline: none;
-            resize: none;
-            white-space: pre-wrap;
-            overflow-wrap: break-word;
-
-            &::-webkit-scrollbar {
-              display: none;
-            }
-          }
-        }
-
-        .editor-ft {
-          display: flex;
-          justify-content: flex-end;
-          align-items: center;
-          padding-right: 20px;
-          padding-bottom: 20px;
-
-          button {
-            width: 68px;
-            height: 26px;
-            border: none;
-            border-radius: 3px;
-            background-color: #3875ea;
-            outline: none;
-            font-size: 13px;
-            color: #ffffff;
-
-            &:disabled {
-              background-color: #cccccc;
-            }
-          }
-        }
-      }
-
-      .notice {
-        display: flex;
-        flex-direction: column;
-        width: 260px;
-        border-left: 1px solid #ececec;
-
-        .rich {
-          flex: 1;
-          min-height: 0;
-          padding: 18px 18px 0;
-          overflow-x: hidden;
-          overflow-y: auto;
-
-          &::-webkit-scrollbar {
-            display: none;
-          }
-
-          /deep/ img {
-            width: 100%;
-          }
-
-          /deep/ video {
-            width: 100%;
-          }
-        }
-
-        .copy {
-          padding-top: 15px;
-          padding-bottom: 15px;
-          font-size: 12px;
-          text-align: center;
-          a {
-            color: #cccccc !important;
-            text-decoration: none;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
+	@import "../../../styles/emoji-awesome/css/google.min.css";
+
+	li {
+		list-style-type: none;
+	}
+
+	.chat-room {
+		.room {
+			border-radius: 10px;
+			position: fixed;
+			top: calc(50% - 327px);
+			left: calc(50% - 365px);
+			z-index: 999;
+			display: flex;
+			flex-direction: column;
+			width: 730px;
+			height: 654px;
+			background-color: #ffffff;
+			overflow: hidden;
+			box-shadow: 1px 1px 15px 0 rgba(0, 0, 0, 0.1);
+
+			&.win {
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+			}
+
+			.head {
+				display: flex;
+				align-items: center;
+				height: 50px;
+				padding-right: 15px;
+				padding-left: 20px;
+				background: linear-gradient(270deg, #1890ff 0%, #3875ea 100%);
+
+				.image {
+					width: 36px;
+					height: 36px;
+					border-radius: 50%;
+					overflow: hidden;
+
+					img {
+						display: block;
+						width: 100%;
+						height: 100%;
+						object-fit: cover;
+					}
+				}
+
+				.name {
+					flex: 1;
+					min-width: 0;
+					margin-left: 15px;
+					font-size: 16px;
+					color: #ffffff;
+				}
+
+				.iconfont {
+					width: 25px;
+					height: 25px;
+					font-size: 16px;
+					line-height: 25px;
+					text-align: center;
+					color: #ffffff;
+					cursor: pointer;
+				}
+			}
+
+			.main {
+				flex: 1;
+				display: flex;
+				min-height: 0;
+
+				.chat {
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					min-width: 0;
+				}
+
+				.record {
+					flex: 1;
+					min-height: 0;
+					overflow-x: hidden;
+					overflow-y: auto;
+
+					&::-webkit-scrollbar {
+						display: none;
+					}
+
+					ul {
+						padding: 20px;
+					}
+
+					li {
+						~li {
+							margin-top: 20px;
+						}
+
+						&::after {
+							content: "";
+							display: block;
+							height: 0;
+							clear: both;
+							visibility: hidden;
+						}
+
+						&.right {
+							.avatar {
+								float: right;
+							}
+
+							.content {
+								text-align: right;
+
+								>div {
+									text-align: left;
+								}
+							}
+						}
+					}
+
+					.time-tag {
+						padding-top: 10px;
+						padding-bottom: 30px;
+						text-align: center;
+						color: #999999;
+					}
+
+					.avatar {
+						float: left;
+						width: 40px;
+						height: 40px;
+						border-radius: 50%;
+						overflow: hidden;
+
+						&.right {
+							float: right;
+						}
+
+						img {
+							display: block;
+							width: 100%;
+							height: 100%;
+							object-fit: cover;
+						}
+					}
+
+					.content {
+						margin-right: 56px;
+						margin-left: 56px;
+					}
+
+					.text {
+						display: inline-block;
+						min-height: 41px;
+						padding: 10px 12px;
+						border-radius: 10px;
+						background-color: #f5f5f5;
+						font-size: 15px;
+						line-height: 21px;
+						color: #000000;
+					}
+
+					.image {
+						display: inline-block;
+						max-width: 50%;
+						border-radius: 10px;
+						overflow: hidden;
+
+						img {
+							display: block;
+							max-width: 100%;
+						}
+					}
+
+					.goods,
+					.order {
+						display: inline-flex;
+						align-items: center;
+						width: 320px;
+						padding: 10px 13px;
+						border-radius: 10px;
+						background-color: #f5f5f5;
+					}
+
+					.thumb {
+						width: 60px;
+						height: 60px;
+						border-radius: 5px;
+						overflow: hidden;
+
+						img {
+							display: block;
+							width: 100%;
+							height: 100%;
+						}
+					}
+
+					.intro {
+						flex: 1;
+						min-width: 0;
+						margin-left: 10px;
+
+						.name {
+							overflow: hidden;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+							font-size: 15px;
+							color: #000000;
+						}
+
+						.attr {
+							margin-top: 5px;
+							font-size: 12px;
+							color: #999999;
+
+							span {
+								vertical-align: middle;
+
+								~span {
+									margin-left: 10px;
+								}
+							}
+						}
+
+						.group {
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							margin-top: 5px;
+
+							.money {
+								font-size: 14px;
+								color: #ff0000;
+							}
+
+							a {
+								font-size: 12px;
+								color: #1890ff;
+							}
+						}
+					}
+				}
+
+				.editor {
+					display: flex;
+					flex-direction: column;
+					height: 162px;
+					border-top: 1px solid #ececec;
+
+					>div {
+						&:first-child {
+							font-size: 0;
+						}
+					}
+
+					button {
+						border: none;
+						background: none;
+						outline: none;
+
+						~button {
+							margin-left: 20px;
+						}
+
+						&.end {
+							font-size: 15px;
+						}
+
+						&:hover {
+							color: #1890ff;
+
+							.iconfont {
+								color: #1890ff;
+							}
+						}
+					}
+
+					.editor-hd {
+						position: relative;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						height: 50px;
+						padding-right: 20px;
+						padding-left: 20px;
+
+						.iconfont {
+							line-height: 1;
+							color: #333333;
+						}
+
+						.emoji-panel {
+							position: absolute;
+							bottom: 100%;
+							left: 5px;
+							width: 390px;
+							padding-bottom: 10px;
+							border: 1px solid #ececec;
+							margin-bottom: 5px;
+							background-color: #ffffff;
+							box-shadow: 1px 0 16px 0 rgba(0, 0, 0, 0.05);
+
+							.em {
+								width: 28px;
+								height: 28px;
+								padding: 4px;
+								margin-top: 10px;
+								margin-left: 10px;
+								box-sizing: border-box;
+
+								&:hover {
+									background-color: #ececec;
+								}
+							}
+						}
+					}
+
+					.icon-biaoqing1,
+					.icon-tupian1 {
+						font-size: 22px;
+					}
+
+					.icon-guanji {
+						margin-right: 5px;
+						font-size: 15px;
+					}
+
+					.editor-bd {
+						flex: 1;
+						min-height: 0;
+
+						textarea {
+							display: block;
+							width: 100%;
+							height: 100%;
+							padding-right: 20px;
+							padding-left: 20px;
+							border: none;
+							outline: none;
+							resize: none;
+							white-space: pre-wrap;
+							overflow-wrap: break-word;
+
+							&::-webkit-scrollbar {
+								display: none;
+							}
+						}
+					}
+
+					.editor-ft {
+						display: flex;
+						justify-content: flex-end;
+						align-items: center;
+						padding-right: 20px;
+						padding-bottom: 20px;
+
+						button {
+							width: 68px;
+							height: 26px;
+							border: none;
+							border-radius: 3px;
+							background-color: #3875ea;
+							outline: none;
+							font-size: 13px;
+							color: #ffffff;
+
+							&:disabled {
+								background-color: #cccccc;
+							}
+						}
+					}
+				}
+
+				.notice {
+					display: flex;
+					flex-direction: column;
+					width: 260px;
+					border-left: 1px solid #ececec;
+
+					.rich {
+						flex: 1;
+						min-height: 0;
+						padding: 18px 18px 0;
+						overflow-x: hidden;
+						overflow-y: auto;
+
+						&::-webkit-scrollbar {
+							display: none;
+						}
+
+						/deep/ img {
+							width: 100%;
+						}
+
+						/deep/ video {
+							width: 100%;
+						}
+					}
+
+					.copy {
+						padding-top: 15px;
+						padding-bottom: 15px;
+						font-size: 12px;
+						text-align: center;
+
+						a {
+							color: #cccccc !important;
+							text-decoration: none;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

src/pages/kefu/index.vue

@@ -1,577 +1,564 @@
 <template>
-    <div class="wrapper-box">
-        <div class="page-account kf">
-            <div class="content">
-                <img :src="copyrightImage" alt="">
-                <div class="desc">
-                    <p class="tit">让客户服务如此简单</p>
-                    <p class="kefu">专业客服系统<br>助力企业打造一流的服务体验</p>
-                </div>
-            </div>
-            <img :src="copyrightImage" alt="" class="copyImg">
-            <div class="container" :class="[ fullWidth > 768 ? 'containerSamll':'containerBig']">
-                <div class="index_from page-account-container">
-                    <div :style="{display:!loginType?'block':'none'}">
-                        <div class="page-account-top">
-                            <div class="page-account-top-logo">客服登录</div>
-                        </div>
-                        <Form ref="formInline" :model="formInline" :rules="ruleInline"
-                              @keyup.enter="handleSubmit('formInline')">
-                            <FormItem prop="username">
-                                <Input type="text" v-model="formInline.username"
-                                       placeholder="请输入客服账号" size="large"/>
-                            </FormItem>
-                            <FormItem prop="password">
-                                <Input type="password" v-model="formInline.password"
-                                       placeholder="请输入客服密码" size="large"/>
-                            </FormItem>
-                            <FormItem>
-                                <Button type="primary" long size="large" @click="handleSubmit('formInline')" class="btn">{{$t('page.login.submit') }}
-                                </Button>
-                            </FormItem>
-                        </Form>
-                        <div class="qh_box" v-if="!isMobile" @click="bindScan"><span class="iconfont iconerweima2"></span></div>
-                    </div>
-                    <div :style="{display:loginType?'block':'none'}">
-                        <div class="page-account-top">
-                            <div class="page-account-top-logo">微信扫码登录</div>
-                        </div>
-                        <div class="code-box">
-                            <div class="qrcode" ref="qrCodeUrl"></div>
-                            <div class="rxpired-box" v-show="rxpired">
-                                <p>已过期</p>
-                                <Button type="primary" @click="bindRefresh">点击刷新</Button>
-                            </div>
-                        </div>
-                        <div class="qh_box" @click="loginType = 0"><span class="iconfont iconzhanghaomima"></span></div>
-                    </div>
-                </div>
-            </div>
-            <!--            <Modal v-model="modals" scrollable footer-hide closable title="请完成安全校验" :mask-closable="false" :z-index="2"-->
-            <!--                   width="342">-->
-            <!--                <div class="captchaBox">-->
-            <!--                    <div id="captcha" style="position: relative" ref="captcha"></div>-->
-            <!--                    <div id="msg"></div>-->
-            <!--                </div>-->
-            <!--            </Modal>-->
-        </div>
-        <div class="foot-box" v-if="copyrightContext">{{copyrightContext}}</div>
-        <div class="foot-box" v-else>Copyright © 2014-2023 <a class="infoUrl" href="https://www.crmeb.com" target="_blank">{{version}}</a></div>
-    </div>
+	<div class="wrapper-box">
+		<div class="page-account kf">
+			<div class="content">
+				<img :src="copyrightImage" alt="">
+				<div class="desc">
+					<p class="tit">让客户服务如此简单</p>
+					<p class="kefu">专业客服系统<br>助力企业打造一流的服务体验</p>
+				</div>
+			</div>
+			<img :src="copyrightImage" alt="" class="copyImg">
+			<div class="container" :class="[ fullWidth > 768 ? 'containerSamll':'containerBig']">
+				<div class="index_from page-account-container">
+					<div :style="{display:!loginType?'block':'none'}">
+						<div class="page-account-top">
+							<div class="page-account-top-logo">客服登录</div>
+						</div>
+						<Form ref="formInline" :model="formInline" :rules="ruleInline"
+							@keyup.enter="handleSubmit('formInline')">
+							<FormItem prop="username">
+								<Input type="text" v-model="formInline.username" placeholder="请输入客服账号" size="large" />
+							</FormItem>
+							<FormItem prop="password">
+								<Input type="password" v-model="formInline.password" placeholder="请输入客服密码"
+									size="large" />
+							</FormItem>
+							<FormItem>
+								<Button type="primary" long size="large" @click="handleSubmit('formInline')"
+									class="btn">{{$t('page.login.submit') }}
+								</Button>
+							</FormItem>
+						</Form>
+						<div class="qh_box" v-if="!isMobile" @click="bindScan"><span
+								class="iconfont iconerweima2"></span></div>
+					</div>
+					<div :style="{display:loginType?'block':'none'}">
+						<div class="page-account-top">
+							<div class="page-account-top-logo">微信扫码登录</div>
+						</div>
+						<div class="code-box">
+							<div class="qrcode" ref="qrCodeUrl"></div>
+							<div class="rxpired-box" v-show="rxpired">
+								<p>已过期</p>
+								<Button type="primary" @click="bindRefresh">点击刷新</Button>
+							</div>
+						</div>
+						<div class="qh_box" @click="loginType = 0"><span class="iconfont iconzhanghaomima"></span></div>
+					</div>
+				</div>
+			</div>
+			<!--            <Modal v-model="modals" scrollable footer-hide closable title="请完成安全校验" :mask-closable="false" :z-index="2"-->
+			<!--                   width="342">-->
+			<!--                <div class="captchaBox">-->
+			<!--                    <div id="captcha" style="position: relative" ref="captcha"></div>-->
+			<!--                    <div id="msg"></div>-->
+			<!--                </div>-->
+			<!--            </Modal>-->
+		</div>
+		<div class="foot-box" v-if="copyrightContext">{{copyrightContext}}</div>
+		<!-- <div class="foot-box" v-else>Copyright © 2014-2023 <a class="infoUrl" href="https://www.crmeb.com" target="_blank">{{version}}</a></div> -->
+	</div>
 </template>
 <script>
-    import { AccountLogin,getSanCodeKey,scanStatus,kefuConfig,kefuCopy } from '@/api/kefu';
-    import mixins from '../account/mixins';
-    import Setting from '@/setting';
-    import util from '@/libs/util';
-    import QRCode from 'qrcodejs2'
-    export default {
-        mixins: [mixins],
-        data () {
-            return {
-              roterPre: Setting.roterPre,
-                fullWidth: document.documentElement.clientWidth,
-                swiperOption: {
-                    pagination: '.swiper-pagination',
-                    autoplay: true
-                },
-                modals: false,
-                autoLogin: true,
-                copyrightContext: '',
-                copyrightImage: '',
-                imgcode: '',
-                formInline: {
-                    username: '',
-                    password: '',
-                    code: ''
-                },
-                ruleInline: {
-                    username: [
-                        { required: true, message: '请输入客服账号', trigger: 'blur' }
-                    ],
-                    password: [
-                        { required: true, message: '请输入客服密码', trigger: 'blur' }
-                    ],
-                    code: [
-                        { required: true, message: '请输入验证码', trigger: 'blur' }
-                    ]
-                },
-                errorNum: 0,
-                jigsaw: null,
-                login_logo: '',
-                swiperList: [],
-                defaultSwiperList: require('@/assets/images/sw.jpg'),
-                loginType:0, // 0 账号 1 扫码
-                codeKey:'',
-                scanTime:'',
-                rxpired:false, // 扫码是否过期
-                isMobile:false,
-                version:'', //版本号
-                isScan:false,
-                timeNum:0
-            }
-        },
-        created () {
-            kefuConfig().then(res=>{
-                this.version = res.data.version
-                if(res.data.site_name){
-                    document.title = res.data.site_name;
-                }
-            })
-            this.isMobile = this.$store.state.admin.layout.isMobile
-            var _this = this;
-            top != window && (top.location.href = location.href);
-            document.onkeydown = function (e) {
-                if (_this.$route.name === 'login') {
-                    let key = window.event.keyCode;
-                    if (key === 13) {
-                        _this.handleSubmit('formInline');
-                    }
-                }
-            };
-            window.addEventListener('resize', this.handleResize)
-            this.getKefuCopy()
-        },
-        watch: {
-            fullWidth (val) {
-                // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
-                if (!this.timer) {
-                    // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
-                    this.screenWidth = val
-                    this.timer = true
-                    let that = this
-                    setTimeout(function () {
-                        // 打印screenWidth变化的值
-                        that.timer = false
-                    }, 400)
-                }
-            },
-            $route (n) {
-                this.captchas();
-            },
-        },
-        mounted: function () {
-            this.captchas();
-        },
-        methods: {
-            // 版权
-            getKefuCopy(){
-                kefuCopy().then(res=>{
-                    this.copyrightContext = res.data.copyrightContext;
-                    this.copyrightImage = res.data.copyrightImage || require('@/assets/images/logo-dark.png');
-                })
-            },
-            // 切换扫码
-            bindScan(){
-                if(!this.isScan){
-                    this.isScan = true
-                    this.getSanCodeKey()
-                }
-                this.loginType = 1
-            },
-            // 生成二维码
-            creatQrCode() {
-                let url= `${window.location.protocol}//${window.location.host}/pages/users/scan_login/index?key=${this.codeKey}`;
-                var qrcode = new QRCode(this.$refs.qrCodeUrl, {
-                    text: url, // 需要转换为二维码的内容
-                    width: 160,
-                    height: 160,
-                    colorDark: '#000000',
-                    colorLight: '#ffffff',
-                    correctLevel: QRCode.CorrectLevel.H
-                })
-            },
-            // 关闭模态框
-            closeModel () {
-                let msg = this.$Message.loading({
-                    content: '登录中...',
-                    duration: 0
-                });
-                AccountLogin({
-                    account: this.formInline.username,
-                    password: this.formInline.password,
-                    imgcode: this.formInline.code
-                }).then(async res => {
-                    msg();
-                    let expires = this.getExpiresTime(res.data.exp_time);
-                    // 记录用户登陆信息
-                    util.cookies.setKefu('uuid', res.data.kefuInfo.uid, {
-                        expires: expires
-                    });
-                    util.cookies.setKefu('token', res.data.token, {
-                        expires: expires
-                    });
-                    util.cookies.setKefu('expires_time', res.data.exp_time, {
-                        expires: expires
-                    });
-                    util.cookies.setKefu('kefuInfo', res.data.kefuInfo, {
-                        expires: expires
-                    });
-                    const db = await this.$store.dispatch('admin/db/database', {
-                        user: true
-                    });
-                    if(this.$store.state.admin.layout.isMobile){
-                        //手机页面
-                        return this.$router.replace({ path: this.$route.query.redirect || `${Setting.routePreKF}/mobile_list` });
-                    }else{
-                        // pc页面
-                       return this.$router.replace({ path: this.$route.query.redirect || `${Setting.routePreKF}/pc_list` });
-                    }
-                }).catch(res => {
-
-                    msg();
-                    let data = res === undefined ? {} : res;
-                    this.errorNum++;
-                    this.captchas();
-                    this.$Message.error(data.msg || '登录失败');
-                    if (this.jigsaw) this.jigsaw.reset();
-                });
-            },
-            getExpiresTime (expiresTime) {
-                let nowTimeNum = Math.round(new Date() / 1000);
-                let expiresTimeNum = expiresTime - nowTimeNum;
-                return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);
-            },
-            closefail () {
-                if (this.jigsaw) this.jigsaw.reset();
-                this.$Message.error('校验错误');
-            },
-            handleResize (event) {
-                this.fullWidth = document.documentElement.clientWidth
-
-            },
-            captchas: function () {
-                this.imgcode = Setting.apiBaseURL + '/captcha_pro?' + Date.parse(new Date());
-            },
-            handleSubmit (name) {
-                this.$refs[name].validate((valid) => {
-                    if (valid) {
-                        this.closeModel();
-                    }
-                })
-            },
-            // 获取客服扫码key
-            getSanCodeKey(){
-                getSanCodeKey().then(res=>{
-                    this.codeKey = res.data.key
-                    this.creatQrCode()
-                    this.scanTime = setInterval(()=>{
-                        this.timeNum++
-                        if(this.timeNum>=60){
-                            this.timeNum = 0
-                            window.clearInterval(this.scanTime)
-                            this.rxpired = true
-                        }else{
-                            this.getScanStatus()
-                        }
-                    },1000)
-                }).catch(error=>{
-                    this.timeNum = 0
-                    window.clearInterval(this.scanTime)
-                    this.rxpired = true
-                    this.$Message.error(error.msg)
-                })
-            },
-            // 扫码登录情况
-            getScanStatus(){
-                scanStatus(this.codeKey).then(async res=>{
-                    // 0 = 二维码过期需要重新获取授权凭证
-                    if(res.data.status == 0){
-                        this.timeNum = 0
-                        window.clearInterval(this.scanTime)
-                        this.rxpired = true
-                    }
-                    // 1=正在扫描
-                    if(res.data.status == 1){
-
-                    }
-                    // 3 扫描成功正在登录
-                    if(res.data.status == 3){
-                        window.clearInterval(this.scanTime)
-                        let expires = this.getExpiresTime(res.data.exp_time);
-                        // 记录用户登陆信息
-                        util.cookies.setKefu('uid', res.data.kefuInfo.uid, {
-                            expires: expires
-                        });
-                        util.cookies.setKefu('token', res.data.token, {
-                            expires: expires
-                        });
-                        util.cookies.setKefu('expires_time', res.data.exp_time, {
-                            expires: expires
-                        });
-                        util.cookies.setKefu('kefuInfo', JSON.stringify(res.data.kefuInfo), {
-                            expires: expires
-                        });
-                        const db = await this.$store.dispatch('admin/db/database', {
-                            user: true
-                        });
-                        // 保存菜单信息
-                        // db.set('menus', res.data.menus).set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info).write();
-                        if(this.$store.state.admin.layout.isMobile){
-                            //手机页面
-                            return this.$router.replace({ path: this.$route.query.redirect || `${Setting.routePreKF}/mobile_list` });
-                        }else{
-                            // pc页面
-                            return this.$router.replace({ path: this.$route.query.redirect || `${Setting.routePreKF}/pc_list` });
-                        }
-                    }
-                }).catch(error=>{
-                    this.$Modal.error({
-                        title: '提示',
-                        content: error.msg
-                    });
-                    this.timeNum = 0
-                    window.clearInterval(this.scanTime)
-                    this.rxpired = true
-                })
-            },
-            // 刷新二维码
-            bindRefresh(){
-                this.$refs.qrCodeUrl.innerHTML = ''
-                this.rxpired = false
-                this.getSanCodeKey()
-            }
-        },
-        beforeCreate () {
-
-        },
-        beforeDestroy: function () {
-            this.timeNum = 0
-            this.$refs.qrCodeUrl.innerHTML = ''
-            window.clearInterval(this.scanTime)
-            window.removeEventListener('resize', this.handleResize);
-            // document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg');
-        }
-    };
+	import {
+		AccountLogin,
+		getSanCodeKey,
+		scanStatus,
+		kefuConfig,
+		kefuCopy
+	} from '@/api/kefu';
+	import mixins from '../account/mixins';
+	import Setting from '@/setting';
+	import util from '@/libs/util';
+	import QRCode from 'qrcodejs2'
+	export default {
+		mixins: [mixins],
+		data() {
+			return {
+				roterPre: Setting.roterPre,
+				fullWidth: document.documentElement.clientWidth,
+				swiperOption: {
+					pagination: '.swiper-pagination',
+					autoplay: true
+				},
+				modals: false,
+				autoLogin: true,
+				copyrightContext: '',
+				copyrightImage: '',
+				imgcode: '',
+				formInline: {
+					username: '',
+					password: '',
+					code: ''
+				},
+				ruleInline: {
+					username: [{
+						required: true,
+						message: '请输入客服账号',
+						trigger: 'blur'
+					}],
+					password: [{
+						required: true,
+						message: '请输入客服密码',
+						trigger: 'blur'
+					}],
+					code: [{
+						required: true,
+						message: '请输入验证码',
+						trigger: 'blur'
+					}]
+				},
+				errorNum: 0,
+				jigsaw: null,
+				login_logo: '',
+				swiperList: [],
+				defaultSwiperList: require('@/assets/images/sw.jpg'),
+				loginType: 0, // 0 账号 1 扫码
+				codeKey: '',
+				scanTime: '',
+				rxpired: false, // 扫码是否过期
+				isMobile: false,
+				version: '', //版本号
+				isScan: false,
+				timeNum: 0
+			}
+		},
+		created() {
+			kefuConfig().then(res => {
+				this.version = res.data.version
+				if (res.data.site_name) {
+					document.title = res.data.site_name;
+				}
+			})
+			this.isMobile = this.$store.state.admin.layout.isMobile
+			var _this = this;
+			top != window && (top.location.href = location.href);
+			document.onkeydown = function(e) {
+				if (_this.$route.name === 'login') {
+					let key = window.event.keyCode;
+					if (key === 13) {
+						_this.handleSubmit('formInline');
+					}
+				}
+			};
+			window.addEventListener('resize', this.handleResize)
+			this.getKefuCopy()
+		},
+		watch: {
+			fullWidth(val) {
+				// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+				if (!this.timer) {
+					// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
+					this.screenWidth = val
+					this.timer = true
+					let that = this
+					setTimeout(function() {
+						// 打印screenWidth变化的值
+						that.timer = false
+					}, 400)
+				}
+			},
+			$route(n) {
+				this.captchas();
+			},
+		},
+		mounted: function() {
+			this.captchas();
+		},
+		methods: {
+			// 版权
+			getKefuCopy() {
+				kefuCopy().then(res => {
+					this.copyrightContext = res.data.copyrightContext;
+					this.copyrightImage = res.data.copyrightImage || require('@/assets/images/logo-dark.png');
+				})
+			},
+			// 切换扫码
+			bindScan() {
+				if (!this.isScan) {
+					this.isScan = true
+					this.getSanCodeKey()
+				}
+				this.loginType = 1
+			},
+			// 生成二维码
+			creatQrCode() {
+				let url =
+					`${window.location.protocol}//${window.location.host}/pages/users/scan_login/index?key=${this.codeKey}`;
+				var qrcode = new QRCode(this.$refs.qrCodeUrl, {
+					text: url, // 需要转换为二维码的内容
+					width: 160,
+					height: 160,
+					colorDark: '#000000',
+					colorLight: '#ffffff',
+					correctLevel: QRCode.CorrectLevel.H
+				})
+			},
+			// 关闭模态框
+			closeModel() {
+				let msg = this.$Message.loading({
+					content: '登录中...',
+					duration: 0
+				});
+				AccountLogin({
+					account: this.formInline.username,
+					password: this.formInline.password,
+					imgcode: this.formInline.code
+				}).then(async res => {
+					msg();
+					let expires = this.getExpiresTime(res.data.exp_time);
+					// 记录用户登陆信息
+					util.cookies.setKefu('uuid', res.data.kefuInfo.uid, {
+						expires: expires
+					});
+					util.cookies.setKefu('token', res.data.token, {
+						expires: expires
+					});
+					util.cookies.setKefu('expires_time', res.data.exp_time, {
+						expires: expires
+					});
+					util.cookies.setKefu('kefuInfo', res.data.kefuInfo, {
+						expires: expires
+					});
+					const db = await this.$store.dispatch('admin/db/database', {
+						user: true
+					});
+					if (this.$store.state.admin.layout.isMobile) {
+						//手机页面
+						return this.$router.replace({
+							path: this.$route.query.redirect || `${Setting.routePreKF}/mobile_list`
+						});
+					} else {
+						// pc页面
+						return this.$router.replace({
+							path: this.$route.query.redirect || `${Setting.routePreKF}/pc_list`
+						});
+					}
+				}).catch(res => {
+
+					msg();
+					let data = res === undefined ? {} : res;
+					this.errorNum++;
+					this.captchas();
+					this.$Message.error(data.msg || '登录失败');
+					if (this.jigsaw) this.jigsaw.reset();
+				});
+			},
+			getExpiresTime(expiresTime) {
+				let nowTimeNum = Math.round(new Date() / 1000);
+				let expiresTimeNum = expiresTime - nowTimeNum;
+				return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);
+			},
+			closefail() {
+				if (this.jigsaw) this.jigsaw.reset();
+				this.$Message.error('校验错误');
+			},
+			handleResize(event) {
+				this.fullWidth = document.documentElement.clientWidth
+
+			},
+			captchas: function() {
+				this.imgcode = Setting.apiBaseURL + '/captcha_pro?' + Date.parse(new Date());
+			},
+			handleSubmit(name) {
+				this.$refs[name].validate((valid) => {
+					if (valid) {
+						this.closeModel();
+					}
+				})
+			},
+			// 获取客服扫码key
+			getSanCodeKey() {
+				getSanCodeKey().then(res => {
+					this.codeKey = res.data.key
+					this.creatQrCode()
+					this.scanTime = setInterval(() => {
+						this.timeNum++
+						if (this.timeNum >= 60) {
+							this.timeNum = 0
+							window.clearInterval(this.scanTime)
+							this.rxpired = true
+						} else {
+							this.getScanStatus()
+						}
+					}, 1000)
+				}).catch(error => {
+					this.timeNum = 0
+					window.clearInterval(this.scanTime)
+					this.rxpired = true
+					this.$Message.error(error.msg)
+				})
+			},
+			// 扫码登录情况
+			getScanStatus() {
+				scanStatus(this.codeKey).then(async res => {
+					// 0 = 二维码过期需要重新获取授权凭证
+					if (res.data.status == 0) {
+						this.timeNum = 0
+						window.clearInterval(this.scanTime)
+						this.rxpired = true
+					}
+					// 1=正在扫描
+					if (res.data.status == 1) {
+
+					}
+					// 3 扫描成功正在登录
+					if (res.data.status == 3) {
+						window.clearInterval(this.scanTime)
+						let expires = this.getExpiresTime(res.data.exp_time);
+						// 记录用户登陆信息
+						util.cookies.setKefu('uid', res.data.kefuInfo.uid, {
+							expires: expires
+						});
+						util.cookies.setKefu('token', res.data.token, {
+							expires: expires
+						});
+						util.cookies.setKefu('expires_time', res.data.exp_time, {
+							expires: expires
+						});
+						util.cookies.setKefu('kefuInfo', JSON.stringify(res.data.kefuInfo), {
+							expires: expires
+						});
+						const db = await this.$store.dispatch('admin/db/database', {
+							user: true
+						});
+						// 保存菜单信息
+						// db.set('menus', res.data.menus).set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info).write();
+						if (this.$store.state.admin.layout.isMobile) {
+							//手机页面
+							return this.$router.replace({
+								path: this.$route.query.redirect || `${Setting.routePreKF}/mobile_list`
+							});
+						} else {
+							// pc页面
+							return this.$router.replace({
+								path: this.$route.query.redirect || `${Setting.routePreKF}/pc_list`
+							});
+						}
+					}
+				}).catch(error => {
+					this.$Modal.error({
+						title: '提示',
+						content: error.msg
+					});
+					this.timeNum = 0
+					window.clearInterval(this.scanTime)
+					this.rxpired = true
+				})
+			},
+			// 刷新二维码
+			bindRefresh() {
+				this.$refs.qrCodeUrl.innerHTML = ''
+				this.rxpired = false
+				this.getSanCodeKey()
+			}
+		},
+		beforeCreate() {
+
+		},
+		beforeDestroy: function() {
+			this.timeNum = 0
+			this.$refs.qrCodeUrl.innerHTML = ''
+			window.clearInterval(this.scanTime)
+			window.removeEventListener('resize', this.handleResize);
+			// document.getElementsByTagName('canvas')[0].removeAttribute('class', 'index_bg');
+		}
+	};
 </script>
 <style scoped lang="stylus">
-    .page-account {
-        // display: flex;
-        width: 100%;
-        background-image: url('~@/assets/images/kfbg.jpg');
-        background-size: cover;
-        background-position: center;
-        // flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        overflow: auto;
-        flex-direction: row
-    }
-    .code-box
-        position relative
-        display flex
-        align-items center
-        justify-content center
-        .qrcode
-            display flex
-            align-items center
-            justify-content center
-            width 180px
-            height 180px
-            border 1px solid #E5E5E6
-        .rxpired-box
-            display flex
-            flex-direction column
-            align-items center
-            justify-content center
-            position absolute
-            left 50%
-            top 50%
-            transform translate(-50%,-50%)
-            width 160px
-            height 160px
-            background rgba(0,0,0,0.6)
-            p
-                margin-bottom 10px
-                font-size 15px
-                color #fff
-    .page-account-top-logo
-        color #000000
-        font-size 21px
-    .wrapper-box
-        display flex
-        flex-direction column
-        height: 100vh
-        .foot-box
-            padding: 10px 20px;
-            font-size 14px
-            color #666666
-            text-align right
-            box-sizing border-box
-            background-color rgba(249,248,254,0.8)
-    .page-account {
-        display: flex;
-        flex 1
-    }
-    .infoUrl{
-        margin :0 !important;
-        color:#666!important;
-        &:hover{
-            color:#1890ff!important;
-        }
-    }
-
-    .page-account .code {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .page-account .code .pictrue {
-        height: 40px;
-    }
-
-    .swiperPross {
-        border-radius: 6px 0px 0px 6px;
-    }
-
-    .swiperPross, .swiperPic, .swiperPic img {
-        width: 510px;
-        height: 100%;
-    }
-
-    .swiperPic img {
-        width: 100%;
-        height: 100%;
-    }
-
-    .container {
-        height: 400px !important;
-        padding: 0 !important;
-        /*overflow: hidden;*/
-        border-radius: 6px;
-        z-index: 1;
-        display: flex;
-    }
-
-    .containerSamll {
-        width: 384px !important;
-        // margin-left 30%
-        background: #fff !important;
-    }
-
-    .containerBig {
-        width: 90%;
-        padding-bottom 20px
-        margin-top: 84px;
-        background: #f7f7f7 !important;
-        height auto!important
-        box-shadow: 0px 3px 20px rgba(0, 20, 41, 0.06);
-    }
-
-    .index_from {
-        position: relative;
-        padding: 40px 40px 32px 40px;
-        height: 400px;
-        width 100%
-        box-sizing: border-box;
-    }
-    .containerBig .index_from{
-        padding 20px
-        height auto!important
-    }
-    .index_from .qh_box
-        position:absolute;
-        right 12px
-        top 0
-        cursor pointer
-        .iconfont
-            color #265BED
-            font-size 36px
-
-
-    .page-account-top {
-        padding: 20px 0 50px !important;
-        box-sizing: border-box !important;
-        display: flex;
-        justify-content: center;
-    }
-
-    .page-account-container {
-        border-radius: 0px 6px 6px 0px;
-    }
-
-    .btn {
-        background: #265BED;
-    }
-
-    .captchaBox {
-        width: 310px;
-    }
-
-    input {
-        display: block;
-        width: 290px;
-        line-height: 40px;
-        margin: 10px 0;
-        padding: 0 10px;
-        outline: none;
-        border: 1px solid #c8cccf;
-        border-radius: 4px;
-        color: #6a6f77;
-    }
-
-    #msg {
-        width: 100%;
-        line-height: 40px;
-        font-size: 14px;
-        text-align: center;
-    }
-
-    a:link, a:visited, a:hover, a:active {
-        margin-left: 100px;
-        color: #0366D6;
-    }
-
-    .index_from >>> .ivu-input-large
-        font-size:14px!important
+	.page-account {
+		// display: flex;
+		width: 100%;
+		background-image: url('~@/assets/images/kfbg.jpg');
+		background-size: cover;
+		background-position: center;
+		// flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 100vh;
+		overflow: auto;
+		flex-direction: row
+	}
+
+	.code-box position relative display flex align-items center justify-content center .qrcode display flex align-items center justify-content center width 180px height 180px border 1px solid #E5E5E6 .rxpired-box display flex flex-direction column align-items center justify-content center position absolute left 50% top 50% transform translate(-50%, -50%) width 160px height 160px background rgba(0, 0, 0, 0.6) p margin-bottom 10px font-size 15px color #fff .page-account-top-logo color #000000 font-size 21px .wrapper-box display flex flex-direction column height: 100vh .foot-box padding: 10px 20px;
+
+	font-size 14px color #666666 text-align right box-sizing border-box background-color rgba(249, 248, 254, 0.8) .page-account {
+		display: flex;
+		flex 1
+	}
+
+	.infoUrl {
+		margin: 0 !important;
+		color: #666 !important;
+
+		&:hover {
+			color: #1890ff !important;
+		}
+	}
+
+	.page-account .code {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.page-account .code .pictrue {
+		height: 40px;
+	}
+
+	.swiperPross {
+		border-radius: 6px 0px 0px 6px;
+	}
+
+	.swiperPross,
+	.swiperPic,
+	.swiperPic img {
+		width: 510px;
+		height: 100%;
+	}
+
+	.swiperPic img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.container {
+		height: 400px !important;
+		padding: 0 !important;
+		/*overflow: hidden;*/
+		border-radius: 6px;
+		z-index: 1;
+		display: flex;
+	}
+
+	.containerSamll {
+		width: 384px !important;
+		// margin-left 30%
+		background: #fff !important;
+	}
+
+	.containerBig {
+		width: 90%;
+		padding-bottom 20px margin-top: 84px;
+		background: #f7f7f7 !important;
+		height auto !important box-shadow: 0px 3px 20px rgba(0, 20, 41, 0.06);
+	}
+
+	.index_from {
+		position: relative;
+		padding: 40px 40px 32px 40px;
+		height: 400px;
+		width 100% box-sizing: border-box;
+	}
+
+	.containerBig .index_from {
+		padding 20px height auto !important
+	}
 
+	.index_from .qh_box position:absolute;
+
+	right 12px top 0 cursor pointer .iconfont color #265BED font-size 36px .page-account-top {
+		padding: 20px 0 50px !important;
+		box-sizing: border-box !important;
+		display: flex;
+		justify-content: center;
+	}
+
+	.page-account-container {
+		border-radius: 0px 6px 6px 0px;
+	}
+
+	.btn {
+		background: #265BED;
+	}
+
+	.captchaBox {
+		width: 310px;
+	}
+
+	input {
+		display: block;
+		width: 290px;
+		line-height: 40px;
+		margin: 10px 0;
+		padding: 0 10px;
+		outline: none;
+		border: 1px solid #c8cccf;
+		border-radius: 4px;
+		color: #6a6f77;
+	}
+
+	#msg {
+		width: 100%;
+		line-height: 40px;
+		font-size: 14px;
+		text-align: center;
+	}
+
+	a:link,
+	a:visited,
+	a:hover,
+	a:active {
+		margin-left: 100px;
+		color: #0366D6;
+	}
+
+	.index_from>>>.ivu-input-large font-size:14px !important
 </style>
 <style>
-    @media screen and (min-width:320px) and (max-width:960px){
-        .page-account {
-            background-image: url("~@/assets/images/m_bg.png") !important;
-            background-size: 100% auto !important;
-            background-repeat: no-repeat;
-            background-position: left top !important;
-            position: relative;
-        }
-        .page-account .copyImg{
-            display:block;
-            width: 59px;
-            height: 34px;
-            position:absolute;
-            top:53px;
-            left:28px;
-        }
-        .page-account .content {
-            display: none;
-        }
-        .index_from{
-            box-shadow: 0px 3px 20px rgba(0, 20, 41, 0.06);
-            background: #fff;
-        }
-        .wrapper-box .foot-box{
-            padding: 20px 64px !important;
-            color: #ADADAD !important;
-            font-size: .22rem !important;
-        }
-        .containerBig{
-            width: 86% !important;
-            border-radius: .2rem !important;
-            overflow: hidden;
-        }
-        .btn{
-            background: linear-gradient(90deg, #3875EA 0%, #1890FC 100%) !important;
-
-            border-radius: .41rem;
-        }
-        .ivu-input{
-            border: 1px solid #dcdee2;
-            -webkit-appearance:none;/*去除阴影边框*/
-            outline: none;
-            -webkit-tap-highlight-color:rgba(0,0,0,0);/*点击高亮的颜色*/
-        }
-    }
-</style>
+	@media screen and (min-width:320px) and (max-width:960px) {
+		.page-account {
+			background-image: url("~@/assets/images/m_bg.png") !important;
+			background-size: 100% auto !important;
+			background-repeat: no-repeat;
+			background-position: left top !important;
+			position: relative;
+		}
+
+		.page-account .copyImg {
+			display: block;
+			width: 59px;
+			height: 34px;
+			position: absolute;
+			top: 53px;
+			left: 28px;
+		}
+
+		.page-account .content {
+			display: none;
+		}
+
+		.index_from {
+			box-shadow: 0px 3px 20px rgba(0, 20, 41, 0.06);
+			background: #fff;
+		}
+
+		.wrapper-box .foot-box {
+			padding: 20px 64px !important;
+			color: #ADADAD !important;
+			font-size: .22rem !important;
+		}
+
+		.containerBig {
+			width: 86% !important;
+			border-radius: .2rem !important;
+			overflow: hidden;
+		}
+
+		.btn {
+			background: linear-gradient(90deg, #3875EA 0%, #1890FC 100%) !important;
+
+			border-radius: .41rem;
+		}
+
+		.ivu-input {
+			border: 1px solid #dcdee2;
+			-webkit-appearance: none;
+			/*去除阴影边框*/
+			outline: none;
+			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+			/*点击高亮的颜色*/
+		}
+	}
+</style>

src/pages/notify/smsConfig/tableList.vue

@@ -1,971 +1,860 @@
 <template>
-  <div>
-    <!-- <Card :bordered="false" dis-hover> -->
-    <div class="new_tab">
-      <Tabs v-model="isChecked" @on-click="onChangeType">
-        <TabPane label="商品采集" name="4"></TabPane>
-        <TabPane label="短信" name="1"></TabPane>
-        <TabPane label="物流查询" name="3"></TabPane>
-        <TabPane label="电子面单打印" name="2"></TabPane>
-      </Tabs>
-    </div>
-    <!--短信列表-->
-    <div class="note" v-if="isChecked === '1' && sms.open === 1">
-      <div class="acea-row row-between-wrapper">
-        <div>
-          <span>短信状态：</span>
-          <Select v-model="tableFrom.type" style="width: 250px" @on-change="selectChange(tableFrom.type)">
-            <Option value="" >全部</Option>
-            <Option value="1" >成功</Option>
-            <Option value="2" >失败</Option>
-            <Option value="0" >发送中</Option>
-          </Select>
-        </div>
-        <div>
-          <Button type="primary" @click="shortMes">短信模板</Button>
-          <Button class="ml20" @click="editSign"
-          >修改签名</Button
-          >
-        </div>
-      </div>
-      <Table
-          :columns="columns1"
-          :data="tableList"
-          :loading="loading"
-          highlight-row
-          no-userFrom-text="暂无数据"
-          no-filtered-userFrom-text="暂无筛选结果"
-          class="mt25"
-      ></Table>
-      <div class="acea-row row-right page">
-        <Page
-            :total="total"
-            :current="tableFrom.page"
-            show-elevator
-            show-total
-            @on-change="pageChange"
-            :page-size="tableFrom.limit"
-        />
-      </div>
-    </div>
-    <!--商品采集，物流，电子面单列表-->
-    <div
-        v-else-if="
+	<div>
+		<!-- <Card :bordered="false" dis-hover> -->
+		<div class="new_tab">
+			<Tabs v-model="isChecked" @on-click="onChangeType">
+				<TabPane label="商品采集" name="4"></TabPane>
+				<TabPane label="短信" name="1"></TabPane>
+				<TabPane label="物流查询" name="3"></TabPane>
+				<TabPane label="电子面单打印" name="2"></TabPane>
+			</Tabs>
+		</div>
+		<!--短信列表-->
+		<div class="note" v-if="isChecked === '1' && sms.open === 1">
+			<div class="acea-row row-between-wrapper">
+				<div>
+					<span>短信状态：</span>
+					<Select v-model="tableFrom.type" style="width: 250px" @on-change="selectChange(tableFrom.type)">
+						<Option value="">全部</Option>
+						<Option value="1">成功</Option>
+						<Option value="2">失败</Option>
+						<Option value="0">发送中</Option>
+					</Select>
+				</div>
+				<div>
+					<Button type="primary" @click="shortMes">短信模板</Button>
+					<Button class="ml20" @click="editSign">修改签名</Button>
+				</div>
+			</div>
+			<Table :columns="columns1" :data="tableList" :loading="loading" highlight-row no-userFrom-text="暂无数据"
+				no-filtered-userFrom-text="暂无筛选结果" class="mt25"></Table>
+			<div class="acea-row row-right page">
+				<Page :total="total" :current="tableFrom.page" show-elevator show-total @on-change="pageChange"
+					:page-size="tableFrom.limit" />
+			</div>
+		</div>
+		<!--商品采集，物流，电子面单列表-->
+		<div v-else-if="
           (isChecked === '3' && query.open === 1) ||
           (isChecked === '4' && copy.open === 1) ||
           (isChecked === '2' && dump.open === 1)
-        "
-    >
-      <Table
-          :columns="columns2"
-          :data="tableList"
-          :loading="loading"
-          highlight-row
-          no-userFrom-text="暂无数据"
-          no-filtered-userFrom-text="暂无筛选结果"
-      >
-        <template
-            slot-scope="{ row }"
-            slot="num"
-            v-if="isChecked === '3' && query.open === 1"
-        >
-          <div>{{ row.content.num }}</div>
-        </template>
-        <template slot-scope="{ row }" slot="url">
-          <div style="padding-right: 100px;">{{row.url}}</div>
-        </template>
-      </Table>
-      <div class="acea-row row-right page">
-        <Page
-            :total="total"
-            :current="tableFrom.page"
-            show-elevator
-            show-total
-            @on-change="pageChangeOther"
-            :page-size="tableFrom.limit"
-        />
-      </div>
-    </div>
-    <!--无开通-->
-    <div v-else>
-      <!--开通按钮-->
-      <div
-          v-if="
+        ">
+			<Table :columns="columns2" :data="tableList" :loading="loading" highlight-row no-userFrom-text="暂无数据"
+				no-filtered-userFrom-text="暂无筛选结果">
+				<template slot-scope="{ row }" slot="num" v-if="isChecked === '3' && query.open === 1">
+					<div>{{ row.content.num }}</div>
+				</template>
+				<template slot-scope="{ row }" slot="url">
+					<div style="padding-right: 100px;">{{row.url}}</div>
+				</template>
+			</Table>
+			<div class="acea-row row-right page">
+				<Page :total="total" :current="tableFrom.page" show-elevator show-total @on-change="pageChangeOther"
+					:page-size="tableFrom.limit" />
+			</div>
+		</div>
+		<!--无开通-->
+		<div v-else>
+			<!--开通按钮-->
+			<div v-if="
             (isChecked === '1' && !isSms) ||
             ((isChecked === '2' || isChecked === '3') && !isDumpOpen) ||
             (isChecked === '4' && !isCopy)
-          "
-          class="wuBox acea-row row-column-around row-middle"
-      >
-        <div class="wuTu"><img src="../../../assets/images/wutu.png" /></div>
-        <span v-if="isChecked === '1'">
-            <span class="wuSp1">短信服务未开通哦</span>
-            <span class="wuSp2"
-            >点击立即开通按钮，即可使用短信服务哦～～～</span
-            >
-          </span>
-        <span v-if="isChecked === '4'">
-            <span class="wuSp1">商品采集服务未开通哦</span>
-            <span class="wuSp2"
-            >点击立即开通按钮，即可使用商品采集服务哦～～～</span
-            >
-          </span>
-        <span v-if="isChecked === '3'">
-            <span class="wuSp1">物流查询未开通哦</span>
-            <span class="wuSp2"
-            >点击立即开通按钮，即可使用物流查询服务哦～～～</span
-            >
-          </span>
-        <span v-if="isChecked === '2'">
-            <span class="wuSp1">电子面单打印未开通哦</span>
-            <span class="wuSp2"
-            >点击立即开通按钮，即可使用电子面单打印服务哦～～～</span
-            >
-          </span>
-        <Button size="default" type="primary" @click="onOpen"
-        >立即开通</Button
-        >
-      </div>
-      <!-- <div v-if="(isChecked === '1' && !isSms) || ((isChecked === '2' || isChecked === '3') && !isDump) || (isChecked === '4' && !isCopy)" class="wuBox acea-row row-column-around row-middle">
+          " class="wuBox acea-row row-column-around row-middle">
+				<div class="wuTu"><img src="../../../assets/images/wutu.png" /></div>
+				<span v-if="isChecked === '1'">
+					<span class="wuSp1">短信服务未开通哦</span>
+					<span class="wuSp2">点击立即开通按钮，即可使用短信服务哦～～～</span>
+				</span>
+				<span v-if="isChecked === '4'">
+					<span class="wuSp1">商品采集服务未开通哦</span>
+					<span class="wuSp2">点击立即开通按钮，即可使用商品采集服务哦～～～</span>
+				</span>
+				<span v-if="isChecked === '3'">
+					<span class="wuSp1">物流查询未开通哦</span>
+					<span class="wuSp2">点击立即开通按钮，即可使用物流查询服务哦～～～</span>
+				</span>
+				<span v-if="isChecked === '2'">
+					<span class="wuSp1">电子面单打印未开通哦</span>
+					<span class="wuSp2">点击立即开通按钮，即可使用电子面单打印服务哦～～～</span>
+				</span>
+				<Button size="default" type="primary" @click="onOpen">立即开通</Button>
+			</div>
+			<!-- <div v-if="(isChecked === '1' && !isSms) || ((isChecked === '2' || isChecked === '3') && !isDump) || (isChecked === '4' && !isCopy)" class="wuBox acea-row row-column-around row-middle">
                   <div class="wuTu"><img src="../../../assets/images/wutu.png"></div>
                   <span class="wuSp1">短信服务未开通哦</span>
                   <span class="wuSp2">点击立即开通按钮，即可使用短信服务哦～～～</span>
                   <Button size="default" type="primary" @click="onOpen">立即开通</Button>
               </div> -->
-      <!--短信立即开通-->
-      <div class="smsBox" v-if="isSms && isChecked === '1'">
-        <div class="index_from page-account-container">
-          <div class="page-account-top">
-            <span class="page-account-top-tit">开通短信服务</span>
-          </div>
-          <Form
-              ref="formInline"
-              :model="formInline"
-              :rules="ruleInline"
-              @submit.native.prevent
-              @keyup.enter="handleSubmit('formInline')"
-          >
-            <FormItem prop="sign">
-              <Input
-                  type="text"
-                  v-model="formInline.sign"
-                  prefix="ios-contact-outline"
-                  placeholder="请输入短信签名"
-              />
-            </FormItem>
-            <FormItem class="maxInpt">
-              <Button
-                  type="primary"
-                  long
-                  size="default"
-                  @click="handleSubmit('formInline')"
-                  class="btn"
-              >立即开通</Button
-              >
-            </FormItem>
-          </Form>
-        </div>
-      </div>
-      <!--电子面单立即开通-->
-      <div
-          class="smsBox"
-          v-if="isDumpOpen && (isChecked === '2' || isChecked === '3')"
-      >
-        <div class="index_from page-account-container">
-          <div class="page-account-top">
-              <span class="page-account-top-tit" v-if="isChecked === '2'"
-              >开通电子面单服务</span
-              >
-            <span class="page-account-top-tit" v-if="isChecked === '3'"
-            >开通物流查询服务</span
-            >
-            <!-- <span class="page-account-top-tit">开通短信服务</span> -->
-          </div>
-          <Form
-              ref="formInlineDump"
-              :model="formInlineDump"
-              :rules="ruleInlineDump"
-              @submit.native.prevent
-              @keyup.enter="handleSubmitDump('formInlineDump')"
-          >
-            <FormItem prop="com" class="maxInpt">
-              <Select
-                  v-model="formInlineDump.com"
-                  placeholder="请选择快递公司"
-                  @on-change="onChangeExport"
-                  style="text-align: left"
-              >
-                <Option
-                    v-for="(item, index) in exportList"
-                    :value="item.code"
-                    :key="index"
-                >{{ item.name }}</Option
-                >
-              </Select>
-            </FormItem>
-            <FormItem prop="temp_id" class="tempId maxInpt">
-              <div class="acea-row">
-                <Select
-                    v-model="formInlineDump.temp_id"
-                    placeholder="请选择电子面单模板"
-                    style="text-align: left"
-                    :class="[formInlineDump.temp_id ? 'width9' : 'width10']"
-                    @on-change="onChangeImg"
-                >
-                  <Option
-                      v-for="(item, index) in exportTempList"
-                      :value="item.temp_id"
-                      :key="index"
-                  >{{ item.title }}</Option
-                  >
-                </Select>
-                <viewer v-if="formInlineDump.temp_id">
-                  <span class="tempImg">预览</span>
-                  <div class="tabBox_img">
-                    <img v-lazy="tempImg" />
-                  </div>
-                </viewer>
-              </div>
-            </FormItem>
-            <FormItem prop="to_name" class="maxInpt">
-              <Input
-                  type="text"
-                  v-model="formInlineDump.to_name"
-                  prefix="ios-contact-outline"
-                  placeholder="请填写寄件人姓名"
-              />
-            </FormItem>
-            <FormItem prop="to_tel" class="maxInpt">
-              <Input
-                  type="text"
-                  v-model="formInlineDump.to_tel"
-                  prefix="ios-contact-outline"
-                  placeholder="请填写寄件人电话"
-              />
-            </FormItem>
-            <FormItem prop="to_address" class="maxInpt">
-              <Input
-                  type="text"
-                  v-model="formInlineDump.to_address"
-                  prefix="ios-contact-outline"
-                  placeholder="请填写寄件人详细地址"
-              />
-            </FormItem>
-            <FormItem prop="siid" class="maxInpt">
-              <Input
-                  type="text"
-                  v-model="formInlineDump.siid"
-                  prefix="ios-contact-outline"
-                  placeholder="请填写云打印编号"
-              />
-            </FormItem>
-            <FormItem class="maxInpt">
-              <Button
-                  type="primary"
-                  long
-                  size="default"
-                  @click="handleSubmitDump('formInlineDump')"
-                  class="btn"
-              >立即开通</Button
-              >
-            </FormItem>
-          </Form>
-        </div>
-      </div>
-    </div>
-    <!-- </Card> -->
-    <Modal
-        v-model="modals"
-        footer-hide
-        scrollable
-        closable
-        title="短信账户签名修改"
-        class="order_box"
-        @on-cancel="cancel('formInline')"
-    >
-      <Form
-          ref="formInline"
-          :model="formInline"
-          :rules="ruleInline"
-          :label-width="100"
-          @submit.native.prevent
-      >
-        <FormItem>
-          <Input
-              v-model="accountInfo.account"
-              disabled
-              prefix="ios-person-outline"
-              size="large"
-              class="input-add"
-          ></Input>
-        </FormItem>
-        <FormItem prop="phone">
-          <Input
-              disabled
-              v-model="formInline.phone"
-              prefix="ios-call-outline"
-              placeholder="请输入您的手机号"
-              size="large"
-              class="input-add"
-          ></Input>
-        </FormItem>
-        <FormItem>
-          <Input
-              disabled
-              v-model="sign"
-              prefix="ios-document-outline"
-              placeholder="请输入短信签名，例如：CRMEB"
-              size="large"
-              class="input-add"
-          ></Input>
-        </FormItem>
-        <FormItem prop="sign">
-          <!--<Icon type="   ios-calendar-outline" />-->
-          <Input
-              v-model="formInline.sign"
-              prefix="ios-document-outline"
-              placeholder="请输入短信签名，例如：CRMEB"
-              size="large"
-              class="input-add"
-          ></Input>
-        </FormItem>
-        <FormItem prop="code">
-          <div class="code acea-row row-middle" style="width: 87%;">
-            <Input
-                type="text"
-                v-model="formInline.code"
-                prefix="ios-keypad-outline"
-                placeholder="验证码"
-                size="large"
-                style="width: 75%"
-            />
-            <Button :disabled="!this.canClick" @click="cutDown" size="large">{{
+			<!--短信立即开通-->
+			<div class="smsBox" v-if="isSms && isChecked === '1'">
+				<div class="index_from page-account-container">
+					<div class="page-account-top">
+						<span class="page-account-top-tit">开通短信服务</span>
+					</div>
+					<Form ref="formInline" :model="formInline" :rules="ruleInline" @submit.native.prevent
+						@keyup.enter="handleSubmit('formInline')">
+						<FormItem prop="sign">
+							<Input type="text" v-model="formInline.sign" prefix="ios-contact-outline"
+								placeholder="请输入短信签名" />
+						</FormItem>
+						<FormItem class="maxInpt">
+							<Button type="primary" long size="default" @click="handleSubmit('formInline')"
+								class="btn">立即开通</Button>
+						</FormItem>
+					</Form>
+				</div>
+			</div>
+			<!--电子面单立即开通-->
+			<div class="smsBox" v-if="isDumpOpen && (isChecked === '2' || isChecked === '3')">
+				<div class="index_from page-account-container">
+					<div class="page-account-top">
+						<span class="page-account-top-tit" v-if="isChecked === '2'">开通电子面单服务</span>
+						<span class="page-account-top-tit" v-if="isChecked === '3'">开通物流查询服务</span>
+						<!-- <span class="page-account-top-tit">开通短信服务</span> -->
+					</div>
+					<Form ref="formInlineDump" :model="formInlineDump" :rules="ruleInlineDump" @submit.native.prevent
+						@keyup.enter="handleSubmitDump('formInlineDump')">
+						<FormItem prop="com" class="maxInpt">
+							<Select v-model="formInlineDump.com" placeholder="请选择快递公司" @on-change="onChangeExport"
+								style="text-align: left">
+								<Option v-for="(item, index) in exportList" :value="item.code" :key="index">
+									{{ item.name }}</Option>
+							</Select>
+						</FormItem>
+						<FormItem prop="temp_id" class="tempId maxInpt">
+							<div class="acea-row">
+								<Select v-model="formInlineDump.temp_id" placeholder="请选择电子面单模板"
+									style="text-align: left" :class="[formInlineDump.temp_id ? 'width9' : 'width10']"
+									@on-change="onChangeImg">
+									<Option v-for="(item, index) in exportTempList" :value="item.temp_id" :key="index">
+										{{ item.title }}</Option>
+								</Select>
+								<viewer v-if="formInlineDump.temp_id">
+									<span class="tempImg">预览</span>
+									<div class="tabBox_img">
+										<img v-lazy="tempImg" />
+									</div>
+								</viewer>
+							</div>
+						</FormItem>
+						<FormItem prop="to_name" class="maxInpt">
+							<Input type="text" v-model="formInlineDump.to_name" prefix="ios-contact-outline"
+								placeholder="请填写寄件人姓名" />
+						</FormItem>
+						<FormItem prop="to_tel" class="maxInpt">
+							<Input type="text" v-model="formInlineDump.to_tel" prefix="ios-contact-outline"
+								placeholder="请填写寄件人电话" />
+						</FormItem>
+						<FormItem prop="to_address" class="maxInpt">
+							<Input type="text" v-model="formInlineDump.to_address" prefix="ios-contact-outline"
+								placeholder="请填写寄件人详细地址" />
+						</FormItem>
+						<FormItem prop="siid" class="maxInpt">
+							<Input type="text" v-model="formInlineDump.siid" prefix="ios-contact-outline"
+								placeholder="请填写云打印编号" />
+						</FormItem>
+						<FormItem class="maxInpt">
+							<Button type="primary" long size="default" @click="handleSubmitDump('formInlineDump')"
+								class="btn">立即开通</Button>
+						</FormItem>
+					</Form>
+				</div>
+			</div>
+		</div>
+		<!-- </Card> -->
+		<Modal v-model="modals" footer-hide scrollable closable title="短信账户签名修改" class="order_box"
+			@on-cancel="cancel('formInline')">
+			<Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="100" @submit.native.prevent>
+				<FormItem>
+					<Input v-model="accountInfo.account" disabled prefix="ios-person-outline" size="large"
+						class="input-add"></Input>
+				</FormItem>
+				<FormItem prop="phone">
+					<Input disabled v-model="formInline.phone" prefix="ios-call-outline" placeholder="请输入您的手机号"
+						size="large" class="input-add"></Input>
+				</FormItem>
+				<FormItem>
+					<Input disabled v-model="sign" prefix="ios-document-outline" placeholder="请输入短信签名，例如：壹柒科技"
+						size="large" class="input-add"></Input>
+				</FormItem>
+				<FormItem prop="sign">
+					<!--<Icon type="   ios-calendar-outline" />-->
+					<Input v-model="formInline.sign" prefix="ios-document-outline" placeholder="请输入短信签名，例如：壹柒科技"
+						size="large" class="input-add"></Input>
+				</FormItem>
+				<FormItem prop="code">
+					<div class="code acea-row row-middle" style="width: 87%;">
+						<Input type="text" v-model="formInline.code" prefix="ios-keypad-outline" placeholder="验证码"
+							size="large" style="width: 75%" />
+						<Button :disabled="!this.canClick" @click="cutDown" size="large">{{
                 cutNUm
               }}</Button>
-          </div>
-        </FormItem>
-        <FormItem>
-          <Button
-              type="primary"
-              long
-              size="large"
-              @click="editSubmit('formInline')"
-              class="btn input-add"
-          >确认修改</Button
-          >
-        </FormItem>
-      </Form>
-      <!--<div slot="footer">-->
-      <!--&lt;!&ndash;<Button type="primary" @click="putSend('formInline')">提交</Button>&ndash;&gt;-->
-      <!--&lt;!&ndash;<Button @click="cancel('formInline')">取消</Button>&ndash;&gt;-->
-      <!--</div>-->
-    </Modal>
-  </div>
+					</div>
+				</FormItem>
+				<FormItem>
+					<Button type="primary" long size="large" @click="editSubmit('formInline')"
+						class="btn input-add">确认修改</Button>
+				</FormItem>
+			</Form>
+			<!--<div slot="footer">-->
+			<!--&lt;!&ndash;<Button type="primary" @click="putSend('formInline')">提交</Button>&ndash;&gt;-->
+			<!--&lt;!&ndash;<Button @click="cancel('formInline')">取消</Button>&ndash;&gt;-->
+			<!--</div>-->
+		</Modal>
+	</div>
 </template>
 
 <script>
-import {
-  smsRecordApi,
-  serveInfoApi,
-  serveSmsOpenApi,
-  serveOpnExpressApi,
-  serveOpnOtherApi,
-  serveRecordListApi,
-  exportTempApi,
-  exportAllApi,
-  serveSign,
-  captchaApi,
-  serveOpen,
-  serveDumpOpen,
-} from "@/api/setting";
-import Setting from "@/setting";
-export default {
-  name: "tableList",
-  props: {
-    copy: {
-      type: Object,
-      default: null,
-    },
-    dump: {
-      type: Object,
-      default: null,
-    },
-    query: {
-      type: Object,
-      default: null,
-    },
-    sms: {
-      type: Object,
-      default: null,
-    },
-    accountInfo: {
-      type: Object,
-      default: null,
-    },
-  },
-  data() {
-    const validatePhone = (rule, value, callback) => {
-      if (!value) {
-        return callback(new Error("请填写手机号"));
-      } else if (!/^1[3456789]\d{9}$/.test(value)) {
-        callback(new Error("手机号格式不正确!"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      roterPre: Setting.roterPre,
-      cutNUm: "获取验证码",
-      canClick: true,
-      spinShow: true,
-      formInline: {
-        sign: "",
-        phone: "",
-        code: "",
-      },
-      sign:'',
-      ruleInline: {
-        sign: [{ required: true, message: "请输入短信签名", trigger: "blur" }],
-        phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
-        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
-      },
-      isChecked: "4",
-      columns1: [
-        // {
-        //     title: 'ID',
-        //     key: 'id',
-        //     width: 80
-        // },
-        {
-          title: "手机号",
-          key: "phone",
-          width: 200,
-        },
-        {
-          title: "模板内容",
-          key: "content",
-          minWidth: 590,
-        },
-        // {
-        //     title: '模板ID',
-        //     key: 'template',
-        //     minWidth: 100
-        // },
-        {
-          title: "发送时间",
-          key: "add_time",
-          width: 250,
-        },
-        {
-          title: "状态",
-          key: "status",
-          width: 200,
-          render: (h, params) => {
-            return h('div', params.row.status ? (params.row.status == 1 ? '成功' : '失败') : '发送中');
-          }
-        },
-      ],
-      columns2: [],
-      tableFrom: {
-        page: 1,
-        limit: 20,
-        type: "",
-      },
-      total: 0,
-      loading: false,
-      tableList: [],
-      formInlineDump: {
-        temp_id: "",
-        com: "",
-        to_name: "",
-        to_tel: "",
-        siid: "",
-        to_address: "",
-      },
-      ruleInlineDump: {
-        com: [{ required: true, message: "请选择快递公司", trigger: "change" }],
-        temp_id: [
-          { required: true, message: "请选择打印模板", trigger: "change" },
-        ],
-        to_name: [
-          { required: true, message: "请输寄件人姓名", trigger: "blur" },
-        ],
-        to_tel: [{ required: true, validator: validatePhone, trigger: "blur" }],
-        siid: [
-          { required: true, message: "请输入云打印机编号", trigger: "blur" },
-        ],
-        to_address: [
-          { required: true, message: "请输寄件人地址", trigger: "blur" },
-        ],
-      },
-      tempImg: "", // 图片
-      exportTempList: [], // 电子面单模板
-      exportList: [], // 快递公司列表
-      isSms: false, // 是否开通短信
-      isDump: false, // 是否开通电子面单,是否开通物流查询
-      isCopy: false, // 是否开通商品采集
-      modals: false,
-      isDumpOpen: false,
-    };
-  },
-  watch: {
-    copy(n) {
-      if (n.open === 1) this.getRecordList();
-    },
-  },
-  created() {
-    if (this.isChecked === "4" && this.copy.open === 1) this.getRecordList();
-  },
-  mounted() {
-    serveDumpOpen().then((res) => {
-      this.isDumpOpen = res.data.isOpen;
-    });
-  },
-  methods: {
-    //短信模板页
-    shortMes() {
-      this.$router.push({
-        path: this.roterPre + "/setting/sms/sms_template_apply/index",
-      });
-    },
-    // 短信验证码
-    cutDown() {
-      if (this.formInline.phone) {
-        if (!this.canClick) return;
-        this.canClick = false;
-        this.cutNUm = 60;
-        let data = {
-          phone: this.formInline.phone,
-        };
-        captchaApi(data)
-            .then(async (res) => {
-              this.$Message.success(res.msg);
-            })
-            .catch((res) => {
-              this.$Message.error(res.msg);
-            });
-        let time = setInterval(() => {
-          this.cutNUm--;
-          if (this.cutNUm === 0) {
-            this.cutNUm = "获取验证码";
-            this.canClick = true;
-            clearInterval(time);
-          }
-        }, 1000);
-      } else {
-        this.$Message.warning("请填写手机号!");
-      }
-    },
-    editSign() {
-      if (this.accountInfo.sms.sign_status === 0) {
-        this.$Message.warning("签名待审核中，暂无法修改");
-        return;
-      }
-      this.sign = this.accountInfo.sms.sign;
-      this.formInline.sign = '';
-      this.formInline.phone = this.accountInfo.phone;
-      this.modals = true;
-    },
-    cancel(name) {
-      this.modals = false;
-      this.$refs[name].resetFields();
-    },
-    // 提交
-    editSubmit(name) {
-      this.$refs[name].validate((valid) => {
-        if (valid) {
-          serveSign(this.formInline)
-              .then((res) => {
-                this.modals = false;
-                this.$Message.success(res.msg);
-                this.$refs[name].resetFields();
-              })
-              .catch((res) => {
-                this.$Message.error(res.msg);
-              });
-        }
-      });
-    },
-    onChangeImg(item) {
-      this.exportTempList.map((i) => {
-        if (i.temp_id === item) this.tempImg = i.pic;
-      });
-    },
-    // 物流公司
-    exportTempAllList() {
-      exportAllApi()
-          .then(async (res) => {
-            this.exportList = res.data;
-          })
-          .catch((res) => {
-            this.$Message.error(res.msg);
-          });
-    },
-    // 快递公司选择
-    onChangeExport(val) {
-      this.formInlineDump.temp_id = "";
-      this.exportTemp(val);
-    },
-    // 电子面单模板
-    exportTemp(val) {
-      exportTempApi({ com: val })
-          .then(async (res) => {
-            this.exportTempList = res.data.data;
-          })
-          .catch((res) => {
-            this.$Message.error(res.msg);
-          });
-    },
-    onChangeType() {
-      this.tableFrom.page = 1;
-      if (this.isChecked === "1" && this.sms.open === 1) {
-        this.tableFrom.type = "";
-        this.getList();
-      } else {
-        if (this.isChecked === "2" && this.query.open === 0)
-          this.isDump = false;
-        if (
-            this.dump.open === 1 ||
-            this.query.open === 1 ||
-            this.copy.open === 1
-        )
-          this.getRecordList();
-      }
-      if (this.dump.open === 0 && this.isChecked === "3") {
-        this.isDumpOpen = false;
-      }
-    },
-    // 其他列表
-    getRecordList() {
-      this.loading = true;
-      this.tableFrom.type = this.isChecked;
-      serveRecordListApi(this.tableFrom)
-          .then(async (res) => {
-            let data = res.data;
-            this.tableList = data.data;
-            this.total = res.data.count;
-            switch (this.isChecked) {
-              case "2":
-                this.columns2 = [
-                  {
-                    title: "订单号",
-                    key: "order_id",
-                    minWidth: 150,
-                  },
-                  {
-                    title: "发货人",
-                    key: "from_name",
-                    minWidth: 120,
-                  },
-                  {
-                    title: "收货人",
-                    key: "to_name",
-                    minWidth: 120,
-                  },
-                  {
-                    title: "快递单号",
-                    key: "num",
-                    minWidth: 120,
-                  },
-                  {
-                    title: "快递公司编码",
-                    key: "code",
-                    minWidth: 120,
-                  },
-                  {
-                    title: "状态",
-                    key: "_resultcode",
-                    minWidth: 100,
-                  },
-                  {
-                    title: "打印时间",
-                    key: "add_time",
-                    minWidth: 150,
-                  },
-                ];
-                break;
-              case "3":
-                this.columns2 = [
-                  {
-                    title: "快递单号",
-                    slot: "num",
-                    minWidth: 120,
-                  },
-                  {
-                    title: "快递公司编码",
-                    key: "code",
-                    minWidth: 120,
-                  },
-                  {
-                    title: "状态",
-                    key: "_resultcode",
-                    minWidth: 120,
-                  },
-                  {
-                    title: "添加时间",
-                    key: "add_time",
-                    minWidth: 150,
-                  },
-                ];
-                break;
-              default:
-                this.columns2 = [
-                  {
-                    title: "复制URL",
-                    slot: "url",
-                    minWidth: 400,
-                  },
-                  {
-                    title: "请求状态",
-                    key: "_resultcode",
-                    width: 200,
-                  },
-                  {
-                    title: "添加时间",
-                    key: "add_time",
-                    width: 200,
-                  },
-                ];
-                break;
-            }
-            this.loading = false;
-          })
-          .catch((res) => {
-            this.loading = false;
-            this.$Message.error(res.msg);
-          });
-    },
-    pageChangeOther(index) {
-      this.tableFrom.page = index;
-      this.getRecordList();
-    },
-    // 开通短信提交
-    handleSubmit(name) {
-      this.$refs[name].validate((valid) => {
-        if (valid) {
-          serveSmsOpenApi(this.formInline)
-              .then(async (res) => {
-                this.$Message.success("开通成功!");
-                this.getList();
-                this.$emit("openService", "sms");
-              })
-              .catch((res) => {
-                this.$Message.error(res.msg);
-              });
-        } else {
-          return false;
-        }
-      });
-    },
-    // 首页去开通
-    onOpenIndex(val) {
-      switch (val) {
-        case "sms":
-          this.isChecked = "1";
-          this.isSms = true;
-          break;
-        case "copy":
-          this.isChecked = "4";
-          this.openOther();
-          break;
-        case "query":
-          this.isChecked = "3";
-          this.onDumpOpen();
-          break;
-        default:
-          this.isChecked = "2";
-          this.openDump();
-          break;
-      }
-    },
-    // 开通按钮
-    onOpen() {
-      if (this.isChecked === "1") this.isSms = true;
-      if (this.isChecked === "2") this.openDump();
-      if (this.isChecked === "4") this.openOther();
-      if (this.isChecked === "3") this.onDumpOpen();
-    },
-    // 开通物流
-    onDumpOpen() {
-      this.$Modal.confirm({
-        title: "开通物流查询吗",
-        content: "<p>确定要开通物流查询吗</p>",
-        onOk: () => {
-          serveOpen().then((res) => {
-            this.$Message.info(res.msg);
-          });
-        },
-        onCancel: () => {
-          // this.$Message.info('Clicked cancel');
-        },
-      });
-    },
-    // 开通其他
-    openOther() {
-      this.$Modal.confirm({
-        title: "开通商品采集吗",
-        content: "<p>确定要开通商品采集吗</p>",
-        loading: true,
-        onOk: () => {
-          this.$Modal.remove();
-          setTimeout(() => {
-            serveOpnOtherApi({ type: 1 })
-                .then(async (res) => {
-                  this.getRecordList();
-                  this.$emit("openService", "copy");
-                })
-                .catch((res) => {
-                  this.$Message.error(res.msg);
-                });
-          }, 300);
-        },
-        onCancel: () => {},
-      });
-    },
-    // 开通电子面单
-    openDump() {
-      this.exportTempAllList();
-      this.isDumpOpen = true;
-    },
-    // 选择
-    selectChange(tab) {
-      this.tableFrom.type = tab;
-      this.tableFrom.page = 1;
-      this.getList();
-    },
-    // 列表
-    getList() {
-      this.loading = true;
-      smsRecordApi(this.tableFrom)
-          .then(async (res) => {
-            let data = res.data;
-            this.tableList = data.data;
-            this.total = res.data.count;
-            this.spinShow = false;
-            this.loading = false;
-          })
-          .catch((res) => {
-            this.spinShow = false;
-            this.loading = false;
-            this.$Message.error(res.msg);
-          });
-    },
-    pageChange(index) {
-      this.tableFrom.page = index;
-      this.getList();
-    },
-    // 表格搜索
-    userSearchs() {
-      this.getList();
-    },
-    handleSubmitDump(name) {
-      this.$refs[name].validate((valid) => {
-        if (valid) {
-          serveOpnExpressApi(this.formInlineDump)
-              .then(async (res) => {
-                this.$Message.success("开通成功!");
-                this.getRecordList();
-                this.$emit("openService", "dump");
-              })
-              .catch((res) => {
-                this.$Message.error(res.msg);
-              });
-        } else {
-          return false;
-        }
-      });
-    },
-  },
-};
+	import {
+		smsRecordApi,
+		serveInfoApi,
+		serveSmsOpenApi,
+		serveOpnExpressApi,
+		serveOpnOtherApi,
+		serveRecordListApi,
+		exportTempApi,
+		exportAllApi,
+		serveSign,
+		captchaApi,
+		serveOpen,
+		serveDumpOpen,
+	} from "@/api/setting";
+	import Setting from "@/setting";
+	export default {
+		name: "tableList",
+		props: {
+			copy: {
+				type: Object,
+				default: null,
+			},
+			dump: {
+				type: Object,
+				default: null,
+			},
+			query: {
+				type: Object,
+				default: null,
+			},
+			sms: {
+				type: Object,
+				default: null,
+			},
+			accountInfo: {
+				type: Object,
+				default: null,
+			},
+		},
+		data() {
+			const validatePhone = (rule, value, callback) => {
+				if (!value) {
+					return callback(new Error("请填写手机号"));
+				} else if (!/^1[3456789]\d{9}$/.test(value)) {
+					callback(new Error("手机号格式不正确!"));
+				} else {
+					callback();
+				}
+			};
+			return {
+				roterPre: Setting.roterPre,
+				cutNUm: "获取验证码",
+				canClick: true,
+				spinShow: true,
+				formInline: {
+					sign: "",
+					phone: "",
+					code: "",
+				},
+				sign: '',
+				ruleInline: {
+					sign: [{
+						required: true,
+						message: "请输入短信签名",
+						trigger: "blur"
+					}],
+					phone: [{
+						required: true,
+						validator: validatePhone,
+						trigger: "blur"
+					}],
+					code: [{
+						required: true,
+						message: "请输入验证码",
+						trigger: "blur"
+					}],
+				},
+				isChecked: "4",
+				columns1: [
+					// {
+					//     title: 'ID',
+					//     key: 'id',
+					//     width: 80
+					// },
+					{
+						title: "手机号",
+						key: "phone",
+						width: 200,
+					},
+					{
+						title: "模板内容",
+						key: "content",
+						minWidth: 590,
+					},
+					// {
+					//     title: '模板ID',
+					//     key: 'template',
+					//     minWidth: 100
+					// },
+					{
+						title: "发送时间",
+						key: "add_time",
+						width: 250,
+					},
+					{
+						title: "状态",
+						key: "status",
+						width: 200,
+						render: (h, params) => {
+							return h('div', params.row.status ? (params.row.status == 1 ? '成功' : '失败') : '发送中');
+						}
+					},
+				],
+				columns2: [],
+				tableFrom: {
+					page: 1,
+					limit: 20,
+					type: "",
+				},
+				total: 0,
+				loading: false,
+				tableList: [],
+				formInlineDump: {
+					temp_id: "",
+					com: "",
+					to_name: "",
+					to_tel: "",
+					siid: "",
+					to_address: "",
+				},
+				ruleInlineDump: {
+					com: [{
+						required: true,
+						message: "请选择快递公司",
+						trigger: "change"
+					}],
+					temp_id: [{
+						required: true,
+						message: "请选择打印模板",
+						trigger: "change"
+					}, ],
+					to_name: [{
+						required: true,
+						message: "请输寄件人姓名",
+						trigger: "blur"
+					}, ],
+					to_tel: [{
+						required: true,
+						validator: validatePhone,
+						trigger: "blur"
+					}],
+					siid: [{
+						required: true,
+						message: "请输入云打印机编号",
+						trigger: "blur"
+					}, ],
+					to_address: [{
+						required: true,
+						message: "请输寄件人地址",
+						trigger: "blur"
+					}, ],
+				},
+				tempImg: "", // 图片
+				exportTempList: [], // 电子面单模板
+				exportList: [], // 快递公司列表
+				isSms: false, // 是否开通短信
+				isDump: false, // 是否开通电子面单,是否开通物流查询
+				isCopy: false, // 是否开通商品采集
+				modals: false,
+				isDumpOpen: false,
+			};
+		},
+		watch: {
+			copy(n) {
+				if (n.open === 1) this.getRecordList();
+			},
+		},
+		created() {
+			if (this.isChecked === "4" && this.copy.open === 1) this.getRecordList();
+		},
+		mounted() {
+			serveDumpOpen().then((res) => {
+				this.isDumpOpen = res.data.isOpen;
+			});
+		},
+		methods: {
+			//短信模板页
+			shortMes() {
+				this.$router.push({
+					path: this.roterPre + "/setting/sms/sms_template_apply/index",
+				});
+			},
+			// 短信验证码
+			cutDown() {
+				if (this.formInline.phone) {
+					if (!this.canClick) return;
+					this.canClick = false;
+					this.cutNUm = 60;
+					let data = {
+						phone: this.formInline.phone,
+					};
+					captchaApi(data)
+						.then(async (res) => {
+							this.$Message.success(res.msg);
+						})
+						.catch((res) => {
+							this.$Message.error(res.msg);
+						});
+					let time = setInterval(() => {
+						this.cutNUm--;
+						if (this.cutNUm === 0) {
+							this.cutNUm = "获取验证码";
+							this.canClick = true;
+							clearInterval(time);
+						}
+					}, 1000);
+				} else {
+					this.$Message.warning("请填写手机号!");
+				}
+			},
+			editSign() {
+				if (this.accountInfo.sms.sign_status === 0) {
+					this.$Message.warning("签名待审核中，暂无法修改");
+					return;
+				}
+				this.sign = this.accountInfo.sms.sign;
+				this.formInline.sign = '';
+				this.formInline.phone = this.accountInfo.phone;
+				this.modals = true;
+			},
+			cancel(name) {
+				this.modals = false;
+				this.$refs[name].resetFields();
+			},
+			// 提交
+			editSubmit(name) {
+				this.$refs[name].validate((valid) => {
+					if (valid) {
+						serveSign(this.formInline)
+							.then((res) => {
+								this.modals = false;
+								this.$Message.success(res.msg);
+								this.$refs[name].resetFields();
+							})
+							.catch((res) => {
+								this.$Message.error(res.msg);
+							});
+					}
+				});
+			},
+			onChangeImg(item) {
+				this.exportTempList.map((i) => {
+					if (i.temp_id === item) this.tempImg = i.pic;
+				});
+			},
+			// 物流公司
+			exportTempAllList() {
+				exportAllApi()
+					.then(async (res) => {
+						this.exportList = res.data;
+					})
+					.catch((res) => {
+						this.$Message.error(res.msg);
+					});
+			},
+			// 快递公司选择
+			onChangeExport(val) {
+				this.formInlineDump.temp_id = "";
+				this.exportTemp(val);
+			},
+			// 电子面单模板
+			exportTemp(val) {
+				exportTempApi({
+						com: val
+					})
+					.then(async (res) => {
+						this.exportTempList = res.data.data;
+					})
+					.catch((res) => {
+						this.$Message.error(res.msg);
+					});
+			},
+			onChangeType() {
+				this.tableFrom.page = 1;
+				if (this.isChecked === "1" && this.sms.open === 1) {
+					this.tableFrom.type = "";
+					this.getList();
+				} else {
+					if (this.isChecked === "2" && this.query.open === 0)
+						this.isDump = false;
+					if (
+						this.dump.open === 1 ||
+						this.query.open === 1 ||
+						this.copy.open === 1
+					)
+						this.getRecordList();
+				}
+				if (this.dump.open === 0 && this.isChecked === "3") {
+					this.isDumpOpen = false;
+				}
+			},
+			// 其他列表
+			getRecordList() {
+				this.loading = true;
+				this.tableFrom.type = this.isChecked;
+				serveRecordListApi(this.tableFrom)
+					.then(async (res) => {
+						let data = res.data;
+						this.tableList = data.data;
+						this.total = res.data.count;
+						switch (this.isChecked) {
+							case "2":
+								this.columns2 = [{
+										title: "订单号",
+										key: "order_id",
+										minWidth: 150,
+									},
+									{
+										title: "发货人",
+										key: "from_name",
+										minWidth: 120,
+									},
+									{
+										title: "收货人",
+										key: "to_name",
+										minWidth: 120,
+									},
+									{
+										title: "快递单号",
+										key: "num",
+										minWidth: 120,
+									},
+									{
+										title: "快递公司编码",
+										key: "code",
+										minWidth: 120,
+									},
+									{
+										title: "状态",
+										key: "_resultcode",
+										minWidth: 100,
+									},
+									{
+										title: "打印时间",
+										key: "add_time",
+										minWidth: 150,
+									},
+								];
+								break;
+							case "3":
+								this.columns2 = [{
+										title: "快递单号",
+										slot: "num",
+										minWidth: 120,
+									},
+									{
+										title: "快递公司编码",
+										key: "code",
+										minWidth: 120,
+									},
+									{
+										title: "状态",
+										key: "_resultcode",
+										minWidth: 120,
+									},
+									{
+										title: "添加时间",
+										key: "add_time",
+										minWidth: 150,
+									},
+								];
+								break;
+							default:
+								this.columns2 = [{
+										title: "复制URL",
+										slot: "url",
+										minWidth: 400,
+									},
+									{
+										title: "请求状态",
+										key: "_resultcode",
+										width: 200,
+									},
+									{
+										title: "添加时间",
+										key: "add_time",
+										width: 200,
+									},
+								];
+								break;
+						}
+						this.loading = false;
+					})
+					.catch((res) => {
+						this.loading = false;
+						this.$Message.error(res.msg);
+					});
+			},
+			pageChangeOther(index) {
+				this.tableFrom.page = index;
+				this.getRecordList();
+			},
+			// 开通短信提交
+			handleSubmit(name) {
+				this.$refs[name].validate((valid) => {
+					if (valid) {
+						serveSmsOpenApi(this.formInline)
+							.then(async (res) => {
+								this.$Message.success("开通成功!");
+								this.getList();
+								this.$emit("openService", "sms");
+							})
+							.catch((res) => {
+								this.$Message.error(res.msg);
+							});
+					} else {
+						return false;
+					}
+				});
+			},
+			// 首页去开通
+			onOpenIndex(val) {
+				switch (val) {
+					case "sms":
+						this.isChecked = "1";
+						this.isSms = true;
+						break;
+					case "copy":
+						this.isChecked = "4";
+						this.openOther();
+						break;
+					case "query":
+						this.isChecked = "3";
+						this.onDumpOpen();
+						break;
+					default:
+						this.isChecked = "2";
+						this.openDump();
+						break;
+				}
+			},
+			// 开通按钮
+			onOpen() {
+				if (this.isChecked === "1") this.isSms = true;
+				if (this.isChecked === "2") this.openDump();
+				if (this.isChecked === "4") this.openOther();
+				if (this.isChecked === "3") this.onDumpOpen();
+			},
+			// 开通物流
+			onDumpOpen() {
+				this.$Modal.confirm({
+					title: "开通物流查询吗",
+					content: "<p>确定要开通物流查询吗</p>",
+					onOk: () => {
+						serveOpen().then((res) => {
+							this.$Message.info(res.msg);
+						});
+					},
+					onCancel: () => {
+						// this.$Message.info('Clicked cancel');
+					},
+				});
+			},
+			// 开通其他
+			openOther() {
+				this.$Modal.confirm({
+					title: "开通商品采集吗",
+					content: "<p>确定要开通商品采集吗</p>",
+					loading: true,
+					onOk: () => {
+						this.$Modal.remove();
+						setTimeout(() => {
+							serveOpnOtherApi({
+									type: 1
+								})
+								.then(async (res) => {
+									this.getRecordList();
+									this.$emit("openService", "copy");
+								})
+								.catch((res) => {
+									this.$Message.error(res.msg);
+								});
+						}, 300);
+					},
+					onCancel: () => {},
+				});
+			},
+			// 开通电子面单
+			openDump() {
+				this.exportTempAllList();
+				this.isDumpOpen = true;
+			},
+			// 选择
+			selectChange(tab) {
+				this.tableFrom.type = tab;
+				this.tableFrom.page = 1;
+				this.getList();
+			},
+			// 列表
+			getList() {
+				this.loading = true;
+				smsRecordApi(this.tableFrom)
+					.then(async (res) => {
+						let data = res.data;
+						this.tableList = data.data;
+						this.total = res.data.count;
+						this.spinShow = false;
+						this.loading = false;
+					})
+					.catch((res) => {
+						this.spinShow = false;
+						this.loading = false;
+						this.$Message.error(res.msg);
+					});
+			},
+			pageChange(index) {
+				this.tableFrom.page = index;
+				this.getList();
+			},
+			// 表格搜索
+			userSearchs() {
+				this.getList();
+			},
+			handleSubmitDump(name) {
+				this.$refs[name].validate((valid) => {
+					if (valid) {
+						serveOpnExpressApi(this.formInlineDump)
+							.then(async (res) => {
+								this.$Message.success("开通成功!");
+								this.getRecordList();
+								this.$emit("openService", "dump");
+							})
+							.catch((res) => {
+								this.$Message.error(res.msg);
+							});
+					} else {
+						return false;
+					}
+				});
+			},
+		},
+	};
 </script>
 <style lang="stylus" scoped>
-@aaa: ~">>>";
-.order_box /deep/.ivu-form-item-content {
-  margin-left: 50px !important;
-}
-.input-add {
-  width: 87%;
-}
-.maxInpt {
-  max-width: 400px;
-  margin-left: auto;
-  margin-right: auto;
-}
-.smsBox .page-account-top {
-  text-align: center;
-  margin: 70px 0 30px 0;
-}
-.note {
-  margin-top: 15px;
-}
-.tempImg {
-  cursor: pointer;
-  margin-left: 11px;
-  color: #1890ff;
-}
-.tabBox_img {
-  opacity: 0;
-  width: 38px;
-  height: 30px;
-  margin-top: -30px;
-  cursor: pointer;
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-.width9 {
-  width: 90%;
-}
-.width10 {
-  width: 100%;
-}
-.wuBox {
-  width: 100%;
-}
-.wuSp1 {
-  display: block;
-  text-align: center;
-  color: #000000;
-  font-size: 21px;
-  font-weight: 500;
-  line-height: 32px;
-  margin-top: 23px;
-  margin-bottom: 5px;
-}
-.wuSp2 {
-  opacity: 45%;
-  font-weight: 400;
-  color: #000000;
-  line-height: 22px;
-  margin-bottom: 30px;
-}
-.page-account-top-tit {
-  font-size: 21px;
-  color: #1890ff;
-}
-.wuTu {
-  width: 295px;
-  height: 164px;
-  margin-top: 54px;
-  img {
-    width: 100%;
-    height: 100%;
-  }
+	@aaa: ~">>>";
 
-  + span {
-    margin-bottom: 20px;
-  }
-}
-.tempId {
-  @aaa .ivu-form-item-content {
-    text-align: left !important;
-}
-}
-.new_tab {
-  >>>.ivu-tabs-nav .ivu-tabs-tab{
-    padding:4px 16px 20px !important;
-    font-weight: 500;
-  }
-}
+	.order_box /deep/.ivu-form-item-content {
+		margin-left: 50px !important;
+	}
+
+	.input-add {
+		width: 87%;
+	}
+
+	.maxInpt {
+		max-width: 400px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.smsBox .page-account-top {
+		text-align: center;
+		margin: 70px 0 30px 0;
+	}
+
+	.note {
+		margin-top: 15px;
+	}
+
+	.tempImg {
+		cursor: pointer;
+		margin-left: 11px;
+		color: #1890ff;
+	}
+
+	.tabBox_img {
+		opacity: 0;
+		width: 38px;
+		height: 30px;
+		margin-top: -30px;
+		cursor: pointer;
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.width9 {
+		width: 90%;
+	}
+
+	.width10 {
+		width: 100%;
+	}
+
+	.wuBox {
+		width: 100%;
+	}
+
+	.wuSp1 {
+		display: block;
+		text-align: center;
+		color: #000000;
+		font-size: 21px;
+		font-weight: 500;
+		line-height: 32px;
+		margin-top: 23px;
+		margin-bottom: 5px;
+	}
+
+	.wuSp2 {
+		opacity: 45%;
+		font-weight: 400;
+		color: #000000;
+		line-height: 22px;
+		margin-bottom: 30px;
+	}
+
+	.page-account-top-tit {
+		font-size: 21px;
+		color: #1890ff;
+	}
+
+	.wuTu {
+		width: 295px;
+		height: 164px;
+		margin-top: 54px;
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+
+		+span {
+			margin-bottom: 20px;
+		}
+	}
+
+	.tempId {
+		@aaa .ivu-form-item-content {
+			text-align: left !important;
+		}
+	}
+
+	.new_tab {
+		>>>.ivu-tabs-nav .ivu-tabs-tab {
+			padding: 4px 16px 20px !important;
+			font-weight: 500;
+		}
+	}
 </style>

src/pages/notify/smsTemplateApply/index.vue

@@ -1,26 +1,14 @@
 <template>
-  <div>
-    <div class="i-layout-page-header">
-      <PageHeader
-        class="product_tabs"
-        :title="$route.meta.title"
-        hidden-breadcrumb
-      ></PageHeader>
-    </div>
-    <Card :bordered="false" dis-hover class="ivu-mt">
-      <Form
-        ref="levelFrom"
-        :model="levelFrom"
-        :label-width="labelWidth"
-        :label-position="labelPosition"
-        @submit.native.prevent
-      >
-        <Row
-          type="flex"
-          :gutter="24"
-          v-if="$route.path === this.roterPre + '/setting/sms/sms_template_apply/index'"
-        >
-          <!-- <Col v-bind="grid">
+	<div>
+		<div class="i-layout-page-header">
+			<PageHeader class="product_tabs" :title="$route.meta.title" hidden-breadcrumb></PageHeader>
+		</div>
+		<Card :bordered="false" dis-hover class="ivu-mt">
+			<Form ref="levelFrom" :model="levelFrom" :label-width="labelWidth" :label-position="labelPosition"
+				@submit.native.prevent>
+				<Row type="flex" :gutter="24"
+					v-if="$route.path === this.roterPre + '/setting/sms/sms_template_apply/index'">
+					<!-- <Col v-bind="grid">
                         <FormItem label="模板类型：">
                             <Select v-model="levelFrom.type" placeholder="请选择" clearable  @on-change="userSearchs">
                                 <Option value="1">验证码</Option>
@@ -42,440 +30,380 @@
                             <Input search enter-button  v-model="levelFrom.title" placeholder="请输入模板名称" @on-search="userSearchs"/>
                         </FormItem>
                     </Col> -->
-            <Button type="primary" class="ml20" @click="add">申请模板</Button>
-            <Button class="ml20" @click="editSign">修改签名</Button>
-        </Row>
-        <Row type="flex" :gutter="24" v-else>
-          <Col v-bind="grid">
-            <FormItem label="是否拥有：">
-              <Select
-                v-model="levelFrom.is_have"
-                placeholder="请选择"
-                clearable
-                @on-change="userSearchs"
-              >
-                <Option value="1">有</Option>
-                <Option value="0">没有</Option>
-              </Select>
-            </FormItem>
-          </Col>
-        </Row>
-      </Form>
-      <Table
-        :columns="columns1"
-        :data="levelLists"
-        ref="table"
-        class="mt25"
-        :loading="loading"
-        no-userFrom-text="暂无数据"
-        no-filtered-userFrom-text="暂无筛选结果"
-      >
-        <template slot-scope="{ row, index }" slot="status">
-          <span v-show="row.status === 1">可用</span>
-          <span v-show="row.status === 0">不可用</span>
-        </template>
-        <template
-          slot-scope="{ row, index }"
-          slot="is_have"
-          v-if="$route.path === this.roterPre + '/setting/sms/sms_template_apply/commons'"
-        >
-          <span v-show="row.status === 1">有</span>
-          <span v-show="row.status === 0">没有</span>
-        </template>
-      </Table>
-      <div class="acea-row row-right page">
-        <Page
-          :total="total"
-          :current="levelFrom.page"
-          show-elevator
-          show-total
-          @on-change="pageChange"
-          :page-size="levelFrom.limit"
-        />
-      </div>
-    </Card>
+					<Button type="primary" class="ml20" @click="add">申请模板</Button>
+					<Button class="ml20" @click="editSign">修改签名</Button>
+				</Row>
+				<Row type="flex" :gutter="24" v-else>
+					<Col v-bind="grid">
+					<FormItem label="是否拥有：">
+						<Select v-model="levelFrom.is_have" placeholder="请选择" clearable @on-change="userSearchs">
+							<Option value="1">有</Option>
+							<Option value="0">没有</Option>
+						</Select>
+					</FormItem>
+					</Col>
+				</Row>
+			</Form>
+			<Table :columns="columns1" :data="levelLists" ref="table" class="mt25" :loading="loading"
+				no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
+				<template slot-scope="{ row, index }" slot="status">
+					<span v-show="row.status === 1">可用</span>
+					<span v-show="row.status === 0">不可用</span>
+				</template>
+				<template slot-scope="{ row, index }" slot="is_have"
+					v-if="$route.path === this.roterPre + '/setting/sms/sms_template_apply/commons'">
+					<span v-show="row.status === 1">有</span>
+					<span v-show="row.status === 0">没有</span>
+				</template>
+			</Table>
+			<div class="acea-row row-right page">
+				<Page :total="total" :current="levelFrom.page" show-elevator show-total @on-change="pageChange"
+					:page-size="levelFrom.limit" />
+			</div>
+		</Card>
 
-    <!-- 新建表单-->
-    <edit-from
-      ref="edits"
-      :FromData="FromData"
-      @submitFail="submitFail"
-    ></edit-from>
-    <Modal
-      v-model="modals"
-      footer-hide
-      scrollable
-      closable
-      title="短信账户签名修改"
-      class="order_box"
-      @on-cancel="cancel('formInline')"
-    >
-      <Form
-        ref="formInline"
-        :model="formInline"
-        :rules="ruleInline"
-        :label-width="63"
-        @submit.native.prevent
-      >
-        <FormItem>
-          <Input
-            v-model="accountInfo.account"
-            disabled
-            prefix="ios-person-outline"
-            size="large"
-            class="input-add"
-          ></Input>
-        </FormItem>
-        <FormItem prop="phone">
-          <Input
-            v-model="formInline.phone"
-            prefix="ios-call-outline"
-            placeholder="请输入您的手机号"
-            size="large"
-            :disabled="formInline.phone"
-           class="input-add"
-          ></Input>
-        </FormItem>
-        <FormItem>
-          <Input
-            v-model="sign"
-            :disabled="sign"
-            prefix="ios-document-outline"
-            placeholder="请输入短信签名，例如：CRMEB"
-            size="large"
-           class="input-add"
-          ></Input>
-        </FormItem>
-        <FormItem prop="sign">
-          <Input
-            v-model="formInline.sign"
-            prefix="ios-document-outline"
-            placeholder="请输入新的短信签名，例如：CRMEB"
-            size="large"
-           class="input-add"
-          ></Input>
-        </FormItem>
-        <FormItem prop="code">
-          <div class="code acea-row row-middle" style="width: 87%;">
-            <Input
-              type="text"
-              v-model="formInline.code"
-              prefix="ios-keypad-outline"
-              placeholder="验证码"
-              size="large"
-              style="width: 74%"
-            />
-            <Button :disabled="!this.canClick" @click="cutDown" size="large">{{
+		<!-- 新建表单-->
+		<edit-from ref="edits" :FromData="FromData" @submitFail="submitFail"></edit-from>
+		<Modal v-model="modals" footer-hide scrollable closable title="短信账户签名修改" class="order_box"
+			@on-cancel="cancel('formInline')">
+			<Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="63" @submit.native.prevent>
+				<FormItem>
+					<Input v-model="accountInfo.account" disabled prefix="ios-person-outline" size="large"
+						class="input-add"></Input>
+				</FormItem>
+				<FormItem prop="phone">
+					<Input v-model="formInline.phone" prefix="ios-call-outline" placeholder="请输入您的手机号" size="large"
+						:disabled="formInline.phone" class="input-add"></Input>
+				</FormItem>
+				<FormItem>
+					<Input v-model="sign" :disabled="sign" prefix="ios-document-outline" placeholder="请输入短信签名，例如：壹柒科技"
+						size="large" class="input-add"></Input>
+				</FormItem>
+				<FormItem prop="sign">
+					<Input v-model="formInline.sign" prefix="ios-document-outline" placeholder="请输入新的短信签名，例如：壹柒科技"
+						size="large" class="input-add"></Input>
+				</FormItem>
+				<FormItem prop="code">
+					<div class="code acea-row row-middle" style="width: 87%;">
+						<Input type="text" v-model="formInline.code" prefix="ios-keypad-outline" placeholder="验证码"
+							size="large" style="width: 74%" />
+						<Button :disabled="!this.canClick" @click="cutDown" size="large">{{
               cutNUm
             }}</Button>
-          </div>
-        </FormItem>
-        <FormItem>
-          <Button
-            type="primary"
-            long
-            size="large"
-            @click="editSubmit('formInline')"
-            class="btn input-add"
-            >确认修改</Button
-          >
-        </FormItem>
-      </Form>
-    </Modal>
-  </div>
+					</div>
+				</FormItem>
+				<FormItem>
+					<Button type="primary" long size="large" @click="editSubmit('formInline')"
+						class="btn input-add">确认修改</Button>
+				</FormItem>
+			</Form>
+		</Modal>
+	</div>
 </template>
 <script>
-import { mapState } from "vuex";
-import {
-  tempListApi,
-  tempCreateApi,
-  isLoginApi,
-  serveInfoApi,
-  serveSign,
-  captchaApi,
-} from "@/api/setting";
-import editFrom from "@/components/from/from";
-import Setting from '@/setting';
-export default {
-  name: "smsTemplateApply",
-  components: { editFrom },
-  data() {
-    const validatePhone = (rule, value, callback) => {
-      if (!value) {
-        return callback(new Error("请填写手机号"));
-      } else if (!/^1[3456789]\d{9}$/.test(value)) {
-        callback(new Error("手机号格式不正确!"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      roterPre: Setting.roterPre,
-      modals: false,
-      cutNUm: "获取验证码",
-      canClick: true,
-      spinShow: true,
-      grid: {
-        xl: 7,
-        lg: 7,
-        md: 12,
-        sm: 24,
-        xs: 24,
-      },
-      sign: "",
-      formInline: {
-        sign: "",
-        phone: "",
-        code: "",
-      },
-      ruleInline: {
-        sign: [{ required: true, message: "请输入短信签名", trigger: "blur" }],
-        phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
-        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
-      },
-      loading: false,
-      columns1: [],
-      levelFrom: {
-        type: "",
-        status: "",
-        title: "",
-        page: 1,
-        limit: 20,
-      },
-      levelFrom2: {
-        is_have: "",
-        page: 1,
-        limit: 20,
-      },
-      total: 0,
-      FromData: null,
-      delfromData: {},
-      levelLists: [],
-      accountInfo: {}, //签名审核状态： 0、待审核；1、已通过；2、未通过
-    };
-  },
-  watch: {
-    $route(to, from) {
-      this.getList();
-    },
-  },
-  created() {
-    this.onIsLogin();
-  },
-  mounted() {
-    serveInfoApi().then((res) => {
-      this.accountInfo = res.data;
-      this.formInline.phone = res.data.phone;
-      if (res.data.sms.open != 1) {
-        this.$router.push(
-          this.roterPre + "/setting/sms/sms_config/index?url=" + this.$route.path
-        );
-      }
-    });
-  },
-  computed: {
-    ...mapState("admin/layout", ["isMobile"]),
-    labelWidth() {
-      return this.isMobile ? undefined : 75;
-    },
-    labelPosition() {
-      return this.isMobile ? "top" : "right";
-    },
-  },
-  methods: {
-    // 查看是否登录
-    onIsLogin() {
-      this.spinShow = true;
-      isLoginApi()
-        .then(async (res) => {
-          let data = res.data;
-          if (!data.status) {
-            this.$Message.warning("请先登录");
-            this.$router.push(
-              this.roterPre + "/setting/sms/sms_config/index?url=" + this.$route.path
-            );
-          } else {
-            this.getList();
-          }
-        })
-        .catch((res) => {
-          this.$Message.error(res.msg);
-        });
-    },
-    // 等级列表
-    getList() {
-      this.loading = true;
-      this.levelFrom.status = this.levelFrom.status || "";
-      this.levelFrom.is_have = this.levelFrom.is_have || "";
-      let data = {
-        data:
-          this.$route.path === this.roterPre + "/setting/sms/sms_template_apply/index"
-            ? this.levelFrom
-            : this.levelFrom2,
-        url:
-          this.$route.path === this.roterPre + "/setting/sms/sms_template_apply/index"
-            ? "serve/sms/temps"
-            : "notify/sms/public_temp",
-      };
-      let columns1 = [
-        {
-          title: "ID",
-          key: "id",
-          sortable: true,
-          width: 80,
-        },
-        {
-          title: "模板ID",
-          key: "templateid",
-          minWidth: 110,
-        },
-        {
-          title: "模板名称",
-          key: "title",
-          minWidth: 150,
-        },
-        {
-          title: "模板内容",
-          key: "content",
-          minWidth: 550,
-        },
-        {
-          title: "模板类型",
-          key: "type",
-          minWidth: 100,
-        },
-        {
-          title: "模板状态",
-          slot: "status",
-          minWidth: 100,
-        },
-      ];
-      if (
-        this.$route.path === this.roterPre + "/setting/sms/sms_template_apply/commons"
-      ) {
-        this.columns1 = Object.assign([], columns1)
-          .slice(0, 6)
-          .concat([
-            {
-              title: "是否拥有",
-              slot: "is_have",
-              minWidth: 110,
-            },
-          ]);
-      } else {
-        this.columns1 = columns1;
-      }
-      tempListApi(data)
-        .then(async (res) => {
-          let data = res.data;
-          this.levelLists = data.data;
-          this.total = data.count;
-          this.loading = false;
-        })
-        .catch((res) => {
-          this.loading = false;
-          this.$Message.error(res.msg);
-        });
-    },
-    pageChange(index) {
-      this.levelFrom.page = index;
-      this.getList();
-    },
-    // 添加
-    add() {
-      tempCreateApi()
-        .then(async (res) => {
-          this.FromData = res.data;
-          this.$refs.edits.modals = true;
-        })
-        .catch((res) => {
-          this.$Message.error(res.msg);
-        });
-    },
-    // 表格搜索
-    userSearchs() {
-      this.levelFrom.page = 1;
-      this.getList();
-    },
-    // 修改成功
-    submitFail() {
-      this.getList();
-    },
-    //修改签名
-    editSign() {
-      if (this.accountInfo.sms.sign_status === 0) {
-        this.$Message.warning("签名待审核，暂无法修改");
-        return;
-      }
-      this.sign = this.accountInfo.sms.sign;
-      this.modals = true;
-    },
-    cancel(name) {
-      this.modals = false;
-      this.$refs[name].resetFields();
-      this.formInline.phone = this.accountInfo.phone;
-    },
-    // 提交
-    editSubmit(name) {
-      this.$refs[name].validate((valid) => {
-        if (valid) {
-          serveSign(this.formInline)
-            .then((res) => {
-              this.modals = false;
-              this.$Message.success(res.msg);
-              this.$refs[name].resetFields();
-            })
-            .catch((res) => {
-              this.$Message.error(res.msg);
-            });
-        }
-      });
-    },
-    // 短信验证码
-    cutDown() {
-      if (this.formInline.phone) {
-        if (!this.canClick) return;
-        this.canClick = false;
-        this.cutNUm = 60;
-        let data = {
-          phone: this.formInline.phone,
-        };
-        captchaApi(data)
-          .then(async (res) => {
-            this.$Message.success(res.msg);
-          })
-          .catch((res) => {
-            this.$Message.error(res.msg);
-          });
-        let time = setInterval(() => {
-          this.cutNUm--;
-          if (this.cutNUm === 0) {
-            this.cutNUm = "获取验证码";
-            this.canClick = true;
-            clearInterval(time);
-          }
-        }, 1000);
-      } else {
-        this.$Message.warning("请填写手机号!");
-      }
-    },
-  },
-};
+	import {
+		mapState
+	} from "vuex";
+	import {
+		tempListApi,
+		tempCreateApi,
+		isLoginApi,
+		serveInfoApi,
+		serveSign,
+		captchaApi,
+	} from "@/api/setting";
+	import editFrom from "@/components/from/from";
+	import Setting from '@/setting';
+	export default {
+		name: "smsTemplateApply",
+		components: {
+			editFrom
+		},
+		data() {
+			const validatePhone = (rule, value, callback) => {
+				if (!value) {
+					return callback(new Error("请填写手机号"));
+				} else if (!/^1[3456789]\d{9}$/.test(value)) {
+					callback(new Error("手机号格式不正确!"));
+				} else {
+					callback();
+				}
+			};
+			return {
+				roterPre: Setting.roterPre,
+				modals: false,
+				cutNUm: "获取验证码",
+				canClick: true,
+				spinShow: true,
+				grid: {
+					xl: 7,
+					lg: 7,
+					md: 12,
+					sm: 24,
+					xs: 24,
+				},
+				sign: "",
+				formInline: {
+					sign: "",
+					phone: "",
+					code: "",
+				},
+				ruleInline: {
+					sign: [{
+						required: true,
+						message: "请输入短信签名",
+						trigger: "blur"
+					}],
+					phone: [{
+						required: true,
+						validator: validatePhone,
+						trigger: "blur"
+					}],
+					code: [{
+						required: true,
+						message: "请输入验证码",
+						trigger: "blur"
+					}],
+				},
+				loading: false,
+				columns1: [],
+				levelFrom: {
+					type: "",
+					status: "",
+					title: "",
+					page: 1,
+					limit: 20,
+				},
+				levelFrom2: {
+					is_have: "",
+					page: 1,
+					limit: 20,
+				},
+				total: 0,
+				FromData: null,
+				delfromData: {},
+				levelLists: [],
+				accountInfo: {}, //签名审核状态： 0、待审核；1、已通过；2、未通过
+			};
+		},
+		watch: {
+			$route(to, from) {
+				this.getList();
+			},
+		},
+		created() {
+			this.onIsLogin();
+		},
+		mounted() {
+			serveInfoApi().then((res) => {
+				this.accountInfo = res.data;
+				this.formInline.phone = res.data.phone;
+				if (res.data.sms.open != 1) {
+					this.$router.push(
+						this.roterPre + "/setting/sms/sms_config/index?url=" + this.$route.path
+					);
+				}
+			});
+		},
+		computed: {
+			...mapState("admin/layout", ["isMobile"]),
+			labelWidth() {
+				return this.isMobile ? undefined : 75;
+			},
+			labelPosition() {
+				return this.isMobile ? "top" : "right";
+			},
+		},
+		methods: {
+			// 查看是否登录
+			onIsLogin() {
+				this.spinShow = true;
+				isLoginApi()
+					.then(async (res) => {
+						let data = res.data;
+						if (!data.status) {
+							this.$Message.warning("请先登录");
+							this.$router.push(
+								this.roterPre + "/setting/sms/sms_config/index?url=" + this.$route.path
+							);
+						} else {
+							this.getList();
+						}
+					})
+					.catch((res) => {
+						this.$Message.error(res.msg);
+					});
+			},
+			// 等级列表
+			getList() {
+				this.loading = true;
+				this.levelFrom.status = this.levelFrom.status || "";
+				this.levelFrom.is_have = this.levelFrom.is_have || "";
+				let data = {
+					data: this.$route.path === this.roterPre + "/setting/sms/sms_template_apply/index" ?
+						this.levelFrom :
+						this.levelFrom2,
+					url: this.$route.path === this.roterPre + "/setting/sms/sms_template_apply/index" ?
+						"serve/sms/temps" :
+						"notify/sms/public_temp",
+				};
+				let columns1 = [{
+						title: "ID",
+						key: "id",
+						sortable: true,
+						width: 80,
+					},
+					{
+						title: "模板ID",
+						key: "templateid",
+						minWidth: 110,
+					},
+					{
+						title: "模板名称",
+						key: "title",
+						minWidth: 150,
+					},
+					{
+						title: "模板内容",
+						key: "content",
+						minWidth: 550,
+					},
+					{
+						title: "模板类型",
+						key: "type",
+						minWidth: 100,
+					},
+					{
+						title: "模板状态",
+						slot: "status",
+						minWidth: 100,
+					},
+				];
+				if (
+					this.$route.path === this.roterPre + "/setting/sms/sms_template_apply/commons"
+				) {
+					this.columns1 = Object.assign([], columns1)
+						.slice(0, 6)
+						.concat([{
+							title: "是否拥有",
+							slot: "is_have",
+							minWidth: 110,
+						}, ]);
+				} else {
+					this.columns1 = columns1;
+				}
+				tempListApi(data)
+					.then(async (res) => {
+						let data = res.data;
+						this.levelLists = data.data;
+						this.total = data.count;
+						this.loading = false;
+					})
+					.catch((res) => {
+						this.loading = false;
+						this.$Message.error(res.msg);
+					});
+			},
+			pageChange(index) {
+				this.levelFrom.page = index;
+				this.getList();
+			},
+			// 添加
+			add() {
+				tempCreateApi()
+					.then(async (res) => {
+						this.FromData = res.data;
+						this.$refs.edits.modals = true;
+					})
+					.catch((res) => {
+						this.$Message.error(res.msg);
+					});
+			},
+			// 表格搜索
+			userSearchs() {
+				this.levelFrom.page = 1;
+				this.getList();
+			},
+			// 修改成功
+			submitFail() {
+				this.getList();
+			},
+			//修改签名
+			editSign() {
+				if (this.accountInfo.sms.sign_status === 0) {
+					this.$Message.warning("签名待审核，暂无法修改");
+					return;
+				}
+				this.sign = this.accountInfo.sms.sign;
+				this.modals = true;
+			},
+			cancel(name) {
+				this.modals = false;
+				this.$refs[name].resetFields();
+				this.formInline.phone = this.accountInfo.phone;
+			},
+			// 提交
+			editSubmit(name) {
+				this.$refs[name].validate((valid) => {
+					if (valid) {
+						serveSign(this.formInline)
+							.then((res) => {
+								this.modals = false;
+								this.$Message.success(res.msg);
+								this.$refs[name].resetFields();
+							})
+							.catch((res) => {
+								this.$Message.error(res.msg);
+							});
+					}
+				});
+			},
+			// 短信验证码
+			cutDown() {
+				if (this.formInline.phone) {
+					if (!this.canClick) return;
+					this.canClick = false;
+					this.cutNUm = 60;
+					let data = {
+						phone: this.formInline.phone,
+					};
+					captchaApi(data)
+						.then(async (res) => {
+							this.$Message.success(res.msg);
+						})
+						.catch((res) => {
+							this.$Message.error(res.msg);
+						});
+					let time = setInterval(() => {
+						this.cutNUm--;
+						if (this.cutNUm === 0) {
+							this.cutNUm = "获取验证码";
+							this.canClick = true;
+							clearInterval(time);
+						}
+					}, 1000);
+				} else {
+					this.$Message.warning("请填写手机号!");
+				}
+			},
+		},
+	};
 </script>
 
 <style scoped lang="stylus">
-.input-add {
- width: 87%;
-}
-.tabBox_img {
-  width: 36px;
-  height: 36px;
-  border-radius: 4px;
-  cursor: pointer;
+	.input-add {
+		width: 87%;
+	}
 
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
+	.tabBox_img {
+		width: 36px;
+		height: 36px;
+		border-radius: 4px;
+		cursor: pointer;
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+</style>

src/pages/product/list_wait.vue

@@ -1,305 +1,291 @@
 <template>
-    <div class="article-manager">
-        <div class="i-layout-page-header">
-            <PageHeader
-                    title="商品管理"
-                    hidden-breadcrumb
-                    :tab-list="tabList"
-                    :tab-active-key="tabActiveKey"
-                    @on-tab-change="handleChangeTab"
-            >
-            </PageHeader>
-        </div>
-        <Card :bordered="false" dis-hover class="ivu-mt">
-            <div class="acea-row row-middle">
-                <span>商品分类：</span>
-                <TreeSelect v-model="value" :data="treeSelect" v-width="160"/>
-                <div class="ivu-search acea-row row-middle">
-                    <div>商品搜索：</div>
-                    <div class="ivu-mt ivu-mb" style="max-width:200px;">
-                        <Input search size="default" enter-button placeholder="请输入"/>
-                    </div>
-                    <Button class="export" @click="exportData">导出</Button>
-                </div>
-            </div>
-            <div class="Button">
-                <Button type="primary" class="bnt">批量上架</Button>
-            </div>
-            <Table
-                    ref="table"
-                    :columns="columns"
-                    :data="data"
-                    class="ivu-mt"
-                    :loading="loading"
-                    no-data-text="暂无数据"
-                    no-filtered-data-text="暂无筛选结果"
-            >
-                <template slot-scope="{ row }" slot="id">
-                    {{ row.id }}
-                </template>
-                <template slot-scope="{ row }" slot="image">
-                    <img v-lazy="row.image"/>
-                </template>
-                <template slot-scope="{ row }" slot="name">
-                    {{row.name}}
-                </template>
-                <template slot-scope="{ row }" slot="sales">
-                    {{row.sales}}
-                </template>
-                <template slot-scope="{ row }" slot="voidSales">
-                    {{row.voidSales}}
-                </template>
-                <template slot-scope="{ row }" slot="stock">
-                    {{ row.stock }}
-                </template>
-                <template slot-scope="{ row }" slot="collects">
-                    {{ row.collects }}
-                </template>
-                <template slot-scope="{ row }" slot="sort">
-                    {{ row.sort }}
-                </template>
-                <template slot-scope="{ row }" slot="state">
-                    <Switch size="large" v-model="row.is_show ? true:false" @on-change="change">
-                        <span slot="open">上架</span>
-                        <span slot="close">下架</span>
-                    </Switch>
-                </template>
-                <template slot-scope="{ row, index }" slot="action">
-                    <a>编辑</a>
-                    <Divider type="vertical"/>
-                    <template>
-                        <Dropdown>
-                            <a href="javascript:void(0)">
-                                更多
-                                <Icon type="ios-arrow-down"></Icon>
-                            </a>
-                            <DropdownMenu slot="list">
-                                <DropdownItem>驴打滚</DropdownItem>
-                                <DropdownItem>炸酱面</DropdownItem>
-                                <DropdownItem>豆汁儿</DropdownItem>
-                                <Dropdown placement="right-start">
-                                    <DropdownItem>
-                                        北京烤鸭
-                                        <Icon type="ios-arrow-forward"></Icon>
-                                    </DropdownItem>
-                                    <DropdownMenu slot="list">
-                                        <DropdownItem>挂炉烤鸭</DropdownItem>
-                                        <DropdownItem>焖炉烤鸭</DropdownItem>
-                                    </DropdownMenu>
-                                </Dropdown>
-                                <DropdownItem>冰糖葫芦</DropdownItem>
-                            </DropdownMenu>
-                        </Dropdown>
-                    </template>
-                </template>
-            </Table>
-            <div class="acea-row row-right page">
-                <Page :total="total" show-elevator/>
-            </div>
-        </Card>
-    </div>
+	<div class="article-manager">
+		<div class="i-layout-page-header">
+			<PageHeader title="商品管理" hidden-breadcrumb :tab-list="tabList" :tab-active-key="tabActiveKey"
+				@on-tab-change="handleChangeTab">
+			</PageHeader>
+		</div>
+		<Card :bordered="false" dis-hover class="ivu-mt">
+			<div class="acea-row row-middle">
+				<span>商品分类：</span>
+				<TreeSelect v-model="value" :data="treeSelect" v-width="160" />
+				<div class="ivu-search acea-row row-middle">
+					<div>商品搜索：</div>
+					<div class="ivu-mt ivu-mb" style="max-width:200px;">
+						<Input search size="default" enter-button placeholder="请输入" />
+					</div>
+					<Button class="export" @click="exportData">导出</Button>
+				</div>
+			</div>
+			<div class="Button">
+				<Button type="primary" class="bnt">批量上架</Button>
+			</div>
+			<Table ref="table" :columns="columns" :data="data" class="ivu-mt" :loading="loading" no-data-text="暂无数据"
+				no-filtered-data-text="暂无筛选结果">
+				<template slot-scope="{ row }" slot="id">
+					{{ row.id }}
+				</template>
+				<template slot-scope="{ row }" slot="image">
+					<img v-lazy="row.image" />
+				</template>
+				<template slot-scope="{ row }" slot="name">
+					{{row.name}}
+				</template>
+				<template slot-scope="{ row }" slot="sales">
+					{{row.sales}}
+				</template>
+				<template slot-scope="{ row }" slot="voidSales">
+					{{row.voidSales}}
+				</template>
+				<template slot-scope="{ row }" slot="stock">
+					{{ row.stock }}
+				</template>
+				<template slot-scope="{ row }" slot="collects">
+					{{ row.collects }}
+				</template>
+				<template slot-scope="{ row }" slot="sort">
+					{{ row.sort }}
+				</template>
+				<template slot-scope="{ row }" slot="state">
+					<Switch size="large" v-model="row.is_show ? true:false" @on-change="change">
+						<span slot="open">上架</span>
+						<span slot="close">下架</span>
+					</Switch>
+				</template>
+				<template slot-scope="{ row, index }" slot="action">
+					<a>编辑</a>
+					<Divider type="vertical" />
+					<template>
+						<Dropdown>
+							<a href="javascript:void(0)">
+								更多
+								<Icon type="ios-arrow-down"></Icon>
+							</a>
+							<DropdownMenu slot="list">
+								<DropdownItem>驴打滚</DropdownItem>
+								<DropdownItem>炸酱面</DropdownItem>
+								<DropdownItem>豆汁儿</DropdownItem>
+								<Dropdown placement="right-start">
+									<DropdownItem>
+										北京烤鸭
+										<Icon type="ios-arrow-forward"></Icon>
+									</DropdownItem>
+									<DropdownMenu slot="list">
+										<DropdownItem>挂炉烤鸭</DropdownItem>
+										<DropdownItem>焖炉烤鸭</DropdownItem>
+									</DropdownMenu>
+								</Dropdown>
+								<DropdownItem>冰糖葫芦</DropdownItem>
+							</DropdownMenu>
+						</Dropdown>
+					</template>
+				</template>
+			</Table>
+			<div class="acea-row row-right page">
+				<Page :total="total" show-elevator />
+			</div>
+		</Card>
+	</div>
 </template>
 <style scoped lang="less">
-    img {
-        height: 36px;
-        display: block;
-    }
+	img {
+		height: 36px;
+		display: block;
+	}
 
-    .ivu-mt .ivu-search {
-        margin-left: 16px;
-    }
+	.ivu-mt .ivu-search {
+		margin-left: 16px;
+	}
 
-    .ivu-mt .export {
-        margin-left: 6px;
-    }
+	.ivu-mt .export {
+		margin-left: 6px;
+	}
 
-    .ivu-mt .Button .bnt {
-        margin-right: 6px;
-    }
+	.ivu-mt .Button .bnt {
+		margin-right: 6px;
+	}
 </style>
 <script>
-    import mixin from './mixins';
-    import expandRow from './tableExpand.vue';
+	import mixin from './mixins';
+	import expandRow from './tableExpand.vue';
 
-    export default {
-        name: 'product_list_wait',
-        mixins: [mixin],
-        components: { expandRow },
-        data () {
-            return {
-                tabActiveKey: 'list_wait',
-                loading: false,
-                cityList: [
-                    {
-                        value: '跌幅很大功夫大湖股份',
-                        label: '跌幅很大功夫大湖股份'
-                    },
-                    {
-                        value: 'London',
-                        label: 'London'
-                    }
-                ],
-                model11: '',
-                model12: '',
-                columns: [
-                    {
-                        type: 'selection',
-                        width: 60,
-                        align: 'center'
-                    },
-                    {
-                        type: 'expand',
-                        width: 50,
-                        render: (h, params) => {
-                            return h(expandRow, {
-                                props: {
-                                    row: params.row
-                                }
-                            })
-                        }
-                    },
-                    {
-                        title: '商品ID',
-                        slot: 'id',
-                        width: 100
-                    },
-                    {
-                        title: '商品图',
-                        slot: 'image',
-                        minWidth: 80
-                    },
-                    {
-                        title: '商品名称',
-                        slot: 'name',
-                        minWidth: 250
-                    },
-                    {
-                        title: '销量',
-                        slot: 'sales',
-                        sortable: true,
-                        minWidth: 90
-                    },
-                    {
-                        title: '虚拟销量',
-                        slot: 'voidSales',
-                        minWidth: 100
-                    },
-                    {
-                        title: '库存',
-                        slot: 'stock',
-                        minWidth: 80
-                    },
-                    {
-                        title: '收藏',
-                        slot: 'collects',
-                        minWidth: 70
-                    },
-                    {
-                        title: '排序',
-                        slot: 'sort',
-                        minWidth: 70
-                    },
-                    {
-                        title: '状态',
-                        key: 'state',
-                        slot: 'state',
-                        width: 100,
-                        filters: [
-                            {
-                                label: '上架',
-                                value: 1
-                            },
-                            {
-                                label: '下架',
-                                value: 0
-                            }
-                        ],
-                        filterMethod (value, row) {
-                            return row.is_show === value;
-                        },
-                        filterMultiple: false
-                    },
-                    {
-                        title: '操作',
-                        slot: 'action',
-                        fixed: 'right',
-                        minWidth: 150
-                    }
-                ],
-                data: [],
-                total: 0
-            }
-        },
-        mounted () {
-            this.getData();
-        },
-        methods: {
-            getData () {
-                this.loading = true;
-                setTimeout(() => {
-                    let data = [
-                        {
-                            id: '1120',
-                            image: 'https://dev-file.iviewui.com/PKCycgm3DWJOca5I2uAEqneuLFQAcKa7/middle',
-                            name: 'CRMEB商城系统V3.0将在8月与大家见面',
-                            sales: '357万',
-                            voidSales: '400万',
-                            stock: '3570',
-                            collects: '26',
-                            sort: '2',
-                            is_show: 1,
-                            job: 'Data engineer',
-                            interest: 'badminton',
-                            birthday: '1991-05-14',
-                            book: 'Steve Jobs',
-                            movie: 'The Prestige'
-                        },
-                        {
-                            id: '2',
-                            image: 'https://dev-file.iviewui.com/KUa7CaC6m7vRtDCfY0SAXlp7dw9OvBrf/middle',
-                            name: 'CRMEB商城系统V3.0将在8月与大家见面',
-                            sales: '357万',
-                            voidSales: '400万',
-                            stock: '3570',
-                            collects: '26',
-                            sort: '2',
-                            is_show: 0,
-                            job: 'Data engineer',
-                            interest: 'badminton',
-                            birthday: '1991-05-14',
-                            book: 'Steve Jobs',
-                            movie: 'The Prestige'
-                        },
-                        {
-                            id: '666',
-                            image: 'https://dev-file.iviewui.com/OYZqqiP1bbwN22Ai2HnwvSagxuSNchdD/middle',
-                            name: 'CRMEB商城系统V3.0将在8月与大家见面',
-                            sales: '357万',
-                            voidSales: '400万',
-                            stock: '3570',
-                            collects: '26',
-                            sort: '2',
-                            is_show: 1,
-                            job: 'Data engineer',
-                            interest: 'badminton',
-                            birthday: '1991-05-14',
-                            book: 'Steve Jobs',
-                            movie: 'The Prestige'
-                        }
-                    ];
-                    this.loading = false;
-                    this.data = data;
-                    this.total = data.length;
-                }, 1000);
-            },
-            change (status) {
-            },
-            // 数据导出；
-            exportData: function () {
-                this.$refs.table.exportCsv({
-                    filename: '商品列表'
-                });
-            }
-        }
-    }
-</script>
+	export default {
+		name: 'product_list_wait',
+		mixins: [mixin],
+		components: {
+			expandRow
+		},
+		data() {
+			return {
+				tabActiveKey: 'list_wait',
+				loading: false,
+				cityList: [{
+						value: '跌幅很大功夫大湖股份',
+						label: '跌幅很大功夫大湖股份'
+					},
+					{
+						value: 'London',
+						label: 'London'
+					}
+				],
+				model11: '',
+				model12: '',
+				columns: [{
+						type: 'selection',
+						width: 60,
+						align: 'center'
+					},
+					{
+						type: 'expand',
+						width: 50,
+						render: (h, params) => {
+							return h(expandRow, {
+								props: {
+									row: params.row
+								}
+							})
+						}
+					},
+					{
+						title: '商品ID',
+						slot: 'id',
+						width: 100
+					},
+					{
+						title: '商品图',
+						slot: 'image',
+						minWidth: 80
+					},
+					{
+						title: '商品名称',
+						slot: 'name',
+						minWidth: 250
+					},
+					{
+						title: '销量',
+						slot: 'sales',
+						sortable: true,
+						minWidth: 90
+					},
+					{
+						title: '虚拟销量',
+						slot: 'voidSales',
+						minWidth: 100
+					},
+					{
+						title: '库存',
+						slot: 'stock',
+						minWidth: 80
+					},
+					{
+						title: '收藏',
+						slot: 'collects',
+						minWidth: 70
+					},
+					{
+						title: '排序',
+						slot: 'sort',
+						minWidth: 70
+					},
+					{
+						title: '状态',
+						key: 'state',
+						slot: 'state',
+						width: 100,
+						filters: [{
+								label: '上架',
+								value: 1
+							},
+							{
+								label: '下架',
+								value: 0
+							}
+						],
+						filterMethod(value, row) {
+							return row.is_show === value;
+						},
+						filterMultiple: false
+					},
+					{
+						title: '操作',
+						slot: 'action',
+						fixed: 'right',
+						minWidth: 150
+					}
+				],
+				data: [],
+				total: 0
+			}
+		},
+		mounted() {
+			this.getData();
+		},
+		methods: {
+			getData() {
+				this.loading = true;
+				setTimeout(() => {
+					let data = [
+						// {
+						//     id: '1120',
+						//     image: 'https://dev-file.iviewui.com/PKCycgm3DWJOca5I2uAEqneuLFQAcKa7/middle',
+						//     name: 'CRMEB商城系统V3.0将在8月与大家见面',
+						//     sales: '357万',
+						//     voidSales: '400万',
+						//     stock: '3570',
+						//     collects: '26',
+						//     sort: '2',
+						//     is_show: 1,
+						//     job: 'Data engineer',
+						//     interest: 'badminton',
+						//     birthday: '1991-05-14',
+						//     book: 'Steve Jobs',
+						//     movie: 'The Prestige'
+						// },
+						// {
+						//     id: '2',
+						//     image: 'https://dev-file.iviewui.com/KUa7CaC6m7vRtDCfY0SAXlp7dw9OvBrf/middle',
+						//     name: 'CRMEB商城系统V3.0将在8月与大家见面',
+						//     sales: '357万',
+						//     voidSales: '400万',
+						//     stock: '3570',
+						//     collects: '26',
+						//     sort: '2',
+						//     is_show: 0,
+						//     job: 'Data engineer',
+						//     interest: 'badminton',
+						//     birthday: '1991-05-14',
+						//     book: 'Steve Jobs',
+						//     movie: 'The Prestige'
+						// },
+						// {
+						//     id: '666',
+						//     image: 'https://dev-file.iviewui.com/OYZqqiP1bbwN22Ai2HnwvSagxuSNchdD/middle',
+						//     name: 'CRMEB商城系统V3.0将在8月与大家见面',
+						//     sales: '357万',
+						//     voidSales: '400万',
+						//     stock: '3570',
+						//     collects: '26',
+						//     sort: '2',
+						//     is_show: 1,
+						//     job: 'Data engineer',
+						//     interest: 'badminton',
+						//     birthday: '1991-05-14',
+						//     book: 'Steve Jobs',
+						//     movie: 'The Prestige'
+						// }
+					];
+					this.loading = false;
+					this.data = data;
+					this.total = data.length;
+				}, 1000);
+			},
+			change(status) {},
+			// 数据导出；
+			exportData: function() {
+				this.$refs.table.exportCsv({
+					filename: '商品列表'
+				});
+			}
+		}
+	}
+</script>

src/pages/product/productAdd/taoBao.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="Box">
-        <Card>
+	<div class="Box">
+		<!-- <Card>
             <div>生成的商品默认是没有上架的，请手动上架商品！
                 <a href="http://help.crmeb.net/crmeb-v4/1863579" v-if="copyConfig.copy_type == 2"  target="_blank">如何配置密钥</a>
                 <span v-else>您当前剩余{{copyConfig.copy_num}}条采集次数，<a href="#" @click="mealPay('copy')">增加采集次数</a></span>
             </div>
             <div>商品采集设置：设置 > 系统设置 > 第三方接口设置 > 采集商品配置</div>
-        </Card>
-        <Form class="formValidate mt20" ref="formValidate" :label-width="120" label-position="right" @submit.native.prevent>
+        </Card> -->
+		<!-- <Form class="formValidate mt20" ref="formValidate" :label-width="120" label-position="right" @submit.native.prevent>
             <Row :gutter="24" type="flex">
                 <Col span="18">
                     <FormItem label="链接地址：">
@@ -15,94 +15,104 @@
                     </FormItem>
                 </Col>
             </Row>
-        </Form>
-        <Spin size="large" fix v-if="spinShow"></Spin>
-    </div>
+        </Form> -->
+		<!-- <Spin size="large" fix v-if="spinShow"></Spin> -->
+	</div>
 </template>
 
 <script>
-    import { crawlFromApi, copyConfigApi} from '@/api/product'
-    import Setting from '@/setting';
-    export default {
-        name: 'taoBao',
-        data () {
-            return {
-              roterPre: Setting.roterPre,
-                soure_link: '',
-                spinShow: false,
-                grid: {
-                    xl: 8,
-                    lg: 8,
-                    md: 12,
-                    sm: 24,
-                    xs: 24
-                },
-                grid2: {
-                    xl: 12,
-                    lg: 12,
-                    md: 12,
-                    sm: 24,
-                    xs: 24
-                },
-                copyConfig: {
-                    'copy_type': '',
-                    'copy_num': 0,
-                },
-                artFrom: {
-                    type: 'taobao',
-                    url: ''
-                },
-            }
-        },
-        computed: {},
-        created () {},
-        mounted () {
-            this.getCopyConfig()
-        },
-        methods: {
-            mealPay (val) {
-                this.$router.push({ path:this.roterPre + '/setting/sms/sms_pay/index',query:{type:val}});
-            },
-            getCopyConfig() {
-                copyConfigApi().then(res => {
-                    this.copyConfig.copy_type = res.data.copy_type
-                    this.copyConfig.copy_num = res.data.copy_num
-                })
-            },
-            // 生成表单
-            add () {
-                if (this.soure_link) {
-                    var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/
-                    if (!reg.test(this.soure_link)) {
-                        return this.$Message.warning('请输入以http开头的地址！')
-                    }
-                    this.spinShow = true
-                    this.artFrom.url = this.soure_link
-                    crawlFromApi(this.artFrom).then(res => {
-                        let info = res.data.productInfo;
-                        this.$emit('on-close',info);
-                        this.spinShow = false;
-                    }).catch(res => {
-                        this.spinShow = false
-                        this.$Message.error(res.msg)
+	import {
+		crawlFromApi,
+		copyConfigApi
+	} from '@/api/product'
+	import Setting from '@/setting';
+	export default {
+		name: 'taoBao',
+		data() {
+			return {
+				roterPre: Setting.roterPre,
+				soure_link: '',
+				spinShow: false,
+				grid: {
+					xl: 8,
+					lg: 8,
+					md: 12,
+					sm: 24,
+					xs: 24
+				},
+				grid2: {
+					xl: 12,
+					lg: 12,
+					md: 12,
+					sm: 24,
+					xs: 24
+				},
+				copyConfig: {
+					'copy_type': '',
+					'copy_num': 0,
+				},
+				artFrom: {
+					type: 'taobao',
+					url: ''
+				},
+			}
+		},
+		computed: {},
+		created() {},
+		mounted() {
+			this.getCopyConfig()
+		},
+		methods: {
+			mealPay(val) {
+				this.$router.push({
+					path: this.roterPre + '/setting/sms/sms_pay/index',
+					query: {
+						type: val
+					}
+				});
+			},
+			getCopyConfig() {
+				copyConfigApi().then(res => {
+					this.copyConfig.copy_type = res.data.copy_type
+					this.copyConfig.copy_num = res.data.copy_num
+				})
+			},
+			// 生成表单
+			add() {
+				if (this.soure_link) {
+					var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/
+					if (!reg.test(this.soure_link)) {
+						return this.$Message.warning('请输入以http开头的地址！')
+					}
+					this.spinShow = true
+					this.artFrom.url = this.soure_link
+					crawlFromApi(this.artFrom).then(res => {
+						let info = res.data.productInfo;
+						this.$emit('on-close', info);
+						this.spinShow = false;
+					}).catch(res => {
+						this.spinShow = false
+						this.$Message.error(res.msg)
 
-                    })
-                } else {
-                    this.$Message.warning('请输入链接地址！')
-                }
-            },
-        }
-    }
+					})
+				} else {
+					this.$Message.warning('请输入链接地址！')
+				}
+			},
+		}
+	}
 </script>
 
 <style scoped lang="stylus">
-    /deep/.ivu-form-item-content{
-        line-height unset!important;
-    }
-    .Box .ivu-radio-wrapper{
-        margin-right :25px;
-    }
-    .Box .numPut{
-        width : 100% !important;
-    }
+	/deep/.ivu-form-item-content {
+		line-height unset !important;
+	}
+
+	.Box .ivu-radio-wrapper {
+		margin-right: 25px;
+	}
+
+	.Box .numPut {
+		width: 100% !important;
+	}
 </style>

src/pages/product/productList/taoBao.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="Box">
-    <Card>
+	<div class="Box">
+		<!-- <Card>
       <div>
         生成的商品默认是没有上架的，请手动上架商品！
         <a
@@ -18,894 +18,745 @@
         >
       </div>
       <div>商品采集设置：设置 > 系统设置 > 第三方接口设置 > 采集商品配置</div>
-    </Card>
-    <Form
-      class="formValidate mt20"
-      ref="formValidate"
-      :model="formValidate"
-      :rules="ruleInline"
-      :label-width="labelWidth"
-      :label-position="labelPosition"
-      @submit.native.prevent
-    >
-      <Row :gutter="24" type="flex">
-        <!--                <Col span="24">-->
-        <!--                    <FormItem label=""  label-for="">-->
-        <!--                        <RadioGroup v-model="artFrom.type">-->
-        <!--                            <Radio label="taobao">淘宝</Radio>-->
-        <!--                            <Radio label="tmall">天猫</Radio>-->
-        <!--                            <Radio label="jd">京东</Radio>-->
-        <!--                            <Radio label="pdd">拼多多</Radio>-->
-        <!--                            <Radio label="suning">苏宁</Radio>-->
-        <!--                            <Radio label="1688">1688</Radio>-->
-        <!--                        </RadioGroup>-->
-        <!--                    </FormItem>-->
-        <!--                </Col>-->
-        <Col span="15">
-          <FormItem label="链接地址：">
-            <Input
-              search
-              enter-button="确定"
-              v-model="soure_link"
-              placeholder="请输入链接地址"
-              class="numPut"
-              @on-search="add"
-            />
-          </FormItem>
-        </Col>
-        <div>
-          <div v-if="isData">
-            <Col span="24">
-              <FormItem label="商品名称：" prop="store_name">
-                <Input
-                  v-model="formValidate.store_name"
-                  placeholder="请输入商品名称"
-                />
-              </FormItem>
-            </Col>
-            <Col span="22">
-              <FormItem
-                label="商品简介："
-                prop="store_info"
-                label-for="store_info"
-              >
-                <Input
-                  v-model="formValidate.store_info"
-                  type="textarea"
-                  :rows="3"
-                  placeholder="请输入商品简介"
-                />
-              </FormItem>
-            </Col>
-            <Col span="22">
-              <FormItem label="商品分类：" prop="cate_id">
-                <Select v-model="formValidate.cate_id" multiple>
-                  <Option
-                    v-for="item in treeSelect"
-                    :disabled="item.pid === 0"
-                    :value="item.id"
-                    :key="item.id"
-                    >{{ item.html + item.cate_name }}</Option
-                  >
-                </Select>
-              </FormItem>
-            </Col>
-            <Col v-bind="grid">
-              <FormItem label="商品关键字：" prop="keyword" label-for="keyword">
-                <Input
-                  v-model="formValidate.keyword"
-                  placeholder="请输入商品关键字"
-                />
-              </FormItem>
-            </Col>
-            <Col v-bind="grid">
-              <FormItem label="单位：" prop="unit_name" label-for="unit_name">
-                <Input
-                  v-model="formValidate.unit_name"
-                  placeholder="请输入单位"
-                />
-              </FormItem>
-            </Col>
-            <Col v-bind="grid">
-              <FormItem label="虚拟销量：" label-for="ficti">
-                <InputNumber
-                  v-width="'100%'"
-                  v-model="formValidate.ficti"
-                  placeholder="请输入虚拟销量"
-                />
-              </FormItem>
-            </Col>
-            <Col v-bind="grid">
-              <FormItem label="积分：" label-for="give_integral">
-                <InputNumber
-                  v-width="'100%'"
-                  v-model="formValidate.give_integral"
-                  placeholder="请输入积分"
-                />
-              </FormItem>
-            </Col>
-            <Col v-bind="grid">
-              <FormItem label="运费模板：" prop="temp_id">
-                <Select v-model="formValidate.temp_id" clearable>
-                  <Option
-                    v-for="(item, index) in templateList"
-                    :value="item.id"
-                    :key="index"
-                    >{{ item.name }}</Option
-                  >
-                </Select>
-              </FormItem>
-            </Col>
-            <!--<Col v-bind="grid">-->
-            <!--<FormItem label="邮费："  label-for="postage">-->
-            <!--<InputNumber v-width="'100%'" v-model="formValidate.postage" placeholder="请输入邮费"  />-->
-            <!--</FormItem>-->
-            <!--</Col>-->
+    </Card> -->
+		<Form class="formValidate mt20" ref="formValidate" :model="formValidate" :rules="ruleInline"
+			:label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
+			<Row :gutter="24" type="flex">
+				<!--                <Col span="24">-->
+				<!--                    <FormItem label=""  label-for="">-->
+				<!--                        <RadioGroup v-model="artFrom.type">-->
+				<!--                            <Radio label="taobao">淘宝</Radio>-->
+				<!--                            <Radio label="tmall">天猫</Radio>-->
+				<!--                            <Radio label="jd">京东</Radio>-->
+				<!--                            <Radio label="pdd">拼多多</Radio>-->
+				<!--                            <Radio label="suning">苏宁</Radio>-->
+				<!--                            <Radio label="1688">1688</Radio>-->
+				<!--                        </RadioGroup>-->
+				<!--                    </FormItem>-->
+				<!--                </Col>-->
+				<Col span="15">
+				<FormItem label="链接地址：">
+					<Input search enter-button="确定" v-model="soure_link" placeholder="请输入链接地址" class="numPut"
+						@on-search="add" />
+				</FormItem>
+				</Col>
+				<div>
+					<div v-if="isData">
+						<Col span="24">
+						<FormItem label="商品名称：" prop="store_name">
+							<Input v-model="formValidate.store_name" placeholder="请输入商品名称" />
+						</FormItem>
+						</Col>
+						<Col span="22">
+						<FormItem label="商品简介：" prop="store_info" label-for="store_info">
+							<Input v-model="formValidate.store_info" type="textarea" :rows="3" placeholder="请输入商品简介" />
+						</FormItem>
+						</Col>
+						<Col span="22">
+						<FormItem label="商品分类：" prop="cate_id">
+							<Select v-model="formValidate.cate_id" multiple>
+								<Option v-for="item in treeSelect" :disabled="item.pid === 0" :value="item.id"
+									:key="item.id">{{ item.html + item.cate_name }}</Option>
+							</Select>
+						</FormItem>
+						</Col>
+						<Col v-bind="grid">
+						<FormItem label="商品关键字：" prop="keyword" label-for="keyword">
+							<Input v-model="formValidate.keyword" placeholder="请输入商品关键字" />
+						</FormItem>
+						</Col>
+						<Col v-bind="grid">
+						<FormItem label="单位：" prop="unit_name" label-for="unit_name">
+							<Input v-model="formValidate.unit_name" placeholder="请输入单位" />
+						</FormItem>
+						</Col>
+						<Col v-bind="grid">
+						<FormItem label="虚拟销量：" label-for="ficti">
+							<InputNumber v-width="'100%'" v-model="formValidate.ficti" placeholder="请输入虚拟销量" />
+						</FormItem>
+						</Col>
+						<Col v-bind="grid">
+						<FormItem label="积分：" label-for="give_integral">
+							<InputNumber v-width="'100%'" v-model="formValidate.give_integral" placeholder="请输入积分" />
+						</FormItem>
+						</Col>
+						<Col v-bind="grid">
+						<FormItem label="运费模板：" prop="temp_id">
+							<Select v-model="formValidate.temp_id" clearable>
+								<Option v-for="(item, index) in templateList" :value="item.id" :key="index">
+									{{ item.name }}</Option>
+							</Select>
+						</FormItem>
+						</Col>
+						<!--<Col v-bind="grid">-->
+						<!--<FormItem label="邮费："  label-for="postage">-->
+						<!--<InputNumber v-width="'100%'" v-model="formValidate.postage" placeholder="请输入邮费"  />-->
+						<!--</FormItem>-->
+						<!--</Col>-->
 
-            <Col span="24">
-              <FormItem label="商品图：">
-                <div class="pictrueBox">
-                  <div class="pictrue" v-if="formValidate.image">
-                    <viewer><img v-lazy="formValidate.image" /></viewer>
-                  </div>
-                </div>
-              </FormItem>
-            </Col>
-            <Col span="24">
-              <FormItem label="商品轮播图：">
-                <viewer>
-                  <div class="acea-row">
-                    <div
-                      class="lunBox mr15"
-                      v-for="(item, index) in formValidate.slider_image"
-                      :key="index"
-                      draggable="true"
-                      @dragstart="handleDragStart($event, item)"
-                      @dragover.prevent="handleDragOver($event, item)"
-                      @dragenter="handleDragEnter($event, item)"
-                      @dragend="handleDragEnd($event, item)"
-                    >
-                      <div class="pictrue"><img v-lazy="item" /></div>
-                      <ButtonGroup size="small">
-                        <Button @click.native="checked(item, index)"
-                          >主图</Button
-                        >
-                        <Button @click.native="handleRemove(index)"
-                          >移除</Button
-                        >
-                      </ButtonGroup>
-                    </div>
-                  </div>
-                </viewer>
-              </FormItem>
-            </Col>
-            <Col span="24">
-              <FormItem
-                label="批量设置："
-                class="labeltop"
-                v-if="formValidate.attrs"
-              >
-                <Table :data="oneFormBatch" :columns="columnsBatch" border>
-                  <template slot-scope="{ row, index }" slot="pic">
-                    <div
-                      class="acea-row row-middle row-center-wrapper"
-                      @click="modalPicTap('dan', 'duopi', index)"
-                    >
-                      <div
-                        class="pictrue pictrueTab"
-                        v-if="oneFormBatch[0].pic"
-                      >
-                        <img v-lazy="oneFormBatch[0].pic" />
-                      </div>
-                      <div
-                        class="upLoad pictrueTab acea-row row-center-wrapper"
-                        v-else
-                      >
-                        <Icon
-                          type="ios-camera-outline"
-                          size="21"
-                          class="iconfont"
-                        />
-                      </div>
-                    </div>
-                  </template>
-                  <template slot-scope="{ row, index }" slot="price">
-                    <InputNumber
-                      v-model="oneFormBatch[0].price"
-                      :min="0"
-                      class="priceBox"
-                    ></InputNumber>
-                  </template>
-                  <template slot-scope="{ row, index }" slot="cost">
-                    <InputNumber
-                      v-model="oneFormBatch[0].cost"
-                      :min="0"
-                      class="priceBox"
-                    ></InputNumber>
-                  </template>
-                  <template slot-scope="{ row, index }" slot="ot_price">
-                    <InputNumber
-                      v-model="oneFormBatch[0].ot_price"
-                      :min="0"
-                      class="priceBox"
-                    ></InputNumber>
-                  </template>
-                  <template slot-scope="{ row, index }" slot="stock">
-                    <InputNumber
-                      v-model="oneFormBatch[0].stock"
-                      :min="0"
-                      class="priceBox"
-                    ></InputNumber>
-                  </template>
-                  <template slot-scope="{ row, index }" slot="bar_code">
-                    <Input v-model="oneFormBatch[0].bar_code"></Input>
-                  </template>
-                  <template slot-scope="{ row, index }" slot="weight">
-                    <InputNumber
-                      v-model="oneFormBatch[0].weight"
-                      :min="0"
-                      class="priceBox"
-                    ></InputNumber>
-                  </template>
-                  <template slot-scope="{ row, index }" slot="volume">
-                    <InputNumber
-                      v-model="oneFormBatch[0].volume"
-                      :min="0"
-                      class="priceBox"
-                    ></InputNumber>
-                  </template>
-                  <template slot-scope="{ row, index }" slot="action">
-                    <a @click="batchAdd">添加</a>
-                    <Divider type="vertical" />
-                    <a @click="batchDel">清空</a>
-                  </template>
-                </Table>
-              </FormItem>
-            </Col>
-            <Col span="24">
-              <FormItem
-                label="商品规格："
-                props="spec_type"
-                label-for="spec_type"
-              >
-                <!-- 单规格表格-->
-                <Col :xl="23" :lg="24" :md="24" :sm="24" :xs="24">
-                  <FormItem>
-                    <Table :data="items" :columns="columns" border>
-                      <template slot-scope="{ row, index }" slot="pic">
-                        <div
-                          class="acea-row row-middle row-center-wrapper"
-                          @click="modalPicTap('dan', index)"
-                        >
-                          <div
-                            class="pictrue pictrueTab"
-                            v-if="formValidate.attrs[index].pic"
-                          >
-                            <img v-lazy="formValidate.attrs[index].pic" />
-                          </div>
-                          <div
-                            class="upLoad upLoadTab acea-row row-center-wrapper"
-                            v-else
-                          >
-                            <Icon
-                              type="ios-camera-outline"
-                              size="26"
-                              class="iconfont"
-                            />
-                          </div>
-                        </div>
-                      </template>
-                      <template slot-scope="{ row, index }" slot="price">
-                        <InputNumber
-                          v-model="formValidate.attrs[index].price"
-                          class="priceBox"
-                        ></InputNumber>
-                      </template>
-                      <template slot-scope="{ row, index }" slot="cost">
-                        <InputNumber
-                          v-model="formValidate.attrs[index].cost"
-                          class="priceBox"
-                        ></InputNumber>
-                      </template>
-                      <template slot-scope="{ row, index }" slot="ot_price">
-                        <InputNumber
-                          v-model="formValidate.attrs[index].ot_price"
-                          class="priceBox"
-                        ></InputNumber>
-                      </template>
-                      <template slot-scope="{ row, index }" slot="vip_price">
-                        <InputNumber
-                          v-model="formValidate.attrs[index].vip_price"
-                          class="priceBox"
-                        ></InputNumber>
-                      </template>
-                      <template slot-scope="{ row, index }" slot="stock">
-                        <InputNumber
-                          v-model="formValidate.attrs[index].stock"
-                          class="priceBox"
-                        ></InputNumber>
-                      </template>
-                      <template slot-scope="{ row, index }" slot="bar_code">
-                        <Input
-                          v-model="formValidate.attrs[index].bar_code"
-                        ></Input>
-                      </template>
-                      <template slot-scope="{ row, index }" slot="weight">
-                        <InputNumber
-                          v-model="formValidate.attrs[index].weight"
-                          :min="0"
-                          class="priceBox"
-                        ></InputNumber>
-                      </template>
-                      <template slot-scope="{ row, index }" slot="volume">
-                        <InputNumber
-                          v-model="formValidate.attrs[index].volume"
-                          :min="0"
-                          class="priceBox"
-                        ></InputNumber>
-                      </template>
-                      <template slot-scope="{ row, index }" slot="action">
-                        <a @click="delAttrTable(index)">删除</a>
-                      </template>
-                    </Table>
-                  </FormItem>
-                </Col>
-              </FormItem>
-            </Col>
-            <Col span="24">
-              <FormItem label="商品详情：">
-				<WangEditor
-				  style="width: 100%"
-				  :content="formValidate.description"
-				  @editorContent="getEditorContent"
-				></WangEditor>
-              </FormItem>
-            </Col>
-            <Col span="24">
-              <FormItem>
-                <Button
-                  type="primary"
-                  :loading="modal_loading"
-                  class="submission"
-                  @click="handleSubmit('formValidate')"
-                  >提交</Button
-                >
-              </FormItem>
-            </Col>
-          </div>
-          <Spin size="large" fix v-if="spinShow"></Spin>
-        </div>
-      </Row>
-    </Form>
-    <Modal
-      v-model="modalPic"
-      width="960px"
-      scrollable
-      footer-hide
-      closable
-      title="上传商品图"
-      :mask-closable="false"
-      class="aaaa"
-    >
-      <uploadPictures
-        :isChoice="isChoice"
-        @getPic="getPic"
-        :gridBtn="gridBtn"
-        :gridPic="gridPic"
-        v-if="modalPic"
-      ></uploadPictures>
-    </Modal>
-  </div>
+						<Col span="24">
+						<FormItem label="商品图：">
+							<div class="pictrueBox">
+								<div class="pictrue" v-if="formValidate.image">
+									<viewer><img v-lazy="formValidate.image" /></viewer>
+								</div>
+							</div>
+						</FormItem>
+						</Col>
+						<Col span="24">
+						<FormItem label="商品轮播图：">
+							<viewer>
+								<div class="acea-row">
+									<div class="lunBox mr15" v-for="(item, index) in formValidate.slider_image"
+										:key="index" draggable="true" @dragstart="handleDragStart($event, item)"
+										@dragover.prevent="handleDragOver($event, item)"
+										@dragenter="handleDragEnter($event, item)"
+										@dragend="handleDragEnd($event, item)">
+										<div class="pictrue"><img v-lazy="item" /></div>
+										<ButtonGroup size="small">
+											<Button @click.native="checked(item, index)">主图</Button>
+											<Button @click.native="handleRemove(index)">移除</Button>
+										</ButtonGroup>
+									</div>
+								</div>
+							</viewer>
+						</FormItem>
+						</Col>
+						<Col span="24">
+						<FormItem label="批量设置：" class="labeltop" v-if="formValidate.attrs">
+							<Table :data="oneFormBatch" :columns="columnsBatch" border>
+								<template slot-scope="{ row, index }" slot="pic">
+									<div class="acea-row row-middle row-center-wrapper"
+										@click="modalPicTap('dan', 'duopi', index)">
+										<div class="pictrue pictrueTab" v-if="oneFormBatch[0].pic">
+											<img v-lazy="oneFormBatch[0].pic" />
+										</div>
+										<div class="upLoad pictrueTab acea-row row-center-wrapper" v-else>
+											<Icon type="ios-camera-outline" size="21" class="iconfont" />
+										</div>
+									</div>
+								</template>
+								<template slot-scope="{ row, index }" slot="price">
+									<InputNumber v-model="oneFormBatch[0].price" :min="0" class="priceBox">
+									</InputNumber>
+								</template>
+								<template slot-scope="{ row, index }" slot="cost">
+									<InputNumber v-model="oneFormBatch[0].cost" :min="0" class="priceBox"></InputNumber>
+								</template>
+								<template slot-scope="{ row, index }" slot="ot_price">
+									<InputNumber v-model="oneFormBatch[0].ot_price" :min="0" class="priceBox">
+									</InputNumber>
+								</template>
+								<template slot-scope="{ row, index }" slot="stock">
+									<InputNumber v-model="oneFormBatch[0].stock" :min="0" class="priceBox">
+									</InputNumber>
+								</template>
+								<template slot-scope="{ row, index }" slot="bar_code">
+									<Input v-model="oneFormBatch[0].bar_code"></Input>
+								</template>
+								<template slot-scope="{ row, index }" slot="weight">
+									<InputNumber v-model="oneFormBatch[0].weight" :min="0" class="priceBox">
+									</InputNumber>
+								</template>
+								<template slot-scope="{ row, index }" slot="volume">
+									<InputNumber v-model="oneFormBatch[0].volume" :min="0" class="priceBox">
+									</InputNumber>
+								</template>
+								<template slot-scope="{ row, index }" slot="action">
+									<a @click="batchAdd">添加</a>
+									<Divider type="vertical" />
+									<a @click="batchDel">清空</a>
+								</template>
+							</Table>
+						</FormItem>
+						</Col>
+						<Col span="24">
+						<FormItem label="商品规格：" props="spec_type" label-for="spec_type">
+							<!-- 单规格表格-->
+							<Col :xl="23" :lg="24" :md="24" :sm="24" :xs="24">
+							<FormItem>
+								<Table :data="items" :columns="columns" border>
+									<template slot-scope="{ row, index }" slot="pic">
+										<div class="acea-row row-middle row-center-wrapper"
+											@click="modalPicTap('dan', index)">
+											<div class="pictrue pictrueTab" v-if="formValidate.attrs[index].pic">
+												<img v-lazy="formValidate.attrs[index].pic" />
+											</div>
+											<div class="upLoad upLoadTab acea-row row-center-wrapper" v-else>
+												<Icon type="ios-camera-outline" size="26" class="iconfont" />
+											</div>
+										</div>
+									</template>
+									<template slot-scope="{ row, index }" slot="price">
+										<InputNumber v-model="formValidate.attrs[index].price" class="priceBox">
+										</InputNumber>
+									</template>
+									<template slot-scope="{ row, index }" slot="cost">
+										<InputNumber v-model="formValidate.attrs[index].cost" class="priceBox">
+										</InputNumber>
+									</template>
+									<template slot-scope="{ row, index }" slot="ot_price">
+										<InputNumber v-model="formValidate.attrs[index].ot_price" class="priceBox">
+										</InputNumber>
+									</template>
+									<template slot-scope="{ row, index }" slot="vip_price">
+										<InputNumber v-model="formValidate.attrs[index].vip_price" class="priceBox">
+										</InputNumber>
+									</template>
+									<template slot-scope="{ row, index }" slot="stock">
+										<InputNumber v-model="formValidate.attrs[index].stock" class="priceBox">
+										</InputNumber>
+									</template>
+									<template slot-scope="{ row, index }" slot="bar_code">
+										<Input v-model="formValidate.attrs[index].bar_code"></Input>
+									</template>
+									<template slot-scope="{ row, index }" slot="weight">
+										<InputNumber v-model="formValidate.attrs[index].weight" :min="0"
+											class="priceBox"></InputNumber>
+									</template>
+									<template slot-scope="{ row, index }" slot="volume">
+										<InputNumber v-model="formValidate.attrs[index].volume" :min="0"
+											class="priceBox"></InputNumber>
+									</template>
+									<template slot-scope="{ row, index }" slot="action">
+										<a @click="delAttrTable(index)">删除</a>
+									</template>
+								</Table>
+							</FormItem>
+							</Col>
+						</FormItem>
+						</Col>
+						<Col span="24">
+						<FormItem label="商品详情：">
+							<WangEditor style="width: 100%" :content="formValidate.description"
+								@editorContent="getEditorContent"></WangEditor>
+						</FormItem>
+						</Col>
+						<Col span="24">
+						<FormItem>
+							<Button type="primary" :loading="modal_loading" class="submission"
+								@click="handleSubmit('formValidate')">提交</Button>
+						</FormItem>
+						</Col>
+					</div>
+					<Spin size="large" fix v-if="spinShow"></Spin>
+				</div>
+			</Row>
+		</Form>
+		<Modal v-model="modalPic" width="960px" scrollable footer-hide closable title="上传商品图" :mask-closable="false"
+			class="aaaa">
+			<uploadPictures :isChoice="isChoice" @getPic="getPic" :gridBtn="gridBtn" :gridPic="gridPic" v-if="modalPic">
+			</uploadPictures>
+		</Modal>
+	</div>
 </template>
 
 <script>
-import { mapState } from "vuex";
-import {
-  crawlFromApi,
-  treeListApi,
-  crawlSaveApi,
-  productGetTemplateApi,
-  copyConfigApi,
-} from "@/api/product";
-import { isLoginApi } from "@/api/setting";
-import WangEditor from "@/components/wangEditor/index.vue";
-import uploadPictures from "@/components/uploadPictures";
-import Setting from '@/setting';
-export default {
-  name: "taoBao",
-  data() {
-    return {
-      roterPre: Setting.roterPre,
-      // 批量设置表格data
-      oneFormBatch: [
-        {
-          pic: "",
-          price: 0,
-          cost: 0,
-          ot_price: 0,
-          stock: 0,
-          bar_code: "",
-          weight: 0,
-          volume: 0,
-        },
-      ],
-      columnsBatch: [
-        {
-          title: "图片",
-          slot: "pic",
-          align: "center",
-          minWidth: 80,
-        },
-        {
-          title: "售价",
-          slot: "price",
-          align: "center",
-          minWidth: 95,
-        },
-        {
-          title: "成本价",
-          slot: "cost",
-          align: "center",
-          minWidth: 95,
-        },
-        {
-          title: "原价",
-          slot: "ot_price",
-          align: "center",
-          minWidth: 95,
-        },
-        {
-          title: "库存",
-          slot: "stock",
-          align: "center",
-          minWidth: 95,
-        },
-        {
-          title: "商品编号",
-          slot: "bar_code",
-          align: "center",
-          minWidth: 120,
-        },
-        {
-          title: "重量（KG）",
-          slot: "weight",
-          align: "center",
-          minWidth: 95,
-        },
-        {
-          title: "体积(m³)",
-          slot: "volume",
-          align: "center",
-          minWidth: 95,
-        },
-        {
-          title: "操作",
-          slot: "action",
-          fixed: 'right',
-          align: "center",
-          minWidth: 140,
-        },
-      ],
-      modal_loading: false,
-      images: "",
-      soure_link: "",
-      modalPic: false,
-      isChoice: "",
-      spinShow: false,
-      gridPic: {
-        xl: 6,
-        lg: 8,
-        md: 12,
-        sm: 12,
-        xs: 12,
-      },
-      gridBtn: {
-        xl: 4,
-        lg: 8,
-        md: 8,
-        sm: 8,
-        xs: 8,
-      },
-      copyConfig: {
-        copy_type: 2,
-        copy_num: 0,
-      },
-      columns: [],
-      treeSelect: [],
-      ruleInline: {
-        cate_id: [
-          {
-            required: true,
-            message: "请选择商品分类",
-            trigger: "change",
-            type: "array",
-            min: "1",
-          },
-        ],
-        temp_id: [
-          {
-            required: true,
-            message: "请选择运费模板",
-            trigger: "change",
-            type: "number",
-          },
-        ],
-      },
-      grid: {
-        xl: 8,
-        lg: 8,
-        md: 12,
-        sm: 24,
-        xs: 24,
-      },
-      grid2: {
-        xl: 12,
-        lg: 12,
-        md: 12,
-        sm: 24,
-        xs: 24,
-      },
-      formValidate: {
-        store_name: "",
-        cate_id: [],
-        temp_id: "",
-        keyword: "",
-        unit_name: "",
-        store_info: "",
-        image: "",
-        slider_image: [],
-        description: "",
-        ficti: 0,
-        give_integral: 0,
-        is_show: 0,
-        price: 0,
-        cost: 0,
-        ot_price: 0,
-        stock: 0,
-        soure_link: "",
-        description_images: "",
-        postage: 0,
-        attrs: [],
-        items: [],
-      },
-      items: [
-        {
-          pic: "",
-          price: 0,
-          cost: 0,
-          ot_price: 0,
-          stock: 0,
-          bar_code: "",
-          weight: 0,
-          volume: 0,
-        },
-      ],
-      templateList: [],
-      isData: false,
-      artFrom: {
-        type: "taobao",
-        url: "",
-      },
-      tableIndex: 0,
-    };
-  },
-  components: { WangEditor, uploadPictures },
-  computed: {
-    ...mapState("admin/layout", ["isMobile"]),
-    labelWidth() {
-      return this.isMobile ? undefined : 120;
-    },
-    labelPosition() {
-      return this.isMobile ? "top" : "right";
-    },
-  },
-  created() {
-    this.goodsCategory();
-  },
-  mounted() {
-    this.productGetTemplate();
-    this.getCopyConfig();
-  },
-  methods: {
-	  getEditorContent(data) {
-	    this.formValidate.description = data;
-	  },
-    mealPay(val) {
-      isLoginApi()
-        .then(async (res) => {
-          let data = res.data;
-          if (!data.status) {
-            this.$Message.warning("请先登录");
-            this.$router.push(this.roterPre + "/setting/sms/sms_config/index");
-          } else {
-            this.$router.push({
-              path: this.roterPre + "/setting/sms/sms_pay/index",
-              query: { type: val },
-            });
-          }
-        })
-        .catch((res) => {
-          this.$Message.error(res.msg);
-        });
-    },
-    getCopyConfig() {
-      copyConfigApi().then((res) => {
-        this.copyConfig.copy_type = res.data.copy_type;
-        this.copyConfig.copy_num = res.data.copy_num;
-      });
-    },
-    batchDel() {
-      this.oneFormBatch = [
-        {
-          pic: "",
-          price: 0,
-          cost: 0,
-          ot_price: 0,
-          stock: 0,
-          bar_code: "",
-          weight: 0,
-          volume: 0,
-        },
-      ];
-    },
-    batchAdd() {
-      let formBatch = this.oneFormBatch[0];
-      this.$set(
-        this.formValidate,
-        "attrs",
-        this.formValidate.attrs.map((item) => {
-          if (formBatch.pic) {
-            item.pic = formBatch.pic;
-          }
-          if (formBatch.price > 0) {
-            item.price = formBatch.price;
-          }
-          if (formBatch.cost > 0) {
-            item.cost = formBatch.cost;
-          }
-          if (formBatch.ot_price > 0) {
-            item.ot_price = formBatch.ot_price;
-          }
-          if (formBatch.stock > 0) {
-            item.stock = formBatch.stock;
-          }
-          if (formBatch.bar_code) {
-            item.bar_code = formBatch.bar_code;
-          }
-          if (formBatch.weight) {
-            item.weight = formBatch.weight;
-          }
-          if (formBatch.volume) {
-            item.volume = formBatch.volume;
-          }
-          return item;
-        })
-      );
-    },
-    // 删除表格中的属性
-    delAttrTable(index) {
-      this.items.splice(index, 1);
-    },
-    // 获取运费模板；
-    productGetTemplate() {
-      productGetTemplateApi().then((res) => {
-        this.templateList = res.data;
-      });
-    },
-    // 删除图片
-    handleRemove(i) {
-      this.formValidate.slider_image.splice(i, 1);
-    },
-    // 选择主图
-    checked(item, index) {
-      this.formValidate.image = item;
-    },
-    // 商品分类；
-    goodsCategory() {
-      treeListApi(1)
-        .then((res) => {
-          this.treeSelect = res.data;
-        })
-        .catch((res) => {
-          this.$Message.error(res.msg);
-        });
-    },
-    // 生成表单
-    add() {
-      if (this.soure_link) {
-        var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
-        if (!reg.test(this.soure_link)) {
-          return this.$Message.warning("请输入以http开头的地址！");
-        }
-        this.spinShow = true;
-        this.artFrom.url = this.soure_link;
-        crawlFromApi(this.artFrom)
-          .then((res) => {
-            let info = res.data.info;
-            this.columns = info.info.header;
-            this.formValidate = info;
-            this.formValidate.soure_link = this.soure_link;
-            this.formValidate.attrs = info.info.value;
-            if (this.formValidate.image) {
-              this.oneFormBatch[0].pic = this.formValidate.image;
-            }
-            this.items = this.formValidate.attrs;
-            this.isData = true;
-            this.spinShow = false;
-          })
-          .catch((res) => {
-            this.spinShow = false;
-            this.$Message.error(res.msg);
-          });
-      } else {
-        this.$Message.warning("请输入链接地址！");
-      }
-    },
-    // 提交
-    handleSubmit(name) {
-      this.$refs[name].validate((valid) => {
-        if (valid) {
-          this.modal_loading = true;
-          // this.formValidate.attrs = [
-          //     {
-          //         pic: this.images,
-          //         price: this.formValidate.price,
-          //         cost: this.formValidate.cost,
-          //         ot_price: this.formValidate.ot_price,
-          //         stock: this.formValidate.stock,
-          //         bar_code: this.formValidate.bar_code,
-          //         weight: this.formValidate.weight,
-          //         volume: this.formValidate.volume
-          //     }
-          // ];
-          // this.formValidate.items = [];
-          crawlSaveApi(this.formValidate)
-            .then((res) => {
-              this.$Message.success("商品默认为不上架状态请手动上架商品!");
-              setTimeout(() => {
-                this.modal_loading = false;
-              }, 500);
-              setTimeout(() => {
-                this.$emit("on-close");
-              }, 600);
-            })
-            .catch((res) => {
-              this.modal_loading = false;
-              this.$Message.error(res.msg);
-            });
-        } else {
-          if (!this.formValidate.cate_id) {
-            this.$Message.warning("请填写商品分类！");
-          }
-        }
-      });
-    },
-    // 点击商品图
-    modalPicTap(tit, index) {
-      this.modalPic = true;
-      this.isChoice = tit === "dan" ? "单选" : "多选";
-      this.tableIndex = index;
-    },
-    // 获取单张图片信息
-    getPic(pc) {
-      if (this.tableIndex === "duopi") {
-        this.oneFormBatch[0].pic = pc.att_dir;
-      } else {
-        this.formValidate.attrs[this.tableIndex].pic = pc.att_dir;
-      }
-      this.modalPic = false;
-    },
-    handleDragStart(e, item) {
-      this.dragging = item;
-    },
-    handleDragEnd(e, item) {
-      this.dragging = null;
-    },
-    // 首先把div变成可以放置的元素，即重写dragenter/dragover
-    handleDragOver(e) {
-      // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
-      e.dataTransfer.dropEffect = "move";
-    },
-    handleDragEnter(e, item) {
-      // 为需要移动的元素设置dragstart事件
-      e.dataTransfer.effectAllowed = "move";
-      if (item === this.dragging) {
-        return;
-      }
-      const newItems = [...this.formValidate.slider_image];
-      const src = newItems.indexOf(this.dragging);
-      const dst = newItems.indexOf(item);
-      newItems.splice(dst, 0, ...newItems.splice(src, 1));
-      this.formValidate.slider_image = newItems;
-    },
-    // 添加自定义弹窗
-    addCustomDialog(editorId) {
-      window.UE.registerUI(
-        "test-dialog",
-        function (editor, uiName) {
-          let dialog = new window.UE.ui.Dialog({
-            iframeUrl: "/admin/widget.images/index.html?fodder=dialog",
-            editor: editor,
-            name: uiName,
-            title: "上传图片",
-            cssRules: "width:1200px;height:500px;padding:20px;",
-          });
-          this.dialog = dialog;
-          var btn = new window.UE.ui.Button({
-            name: "dialog-button",
-            title: "上传图片",
-            cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
-            onclick: function () {
-              dialog.render();
-              dialog.open();
-            },
-          });
-          return btn;
-        },
-        37
-      );
-    },
-  },
-};
+	import {
+		mapState
+	} from "vuex";
+	import {
+		crawlFromApi,
+		treeListApi,
+		crawlSaveApi,
+		productGetTemplateApi,
+		copyConfigApi,
+	} from "@/api/product";
+	import {
+		isLoginApi
+	} from "@/api/setting";
+	import WangEditor from "@/components/wangEditor/index.vue";
+	import uploadPictures from "@/components/uploadPictures";
+	import Setting from '@/setting';
+	export default {
+		name: "taoBao",
+		data() {
+			return {
+				roterPre: Setting.roterPre,
+				// 批量设置表格data
+				oneFormBatch: [{
+					pic: "",
+					price: 0,
+					cost: 0,
+					ot_price: 0,
+					stock: 0,
+					bar_code: "",
+					weight: 0,
+					volume: 0,
+				}, ],
+				columnsBatch: [{
+						title: "图片",
+						slot: "pic",
+						align: "center",
+						minWidth: 80,
+					},
+					{
+						title: "售价",
+						slot: "price",
+						align: "center",
+						minWidth: 95,
+					},
+					{
+						title: "成本价",
+						slot: "cost",
+						align: "center",
+						minWidth: 95,
+					},
+					{
+						title: "原价",
+						slot: "ot_price",
+						align: "center",
+						minWidth: 95,
+					},
+					{
+						title: "库存",
+						slot: "stock",
+						align: "center",
+						minWidth: 95,
+					},
+					{
+						title: "商品编号",
+						slot: "bar_code",
+						align: "center",
+						minWidth: 120,
+					},
+					{
+						title: "重量（KG）",
+						slot: "weight",
+						align: "center",
+						minWidth: 95,
+					},
+					{
+						title: "体积(m³)",
+						slot: "volume",
+						align: "center",
+						minWidth: 95,
+					},
+					{
+						title: "操作",
+						slot: "action",
+						fixed: 'right',
+						align: "center",
+						minWidth: 140,
+					},
+				],
+				modal_loading: false,
+				images: "",
+				soure_link: "",
+				modalPic: false,
+				isChoice: "",
+				spinShow: false,
+				gridPic: {
+					xl: 6,
+					lg: 8,
+					md: 12,
+					sm: 12,
+					xs: 12,
+				},
+				gridBtn: {
+					xl: 4,
+					lg: 8,
+					md: 8,
+					sm: 8,
+					xs: 8,
+				},
+				copyConfig: {
+					copy_type: 2,
+					copy_num: 0,
+				},
+				columns: [],
+				treeSelect: [],
+				ruleInline: {
+					cate_id: [{
+						required: true,
+						message: "请选择商品分类",
+						trigger: "change",
+						type: "array",
+						min: "1",
+					}, ],
+					temp_id: [{
+						required: true,
+						message: "请选择运费模板",
+						trigger: "change",
+						type: "number",
+					}, ],
+				},
+				grid: {
+					xl: 8,
+					lg: 8,
+					md: 12,
+					sm: 24,
+					xs: 24,
+				},
+				grid2: {
+					xl: 12,
+					lg: 12,
+					md: 12,
+					sm: 24,
+					xs: 24,
+				},
+				formValidate: {
+					store_name: "",
+					cate_id: [],
+					temp_id: "",
+					keyword: "",
+					unit_name: "",
+					store_info: "",
+					image: "",
+					slider_image: [],
+					description: "",
+					ficti: 0,
+					give_integral: 0,
+					is_show: 0,
+					price: 0,
+					cost: 0,
+					ot_price: 0,
+					stock: 0,
+					soure_link: "",
+					description_images: "",
+					postage: 0,
+					attrs: [],
+					items: [],
+				},
+				items: [{
+					pic: "",
+					price: 0,
+					cost: 0,
+					ot_price: 0,
+					stock: 0,
+					bar_code: "",
+					weight: 0,
+					volume: 0,
+				}, ],
+				templateList: [],
+				isData: false,
+				artFrom: {
+					type: "taobao",
+					url: "",
+				},
+				tableIndex: 0,
+			};
+		},
+		components: {
+			WangEditor,
+			uploadPictures
+		},
+		computed: {
+			...mapState("admin/layout", ["isMobile"]),
+			labelWidth() {
+				return this.isMobile ? undefined : 120;
+			},
+			labelPosition() {
+				return this.isMobile ? "top" : "right";
+			},
+		},
+		created() {
+			this.goodsCategory();
+		},
+		mounted() {
+			this.productGetTemplate();
+			this.getCopyConfig();
+		},
+		methods: {
+			getEditorContent(data) {
+				this.formValidate.description = data;
+			},
+			mealPay(val) {
+				isLoginApi()
+					.then(async (res) => {
+						let data = res.data;
+						if (!data.status) {
+							this.$Message.warning("请先登录");
+							this.$router.push(this.roterPre + "/setting/sms/sms_config/index");
+						} else {
+							this.$router.push({
+								path: this.roterPre + "/setting/sms/sms_pay/index",
+								query: {
+									type: val
+								},
+							});
+						}
+					})
+					.catch((res) => {
+						this.$Message.error(res.msg);
+					});
+			},
+			getCopyConfig() {
+				copyConfigApi().then((res) => {
+					this.copyConfig.copy_type = res.data.copy_type;
+					this.copyConfig.copy_num = res.data.copy_num;
+				});
+			},
+			batchDel() {
+				this.oneFormBatch = [{
+					pic: "",
+					price: 0,
+					cost: 0,
+					ot_price: 0,
+					stock: 0,
+					bar_code: "",
+					weight: 0,
+					volume: 0,
+				}, ];
+			},
+			batchAdd() {
+				let formBatch = this.oneFormBatch[0];
+				this.$set(
+					this.formValidate,
+					"attrs",
+					this.formValidate.attrs.map((item) => {
+						if (formBatch.pic) {
+							item.pic = formBatch.pic;
+						}
+						if (formBatch.price > 0) {
+							item.price = formBatch.price;
+						}
+						if (formBatch.cost > 0) {
+							item.cost = formBatch.cost;
+						}
+						if (formBatch.ot_price > 0) {
+							item.ot_price = formBatch.ot_price;
+						}
+						if (formBatch.stock > 0) {
+							item.stock = formBatch.stock;
+						}
+						if (formBatch.bar_code) {
+							item.bar_code = formBatch.bar_code;
+						}
+						if (formBatch.weight) {
+							item.weight = formBatch.weight;
+						}
+						if (formBatch.volume) {
+							item.volume = formBatch.volume;
+						}
+						return item;
+					})
+				);
+			},
+			// 删除表格中的属性
+			delAttrTable(index) {
+				this.items.splice(index, 1);
+			},
+			// 获取运费模板；
+			productGetTemplate() {
+				productGetTemplateApi().then((res) => {
+					this.templateList = res.data;
+				});
+			},
+			// 删除图片
+			handleRemove(i) {
+				this.formValidate.slider_image.splice(i, 1);
+			},
+			// 选择主图
+			checked(item, index) {
+				this.formValidate.image = item;
+			},
+			// 商品分类；
+			goodsCategory() {
+				treeListApi(1)
+					.then((res) => {
+						this.treeSelect = res.data;
+					})
+					.catch((res) => {
+						this.$Message.error(res.msg);
+					});
+			},
+			// 生成表单
+			add() {
+				if (this.soure_link) {
+					var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
+					if (!reg.test(this.soure_link)) {
+						return this.$Message.warning("请输入以http开头的地址！");
+					}
+					this.spinShow = true;
+					this.artFrom.url = this.soure_link;
+					crawlFromApi(this.artFrom)
+						.then((res) => {
+							let info = res.data.info;
+							this.columns = info.info.header;
+							this.formValidate = info;
+							this.formValidate.soure_link = this.soure_link;
+							this.formValidate.attrs = info.info.value;
+							if (this.formValidate.image) {
+								this.oneFormBatch[0].pic = this.formValidate.image;
+							}
+							this.items = this.formValidate.attrs;
+							this.isData = true;
+							this.spinShow = false;
+						})
+						.catch((res) => {
+							this.spinShow = false;
+							this.$Message.error(res.msg);
+						});
+				} else {
+					this.$Message.warning("请输入链接地址！");
+				}
+			},
+			// 提交
+			handleSubmit(name) {
+				this.$refs[name].validate((valid) => {
+					if (valid) {
+						this.modal_loading = true;
+						// this.formValidate.attrs = [
+						//     {
+						//         pic: this.images,
+						//         price: this.formValidate.price,
+						//         cost: this.formValidate.cost,
+						//         ot_price: this.formValidate.ot_price,
+						//         stock: this.formValidate.stock,
+						//         bar_code: this.formValidate.bar_code,
+						//         weight: this.formValidate.weight,
+						//         volume: this.formValidate.volume
+						//     }
+						// ];
+						// this.formValidate.items = [];
+						crawlSaveApi(this.formValidate)
+							.then((res) => {
+								this.$Message.success("商品默认为不上架状态请手动上架商品!");
+								setTimeout(() => {
+									this.modal_loading = false;
+								}, 500);
+								setTimeout(() => {
+									this.$emit("on-close");
+								}, 600);
+							})
+							.catch((res) => {
+								this.modal_loading = false;
+								this.$Message.error(res.msg);
+							});
+					} else {
+						if (!this.formValidate.cate_id) {
+							this.$Message.warning("请填写商品分类！");
+						}
+					}
+				});
+			},
+			// 点击商品图
+			modalPicTap(tit, index) {
+				this.modalPic = true;
+				this.isChoice = tit === "dan" ? "单选" : "多选";
+				this.tableIndex = index;
+			},
+			// 获取单张图片信息
+			getPic(pc) {
+				if (this.tableIndex === "duopi") {
+					this.oneFormBatch[0].pic = pc.att_dir;
+				} else {
+					this.formValidate.attrs[this.tableIndex].pic = pc.att_dir;
+				}
+				this.modalPic = false;
+			},
+			handleDragStart(e, item) {
+				this.dragging = item;
+			},
+			handleDragEnd(e, item) {
+				this.dragging = null;
+			},
+			// 首先把div变成可以放置的元素，即重写dragenter/dragover
+			handleDragOver(e) {
+				// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
+				e.dataTransfer.dropEffect = "move";
+			},
+			handleDragEnter(e, item) {
+				// 为需要移动的元素设置dragstart事件
+				e.dataTransfer.effectAllowed = "move";
+				if (item === this.dragging) {
+					return;
+				}
+				const newItems = [...this.formValidate.slider_image];
+				const src = newItems.indexOf(this.dragging);
+				const dst = newItems.indexOf(item);
+				newItems.splice(dst, 0, ...newItems.splice(src, 1));
+				this.formValidate.slider_image = newItems;
+			},
+			// 添加自定义弹窗
+			addCustomDialog(editorId) {
+				window.UE.registerUI(
+					"test-dialog",
+					function(editor, uiName) {
+						let dialog = new window.UE.ui.Dialog({
+							iframeUrl: "/admin/widget.images/index.html?fodder=dialog",
+							editor: editor,
+							name: uiName,
+							title: "上传图片",
+							cssRules: "width:1200px;height:500px;padding:20px;",
+						});
+						this.dialog = dialog;
+						var btn = new window.UE.ui.Button({
+							name: "dialog-button",
+							title: "上传图片",
+							cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
+							onclick: function() {
+								dialog.render();
+								dialog.open();
+							},
+						});
+						return btn;
+					},
+					37
+				);
+			},
+		},
+	};
 </script>
 
 <style scoped lang="stylus">
-.Box .ivu-radio-wrapper {
-  margin-right: 25px;
-}
+	.Box .ivu-radio-wrapper {
+		margin-right: 25px;
+	}
 
-.Box .numPut {
-  width: 100% !important;
-}
+	.Box .numPut {
+		width: 100% !important;
+	}
 
-.lunBox {
-  /* width 80px */
-  display: flex;
-  flex-direction: column;
-  border: 1px solid #0bb20c;
-}
+	.lunBox {
+		/* width 80px */
+		display: flex;
+		flex-direction: column;
+		border: 1px solid #0bb20c;
+	}
 
-.pictrueBox {
-  display: inline-block;
-}
+	.pictrueBox {
+		display: inline-block;
+	}
 
-.pictrue {
-  width: 85px;
-  height: 85px;
-  border: 1px dotted rgba(0, 0, 0, 0.1);
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
+	.pictrue {
+		width: 85px;
+		height: 85px;
+		border: 1px dotted rgba(0, 0, 0, 0.1);
+		display: inline-block;
+		position: relative;
+		cursor: pointer;
 
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
 
-.pictrueTab {
-  width: 40px !important;
-  height: 40px !important;
-}
+	.pictrueTab {
+		width: 40px !important;
+		height: 40px !important;
+	}
 
-.upLoad {
-  width: 40px;
-  height: 40px;
-  border: 1px dotted rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  background: rgba(0, 0, 0, 0.02);
-  cursor: pointer;
-}
+	.upLoad {
+		width: 40px;
+		height: 40px;
+		border: 1px dotted rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+		background: rgba(0, 0, 0, 0.02);
+		cursor: pointer;
+	}
 
-.ft {
-  color: red;
-}
+	.ft {
+		color: red;
+	}
 
-.aaaa /deep/ .ivu-modal-wrap {
-  z-index: 1000 !important;
-}
+	.aaaa /deep/ .ivu-modal-wrap {
+		z-index: 1000 !important;
+	}
 
-.aaaa /deep/ .ivu-modal-mask {
-  z-index: 1000 !important;
-}
-</style>
+	.aaaa /deep/ .ivu-modal-mask {
+		z-index: 1000 !important;
+	}
+</style>

src/pages/setting/storage/index.vue

@@ -1,166 +1,163 @@
 <template>
-<!-- 存储配置 -->
-  <div class="message">
-    
-    <div class="table-box">
-      <Card :bordered="false" :padding="20" dis-hover>
-         <div class="new_tab">
-           <Tabs v-model="currentTab"  @on-click="changeTab">
-              <TabPane
-                :label="item.label"
-                :name="item.value.toString()"
-                v-for="(item, index) in headerList"
-                :key="index"
-              />
-          </Tabs>
-         </div>
-        <div  class="table-box explain">
-          <Card dis-hover>
-            <h3>使用说明</h3>
-			<template v-if="currentTab == 1" >
-			  <p>上传图片时会生成缩略图</p>
-			  <p>未设置按照系统默认生成，系统默认：大图800 * 800px，中图300 * 300px，小图150 * 150px</p>
-			  <p>水印只在上传图片时生成，原图，大中小缩略图上都按照比例存在。</p>
-			  <p>若上传图片时未开启水印，则该图在开启水印之后依旧无水印效果。</p>
-			</template>
-			<template v-else>
-				<p v-if="currentTab == 3">阿里云oss开通方法：<a target="_blank"  href="https://doc.crmeb.com/pro/crmebprov2/1213">点击查看</a></p>
+	<!-- 存储配置 -->
+	<div class="message">
+
+		<div class="table-box">
+			<Card :bordered="false" :padding="20" dis-hover>
+				<div class="new_tab">
+					<Tabs v-model="currentTab" @on-click="changeTab">
+						<TabPane :label="item.label" :name="item.value.toString()" v-for="(item, index) in headerList"
+							:key="index" />
+					</Tabs>
+				</div>
+				<div class="table-box explain">
+					<Card dis-hover>
+						<h3>使用说明</h3>
+						<template v-if="currentTab == 1">
+							<p>上传图片时会生成缩略图</p>
+							<p>未设置按照系统默认生成，系统默认：大图800 * 800px，中图300 * 300px，小图150 * 150px</p>
+							<p>水印只在上传图片时生成，原图，大中小缩略图上都按照比例存在。</p>
+							<p>若上传图片时未开启水印，则该图在开启水印之后依旧无水印效果。</p>
+						</template>
+						<template v-else>
+							<!-- <p v-if="currentTab == 3">阿里云oss开通方法：<a target="_blank"  href="https://doc.crmeb.com/pro/crmebprov2/1213">点击查看</a></p>
 				<p v-if="currentTab == 4">腾讯云oss开通方法：<a target="_blank"  href="https://doc.crmeb.com/pro/crmebprov2/1214">点击查看</a></p>
 				<p v-if="currentTab == 2">七牛云开通方法：<a target="_blank"  href="https://doc.crmeb.com/pro/crmebprov2/1215">点击查看</a></p>
 				<p v-if="currentTab == 5">京东云cos开通方法：<a target="_blank"  href="https://doc.crmeb.com/single/v5/8522">点击查看</a></p>
 				<p v-if="currentTab == 6">华为云cos开通方法：<a target="_blank"  href="https://doc.crmeb.com/single/v5/8523">点击查看</a></p>
-				<p v-if="currentTab == 7">天翼云cos开通方法：<a target="_blank"  href="https://doc.crmeb.com/single/v5/8524">点击查看</a></p>
-				<p>第一步： 添加【存储空间】（空间名称不能重复）</p>
-				<p>第二步： 开启【使用状态】</p>
-				<template v-if="currentTab == 2">
-				  <p>第三步（必选）： 选择云存储空间列表上的修改【空间域名操作】</p>
-				  <p>
-				    第四步（必选）：
-				    选择云存储空间列表上的修改【CNAME配置】，打开后复制记录值到对应的平台解析
-				  </p>
-				</template>
-				<template v-else>
-				  <p>第三步（可选）： 选择云存储空间列表上的修改【空间域名操作】</p>
-				  <p>
-				    第四步（可选）：
-				    选择云存储空间列表上的修改【CNAME配置】，打开后复制记录值到对应的平台解析
-				  </p>
-				</template>
-			</template>
-          </Card>
-        </div>
-        <div class="table-box" v-if="currentTab == 1">
-          <Card :bordered="false" :padding="0" dis-hover>
-            <Form ref="formValidate" :model="formData" :rules="rules" :label-width="123">
-                <FormItem label="存储类型：" :label-width="90">
-                    <RadioGroup v-model="formData.upload_type" @on-change="changeSave">
-                        <Radio :label="1">本地存储</Radio>
-                        <Radio :label="3">阿里云存储</Radio>
-                        <Radio :label="4">腾讯云存储</Radio>
-						<Radio :label="2">七牛云存储</Radio>
-						<Radio :label="5">京东云存储</Radio>
-						<Radio :label="6">华为云存储</Radio>
-						<Radio :label="7">天翼云存储</Radio>
-                    </RadioGroup>
-                </FormItem>
-                <div>缩略图设置：</div>
-                <div class="thumb-list">
-                    <div class="item">
-                        <div class="image">
-                            <img src="@/assets/images/thumb1.png">
-                            <div>缩略大图</div>
-                        </div>
-                        <div>
-                            <FormItem label="宽：" :label-width="63" prop="thumb_big_width">
-                                <Input v-model="formData.thumb_big_width" placeholder="请输入宽">
-                                    <span slot="append">px</span>
-                                </Input>
-                            </FormItem>
-                            <FormItem label="高：" :label-width="63" prop="thumb_big_height">
-                                <Input v-model="formData.thumb_big_height" placeholder="请输入高">
-                                    <span slot="append">px</span>
-                                </Input>
-                            </FormItem>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <div class="image">
-                            <img src="@/assets/images/thumb2.png">
-                            <div>缩略中图</div>
-                        </div>
-                        <div>
-                            <FormItem label="宽：" :label-width="63" prop="thumb_mid_width">
-                                <Input v-model="formData.thumb_mid_width" placeholder="请输入宽">
-                                    <span slot="append">px</span>
-                                </Input>
-                            </FormItem>
-                            <FormItem label="高：" :label-width="63" prop="thumb_mid_height">
-                                <Input v-model="formData.thumb_mid_height" placeholder="请输入高">
-                                    <span slot="append">px</span>
-                                </Input>
-                            </FormItem>
-                        </div>
-                    </div>
-                    <div class="item">
-                        <div class="image">
-                            <img src="@/assets/images/thumb2.png">
-                            <div>缩略小图</div>
-                        </div>
-                        <div>
-                            <FormItem label="宽：" :label-width="63" prop="thumb_small_width">
-                                <Input v-model="formData.thumb_small_width" placeholder="请输入宽">
-                                    <span slot="append">px</span>
-                                </Input>
-                            </FormItem>
-                            <FormItem label="高：" :label-width="63" prop="thumb_small_height">
-                                <Input v-model="formData.thumb_small_height" placeholder="请输入高">
-                                    <span slot="append">px</span>
-                                </Input>
-                            </FormItem>
-                        </div>
-                    </div>
-                </div>
-                <FormItem label="是否开启水印：">
-                    <Switch v-model="formData.image_watermark_status" :true-value="1" :false-value="0" size="large">
-                        <span slot="open">开启</span>
-                        <span slot="close">关闭</span>
-                    </Switch>
-                </FormItem>
-                <FormItem v-show="formData.image_watermark_status" label="水印类型：">
-                    <RadioGroup v-model="formData.watermark_type">
-                        <Radio :label="1">图片</Radio>
-                        <Radio :label="2">文字</Radio>
-                    </RadioGroup>
-                </FormItem>
-                <div v-show="formData.image_watermark_status" class="form-item-list">
-                    <FormItem v-if="formData.watermark_type === 1" key="watermark_image" label="水印图片：">
-                        <div v-if="formData.watermark_image" class="upload-list">
-                            <img v-lazy="formData.watermark_image">
-                            <div class="upload-list-cover">
-                                <Icon type="ios-eye-outline" @click.native="handleView"></Icon>
-                                <Icon type="ios-trash-outline" @click.native="handleRemove"></Icon>
-                            </div>
-                        </div>
-                        <div v-else class="upload" @click="modalPicTap('dan')">
-                            <Icon type="ios-add" size="20" />
-                        </div>
-                        <div>
-                          <Poptip placement="bottom" trigger="hover" width="256" transfer padding="8px">
-                            <a>查看示例</a>
-                            <div class="exampleImg" slot="content">
-                              <div style="margin-bottom: 10px;font-size: 12px;line-height: 18px;color: #666666;">可在商品图上增加水印，水印可选择多<br>种样式，下图仅供参考</div>
-                                <img
-                                  :src="`${baseURL}/statics/system/watermark.png`"
-                                  alt=""
-                                />
-                            </div>
-                          </Poptip>
-                        </div>
-                    </FormItem>
-                    <FormItem v-if="formData.watermark_type === 2" key="watermark_text" label="水印文字：">
-                        <Input v-model="formData.watermark_text" placeholder="请输入水印文字"></Input>
-                    </FormItem>
-                    <FormItem v-if="formData.watermark_type === 2" key="watermark_text_size" label="水印文字大小：" prop="watermark_text_size" :rules="{
+				<p v-if="currentTab == 7">天翼云cos开通方法：<a target="_blank"  href="https://doc.crmeb.com/single/v5/8524">点击查看</a></p> -->
+							<p>第一步： 添加【存储空间】（空间名称不能重复）</p>
+							<p>第二步： 开启【使用状态】</p>
+							<template v-if="currentTab == 2">
+								<p>第三步（必选）： 选择云存储空间列表上的修改【空间域名操作】</p>
+								<p>
+									第四步（必选）：
+									选择云存储空间列表上的修改【CNAME配置】，打开后复制记录值到对应的平台解析
+								</p>
+							</template>
+							<template v-else>
+								<p>第三步（可选）： 选择云存储空间列表上的修改【空间域名操作】</p>
+								<p>
+									第四步（可选）：
+									选择云存储空间列表上的修改【CNAME配置】，打开后复制记录值到对应的平台解析
+								</p>
+							</template>
+						</template>
+					</Card>
+				</div>
+				<div class="table-box" v-if="currentTab == 1">
+					<Card :bordered="false" :padding="0" dis-hover>
+						<Form ref="formValidate" :model="formData" :rules="rules" :label-width="123">
+							<FormItem label="存储类型：" :label-width="90">
+								<RadioGroup v-model="formData.upload_type" @on-change="changeSave">
+									<Radio :label="1">本地存储</Radio>
+									<Radio :label="3">阿里云存储</Radio>
+									<Radio :label="4">腾讯云存储</Radio>
+									<Radio :label="2">七牛云存储</Radio>
+									<Radio :label="5">京东云存储</Radio>
+									<Radio :label="6">华为云存储</Radio>
+									<Radio :label="7">天翼云存储</Radio>
+								</RadioGroup>
+							</FormItem>
+							<div>缩略图设置：</div>
+							<div class="thumb-list">
+								<div class="item">
+									<div class="image">
+										<img src="@/assets/images/thumb1.png">
+										<div>缩略大图</div>
+									</div>
+									<div>
+										<FormItem label="宽：" :label-width="63" prop="thumb_big_width">
+											<Input v-model="formData.thumb_big_width" placeholder="请输入宽">
+											<span slot="append">px</span>
+											</Input>
+										</FormItem>
+										<FormItem label="高：" :label-width="63" prop="thumb_big_height">
+											<Input v-model="formData.thumb_big_height" placeholder="请输入高">
+											<span slot="append">px</span>
+											</Input>
+										</FormItem>
+									</div>
+								</div>
+								<div class="item">
+									<div class="image">
+										<img src="@/assets/images/thumb2.png">
+										<div>缩略中图</div>
+									</div>
+									<div>
+										<FormItem label="宽：" :label-width="63" prop="thumb_mid_width">
+											<Input v-model="formData.thumb_mid_width" placeholder="请输入宽">
+											<span slot="append">px</span>
+											</Input>
+										</FormItem>
+										<FormItem label="高：" :label-width="63" prop="thumb_mid_height">
+											<Input v-model="formData.thumb_mid_height" placeholder="请输入高">
+											<span slot="append">px</span>
+											</Input>
+										</FormItem>
+									</div>
+								</div>
+								<div class="item">
+									<div class="image">
+										<img src="@/assets/images/thumb2.png">
+										<div>缩略小图</div>
+									</div>
+									<div>
+										<FormItem label="宽：" :label-width="63" prop="thumb_small_width">
+											<Input v-model="formData.thumb_small_width" placeholder="请输入宽">
+											<span slot="append">px</span>
+											</Input>
+										</FormItem>
+										<FormItem label="高：" :label-width="63" prop="thumb_small_height">
+											<Input v-model="formData.thumb_small_height" placeholder="请输入高">
+											<span slot="append">px</span>
+											</Input>
+										</FormItem>
+									</div>
+								</div>
+							</div>
+							<FormItem label="是否开启水印：">
+								<Switch v-model="formData.image_watermark_status" :true-value="1" :false-value="0"
+									size="large">
+									<span slot="open">开启</span>
+									<span slot="close">关闭</span>
+								</Switch>
+							</FormItem>
+							<FormItem v-show="formData.image_watermark_status" label="水印类型：">
+								<RadioGroup v-model="formData.watermark_type">
+									<Radio :label="1">图片</Radio>
+									<Radio :label="2">文字</Radio>
+								</RadioGroup>
+							</FormItem>
+							<div v-show="formData.image_watermark_status" class="form-item-list">
+								<FormItem v-if="formData.watermark_type === 1" key="watermark_image" label="水印图片：">
+									<div v-if="formData.watermark_image" class="upload-list">
+										<img v-lazy="formData.watermark_image">
+										<div class="upload-list-cover">
+											<Icon type="ios-eye-outline" @click.native="handleView"></Icon>
+											<Icon type="ios-trash-outline" @click.native="handleRemove"></Icon>
+										</div>
+									</div>
+									<div v-else class="upload" @click="modalPicTap('dan')">
+										<Icon type="ios-add" size="20" />
+									</div>
+									<div>
+										<Poptip placement="bottom" trigger="hover" width="256" transfer padding="8px">
+											<a>查看示例</a>
+											<div class="exampleImg" slot="content">
+												<div
+													style="margin-bottom: 10px;font-size: 12px;line-height: 18px;color: #666666;">
+													可在商品图上增加水印，水印可选择多<br>种样式，下图仅供参考</div>
+												<img :src="`${baseURL}/statics/system/watermark.png`" alt="" />
+											</div>
+										</Poptip>
+									</div>
+								</FormItem>
+								<FormItem v-if="formData.watermark_type === 2" key="watermark_text" label="水印文字：">
+									<Input v-model="formData.watermark_text" placeholder="请输入水印文字"></Input>
+								</FormItem>
+								<FormItem v-if="formData.watermark_type === 2" key="watermark_text_size" label="水印文字大小："
+									prop="watermark_text_size" :rules="{
                         validator (rule, value, callback) {
                             if (!value || /(^[1-9]\d*$)/.test(value)) {
                                 callback();
@@ -171,20 +168,22 @@
                         message: '必须为正整数',
                         trigger: 'blur'
                     }">
-                        <Input v-model="formData.watermark_text_size" placeholder="请输入水印文字大小">
-                            <span slot="append">px</span>
-                        </Input>
-                    </FormItem>
-                    <FormItem v-if="formData.watermark_type === 2" key="watermark_text_color" label="水印字体颜色：">
-                        <ColorPicker v-model="formData.watermark_text_color" />
-                    </FormItem>
-                    <FormItem label="水印位置：">
-                        <RadioGroup v-model="formData.watermark_position" type="button">
-                            <Radio v-for="item in 9" :key="item" :label="item"></Radio>
-                        </RadioGroup>
-                        <span class="tip">{{ positionText }}</span>
-                    </FormItem>
-                    <FormItem v-if="formData.watermark_type === 1" key="watermark_opacity" label="水印透明度：" prop="watermark_opacity" :rules="{
+									<Input v-model="formData.watermark_text_size" placeholder="请输入水印文字大小">
+									<span slot="append">px</span>
+									</Input>
+								</FormItem>
+								<FormItem v-if="formData.watermark_type === 2" key="watermark_text_color"
+									label="水印字体颜色：">
+									<ColorPicker v-model="formData.watermark_text_color" />
+								</FormItem>
+								<FormItem label="水印位置：">
+									<RadioGroup v-model="formData.watermark_position" type="button">
+										<Radio v-for="item in 9" :key="item" :label="item"></Radio>
+									</RadioGroup>
+									<span class="tip">{{ positionText }}</span>
+								</FormItem>
+								<FormItem v-if="formData.watermark_type === 1" key="watermark_opacity" label="水印透明度："
+									prop="watermark_opacity" :rules="{
                         validator: (rule, value, callback) => {
                             if (!value || /^([0-9]{1,2}|100)$/.test(value)) {
                                 callback();
@@ -195,10 +194,10 @@
                         message: '必须为0-100的整数',
                         trigger: 'blur'
                     }">
-                        <Input v-model="formData.watermark_opacity" placeholder="请输入水印透明度"></Input>
-                    </FormItem>
-                    <FormItem v-if="formData.watermark_type === 1" key="watermark_rotate" label="水印倾斜度：" prop="watermark_rotate"
-                        :rules="{
+									<Input v-model="formData.watermark_opacity" placeholder="请输入水印透明度"></Input>
+								</FormItem>
+								<FormItem v-if="formData.watermark_type === 1" key="watermark_rotate" label="水印倾斜度："
+									prop="watermark_rotate" :rules="{
                             validator (rule, value, callback) {
                                 if (!value || /^([0-9]{1,2}|360)$/.test(value)) {
                                     callback();
@@ -208,897 +207,894 @@
                             },
                             message: '必须为0-360的整数',
                             trigger: 'blur'
-                        }"
-                    >
-                        <Input v-model="formData.watermark_rotate" placeholder="请输入水印倾斜度"></Input>
-                    </FormItem>
-                    <FormItem v-if="formData.watermark_type === 2" key="watermark_text_angle" label="水印字体旋转角度：">
-                        <Input v-model="formData.watermark_text_angle" placeholder="请输入水印字体旋转角度"></Input>
-                    </FormItem>
-                    <FormItem label="水印横坐标偏移量：" prop="watermark_x">
-                        <Input v-model="formData.watermark_x" placeholder="请输入横坐标偏移量">
-                            <span slot="append">px</span>
-                        </Input>
-                    </FormItem>
-                    <FormItem label="水印纵坐标偏移量：" prop="watermark_y">
-                        <Input v-model="formData.watermark_y" placeholder="请输入纵坐标偏移量">
-                            <span slot="append">px</span>
-                        </Input>
-                    </FormItem>
-                </div>
-                <FormItem>
-                    <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
-                </FormItem>
-            </Form>
-          </Card>
-        </div>
-        <div class="table-box" v-else>
-          <Card :bordered="false" dis-hover class="ivu-mt">
-            <Row type="flex" class="mb20">
-              <Col span="24">
-                <Button type="primary" @click="addStorageBtn">添加存储空间</Button>
-                <Button type="success" @click="synchro" class="ml20"
-                  >同步存储空间</Button
-                >
-                <Button @click="addConfigBtn" style="float: right"
-                  >修改配置信息</Button
-                >
-              </Col>
-            </Row>
-            <Table
-              :columns="columns"
-              :data="levelLists"
-              ref="table"
-              class="mt25"
-              :loading="loading"
-              highlight-row
-              no-userFrom-text="暂无数据"
-              no-filtered-userFrom-text="暂无筛选结果"
-            >
-              <template slot-scope="{ row, index }" slot="status">
-                <!-- {{row}}{{index}} -->
-                <i-switch
-                  v-model="row.status"
-                  :value="row.status"
-                  :true-value="1"
-                  :false-value="0"
-                  @on-change="changeSwitch(row, index)"
-                  size="large"
-                >
-                  <span slot="open">开启</span>
-                  <span slot="close">关闭</span>
-                </i-switch>
-              </template>
-              <template slot-scope="{ row, index }" slot="action">
-                <template v-if="row.domain && row.domain != row.cname">
-                  <span class="btn" @click="config(row)">CNAME配置</span>
-                  <Divider type="vertical" />
-                </template>
-                <span class="btn" @click="edit(row)">修改空间域名</span>
-                <Divider type="vertical" />
-                <span class="btn" @click="del(row, '删除该数据', index)">删除</span>
-              </template>
-            </Table>
-            <div class="acea-row row-right page">
-              <Page
-                :total="total"
-                :current="list.page"
-                show-elevator
-                show-total
-                @on-change="pageChange"
-                :page-size="list.limit"
-              />
-            </div>
-          </Card>
-        </div>
-      </Card>
-    </div>
-    <Modal v-model="configuModal" title="CNAME配置">
-      <div>
-        <div class="confignv">
-          <span class="configtit">主机记录：</span>{{ configData.domain }}
-        </div>
-        <div class="confignv">
-          <span class="configtit">记录类型：</span>CNAME
-        </div>
-        <div class="confignv">
-          <span class="configtit">记录值：</span>{{configData.cname}}
-<!--          <span class="copy copy-data" :data-clipboard-text="configData.cname"-->
-<!--            >复制</span-->
-<!--          >-->
-          <Button
-              size="small"
-              v-clipboard:copy="configData.cname"
-              v-clipboard:success="onCopy"
-              v-clipboard:error="onError"
-          >复制
-          </Button
-          >
-        </div>
-      </div>
-      <div slot="footer"></div>
-    </Modal>
-    <Modal
-      v-model="modalPic"
-      width="960px"
-      scrollable
-      footer-hide
-      closable
-      title="上传商品图"
-      :mask-closable="false"
-      :z-index="888"
-    >
-      <uploadPictures
-        :isChoice="isChoice"
-        @getPic="getPic"
-        :gridBtn="gridBtn"
-        :gridPic="gridPic"
-        v-if="modalPic"
-      ></uploadPictures>
-    </Modal>
-    <Modal v-model="visible">
-        <img :src="formData.watermark_image" v-if="visible" style="width: 100%">
-    </Modal>
-  </div>
+                        }">
+									<Input v-model="formData.watermark_rotate" placeholder="请输入水印倾斜度"></Input>
+								</FormItem>
+								<FormItem v-if="formData.watermark_type === 2" key="watermark_text_angle"
+									label="水印字体旋转角度：">
+									<Input v-model="formData.watermark_text_angle" placeholder="请输入水印字体旋转角度"></Input>
+								</FormItem>
+								<FormItem label="水印横坐标偏移量：" prop="watermark_x">
+									<Input v-model="formData.watermark_x" placeholder="请输入横坐标偏移量">
+									<span slot="append">px</span>
+									</Input>
+								</FormItem>
+								<FormItem label="水印纵坐标偏移量：" prop="watermark_y">
+									<Input v-model="formData.watermark_y" placeholder="请输入纵坐标偏移量">
+									<span slot="append">px</span>
+									</Input>
+								</FormItem>
+							</div>
+							<FormItem>
+								<Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
+							</FormItem>
+						</Form>
+					</Card>
+				</div>
+				<div class="table-box" v-else>
+					<Card :bordered="false" dis-hover class="ivu-mt">
+						<Row type="flex" class="mb20">
+							<Col span="24">
+							<Button type="primary" @click="addStorageBtn">添加存储空间</Button>
+							<Button type="success" @click="synchro" class="ml20">同步存储空间</Button>
+							<Button @click="addConfigBtn" style="float: right">修改配置信息</Button>
+							</Col>
+						</Row>
+						<Table :columns="columns" :data="levelLists" ref="table" class="mt25" :loading="loading"
+							highlight-row no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
+							<template slot-scope="{ row, index }" slot="status">
+								<!-- {{row}}{{index}} -->
+								<i-switch v-model="row.status" :value="row.status" :true-value="1" :false-value="0"
+									@on-change="changeSwitch(row, index)" size="large">
+									<span slot="open">开启</span>
+									<span slot="close">关闭</span>
+								</i-switch>
+							</template>
+							<template slot-scope="{ row, index }" slot="action">
+								<template v-if="row.domain && row.domain != row.cname">
+									<span class="btn" @click="config(row)">CNAME配置</span>
+									<Divider type="vertical" />
+								</template>
+								<span class="btn" @click="edit(row)">修改空间域名</span>
+								<Divider type="vertical" />
+								<span class="btn" @click="del(row, '删除该数据', index)">删除</span>
+							</template>
+						</Table>
+						<div class="acea-row row-right page">
+							<Page :total="total" :current="list.page" show-elevator show-total @on-change="pageChange"
+								:page-size="list.limit" />
+						</div>
+					</Card>
+				</div>
+			</Card>
+		</div>
+		<Modal v-model="configuModal" title="CNAME配置">
+			<div>
+				<div class="confignv">
+					<span class="configtit">主机记录：</span>{{ configData.domain }}
+				</div>
+				<div class="confignv">
+					<span class="configtit">记录类型：</span>CNAME
+				</div>
+				<div class="confignv">
+					<span class="configtit">记录值：</span>{{configData.cname}}
+					<!--          <span class="copy copy-data" :data-clipboard-text="configData.cname"-->
+					<!--            >复制</span-->
+					<!--          >-->
+					<Button size="small" v-clipboard:copy="configData.cname" v-clipboard:success="onCopy"
+						v-clipboard:error="onError">复制
+					</Button>
+				</div>
+			</div>
+			<div slot="footer"></div>
+		</Modal>
+		<Modal v-model="modalPic" width="960px" scrollable footer-hide closable title="上传商品图" :mask-closable="false"
+			:z-index="888">
+			<uploadPictures :isChoice="isChoice" @getPic="getPic" :gridBtn="gridBtn" :gridPic="gridPic" v-if="modalPic">
+			</uploadPictures>
+		</Modal>
+		<Modal v-model="visible">
+			<img :src="formData.watermark_image" v-if="visible" style="width: 100%">
+		</Modal>
+	</div>
 </template>
 
 <script>
-import ClipboardJS from "clipboard";
-import uploadPictures from "@/components/uploadPictures";
-import Setting from '@/setting';
-
-import {
-  addConfigApi,
-  addStorageApi,
-  storageListApi,
-  storageSynchApi,
-  storageStatusApi,
-  editStorageApi,
-  getConfigImageApi,
-  saveBasicsApi,
-  saveType
-} from "@/api/setting";
-export default {
-  name: 'setting_storage',
-  components: { uploadPictures },
-  data() {
-      let isInteger = (rule, value, callback) => {
-          if (!value || /(^(-)?[0-9]*$)/.test(value)) {
-              callback();
-          } else {
-              callback(new Error('必须为整数'));
-          }
-      };
-    return {
-      baseURL: Setting.apiBaseURL.replace(/adminapi/, ''),
-      modalPic: false,
-      isChoice: "单选",
-      gridBtn: {
-        xl: 4,
-        lg: 8,
-        md: 8,
-        sm: 8,
-        xs: 8,
-      },
-      gridPic: {
-        xl: 6,
-        lg: 8,
-        md: 12,
-        sm: 12,
-        xs: 12,
-      },
-      configuModal: false,
-      configData: "",
-      headerList: [
-        { label: "基础配置", value: "1" },
-        { label: "阿里云储存", value: "3" },
-        { label: "腾讯云储存", value: "4" },
-        { label: "七牛云储存", value: "2" },
-		{ label: '京东云储存', value: '5' },
-		{ label: '华为云储存', value: '6' },
-		{ label: '天翼云储存', value: '7' },
-      ],
-      columns: [
-        {
-          title: "储存空间名称",
-          key: "name",
-          align: "center",
-          minWidth: 200,
-        },
-        {
-          title: "区域",
-          key: "_region",
-          align: "center",
-          minWidth: 100,
-        },
-        {
-          title: "空间域名",
-          key: "domain",
-          align: "center",
-          minWidth: 200,
-        },
-        {
-          title: "使用状态",
-          slot: "status",
-          align: "center",
-          width: 90,
-        },
-        {
-          title: "创建时间",
-          key: "_add_time",
-          align: "center",
-          minWidth: 150,
-        },
-        {
-          title: "更新时间",
-          key: "_update_time",
-          align: "center",
-          minWidth: 150,
-        },
-        {
-          title: "操作",
-          slot: "action",
-          width: 210,
-          align: "center",
-        },
-      ],
-      total: 0,
-      list: {
-        page: 1,
-        limit: 15,
-        type: "1",
-      },
-      levelLists: [],
-      currentTab: "1",
-      loading: false,
-      addData: {
-        input: "",
-        select: "",
-        jurisdiction: "1",
-        type: "1",
-      },
-      confData: {
-        AccessKeyId: "",
-        AccessKeySecret: "",
-      },
-      formData: {
-        upload_type: 1,
-        image_watermark_status: 0,
-        thumb_big_width: '',
-        thumb_big_height: '',
-        thumb_mid_width: '',
-        thumb_mid_height: '',
-        thumb_small_width: '',
-        thumb_small_height: '',
-        watermark_type: 1,
-        watermark_text: '',
-        watermark_text_angle: '',
-        watermark_text_color: '',
-        watermark_text_size: '',
-        watermark_position: 1,
-        watermark_image: '',
-        watermark_opacity: '',
-        watermark_rotate: '',
-        watermark_x: '',
-        watermark_y: ''
-      },
-      rules: {
-          thumb_big_width: [
-              {
-                  validator: isInteger,
-                  trigger: 'blur'
-              }
-          ],
-          thumb_big_height: [
-              {
-                  validator: isInteger,
-                  trigger: 'blur'
-              }
-          ],
-          thumb_mid_width: [
-              {
-                  validator: isInteger,
-                  trigger: 'blur'
-              }
-          ],
-          thumb_mid_height: [
-              {
-                  validator: isInteger,
-                  trigger: 'blur'
-              }
-          ],
-          thumb_small_width: [
-              {
-                  validator: isInteger,
-                  trigger: 'blur'
-              }
-          ],
-          thumb_small_height: [
-              {
-                  validator: isInteger,
-                  trigger: 'blur'
-              }
-          ],
-          watermark_x: [
-              {
-                  validator: isInteger,
-                  trigger: 'blur'
-              }
-          ],
-          watermark_y: [
-              {
-                  validator: isInteger,
-                  trigger: 'blur'
-              }
-          ]
-      },
-      visible: false
-    };
-  },
-  computed: {
-    positionText () {
-        return ['左上', '中上', '右上', '左中', '中', '右中', '左下', '中下', '右下'][this.formData.watermark_position - 1];
-    }
-  },
-  created() {
-    this.getConfigImage();
-  },
-  mounted: function () {
-    // this.$nextTick(function () {
-    //   const clipboard = new ClipboardJS(".copy-data");
-    //   clipboard.on("success", () => {
-    //     this.$Message.success("复制成功");
-    //   });
-    // });
-  },
-  methods: {
-    onCopy() {
-      this.$Message.success("复制成功");
-    },
-    onError() {
-      this.$Message.error("复制失败");
-    },
-	changeSave(type) {
-	  saveType(type)
-	    .then((res) => {
-	      this.$Message.success(res.msg);
-	    })
-	    .catch((err) => {
-	      this.$Message.error(err.msg);
-	    });
-	},
-    //   获取缩略图配置
-      getConfigImage() {
-          getConfigImageApi().then(res => {
-                let data = res.data;
-                this.formData.upload_type = parseInt(data.upload_type.value);
-                this.formData.image_watermark_status = data.image_watermark_status.value;
-                this.formData.thumb_big_width = data.thumb_big_width.value;
-                this.formData.thumb_big_height = data.thumb_big_height.value;
-                this.formData.thumb_mid_width = data.thumb_mid_width.value;
-                this.formData.thumb_mid_height = data.thumb_mid_height.value;
-                this.formData.thumb_small_width = data.thumb_small_width.value;
-                this.formData.thumb_small_height = data.thumb_small_height.value;
-                this.formData.watermark_type = data.watermark_type.value;
-                this.formData.watermark_text = data.watermark_text.value;
-                this.formData.watermark_text_angle = data.watermark_text_angle.value;
-                this.formData.watermark_text_color = data.watermark_text_color.value;
-                this.formData.watermark_text_size = data.watermark_text_size.value;
-                this.formData.watermark_position = data.watermark_position.value;
-                this.formData.watermark_image = data.watermark_image.value;
-                this.formData.watermark_opacity = data.watermark_opacity.value;
-                this.formData.watermark_rotate = data.watermark_rotate.value;
-                this.formData.watermark_x = data.watermark_x.value;
-                this.formData.watermark_y = data.watermark_y.value;
-          });
-      },
-    //   基础配置保存
-    handleSubmit(name) {
-        this.$refs[name].validate(valid => {
-            if (valid) {
-                saveBasicsApi(this.formData).then(res => {
-                    this.$Message.success(res.msg);
-                }).catch(res => {
-                    this.$Message.error(res.msg);
-                });
-            }
-        });
-    },
-    // 选择图片
-    modalPicTap() {
-      this.modalPic = true;
-    },
-    // 选中图片
-    getPic(pc) {
-      this.formData.watermark_image = pc.att_dir;
-      this.modalPic = false;
-    },
-    // CNAME配置
-    config(row) {
-      this.configuModal = true;
-      this.configData = row;
-    },
-    //同步储存空间
-    synchro() {
-      storageSynchApi(this.currentTab)
-        .then((res) => {
-          this.$Message.success(res.msg);
-          this.getlist();
-        })
-        .catch((err) => {
-          this.$Message.error(err.msg);
-        });
-    },
-    // 添加存储空间
-    addStorageBtn() {
-      this.$modalForm(addStorageApi(this.currentTab)).then(() => {
-        this.getlist();
-      });
-    },
-    // 修改配置信息
-    addConfigBtn() {
-      this.$modalForm(addConfigApi(this.currentTab)).then(() => {
-        this.getlist();
-      });
-    },
-    //修改空间域名
-    edit(row) {
-      this.$modalForm(editStorageApi(row.id)).then(() => {
-        this.getlist();
-      });
-    },
-    // 使用状态
-    changeSwitch(row, item) {
-      return new Promise((resolve) => {
-        this.$Modal.confirm({
-          title: "切换状态",
-          content: "您确认要切换使用状态吗？",
-          onOk: () => {
-            // resolve();
-            storageStatusApi(row.id)
-              .then((res) => {
-                this.$Message.success(res.msg);
-                this.getlist();
-              })
-              .catch((err) => {
-                this.$Message.error(err.msg);
-              });
-          },
-          onCancel: () => {
-            this.$Message.info("已取消");
-            this.getlist();
-          },
-        });
-      });
-    },
-    // 云存储列表
-    getlist() {
-      this.loading = true;
-      storageListApi(this.list).then((res) => {
-        this.total = res.data.count;
-        this.levelLists = res.data.list;
-        this.loading = false;
-      });
-    },
-    // 切换选项卡
-    changeTab(data) {
-      this.currentTab = data;
-      this.list.type = data;
-      this.list.page = 1;
-      if (data == 1) {
-          this.getConfigImage();
-      } else {
-        this.getlist();
-      }
-    },
-    // 删除
-    del(row, tit, num) {
-      let delfromData = {
-        title: tit,
-        num: num,
-        url: `setting/config/storage/${row.id}`,
-        method: "DELETE",
-        ids: "",
-      };
-      this.$modalSure(delfromData)
-        .then((res) => {
-          this.$Message.success(res.msg);
-          this.getlist();
-        })
-        .catch((res) => {
-          this.$Message.error(res.msg);
-        });
-    },
-    pageChange(index) {
-      this.list.page = index;
-      this.getlist();
-    },
-    handleView () {
-        this.visible = true;
-    },
-    handleRemove () {
-        this.formData.watermark_image = '';
-    }
-  },
-};
+	import ClipboardJS from "clipboard";
+	import uploadPictures from "@/components/uploadPictures";
+	import Setting from '@/setting';
+
+	import {
+		addConfigApi,
+		addStorageApi,
+		storageListApi,
+		storageSynchApi,
+		storageStatusApi,
+		editStorageApi,
+		getConfigImageApi,
+		saveBasicsApi,
+		saveType
+	} from "@/api/setting";
+	export default {
+		name: 'setting_storage',
+		components: {
+			uploadPictures
+		},
+		data() {
+			let isInteger = (rule, value, callback) => {
+				if (!value || /(^(-)?[0-9]*$)/.test(value)) {
+					callback();
+				} else {
+					callback(new Error('必须为整数'));
+				}
+			};
+			return {
+				baseURL: Setting.apiBaseURL.replace(/adminapi/, ''),
+				modalPic: false,
+				isChoice: "单选",
+				gridBtn: {
+					xl: 4,
+					lg: 8,
+					md: 8,
+					sm: 8,
+					xs: 8,
+				},
+				gridPic: {
+					xl: 6,
+					lg: 8,
+					md: 12,
+					sm: 12,
+					xs: 12,
+				},
+				configuModal: false,
+				configData: "",
+				headerList: [{
+						label: "基础配置",
+						value: "1"
+					},
+					{
+						label: "阿里云储存",
+						value: "3"
+					},
+					{
+						label: "腾讯云储存",
+						value: "4"
+					},
+					{
+						label: "七牛云储存",
+						value: "2"
+					},
+					{
+						label: '京东云储存',
+						value: '5'
+					},
+					{
+						label: '华为云储存',
+						value: '6'
+					},
+					{
+						label: '天翼云储存',
+						value: '7'
+					},
+				],
+				columns: [{
+						title: "储存空间名称",
+						key: "name",
+						align: "center",
+						minWidth: 200,
+					},
+					{
+						title: "区域",
+						key: "_region",
+						align: "center",
+						minWidth: 100,
+					},
+					{
+						title: "空间域名",
+						key: "domain",
+						align: "center",
+						minWidth: 200,
+					},
+					{
+						title: "使用状态",
+						slot: "status",
+						align: "center",
+						width: 90,
+					},
+					{
+						title: "创建时间",
+						key: "_add_time",
+						align: "center",
+						minWidth: 150,
+					},
+					{
+						title: "更新时间",
+						key: "_update_time",
+						align: "center",
+						minWidth: 150,
+					},
+					{
+						title: "操作",
+						slot: "action",
+						width: 210,
+						align: "center",
+					},
+				],
+				total: 0,
+				list: {
+					page: 1,
+					limit: 15,
+					type: "1",
+				},
+				levelLists: [],
+				currentTab: "1",
+				loading: false,
+				addData: {
+					input: "",
+					select: "",
+					jurisdiction: "1",
+					type: "1",
+				},
+				confData: {
+					AccessKeyId: "",
+					AccessKeySecret: "",
+				},
+				formData: {
+					upload_type: 1,
+					image_watermark_status: 0,
+					thumb_big_width: '',
+					thumb_big_height: '',
+					thumb_mid_width: '',
+					thumb_mid_height: '',
+					thumb_small_width: '',
+					thumb_small_height: '',
+					watermark_type: 1,
+					watermark_text: '',
+					watermark_text_angle: '',
+					watermark_text_color: '',
+					watermark_text_size: '',
+					watermark_position: 1,
+					watermark_image: '',
+					watermark_opacity: '',
+					watermark_rotate: '',
+					watermark_x: '',
+					watermark_y: ''
+				},
+				rules: {
+					thumb_big_width: [{
+						validator: isInteger,
+						trigger: 'blur'
+					}],
+					thumb_big_height: [{
+						validator: isInteger,
+						trigger: 'blur'
+					}],
+					thumb_mid_width: [{
+						validator: isInteger,
+						trigger: 'blur'
+					}],
+					thumb_mid_height: [{
+						validator: isInteger,
+						trigger: 'blur'
+					}],
+					thumb_small_width: [{
+						validator: isInteger,
+						trigger: 'blur'
+					}],
+					thumb_small_height: [{
+						validator: isInteger,
+						trigger: 'blur'
+					}],
+					watermark_x: [{
+						validator: isInteger,
+						trigger: 'blur'
+					}],
+					watermark_y: [{
+						validator: isInteger,
+						trigger: 'blur'
+					}]
+				},
+				visible: false
+			};
+		},
+		computed: {
+			positionText() {
+				return ['左上', '中上', '右上', '左中', '中', '右中', '左下', '中下', '右下'][this.formData.watermark_position - 1];
+			}
+		},
+		created() {
+			this.getConfigImage();
+		},
+		mounted: function() {
+			// this.$nextTick(function () {
+			//   const clipboard = new ClipboardJS(".copy-data");
+			//   clipboard.on("success", () => {
+			//     this.$Message.success("复制成功");
+			//   });
+			// });
+		},
+		methods: {
+			onCopy() {
+				this.$Message.success("复制成功");
+			},
+			onError() {
+				this.$Message.error("复制失败");
+			},
+			changeSave(type) {
+				saveType(type)
+					.then((res) => {
+						this.$Message.success(res.msg);
+					})
+					.catch((err) => {
+						this.$Message.error(err.msg);
+					});
+			},
+			//   获取缩略图配置
+			getConfigImage() {
+				getConfigImageApi().then(res => {
+					let data = res.data;
+					this.formData.upload_type = parseInt(data.upload_type.value);
+					this.formData.image_watermark_status = data.image_watermark_status.value;
+					this.formData.thumb_big_width = data.thumb_big_width.value;
+					this.formData.thumb_big_height = data.thumb_big_height.value;
+					this.formData.thumb_mid_width = data.thumb_mid_width.value;
+					this.formData.thumb_mid_height = data.thumb_mid_height.value;
+					this.formData.thumb_small_width = data.thumb_small_width.value;
+					this.formData.thumb_small_height = data.thumb_small_height.value;
+					this.formData.watermark_type = data.watermark_type.value;
+					this.formData.watermark_text = data.watermark_text.value;
+					this.formData.watermark_text_angle = data.watermark_text_angle.value;
+					this.formData.watermark_text_color = data.watermark_text_color.value;
+					this.formData.watermark_text_size = data.watermark_text_size.value;
+					this.formData.watermark_position = data.watermark_position.value;
+					this.formData.watermark_image = data.watermark_image.value;
+					this.formData.watermark_opacity = data.watermark_opacity.value;
+					this.formData.watermark_rotate = data.watermark_rotate.value;
+					this.formData.watermark_x = data.watermark_x.value;
+					this.formData.watermark_y = data.watermark_y.value;
+				});
+			},
+			//   基础配置保存
+			handleSubmit(name) {
+				this.$refs[name].validate(valid => {
+					if (valid) {
+						saveBasicsApi(this.formData).then(res => {
+							this.$Message.success(res.msg);
+						}).catch(res => {
+							this.$Message.error(res.msg);
+						});
+					}
+				});
+			},
+			// 选择图片
+			modalPicTap() {
+				this.modalPic = true;
+			},
+			// 选中图片
+			getPic(pc) {
+				this.formData.watermark_image = pc.att_dir;
+				this.modalPic = false;
+			},
+			// CNAME配置
+			config(row) {
+				this.configuModal = true;
+				this.configData = row;
+			},
+			//同步储存空间
+			synchro() {
+				storageSynchApi(this.currentTab)
+					.then((res) => {
+						this.$Message.success(res.msg);
+						this.getlist();
+					})
+					.catch((err) => {
+						this.$Message.error(err.msg);
+					});
+			},
+			// 添加存储空间
+			addStorageBtn() {
+				this.$modalForm(addStorageApi(this.currentTab)).then(() => {
+					this.getlist();
+				});
+			},
+			// 修改配置信息
+			addConfigBtn() {
+				this.$modalForm(addConfigApi(this.currentTab)).then(() => {
+					this.getlist();
+				});
+			},
+			//修改空间域名
+			edit(row) {
+				this.$modalForm(editStorageApi(row.id)).then(() => {
+					this.getlist();
+				});
+			},
+			// 使用状态
+			changeSwitch(row, item) {
+				return new Promise((resolve) => {
+					this.$Modal.confirm({
+						title: "切换状态",
+						content: "您确认要切换使用状态吗？",
+						onOk: () => {
+							// resolve();
+							storageStatusApi(row.id)
+								.then((res) => {
+									this.$Message.success(res.msg);
+									this.getlist();
+								})
+								.catch((err) => {
+									this.$Message.error(err.msg);
+								});
+						},
+						onCancel: () => {
+							this.$Message.info("已取消");
+							this.getlist();
+						},
+					});
+				});
+			},
+			// 云存储列表
+			getlist() {
+				this.loading = true;
+				storageListApi(this.list).then((res) => {
+					this.total = res.data.count;
+					this.levelLists = res.data.list;
+					this.loading = false;
+				});
+			},
+			// 切换选项卡
+			changeTab(data) {
+				this.currentTab = data;
+				this.list.type = data;
+				this.list.page = 1;
+				if (data == 1) {
+					this.getConfigImage();
+				} else {
+					this.getlist();
+				}
+			},
+			// 删除
+			del(row, tit, num) {
+				let delfromData = {
+					title: tit,
+					num: num,
+					url: `setting/config/storage/${row.id}`,
+					method: "DELETE",
+					ids: "",
+				};
+				this.$modalSure(delfromData)
+					.then((res) => {
+						this.$Message.success(res.msg);
+						this.getlist();
+					})
+					.catch((res) => {
+						this.$Message.error(res.msg);
+					});
+			},
+			pageChange(index) {
+				this.list.page = index;
+				this.getlist();
+			},
+			handleView() {
+				this.visible = true;
+			},
+			handleRemove() {
+				this.formData.watermark_image = '';
+			}
+		},
+	};
 </script>
 <style scoped lang="stylus">
-.ivu-input-group > .ivu-input:last-child,
-/deep/.ivu-input-group-append {
-  background: none;
-  color: #999999;
-}
-/deep/.ivu-input-group .ivu-input {
-  border-right: 0px !important;
-}
-.content /deep/.ivu-form .ivu-form-item-label {
-  width: 133px;
-}
-.topIput {
-  width: 186px;
-  background: #ffffff;
-  border-right: 0px !important;
-}
-.new_tab {
-  >>>.ivu-tabs-nav .ivu-tabs-tab{
-      padding:4px 16px 20px !important;
-      font-weight: 500;
-  }
-}
-.abbreviation {
-  .top {
-    display: flex;
-    justify-content: flex-start;
-    .topBox {
-      display: flex;
-      .topRight {
-        width: 254px;
-        margin-left: 36px;
-      }
-      .topLeft {
-        width: 94px;
-        height: 94px;
-
-        text-align: center;
-        font-size: 13px;
-        font-weight: 400;
-        color: #000000;
-        .img {
-          // width: 84px;
-          height: 67px;
-          background: #f7fbff;
-          border-radius: 4px;
-          margin-bottom: 9px;
-          .imgs {
-            width: 70px;
-            height: 51px;
-            display: inline-block;
-            text-align: center;
-            margin-top: 8px;
-          }
-        }
-      }
-    }
-  }
-  .content {
-    /deep/.ivu-form-item-label {
-      width: 120px;
-    }
-    .flex {
-      display: flex;
-      justify-content: flex-start;
-      // width: 400px;
-
-      .contentIput {
-        width: 400px;
-      }
-      .conents {
-        display: flex;
-        .title {
-          width: 30px;
-          margin-top: 70px;
-          margin-left: 6px;
-        }
-        .positionBox {
-          display: flex;
-          flex-wrap: wrap;
-          width: 94px;
-          height: 90px;
-          border-radius: 4px;
-          border-right: 1px solid #dddddd;
-          .box {
-            width: 31px;
-            height: 31px;
-            // border-radius: 4px 0px 0px 0px;
-            border: 1px solid #dddddd;
-            cursor: pointer;
-          }
-          .on {
-            background: rgba(24, 144, 255, 0.1);
-          }
-        }
-      }
-    }
-  }
-}
-
-/deep/ .ivu-form-item-label {
-    padding-right: 6px;
-    font-size: 13px !important;
-    color: rgba(0, 0, 0, 0.85);
-}
-
-/deep/ .ivu-input {
-    font-size: 13px !important;
-}
-
-/deep/ .ivu-input-group-with-append .ivu-input {
-    border-right: 0;
-}
-
-/deep/ .ivu-input-group-append {
-    padding-right: 14px;
-    background-color: transparent;
-    font-size: 13px;
-    color: #999999;
-}
-
-/deep/ .ivu-radio-wrapper {
-    margin-right: 30px;
-    font-size: 13px !important;
-    color: #666666;
-
-    &.ivu-radio-wrapper-checked {
-        color: #2D8CF0;
-    }
-}
-
-.ivu-form {
-    > .ivu-form-item {
-        &:first-child {
-            margin: 8px 0 28px;
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    .ivu-divider {
-        margin-bottom: 16px;
-    }
-}
-
-.thumb-list {
-    display: flex;
-    margin-top: 20px;
-    margin-bottom: 59px;
-
-    .item {
-		flex: 0 0 calc((100% - 120px) / 3);
-        display: flex;
-        align-items: center;
-        margin-left: 60px;
-
-        &:first-child {
-            margin-left: 0;
-        }
-    }
-
-    .image {
-        padding: 0 5px;
-        font-size: 13px;
-        line-height: 18px;
-        text-align: center;
-        color: #000000;
-    }
-
-    img {
-        width: 84px;
-        height: 67px;
-        margin-bottom: 9px;
-    }
-
-    .ivu-form-item {
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-}
-
-.form-item-list {
-    display: flex;
-    flex-wrap: wrap;
-	width: calc(100% / 3 * 2);
-
-    .ivu-form-item {
-		flex: 0 0 calc((100% - 60px) / 2);
-        margin-left: 60px;
-
-        &:nth-child(2n+1) {
-            margin-left: 0;
-        }
-    }
-
-    .ivu-radio-group {
-        display: inline-flex;
-        flex-wrap: wrap;
-        width: 90px;
-    }
-
-    .ivu-radio-wrapper {
-        width: 30px;
-        height: 30px;
-        padding: 0;
-        margin-right: 0;
-        font-size: 0 !important;
-
-        &:first-child {
-            border-radius: 4px 0 0 0;
-        }
-
-        &:last-child {
-            border-radius: 0 0 4px 0;
-        }
-
-        &:nth-child(3) {
-            border-radius: 0 4px 0 0;
-        }
-
-        &:nth-child(7) {
-            border-radius: 0 0 0 4px;
-        }
-
-        &::before {
-            left: 0;
-        }
-
-        &::after {
-            top: 0;
-            left: 0;
-        }
-    }
-
-    .ivu-radio-wrapper-checked {
-        background: rgba(24, 144, 255, 0.1);
-    }
-}
-
-.tip {
-    display: inline-block;
-    margin-left: 6px;
-    vertical-align: bottom;
-    font-size: 12px;
-    line-height: 18px;
-    color: #999999;
-}
-
-.upload, .upload-list {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 60px;
-    border: 1px solid #DDDDDD;
-    border-radius: 4px;
-    background-color: rgba(0, 0, 0, 0.02);
-    vertical-align: middle;
-    text-align: center;
-    line-height: 60px;
-
-    img {
-        width: 100%;
-        height: 100%;
-    }
-
-    .ivu-icon {
-        color: #898989;
-    }
-}
-
-.upload-list-cover {
-    display: none;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: rgba(0,0,0,.6);
-}
-
-.upload-list:hover .upload-list-cover{
-    display: block;
-}
-.upload-list-cover i{
-    color: #fff !important;
-    font-size: 20px;
-    cursor: pointer;
-    margin: 0 2px;
-}
+	.ivu-input-group>.ivu-input:last-child,
+	/deep/.ivu-input-group-append {
+		background: none;
+		color: #999999;
+	}
+
+	/deep/.ivu-input-group .ivu-input {
+		border-right: 0px !important;
+	}
+
+	.content /deep/.ivu-form .ivu-form-item-label {
+		width: 133px;
+	}
+
+	.topIput {
+		width: 186px;
+		background: #ffffff;
+		border-right: 0px !important;
+	}
+
+	.new_tab {
+		>>>.ivu-tabs-nav .ivu-tabs-tab {
+			padding: 4px 16px 20px !important;
+			font-weight: 500;
+		}
+	}
+
+	.abbreviation {
+		.top {
+			display: flex;
+			justify-content: flex-start;
+
+			.topBox {
+				display: flex;
+
+				.topRight {
+					width: 254px;
+					margin-left: 36px;
+				}
+
+				.topLeft {
+					width: 94px;
+					height: 94px;
+
+					text-align: center;
+					font-size: 13px;
+					font-weight: 400;
+					color: #000000;
+
+					.img {
+						// width: 84px;
+						height: 67px;
+						background: #f7fbff;
+						border-radius: 4px;
+						margin-bottom: 9px;
+
+						.imgs {
+							width: 70px;
+							height: 51px;
+							display: inline-block;
+							text-align: center;
+							margin-top: 8px;
+						}
+					}
+				}
+			}
+		}
+
+		.content {
+			/deep/.ivu-form-item-label {
+				width: 120px;
+			}
+
+			.flex {
+				display: flex;
+				justify-content: flex-start;
+				// width: 400px;
+
+				.contentIput {
+					width: 400px;
+				}
+
+				.conents {
+					display: flex;
+
+					.title {
+						width: 30px;
+						margin-top: 70px;
+						margin-left: 6px;
+					}
+
+					.positionBox {
+						display: flex;
+						flex-wrap: wrap;
+						width: 94px;
+						height: 90px;
+						border-radius: 4px;
+						border-right: 1px solid #dddddd;
+
+						.box {
+							width: 31px;
+							height: 31px;
+							// border-radius: 4px 0px 0px 0px;
+							border: 1px solid #dddddd;
+							cursor: pointer;
+						}
+
+						.on {
+							background: rgba(24, 144, 255, 0.1);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	/deep/ .ivu-form-item-label {
+		padding-right: 6px;
+		font-size: 13px !important;
+		color: rgba(0, 0, 0, 0.85);
+	}
+
+	/deep/ .ivu-input {
+		font-size: 13px !important;
+	}
+
+	/deep/ .ivu-input-group-with-append .ivu-input {
+		border-right: 0;
+	}
+
+	/deep/ .ivu-input-group-append {
+		padding-right: 14px;
+		background-color: transparent;
+		font-size: 13px;
+		color: #999999;
+	}
+
+	/deep/ .ivu-radio-wrapper {
+		margin-right: 30px;
+		font-size: 13px !important;
+		color: #666666;
+
+		&.ivu-radio-wrapper-checked {
+			color: #2D8CF0;
+		}
+	}
+
+	.ivu-form {
+		>.ivu-form-item {
+			&:first-child {
+				margin: 8px 0 28px;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+
+		.ivu-divider {
+			margin-bottom: 16px;
+		}
+	}
+
+	.thumb-list {
+		display: flex;
+		margin-top: 20px;
+		margin-bottom: 59px;
+
+		.item {
+			flex: 0 0 calc((100% - 120px) / 3);
+			display: flex;
+			align-items: center;
+			margin-left: 60px;
+
+			&:first-child {
+				margin-left: 0;
+			}
+		}
+
+		.image {
+			padding: 0 5px;
+			font-size: 13px;
+			line-height: 18px;
+			text-align: center;
+			color: #000000;
+		}
+
+		img {
+			width: 84px;
+			height: 67px;
+			margin-bottom: 9px;
+		}
+
+		.ivu-form-item {
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	.form-item-list {
+		display: flex;
+		flex-wrap: wrap;
+		width: calc(100% / 3 * 2);
+
+		.ivu-form-item {
+			flex: 0 0 calc((100% - 60px) / 2);
+			margin-left: 60px;
+
+			&:nth-child(2n+1) {
+				margin-left: 0;
+			}
+		}
+
+		.ivu-radio-group {
+			display: inline-flex;
+			flex-wrap: wrap;
+			width: 90px;
+		}
+
+		.ivu-radio-wrapper {
+			width: 30px;
+			height: 30px;
+			padding: 0;
+			margin-right: 0;
+			font-size: 0 !important;
+
+			&:first-child {
+				border-radius: 4px 0 0 0;
+			}
+
+			&:last-child {
+				border-radius: 0 0 4px 0;
+			}
+
+			&:nth-child(3) {
+				border-radius: 0 4px 0 0;
+			}
+
+			&:nth-child(7) {
+				border-radius: 0 0 0 4px;
+			}
+
+			&::before {
+				left: 0;
+			}
+
+			&::after {
+				top: 0;
+				left: 0;
+			}
+		}
+
+		.ivu-radio-wrapper-checked {
+			background: rgba(24, 144, 255, 0.1);
+		}
+	}
+
+	.tip {
+		display: inline-block;
+		margin-left: 6px;
+		vertical-align: bottom;
+		font-size: 12px;
+		line-height: 18px;
+		color: #999999;
+	}
+
+	.upload,
+	.upload-list {
+		position: relative;
+		display: inline-block;
+		width: 60px;
+		height: 60px;
+		border: 1px solid #DDDDDD;
+		border-radius: 4px;
+		background-color: rgba(0, 0, 0, 0.02);
+		vertical-align: middle;
+		text-align: center;
+		line-height: 60px;
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+
+		.ivu-icon {
+			color: #898989;
+		}
+	}
+
+	.upload-list-cover {
+		display: none;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: rgba(0, 0, 0, .6);
+	}
+
+	.upload-list:hover .upload-list-cover {
+		display: block;
+	}
+
+	.upload-list-cover i {
+		color: #fff !important;
+		font-size: 20px;
+		cursor: pointer;
+		margin: 0 2px;
+	}
 </style>
 <style scoped>
-.message /deep/ .ivu-table-header thead tr th {
-  padding: 8px 16px;
-}
-.message /deep/ .ivu-tabs-tab {
-  border-radius: 0 !important;
-}
-.table-box {
-  /* padding: 20px; */
-}
-.table-box.explain .ivu-card {
-    border-color: #D6E7FC;
-    background-color: #EAF4FE;
-}
-.ivu-card-bordered.info {
-  border-color: #D6E7FC;
-  background: #EAF4FE;
-}
-.is-table {
-  display: flex;
-  /* justify-content: space-around; */
-  justify-content: center;
-}
-.btn {
-  cursor: pointer;
-  color: #2d8cf0;
-  font-size: 10px;
-}
-.is-switch-close {
-  background-color: #504444;
-}
-.is-switch {
-  background-color: #eb5252;
-}
-.notice-list {
-  background-color: #308cf5;
-  margin: 0 15px;
-}
-.table {
-  padding: 0 18px;
-}
-.confignv {
-  margin: 10px 0px;
-}
-.configtit {
-  display: inline-block;
-  width: 80px;
-  text-align: right;
-}
-.copy {
-  padding: 3px 5px;
-  border: 1px solid #cccccc;
-  border-radius: 5px;
-  color: #333;
-  cursor: pointer;
-  margin-left: 5px;
-}
-.copy:hover {
-  border-color: #2d8cf0;
-  color: #2d8cf0;
-}
-.picBox {
-  display: inline-block;
-  cursor: pointer;
-}
-.picBox .pictrue {
-  width: 60px;
-  height: 60px;
-  border: 1px dotted rgba(0, 0, 0, 0.1);
-  margin-right: 10px;
-}
-
-.picBox .pictrue img {
-  width: 100%;
-  height: 100%;
-}
-.picBox .upLoad {
-  width: 58px;
-  height: 58px;
-  line-height: 58px;
-  border: 1px dotted rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  background: rgba(0, 0, 0, 0.02);
-}
+	.message /deep/ .ivu-table-header thead tr th {
+		padding: 8px 16px;
+	}
 
+	.message /deep/ .ivu-tabs-tab {
+		border-radius: 0 !important;
+	}
 
-</style>
+	.table-box {
+		/* padding: 20px; */
+	}
+
+	.table-box.explain .ivu-card {
+		border-color: #D6E7FC;
+		background-color: #EAF4FE;
+	}
+
+	.ivu-card-bordered.info {
+		border-color: #D6E7FC;
+		background: #EAF4FE;
+	}
+
+	.is-table {
+		display: flex;
+		/* justify-content: space-around; */
+		justify-content: center;
+	}
+
+	.btn {
+		cursor: pointer;
+		color: #2d8cf0;
+		font-size: 10px;
+	}
+
+	.is-switch-close {
+		background-color: #504444;
+	}
+
+	.is-switch {
+		background-color: #eb5252;
+	}
+
+	.notice-list {
+		background-color: #308cf5;
+		margin: 0 15px;
+	}
+
+	.table {
+		padding: 0 18px;
+	}
+
+	.confignv {
+		margin: 10px 0px;
+	}
+
+	.configtit {
+		display: inline-block;
+		width: 80px;
+		text-align: right;
+	}
+
+	.copy {
+		padding: 3px 5px;
+		border: 1px solid #cccccc;
+		border-radius: 5px;
+		color: #333;
+		cursor: pointer;
+		margin-left: 5px;
+	}
+
+	.copy:hover {
+		border-color: #2d8cf0;
+		color: #2d8cf0;
+	}
+
+	.picBox {
+		display: inline-block;
+		cursor: pointer;
+	}
+
+	.picBox .pictrue {
+		width: 60px;
+		height: 60px;
+		border: 1px dotted rgba(0, 0, 0, 0.1);
+		margin-right: 10px;
+	}
+
+	.picBox .pictrue img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.picBox .upLoad {
+		width: 58px;
+		height: 58px;
+		line-height: 58px;
+		border: 1px dotted rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+		background: rgba(0, 0, 0, 0.02);
+	}
+</style>

src/pages/system/maintain/systemFile/opendir.vue

@@ -1,210 +1,200 @@
 <template>
-    <div>
-        <div class="i-layout-page-header">
-            <PageHeader class="product_tabs" title="文件管理" hidden-breadcrumb></PageHeader>
-        </div>
-        <Card :bordered="false" dis-hover class="ivu-mt">
-            <div class="backs" @click="goBack">
-                <Icon type="ios-folder-outline" class="mr5"/><span>返回上级</span>
-            </div>
-            <Table ref="selection" :columns="columns4" :data="tabList" :loading="loading"
-                   no-data-text="暂无数据" highlight-row class="mt20" @on-current-change="currentChange"
-                   no-filtered-data-text="暂无筛选结果">
-                <template slot-scope="{ row }" slot="filename">
-                    <Icon type="ios-folder-outline" v-if="row.isDir" class="mr5"/>
-                    <Icon type="ios-document-outline" v-else class="mr5"/>
-                    <span>{{row.filename}}</span>
-                </template>
-                <template slot-scope="{ row }" slot="isWritable">
-                    <span v-text="row.isWritable?'是':'否'"></span>
-                </template>
-                <template slot-scope="{ row, index }" slot="action">
-                    <a @click="open(row)"   v-if="row.isDir">打开</a>
-                    <a @click="edit(row)"   v-else>编辑</a>
-                </template>
-            </Table>
-        </Card>
-        <Modal v-model="modals"  scrollable  footer-hide closable :title="title" :mask-closable="false"  width="900">
-            <Button type="primary" id="savefile" class="mr5 mb15" @click="savefile">保存</Button>
-            <Button id="undo" class="mr5 mb15" @click="undofile">撤销</Button>
-<!--            <Button id="redo" class="mr5 mb15" @click="redofile">回退</Button>-->
-<!--            <Button id="refresh" class="mb15" @click="refreshfile">刷新</Button>-->
-            <textarea ref="mycode" class="codesql public_text" v-model="code"></textarea>
-            <Spin size="large" fix v-if="spinShow"></Spin>
-        </Modal>
-    </div>
+	<div>
+		<div class="i-layout-page-header">
+			<PageHeader class="product_tabs" title="文件管理" hidden-breadcrumb></PageHeader>
+		</div>
+		<Card :bordered="false" dis-hover class="ivu-mt">
+			<div class="backs" @click="goBack">
+				<Icon type="ios-folder-outline" class="mr5" /><span>返回上级</span>
+			</div>
+			<Table ref="selection" :columns="columns4" :data="tabList" :loading="loading" no-data-text="暂无数据"
+				highlight-row class="mt20" @on-current-change="currentChange" no-filtered-data-text="暂无筛选结果">
+				<template slot-scope="{ row }" slot="filename">
+					<Icon type="ios-folder-outline" v-if="row.isDir" class="mr5" />
+					<Icon type="ios-document-outline" v-else class="mr5" />
+					<span>{{row.filename}}</span>
+				</template>
+				<template slot-scope="{ row }" slot="isWritable">
+					<span v-text="row.isWritable?'是':'否'"></span>
+				</template>
+				<template slot-scope="{ row, index }" slot="action">
+					<a @click="open(row)" v-if="row.isDir">打开</a>
+					<a @click="edit(row)" v-else>编辑</a>
+				</template>
+			</Table>
+		</Card>
+		<Modal v-model="modals" scrollable footer-hide closable :title="title" :mask-closable="false" width="900">
+			<Button type="primary" id="savefile" class="mr5 mb15" @click="savefile">保存</Button>
+			<Button id="undo" class="mr5 mb15" @click="undofile">撤销</Button>
+			<!--            <Button id="redo" class="mr5 mb15" @click="redofile">回退</Button>-->
+			<!--            <Button id="refresh" class="mb15" @click="refreshfile">刷新</Button>-->
+			<textarea ref="mycode" class="codesql public_text" v-model="code"></textarea>
+			<Spin size="large" fix v-if="spinShow"></Spin>
+		</Modal>
+	</div>
 </template>
 
 <script>
-    import { opendirListApi, openfileApi, savefileApi } from '@/api/system';
-    import CodeMirror from 'codemirror/lib/codemirror'
-    import 'codemirror/theme/ambiance.css';
-    require('codemirror/mode/javascript/javascript');
-    export default {
-        name: 'opendir',
-        data () {
-            return {
-                code: '',
-                modals: false,
-                spinShow: false,
-                loading: false,
-                tabList: [],
-                columns4: [
-                    {
-                        title: '文件/文件夹名',
-                        slot: 'filename',
-                        minWidth: 150,
-                        back: '返回上级'
-                    },
-                    {
-                        title: '文件/文件夹路径',
-                        key: 'real_path',
-                        minWidth: 150
-                    },
-                    {
-                        title: '文件/文件夹大小',
-                        key: 'size',
-                        minWidth: 100
-                    },
-                    {
-                        title: '是否可写',
-                        slot: 'isWritable',
-                        minWidth: 100
-                    },
-                    {
-                        title: '更新时间',
-                        key: 'mtime',
-                        minWidth: 150
-                    },
-                    {
-                        title: 'Action',
-                        slot: 'action',
-                        minWidth: 150
-                    }
-                ],
-                formItem: {
-                    dir: '',
-                    superior: 0,
-                    filedir: ''
-                },
-                rows: {},
-                pathname: '',
-                title: ''
-            }
-        },
-        mounted () {
-            this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
-                value: 'http://www.crmeb.com', // 文本域默认显示的文本
-                mode: 'text/javascript',
-                theme: 'ambiance', // CSS样式选择
-                indentUnit: 4, // 缩进单位，默认2
-                smartIndent: true, // 是否智能缩进
-                tabSize: 4, // Tab缩进，默认4
-                readOnly: false, // 是否只读，默认false
-                showCursorWhenSelecting: true,
-                lineNumbers: true // 是否显示行号
-            })
-        },
-        created () {
-            this.getList();
-        },
-        methods: {
-            // 点击行
-            currentChange (currentRow) {
-                if (currentRow.isDir) {
-                    this.open(currentRow);
-                } else {
-                    this.edit(currentRow);
-                }
-            },
-            // 列表
-            getList () {
-                this.loading = true;
-                opendirListApi(this.formItem).then(async res => {
-                    let data = res.data
-                    this.tabList = data.list;
-                    this.dir = data.dir;
-                    this.loading = false;
-                }).catch(res => {
-                    this.loading = false;
-                    this.$Message.error(res.msg);
-                })
-            },
-            // 返回上级
-            goBack () {
-                this.formItem = {
-                    dir: this.dir,
-                    superior: 1,
-                    filedir: ''
-                }
-                this.getList()
-            },
-            // 打开
-            open (row) {
-                this.rows = row;
-                this.formItem = {
-                    dir: row.path,
-                    superior: 0,
-                    filedir: row.filename
-                }
-                this.getList()
-            },
-            // 编辑
-            edit (row) {
-                this.modals = true;
-                this.spinShow = true;
-                this.pathname = row.pathname;
-                this.title = row.filename;
-                openfileApi(row.pathname).then(async res => {
-                    let data = res.data;
-                    this.code = data.content;
-                    this.editor.setValue(this.code);
-                    this.spinShow = false;
-                }).catch(res => {
-                    this.spinShow = false;
-                    this.$Message.error(res.msg);
-                })
-            },
-            // 保存
-            savefile () {
-                let data = {
-                    comment: this.editor.getValue(),
-                    filepath: this.pathname
-                };
-                savefileApi(data).then(async res => {
-                    this.$Message.success(res.msg);
-                    this.modals = false;
-                }).catch(res => {
-                    this.$Message.error(res.msg);
-                })
-            },
-            // 撤销
-            undofile () {
-                this.editor.undo();
-            },
-            redofile () {
-                this.editor.redo();
-            },
-            // 刷新
-            refreshfile () {
-                this.editor.refresh();
-            }
-        }
-    }
+	import {
+		opendirListApi,
+		openfileApi,
+		savefileApi
+	} from '@/api/system';
+	import CodeMirror from 'codemirror/lib/codemirror'
+	import 'codemirror/theme/ambiance.css';
+	require('codemirror/mode/javascript/javascript');
+	export default {
+		name: 'opendir',
+		data() {
+			return {
+				code: '',
+				modals: false,
+				spinShow: false,
+				loading: false,
+				tabList: [],
+				columns4: [{
+						title: '文件/文件夹名',
+						slot: 'filename',
+						minWidth: 150,
+						back: '返回上级'
+					},
+					{
+						title: '文件/文件夹路径',
+						key: 'real_path',
+						minWidth: 150
+					},
+					{
+						title: '文件/文件夹大小',
+						key: 'size',
+						minWidth: 100
+					},
+					{
+						title: '是否可写',
+						slot: 'isWritable',
+						minWidth: 100
+					},
+					{
+						title: '更新时间',
+						key: 'mtime',
+						minWidth: 150
+					},
+					{
+						title: 'Action',
+						slot: 'action',
+						minWidth: 150
+					}
+				],
+				formItem: {
+					dir: '',
+					superior: 0,
+					filedir: ''
+				},
+				rows: {},
+				pathname: '',
+				title: ''
+			}
+		},
+		mounted() {
+			this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
+				value: 'https://mall.tzyqkj.com', // 文本域默认显示的文本
+				mode: 'text/javascript',
+				theme: 'ambiance', // CSS样式选择
+				indentUnit: 4, // 缩进单位，默认2
+				smartIndent: true, // 是否智能缩进
+				tabSize: 4, // Tab缩进，默认4
+				readOnly: false, // 是否只读，默认false
+				showCursorWhenSelecting: true,
+				lineNumbers: true // 是否显示行号
+			})
+		},
+		created() {
+			this.getList();
+		},
+		methods: {
+			// 点击行
+			currentChange(currentRow) {
+				if (currentRow.isDir) {
+					this.open(currentRow);
+				} else {
+					this.edit(currentRow);
+				}
+			},
+			// 列表
+			getList() {
+				this.loading = true;
+				opendirListApi(this.formItem).then(async res => {
+					let data = res.data
+					this.tabList = data.list;
+					this.dir = data.dir;
+					this.loading = false;
+				}).catch(res => {
+					this.loading = false;
+					this.$Message.error(res.msg);
+				})
+			},
+			// 返回上级
+			goBack() {
+				this.formItem = {
+					dir: this.dir,
+					superior: 1,
+					filedir: ''
+				}
+				this.getList()
+			},
+			// 打开
+			open(row) {
+				this.rows = row;
+				this.formItem = {
+					dir: row.path,
+					superior: 0,
+					filedir: row.filename
+				}
+				this.getList()
+			},
+			// 编辑
+			edit(row) {
+				this.modals = true;
+				this.spinShow = true;
+				this.pathname = row.pathname;
+				this.title = row.filename;
+				openfileApi(row.pathname).then(async res => {
+					let data = res.data;
+					this.code = data.content;
+					this.editor.setValue(this.code);
+					this.spinShow = false;
+				}).catch(res => {
+					this.spinShow = false;
+					this.$Message.error(res.msg);
+				})
+			},
+			// 保存
+			savefile() {
+				let data = {
+					comment: this.editor.getValue(),
+					filepath: this.pathname
+				};
+				savefileApi(data).then(async res => {
+					this.$Message.success(res.msg);
+					this.modals = false;
+				}).catch(res => {
+					this.$Message.error(res.msg);
+				})
+			},
+			// 撤销
+			undofile() {
+				this.editor.undo();
+			},
+			redofile() {
+				this.editor.redo();
+			},
+			// 刷新
+			refreshfile() {
+				this.editor.refresh();
+			}
+		}
+	}
 </script>
 
 <style scoped lang="stylus">
-    .mt20
-        >>>.ivu-icon-ios-folder-outline
-           font-size 14px !important
-        >>> .ivu-icon-ios-document-outline
-           font-size 18px !important
-        >>> .ivu-table-row
-           cursor pointer
-    .mr5
-       margin-right 5px
-    .backs
-       cursor pointer
-       display inline-block
-
-</style>
+	.mt20>>>.ivu-icon-ios-folder-outline font-size 14px !important>>>.ivu-icon-ios-document-outline font-size 18px !important>>>.ivu-table-row cursor pointer .mr5 margin-right 5px .backs cursor pointer display inline-block
+</style>

src/setting.js

@@ -22,107 +22,107 @@ const routePreKF = '/kefu'
 import util from '@/libs/util';
 
 const Setting = {
-    /**
-     * 基础配置
-     * */
-    roterPre,
-    routePreKF,
-    // 网页标题的后缀
-    titleSuffix: util.cookies.get('pageTitle') || 'CRMEB',
-    // 路由模式，可选值为 history 或 hash
-    routerMode: 'history',
-    // 页面切换时，是否显示模拟的进度条
-    showProgressBar: false,
-    // 接口请求地址
-    apiBaseURL: VUE_APP_API_URL,
-    // adminsocket连接
-    wsAdminSocketUrl: VUE_APP_WS_ADMIN_URL,
-    modalDuration: 3,
-    // 接口请求返回错误时，弹窗的类型，可选值为 Message 或 Notice
-    errorModalType: 'Message',
-    // Cookies 默认保存时间，单位：天
-    cookiesExpires: 1,
-    /**
-     * 多语言配置
-     * */
-    i18n: {
-        // 默认语言
-        default: 'zh-CN',
-        // 是否根据用户电脑配置自动设置语言（仅第一次有效）
-        auto: false
-    },
-    /**
-     * 布局配置
-     * */
-    // 侧边菜单宽度，单位 px，不可动态修改，需与 setting.less 的 @menuSideWidth 保持一致
-    menuSideWidth: 200,
-    layout: {
-        // 侧边栏风格，可选值为 dark 或 light
-        siderTheme: 'light',
-        // 顶栏风格，可选值为 light、dark 或 primary
-        headerTheme: 'primary',
-        // 顶栏是否置顶，开启后会覆盖侧边栏，需开启 headerFix
-        headerStick: true,
-        // 是否开启多 Tabs 页签
-        tabs: false,
-        // 多 Tabs 页签是否显示图标，开启 tabs 时有效
-        showTabsIcon: false,
-        // 是否固定多 Tabs 多页签
-        tabsFix: true,
-        // 是否固定侧边栏
-        siderFix: true,
-        // 是否固定顶栏
-        headerFix: true,
-        // 是否在下滑时隐藏顶栏，需开启 headerFix，如果开启了 tabsFix，Tabs 也会被隐藏
-        headerHide: false,
-        // 是否显示顶部菜单栏
-        // 一般来说，侧边的菜单栏足以满足大部分业务，如需动态切换侧边栏，可开启此选项启用顶部一级菜单，此时侧边栏将作为二级菜单
-        headerMenu: true,
-        // 侧边菜单栏是否开启手风琴模式
-        menuAccordion: true,
-        // 是否显示折叠侧边栏按钮，移动端下会自动强制开启
-        showSiderCollapse: true,
-        // 侧边菜单栏是否默认折起
-        menuCollapse: false,
-        // 侧边菜单折起时，是否在子菜单前显示父级菜单名称
-        showCollapseMenuTitle: false,
-        // 是否显示重载按钮
-        showReload: true,
-        // 是否显示搜索
-        showSearch: true,
-        // 是否显示通知
-        showNotice: true,
-        // 是否显示全屏
-        showFullscreen: true,
-        // 在手机访问时，是否在顶部显示小尺寸 logo
-        showMobileLogo: true,
-        // 是否显示全局面包屑，开启 headerMenu 时不可用
-        showBreadcrumb: true,
-        // 全局面包屑是否显示图标，开启 showBreadcrumb 时有效
-        showBreadcrumbIcon: true,
-        // 是否显示日志入口，开启与否，不影响日志记录，如不希望用户看到可关闭
-        showLog: false,
-        // 是否显示多语言
-        showI18n: false,
-        // 是否支持动态修改布局配置，移动端下会自动强制关闭
-        enableSetting: true,
-        // 退出登录时，是否二次确认
-        logoutConfirm: true
-    },
-    /**
-     * 多页 Tabs
-     * */
-    page: {
-        // 默认打开的页签
-        opened: [`${roterPre}/home`]
-    },
-    /**
-     * 功能配置
-     * */
-    // 相同路由，不同参数间进行切换，是否强力更新
-    sameRouteForceUpdate: false,
-    // 是否使用动态侧边菜单
-    dynamicSiderMenu: true
+	/**
+	 * 基础配置
+	 * */
+	roterPre,
+	routePreKF,
+	// 网页标题的后缀
+	titleSuffix: util.cookies.get('pageTitle') || '壹柒科技',
+	// 路由模式，可选值为 history 或 hash
+	routerMode: 'history',
+	// 页面切换时，是否显示模拟的进度条
+	showProgressBar: false,
+	// 接口请求地址
+	apiBaseURL: VUE_APP_API_URL,
+	// adminsocket连接
+	wsAdminSocketUrl: VUE_APP_WS_ADMIN_URL,
+	modalDuration: 3,
+	// 接口请求返回错误时，弹窗的类型，可选值为 Message 或 Notice
+	errorModalType: 'Message',
+	// Cookies 默认保存时间，单位：天
+	cookiesExpires: 1,
+	/**
+	 * 多语言配置
+	 * */
+	i18n: {
+		// 默认语言
+		default: 'zh-CN',
+		// 是否根据用户电脑配置自动设置语言（仅第一次有效）
+		auto: false
+	},
+	/**
+	 * 布局配置
+	 * */
+	// 侧边菜单宽度，单位 px，不可动态修改，需与 setting.less 的 @menuSideWidth 保持一致
+	menuSideWidth: 200,
+	layout: {
+		// 侧边栏风格，可选值为 dark 或 light
+		siderTheme: 'light',
+		// 顶栏风格，可选值为 light、dark 或 primary
+		headerTheme: 'primary',
+		// 顶栏是否置顶，开启后会覆盖侧边栏，需开启 headerFix
+		headerStick: true,
+		// 是否开启多 Tabs 页签
+		tabs: false,
+		// 多 Tabs 页签是否显示图标，开启 tabs 时有效
+		showTabsIcon: false,
+		// 是否固定多 Tabs 多页签
+		tabsFix: true,
+		// 是否固定侧边栏
+		siderFix: true,
+		// 是否固定顶栏
+		headerFix: true,
+		// 是否在下滑时隐藏顶栏，需开启 headerFix，如果开启了 tabsFix，Tabs 也会被隐藏
+		headerHide: false,
+		// 是否显示顶部菜单栏
+		// 一般来说，侧边的菜单栏足以满足大部分业务，如需动态切换侧边栏，可开启此选项启用顶部一级菜单，此时侧边栏将作为二级菜单
+		headerMenu: true,
+		// 侧边菜单栏是否开启手风琴模式
+		menuAccordion: true,
+		// 是否显示折叠侧边栏按钮，移动端下会自动强制开启
+		showSiderCollapse: true,
+		// 侧边菜单栏是否默认折起
+		menuCollapse: false,
+		// 侧边菜单折起时，是否在子菜单前显示父级菜单名称
+		showCollapseMenuTitle: false,
+		// 是否显示重载按钮
+		showReload: true,
+		// 是否显示搜索
+		showSearch: true,
+		// 是否显示通知
+		showNotice: true,
+		// 是否显示全屏
+		showFullscreen: true,
+		// 在手机访问时，是否在顶部显示小尺寸 logo
+		showMobileLogo: true,
+		// 是否显示全局面包屑，开启 headerMenu 时不可用
+		showBreadcrumb: true,
+		// 全局面包屑是否显示图标，开启 showBreadcrumb 时有效
+		showBreadcrumbIcon: true,
+		// 是否显示日志入口，开启与否，不影响日志记录，如不希望用户看到可关闭
+		showLog: false,
+		// 是否显示多语言
+		showI18n: false,
+		// 是否支持动态修改布局配置，移动端下会自动强制关闭
+		enableSetting: true,
+		// 退出登录时，是否二次确认
+		logoutConfirm: true
+	},
+	/**
+	 * 多页 Tabs
+	 * */
+	page: {
+		// 默认打开的页签
+		opened: [`${roterPre}/home`]
+	},
+	/**
+	 * 功能配置
+	 * */
+	// 相同路由，不同参数间进行切换，是否强力更新
+	sameRouteForceUpdate: false,
+	// 是否使用动态侧边菜单
+	dynamicSiderMenu: true
 };
 
-export default Setting;
+export default Setting;