作者 lihongjuan

1

要显示太多修改。

为保证性能只显示 31 of 31+ 个文件。

<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(/&forall;/g, '∀');
str = str.replace(/&part;/g, '∂');
str = str.replace(/&exist;/g, '∃');
str = str.replace(/&empty;/g, '∅');
str = str.replace(/&nabla;/g, '∇');
str = str.replace(/&isin;/g, '∈');
str = str.replace(/&notin;/g, '∉');
str = str.replace(/&ni;/g, '∋');
str = str.replace(/&prod;/g, '∏');
str = str.replace(/&sum;/g, '∑');
str = str.replace(/&minus;/g, '−');
str = str.replace(/&lowast;/g, '∗');
str = str.replace(/&radic;/g, '√');
str = str.replace(/&prop;/g, '∝');
str = str.replace(/&infin;/g, '∞');
str = str.replace(/&ang;/g, '∠');
str = str.replace(/&and;/g, '∧');
str = str.replace(/&or;/g, '∨');
str = str.replace(/&cap;/g, '∩');
str = str.replace(/&cup;/g, '∪');
str = str.replace(/&int;/g, '∫');
str = str.replace(/&there4;/g, '∴');
str = str.replace(/&sim;/g, '∼');
str = str.replace(/&cong;/g, '≅');
str = str.replace(/&asymp;/g, '≈');
str = str.replace(/&ne;/g, '≠');
str = str.replace(/&le;/g, '≤');
str = str.replace(/&ge;/g, '≥');
str = str.replace(/&sub;/g, '⊂');
str = str.replace(/&sup;/g, '⊃');
str = str.replace(/&nsub;/g, '⊄');
str = str.replace(/&sube;/g, '⊆');
str = str.replace(/&supe;/g, '⊇');
str = str.replace(/&oplus;/g, '⊕');
str = str.replace(/&otimes;/g, '⊗');
str = str.replace(/&perp;/g, '⊥');
str = str.replace(/&sdot;/g, '⋅');
return str;
}
// HTML 支持的希腊字母
function strGreeceDiscode(str) {
str = str.replace(/&Alpha;/g, 'Α');
str = str.replace(/&Beta;/g, 'Β');
str = str.replace(/&Gamma;/g, 'Γ');
str = str.replace(/&Delta;/g, 'Δ');
str = str.replace(/&Epsilon;/g, 'Ε');
str = str.replace(/&Zeta;/g, 'Ζ');
str = str.replace(/&Eta;/g, 'Η');
str = str.replace(/&Theta;/g, 'Θ');
str = str.replace(/&Iota;/g, 'Ι');
str = str.replace(/&Kappa;/g, 'Κ');
str = str.replace(/&Lambda;/g, 'Λ');
str = str.replace(/&Mu;/g, 'Μ');
str = str.replace(/&Nu;/g, 'Ν');
str = str.replace(/&Xi;/g, 'Ν');
str = str.replace(/&Omicron;/g, 'Ο');
str = str.replace(/&Pi;/g, 'Π');
str = str.replace(/&Rho;/g, 'Ρ');
str = str.replace(/&Sigma;/g, 'Σ');
str = str.replace(/&Tau;/g, 'Τ');
str = str.replace(/&Upsilon;/g, 'Υ');
str = str.replace(/&Phi;/g, 'Φ');
str = str.replace(/&Chi;/g, 'Χ');
str = str.replace(/&Psi;/g, 'Ψ');
str = str.replace(/&Omega;/g, 'Ω');
str = str.replace(/&alpha;/g, 'α');
str = str.replace(/&beta;/g, 'β');
str = str.replace(/&gamma;/g, 'γ');
str = str.replace(/&delta;/g, 'δ');
str = str.replace(/&epsilon;/g, 'ε');
str = str.replace(/&zeta;/g, 'ζ');
str = str.replace(/&eta;/g, 'η');
str = str.replace(/&theta;/g, 'θ');
str = str.replace(/&iota;/g, 'ι');
str = str.replace(/&kappa;/g, 'κ');
str = str.replace(/&lambda;/g, 'λ');
str = str.replace(/&mu;/g, 'μ');
str = str.replace(/&nu;/g, 'ν');
str = str.replace(/&xi;/g, 'ξ');
str = str.replace(/&omicron;/g, 'ο');
str = str.replace(/&pi;/g, 'π');
str = str.replace(/&rho;/g, 'ρ');
str = str.replace(/&sigmaf;/g, 'ς');
str = str.replace(/&sigma;/g, 'σ');
str = str.replace(/&tau;/g, 'τ');
str = str.replace(/&upsilon;/g, 'υ');
str = str.replace(/&phi;/g, 'φ');
str = str.replace(/&chi;/g, 'χ');
str = str.replace(/&psi;/g, 'ψ');
str = str.replace(/&omega;/g, 'ω');
str = str.replace(/&thetasym;/g, 'ϑ');
str = str.replace(/&upsih;/g, 'ϒ');
str = str.replace(/&piv;/g, 'ϖ');
str = str.replace(/&middot;/g, '·');
return str;
}
function strcharacterDiscode(str) {
// 加入常用解析
str = str.replace(/&nbsp;/g, ' ');
str = str.replace(/&ensp;/g, ' ');
str = str.replace(/&emsp;/g, ' ');
str = str.replace(/&quot;/g, "'");
str = str.replace(/&amp;/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>
... ...