1

+<script>
+export default {
+	onLaunch: function() {},
+	onShow: function() {},
+	onHide: function() {},
+	post: function(url, data) {
+		var promise = new Promise((resolve, reject) => {
+			//init
+			let that = this,
+				token = uni.getStorageSync('token'),
+				header = {
+					'token': token || ''
+				},
+				postData;
+			//网络请求
+			uni.request({
+				url: this.globalData.baseUrl + url,
+				data: data,
+				method: 'POST',
+				header: header,
+				success: function(res) {
+					//返回取得的数据
+					if (res.data.code == '1') {
+						resolve(res.data.data);
+					} else {
+						uni.showToast({
+							title: res.data.msg,
+							icon: 'none'
+						});
+						reject(res.data);
+					}
+				},
+				fail: function(e) {
+					reject('网络出错');
+					uni.hideNavigationBarLoading();
+				}
+			});
+		});
+		return promise;
+	},
+	globalData: {
+		userInfo: null,
+		baseUrl: 'https://cardxcx.w.broing.cn'
+	},
+	
+	
+	
+	
+
+	// 上传图片
+	upload(file) {
+		var promise = new Promise((resolve, reject) => {
+			let url = 'https://cardxcx.w.broing.cn/api/common/upload';
+			let head = {
+				'token': uni.getStorageSync('token'),
+			};
+			// let typename = {
+			// 	filetype: filetype  //其他参数
+			// };
+			uni.uploadFile({
+				url: url, //仅为示例，非真实的接口地址
+				filePath: file,
+				name: 'file',
+				header: head,
+				// formData: typename,
+				success: function(res) {
+					let temdata = JSON.parse(res.data);
+					let urlobj = {
+						url: temdata.data.url,
+					};
+					resolve(urlobj);
+					uni.hideNavigationBarLoading();
+					uni.hideLoading();
+				},
+				fail: function(res) {
+					reject('网络出错');
+					uni.hideNavigationBarLoading();
+					uni.hideLoading();
+				},
+				complete: () => {
+					uni.hideNavigationBarLoading();
+					uni.hideLoading();
+				}
+			});
+		});
+		return promise;
+	}
+};
+</script>
+
+<style >
+	/*每个页面公共css */
+	
+	image {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+	/* 布局 */
+	.layer_star {
+	    display: flex;
+	    display: -webkit-flex;
+		flex-direction: row;
+	    justify-content: flex-start;
+	    align-items: center
+	}
+	
+	.layer_nostar {
+	    display: flex;
+	    display: -webkit-flex;
+	    justify-content: flex-start;
+	}
+	
+	.layer_center {
+	    display: flex;
+	    display: -webkit-flex;
+	    justify-content: center;
+	    align-items: center
+	}
+	
+	.layer_nocenter {
+	    display: flex;
+	    display: -webkit-flex;
+	    justify-content: center;
+	}
+	
+	.layer_end {
+	    display: flex;
+	    display: -webkit-flex;
+	    justify-content: flex-end;
+	    align-items: center
+	}
+	
+	.layer_noend {
+	    display: flex;
+	    display: -webkit-flex;
+	    justify-content: flex-end;
+	}
+	
+	.layer_between {
+	    display: flex;
+	    display: -webkit-flex;
+	    justify-content: space-between;
+	    align-items: center
+	}
+	
+	.layer_nobetween {
+	    display: flex;
+	    display: -webkit-flex;
+	    justify-content: space-between;
+	}
+	
+	.flex_star {
+	    display: flex;
+	    display: -webkit-flex;
+	    flex-direction: column;
+	    align-items: flex-start
+	}
+	.flex_column_center{
+		display: flex;
+		display: -webkit-flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: center
+	}
+	.flex_column_nojustify{
+		display: flex;
+		display: -webkit-flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+	.flex_star_between {
+	    display: flex;
+	    display: -webkit-flex;
+	    flex-direction: column;
+		justify-content: space-between;
+	    align-items: flex-start
+	}
+	
+	.flex_center {
+	    display: flex;
+	    display: -webkit-flex;
+	    flex-direction: column;
+	    align-items: center;
+		justify-content: center;
+	}
+	.flex_warp {
+	    display: flex;
+	    display: -webkit-flex;
+	    flex-wrap: wrap;
+		align-items: center;
+		justify-content: center;
+	}
+	.flex_wrap_between{
+		display: flex;
+		display: -webkit-flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	.flex_wrap_no{
+		display: flex;
+		display: -webkit-flex;
+		flex-wrap: wrap;
+	}
+	/* 模态框 */
+	
+	.tx_mask {
+	    z-index: 99;
+	    width: 100%;
+	    height: 100vh;
+	    position: fixed;
+	    top: 0;
+		left: 0;
+	    background-color: rgba(0, 0, 0, 0.5);
+	}
+	.mask_content{
+		background-color: rgba(255,255,255,1);
+		width:686upx;
+		/* height:298upx; */
+		border-radius:16upx;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		z-index: 100;
+	} 
+	/* 购买弹窗 */
+	.mask_content_bottom{
+		background-color: #fff;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		z-index: 100;
+		width: 100%;
+	}
+	.over_hide{
+		height: 100vh;
+		overflow: hidden;
+	}
+	
+</style>

+<template>
+  <!--增加audio标签支持-->
+  <audio
+    :id="node.attr.id"
+    :class="node.classStr"
+    :style="node.styleStr"
+    :src="node.attr.src"
+    :loop="node.attr.loop"
+    :poster="node.attr.poster"
+    :name="node.attr.name"
+    :author="node.attr.author"
+    controls></audio>
+</template>
+
+<script>
+export default {
+  name: 'wxParseAudio',
+  props: {
+    node: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+};
+</script>

+<template>
+  <image
+    :mode="node.attr.mode"
+    :lazy-load="node.attr.lazyLoad"
+    :class="node.classStr"
+    :style="newStyleStr || node.styleStr"
+    :data-src="node.attr.src"
+    :src="node.attr.src"
+    @tap="wxParseImgTap"
+    @load="wxParseImgLoad"
+    />
+</template>
+
+<script>
+export default {
+  name: 'wxParseImg',
+  data() {
+    return {
+      newStyleStr: '',
+      preview: true,
+    };
+  },
+  props: {
+    node: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  methods: {
+    wxParseImgTap(e) {
+      if (!this.preview) return;
+      const { src } = e.currentTarget.dataset;
+      if (!src) return;
+      let parent = this.$parent;
+      while(!parent.preview || typeof parent.preview !== 'function') {// TODO 遍历获取父节点执行方法
+      	parent = parent.$parent;
+      }
+      parent.preview(src, e);
+    },
+    // 图片视觉宽高计算函数区
+    wxParseImgLoad(e) {
+      const { src } = e.currentTarget.dataset;
+      if (!src) return;
+      const { width, height } = e.mp.detail;
+      const recal = this.wxAutoImageCal(width, height);
+      const { imageheight, imageWidth } = recal;
+      const { padding, mode } = this.node.attr;
+      const { styleStr } = this.node;
+      const imageHeightStyle = mode === 'widthFix' ? '' : `height: ${imageheight}px;`;
+      this.newStyleStr = `${styleStr}; ${imageHeightStyle}; width: ${imageWidth}px; padding: 0 ${+padding}px;`;
+    },
+    // 计算视觉优先的图片宽高
+    wxAutoImageCal(originalWidth, originalHeight) {
+      // 获取图片的原始长宽
+      const { padding } = this.node.attr;
+      const windowWidth = this.node.$screen.width - (2 * padding);
+      const results = {};
+
+      if (originalWidth < 60 || originalHeight < 60) {
+        const { src } = this.node.attr;
+				let parent = this.$parent;
+				while(!parent.preview || typeof parent.preview !== 'function') {
+					parent = parent.$parent;
+				}
+				parent.removeImageUrl(src);
+        this.preview = false;
+      }
+
+      // 判断按照那种方式进行缩放
+      if (originalWidth > windowWidth) {
+        // 在图片width大于手机屏幕width时候
+        results.imageWidth = windowWidth;
+        results.imageheight = windowWidth * (originalHeight / originalWidth);
+      } else {
+        // 否则展示原来的数据
+        results.imageWidth = originalWidth;
+        results.imageheight = originalHeight;
+      }
+
+      return results;
+    },
+  },
+};
+</script>

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--table类型-->
+			<block v-else-if="node.tag == 'table'">
+				<view :class="node.classStr" class="table" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate1';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate0',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;// TODO currentTarget才有dataset
+				if (!href) return;
+				let parent = this.$parent;
+				while(!parent.preview || typeof parent.preview !== 'function') {// TODO 遍历获取父节点执行方法
+					parent = parent.$parent;
+				}
+				parent.navigate(href, e);
+			},
+		},
+	};
+</script>

+<template>
+	<view :class="(node.tag == 'li' ? node.classStr : (node.node==='text'?'text':''))">
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<!-- <view :class="node.classStr" :style="node.styleStr"> -->
+				<view :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate2';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate1',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				let parent = this.$parent;
+				while(!parent.preview || typeof parent.preview !== 'function') {
+					parent = parent.$parent;
+				}
+				parent.navigate(href, e);
+			},
+		},
+	};
+</script>

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate11';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate10',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				let parent = this.$parent;
+				while(!parent.preview || typeof parent.preview !== 'function') {
+					parent = parent.$parent;
+				}
+				parent.navigate(href, e);
+			},
+		},
+	};
+</script>

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<!--button类型-->
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					{{node.text}}
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					{{node.text}}
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					{{node.text}}
+				</view>
+			</block>
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate11',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				let parent = this.$parent;
+				while(!parent.preview || typeof parent.preview !== 'function') {
+					parent = parent.$parent;
+				}
+				parent.navigate(href, e);
+			},
+		},
+	};
+</script>

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate3';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate2',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				let parent = this.$parent;
+				while(!parent.preview || typeof parent.preview !== 'function') {
+					parent = parent.$parent;
+				}
+				parent.navigate(href, e);
+			},
+		},
+	};
+</script>

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate4';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate3',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				let parent = this.$parent;
+				while(!parent.preview || typeof parent.preview !== 'function') {
+					parent = parent.$parent;
+				}
+				parent.navigate(href, e);
+			},
+		},
+	};
+</script>

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate5';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate4',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				let parent = this.$parent;
+				while(!parent.preview || typeof parent.preview !== 'function') {
+					parent = parent.$parent;
+				}
+				parent.navigate(href, e);
+			},
+		},
+	};
+</script>

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate6';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate5',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				let parent = this.$parent;
+				while(!parent.preview || typeof parent.preview !== 'function') {
+					parent = parent.$parent;
+				}
+				parent.navigate(href, e);
+			},
+		},
+	};
+</script>

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate7';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate6',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				let parent = this.$parent;
+				while(!parent.preview || typeof parent.preview !== 'function') {
+					parent = parent.$parent;
+				}
+				parent.navigate(href, e);
+			},
+		},
+	};
+</script>

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate8';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate7',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				let parent = this.$parent;
+				while(!parent.preview || typeof parent.preview !== 'function') {
+					parent = parent.$parent;
+				}
+				parent.navigate(href, e);
+			},
+		},
+	};
+</script>

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate9';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate8',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				let parent = this.$parent;
+				while(!parent.preview || typeof parent.preview !== 'function') {
+					parent = parent.$parent;
+				}
+				parent.navigate(href, e);
+			},
+		},
+	};
+</script>

+<template>
+	<view>
+		<!--判断是否是标签节点-->
+		<block v-if="node.node == 'element'">
+			<block v-if="node.tag == 'button'">
+				<button type="default" size="mini">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</button>
+			</block>
+
+			<!--li类型-->
+			<block v-else-if="node.tag == 'li'">
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--video类型-->
+			<block v-else-if="node.tag == 'video'">
+				<wx-parse-video :node="node" />
+			</block>
+
+			<!--audio类型-->
+			<block v-else-if="node.tag == 'audio'">
+				<wx-parse-audio :node="node" />
+			</block>
+
+			<!--img类型-->
+			<block v-else-if="node.tag == 'img'">
+				<wx-parse-img :node="node" />
+			</block>
+
+			<!--a类型-->
+			<block v-else-if="node.tag == 'a'">
+				<view @click="wxParseATap" :class="node.classStr" :data-href="node.attr.href" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+			<!--br类型-->
+			<block v-else-if="node.tag == 'br'">
+				<text>\n</text>
+			</block>
+
+			<!--其他标签-->
+			<block v-else>
+				<view :class="node.classStr" :style="node.styleStr">
+					<block v-for="(node, index) of node.nodes" :key="index">
+						<wx-parse-template :node="node" />
+					</block>
+				</view>
+			</block>
+
+		</block>
+
+		<!--判断是否是文本节点-->
+		<block v-else-if="node.node == 'text'">{{node.text}}</block>
+	</view>
+</template>
+
+<script>
+	import wxParseTemplate from './wxParseTemplate10';
+	import wxParseImg from './wxParseImg';
+	import wxParseVideo from './wxParseVideo';
+	import wxParseAudio from './wxParseAudio';
+
+	export default {
+		name: 'wxParseTemplate9',
+		props: {
+			node: {},
+		},
+		components: {
+			wxParseTemplate,
+			wxParseImg,
+			wxParseVideo,
+			wxParseAudio,
+		},
+		methods: {
+			wxParseATap(e) {
+				const {
+					href
+				} = e.currentTarget.dataset;
+				if (!href) return;
+				let parent = this.$parent;
+				while(!parent.preview || typeof parent.preview !== 'function') {
+					parent = parent.$parent;
+				}
+				parent.navigate(href, e);
+			},
+		},
+	};
+</script>

+<template>
+  <!--增加video标签支持，并循环添加-->
+  <view :class="node.classStr" :style="node.styleStr">
+    <video :class="node.classStr" class="video-video" :src="node.attr.src"></video>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'wxParseVideo',
+  props: {
+    node: {},
+  },
+};
+</script>

+/**
+ * html2Json 改造来自: https://github.com/Jxck/html2json
+ *
+ *
+ * author: Di (微信小程序开发工程师)
+ * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
+ *               垂直微信小程序开发交流社区
+ *
+ * github地址: https://github.com/icindy/wxParse
+ *
+ * for: 微信小程序富文本解析
+ * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
+ */
+
+import wxDiscode from './wxDiscode';
+import HTMLParser from './htmlparser';
+
+function makeMap(str) {
+  const obj = {};
+  const items = str.split(',');
+  for (let i = 0; i < items.length; i += 1) obj[items[i]] = true;
+  return obj;
+}
+
+// Block Elements - HTML 5
+const block = makeMap('br,code,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video');
+
+// Inline Elements - HTML 5
+const inline = makeMap('a,abbr,acronym,applet,b,basefont,bdo,big,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var');
+
+// Elements that you can, intentionally, leave open
+// (and which close themselves)
+const closeSelf = makeMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr');
+
+function removeDOCTYPE(html) {
+  const isDocument = /<body.*>([^]*)<\/body>/.test(html);
+  return isDocument ? RegExp.$1 : html;
+}
+
+function trimHtml(html) {
+  return html
+    .replace(/<!--.*?-->/gi, '')
+    .replace(/\/\*.*?\*\//gi, '')
+    .replace(/[ ]+</gi, '<')
+    .replace(/<script[^]*<\/script>/gi, '')
+    .replace(/<style[^]*<\/style>/gi, '');
+}
+
+function getScreenInfo() {
+  const screen = {};
+  wx.getSystemInfo({
+    success: (res) => {
+      screen.width = res.windowWidth;
+      screen.height = res.windowHeight;
+    },
+  });
+  return screen;
+}
+
+function html2json(html, customHandler, imageProp, host) {
+  // 处理字符串
+  html = removeDOCTYPE(html);
+  html = trimHtml(html);
+  html = wxDiscode.strDiscode(html);
+  // 生成node节点
+  const bufArray = [];
+  const results = {
+    nodes: [],
+    imageUrls: [],
+  };
+
+	const screen = getScreenInfo();
+  function Node(tag) {
+    this.node = 'element';
+    this.tag = tag;
+		
+		this.$screen = screen;
+  }
+
+  HTMLParser(html, {
+    start(tag, attrs, unary) {
+      // node for this element
+      const node = new Node(tag);
+
+      if (bufArray.length !== 0) {
+        const parent = bufArray[0];
+        if (parent.nodes === undefined) {
+          parent.nodes = [];
+        }
+      }
+
+      if (block[tag]) {
+        node.tagType = 'block';
+      } else if (inline[tag]) {
+        node.tagType = 'inline';
+      } else if (closeSelf[tag]) {
+        node.tagType = 'closeSelf';
+      }
+
+      node.attr = attrs.reduce((pre, attr) => {
+        const { name } = attr;
+        let { value } = attr;
+        if (name === 'class') {
+          node.classStr = value;
+        }
+        // has multi attibutes
+        // make it array of attribute
+        if (name === 'style') {
+          node.styleStr = value;
+        }
+        if (value.match(/ /)) {
+          value = value.split(' ');
+        }
+
+        // if attr already exists
+        // merge it
+        if (pre[name]) {
+          if (Array.isArray(pre[name])) {
+            // already array, push to last
+            pre[name].push(value);
+          } else {
+            // single value, make it array
+            pre[name] = [pre[name], value];
+          }
+        } else {
+          // not exist, put it
+          pre[name] = value;
+        }
+
+        return pre;
+      }, {});
+
+      // 优化样式相关属性
+      if (node.classStr) {
+        node.classStr += ` ${node.tag}`;
+      } else {
+        node.classStr = node.tag;
+      }
+      if (node.tagType === 'inline') {
+        node.classStr += ' inline';
+      }
+
+      // 对img添加额外数据
+      if (node.tag === 'img') {
+        let imgUrl = node.attr.src;
+        imgUrl = wxDiscode.urlToHttpUrl(imgUrl, imageProp.domain);
+        Object.assign(node.attr, imageProp, {
+          src: imgUrl || '',
+        });
+        if (imgUrl) {
+          results.imageUrls.push(imgUrl);
+        }
+      }
+
+      // 处理a标签属性
+      if (node.tag === 'a') {
+        node.attr.href = node.attr.href || '';
+      }
+
+      // 处理font标签样式属性
+      if (node.tag === 'font') {
+        const fontSize = [
+          'x-small',
+          'small',
+          'medium',
+          'large',
+          'x-large',
+          'xx-large',
+          '-webkit-xxx-large',
+        ];
+        const styleAttrs = {
+          color: 'color',
+          face: 'font-family',
+          size: 'font-size',
+        };
+        if (!node.styleStr) node.styleStr = '';
+        Object.keys(styleAttrs).forEach((key) => {
+          if (node.attr[key]) {
+            const value = key === 'size' ? fontSize[node.attr[key] - 1] : node.attr[key];
+            node.styleStr += `${styleAttrs[key]}: ${value};`;
+          }
+        });
+      }
+
+      // 临时记录source资源
+      if (node.tag === 'source') {
+        results.source = node.attr.src;
+      }
+
+      if (customHandler.start) {
+        customHandler.start(node, results);
+      }
+
+      if (unary) {
+        // if this tag doesn't have end tag
+        // like <img src="hoge.png"/>
+        // add to parents
+        const parent = bufArray[0] || results;
+        if (parent.nodes === undefined) {
+          parent.nodes = [];
+        }
+        parent.nodes.push(node);
+      } else {
+        bufArray.unshift(node);
+      }
+    },
+    end(tag) {
+      // merge into parent tag
+      const node = bufArray.shift();
+      if (node.tag !== tag) {
+        console.error('invalid state: mismatch end tag');
+      }
+
+      // 当有缓存source资源时于于video补上src资源
+      if (node.tag === 'video' && results.source) {
+        node.attr.src = results.source;
+        delete results.source;
+      }
+
+      if (customHandler.end) {
+        customHandler.end(node, results);
+      }
+
+      if (bufArray.length === 0) {
+        results.nodes.push(node);
+      } else {
+        const parent = bufArray[0];
+        if (!parent.nodes) {
+          parent.nodes = [];
+        }
+        parent.nodes.push(node);
+      }
+    },
+    chars(text) {
+      if (!text.trim()) return;
+
+      const node = {
+        node: 'text',
+        text,
+      };
+
+      if (customHandler.chars) {
+        customHandler.chars(node, results);
+      }
+
+      if (bufArray.length === 0) {
+        results.nodes.push(node);
+      } else {
+        const parent = bufArray[0];
+        if (parent.nodes === undefined) {
+          parent.nodes = [];
+        }
+        parent.nodes.push(node);
+      }
+    },
+  });
+
+  return results;
+}
+
+export default html2json;

+/**
+ *
+ * htmlParser改造自: https://github.com/blowsie/Pure-JavaScript-HTML5-Parser
+ *
+ * author: Di (微信小程序开发工程师)
+ * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
+ *               垂直微信小程序开发交流社区
+ *
+ * github地址: https://github.com/icindy/wxParse
+ *
+ * for: 微信小程序富文本解析
+ * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
+ */
+// Regular Expressions for parsing tags and attributes
+
+const startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z0-9_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
+const endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/;
+const attr = /([a-zA-Z0-9_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g;
+
+function makeMap(str) {
+  const obj = {};
+  const items = str.split(',');
+  for (let i = 0; i < items.length; i += 1) obj[items[i]] = true;
+  return obj;
+}
+
+// Empty Elements - HTML 5
+const empty = makeMap('area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr');
+
+// Block Elements - HTML 5
+const block = makeMap('address,code,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video');
+
+// Inline Elements - HTML 5
+const inline = makeMap('a,abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var');
+
+// Elements that you can, intentionally, leave open
+// (and which close themselves)
+const closeSelf = makeMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr');
+
+// Attributes that have their values filled in disabled="disabled"
+const fillAttrs = makeMap('checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected');
+
+function HTMLParser(html, handler) {
+  let index;
+  let chars;
+  let match;
+  let last = html;
+  const stack = [];
+
+  stack.last = () => stack[stack.length - 1];
+
+  function parseEndTag(tag, tagName) {
+    // If no tag name is provided, clean shop
+    let pos;
+    if (!tagName) {
+      pos = 0;
+    } else {
+      // Find the closest opened tag of the same type
+      tagName = tagName.toLowerCase();
+      for (pos = stack.length - 1; pos >= 0; pos -= 1) {
+        if (stack[pos] === tagName) break;
+      }
+    }
+    if (pos >= 0) {
+      // Close all the open elements, up the stack
+      for (let i = stack.length - 1; i >= pos; i -= 1) {
+        if (handler.end) handler.end(stack[i]);
+      }
+
+      // Remove the open elements from the stack
+      stack.length = pos;
+    }
+  }
+
+  function parseStartTag(tag, tagName, rest, unary) {
+    tagName = tagName.toLowerCase();
+
+    if (block[tagName]) {
+      while (stack.last() && inline[stack.last()]) {
+        parseEndTag('', stack.last());
+      }
+    }
+
+    if (closeSelf[tagName] && stack.last() === tagName) {
+      parseEndTag('', tagName);
+    }
+
+    unary = empty[tagName] || !!unary;
+
+    if (!unary) stack.push(tagName);
+
+    if (handler.start) {
+      const attrs = [];
+
+      rest.replace(attr, function genAttr(matches, name) {
+        const value = arguments[2] || arguments[3] || arguments[4] || (fillAttrs[name] ? name : '');
+
+        attrs.push({
+          name,
+          value,
+          escaped: value.replace(/(^|[^\\])"/g, '$1\\"'), // "
+        });
+      });
+
+      if (handler.start) {
+        handler.start(tagName, attrs, unary);
+      }
+    }
+  }
+
+  while (html) {
+    chars = true;
+
+    if (html.indexOf('</') === 0) {
+      match = html.match(endTag);
+
+      if (match) {
+        html = html.substring(match[0].length);
+        match[0].replace(endTag, parseEndTag);
+        chars = false;
+      }
+
+      // start tag
+    } else if (html.indexOf('<') === 0) {
+      match = html.match(startTag);
+
+      if (match) {
+        html = html.substring(match[0].length);
+        match[0].replace(startTag, parseStartTag);
+        chars = false;
+      }
+    }
+
+    if (chars) {
+      index = html.indexOf('<');
+      let text = '';
+      while (index === 0) {
+        text += '<';
+        html = html.substring(1);
+        index = html.indexOf('<');
+      }
+      text += index < 0 ? html : html.substring(0, index);
+      html = index < 0 ? '' : html.substring(index);
+
+      if (handler.chars) handler.chars(text);
+    }
+
+    if (html === last) throw new Error(`Parse Error: ${html}`);
+    last = html;
+  }
+
+  // Clean up any remaining tags
+  parseEndTag();
+}
+
+export default HTMLParser;

+// HTML 支持的数学符号
+function strNumDiscode(str) {
+  str = str.replace(/∀/g, '∀');
+  str = str.replace(/∂/g, '∂');
+  str = str.replace(/∃/g, '∃');
+  str = str.replace(/∅/g, '∅');
+  str = str.replace(/∇/g, '∇');
+  str = str.replace(/∈/g, '∈');
+  str = str.replace(/∉/g, '∉');
+  str = str.replace(/∋/g, '∋');
+  str = str.replace(/∏/g, '∏');
+  str = str.replace(/∑/g, '∑');
+  str = str.replace(/−/g, '−');
+  str = str.replace(/∗/g, '∗');
+  str = str.replace(/√/g, '√');
+  str = str.replace(/∝/g, '∝');
+  str = str.replace(/∞/g, '∞');
+  str = str.replace(/∠/g, '∠');
+  str = str.replace(/∧/g, '∧');
+  str = str.replace(/∨/g, '∨');
+  str = str.replace(/∩/g, '∩');
+  str = str.replace(/∪/g, '∪');
+  str = str.replace(/∫/g, '∫');
+  str = str.replace(/∴/g, '∴');
+  str = str.replace(/∼/g, '∼');
+  str = str.replace(/≅/g, '≅');
+  str = str.replace(/≈/g, '≈');
+  str = str.replace(/≠/g, '≠');
+  str = str.replace(/≤/g, '≤');
+  str = str.replace(/≥/g, '≥');
+  str = str.replace(/⊂/g, '⊂');
+  str = str.replace(/⊃/g, '⊃');
+  str = str.replace(/⊄/g, '⊄');
+  str = str.replace(/⊆/g, '⊆');
+  str = str.replace(/⊇/g, '⊇');
+  str = str.replace(/⊕/g, '⊕');
+  str = str.replace(/⊗/g, '⊗');
+  str = str.replace(/⊥/g, '⊥');
+  str = str.replace(/⋅/g, '⋅');
+  return str;
+}
+
+// HTML 支持的希腊字母
+function strGreeceDiscode(str) {
+  str = str.replace(/Α/g, 'Α');
+  str = str.replace(/Β/g, 'Β');
+  str = str.replace(/Γ/g, 'Γ');
+  str = str.replace(/Δ/g, 'Δ');
+  str = str.replace(/Ε/g, 'Ε');
+  str = str.replace(/Ζ/g, 'Ζ');
+  str = str.replace(/Η/g, 'Η');
+  str = str.replace(/Θ/g, 'Θ');
+  str = str.replace(/Ι/g, 'Ι');
+  str = str.replace(/Κ/g, 'Κ');
+  str = str.replace(/Λ/g, 'Λ');
+  str = str.replace(/Μ/g, 'Μ');
+  str = str.replace(/Ν/g, 'Ν');
+  str = str.replace(/Ξ/g, 'Ν');
+  str = str.replace(/Ο/g, 'Ο');
+  str = str.replace(/Π/g, 'Π');
+  str = str.replace(/Ρ/g, 'Ρ');
+  str = str.replace(/Σ/g, 'Σ');
+  str = str.replace(/Τ/g, 'Τ');
+  str = str.replace(/Υ/g, 'Υ');
+  str = str.replace(/Φ/g, 'Φ');
+  str = str.replace(/Χ/g, 'Χ');
+  str = str.replace(/Ψ/g, 'Ψ');
+  str = str.replace(/Ω/g, 'Ω');
+
+  str = str.replace(/α/g, 'α');
+  str = str.replace(/β/g, 'β');
+  str = str.replace(/γ/g, 'γ');
+  str = str.replace(/δ/g, 'δ');
+  str = str.replace(/ε/g, 'ε');
+  str = str.replace(/ζ/g, 'ζ');
+  str = str.replace(/η/g, 'η');
+  str = str.replace(/θ/g, 'θ');
+  str = str.replace(/ι/g, 'ι');
+  str = str.replace(/κ/g, 'κ');
+  str = str.replace(/λ/g, 'λ');
+  str = str.replace(/μ/g, 'μ');
+  str = str.replace(/ν/g, 'ν');
+  str = str.replace(/ξ/g, 'ξ');
+  str = str.replace(/ο/g, 'ο');
+  str = str.replace(/π/g, 'π');
+  str = str.replace(/ρ/g, 'ρ');
+  str = str.replace(/ς/g, 'ς');
+  str = str.replace(/σ/g, 'σ');
+  str = str.replace(/τ/g, 'τ');
+  str = str.replace(/υ/g, 'υ');
+  str = str.replace(/φ/g, 'φ');
+  str = str.replace(/χ/g, 'χ');
+  str = str.replace(/ψ/g, 'ψ');
+  str = str.replace(/ω/g, 'ω');
+  str = str.replace(/ϑ/g, 'ϑ');
+  str = str.replace(/ϒ/g, 'ϒ');
+  str = str.replace(/ϖ/g, 'ϖ');
+  str = str.replace(/·/g, '·');
+  return str;
+}
+
+function strcharacterDiscode(str) {
+  // 加入常用解析
+  str = str.replace(/ /g, ' ');
+  str = str.replace(/ /g, ' ');
+  str = str.replace(/ /g, '　');
+  str = str.replace(/"/g, "'");
+  str = str.replace(/&/g, '&');
+  str = str.replace(/&lt;/g, '<');
+  str = str.replace(/&gt;/g, '>');
+  str = str.replace(/&#8226;/g, '•');
+
+  return str;
+}
+
+// HTML 支持的其他实体
+function strOtherDiscode(str) {
+  str = str.replace(/&OElig;/g, 'Œ');
+  str = str.replace(/&oelig;/g, 'œ');
+  str = str.replace(/&Scaron;/g, 'Š');
+  str = str.replace(/&scaron;/g, 'š');
+  str = str.replace(/&Yuml;/g, 'Ÿ');
+  str = str.replace(/&fnof;/g, 'ƒ');
+  str = str.replace(/&circ;/g, 'ˆ');
+  str = str.replace(/&tilde;/g, '˜');
+  str = str.replace(/&ensp;/g, '');
+  str = str.replace(/&emsp;/g, '');
+  str = str.replace(/&thinsp;/g, '');
+  str = str.replace(/&zwnj;/g, '');
+  str = str.replace(/&zwj;/g, '');
+  str = str.replace(/&lrm;/g, '');
+  str = str.replace(/&rlm;/g, '');
+  str = str.replace(/&ndash;/g, '–');
+  str = str.replace(/&mdash;/g, '—');
+  str = str.replace(/&lsquo;/g, '‘');
+  str = str.replace(/&rsquo;/g, '’');
+  str = str.replace(/&sbquo;/g, '‚');
+  str = str.replace(/&ldquo;/g, '“');
+  str = str.replace(/&rdquo;/g, '”');
+  str = str.replace(/&bdquo;/g, '„');
+  str = str.replace(/&dagger;/g, '†');
+  str = str.replace(/&Dagger;/g, '‡');
+  str = str.replace(/&bull;/g, '•');
+  str = str.replace(/&hellip;/g, '…');
+  str = str.replace(/&permil;/g, '‰');
+  str = str.replace(/&prime;/g, '′');
+  str = str.replace(/&Prime;/g, '″');
+  str = str.replace(/&lsaquo;/g, '‹');
+  str = str.replace(/&rsaquo;/g, '›');
+  str = str.replace(/&oline;/g, '‾');
+  str = str.replace(/&euro;/g, '€');
+  str = str.replace(/&trade;/g, '™');
+
+  str = str.replace(/&larr;/g, '←');
+  str = str.replace(/&uarr;/g, '↑');
+  str = str.replace(/&rarr;/g, '→');
+  str = str.replace(/&darr;/g, '↓');
+  str = str.replace(/&harr;/g, '↔');
+  str = str.replace(/&crarr;/g, '↵');
+  str = str.replace(/&lceil;/g, '⌈');
+  str = str.replace(/&rceil;/g, '⌉');
+
+  str = str.replace(/&lfloor;/g, '⌊');
+  str = str.replace(/&rfloor;/g, '⌋');
+  str = str.replace(/&loz;/g, '◊');
+  str = str.replace(/&spades;/g, '♠');
+  str = str.replace(/&clubs;/g, '♣');
+  str = str.replace(/&hearts;/g, '♥');
+
+  str = str.replace(/&diams;/g, '♦');
+  str = str.replace(/&#39;/g, "'");
+  return str;
+}
+
+function strDiscode(str) {
+  str = strNumDiscode(str);
+  str = strGreeceDiscode(str);
+  str = strcharacterDiscode(str);
+  str = strOtherDiscode(str);
+  return str;
+}
+
+function urlToHttpUrl(url, domain) {
+  if (/^\/\//.test(url)) {
+    return `https:${url}`;
+  } else if (/^\//.test(url)) {
+    return `https://${domain}${url}`;
+  }
+  return url;
+}
+
+export default {
+  strDiscode,
+  urlToHttpUrl,
+};

+## uParse 适用于 uni-app/mpvue 的富文本解析组件
+
+> 支持 Html、Markdown 解析，Fork自: [mpvue-wxParse](https://github.com/F-loat/mpvue-wxParse)
+
+
+## 属性
+
+| 名称             | 类型          | 默认值        | 描述               |
+| -----------------|--------------- | ------------- | ----------------  |
+| loading          | Boolean        | false         | 数据加载状态       |
+| className        | String         | —             | 自定义 class 名称  |
+| content          | String         | —             | 渲染内容           |
+| noData           | String         | 数据不能为空   | 空数据时的渲染展示  |
+| startHandler     | Function       | 见源码         | 自定义 parser 函数 |
+| endHandler       | Function       | null          | 自定义 parser 函数 |
+| charsHandler     | Function       | null          | 自定义 parser 函数 |
+| imageProp        | Object         | 见下文        | 图片相关参数        |
+
+### 自定义 parser 函数具体介绍
+
+* 传入的参数为当前节点 `node` 对象及解析结果 `results` 对象，例如 `startHandler(node, results)`
+* 无需返回值，通过对传入的参数直接操作来完成需要的改动
+* 自定义函数会在原解析函数处理之后执行
+
+### imageProp 对象具体属性
+
+| 名称              | 类型           | 默认值        | 描述                |
+| -----------------|--------------- | ------------- | ------------------ |
+| mode             | String         | 'aspectFit'   | 图片裁剪、缩放的模式 |
+| padding          | Number         | 0             | 图片内边距          |
+| lazyLoad         | Boolean        | false         | 图片懒加载          |
+| domain           | String         | ''            | 图片服务域名        |
+
+## 事件
+
+| 名称             | 参数              | 描述              |
+| -----------------|----------------- | ----------------  |
+| preview          | 图片地址，原始事件 | 预览图片时触发     |
+| navigate         | 链接地址，原始事件 | 点击链接时触发     |
+
+## 基本使用方法
+
+
+``` vue
+<template>
+  <div>
+    <u-parse :content="article" @preview="preview" @navigate="navigate" />
+  </div>
+</template>
+
+<script>
+import uParse from '@/components/u-parse/u-parse.vue'
+
+export default {
+  components: {
+    uParse
+  },
+  data () {
+    return {
+      article: '<div>我是HTML代码</div>'
+    }
+  },
+  methods: {
+    preview(src, e) {
+      // do something
+    },
+    navigate(href, e) {
+      // do something
+    }
+  }
+}
+</script>
+
+<style>
+@import url("@/components/u-parse/u-parse.css");
+</style>
+```
+
+
+## 渲染 Markdown
+
+> 先将 markdown 转换为 html 即可
+
+```
+npm install marked
+```
+
+``` js
+import marked from 'marked'
+import uParse from '@/components/u-parse/u-parse.vue'
+
+export default {
+  components: {
+    uParse
+  },
+  data () {
+    return {
+      article: marked(`#hello, markdown!`)
+    }
+  }
+}
+```

+/**
+ * author: Di (微信小程序开发工程师)
+ * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
+ *         垂直微信小程序开发交流社区
+ *
+ * github地址: https://github.com/icindy/wxParse
+ *
+ * for: 微信小程序富文本解析
+ * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
+ */
+
+.wxParse {
+  width: 100%;
+  font-family: Helvetica, sans-serif;
+  font-size: 30upx;
+  color: #666;
+  line-height: 1.8;
+}
+
+.wxParse view {
+  word-break: hyphenate;
+}
+
+.wxParse .inline {
+  display: inline;
+  margin: 0;
+  padding: 0;
+}
+
+.wxParse .div {
+  margin: 0;
+  padding: 0;
+}
+
+.wxParse .h1 .text {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+.wxParse .h2 .text {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+.wxParse .h3 .text {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+.wxParse .h4 .text {
+  margin: 1.33em 0;
+}
+.wxParse .h5 .text {
+  font-size: 0.83em;
+  margin: 1.67em 0;
+}
+.wxParse .h6 .text {
+  font-size: 0.67em;
+  margin: 2.33em 0;
+}
+
+.wxParse .h1 .text,
+.wxParse .h2 .text,
+.wxParse .h3 .text,
+.wxParse .h4 .text,
+.wxParse .h5 .text,
+.wxParse .h6 .text,
+.wxParse .b,
+.wxParse .strong {
+  font-weight: bolder;
+}
+
+
+.wxParse .p {
+  margin: 1em 0;
+}
+
+.wxParse .i,
+.wxParse .cite,
+.wxParse .em,
+.wxParse .var,
+.wxParse .address {
+  font-style: italic;
+}
+
+.wxParse .pre,
+.wxParse .tt,
+.wxParse .code,
+.wxParse .kbd,
+.wxParse .samp {
+  font-family: monospace;
+}
+.wxParse .pre {
+  overflow: auto;
+  background: #f5f5f5;
+  padding: 16upx;
+  white-space: pre;
+  margin: 1em 0upx;
+}
+.wxParse .code {
+  display: inline;
+  background: #f5f5f5;
+}
+
+.wxParse .big {
+  font-size: 1.17em;
+}
+
+.wxParse .small,
+.wxParse .sub,
+.wxParse .sup {
+  font-size: 0.83em;
+}
+
+.wxParse .sub {
+  vertical-align: sub;
+}
+.wxParse .sup {
+  vertical-align: super;
+}
+
+.wxParse .s,
+.wxParse .strike,
+.wxParse .del {
+  text-decoration: line-through;
+}
+
+.wxParse .strong,
+.wxParse .s {
+  display: inline;
+}
+
+.wxParse .a {
+  color: deepskyblue;
+}
+
+.wxParse .video {
+  text-align: center;
+  margin: 22upx 0;
+}
+
+.wxParse .video-video {
+  width: 100%;
+}
+
+.wxParse .img {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.wxParse .blockquote {
+  margin: 10upx 0;
+  padding: 22upx 0 22upx 22upx;
+  font-family: Courier, Calibri, "宋体";
+  background: #f5f5f5;
+  border-left: 6upx solid #dbdbdb;
+}
+.wxParse .blockquote .p {
+  margin: 0;
+}
+
+.wxParse .ul, .wxParse .ol {
+  display: block;
+  margin: 1em 0;
+  padding-left: 33upx;
+}
+.wxParse .ol {
+  list-style-type: disc;
+}
+.wxParse .ol {
+  list-style-type: decimal;
+}
+.wxParse .ol>weixin-parse-template,.wxParse .ul>weixin-parse-template {
+  display: list-item;
+  align-items: baseline;
+  text-align: match-parent;
+}
+
+.wxParse .ol>.li,.wxParse .ul>.li {
+  display: list-item;
+  align-items: baseline;
+  text-align: match-parent;
+}
+.wxParse .ul .ul, .wxParse .ol .ul {
+  list-style-type: circle;
+}
+.wxParse .ol .ol .ul, .wxParse .ol .ul .ul, .wxParse .ul .ol .ul, .wxParse .ul .ul .ul {
+    list-style-type: square;
+}
+
+.wxParse .u {
+  text-decoration: underline;
+}
+.wxParse .hide {
+  display: none;
+}
+.wxParse .del {
+  display: inline;
+}
+.wxParse .figure {
+  overflow: hidden;
+}
+
+.wxParse .table {
+  width: 100%;
+}
+.wxParse .thead, .wxParse .tfoot, .wxParse .tr {
+  display: flex;
+  flex-direction: row;
+}
+.wxParse .tr {
+  width:100%;
+  display: flex;
+  border-right: 2upx solid #e0e0e0;
+  border-bottom: 2upx solid #e0e0e0;
+}
+.wxParse .th,
+.wxParse .td {
+  display: flex;
+  width: 1276upx;
+  overflow: auto;
+  flex: 1;
+  padding: 11upx;
+  border-left: 2upx solid #e0e0e0;
+}
+.wxParse .td:last {
+  border-top: 2upx solid #e0e0e0;
+}
+.wxParse .th {
+  background: #f0f0f0;
+  border-top: 2upx solid #e0e0e0;
+}

+<!--**
+ * forked from：https://github.com/F-loat/mpvue-wxParse
+ *
+ * github地址: https://github.com/dcloudio/uParse
+ *
+ * for: uni-app框架下 富文本解析
+ */-->
+
+<template>
+<!--基础元素-->
+<div class="wxParse" :class="className" v-if="!loading">
+  <block v-for="(node,index) of nodes" :key="index">
+    <wxParseTemplate :node="node" />
+  </block>
+</div>
+</template>
+
+<script>
+import HtmlToJson from './libs/html2json';
+import wxParseTemplate from './components/wxParseTemplate0';
+
+export default {
+  name: 'wxParse',
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    noData: {
+      type: String,
+      default: '<div style="color: red;">数据不能为空</div>',
+    },
+    startHandler: {
+      type: Function,
+      default() {
+        return (node) => {
+          node.attr.class = null;
+          node.attr.style = null;
+        };
+      },
+    },
+    endHandler: {
+      type: Function,
+      default: null,
+    },
+    charsHandler: {
+      type: Function,
+      default: null,
+    },
+    imageProp: {
+      type: Object,
+      default() {
+        return {
+          mode: 'aspectFit',
+          padding: 0,
+          lazyLoad: false,
+          domain: '',
+        };
+      },
+    },
+  },
+  components: {
+    wxParseTemplate,
+  },
+  data() {
+    return {
+      imageUrls: [],
+    };
+  },
+  computed: {
+    nodes() {
+      const {
+        content,
+        noData,
+        imageProp,
+        startHandler,
+        endHandler,
+        charsHandler,
+      } = this;
+      const parseData = content || noData;
+      const customHandler = {
+        start: startHandler,
+        end: endHandler,
+        chars: charsHandler,
+      };
+      const results = HtmlToJson(parseData, customHandler, imageProp, this);
+      this.imageUrls = results.imageUrls;
+      console.log(results)
+      return results.nodes;
+    },
+  },
+  methods: {
+    navigate(href, $event) {
+      this.$emit('navigate', href, $event);
+    },
+    preview(src, $event) {
+      if (!this.imageUrls.length) return;
+      wx.previewImage({
+        current: src,
+        urls: this.imageUrls,
+      });
+      this.$emit('preview', src, $event);
+    },
+    removeImageUrl(src) {
+      const { imageUrls } = this;
+      imageUrls.splice(imageUrls.indexOf(src), 1);
+    },
+  },
+};
+</script>

+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+App.mpType = 'app'
+
+const app = new Vue({
+    ...App
+})
+app.$mount()

+{
+    "name" : "card",
+    "appid" : "__UNI__C5AC020",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueCompiler" : "uni-app",
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {}
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "wx5282e7febc772e8c",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    }
+}

+{
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		// 首页
+		{ 
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "轴承名片网",
+				"navigationBarBackgroundColor": "#fff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		// 名片列表
+		{
+			"path": "pages/index/cardList",
+			"style": {
+				"navigationBarTitleText": "名片列表",
+				"navigationBarBackgroundColor": "#fff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		// 搜索结果
+		{
+			"path": "pages/index/search",
+			"style": {
+				"navigationBarTitleText": "搜索",
+				"navigationBarBackgroundColor": "#fff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		// 名片详情
+		{
+			"path": "pages/index/cardDetail",
+			"style": {
+				"navigationBarTitleText": "轴承名片网",
+				"navigationBarBackgroundColor": "#fff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		// 我的名片 
+		{
+			"path": "pages/card/card",
+			"style": {
+				"navigationBarTitleText": "轴承名片网",
+				"navigationBarBackgroundColor": "#fff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		// 添加名片
+		{
+			"path": "pages/card/addCard",
+			"style": {
+				"navigationBarTitleText": "发布名片",
+				"navigationBarBackgroundColor": "#fff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		// 编辑名片
+		{
+			"path": "pages/card/editorCard",
+			"style": {
+				"navigationBarTitleText": "编辑名片",
+				"navigationBarBackgroundColor": "#fff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		// 我的收藏
+		{
+			"path": "pages/collect/collect",
+			"style": {
+				"navigationBarTitleText": "名片收藏",
+				"navigationBarBackgroundColor": "#fff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		// 会员中心
+		{
+			"path": "pages/vip/vip",
+			"style": {
+				"navigationBarTitleText": "会员中心",
+				"navigationBarBackgroundColor": "#fff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		// 我的会员
+		{
+			"path": "pages/vip/myVip",
+			"style": {
+				"navigationBarTitleText": "我的会员",
+				"navigationBarBackgroundColor": "#fff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		// 我的充值
+		{
+			"path": "pages/vip/recharge",
+			"style": {
+				"navigationBarTitleText": "我的充值",
+				"navigationBarBackgroundColor": "#fff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		// 联系客服
+		{
+			"path": "pages/vip/contactService",
+			"style": {
+				"navigationBarTitleText": "联系客服",
+				"navigationBarBackgroundColor": "#fff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		// 关于我们
+		{
+			"path": "pages/vip/aboutUs",
+			"style": {
+				"navigationBarTitleText": "关于我们",
+				"navigationBarBackgroundColor": "#fff",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		// 授权登录
+		{
+			"path": "pages/start/start",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationBarBackgroundColor": "#fff",
+				"navigationBarTextStyle": "black"
+			}
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "uni-app",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8"
+	},
+	"tabBar": {
+	    "color": "#8C9198",
+	    "selectedColor": "#0083FB",
+	    "borderStyle": "black",
+	    "backgroundColor": "#ffffff",
+	    "list": [{
+	        "pagePath": "pages/index/index",
+	        "iconPath": "static/noindex1.png",
+	        "selectedIconPath": "static/index1.png",
+	        "text": "首页"
+	    }, {
+	        "pagePath": "pages/card/card",
+	        "iconPath": "static/nocard1.png",
+	        "selectedIconPath": "static/card1.png",
+	        "text": "我的名片"
+	    },{
+	        "pagePath": "pages/collect/collect",
+	        "iconPath": "static/nocollect1.png",
+	        "selectedIconPath": "static/collect1.png",
+	        "text": "我的收藏"
+	    }, {
+	        "pagePath": "pages/vip/vip",
+	        "iconPath": "static/novip1.png",
+	        "selectedIconPath": "static/vip1.png",
+	        "text": "会员中心"
+	    }]
+	}
+}

+<template>
+	<view class="add_card" :class="{ over_hide: isHide }">
+		<!-- 名片信息 -->
+		<view class="add_card_top">
+			<!-- 正反面 -->
+			<view class="add_card_single">
+				<view class="card_front flex_center" @click="uploadPositive()">
+					<view class="show_img" v-if="front_image"><image :src="front_image" mode="aspectFill"></image></view>
+					<view class="flex_center" v-else>
+						<view class="card_upload"><image src="../../static/add.png" mode=""></image></view>
+						<view class="card_tips">上传名片正面图片</view>
+					</view>
+				</view>
+				<view class="card_front flex_center" @click="uploadSide()">
+					<view class="show_img" v-if="reverse_image"><image :src="reverse_image" mode="aspectFill"></image></view>
+					<view class="flex_center" v-else>
+						<view class="card_upload"><image src="../../static/add.png" mode=""></image></view>
+						<view class="card_tips">上传名片背面图片</view>
+					</view>
+				</view>
+				<view class="upload_tips">建议名片尺寸为360*210像素 </view>
+				<view class="msg_single layer_between">
+					<view class="single_l">公司名称：</view>
+					<input class="single_r" type="text" v-model="company_name" placeholder="请输入公司名称" />
+				</view>
+			</view>
+			<!-- 公司简介 -->
+			
+			<view class="add_card_single">
+				<view class="msg_single">
+					<view class="single_l">公司简介：</view>
+					<textarea v-model="brief" placeholder="请输入公司简介" maxlength="2000"/>
+					<view class="layer_nostar flex_wrap_no">
+						<view class="wx_code" v-for="(item, index) in brief_images" :key="index">
+							<image :src="item" mode=""></image>
+							<image @click="deleteCompany(index)" class="cancle_icon" src="../../static/del_icon@2x.png" mode=""></image>
+						</view>
+						<view class="wx_code" @click="uploadCompay()"><image src="../../static/add_wx.png" mode=""></image></view>
+					</view>
+				</view>
+			</view>
+			<!-- 经营范围 -->
+			<view class="add_card_single">
+				<view class="msg_single">
+					<view class="single_l">经营范围：</view>
+					<textarea v-model="scope" placeholder="请输入经营范围" maxlength="2000"/>
+					<view class="layer_nostar flex_wrap_no">
+						<view class="wx_code" v-for="(item, index) in scope_images" :key="index">
+							<image :src="item" mode=""></image>
+							<image @click="deleteScope(index)" class="cancle_icon" src="../../static/del_icon@2x.png" mode=""></image>
+						</view>
+						<view class="wx_code" @click="uploadBusiness()"><image src="../../static/add_wx.png" mode=""></image></view>
+					</view>
+				</view>
+			</view>
+			<!-- 各种联系方式 -->
+			<view class="add_card_single">
+				<view class="msg_single layer_between">
+					<view class="single_l">联系人：</view>
+					<input class="single_r" type="text" v-model="name" placeholder="请输入联系人" />
+				</view>
+			</view>
+			<view class="add_card_single">
+				<view class="msg_single layer_between">
+					<view class="single_l">地址：</view>
+					<input class="single_r" type="text" v-model="site" placeholder="请输入地址" />
+				</view>
+			</view>
+			<view class="add_card_single">
+				<view class="msg_single layer_between">
+					<view class="single_l">电话：</view>
+					<input class="single_r" type="text" v-model="phone" placeholder="请输入电话" />
+				</view>
+			</view>
+			<view class="add_card_single">
+				<view class="msg_single layer_between">
+					<view class="single_l">传真：</view>
+					<input class="single_r" type="text" v-model="fax" placeholder="请输入传真" />
+				</view>
+			</view>
+			<view class="add_card_single">
+				<view class="msg_single layer_between">
+					<view class="single_l">手机号：</view>
+					<input class="single_r" maxlength="11" type="text" v-model="mobile" placeholder="请输入手机号" />
+				</view>
+			</view>
+			<view class="add_card_single">
+				<view class="msg_single layer_between">
+					<view class="single_l">QQ：</view>
+					<input class="single_r" type="text" v-model="qq" placeholder="请输入QQ号" />
+				</view>
+			</view>
+			<view class="add_card_single">
+				<view class="msg_single layer_between">
+					<view class="single_l">微信：</view>
+					<input class="single_r" type="text" v-model="wechat" placeholder="请输入微信" />
+				</view>
+			</view>
+			<view class="add_card_single">
+				<view class="msg_single">
+					<view class="single_l">微信二维码：</view>
+					<view class="layer_nostar" @click="uploadCode()">
+						<view class="wx_img" v-if="weichat_image"><image :src="weichat_image" mode=""></image></view>
+						<view class="wx_code" v-else><image src="../../static/add_wx.png" mode=""></image></view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 名片分类 -->
+		
+		<view class="add_card_classify">
+			<view class="classify_title">
+				名片分类：
+				<text>（可选择{{ category_num }}个名片分类）</text>
+			</view>
+			<view class="classify_tips">想要增加更多分类，请提交名片升级成VIP后到会员中心增加</view>
+			<!-- 轴承列表 -->
+			<view class="bearing_classify layer_nostar">
+				<!-- 左侧类目 -->
+				<view class="bearing_l">
+					<view class="bear_l_box flex_column_center">
+						<view
+							class="bear_l_single flex_warp"
+							:class="{ bear_l_active: isLeft == item.id }"
+							v-for="(item, index) in leftList"
+							:key="index"
+							@click="changeLeft(item, index)"
+						>
+							<view class="bear_l_child">{{ item.name }}</view>
+						</view>
+					</view>
+				</view>
+				<!-- 右侧具体分类 -->
+				<view class="bearing_r">
+					<view class="bear_r_box">
+						<view class="bear_r_single" :class="{ bear_r_active: item.isChoice }" v-for="(item, index) in rightList" :key="index" @click="changeRight(item, index)">
+							{{ item.name }}
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 提交名片 -->
+		<view class="submit_btn" @click="submitCard()">提交名片</view>
+		<!-- 提交弹窗 -->
+		<view class="tx_mask" v-if="isHide" @click="closeDialog()"></view>
+		<view class="mask_content" v-if="isHide">
+			<view class="mask_top">成为VIP会员，其他用户可以搜索到您的名片</view>
+			<view class="mask_bottom" @click="getNow()">立即获取</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import App from '../../App.vue';
+export default {
+	data() {
+		return {
+			front_image: '', //正面图片
+			reverse_image: '', //反面图片
+			company_name: '', //公司名称
+			brief: '', //公司简介
+			brief_images: [], //公司简介图片
+			scope: '', //经营范围
+			scope_images: [], //经营范围图片
+			name: '', //联系人
+			phone: '', //电话
+			site: '', //地址
+			mobile: '', //手机号
+			fax: '', //传真
+			qq: '', //	QQ
+			wechat: '', //微信
+			weichat_image: '', //微信二维码
+			category_ids: [], //分类ID
+			category_num: '', //可选分类个数
+			// 轴承列表
+			// 左侧
+			leftList: [],
+			isLeft: 0,
+			// 右侧
+			rightList: [],
+			isRight: 0,
+			// 弹窗
+			isHide: false,
+			// 是否为vip 1:是  2:否
+			isVip: '',
+			// 防连点
+			isClick:false,
+			imgBrief: [], //公司简介上传数量
+			imgScope: []
+		};
+	},
+	methods: {
+		// 上传正面图片
+		uploadPositive() {
+			let t = this;
+			uni.chooseImage({
+				count: 1, //默认9
+				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album'], //从相册选择
+				success: chooseImageRes => {
+					const tempFilePaths = chooseImageRes.tempFilePaths;
+					App.upload(tempFilePaths[0]).then(res => {
+						this.front_image = res.url;
+					});
+				}
+			});
+		},
+		// 上传反面图片
+		uploadSide() {
+			let t = this; 
+			uni.chooseImage({
+				count: 1, //默认9
+				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album'], //从相册选择
+				success: chooseImageRes => {
+					const tempFilePaths = chooseImageRes.tempFilePaths;
+					App.upload(tempFilePaths[0]).then(res => {
+						this.reverse_image = res.url;
+					});
+				}
+			});
+		},
+		// 上传公司简介图片
+		uploadCompay() {
+			let t = this;
+			uni.chooseImage({
+				count: 3, //默认9
+				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album'], //从相册选择
+				success: chooseImageRes => {
+					const tempFilePaths = chooseImageRes.tempFilePaths;
+					t.imgBrief = [...t.imgBrief,...tempFilePaths]
+					if(t.imgBrief.length>3){
+						uni.showToast({
+							title: '图片总数超过3张',
+							icon: 'none'
+						});
+						return false;
+					}
+					tempFilePaths.forEach(el => {
+						App.upload(el).then(res => {
+							t.brief_images.push(res.url);
+						});
+					});
+				}
+			});
+		},
+		// 上传经营范围图片
+		uploadBusiness() {
+			let t = this;
+			uni.chooseImage({
+				count: 3, //默认9
+				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album'], //从相册选择
+				success: chooseImageRes => {
+					const tempFilePaths = chooseImageRes.tempFilePaths;
+					t.imgScope = [...t.imgScope, ...tempFilePaths];
+					if (t.imgScope.length > 3) {
+						uni.showToast({
+							title: '图片总数超过3张',
+							icon: 'none'
+						});
+						return false;
+					}
+					tempFilePaths.forEach(el => {
+						App.upload(el).then(res => {
+							t.scope_images.push(res.url);
+						});
+					});
+				}
+			});
+		},
+		// 删除公司简介图片
+		deleteCompany(index){
+			this.imgBrief.splice(index, 1);
+			this.brief_images.splice(index,1)
+		},
+		// 删除经营范围图片
+		deleteScope(index){
+			this.imgBrief.splice(index, 1);
+			this.scope_images.splice(index,1)
+		},
+		// 上传二维码
+		uploadCode() {
+			let t = this;
+			uni.chooseImage({
+				count: 1, //默认9
+				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album'], //从相册选择
+				success: chooseImageRes => {
+					const tempFilePaths = chooseImageRes.tempFilePaths;
+					App.upload(tempFilePaths[0]).then(res => {
+						t.weichat_image = res.url;
+					});
+				}
+			});
+		},
+		// 首页分类数据 左侧一级分类
+		getType() {
+			let t = this;
+			t.leftList = [];
+			t.rightList = [];
+			let url = '/api/category/get_category_one';
+			App.post(url).then(res => {
+				t.leftList = res;
+				t.rightList = res[0].children;
+				t.isLeft = res[0].id;
+				t.rightList.forEach(el => {
+					el.isChoice = false;
+				});
+			});
+		},
+		// 左侧列表选中
+		changeLeft(item, index) {
+			this.isLeft = item.id;
+			this.rightList = item.children;
+		},
+		// 右侧列表选中
+		changeRight(item, index) {
+			let arr = [];
+			item.isChoice = !item.isChoice;
+			this.leftList.forEach(lel=>{
+				// 找出已选择的二级分类
+				lel.children.forEach(rel=>{
+					if(rel.isChoice == true){
+							arr.push(rel);
+					}
+				})
+			})
+			// 根据后台返回的可选择类型数量选择
+			if (arr.length > this.category_num) {
+				// 删除超出可选数量的最后一位
+				let end =  arr.pop();
+				end.isChoice = false;
+				uni.showToast({
+					title:"已超出可选分类数量",
+					icon:"none"
+				})
+				return false
+			}
+			arr.forEach(el => {
+				this.category_ids.push(el.id);
+			});
+			// 去重
+			this.category_ids = [...new Set(this.category_ids)];
+			// 回显选中的分类
+			this.$forceUpdate();
+		},
+		// 提交名片
+		submitCard() {
+			if(!this.isClick){
+				let t = this;
+				t.isClick = true
+				let url = '/api/goods/publish_card';
+				let params = {
+					front_image: t.front_image,
+					reverse_image: t.reverse_image,
+					company_name: t.company_name,
+					brief: t.brief,
+					brief_images: t.brief_images.toString(),
+					scope: t.scope,
+					scope_images: t.scope_images.toString(),
+					name: t.name,
+					phone: t.phone,
+					site: t.site,
+					mobile: t.mobile,
+					fax: t.fax,
+					qq: t.qq,
+					wechat: t.wechat,
+					wechat_image: t.weichat_image,
+					category_ids: t.category_ids.toString()
+				};
+				if (t.front_image) {
+					if (t.company_name) {
+						if (t.brief) {
+							if (t.scope) {
+								if (t.name) {
+									App.post(url, params).then(res => {
+										uni.showToast({
+											title: '发布成功',
+											icon: 'success',
+											duration: 1000
+										});
+										setTimeout(function() {
+											if(t.isVip == 2){
+												t.isHide = true;
+											}else{
+												uni.navigateBack({
+													delta: 1
+												});
+											}
+											t.isClick = false
+										}, 1000);
+									});
+								} else {
+									uni.showToast({
+										title: '请输入联系人姓名',
+										icon: 'none'
+									});
+									t.isClick = false
+								}
+							} else {
+								uni.showToast({
+									title: '请输入经营范围',
+									icon: 'none'
+								});
+								t.isClick = false
+							}
+						} else {
+							uni.showToast({
+								title: '请输入公司简介',
+								icon: 'none'
+							});
+							t.isClick = false
+						}
+					} else {
+						uni.showToast({
+							title: '请填写公司名称',
+							icon: 'none'
+						});
+						t.isClick = false
+					}
+				} else {
+					uni.showToast({
+						title: '请上传正面图片',
+						icon: 'none'
+					});
+					t.isClick = false
+				}
+			}
+			
+		},
+		// 关闭弹窗
+		closeDialog() {
+			uni.navigateBack({
+				delta: 1
+			});
+		},
+		// 立即获取vip
+		getNow() {
+			uni.redirectTo({
+				url: '/pages/vip/myVip'
+			});
+		}
+	},
+	onLoad() {
+		this.category_num = uni.getStorageSync('category_num');
+		this.isVip = uni.getStorageSync("is_vip");
+		this.getType();
+		
+	}
+};
+</script>
+
+<style>
+@import url('../../style/addCard');
+</style>

+<template>
+	<view class="card_wrap">
+		<!-- 无名片 -->
+		<view class="layer_center no_card" v-if="!isHave">
+			<view class="no_card_pic">
+				<image src="../../static/no_card.png" mode=""></image>
+			</view>
+			<view class="add_card">
+				<view class="add_card_btn" @click="addCard()">
+					发布我的名片
+				</view>
+			</view>
+		</view>
+		<!-- 有名片 -->
+		<view class="content" v-else>
+			<view class="detail_top">
+				<!-- 公司名称 -->
+				<view class="company_name">{{cardDetail.company_name}}</view>
+				<!-- 名片正反面 -->
+				<view>
+					<image class="card_pic" :src="cardDetail.front_image" mode=""></image>
+					<view class="card_tips">名片正面</view>
+				</view>
+				<view>
+					<image class="card_pic" :src="cardDetail.reverse_image" mode=""></image>
+					<view class="card_tips">名片反面</view>
+				</view>
+			</view>
+			<!-- 公司简介 -->
+			<view class="company_intro">
+				<view class="company_title_wrap"><view class="company_title">公司简介</view></view>
+				<view class="company_detail">
+					<view class="company_detail_box">
+						<view class="">
+							{{cardDetail.brief}}
+						</view>
+						<view class="company_pic_wrap flex_wrap_no">
+							<view class="company_pic_single" @click="showImg(item)" v-for="(item, index) in cardDetail.brief_images" :key="index"><image :src="item" mode=""></image></view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 经营范围 -->
+			<view class="company_intro">
+				<view class="company_title_wrap"><view class="company_title">经营范围</view></view>
+				<view class="company_detail">
+					<view class="company_detail_box">
+						<view class="">
+							{{cardDetail.scope}}
+						</view>
+						<view class="company_pic_wrap flex_wrap_no">
+							<view class="company_pic_single" @click="showImg(item)" v-for="(item, index) in cardDetail.scope_images" :key="index"><image :src="item" mode=""></image></view>
+						</view>
+						<!-- 刷新名片 -->
+						<view class="refresh_card flex_column_nojustify" @click="refreshCard()">
+							<image class="refresh_icon" src="../../static/refresh.png" mode=""></image>
+							<view class="refresh_tips">刷新名片</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 联系方式 -->
+			<view class="company_intro">
+				<view class="company_title_wrap"><view class="company_title">联系方式</view></view>
+				<!-- 地址 -->
+				<view class="contact_code">
+					<view class="layer_nobetween">
+						<!-- 二维码 -->
+						<view class="qr_code" @click="showImg(cardDetail.wechat_image)"><image :src="cardDetail.wechat_image" mode=""></image></view>
+						<!-- 姓名 地址 -->
+						<view class="contact_r flex_star_between">
+							<view class="">联系人：{{cardDetail.name}}</view>
+							<view class="" @click="callPhone()" v-if="cardDetail.phone">电话：{{cardDetail.phone}}</view>
+							<view class="" v-if="cardDetail.site">地址：{{cardDetail.site}}</view>
+						</view>
+					</view>
+				</view>
+				<!-- 各种联系方式 -->
+				<view class="contact_single layer_between" v-if="cardDetail.fax">
+					<view class="layer_between">
+						<image class="contact_icon" src="../../static/phone.png" mode=""></image>
+						传真
+					</view>
+					<view class="" @click="copyEmail()">{{cardDetail.fax}}</view>
+				</view>
+				<view class="contact_single layer_between" v-if="cardDetail.mobile">
+					<view class="layer_between">
+						<image class="contact_icon" src="../../static/tel.png" mode=""></image>
+						手机号
+					</view>
+					<view class="" @click="callTel()">{{cardDetail.mobile}}</view>
+				</view>
+				<view class="contact_single layer_between" v-if="cardDetail.qq">
+					<view class="layer_between">
+						<image class="contact_icon" src="../../static/qq.png" mode=""></image>
+						QQ
+					</view>
+					<view class="" @click="copyQQ()">{{cardDetail.qq}}</view>
+				</view>
+				<view class="contact_single no_bottom layer_between" v-if="cardDetail.wechat">
+					<view class="layer_between">
+						<image class="contact_icon" src="../../static/weixin.png" mode=""></image>
+						微信
+					</view>
+					<view class="" @click="copyWx()">{{cardDetail.wechat}}</view>
+				</view>
+			</view>
+			<!-- 图片放大 -->
+			<view class="tx_mask" v-if="isShowImg" @click="closDialog()"></view>
+			<view class="mask_content" v-if="isShowImg" @click="closDialog()" @longpress="saveImg()">
+				<image :src="img" mode="widthFix"></image>
+			</view>
+			<!-- 编辑名片 -->
+			<view class="layer_between editor_btn">
+				<view class="refresh_time">
+					上次刷新时间：{{cardDetail.refresh_time}}
+				</view>
+				<view class="editor_card" @click="toEditor()">编辑我的名片</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import App from "../../App.vue";
+	export default {
+		data() {
+			return {
+				// 是否有名片
+				isHave:false,
+				// 我的名片详情
+				cardDetail:"",
+				token:"",
+				// 图片放大
+				isShowImg:false,
+				img:"",
+			}
+		},
+		methods: {
+			// 图片放大
+			showImg(img){
+				console.log(111)
+				this.isShowImg = true
+				this.img = img
+			},
+			closDialog(){
+				this.isShowImg = false
+			},
+			saveImg(){
+				let t = this ;
+				uni.downloadFile({
+					url: t.img,
+					success: function(res) {
+						uni.saveImageToPhotosAlbum({
+							filePath: res.tempFilePath,
+							success: function() {
+								uni.showToast({
+									title: '保存成功',
+									icon: 'none',
+									duration: 1500
+								});
+								t.isShowImg = false
+							},
+							fail: function(err) {
+								if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
+									"saveImageToPhotosAlbum:fail:auth denied") {
+									uni.showToast({
+										title: '需要您授权保存相册',
+										icon:none,
+										duration: 1500,
+										success: modalSuccess => {
+											uni.openSetting({
+												success(settingdata) {
+													if (settingdata.authSetting['scope.writePhotosAlbum']) {
+														uni.showToast({
+															title: '获取权限成功',
+															icon: 'none',
+															duration: 1500
+														});
+													} else {
+														uni.showToast({
+															title: '获取权限失败',
+															icon: 'none',
+															duration: 1500
+														});
+													}
+												},
+												fail(failData) {
+													console.log("failData", failData)
+												},
+												complete(finishData) {
+													console.log("finishData", finishData)
+												}
+											})
+										}
+									})
+								}
+							},
+						});
+					}
+				});
+			},
+			// 刷新名片
+			refreshCard(){
+				let url = "/api/goods/refresh";
+				App.post(url)
+				.then(res=>{
+					this.getMyCard()
+				})
+			},
+			// 发布我的名片
+			addCard() {
+				if(this.token){
+					uni.navigateTo({
+						url:"/pages/card/addCard"
+					})
+				}else{
+					uni.navigateTo({
+						url:"/pages/start/start"
+					})
+				}
+			},
+			// 获取我的名片详情
+			getMyCard(){
+				let url = "/api/goods/my_goods";
+				App.post(url)
+				.then(res=>{
+					this.cardDetail = res;
+					if(this.cardDetail){
+						this.isHave = true
+					}
+				})
+			},
+			// 去编辑页
+			toEditor(){
+				uni.navigateTo({
+					url:"/pages/card/editorCard"
+				})
+			},
+			// 拨打电话
+			callPhone(){
+				uni.makePhoneCall({
+					phoneNumber:this.cardDetail.mobile
+				})
+			},
+			// 拨打手机号
+			callTel(){
+				uni.makePhoneCall({
+					phoneNumber:this.cardDetail.mobile
+				})
+			},
+			// 复制传真号
+			copyEmail(){
+				uni.setClipboardData({
+				    data: this.cardDetail.fax,
+				    success: function () {
+				        uni.showToast({
+				        	title:"复制成功",
+							icon:'success'
+				        })
+				    }
+				});
+			},
+			// 复制qq号
+			copyQQ(){
+				uni.setClipboardData({
+				    data: this.cardDetail.qq,
+				    success: function () {
+				        uni.showToast({
+				        	title:"复制成功",
+							icon:'success'
+				        })
+				    }
+				});
+			},
+			// 复制微信号
+			copyWx(){
+				uni.setClipboardData({
+				    data: this.cardDetail.wechat,
+				    success: function () {
+				        uni.showToast({
+				        	title:"复制成功",
+							icon:'success'
+				        })
+				    }
+				});
+			},
+		},
+		onShow() {
+			this.token = uni.getStorageSync("token");
+			// 获取我的名片详情
+			if(this.token){
+				this.getMyCard();
+			}
+		},
+		onLoad() {
+			
+		},
+		onShareAppMessage: function (res) {
+		    var that = this;
+		   
+		   
+		        // 来自页面内转发按钮
+		        return {
+		          title: '分享',
+		          path: "/pages/card/card"
+		          
+		        }
+		      
+		  }
+	}
+</script>
+
+<style>
+	@import url("../../style/card");
+	@import url('../../style/cardDetail');
+</style>

+<template>
+	<view class="add_card" :class="{ over_hide: isHide }">
+		<!-- 名片信息 -->
+		<view class="add_card_top">
+			<!-- 正反面 -->
+			<view class="add_card_single">
+				<view class="card_front flex_center" @click="uploadPositive()">
+					<view class="show_img" v-if="front_image"><image :src="front_image" mode="aspectFill"></image></view>
+					<view class="flex_center" v-else>
+						<view class="card_upload"><image src="../../static/add.png" mode=""></image></view>
+						<view class="card_tips">上传名片正面图片</view>
+					</view>
+				</view>
+				<view class="card_front flex_center" @click="uploadSide()">
+					<view class="show_img" v-if="reverse_image"><image :src="reverse_image" mode="aspectFill"></image></view>
+					<view class="flex_center" v-else>
+						<view class="card_upload"><image src="../../static/add.png" mode=""></image></view>
+						<view class="card_tips">上传名片背面图片</view>
+					</view>
+				</view>
+				<view class="upload_tips">建议名片尺寸为360*210像素 </view>
+				<view class="msg_single layer_between">
+					<view class="single_l">公司名称：</view>
+					<input class="single_r" type="text" v-model="company_name" placeholder="请输入公司名称" />
+				</view>
+			</view>
+			<!-- 公司简介 -->
+			<view class="add_card_single">
+				<view class="msg_single">
+					<view class="single_l">公司简介：</view>
+					<textarea v-model="brief" placeholder="请输入公司简介" />
+					<view class="layer_nostar flex_wrap_no">
+						<view class="wx_code" v-for="(item, index) in brief_images" :key="index">
+							<image :src="item" mode=""></image>
+							<image @click="deleteCompany(index)" class="cancle_icon" src="../../static/del_icon@2x.png" mode=""></image>
+						</view>
+						<view class="wx_code" @click="uploadCompay()"><image src="../../static/add_wx.png" mode=""></image></view>
+					</view>
+				</view>
+			</view>
+			<!-- 经营范围 -->
+			<view class="add_card_single">
+				<view class="msg_single">
+					<view class="single_l">经营范围：</view>
+					<textarea v-model="scope" placeholder="请输入经营范围" />
+					<view class="layer_nostar flex_wrap_no">
+						<view class="wx_code" v-for="(item, index) in scope_images" :key="index">
+							<image :src="item" mode=""></image>
+							<image @click="deleteScope(index)" class="cancle_icon" src="../../static/del_icon@2x.png" mode=""></image>
+						</view>
+						<view class="wx_code" @click="uploadBusiness()"><image src="../../static/add_wx.png" mode=""></image></view>
+					</view>
+				</view>
+			</view>
+			<!-- 各种联系方式 -->
+			<view class="add_card_single">
+				<view class="msg_single layer_between">
+					<view class="single_l">联系人：</view>
+					<input class="single_r" type="text" v-model="name" placeholder="请输入联系人" />
+				</view>
+			</view>
+			<view class="add_card_single">
+				<view class="msg_single layer_between">
+					<view class="single_l">地址：</view>
+					<input class="single_r" type="text" v-model="site" placeholder="请输入地址" />
+				</view>
+			</view>
+			<view class="add_card_single">
+				<view class="msg_single layer_between">
+					<view class="single_l">电话：</view>
+					<input class="single_r" type="text" v-model="phone" placeholder="请输入电话" />
+				</view>
+			</view>
+			<view class="add_card_single">
+				<view class="msg_single layer_between">
+					<view class="single_l">传真：</view>
+					<input class="single_r" type="text" v-model="fax" placeholder="请输入传真" />
+				</view>
+			</view>
+			<view class="add_card_single">
+				<view class="msg_single layer_between">
+					<view class="single_l">手机号：</view>
+					<input class="single_r" maxlength="11" type="text" v-model="mobile" placeholder="请输入手机号" />
+				</view>
+			</view>
+			<view class="add_card_single">
+				<view class="msg_single layer_between">
+					<view class="single_l">QQ：</view>
+					<input class="single_r" type="text" v-model="qq" placeholder="请输入QQ号" />
+				</view>
+			</view>
+			<view class="add_card_single">
+				<view class="msg_single layer_between">
+					<view class="single_l">微信：</view>
+					<input class="single_r" type="text" v-model="wechat" placeholder="请输入微信" />
+				</view>
+			</view>
+			<view class="add_card_single">
+				<view class="msg_single">
+					<view class="single_l">微信二维码：</view>
+					<view class="layer_nostar" @click="uploadCode()">
+						<view class="wx_img" v-if="weichat_image"><image :src="weichat_image" mode=""></image></view>
+						<view class="wx_code" v-else><image src="../../static/add_wx.png" mode=""></image></view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 名片分类 -->
+		<view class="add_card_classify">
+			<view class="classify_title">
+				名片分类：
+				<text>（可选择{{ category_num }}个名片分类）</text>
+			</view>
+			<view class="classify_tips">想要增加更多分类，请提交名片升级成VIP后到会员中心增加</view>
+			<!-- 轴承列表 -->
+			<view class="bearing_classify layer_nostar">
+				<!-- 左侧类目 -->
+				<view class="bearing_l">
+					<view class="bear_l_box flex_column_center">
+						<view
+							class="bear_l_single flex_warp"
+							:class="{ bear_l_active: isLeft == item.id }"
+							v-for="(item, index) in leftList"
+							:key="index"
+							@click="changeLeft(item, index)"
+						>
+							<view class="bear_l_child">{{ item.name }}</view>
+						</view>
+					</view>
+				</view>
+				<!-- 右侧具体分类 -->
+				<view class="bearing_r">
+					<view class="bear_r_box">
+						<view class="bear_r_single" :class="{ bear_r_active: item.isChoice }" v-for="(item, index) in rightList" :key="index" @click="changeRight(item, index)">
+							{{ item.name }}
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 提交名片 -->
+		<view class="submit_btn" @click="submitCard()">提交名片</view>
+		<!-- 提交弹窗 -->
+		<view class="tx_mask" v-if="isHide" @click="closeDialog()"></view>
+		<view class="mask_content" v-if="isHide">
+			<view class="mask_top">成为VIP会员，其他用户可以搜索到您的名片</view>
+			<view class="mask_bottom" @click="getNow()">立即获取</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import App from '../../App.vue';
+export default {
+	data() {
+		return {
+			front_image: '', //正面图片
+			reverse_image: '', //反面图片
+			company_name: '', //公司名称
+			brief: '', //公司简介
+			brief_images: [], //公司简介图片
+			scope: '', //经营范围
+			scope_images: [], //经营范围图片
+			name: '', //联系人
+			phone: '', //电话
+			site: '', //地址
+			mobile: '', //手机号
+			fax: '', //传真
+			qq: '', //	QQ
+			wechat: '', //微信
+			weichat_image: '', //微信二维码
+			category_ids: [], //分类ID
+			category_num: '', //可选分类个数
+			// 轴承列表
+			// 左侧
+			leftList: [],
+			isLeft: 0,
+			// 右侧
+			rightList: [],
+			isRight: 0,
+			// 弹窗
+			isHide: false,
+			// 是否为vip 1:是 2:否
+			isVip: '',
+			file: '',
+			// 防连点
+			isClick: false,
+			imgBrief: [], //公司简介上传数量
+			imgScope: []
+		};
+	},
+	methods: {
+		// 上传正面图片
+		uploadPositive() {
+			let t = this;
+			uni.chooseImage({
+				count: 1, //默认9
+				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album'], //从相册选择
+				success: chooseImageRes => {
+					const tempFilePaths = chooseImageRes.tempFilePaths;
+					App.upload(tempFilePaths[0]).then(res => {
+						this.front_image = res.url;
+					});
+				}
+			});
+		},
+		// 上传反面图片
+		uploadSide() {
+			let t = this;
+			uni.chooseImage({
+				count: 1, //默认9
+				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album'], //从相册选择
+				success: chooseImageRes => {
+					const tempFilePaths = chooseImageRes.tempFilePaths;
+					t.file = tempFilePaths;
+					App.upload(tempFilePaths[0]).then(res => {
+						this.reverse_image = res.url;
+					});
+				}
+			});
+		},
+		// 上传公司简介图片
+		uploadCompay() {
+			let t = this;
+			uni.chooseImage({
+				count: 3, //默认9
+				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album'], //从相册选择
+				success: chooseImageRes => {
+					const tempFilePaths = chooseImageRes.tempFilePaths;
+					t.imgBrief = [...t.imgBrief,...tempFilePaths]
+					if(t.imgBrief.length>3){
+						uni.showToast({
+							title: '图片总数超过3张',
+							icon: 'none'
+						});
+						tempFilePaths.forEach(el=>{
+							t.imgBrief.forEach((ele,i)=>{
+								if(el == ele){
+									t.imgBrief.splice(i,1)
+								}
+							})
+						})
+						return false;
+					}
+					tempFilePaths.forEach(el => {
+						App.upload(el).then(res => {
+							t.brief_images.push(res.url);
+						});
+					});
+				}
+			});
+		},
+
+		// 上传经营范围图片
+		uploadBusiness() {
+			let t = this;
+			uni.chooseImage({
+				count: 3, //默认9
+				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album'], //从相册选择
+				success: chooseImageRes => {
+					const tempFilePaths = chooseImageRes.tempFilePaths;
+					t.imgScope = [...t.imgScope, ...tempFilePaths];
+					if (t.imgScope.length > 3) {
+						uni.showToast({
+							title: '图片总数超过3张',
+							icon: 'none'
+						});
+						tempFilePaths.forEach(el=>{
+							t.imgScope.forEach((ele,i)=>{
+								if(el == ele){
+									t.imgScope.splice(i,1)
+								}
+							})
+						})
+						return false;
+					}
+					
+					tempFilePaths.forEach(el => {
+						App.upload(el).then(res => {
+							t.scope_images.push(res.url);
+						});
+					});
+				}
+			});
+		},
+		// 删除公司简介图片
+		deleteCompany(index) {
+			
+			this.imgBrief.splice(index, 1);
+			this.brief_images.splice(index, 1);
+			console.log(this.imgBrief,this.brief_images)
+		},
+		// 删除经营范围图片
+		deleteScope(index) {
+			this.imgScope.splice(index, 1);
+			this.scope_images.splice(index, 1);
+		},
+		// 上传二维码
+		uploadCode() {
+			let t = this;
+			uni.chooseImage({
+				count: 1, //默认9
+				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album'], //从相册选择
+				success: chooseImageRes => {
+					const tempFilePaths = chooseImageRes.tempFilePaths;
+					App.upload(tempFilePaths[0]).then(res => {
+						this.weichat_image = res.url;
+					});
+				}
+			});
+		},
+		// 首页分类数据 左侧一级分类
+		getType() {
+			let t = this;
+			t.leftList = [];
+			t.rightList = [];
+			let url = '/api/category/get_category_one';
+			App.post(url).then(res => {
+				t.leftList = res;
+				t.rightList.forEach(el => {
+					el.isChoice = false;
+				});
+				res.forEach(el => {
+					// 找出已选择的二级分类
+					el.children.forEach(ele => {
+						t.category_ids.forEach(eleId => {
+							// 根据后台返回的分类id找到对应的分类
+							if (eleId == ele.id) {
+								ele.isChoice = true;
+								// 一级分类
+								t.isLeft = el.id;
+								// 二级分类
+								t.rightList = el.children;
+							}
+						});
+					});
+				});
+			});
+		},
+		// 左侧列表选中
+		changeLeft(item, index) {
+			this.isLeft = item.id;
+			this.rightList = item.children;
+		},
+		// 右侧列表选中
+		changeRight(item, index) {
+			this.category_ids = [];
+			let arr = [];
+			item.isChoice = !item.isChoice;
+			this.leftList.forEach(lel => {
+				// 找出已选择的二级分类
+				lel.children.forEach(rel => {
+					if (rel.isChoice == true) {
+						arr.push(rel);
+					}
+				});
+			});
+			// 根据后台返回的可选择类型数量选择
+			if (arr.length > this.category_num) {
+				// 删除超出可选数量的最后一位
+				let end = arr.pop();
+				end.isChoice = false;
+				uni.showToast({
+					title: '已超出可选分类数量',
+					icon: 'none'
+				});
+				return false;
+			}
+			arr.forEach(el => {
+				this.category_ids.push(el.id);
+			});
+			// 去重
+			this.category_ids = [...new Set(this.category_ids)];
+			// 回显选中的分类
+			this.$forceUpdate();
+		},
+		// 提交名片
+		submitCard() {
+			if (!this.isClick) {
+				let t = this;
+
+				t.isClick = true;
+				let url = '/api/goods/publish_card';
+				let briefArr = '';
+				if (t.brief_images) {
+					briefArr = t.brief_images.toString();
+				}
+				let scopeArr = '';
+				if (t.scope_images) {
+					scopeArr = t.scope_images.toString();
+				}
+				let cateArr = '';
+				if (t.category_ids) {
+					cateArr = t.category_ids.toString();
+				}
+				let params = {
+					front_image: t.front_image,
+					reverse_image: t.reverse_image,
+					company_name: t.company_name,
+					brief: t.brief,
+					brief_images: briefArr,
+					scope: t.scope,
+					scope_images: scopeArr,
+					name: t.name,
+					phone: t.phone,
+					site: t.site,
+					mobile: t.mobile,
+					fax: t.fax,
+					qq: t.qq,
+					wechat: t.wechat,
+					wechat_image: t.weichat_image,
+					category_ids: cateArr
+				};
+				if (t.front_image) {
+					if (t.company_name) {
+						if (t.brief) {
+							if (t.scope) {
+								if (t.name) {
+									App.post(url, params).then(res => {
+										uni.showToast({
+											title: '编辑成功',
+											icon: 'success',
+											duration: 1000
+										});
+										setTimeout(function() {
+											if (t.isVip == 2) {
+												t.isHide = true;
+											} else {
+												uni.navigateBack({
+													delta: 1
+												});
+											}
+											t.isClick = false;
+										}, 1000);
+									});
+								} else {
+									uni.showToast({
+										title: '请输入联系人姓名',
+										icon: 'none'
+									});
+									t.isClick = false;
+								}
+							} else {
+								uni.showToast({
+									title: '请输入经营范围',
+									icon: 'none'
+								});
+								t.isClick = false;
+							}
+						} else {
+							uni.showToast({
+								title: '请输入公司简介',
+								icon: 'none'
+							});
+							t.isClick = false;
+						}
+					} else {
+						uni.showToast({
+							title: '请填写公司名称',
+							icon: 'none'
+						});
+						t.isClick = false;
+					}
+				} else {
+					uni.showToast({
+						title: '请上传正面图片',
+						icon: 'none'
+					});
+					t.isClick = false;
+				}
+			}
+		},
+		// 关闭弹窗
+		closeDialog() {
+			uni.navigateBack({
+				delta: 1
+			});
+		},
+		// 立即获取vip
+		getNow() {
+			uni.redirectTo({
+				url: '/pages/vip/myVip'
+			});
+		},
+		// 获取我的名片详情
+		getMyCard() {
+			let t = this;
+			let url = '/api/goods/my_goods';
+			App.post(url).then(res => {
+				t.getType();
+				t.front_image = res.front_image;
+				t.reverse_image = res.reverse_image;
+				t.company_name = res.company_name;
+				t.brief = res.brief;
+				if (res.brief_images) {
+					t.imgBrief = res.brief_images;
+					t.brief_images = res.brief_images;
+				}
+				t.scope = res.scope;
+				if (res.scope_images) {
+					t.imgScope = res.scope_images;
+					t.scope_images = res.scope_images;
+				}
+				t.name = res.name;
+				t.phone = res.phone;
+				t.site = res.site;
+				t.mobile = res.mobile;
+				t.fax = res.fax;
+				t.qq = res.qq;
+				t.wechat = res.wechat;
+				t.weichat_image = res.wechat_image;
+				res.category_ids.forEach(el => {
+					if (el) {
+						t.category_ids.push(el);
+					}
+				});
+			});
+		}
+	},
+	onLoad() {
+		
+		// 获取我的名片详情
+		this.getMyCard();
+	},
+	onShow() {
+		this.category_num = uni.getStorageSync('category_num');
+		
+	}
+};
+</script>
+
+<style>
+@import url('../../style/addCard');
+</style>

+<template>
+	<view class="content">
+		<!-- 轴承列表 --> 
+		<view class="bearing_classify layer_nostar">
+			<!-- 左侧类目 -->
+			<view class="bearing_l">
+				<view class="bear_l_box flex_column_center">
+					<view class="bear_l_single flex_warp" :class="{ bear_l_active: isLeft == item.id }" v-for="(item, index) in leftList" :key="index" @click="changeLeft(item,index)">
+						<view class="bear_l_child">{{ item.name }}</view>
+					</view>
+				</view>
+			</view>
+			<!-- 右侧具体分类 -->
+			<view class="bearing_r">
+				<view class="bear_r_box">
+					<view class="bear_r_single" :class="{bear_r_active:isRight == item.id}" v-for="(item, index) in rightList" :key="index" @click="changeRight(item,index)">{{ item.name }}</view>
+				</view>
+			</view>
+		</view>
+		<!-- 收藏名片 -->
+		<view class="hot_search">
+			<!-- 名片列表 -->
+			<view class="hot_card_wrap flex_wrap_between" v-if="cardList.length>0">
+				<view class="card_single" v-for="(item,index) in cardList" :key="index" @click="toDetail(item)">
+					<image :src="item.front_image" mode=""></image>
+				</view>
+			</view>
+			<!-- 暂无名片 -->
+			<view class="hot_card_wrap" v-else>暂无收藏</view>
+			<!-- 分页 -->
+			<view class="card_pagation layer_between">
+				<view class="prev_page" :class="{next_page:pageNum>1}" @click="prevPage()">上一页</view>
+				<view class="layer_between jump_page">
+					跳转到
+					<input type="text" @confirm="jumpPage()" v-model="pageNum" />
+					页
+				</view>
+				<view class="next_page" :class="{prev:pageNum >= totalPage}" @click="nextPage()">下一页</view>
+				<view class="total_page">共{{totalPage}}页</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import App from "../../App.vue";
+export default {
+	data() {
+		return {
+			// 搜索
+			keyword:"",
+			// 轮播图
+			swiperList:[],
+			// 轴承列表
+			// 左侧
+			leftList: [],
+			isLeft: 0,
+			// 右侧
+			rightList: [],
+			isRight: "",
+			// 名片列表
+			cardList:[],
+			// 分页
+			pageNum:1,
+			// 总页数
+			totalPage:"",
+		};
+	},
+	
+	methods: {
+		// 轮播图
+		getSwiper(){
+			let t = this;
+			let url = "/api/slide/get_slide";
+			App.post(url) 
+			.then(res=>{
+				this.swiperList = res.data;
+			})
+		},
+		// 首页分类数据 左侧一级分类
+		getType(){
+			let t = this;
+			t.leftList = [];
+			t.rightList = [];
+			let url = "/api/collect/get_category_one";
+			App.post(url) 
+			.then(res=>{
+				t.leftList = res;
+				t.rightList = res[0].children;
+				t.isLeft = res[0].id;
+			})
+		},
+		// 左侧列表选中
+		changeLeft(item,index) {
+			this.isLeft = item.id;
+			this.rightList = item.children;
+			
+		},
+		// 右侧列表选中
+		changeRight(item,index){
+			this.isRight = item.id;
+			this.getCardList();
+		},
+		// 获取收藏列表
+		getCardList(){
+			let t = this;
+			let url = "/api/collect/collect_list";
+			let params = {
+				category_id:t.isRight,
+				page:t.pageNum
+			};
+			App.post(url,params)
+			.then(res=>{
+				t.totalPage = res.page_sum;
+				t.cardList = res.list;
+			})
+		},
+		// 名片详情
+		toDetail(item){
+			uni.navigateTo({
+				url:"/pages/index/cardDetail?id="+item.id
+			})
+		},
+		// 搜索 去名片列表
+		toSearch(){
+			uni.navigateTo({
+				url:"/pages/index/search?keyword="+this.keyword
+			})
+		},
+		// 上一页
+		prevPage(){
+			if(this.pageNum <=1 )
+				return false;
+			this.pageNum --;
+			this.getCardList()
+		},
+		// 下一页
+		nextPage(){
+			if(this.pageNum == this.totalPage){
+				return false
+			}
+			this.pageNum ++;
+			this.getCardList()
+		},
+		// 跳转到某一页
+		jumpPage(){
+			if(this.pageNum>this.totalPage)
+				this.pageNum = this.totalPage;
+			this.getCardList()
+		},
+	},
+	onLoad() {
+		
+	},
+	onShow() {
+		// 首页分类数据
+		this.getType();
+		// 名片列表数据
+		this.getCardList();
+	},
+	
+};
+</script>
+
+<style>
+@import url('../../style/index');
+.hot_card_wrap{
+	border-top: none;
+	text-align: center;
+}
+.bearing_classify{
+	border-top: 1upx solid #eee;
+}
+</style>

+<template>
+	<view class="content">
+		<view class="detail_top">
+			<!-- 公司名称 -->
+			<view class="company_name">{{ cardDetail.company_name }}</view>
+			<!-- 名片正反面 -->
+			<view> 
+				<image class="card_pic" :src="cardDetail.front_image" mode=""></image>
+				<view class="card_tips">名片正面</view>
+			</view>
+			<view>
+				<image class="card_pic" :src="cardDetail.reverse_image" mode=""></image>
+				<view class="card_tips">名片反面</view>
+			</view>
+		</view>
+		<!-- 公司简介 -->
+		<view class="company_intro">
+			<view class="company_title_wrap"><view class="company_title">公司简介</view></view>
+			<view class="company_detail">
+				<view class="company_detail_box">
+					<view class="">{{ cardDetail.brief }}</view>
+					<view class="company_pic_wrap flex_wrap_no">
+						<view class="company_pic_single" @click="showImg(item)" v-for="(item, index) in cardDetail.brief_images" :key="index"><image :src="item" mode=""></image></view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 经营范围 -->
+		<view class="company_intro">
+			<view class="company_title_wrap"><view class="company_title">经营范围</view></view>
+			<view class="company_detail">
+				<view class="company_detail_box">
+					<view class="">{{ cardDetail.scope }}</view>
+					<view class="company_pic_wrap flex_wrap_no">
+						<view class="company_pic_single" @click="showImg(item)" v-for="(item, index) in cardDetail.scope_images" :key="index"><image :src="item" mode=""></image></view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 联系方式 -->
+		<view class="company_intro">
+			<view class="company_title_wrap"><view class="company_title">联系方式</view></view>
+			<!-- 地址 -->
+			<view class="contact_code">
+				<view class="layer_nobetween">
+					<!-- 二维码 -->
+					<view class="qr_code" @click="showImg(cardDetail.wechat_image)"><image :src="cardDetail.wechat_image" mode=""></image></view>
+					<!-- 姓名 地址 -->
+					<view class="contact_r flex_star_between">
+						<view class="">联系人：{{ cardDetail.name }}</view>
+						<view class="" v-if="cardDetail.phone">电话：{{ cardDetail.phone }}</view>
+						<view class="" v-if="cardDetail.site">地址：{{ cardDetail.site }}</view>
+					</view>
+				</view>
+			</view>
+			<!-- 各种联系方式 -->
+			<view class="contact_single layer_between" v-if="cardDetail.fax">
+				<view class="layer_between">
+					<image class="contact_icon" src="../../static/phone.png" mode=""></image>
+					传真
+				</view>
+				<view class="" @click="copyFax()">{{ cardDetail.fax }}</view>
+			</view>
+			<view class="contact_single layer_between" v-if="cardDetail.mobile">
+				<view class="layer_between">
+					<image class="contact_icon" src="../../static/tel.png" mode=""></image>
+					手机号
+				</view>
+				<view class="" @click="callUp()">{{ cardDetail.mobile }}</view>
+			</view>
+			<view class="contact_single layer_between" v-if="cardDetail.qq">
+				<view class="layer_between">
+					<image class="contact_icon" src="../../static/qq.png" mode=""></image>
+					QQ
+				</view>
+				<view class="" @click="copyQQ()">{{ cardDetail.qq }}</view>
+			</view>
+			<view class="contact_single no_bottom layer_between" v-if="cardDetail.wechat">
+				<view class="layer_between">
+					<image class="contact_icon" src="../../static/weixin.png" mode=""></image>
+					微信
+				</view>
+				<view class="" @click="copyWx()">{{ cardDetail.wechat }}</view>
+			</view>
+		</view>
+		<!-- 图片放大 -->
+		<view class="tx_mask" v-if="isShowImg" @click="closDialog()"></view>
+		<view class="mask_content" v-if="isShowImg" @click="closDialog()" @longpress="saveImg()">
+			<image :src="img" mode="widthFix"></image>
+		</view>
+		<!-- 收藏按钮 -->
+		<view class="collect_btn" @click="collectCard()">{{cardDetail.is_collect == 1?"取消收藏":"收藏名片"}}</view>
+	</view>
+</template>
+
+<script>
+import App from '../../App.vue';
+export default {
+	data() {
+		return {
+			id: '',
+			imgList: [],
+			cardDetail: '',
+			token: '',
+			// 图片放大
+			isShowImg:false,
+			img:"",
+		};
+	},
+	methods: {
+		// 图片放大
+		showImg(img){
+			
+			this.isShowImg = true
+			this.img = img;
+			
+		},
+		saveImg(){
+			let t = this ;
+			uni.downloadFile({
+				url: t.img,
+				success: function(res) {
+					uni.saveImageToPhotosAlbum({
+						filePath: res.tempFilePath,
+						success: function() {
+							uni.showToast({
+								title: '保存成功',
+								icon: 'none',
+								duration: 1500
+							});
+							t.isShowImg = false
+						},
+						fail: function(err) {
+							if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
+								"saveImageToPhotosAlbum:fail:auth denied") {
+								uni.showToast({
+									title: '需要您授权保存相册',
+									icon:none,
+									duration: 1500,
+									success: modalSuccess => {
+										uni.openSetting({
+											success(settingdata) {
+												if (settingdata.authSetting['scope.writePhotosAlbum']) {
+													uni.showToast({
+														title: '获取权限成功',
+														icon: 'none',
+														duration: 1500
+													});
+												} else {
+													uni.showToast({
+														title: '获取权限失败',
+														icon: 'none',
+														duration: 1500
+													});
+												}
+											},
+											fail(failData) {
+												console.log("failData", failData)
+											},
+											complete(finishData) {
+												console.log("finishData", finishData)
+											}
+										})
+									}
+								})
+							}
+						},
+					});
+				}
+			});
+		},
+		closDialog(){
+			this.isShowImg = false
+		},
+		// 名片详情
+		getCarDetail() {
+			let t = this;
+			let url = '/api/goods/goods_detail';
+			let params = {
+				goods_id: this.id
+			};
+			App.post(url, params).then(res => {
+				this.cardDetail = res;
+			});
+		},
+		// 复制传真
+		copyFax() {
+			uni.setClipboardData({
+				data: this.cardDetail.fax,
+				success: function() {
+					uni.showToast({
+						title: '复制成功',
+						icon: 'success'
+					});
+				}
+			});
+		},
+		// 复制qq
+		copyQQ() {
+			uni.setClipboardData({
+				data: this.cardDetail.qq,
+				success: function() {
+					uni.showToast({
+						title: '复制成功',
+						icon: 'success'
+					});
+				}
+			});
+		},
+		// 复制微信
+		copyWx() {
+			uni.setClipboardData({
+				data: this.cardDetail.wechat,
+				success: function() {
+					uni.showToast({
+						title: '复制成功',
+						icon: 'success'
+					});
+				}
+			});
+		},
+		// 拨打电话
+		callUp() {
+			uni.makePhoneCall({
+				phoneNumber: this.cardDetail.mobile
+			});
+		},
+		// 收藏名片
+		collectCard() {
+			if (this.token) {
+				let url = '/api/collect/collect';
+				let params = {
+					goods_id:this.id
+				};
+				App.post(url,params)
+				.then(res=>{
+					uni.showToast({
+						title:'操作成功',
+						icon:'success',
+						duration:1500
+					})
+					setTimeout(function(){
+						uni.navigateBack({
+							delta:1
+						})
+					},1500)
+					
+				})
+			} else {
+				uni.navigateTo({
+					url: '/pages/start/start'
+				});
+			}
+		}
+	},
+	onLoad(option) {
+		this.token = uni.getStorageSync('token');
+		this.id = option.id;
+		// 获取名片详情
+		this.getCarDetail();
+	},
+	
+	onShareAppMessage: function (res) {
+	    var that = this;
+	   
+	   
+	        // 来自页面内转发按钮
+	        return {
+	          title: '分享',
+	          path: "/pages/index/cardDetail?id="+that.id
+	          
+	        }
+	      
+	  }
+
+};
+</script>
+
+<style>
+@import url('../../style/cardDetail');
+</style>

+<template>
+	<view class="content">
+		<!-- 顶部搜索 -->
+		<view class="search_wrap layer_between">
+			<view class="search_input">
+				<input type="text" @confirm="toSearch()" v-model="keyword" placeholder="请输入名称、型号、品牌、厂家搜索" />
+				<image class="search_icon" src="../../static/search.png" mode=""></image>
+			</view>
+			<view class="search_word" @click="toSearch()">搜索</view>
+		</view>
+		<!-- 轴承列表 -->
+		<view class="bearing_classify layer_nostar">
+			<!-- 左侧类目 -->
+			<view class="bearing_l">
+				<view class="bear_l_box flex_column_center">
+					<view class="bear_l_single flex_warp" :class="{ bear_l_active: isLeft == item.id }" v-for="(item, index) in leftList" :key="index" @click="changeLeft(item,index)">
+						<view class="bear_l_child">{{ item.name }}</view>
+					</view>
+				</view>
+			</view>
+			<!-- 右侧具体分类 -->
+			<view class="bearing_r">
+				<view class="bear_r_box">
+					<view class="bear_r_single" :class="{bear_r_active:isRight == item.id}" v-for="(item, index) in rightList" :key="index" @click="changeRight(item,index)">{{ item.name }}</view>
+				</view>
+			</view>
+		</view>
+		<!-- 热搜名片 -->
+		<view class="hot_search">
+			<!-- 名片 -->
+			<view class="hot_card_wrap flex_wrap_between">
+				<view class="card_single" v-for="(item,index) in cardList" :key="index" @click="toDetail(item)">
+					<image :src="item.front_image" mode=""></image>
+				</view>
+			</view>
+			<!-- 分页 -->
+			<view class="card_pagation layer_between">
+				<view class="prev_page" :class="{next_page:pageNum>1}" @click="prevPage()">上一页</view>
+				<view class="layer_between jump_page">
+					跳转到
+					<input type="text" @confirm="jumpPage()" v-model="pageNum" />
+					页
+				</view>
+				<view class="next_page" :class="{prev:pageNum >= totalPage}" @click="nextPage()">下一页</view>
+				<view class="total_page">共{{totalPage/1}}页</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import App from "../../App.vue";
+export default {
+	data() {
+		return {
+			// 搜索
+			keyword:"",
+			// 轴承列表
+			// 左侧
+			leftList: [],
+			isLeft: 0,
+			// 右侧
+			rightList: [],
+			isRight: -1,
+			// 名片列表
+			cardList:[],
+			// 分页
+			pageNum:1,
+			// 总页数
+			totalPage:"",
+		};
+	},
+	methods: {
+		// 首页分类数据 左侧一级分类
+		getType(){
+			let t = this;
+			t.leftList = [];
+			t.rightList = [];
+			let url = "/api/category/get_category_one";
+			App.post(url) 
+			.then(res=>{
+				t.leftList = res;
+				// 数据回显
+				t.leftList.forEach(el=>{
+					if(el.id == t.isLeft){
+						t.rightList = el.children;
+					}
+				})
+			})
+		},
+		// 左侧列表选中
+		changeLeft(item,index) {
+			this.isLeft = item.id;
+			this.rightList = item.children;
+		},
+		// 右侧列表选中
+		changeRight(item,index){
+			this.isRight = item.id;
+			this.getCardList();
+		},
+		// 获取名片列表
+		getCardList(){
+			let t = this;
+			let url = "/api/goods/goods_list";
+			let params = {
+				category_id:t.isRight,
+				page:t.pageNum
+			};
+			App.post(url,params)
+			.then(res=>{
+				t.totalPage = res.page_sum;
+				t.cardList = res.list;
+			})
+		},
+		// 名片详情
+		toDetail(item){
+			uni.navigateTo({
+				url:"/pages/index/cardDetail?id="+item.id
+			})
+		},
+		// 搜索 去名片列表
+		toSearch(){
+			uni.navigateTo({
+				url:"/pages/index/search?keyword="+this.keyword
+			})
+		},
+		// 上一页
+		prevPage(){
+			if(this.pageNum <=1 )
+				return false;
+			this.pageNum --;
+			this.getCardList()
+		},
+		// 下一页
+		nextPage(){
+			if(this.pageNum == this.totalPage){
+				return false
+			}
+			this.pageNum ++;
+			this.getCardList()
+		},
+		// 跳转到某一页
+		jumpPage(){
+			if(this.pageNum>this.totalPage)
+				this.pageNum = this.totalPage;
+			this.getCardList()
+		},
+	},
+	onLoad(options) {
+		this.isLeft = options.pid;
+		this.isRight = options.id;
+		// 首页分类数据
+		this.getType();
+		// 名片列表数据
+		this.getCardList();
+	},
+};
+</script>
+
+<style>
+@import url('../../style/index');
+
+</style>