Commit 6e804f35 by huahua

初始化小程序代码

parent b8128886
# Created by .ignore support plugin (hsz.mobi)
.idea/
node_modules/
unpackage/
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"default" :
{
"launchtype" : "local"
},
"mp-weixin" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
}
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>shoppingMall_web</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>
<script>
import updata from '@/util/updata.js'; //版本更新
import homeservice from '@/service/homeservice.js';
export default {
globalData: {
typefacedata: [],
num:0
},
onLaunch: function() {
// console.log('App Launch');
// 字体列表
homeservice.queryList({
s: 'Material.fontFamilyList'
}).then(result => {
result.forEach(item=>{
item.long = false
item.textlong = null
})
result.unshift({
id: 0,
key: "SourceHanSansCN-Normal",
remark: "",
title: "思源黑体",
textlong:true,
long:true
})
this.globalData.typefacedata = result
this.$base.typefacedata = this.globalData.typefacedata
var t1 = new Date().getTime();
var that = this
this.globalData.typefacedata.forEach(textlist => {
wx.loadFontFace({
global:true,
family: textlist.key,
source: 'url(' + textlist.remark + ')',
desc: {
weight: 100
},
success: function(message) {
textlist.textlong = true
},
fail: function(message) {
textlist.textlong = false
},
complete(res) {
textlist.long = true
that.globalData.typefacedata.forEach(item=>{
if(item.long == true){
that.globalData.num++
}
})
that.$base.typefacedata = that.globalData.typefacedata
if(that.globalData.num == that.globalData.typefacedata.length){
// console.log("加载字体耗时 "+ (new Date().getTime() - t1) +" 毫秒")
that.$base.typefacedata = that.globalData.typefacedata
}
that.globalData.num = 0
}
})
})
}).catch(err => {
});
},
onShow: function() {
console.log('App Show');
//调用监听网络状态的方法
wx.getNetworkType({
success: function(res) {
if (res.networkType == 'none') {
uni.showToast({
title: '网络似乎不太顺畅',
icon: 'none',
duration: 2000
});
}
}
})
},
onHide: function() {
console.log('App Hide');
}
};
</script>
<style lang="scss">
page,
.page {
height: 100%;
width: 100%;
background-color: #ebeef5;
font-size: 28upx;
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
}
.hover-class-bg {
background: #888888 !important;
}
.hover-class-text {
color: #888888 !important;
}
</style>
import request from '../util/request'
import $n from '../util/nothing'
import Enums from '../util/Enums'
import Qs from 'qs'
/**
* ajax请求
* @param {*}
*/
export function _request ({
url,
params = {},
method = 'post',
token = false,
timeout = false,
contentType = Enums.ContentType.JSON_UTF8,
headers = {}
} = {}) {
headers['Content-Type'] = contentType;
return request.request(url, $n._caseValue(contentType, Enums.ContentType.FORM_UTF8, Qs.stringify(params), params), {
method: method,
_token: token,
_timeout: timeout,
headers
})
}
/**
* 分页查询
* @param {*}
*/
export function _queryPage ({
url,
params = {},
page = {},
method = 'post',
token = false,
contentType = Enums.ContentType.JSON_UTF8
} = {}) {
return _request({
url,
params,
method,
token,
contentType,
headers: {
'pageNum': page.pageNum,
'pageSize': page.pageSize
}
})
}
/**
* 流式分页查询
* @param {*}
*/
export function _queryFlowPage ({
url,
params = {},
page = {},
method = 'post',
token = false,
contentType = Enums.ContentType.JSON_UTF8
} = {}) {
return _request({
url,
params,
method,
token,
contentType,
headers: {
'beginTime': page.beginTime,
'direction': page.direction,
'orderBy': page.orderBy,
'pageSize': page.pageSize
}
})
}
import Enums from '../util/Enums'
import {
_request
} from './BaseApi'
/**
* 登录
* @param {*} params
*/
export const _login = (params = {}) => _request({url: '/golf/index', params, method: 'post', contentType: Enums.ContentType.FORM_UTF8})
/**
* 查询用户信息
* @param {*} params
*/
// export const _queryUser = (id = null) => _request({url: '/member/info/' + id, params: {}, token: true, method: 'get'})
/**
* 刷新用户Token
* @param {*} params
*/
// export const _refreshToken = (oldToken = null) => _request({url: '/sso/refreshToken', params: {token: oldToken}, token: true, method: 'post'})
This diff is collapsed. Click to expand it.
import Enums from '../util/Enums'
import {
_request
} from './BaseApi'
/**
* contentType: Enums.ContentType.FORM_UTF8
*
* @param {*} params
*/
export const route = (params = {}) => _request({url: '/golf/index', params, method: 'post',token: true})
export const route_timeout = (params = {}) => _request({url: '/golf/index', params, method: 'post',token: true,timeout: true})
export const newroute = (params = {}) => _request({url: '/golf/index/index', params, method: 'post',token: true})
\ No newline at end of file
export default {
app: {
APP_USER: 'APP_USER', // app信息
WX_INFO: 'WX_INFO', // 微信信息
USER_INFO: 'USER_INFO', // 用户信息
DATA_SYNC_TIME: 'DATA_SYNC_TIME', // 数据同步时间
BACKGROUND_COLOR: 'BACKGROUND_COLOR', // 背景色
NAVIGATION_BAR_BACKGROUND_COLOR: 'NAVIGATION_BAR_BACKGROUND_COLOR', // 导航条背景颜色
NAVIGATION_BAR_FRONT_COLOR: 'NAVIGATION_BAR_FRONT_COLOR' // 导航条前景颜色
},
SEARCH: 'SEARCH', // 搜索
DECIMALS: 'DECIMALS', // 小数位数
DICT: 'DICT_' // 字典
}
import CacheKeys from './CacheKeys'
/**
* 本地存储KEY前缀
*/
const _KEY_PREFIX = 'HL_'
/**
* 用户级缓存定义
*/
const CACHE_LEVEL_USER = []
/**
* 构造缓存KEY
* @param {*} key
*/
const buildKey = (key) => {
let newKey = _KEY_PREFIX
newKey += CACHE_LEVEL_USER.indexOf(key) !== -1 ? (newKey.endsWith('_') ? '' : '_') + this.$AppContext.$store.getters.sysUser
.username : ''
return newKey + (newKey.endsWith('_') ? '' : '_') + key
}
/**
* 缓存对象API
*/
const cache = {
$Keys: CacheKeys,
_KEY_PREFIX: _KEY_PREFIX,
set: (object) => uni.setStorage(Object.assign(object, {
key: buildKey(object.key)
})),
get: (object) => uni.getStorage(Object.assign(object, {
key: buildKey(object.key)
})),
setSync: (key, data) => uni.setStorageSync(buildKey(key), data),
getSync: (key) => uni.getStorageSync(buildKey(key)),
remove: (object) => uni.removeStorage(Object.assign(object, {
key: buildKey(object.key)
})),
removeSync: (key) => uni.removeStorageSync(buildKey(key)),
clear: (object) => uni.clearStorage(object),
clearSync: () => uni.clearStorageSync(),
getInfo: (object) => uni.getStorageInfo(object),
getInfoSync: () => uni.getStorageInfoSync()
}
export default cache
## 使用注意
- 引入该组件,用v-if控制组件,组件create会触发喷发特效函数,然后可以传入一些位置参数,具体参考组件内的props属性,每个属性都备注了
-
## 示例代码
```
<template>
<view>
<fireworks v-if="isReady" />
</view>
</template>
<script>
import fireworks from '@/components/fireworks/index.vue'
export default {
data() {
return {
isReady: false
}
},
components: {
fireworks
},
onReady() {
this.$nextTick(() => {//后面记得销毁哈,不使用时设置为false
setTimeout(() => {
this.isReady = true;
}, 50)
})
},
}
</script>
```
\ No newline at end of file
<template>
<canvas class="fire-canvas" :style="{width: width + 'px', height: height + 'px', 'z-index': zIndex}"
:canvas-id="canvasId" @error="canvasIdErrorCallback"></canvas>
</template>
<script>
/*
浏览器的最高刷新赔率(最后一个表示1秒刷新60次)
*/
const minBrowserRefreshTime = window && (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame) || function(t) {
setTimeout(t, 1e3 / 60)
}
const systenInfo = uni.getSystemInfoSync();
let fireCanvasBox = null;
export default {
props: {
/*
礼花数量(最好小于500,太多会卡顿)
*/
particleCount: {
type: [Number, String],
default: 80
},
/*取值 0-360
喷发角度示意图(简单说就是喷射方向)
礼花(90)
礼花(180) 礼花0
礼花(270)
*/
angle: {
type: [Number, String],
default: 90
},
/*
爆炸范围
*/
spread: {
type: [Number, String],
default: 100
},
/*
喷发的初始速度
*/
startVelocity: {
type: [Number, String],
default: 45
},
/*
喷发的衰退时间,超出canvas会被清除,跟startVelocity配合使用
*/
decay: {
type: [Number, String],
default: 0.9
},
/*
刷新几次消失(其实是透明度为0),这个跟间隔的刷新频率有关
*/
ticks: {
type: [Number, String],
default: 150
},
/*
礼花层级
*/
zIndex: {
type: [Number, String],
default: 1
},
/*
所有要随机的礼花颜色预选值
*/
colors: {
type: Array,
default: () => ["#5BC0EB", "#2176AE", "#FDE74C", "#9BC53D", "#E55934", "#FA7921", "#FF4242"]
},
canvasId: {
type: String,
default: 'fireCanvas'
},
/*
canvas宽度(单位px)
*/
width: {
type: [Number, String],
default: () => {
return systenInfo.windowWidth
}
},
/*
canvas高度(单位px)
*/
height: {
type: [Number, String],
default: () => {
return systenInfo.windowHeight
}
},
/*
中心点-x
*/
x: {
type: [Number, String],
default: () => {
return systenInfo.windowWidth / 2
}
},
/*
中心点-y
*/
y: {
type: [Number, String],
default: () => {
return systenInfo.windowHeight * 0.4
}
}
},
data() {
return {
/*
手机分辨率
*/
pixelRatio: systenInfo.pixelRatio
}
},
onShow(){
console.log('onShow');
this.initCanvas();
}, created() {
console.log('created');
this.initCanvas();
},
methods: {
open(){
},
/*
转16进制(颜色用)
*/
parseInt16(t) {
return parseInt(t, 16);
},
canvasIdErrorCallback(e) {
console.error(e.detail.errMsg)
},
initCanvas() {
fireCanvasBox = null;
fireCanvasBox = uni.createCanvasContext(this.canvasId, this);
fireCanvasBox.fillRect(0, 0, this.width * this.pixelRatio, this.height * this.pixelRatio);
fireCanvasBox.scale(this.pixelRatio,this.pixelRatio);
fireCanvasBox.save();
this.fireworksDraw();
},
fireworksDraw() {
let ribbon = [] ,//彩带容器
particleCount = this.particleCount, n = null, r = null, a = null,i = null;
for (; particleCount--;){
n = {
x: this.x,
y: this.y,
angle: this.angle,
spread: this.spread,
startVelocity: this.startVelocity,
color: this.colors[particleCount % this.colors.length],
ticks: this.ticks,
decay: this.decay
},
i = 0,
r = n.angle * (Math.PI / 180),
a = n.spread * (Math.PI / 180);
ribbon.push({//菜单位置初始化
x: n.x,
y: n.y,
depth: .5 * Math.random() + .6,
wobble: 10 * Math.random(),
velocity: .5 * n.startVelocity + Math.random() * n.startVelocity,
angle2D: -r + (.5 * a - Math.random() * a),
tiltAngle: Math.random() * Math.PI,
color: (i = (n.color + "").replace(/[^0-9a-f]/gi, ""), i.length < 6 && (i = i[0] + i[0] + i[1] + i[1] + i[2] + i[2]), {//生成随机颜色
r: this.parseInt16(i.substring(0, 2)),
g: this.parseInt16(i.substring(2, 4)),
b: this.parseInt16(i.substring(4, 6))
}),
tick: 0,
totalTicks: n.ticks,
decay: n.decay,
random: Math.random() + 5,
tiltSin: 0,
tiltCos: 0,
wobbleX: 0,
wobbleY: 0
})
}
minBrowserRefreshTime(function drawRibbon() {
if(!fireCanvasBox) return ;
fireCanvasBox.draw(),
fireCanvasBox.restore(),
ribbon = ribbon.filter((e) => {
e.x += Math.cos(e.angle2D) * e.velocity,
e.y += Math.sin(e.angle2D) * e.velocity + 5 * e.depth,
e.wobble += .1,
e.velocity *= e.decay,
e.tiltAngle += .02 * Math.random() + .12,
e.tiltSin = Math.sin(e.tiltAngle),
e.tiltCos = Math.cos(e.tiltAngle),
e.random = Math.random() + 4,
e.wobbleX = e.x + 10 * Math.cos(e.wobble) * e.depth,
e.wobbleY = e.y + 10 * Math.sin(e.wobble) * e.depth;
// 开始画图
fireCanvasBox.fillStyle="rgba(" + e.color.r + ", " + e.color.g + ", " + e.color.b + ", " + (1 - (e.tick++) / e.totalTicks) + ")",
fireCanvasBox.beginPath(),
fireCanvasBox.moveTo(Math.floor(e.x),Math.floor(e.y)),
fireCanvasBox.lineTo(Math.floor(e.wobbleX),Math.floor(e.y + e.random * e.tiltSin)),
fireCanvasBox.lineTo(Math.floor(e.wobbleX + e.random * e.tiltCos),Math.floor(e.wobbleY + e.random * e.tiltSin)),
fireCanvasBox.lineTo(Math.floor(e.x + e.random * e.tiltCos),Math.floor(e.wobbleY)),
fireCanvasBox.closePath(),
fireCanvasBox.fill();
return e.tick < e.totalTicks
})
ribbon.length ? minBrowserRefreshTime(drawRibbon): fireCanvasBox = null;//轮询调用或者释放掉
}
)
}
},
}
</script>
<style>
.fire-canvas{
position: fixed;
top: 0px;
left: 0px;
pointer-events: none;
z-index: 99999999;
}
</style>
#### 【注意】由于赶时间,只做了功能性测试,兼容性测试暂时无法进行,更不用说优化测试了。欢迎有遇到问题的留言,或者自己动手修改也可以。
#### 【注意】因为属于业余时间开发的一个项目所依赖的插件,所以更新较缓慢。
### 使用方式
```javascript
import Cropper from '@/components/cropper/cropper.vue';
```
```html
<cropper :imagePath="originalFaceSrc" :aspectRatio="1" @complete="complete" @cancel="cancel" v-if="handleFaceStatus"></cropper>
```
使用v-if控制显示,mounted内执行init方法,使用简单,操作便利。
## 参数
| 参数 | 类型 | 解释 | 默认 | 必填 | 备注 |
| ------------ | ------------ | ------------ | ------------ | ------------ | ------------ |
| quality | Number | 返回图片质量 | 1 | 否 | 如返回的图片仅需预览不用上传,请适当调低 |
| imagePath | String | 原始图片路径 |"" | 是 | blob、静态图片资源地址或者base64(未测试) |
| outputFileType | String | 目标文件的类型 | jpg | 否 | jpg:输出jpg格式图片;png:输出png格式图片 |
| aspectRatio | Number, null | 目标图片的宽高比 | null | 否 | null,即不限制剪裁宽高比。aspectRatio需大于0 |
| minBoxWidthRatio | Number | 最小剪裁尺寸与原图尺寸的比率(宽) | 0.15 | 否 | 宽度最小剪裁到原图的0.15宽 |
| minBoxHeightRatio | Number | 最小剪裁尺寸与原图尺寸的比率(高) | 0.15 | 否 | 当设置aspectRatio时,minBoxHeight值设置无效。minBoxHeight值由minBoxWidth 和 aspectRatio自动计算得到 |
| initialBoxWidthRatio | Number | 剪裁框初始大小比率(宽) | 0.8 | 否 | 裁框默认宽度为图片宽度的0.8倍 |
| initialBoxHeightRatio | Number | 剪裁框初始大小比率(高) | 0.8 | 否 | 当设置aspectRatio时,initialBoxHeightRatio值设置无效。initialBoxHeightRatio值由initialBoxWidthRatio 和 aspectRatio自动计算得到 |
## 事件
| 事件名 | 解释 | 参数 | 备注 |
| ------------ | ------------ | ------------ | ------------ |
| reset | 用户点击重做后触发 | 无 | 可能无用,但留一个给开发者备用 |
| cancel | 用户点击取消后触发 | 无 | 开发者可以将组件置为消失v-if(尽量不要用v-show) |
| complete | 用户点击裁剪后触发 | path:路径,h5为base64,app与小程序为临时路径;param:裁切参数,见【备注1】 | 核心功能 |
### 备注1
param:
```json
x:Number, //裁切左上角X坐标
y:Number, //裁切左上角Y坐标
width:Number, //裁切宽度
height:Number, //裁切高度
rotate:Number, //旋转(未实现,预留)
scaleX:Number, //X轴缩放(未实现,预留)
scaleY:Number, //Y轴缩放(未实现,预留)
```
### 备注2
本组件样式支持iphone安全范围但需要手动开启
请在插件被样式中最后备注的地方解除备注即可。
控制台会报错,无视即可。
或者复制如下样式样式代码
```css
// 安全域兼容样式
page {
--safe-area-inset-top: 0px;
--safe-area-inset-right: 0px;
--safe-area-inset-bottom: 0px;
--safe-area-inset-left: 0px;
@supports (top: constant(safe-area-inset-top)) {
--safe-area-inset-top: constant(safe-area-inset-top);
--safe-area-inset-right: constant(safe-area-inset-right);
--safe-area-inset-bottom: constant(safe-area-inset-bottom);
--safe-area-inset-left: constant(safe-area-inset-left);
}
@supports (top: env(safe-area-inset-top)) {
--safe-area-inset-top: env(safe-area-inset-top);
--safe-area-inset-right: env(safe-area-inset-right);
//--safe-area-inset-bottom: 12px;
--safe-area-inset-bottom: env(safe-area-inset-bottom);
--safe-area-inset-left: env(safe-area-inset-left);
}
}
```
\ No newline at end of file
<template>
<view class="fr_img">
<!-- 主图 -->
<image class="fr_img_content"
:src="src" :mode="mode" :lazy-load="lazyLoad" :webp="webp" :show-menu-by-longpress="showMenuByLongpress" @error="onImgError" @load="onImgLoad"/>
<view v-if="loading_complete && completeTransition" class="loading_complete_transition"></view>
<!-- 加载失败图 -->
<view v-if="loading_error" class="loading_error"> <image class="loading_error_img" :src="loadingErrorImg" mode="aspectFit"></image> </view>
<!-- 加载中图 -->
<view v-else-if="!loading_complete" class="loading">
<image v-if="loadingIngImg == 'two-balls'" class="loading_img" :src="require('./loading_two_balls.gif')" mode="aspectFit"></image>
<view v-if="loadingIngImg == 'oblique-light'" class="loading_oblique_light"></view>
<view v-if="loadingIngImg == 'looming'" class="loading_looming"></view>
</view>
</view>
</template>
<script>
export default {
props: {
// 和官方Image组件属性一致
src: {
type: String,
default: "",
},
mode: {
type: String,
default: "",
},
lazyLoad: {
type: Boolean,
default: false,
},
webp: {
type: Boolean,
default: false,
},
showMenuByLongpress: {
type: Boolean,
default: false,
},
// 可选: 加载失败图片:可以本地url、网络url、base64 (与src一致)
loadingErrorImg: {
type: String,
default: require('./loading_error.png'),
},
// 可选: 加载中的图片
// two-balls = 两个球来回转
// oblique-light = 斜光
// looming = 若影若现
// 本地url、网络url、base64 = 自定义的加载中图片(与src一致)
loadingIngImg: {
type: String,
default: "oblique-light",
},
// 可选:是否需要加载完成动画
completeTransition: {
type: Boolean,
default: true,
},
},
data() {
return {
loading_complete: false,
loading_error: false,
};
},
methods: {
onImgError: function(event){
this.loading_error = true;
this.$emit("error", event);
},
onImgLoad: function(event){
this.loading_complete = true;
this.$emit("load", event);
},
},
}
</script>
<style lang="scss">
.fr_img{
width: 100%;
height: 100%;
position: relative;
.fr_img_content{
width: 100%;
height: 100%;
position: absolute;
}
.loading_complete_transition{
width: 100%;
height: 100%;
position: absolute;
background-color: #FFFFFF;
animation: loading_complete_transition 1.2s forwards;
}
@keyframes loading_complete_transition{
0% { opacity: 1; }
100% { opacity: 0; }
}
.loading_error{
width: 100%;
height: 100%;
background-color: #F8F8F8;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
.loading_error_img{
width: 100rpx;
height: 100rpx;
max-width: 100%;
max-height: 100%;
}
}
.loading{
width: 100%;
height: 100%;
background-color: #FFFFFF;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
// 加载图
.loading_img{
width: 100rpx;
height: 100rpx;
max-width: 100%;
max-height: 100%;
}
// 斜光
.loading_oblique_light{
width: 100%;
height: 100%;
background-color: #e3e3e3;
background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 80%);
background-size: 100rpx 100%;
background-repeat: repeat-y;
background-position:0 0;
animation: loading_oblique_light .6s infinite;
}
@keyframes loading_oblique_light {
to {
background-position: 200% 0;
}
}
// 若隐若现
.loading_looming{
width: 100%;
height: 100%;
animation: loading_looming 1s infinite linear;
background-color: #e3e3e3;
}
@keyframes loading_looming{
0% {background-color:rgba($color: #e3e3e3, $alpha: 0.5);}
50% {background-color:rgba($color: #e3e3e3, $alpha: 1.0);}
100% {background-color:rgba($color: #e3e3e3, $alpha: 0.5);}
}
}
}
</style>
This source diff could not be displayed because it is too large. You can view the blob instead.
/* 线形 */
.line {
background-color: #fff;
color: #555;
border-radius: 8upx;
padding: 10px 15px;
overflow: hidden;
width: 85%;
margin: auto;
position: relative;
top: 200px;
}
.v-title{
width: 100%;
}
.loadline{
height:2px;
}
/* 圆形 */
.circle{
position: absolute;
top: 300px;
width: 100%;
}
.third{
margin: auto;
width: 180px;
height: 180px;
border-radius: 50%;
position: relative;
}
.second{
width: 180px;
height: 180px;
border-radius: 50%;
clip:rect(0,91px,auto,0);
position: absolute;
}
.second_{
width: 180px;
height: 180px;
border-radius: 50%;
clip:rect(0,auto,auto,90px);
}
.first{
width: 180px;
height: 180px;
border-radius: 50%;
clip:rect(0,auto,auto,90px);
}
.third *{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.mask{
width: 80%;
height: 80%;
border-radius: 50%;
margin: auto;
box-shadow: -2px -2px 4px rgba(0,0,0,.5) inset,2px 2px 4px rgba(0,0,0,.5) inset;
z-index: 10;
}
.mask>text{
display: block;
color: white;
line-height: 145px;
text-align: center;
}
/* 球形 */
.ball{
/* position: absolute; */
overflow: hidden;
/* left: 20%;
top: 20%; */
margin: auto;
padding-top: 200px;
}
.loading-ball{
border-radius: 50%;
border: 5px solid #5be9ff;
overflow: hidden;
margin: auto;
}
.loading-wave{
position: absolute;
border-radius: 50%;
background: #5be9ff;
}
.loading-wave1,.loading-wave2{
position: absolute;
left: 50%;
/* background: #FFFFFF; */
opacity: .5;
border-radius: 37%;
transform: translate(-50%,-40%);
animation: rotate 2s linear infinite;
z-index: 10;
/* transition: 0.3s; */
}
.loading-wave2{
border-radius: 40%;
opacity: 0.7;
transform: translate(-50%,-43%) rotate(0);
animation: rotate 3s linear -5s infinite;
z-index: 20;
}
.loading-text{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
color: #FFFFFF;
}
@keyframes rotate{
50%{
transform: translate(-50%,-43%) rotate(180deg);
}
100%{
transform: translate(-50%,-40%) rotate(360deg);
}
}
\ No newline at end of file
<template>
<view>
<view>
<view class="line" v-if="loadType=='line'">
<view class="loadline"
:style="{width:loadPercent+'%',
background:lineInfo.colorChange?'linear-gradient(to right,'+lineInfo.loadColor+')':lineInfo.loadColor.split(',')[0]}"></view>
<view class="v-title">
<text class="fa fa-spinner fa-spin"></text>
{{loadText}}{{loadPercent}}%
</view>
</view>
<view class="circle" v-if="loadType=='circle'">
<view class="third" :style="{background:circleInfo.background}">
<view class="second" v-if="loadPercent!=100" :style="{background:circleInfo.foreground}"></view>
<view class="second_" :style="{transform: 'rotate('+(loadPercent>=50?((loadPercent-50)/100)*360:0)+'deg)',background:circleInfo.background}"></view>
<view class="first" v-if="loadPercent<50" :style="{transform: 'rotate('+(360*(loadPercent/100))+'deg)',background:circleInfo.foreground}"></view>
<view class="mask" :style="{background:circleInfo.circleColor}">
<text>{{loadPercent}}%</text>
</view>
</view>
</view>
<view class="ball" v-if="loadType=='ball'" :style="{width:(ballSize_+25)+'px',height:(ballSize_+25)+'px'}">
<view class="loading-ball" :style="{width:ballSize_+'px',height:ballSize_+'px',padding:ballInfo.ballPadding}">
<view class="loading-wave" :style="{overflow:ballInfo.ballType=='all'?'initial':'hidden',width:ballSize_+'px',height:ballSize_+'px'}">
<view v-if="loadPercent<100" class="loading-wave1" :style="{background:ballInfo.waveColor,top:(ballInfo.ballType=='all'?-(loadPercent*1.3):-(loadPercent*1.2))-4+'%',width:ballSize_*2+'px',height:ballSize_*2+'px'}"></view>
<view v-if="loadPercent<100" class="loading-wave2" :style="{background:ballInfo.waveColor,top:(ballInfo.ballType=='all'?-(loadPercent*1.3):-(loadPercent*1.2))-4+'%',width:ballSize_*2+'px',height:ballSize_*2+'px'}"></view>
<view class="loading-text" :style="{lineHeight:ballSize_+'px'}">{{loadPercent}}%</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
loadType:{//加载条的类型,line-线形,circle-圆形
type:String,
default:'line'
},
lineInfo:{
type:Object,
default:function(){
var info={
colorChange:false,//颜色是否渐变
loadColor:'#6ee2e1,#2ba98c,#a07e1e'//进度条颜色,渐变时色值至少三种,非渐变时只需一种色值,多传取第一条,多个色值','逗号分开
}
return info;
}
},
circleInfo:{
type:Object,
default:function(){
var info={
foreground:'#FFFFFF',//圆形进度条前景色
background:'#6ED4BF',//背景色
circleColor:'#cec4c4'//中心圆盘的颜色
}
return info;
}
},
ballInfo:{
type:Object,
default:function(){
var info={
ballType:'all',//center-只中心出现水波,all-球面也出现水波
ballSize:100,//球形的大小,最大200,最小50,超出范围可能样式需要再进行优化
waveColor:'#cec4c4',//水波颜色
ballPadding:'5px',//球内间距
}
return info;
}
},
loadText:{//加载时显示的文字
type:String,
default:'加载中:'
},
loadPercent:{//进度百分比,不需要加%
type:Number,
default:0
}
},
data() {
return {
ballSize_:0
};
},
mounted() {
if(this.ballInfo.ballSize>200){
this.ballSize_=200;
}else if(this.ballInfo.ballSize<50){
this.ballSize_=50;
}else{
this.ballSize_=this.ballInfo.ballSize;
}
}
}
</script>
<style>
/* 图标使用的是font-awesome,图标可在http://fontawesome.dashgame.com/找 */
@import url("./css/font-awesome.min.css");
@import url("./css/loadline.css");
</style>
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf?t=1536565627510') format('truetype');
}
.m-icon {
font-family: uniicons;
font-size: 24px;
font-weight: normal;
font-style: normal;
line-height: 1;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
.m-icon.uni-active {
color: #007aff;
}
.m-icon-contact:before {
content: '\e100';
}
.m-icon-person:before {
content: '\e101';
}
.m-icon-personadd:before {
content: '\e102';
}
.m-icon-contact-filled:before {
content: '\e130';
}
.m-icon-person-filled:before {
content: '\e131';
}
.m-icon-personadd-filled:before {
content: '\e132';
}
.m-icon-phone:before {
content: '\e200';
}
.m-icon-email:before {
content: '\e201';
}
.m-icon-chatbubble:before {
content: '\e202';
}
.m-icon-chatboxes:before {
content: '\e203';
}
.m-icon-phone-filled:before {
content: '\e230';
}
.m-icon-email-filled:before {
content: '\e231';
}
.m-icon-chatbubble-filled:before {
content: '\e232';
}
.m-icon-chatboxes-filled:before {
content: '\e233';
}
.m-icon-weibo:before {
content: '\e260';
}
.m-icon-weixin:before {
content: '\e261';
}
.m-icon-pengyouquan:before {
content: '\e262';
}
.m-icon-chat:before {
content: '\e263';
}
.m-icon-qq:before {
content: '\e264';
}
.m-icon-videocam:before {
content: '\e300';
}
.m-icon-camera:before {
content: '\e301';
}
.m-icon-mic:before {
content: '\e302';
}
.m-icon-location:before {
content: '\e303';
}
.m-icon-mic-filled:before,
.m-icon-speech:before {
content: '\e332';
}
.m-icon-location-filled:before {
content: '\e333';
}
.m-icon-micoff:before {
content: '\e360';
}
.m-icon-image:before {
content: '\e363';
}
.m-icon-map:before {
content: '\e364';
}
.m-icon-compose:before {
content: '\e400';
}
.m-icon-trash:before {
content: '\e401';
}
.m-icon-upload:before {
content: '\e402';
}
.m-icon-download:before {
content: '\e403';
}
.m-icon-close:before {
content: '\e404';
}
.m-icon-redo:before {
content: '\e405';
}
.m-icon-undo:before {
content: '\e406';
}
.m-icon-refresh:before {
content: '\e407';
}
.m-icon-star:before {
content: '\e408';
}
.m-icon-plus:before {
content: '\e409';
}
.m-icon-minus:before {
content: '\e410';
}
.m-icon-circle:before,
.m-icon-checkbox:before {
content: '\e411';
}
.m-icon-close-filled:before,
.m-icon-clear:before {
content: '\e434';
}
.m-icon-refresh-filled:before {
content: '\e437';
}
.m-icon-star-filled:before {
content: '\e438';
}
.m-icon-plus-filled:before {
content: '\e439';
}
.m-icon-minus-filled:before {
content: '\e440';
}
.m-icon-circle-filled:before {
content: '\e441';
}
.m-icon-checkbox-filled:before {
content: '\e442';
}
.m-icon-closeempty:before {
content: '\e460';
}
.m-icon-refreshempty:before {
content: '\e461';
}
.m-icon-reload:before {
content: '\e462';
}
.m-icon-starhalf:before {
content: '\e463';
}
.m-icon-spinner:before {
content: '\e464';
}
.m-icon-spinner-cycle:before {
content: '\e465';
}
.m-icon-search:before {
content: '\e466';
}
.m-icon-plusempty:before {
content: '\e468';
}
.m-icon-forward:before {
content: '\e470';
}
.m-icon-back:before,
.m-icon-left-nav:before {
content: '\e471';
}
.m-icon-checkmarkempty:before {
content: '\e472';
}
.m-icon-home:before {
content: '\e500';
}
.m-icon-navigate:before {
content: '\e501';
}
.m-icon-gear:before {
content: '\e502';
}
.m-icon-paperplane:before {
content: '\e503';
}
.m-icon-info:before {
content: '\e504';
}
.m-icon-help:before {
content: '\e505';
}
.m-icon-locked:before {
content: '\e506';
}
.m-icon-more:before {
content: '\e507';
}
.m-icon-flag:before {
content: '\e508';
}
.m-icon-home-filled:before {
content: '\e530';
}
.m-icon-gear-filled:before {
content: '\e532';
}
.m-icon-info-filled:before {
content: '\e534';
}
.m-icon-help-filled:before {
content: '\e535';
}
.m-icon-more-filled:before {
content: '\e537';
}
.m-icon-settings:before {
content: '\e560';
}
.m-icon-list:before {
content: '\e562';
}
.m-icon-bars:before {
content: '\e563';
}
.m-icon-loop:before {
content: '\e565';
}
.m-icon-paperclip:before {
content: '\e567';
}
.m-icon-eye:before {
content: '\e568';
}
.m-icon-arrowup:before {
content: '\e580';
}
.m-icon-arrowdown:before {
content: '\e581';
}
.m-icon-arrowleft:before {
content: '\e582';
}
.m-icon-arrowright:before {
content: '\e583';
}
.m-icon-arrowthinup:before {
content: '\e584';
}
.m-icon-arrowthindown:before {
content: '\e585';
}
.m-icon-arrowthinleft:before {
content: '\e586';
}
.m-icon-arrowthinright:before {
content: '\e587';
}
.m-icon-pulldown:before {
content: '\e588';
}
.m-icon-scan:before {
content: "\e612";
}
<template>
<view class="m-icon" :class="['m-icon-'+type]" @click="onClick()"></view>
</template>
<script>
export default {
props: {
/**
* 图标类型
*/
type: String
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>
<style>
@import "./m-icon.css";
</style>
module.exports = require('./lib/marked');
This source diff could not be displayed because it is too large. You can view the blob instead.
/* eslint-disable */
var provinceData = [{
"label": "北京市",
"value": "11"
},
{
"label": "天津市",
"value": "12"
},
{
"label": "河北省",
"value": "13"
},
{
"label": "山西省",
"value": "14"
},
{
"label": "内蒙古自治区",
"value": "15"
},
{
"label": "辽宁省",
"value": "21"
},
{
"label": "吉林省",
"value": "22"
},
{
"label": "黑龙江省",
"value": "23"
},
{
"label": "上海市",
"value": "31"
},
{
"label": "江苏省",
"value": "32"
},
{
"label": "浙江省",
"value": "33"
},
{
"label": "安徽省",
"value": "34"
},
{
"label": "福建省",
"value": "35"
},
{
"label": "江西省",
"value": "36"
},
{
"label": "山东省",
"value": "37"
},
{
"label": "河南省",
"value": "41"
},
{
"label": "湖北省",
"value": "42"
},
{
"label": "湖南省",
"value": "43"
},
{
"label": "广东省",
"value": "44"
},
{
"label": "广西壮族自治区",
"value": "45"
},
{
"label": "海南省",
"value": "46"
},
{
"label": "重庆市",
"value": "50"
},
{
"label": "四川省",
"value": "51"
},
{
"label": "贵州省",
"value": "52"
},
{
"label": "云南省",
"value": "53"
},
{
"label": "西藏自治区",
"value": "54"
},
{
"label": "陕西省",
"value": "61"
},
{
"label": "甘肃省",
"value": "62"
},
{
"label": "青海省",
"value": "63"
},
{
"label": "宁夏回族自治区",
"value": "64"
},
{
"label": "新疆维吾尔自治区",
"value": "65"
},
{
"label": "台湾",
"value": "66"
},
{
"label": "香港",
"value": "67"
},
{
"label": "澳门",
"value": "68"
}
]
export default provinceData;
<template>
<div class="mpvue-picker">
<div :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></div>
<div class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
<div class="mpvue-picker__hd" catchtouchmove="true">
<div class="mpvue-picker__action" @click="pickerCancel">取消</div>
<div class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</div>
</div>
<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange">
<block>
<picker-view-column>
<div class="picker-item" v-for="(item,index) in provinceDataList" :key="index">{{item.label}}</div>
</picker-view-column>
<picker-view-column>
<div class="picker-item" v-for="(item,index) in cityDataList" :key="index">{{item.label}}</div>
</picker-view-column>
<picker-view-column>
<div class="picker-item" v-for="(item,index) in areaDataList" :key="index">{{item.label}}</div>
</picker-view-column>
</block>
</picker-view>
</div>
</div>
</template>
<script>
import provinceData from './city-data/province.js';
import cityData from './city-data/city.js';
import areaData from './city-data/area.js';
export default {
data() {
return {
pickerValue: [0, 0, 0],
provinceDataList: [],
cityDataList: [],
areaDataList: [],
/* 是否显示控件 */
showPicker: false,
};
},
created() {
this.init()
},
props: {
/* 默认值 */
pickerValueDefault: {
type: Array,
default(){
return [0, 0, 0]
}
},
/* 主题色 */
themeColor: String
},
watch:{
pickerValueDefault(){
this.init();
}
},
methods: {
init() {
this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理
this.provinceDataList = provinceData;
this.cityDataList = cityData[this.pickerValueDefault[0]];
this.areaDataList = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]];
this.pickerValue = this.pickerValueDefault;
},
show() {
setTimeout(() => {
this.showPicker = true;
}, 0);
},
maskClick() {
this.pickerCancel();
},
pickerCancel() {
this.showPicker = false;
this._$emit('onCancel');
},
pickerConfirm(e) {
this.showPicker = false;
this._$emit('onConfirm');
},
showPickerView() {
this.showPicker = true;
},
handPickValueDefault() {
if (this.pickerValueDefault !== [0, 0, 0]) {
if (this.pickerValueDefault[0] > provinceData.length - 1) {
this.pickerValueDefault[0] = provinceData.length - 1;
}
if (this.pickerValueDefault[1] > cityData[this.pickerValueDefault[0]].length - 1) {
this.pickerValueDefault[1] = cityData[this.pickerValueDefault[0]].length - 1;
}
if (this.pickerValueDefault[2] > areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1) {
this.pickerValueDefault[2] = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1;
}
}
},
pickerChange(e) {
let changePickerValue = e.mp.detail.value;
if (this.pickerValue[0] !== changePickerValue[0]) {
// 第一级发生滚动
this.cityDataList = cityData[changePickerValue[0]];
this.areaDataList = areaData[changePickerValue[0]][0];
changePickerValue[1] = 0;
changePickerValue[2] = 0;
} else if (this.pickerValue[1] !== changePickerValue[1]) {
// 第二级滚动
this.areaDataList =
areaData[changePickerValue[0]][changePickerValue[1]];
changePickerValue[2] = 0;
}
this.pickerValue = changePickerValue;
this._$emit('onChange');
},
_$emit(emitName) {
let pickObj = {
label: this._getLabel(),
value: this.pickerValue,
cityCode: this._getCityCode()
};
this.$emit(emitName, pickObj);
},
_getLabel() {
let pcikerLabel =
this.provinceDataList[this.pickerValue[0]].label +
'-' +
this.cityDataList[this.pickerValue[1]].label +
'-' +
this.areaDataList[this.pickerValue[2]].label;
return pcikerLabel;
},
_getCityCode() {
return this.areaDataList[this.pickerValue[2]].value;
}
}
};
</script>
<style>
.pickerMask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
}
.mpvue-picker-content {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
transition: all 0.3s ease;
transform: translateY(100%);
z-index: 3000;
}
.mpvue-picker-view-show {
transform: translateY(0);
}
.mpvue-picker__hd {
display: flex;
padding: 9px 15px;
background-color: #fff;
position: relative;
text-align: center;
font-size: 17px;
}
.mpvue-picker__hd:after {
content: ' ';
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #e5e5e5;
color: #e5e5e5;
transform-origin: 0 100%;
transform: scaleY(0.5);
}
.mpvue-picker__action {
display: block;
flex: 1;
color: #1aad19;
}
.mpvue-picker__action:first-child {
text-align: left;
color: #888;
}
.mpvue-picker__action:last-child {
text-align: right;
}
.picker-item {
text-align: center;
line-height: 40px;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
}
.mpvue-picker-view {
position: relative;
bottom: 0;
left: 0;
width: 100%;
height: 238px;
background-color: rgba(255, 255, 255, 1);
}
</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"
style="display:block;vertical-align:top;vertical-align:bottom;font-size:0;"/>
</template>
<script>
export default {
name: 'wxParseImg',
data() {
return {
newStyleStr: '',
preview: true,
};
},
props: {
node: {
type: Object,
default () {
return {};
},
},
},
inject: ['uparse'],
methods: {
wxParseImgTap(e) {
if (!this.preview) return;
const {
src
} = e.currentTarget.dataset;
if (!src) return;
this.uparse.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 || imageWidth === '100%' ? '100%;' : `${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;
this.uparse.removeImageUrl(src);
this.preview = false;
}
// 判断按照那种方式进行缩放
if (originalWidth > windowWidth) {
// 在图片width大于手机屏幕width时候
results.imageWidth = '100%';
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,
},
inject: ['uparse'],
methods: {
wxParseATap(e) {
const {
href
} = e.currentTarget.dataset;// TODO currentTarget才有dataset
if (!href) return;
this.uparse.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,
},
inject: ['uparse'],
methods: {
wxParseATap(e) {
const {
href
} = e.currentTarget.dataset;
if (!href) return;
this.uparse.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,
},
inject: ['uparse'],
methods: {
wxParseATap(e) {
const {
href
} = e.currentTarget.dataset;
if (!href) return;
this.uparse.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,
},
inject: ['uparse'],
methods: {
wxParseATap(e) {
const {
href
} = e.currentTarget.dataset;
if (!href) return;
this.uparse.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,
},
inject: ['uparse'],
methods: {
wxParseATap(e) {
const {
href
} = e.currentTarget.dataset;
if (!href) return;
this.uparse.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,
},
inject: ['uparse'],
methods: {
wxParseATap(e) {
const {
href
} = e.currentTarget.dataset;
if (!href) return;
this.uparse.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,
},
inject: ['uparse'],
methods: {
wxParseATap(e) {
const {
href
} = e.currentTarget.dataset;
if (!href) return;
this.uparse.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,
},
inject: ['uparse'],
methods: {
wxParseATap(e) {
const {
href
} = e.currentTarget.dataset;
if (!href) return;
this.uparse.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,
},
inject: ['uparse'],
methods: {
wxParseATap(e) {
const {
href
} = e.currentTarget.dataset;
if (!href) return;
this.uparse.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,
},
inject: ['uparse'],
methods: {
wxParseATap(e) {
const {
href
} = e.currentTarget.dataset;
if (!href) return;
this.uparse.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,
},
inject: ['uparse'],
methods: {
wxParseATap(e) {
const {
href
} = e.currentTarget.dataset;
if (!href) return;
this.uparse.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,
},
inject: ['uparse'],
methods: {
wxParseATap(e) {
const {
href
} = e.currentTarget.dataset;
if (!href) return;
this.uparse.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 (name === 'align') {
node.styleStr = node.styleStr || '';
node.styleStr = node.styleStr += 'text-align:' + 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,
};
/**
* 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>
<!--基础元素-->
<view class="wxParse" :class="className" v-if="!loading">
<view v-for="(node,index) of nodes" :key="index">
<wxParseTemplate :node="node" />
</view>
</view>
</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: '',
};
},
},
},
provide() {
return {
uparse: this
}
},
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.nodes)
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>
<style>
</style>
<template>
<text class="uni-badge" v-if="text" :class="inverted ? 'uni-badge-' + type + ' uni-badge--' + size + ' uni-badge-inverted' : 'uni-badge-' + type + ' uni-badge--' + size" @click="onClick()">{{text}}</text>
</template>
<script>
export default {
name: 'uni-badge',
props: {
type: {
type: String,
default: 'default'
},
inverted: {
type: Boolean,
default: false
},
text: {
type: String,
default: ''
},
size: { //small.normal
type: String,
default: 'normal'
}
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>
<style>
@charset "UTF-8";
.uni-badge {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
box-sizing: border-box;
font-size: 12px;
line-height: 1;
display: inline-block;
padding: 3px 6px;
color: #333;
border-radius: 100px;
background-color: #f1f1f1
}
.uni-badge.uni-badge-inverted {
padding: 0 5px 0 0;
color: #999;
background-color: transparent
}
.uni-badge-primary {
color: #fff;
background-color: #007aff
}
.uni-badge-primary.uni-badge-inverted {
color: #007aff;
background-color: transparent
}
.uni-badge-success {
color: #fff;
background-color: #4cd964
}
.uni-badge-success.uni-badge-inverted {
color: #4cd964;
background-color: transparent
}
.uni-badge-warning {
color: #fff;
background-color: #f0ad4e
}
.uni-badge-warning.uni-badge-inverted {
color: #f0ad4e;
background-color: transparent
}
.uni-badge-error {
color: #fff;
background-color: #dd524d
}
.uni-badge-error.uni-badge-inverted {
color: #dd524d;
background-color: transparent
}
.uni-badge--small {
transform: scale(.8);
transform-origin: center center
}
</style>
\ No newline at end of file
<template>
<view class="uni-calendar-item__weeks-box" :class="{
'uni-calendar-item--disable':weeks.disable,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
}"
@click="choiceDate(weeks)">
<view class="uni-calendar-item__weeks-box-item">
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
<text class="uni-calendar-item__weeks-box-text" :class="{
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.date}}</text>
<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
}">今天</text>
<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.isDay?'今天': (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--extra':weeks.extraInfo.info,
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.extraInfo.info}}</text>
</view>
</view>
</template>
<script>
export default {
props: {
weeks: {
type: Object,
default () {
return {}
}
},
calendar: {
type: Object,
default: () => {
return {}
}
},
selected: {
type: Array,
default: () => {
return []
}
},
lunar: {
type: Boolean,
default: false
}
},
methods: {
choiceDate(weeks) {
this.$emit('change', weeks)
}
}
}
</script>
<style lang="scss" scoped>
.uni-calendar-item__weeks-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
}
.uni-calendar-item__weeks-box-text {
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.uni-calendar-item__weeks-lunar-text {
font-size: $uni-font-size-sm;
color: $uni-text-color;
}
.uni-calendar-item__weeks-box-item {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
width: 100rpx;
height: 100rpx;
}
.uni-calendar-item__weeks-box-circle {
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $uni-color-error;
}
.uni-calendar-item--disable {
background-color: rgba(249, 249, 249, $uni-opacity-disabled);
color: $uni-text-color-disable;
}
.uni-calendar-item--isDay-text {
color: $uni-color-primary;
}
.uni-calendar-item--isDay {
background-color: $uni-color-primary;
opacity: 0.8;
color: #fff;
}
.uni-calendar-item--extra {
color: $uni-color-error;
opacity: 0.8;
}
.uni-calendar-item--checked {
background-color: $uni-color-primary;
color: #fff;
opacity: 0.8;
}
.uni-calendar-item--multiple {
background-color: $uni-color-primary;
color: #fff;
opacity: 0.8;
}
.uni-calendar-item--before-checked {
background-color: #ff5a5f;
color: #fff;
}
.uni-calendar-item--after-checked {
background-color: #ff5a5f;
color: #fff;
}
</style>
import CALENDAR from './calendar.js'
class Calendar {
constructor({
date,
selected,
startDate,
endDate,
range
} = {}) {
// 当前日期
this.date = this.getDate(new Date()) // 当前初入日期
// 打点信息
this.selected = selected || [];
// 范围开始
this.startDate = startDate
// 范围结束
this.endDate = endDate
this.range = range
// 多选状态
this.cleanMultipleStatus()
// 每周日期
this.weeks = {}
// this._getWeek(this.date.fullDate)
}
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.selectDate = this.getDate(date)
this._getWeek(this.selectDate.fullDate)
}
/**
* 清理多选状态
*/
cleanMultipleStatus() {
this.multipleStatus = {
before: '',
after: '',
data: []
}
}
/**
* 重置开始日期
*/
resetSatrtDate(startDate) {
// 范围开始
this.startDate = startDate
}
/**
* 重置结束日期
*/
resetEndDate(endDate) {
// 范围结束
this.endDate = endDate
}
/**
* 获取任意时间
*/
getDate(date, AddDayCount = 0, str = 'day') {
if (!date) {
date = new Date()
}
if (typeof date !== 'object') {
date = date.replace(/-/g, '/')
}
const dd = new Date(date)
switch (str) {
case 'day':
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
break
case 'month':
if (dd.getDate() === 31) {
dd.setDate(dd.getDate() + AddDayCount)
} else {
dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
}
break
case 'year':
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
break
}
const y = dd.getFullYear()
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期,不足10补0
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号,不足10补0
return {
fullDate: y + '-' + m + '-' + d,
year: y,
month: m,
date: d,
day: dd.getDay()
}
}
/**
* 获取上月剩余天数
*/
_getLastMonthDays(firstDay, full) {
let dateArr = []
for (let i = firstDay; i > 0; i--) {
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
dateArr.push({
date: beforeDate,
month: full.month - 1,
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
disable: true
})
}
return dateArr
}
/**
* 获取本月天数
*/
_currentMonthDys(dateData, full) {
let dateArr = []
let fullDate = this.date.fullDate
for (let i = 1; i <= dateData; i++) {
let isinfo = false
let nowDate = full.year + '-' + (full.month < 10 ?
full.month : full.month) + '-' + (i < 10 ?
'0' + i : i)
// 是否今天
let isDay = fullDate === nowDate
// 获取打点信息
let info = this.selected && this.selected.find((item) => {
if (this.dateEqual(nowDate, item.date)) {
return item
}
})
// 日期禁用
let disableBefore = true
let disableAfter = true
if (this.startDate) {
let dateCompBefore = this.dateCompare(this.startDate, fullDate)
disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
}
if (this.endDate) {
let dateCompAfter = this.dateCompare(fullDate, this.endDate)
disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
}
let multiples = this.multipleStatus.data
let checked = false
let multiplesStatus = -1
if (this.range) {
if (multiples) {
multiplesStatus = multiples.findIndex((item) => {
return this.dateEqual(item, nowDate)
})
}
if (multiplesStatus !== -1) {
checked = true
}
}
let data = {
fullDate: nowDate,
year: full.year,
date: i,
multiple: this.range ? checked : false,
beforeMultiple: this.dateEqual(this.multipleStatus.before, nowDate),
afterMultiple: this.dateEqual(this.multipleStatus.after, nowDate),
month: full.month,
lunar: this.getlunar(full.year, full.month, i),
disable: !disableBefore || !disableAfter,
isDay
}
if (info) {
data.extraInfo = info
}
dateArr.push(data)
}
return dateArr
}
/**
* 获取下月天数
*/
_getNextMonthDays(surplus, full) {
let dateArr = []
for (let i = 1; i < surplus + 1; i++) {
dateArr.push({
date: i,
month: Number(full.month) + 1,
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
disable: true
})
}
return dateArr
}
/**
* 获取当前日期详情
* @param {Object} date
*/
getInfo(date) {
if (!date) {
date = new Date()
}
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
return dateInfo
}
/**
* 比较时间大小
*/
dateCompare(startDate, endDate) {
// 计算截止时间
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
if (startDate <= endDate) {
return true
} else {
return false
}
}
/**
* 比较时间是否相等
*/
dateEqual(before, after) {
// 计算截止时间
before = new Date(before.replace('-', '/').replace('-', '/'))
// 计算详细项的截止时间
after = new Date(after.replace('-', '/').replace('-', '/'))
if (before.getTime() - after.getTime() === 0) {
return true
} else {
return false
}
}
/**
* 获取日期范围内所有日期
* @param {Object} begin
* @param {Object} end
*/
geDateAll(begin, end) {
var arr = []
var ab = begin.split('-')
var ae = end.split('-')
var db = new Date()
db.setFullYear(ab[0], ab[1] - 1, ab[2])
var de = new Date()
de.setFullYear(ae[0], ae[1] - 1, ae[2])
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
for (var k = unixDb; k <= unixDe;) {
k = k + 24 * 60 * 60 * 1000
arr.push(this.getDate(new Date(parseInt(k))).fullDate)
}
return arr
}
/**
* 计算阴历日期显示
*/
getlunar(year, month, date) {
return CALENDAR.solar2lunar(year, month, date)
}
/**
* 设置打点
*/
setSelectInfo(data, value) {
this.selected = value
this._getWeek(data)
}
/**
* 获取多选状态
*/
setMultiple(fullDate) {
let {
before,
after
} = this.multipleStatus
if (!this.range) return
if (before && after) {
this.multipleStatus.before = ''
this.multipleStatus.after = ''
this.multipleStatus.data = []
} else {
if (!before) {
this.multipleStatus.before = fullDate
} else {
this.multipleStatus.after = fullDate
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
} else {
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
}
}
}
this._getWeek(fullDate)
}
/**
* 获取每周数据
* @param {Object} dateData
*/
_getWeek(dateData) {
const {
fullDate,
year,
month,
date,
day
} = this.getDate(dateData)
let firstDay = new Date(year, month - 1, 1).getDay()
let currentDay = new Date(year, month, 0).getDate()
let dates = {
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
nextMonthDays: [], // 下个月开始几天
weeks: []
}
let canlender = []
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
let weeks = {}
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
for (let i = 0; i < canlender.length; i++) {
if (i % 7 === 0) {
weeks[parseInt(i / 7)] = new Array(7)
}
weeks[parseInt(i / 7)][i % 7] = canlender[i]
}
this.canlender = canlender
this.weeks = weeks
}
//静态方法
// static init(date) {
// if (!this.instance) {
// this.instance = new Calendar(date);
// }
// return this.instance;
// }
}
export default Calendar
<template>
<view class="uni-card" :class="isFull === true || isFull === 'true' ? 'uni-card--full' : ''" @click="onClick">
<view class="uni-card__header" v-if="title">
<view class="uni-card__header-extra-img-view" v-if="thumbnail">
<image class="uni-card__header-extra-img" :src="thumbnail"></image>
</view>
<view class="uni-card__header-title-text">{{title}}</view>
<view class="uni-card__header-extra-text" v-if="extra">{{extra}}</view>
</view>
<view class="uni-card__content uni-card__content--pd">
<slot />
</view>
<view class="uni-card__footer" v-if="note">{{note}}</view>
</view>
</template>
<script>
export default {
name: "uni-card",
props: {
title: String, //标题
extra: String, //扩展信息
note: String, //Tips
thumbnail: String, //缩略图
isFull: { //内容区域是否通栏
type: [Boolean, String],
default: false
}
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script>
<style>
@charset "UTF-8";
.uni-card {
margin-left: 24upx;
margin-right: 24upx;
background: #fff;
box-shadow: none;
position: relative;
display: flex;
flex-direction: column
}
.uni-card:after {
content: '';
position: absolute;
transform-origin: center;
box-sizing: border-box;
pointer-events: none;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
border: 1px solid #c8c7cc;
border-radius: 12upx;
transform: scale(.5)
}
.uni-card__footer,
.uni-card__header {
position: relative;
display: flex;
flex-direction: row;
padding: 16upx;
align-items: center
}
.uni-card__header:after {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc
}
.uni-card__header-title {
flex: 1;
margin-right: 16upx;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center
}
.uni-card__header-title-text {
font-size: 32upx;
flex: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
.uni-card__header-extra-img-view {
display: flex
}
.uni-card__header-extra-img {
height: 40upx;
width: 40upx;
margin-right: 16upx
}
.uni-card__header-extra-text {
flex: 0 0 auto;
width: 30%;
margin-left: 16upx;
font-size: 28upx;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
.uni-card__content--pd {
padding: 16upx
}
.uni-card__footer {
justify-content: space-between;
color: #999;
font-size: 24upx;
padding-top: 0
}
.uni-card--full {
margin: 0
}
</style>
\ No newline at end of file
<template>
<view :class="['uni-collapse-cell',{'uni-collapse-cell--disabled':disabled,'uni-collapse-cell--open':isOpen}]" :hover-class="disabled ? '' : 'uni-collapse-cell--hover'">
<view class="uni-collapse-cell__title" @click="onClick">
<view class="uni-collapse-cell__title-extra" v-if="thumb">
<image class="uni-collapse-cell__title-img" :src="thumb"></image>
</view>
<view class="uni-collapse-cell__title-inner">
<view class="uni-collapse-cell__title-text">{{title}}</view>
</view>
<view class="uni-collapse-cell__title-arrow" :class="{'uni-active':isOpen,'uni-collapse-cell--animation':showAnimation===true}">
<uni-icon color="#bbb" size="20" type="arrowdown"></uni-icon>
</view>
</view>
<view class="uni-collapse-cell__content" :class="{'uni-collapse-cell--animation':showAnimation===true}" :style="{height:isOpen ? height : '0px'}">
<view :id="elId">
<slot />
</view>
</view>
</view>
</template>
<script>
import uniIcon from '../uni-icon/uni-icon.vue'
export default {
name: 'uni-collapse-item',
components: {
uniIcon
},
props: {
title: { //列表标题
type: String,
default: ''
},
name: { //唯一标识符
type: [Number, String],
default: 0
},
disabled: { //是否禁用
type: [Boolean, String],
default: false
},
showAnimation: { //是否显示动画
type: Boolean,
default: false
},
open: { //是否展开
type: [Boolean, String],
default: false
},
thumb: { //缩略图
type: String,
default: ''
}
},
data() {
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
return {
isOpen: false,
height: 'auto',
elId: elId
};
},
watch: {
open(val) {
this.isOpen = val
}
},
inject: ['collapse'],
created() {
this.isOpen = this.open
this.nameSync = this.name ? this.name : this.collapse.childrens.length
this.collapse.childrens.push(this)
if (String(this.collapse.accordion) === 'true') {
if (this.isOpen) {
let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
if (lastEl) {
this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
}
}
}
},
// #ifdef H5
mounted() {
this.getSize()
},
// #endif
// #ifndef H5
onReady() {
this.getSize()
},
// #endif
methods: {
getSize() {
if (this.showAnimation) {
uni.createSelectorQuery().in(this).select(`#${this.elId}`).boundingClientRect().exec((ret) => {
this.height = ret[0].height + 'px'
});
}
},
onClick() {
if (this.disabled) {
return
}
if (String(this.collapse.accordion) === 'true') {
this.collapse.childrens.forEach(vm => {
if (vm === this) {
return
}
vm.isOpen = false
})
}
this.isOpen = !this.isOpen
this.collapse.onChange && this.collapse.onChange()
}
}
}
</script>
<style>
@charset "UTF-8";
.uni-collapse-cell {
position: relative
}
.uni-collapse-cell--hover {
background-color: #f1f1f1
}
.uni-collapse-cell--open {
background-color: #f1f1f1
}
.uni-collapse-cell--disabled {
opacity: .3
}
.uni-collapse-cell--animation {
transition: all .3s
}
.uni-collapse-cell:after {
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc
}
.uni-collapse-cell__title {
padding: 24upx 30upx;
width: 100%;
box-sizing: border-box;
flex: 1;
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center
}
.uni-collapse-cell__title-extra {
margin-right: 18upx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center
}
.uni-collapse-cell__title-img {
height: 52upx;
width: 52upx
}
.uni-collapse-cell__title-arrow {
width: 20px;
height: 20px;
transform: rotate(0);
transform-origin: center center
}
.uni-collapse-cell__title-arrow.uni-active {
transform: rotate(-180deg)
}
.uni-collapse-cell__title-inner {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column
}
.uni-collapse-cell__title-text {
font-size: 32upx;
text-overflow: ellipsis;
white-space: nowrap;
color: inherit;
line-height: 1.5;
overflow: hidden
}
.uni-collapse-cell__content {
position: relative;
width: 100%;
overflow: hidden;
background: #fff
}
.uni-collapse-cell__content view {
font-size: 28upx
}
</style>
\ No newline at end of file
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment