代码更新
This commit is contained in:
parent
d27814d0b9
commit
f63f640a7b
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
// 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" : [
|
||||
{
|
||||
"app-plus" : {
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"default" : {
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"type" : "uniCloud"
|
||||
},
|
||||
{
|
||||
"playground" : "custom",
|
||||
"type" : "uni-app:app-android"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
import request from "@/utils/request.js";
|
||||
import requesta from "@/utils/requesta.js";
|
||||
|
||||
/**
|
||||
* 直播列表
|
||||
*/
|
||||
export function live(data) {
|
||||
return request.get("zhibo/live" ,data);
|
||||
}
|
||||
/**
|
||||
* 直播详情
|
||||
*/
|
||||
export function liveDetail(data) {
|
||||
return request.get("zhibo/liveDetail" ,data);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取直播详情接口
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 创建直播间
|
||||
*/
|
||||
export function createPushLive(data) {
|
||||
return request.post("zhibo/createPushLive", data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭直播间
|
||||
*/
|
||||
export function stopPushLive(data) {
|
||||
return request.post("zhibo/stopPushLive", data);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 绑定用户client客户
|
||||
*/
|
||||
export function bindUser(data) {
|
||||
return request.post("zhibo/bindUser", data,{});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 加入直播间聊天室
|
||||
*/
|
||||
export function joinChatRoom(data) {
|
||||
return request.post("zhibo/joinChatRoom", data);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 直播间聊天室发言
|
||||
*/
|
||||
export function sendGroupMessage(data) {
|
||||
return request.post("zhibo/sendGroupMessage", data);
|
||||
}
|
||||
|
||||
|
||||
|
||||
//商品列表
|
||||
export function good(data) {
|
||||
return requesta.get("product/spu/lst", data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户信息
|
||||
*
|
||||
*/
|
||||
export function getUserInfo() {
|
||||
return request.get('user');
|
||||
}
|
||||
|
||||
|
||||
|
||||
//关注
|
||||
export function getfans(id,data) {
|
||||
return requesta.post('community/fans/'+id,data);
|
||||
}
|
||||
|
||||
//我关注的人
|
||||
export function getfocuslst(data) {
|
||||
return requesta.post('community/focus/lst',data);
|
||||
}
|
||||
|
||||
//关注我的人
|
||||
export function getfanslst(data) {
|
||||
return requesta.post('community/fans/lst',data);
|
||||
}
|
||||
|
||||
//用户送礼
|
||||
export function reward(data) {
|
||||
return request.post('zhibo/reward',data);
|
||||
}
|
||||
//获取礼物
|
||||
export function rewardList(data) {
|
||||
return requesta.get('zhibo/rewardList',data);
|
||||
}
|
||||
|
||||
//获取礼物
|
||||
export function giftList(data) {
|
||||
return request.get('zhibo/giftList',data);
|
||||
}
|
||||
|
||||
//获取房间人数
|
||||
export function liveAudience(data) {
|
||||
return request.get('zhibo/liveAudience',data);
|
||||
}
|
||||
|
||||
//获取用户余额
|
||||
export function getuser(data) {
|
||||
return requesta.get('user',data);
|
||||
}
|
||||
|
||||
|
||||
//送礼
|
||||
export function sendGift(data) {
|
||||
return request.post('zhibo/sendGift',data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 充值金额选择
|
||||
*/
|
||||
export function getRechargeApi() {
|
||||
return requesta.get("common/recharge_quota");
|
||||
}
|
||||
|
||||
//历史直播记录
|
||||
|
||||
export function playbackList(data) {
|
||||
return request.get("zhibo/playbackList",data);
|
||||
}
|
||||
|
||||
//获取直播回放详情
|
||||
export function playbackDetail(data) {
|
||||
return request.get("zhibo/playbackDetail",data);
|
||||
}
|
||||
//获取观众关注主播状态
|
||||
export function getAjuser(data) {
|
||||
return requesta.get("community/user/info/"+data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 滑块信息
|
||||
* @param {Object} data
|
||||
*/
|
||||
export function getAjcaptcha(data) {
|
||||
return requesta.get("ajcaptcha", data, {
|
||||
noAuth: true
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 滑块验证
|
||||
* @param {Object} data
|
||||
*/
|
||||
export function ajcaptchaCheck(data) {
|
||||
return requesta.post("ajcheck", data, {
|
||||
noAuth: true
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import request from "@/utils/requesta.js";
|
||||
|
||||
export function getVersion() {
|
||||
return request.get("version",{},{noAuth: true});
|
||||
}
|
||||
export function commonAuth(data) {
|
||||
return request.post(
|
||||
"auth", data, {
|
||||
noAuth: true
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import request from "@/utils/requesta.js";
|
||||
|
||||
|
||||
export function getAdminApplyListAPI(merId) {
|
||||
return request.get(`admin/${merId}/lis_apply`);
|
||||
}
|
||||
/**
|
||||
* 获取用户信息
|
||||
*
|
||||
*/
|
||||
export function getUserInfo() {
|
||||
return request.get('user');
|
||||
}
|
||||
/**
|
||||
* 头像
|
||||
*
|
||||
*/
|
||||
export function editAvatar(data) {
|
||||
return request.post('user/change/info', data);
|
||||
}
|
||||
|
||||
// 修改昵称
|
||||
export function updateInfo(data) {
|
||||
return request.post('user/change/avatar', data);
|
||||
}
|
||||
/**
|
||||
* h5用户登录
|
||||
* @param data object 用户账号密码
|
||||
*/
|
||||
export function loginH5(data) {
|
||||
return request.post("auth/login", data, {
|
||||
noAuth: true
|
||||
});
|
||||
}
|
||||
/**
|
||||
* h5用户手机号登录
|
||||
* @param data object 用户手机号 也只能
|
||||
*/
|
||||
export function loginMobile(data) {
|
||||
return request.post("auth/smslogin", data, {
|
||||
noAuth: true
|
||||
});
|
||||
}
|
||||
/**
|
||||
* h5用户手机号登录
|
||||
* @param data object 用户手机号 也只能
|
||||
*/
|
||||
export function loginMpPhone(data) {
|
||||
return request.post("auth/mp_phone", data, {
|
||||
noAuth: true
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 验证码key
|
||||
*/
|
||||
export function getCodeApi() {
|
||||
return request.get("verify_code", {}, {
|
||||
noAuth: true
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* h5用户发送验证码
|
||||
* @param data object 用户手机号
|
||||
*/
|
||||
export function registerVerify(data) {
|
||||
return request.post("auth/verify", data, {
|
||||
noAuth: true
|
||||
});
|
||||
}
|
||||
/**
|
||||
* h5用户手机号注册
|
||||
* @param data object 用户手机号 验证码 密码
|
||||
*/
|
||||
export function register(data) {
|
||||
return request.post("auth/register", data, {
|
||||
noAuth: true
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户手机号修改密码
|
||||
* @param data object 用户手机号 验证码 密码
|
||||
*/
|
||||
export function registerReset(data) {
|
||||
return request.post("/register/reset", data, {
|
||||
noAuth: true
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 用户手机号忘记密码
|
||||
*/
|
||||
export function registerForget(data) {
|
||||
return request.post("user/change_pwd", data, {
|
||||
noAuth: true
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<view class="empty-box">
|
||||
<image src="/static/images/empty-box.png"></image>
|
||||
<view class="txt">{{title}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
export default{
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '暂无记录',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.empty-box{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 200rpx;
|
||||
image{
|
||||
width: 414rpx;
|
||||
height: 240rpx;
|
||||
}
|
||||
.txt{
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<view class="men-ban box " v-if ='isShow' @touchmove.stop.prevent="">
|
||||
<view class="box_next">
|
||||
<view class="box_next_title">
|
||||
<text class="box_next_title_z">{{title}}</text>
|
||||
</view>
|
||||
<slot></slot>
|
||||
<view class="box_next_but_d" v-if="isBut">
|
||||
<view @click='show' class="box_next_but_d_but">
|
||||
<text class="box_next_but_d_but_text">{{nName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box_next_but_s" v-else>
|
||||
<view class="box_next_but_s_lbut" @click="lEvent">
|
||||
<text class="box_next_but_d_but_text">{{lName}}</text>
|
||||
</view>
|
||||
<view @click="rEvent" class="box_next_but_s_rbut" hover-class="zcolor-while1">
|
||||
<text class="box_next_but_d_but_text">{{rName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "温馨提示"
|
||||
},
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
nName: String,
|
||||
lName: String,
|
||||
rName: String,
|
||||
isBut: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
show() {
|
||||
|
||||
this.$emit('show');
|
||||
},
|
||||
lEvent() {
|
||||
this.$emit('lEvent');
|
||||
},
|
||||
rEvent() {
|
||||
this.$emit('rEvent');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.men-ban {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 999999;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.box_next {
|
||||
background-color: #ffffff;
|
||||
width: 550rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.box_next_title {
|
||||
padding: 30rpx 30rpx 0 30rpx;
|
||||
}
|
||||
|
||||
.box_next_title_z {
|
||||
font-size: 31rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.box_next_but_d {
|
||||
width: 550rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
.box_next_but_d_but {
|
||||
width: 500rpx;
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80rpx;
|
||||
border-radius: 50rpx;
|
||||
background-color: #fee610;
|
||||
}
|
||||
|
||||
.box_next_but_d_but_text {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.box_next_but_s {
|
||||
width: 550rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 130rpx;
|
||||
}
|
||||
|
||||
.box_next_but_s_lbut {
|
||||
width: 200rpx;
|
||||
background-color: #f1f1f1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
|
||||
.box_next_but_s_rbut {
|
||||
width: 200rpx;
|
||||
background-color: #fee610;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,815 @@
|
|||
<!--
|
||||
parser 主模块组件
|
||||
github：https://github.com/jin-yufeng/Parser
|
||||
docs：https://jin-yufeng.github.io/Parser
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?id=805
|
||||
author：JinYufeng
|
||||
update：2020/04/14
|
||||
-->
|
||||
<template>
|
||||
<view>
|
||||
<slot v-if="!nodes.length" />
|
||||
<!--#ifdef APP-PLUS-NVUE-->
|
||||
<web-view id="top" ref="web" :src="src" :style="'margin-top:-2px;height:'+height+'px'" @onPostMessage="_message" />
|
||||
<!--#endif-->
|
||||
<!--#ifndef APP-PLUS-NVUE-->
|
||||
<view id="top" :style="showAm+(selectable?';user-select:text;-webkit-user-select:text':'')" :animation="scaleAm" @tap="_tap"
|
||||
@touchstart="_touchstart" @touchmove="_touchmove">
|
||||
<!--#ifdef H5-->
|
||||
<div :id="'rtf'+uid"></div>
|
||||
<!--#endif-->
|
||||
<!--#ifndef H5-->
|
||||
<trees :nodes="nodes" :lazy-load="lazyLoad" :loadVideo="loadVideo" />
|
||||
<image v-for="(item, index) in imgs" v-bind:key="index" :id="index" :src="item" hidden @load="_load" />
|
||||
<!--#endif-->
|
||||
<image v-for="(item, index) in imgs" v-bind:key="index" :id="index" :src="item" hidden @load="_load" />
|
||||
</view>
|
||||
<!--#endif-->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifndef H5 || APP-PLUS-NVUE
|
||||
import trees from './libs/trees';
|
||||
var cache = {},
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
fs = uni.getFileSystemManager ? uni.getFileSystemManager() : null,
|
||||
// #endif
|
||||
Parser = require('./libs/MpHtmlParser.js');
|
||||
var document; // document 补丁包 https://jin-yufeng.github.io/Parser/#/instructions?id=document
|
||||
// 计算 cache 的 key
|
||||
function hash(str) {
|
||||
for (var i = str.length, val = 5381; i--;)
|
||||
val += (val << 5) + str.charCodeAt(i);
|
||||
return val;
|
||||
}
|
||||
// #endif
|
||||
// #ifdef H5 || APP-PLUS-NVUE
|
||||
var rpx = uni.getSystemInfoSync().screenWidth / 750,
|
||||
cfg = require('./libs/config.js');
|
||||
// #endif
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
var dom = weex.requireModule('dom');
|
||||
// #endif
|
||||
export default {
|
||||
name: 'parser',
|
||||
data() {
|
||||
return {
|
||||
// #ifdef APP-PLUS
|
||||
loadVideo: false,
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
uid: this._uid,
|
||||
// #endif
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
src: '',
|
||||
height: 1,
|
||||
// #endif
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
scaleAm: '',
|
||||
showAm: '',
|
||||
imgs: [],
|
||||
// #endif
|
||||
nodes: []
|
||||
}
|
||||
},
|
||||
// #ifndef H5 || APP-PLUS-NVUE
|
||||
components: {
|
||||
trees
|
||||
},
|
||||
// #endif
|
||||
props: {
|
||||
'html': null,
|
||||
// #ifndef MP-ALIPAY
|
||||
'autopause': {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// #endif
|
||||
'autosetTitle': {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// #ifndef H5 || APP-PLUS-NVUE
|
||||
'compress': Number,
|
||||
'useCache': Boolean,
|
||||
'xml': Boolean,
|
||||
// #endif
|
||||
'domain': String,
|
||||
// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
|
||||
'gestureZoom': Boolean,
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN || MP-QQ || H5 || APP-PLUS
|
||||
'lazyLoad': Boolean,
|
||||
// #endif
|
||||
'selectable': Boolean,
|
||||
'tagStyle': Object,
|
||||
'showWithAnimation': Boolean,
|
||||
'useAnchor': Boolean
|
||||
},
|
||||
watch: {
|
||||
html(html) {
|
||||
this.setContent(html);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 图片数组
|
||||
this.imgList = [];
|
||||
this.imgList.each = function(f) {
|
||||
for (var i = 0, len = this.length; i < len; i++)
|
||||
this.setItem(i, f(this[i], i, this));
|
||||
}
|
||||
this.imgList.setItem = function(i, src) {
|
||||
if (i == void 0 || !src) return;
|
||||
// #ifndef MP-ALIPAY || APP-PLUS
|
||||
// 去重
|
||||
if (src.indexOf('http') == 0 && this.includes(src)) {
|
||||
var newSrc = '';
|
||||
for (var j = 0, c; c = src[j]; j++) {
|
||||
if (c == '/' && src[j - 1] != '/' && src[j + 1] != '/') break;
|
||||
newSrc += Math.random() > 0.5 ? c.toUpperCase() : c;
|
||||
}
|
||||
newSrc += src.substr(j);
|
||||
return this[i] = newSrc;
|
||||
}
|
||||
// #endif
|
||||
this[i] = src;
|
||||
// 暂存 data src
|
||||
if (src.includes('data:image')) {
|
||||
var filePath, info = src.match(/data:image\/(\S+?);(\S+?),(.+)/);
|
||||
if (!info) return;
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
filePath = `${wx.env.USER_DATA_PATH}/${Date.now()}.${info[1]}`;
|
||||
fs && fs.writeFile({
|
||||
filePath,
|
||||
data: info[3],
|
||||
encoding: info[2],
|
||||
success: () => this[i] = filePath
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
filePath = `_doc/parser_tmp/${Date.now()}.${info[1]}`;
|
||||
var bitmap = new plus.nativeObj.Bitmap();
|
||||
bitmap.loadBase64Data(src, () => {
|
||||
bitmap.save(filePath, {}, () => {
|
||||
bitmap.clear()
|
||||
this[i] = filePath;
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
if (this.html) this.setContent(this.html);
|
||||
},
|
||||
beforeDestroy() {
|
||||
// #ifdef H5
|
||||
if (this._observer) this._observer.disconnect();
|
||||
// #endif
|
||||
this.imgList.each(src => {
|
||||
// #ifdef APP-PLUS
|
||||
if (src && src.includes('_doc')) {
|
||||
plus.io.resolveLocalFileSystemURL(src, entry => {
|
||||
entry.remove();
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
if (src && src.includes(uni.env.USER_DATA_PATH))
|
||||
fs && fs.unlink({
|
||||
filePath: src
|
||||
})
|
||||
// #endif
|
||||
})
|
||||
clearInterval(this._timer);
|
||||
},
|
||||
methods: {
|
||||
// #ifdef H5 || APP-PLUS-NVUE
|
||||
_Dom2Str(nodes) {
|
||||
var str = '';
|
||||
for (var node of nodes) {
|
||||
if (node.type == 'text')
|
||||
str += node.text;
|
||||
else {
|
||||
str += ('<' + node.name);
|
||||
for (var attr in node.attrs || {})
|
||||
str += (' ' + attr + '="' + node.attrs[attr] + '"');
|
||||
if (!node.children || !node.children.length) str += '>';
|
||||
else str += ('>' + this._Dom2Str(node.children) + '</' + node.name + '>');
|
||||
}
|
||||
}
|
||||
return str;
|
||||
},
|
||||
_handleHtml(html, append) {
|
||||
if (typeof html != 'string') html = this._Dom2Str(html.nodes || html);
|
||||
// 处理 rpx
|
||||
if (html.includes('rpx'))
|
||||
html = html.replace(/[0-9.]+\s*rpx/g, $ => parseFloat($) * rpx + 'px');
|
||||
if (!append) {
|
||||
// 处理 tag-style 和 userAgentStyles
|
||||
var style = '<style>@keyframes show{0%{opacity:0}100%{opacity:1}}';
|
||||
for (var item in cfg.userAgentStyles)
|
||||
style += `${item}{${cfg.userAgentStyles[item]}}`;
|
||||
for (item in this.tagStyle)
|
||||
style += `${item}{${this.tagStyle[item]}}`;
|
||||
style += '</style>';
|
||||
html = style + html;
|
||||
}
|
||||
return html;
|
||||
},
|
||||
// #endif
|
||||
setContent(html, append) {
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
if (!html) {
|
||||
this.src = '';
|
||||
this.height = 1;
|
||||
return;
|
||||
}
|
||||
if (append) return;
|
||||
plus.io.resolveLocalFileSystemURL('_doc', entry => {
|
||||
entry.getDirectory('parser_tmp', {
|
||||
create: true
|
||||
}, entry => {
|
||||
var fileName = Date.now() + '.html';
|
||||
entry.getFile(fileName, {
|
||||
create: true
|
||||
}, entry => {
|
||||
entry.createWriter(writer => {
|
||||
writer.onwriteend = () => {
|
||||
this.nodes = [1];
|
||||
this.src = '_doc/parser_tmp/' + fileName;
|
||||
this.$nextTick(function() {
|
||||
entry.remove();
|
||||
})
|
||||
}
|
||||
html =
|
||||
'<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1' +
|
||||
(this.selectable ? '' : ',user-scalable=no') +
|
||||
'"><script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></' +
|
||||
'script><base href="' + this.domain + '">' + this._handleHtml(html) +
|
||||
'<script>"use strict";function post(t){uni.postMessage({data:t})}' +
|
||||
(this.showWithAnimation ? 'document.body.style.animation="show .5s",' : '') +
|
||||
'document.addEventListener("UniAppJSBridgeReady",function(){post({action:"load",text:document.body.innerText});var t=document.getElementsByTagName("title");t.length&&post({action:"getTitle",title:t[0].innerText});for(var e,o=document.getElementsByTagName("img"),n=[],i=0,r=0;e=o[i];i++)e.onerror=function(){post({action:"error",source:"img",target:this})},e.hasAttribute("ignore")||"A"==e.parentElement.nodeName||(e.i=r++,n.push(e.src),e.onclick=function(){post({action:"preview",img:{i:this.i,src:this.src}})});post({action:"getImgList",imgList:n});for(var a,s=document.getElementsByTagName("a"),c=0;a=s[c];c++)a.onclick=function(){var t,e=this.getAttribute("href");if("#"==e[0]){var r=document.getElementById(e.substr(1));r&&(t=r.offsetTop)}return post({action:"linkpress",href:e,offset:t}),!1};;for(var u,m=document.getElementsByTagName("video"),d=0;u=m[d];d++)u.style.maxWidth="100%;",u.onerror=function(){post({action:"error",source:"video",target:this})}' +
|
||||
(this.autopause ? ',u.onplay=function(){for(var t,e=0;t=m[e];e++)t!=this&&t.pause()}' : '') +
|
||||
';for(var g,l=document.getElementsByTagName("audio"),p=0;g=l[p];p++)g.onerror=function(){post({action:"error",source:"audio",target:this})};window.onload=function(){post({action:"ready",height:document.body.scrollHeight})}});</' +
|
||||
'script>';
|
||||
writer.write(html);
|
||||
});
|
||||
})
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
if (!html) {
|
||||
if (this.rtf && !append) this.rtf.parentNode.removeChild(this.rtf);
|
||||
return;
|
||||
}
|
||||
var div = document.createElement('div');
|
||||
if (!append) {
|
||||
if (this.rtf) this.rtf.parentNode.removeChild(this.rtf);
|
||||
this.rtf = div;
|
||||
} else {
|
||||
if (!this.rtf) this.rtf = div;
|
||||
else this.rtf.appendChild(div);
|
||||
}
|
||||
div.innerHTML = this._handleHtml(html, append);
|
||||
for (var styles = this.rtf.getElementsByTagName('style'), i = 0, style; style = styles[i++];) {
|
||||
style.innerHTML = style.innerHTML.replace(/body/g, '#rtf' + this._uid);
|
||||
style.setAttribute('scoped', 'true');
|
||||
}
|
||||
// 懒加载
|
||||
if (!this._observer && this.lazyLoad && IntersectionObserver) {
|
||||
this._observer = new IntersectionObserver(changes => {
|
||||
for (let item, i = 0; item = changes[i++];) {
|
||||
if (item.isIntersecting) {
|
||||
item.target.src = item.target.getAttribute('data-src');
|
||||
item.target.removeAttribute('data-src');
|
||||
this._observer.unobserve(item.target);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
rootMargin: '900px 0px 900px 0px'
|
||||
})
|
||||
}
|
||||
var _ts = this;
|
||||
// 获取标题
|
||||
var title = this.rtf.getElementsByTagName('title');
|
||||
if (title.length && this.autosetTitle)
|
||||
uni.setNavigationBarTitle({
|
||||
title: title[0].innerText
|
||||
})
|
||||
// 图片处理
|
||||
this.imgList.length = 0;
|
||||
var imgs = this.rtf.getElementsByTagName('img');
|
||||
for (let i = 0, j = 0, img; img = imgs[i]; i++) {
|
||||
img.style.maxWidth = '100%';
|
||||
var src = img.getAttribute('src');
|
||||
if (this.domain && src) {
|
||||
if (src[0] == '/') {
|
||||
if (src[1] == '/')
|
||||
img.src = (this.domain.includes('://') ? this.domain.split('://')[0] : '') + ':' + src;
|
||||
else img.src = this.domain + src;
|
||||
} else if (!src.includes('://')) img.src = this.domain + '/' + src;
|
||||
}
|
||||
if (!img.hasAttribute('ignore') && img.parentElement.nodeName != 'A') {
|
||||
img.i = j++;
|
||||
_ts.imgList.push(img.src || img.getAttribute('data-src'));
|
||||
img.onclick = function() {
|
||||
var preview = true;
|
||||
this.ignore = () => preview = false;
|
||||
_ts.$emit('imgtap', this);
|
||||
if (preview) {
|
||||
uni.previewImage({
|
||||
current: this.i,
|
||||
urls: _ts.imgList
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
img.onerror = function() {
|
||||
_ts.$emit('error', {
|
||||
source: 'img',
|
||||
target: this
|
||||
});
|
||||
}
|
||||
if (_ts.lazyLoad && this._observer && img.src && img.i != 0) {
|
||||
img.setAttribute('data-src', img.src);
|
||||
img.removeAttribute('src');
|
||||
this._observer.observe(img);
|
||||
}
|
||||
}
|
||||
// 链接处理
|
||||
var links = this.rtf.getElementsByTagName('a');
|
||||
for (var link of links) {
|
||||
link.onclick = function() {
|
||||
var jump = true,
|
||||
href = this.getAttribute('href');
|
||||
_ts.$emit('linkpress', {
|
||||
href,
|
||||
ignore: () => jump = false
|
||||
});
|
||||
if (jump && href) {
|
||||
if (href[0] == '#') {
|
||||
if (_ts.useAnchor) {
|
||||
_ts.navigateTo({
|
||||
id: href.substr(1)
|
||||
})
|
||||
}
|
||||
} else if (href.indexOf('http') == 0 || href.indexOf('//') == 0)
|
||||
return true;
|
||||
else {
|
||||
uni.navigateTo({
|
||||
url: href
|
||||
})
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// 视频处理
|
||||
var videos = this.rtf.getElementsByTagName('video');
|
||||
_ts.videoContexts = videos;
|
||||
for (let video, i = 0; video = videos[i++];) {
|
||||
video.style.maxWidth = '100%';
|
||||
video.onerror = function() {
|
||||
_ts.$emit('error', {
|
||||
source: 'video',
|
||||
target: this
|
||||
});
|
||||
}
|
||||
video.onplay = function() {
|
||||
if (_ts.autopause)
|
||||
for (let item, i = 0; item = _ts.videoContexts[i++];)
|
||||
if (item != this) item.pause();
|
||||
}
|
||||
}
|
||||
// 音频处理
|
||||
var audios = this.rtf.getElementsByTagName('audios');
|
||||
for (var audio of audios)
|
||||
audio.onerror = function() {
|
||||
_ts.$emit('error', {
|
||||
source: 'audio',
|
||||
target: this
|
||||
});
|
||||
}
|
||||
this.document = this.rtf;
|
||||
if (!append) document.getElementById('rtf' + this._uid).appendChild(this.rtf);
|
||||
this.$nextTick(() => {
|
||||
this.nodes = [1];
|
||||
this.$emit('load');
|
||||
})
|
||||
setTimeout(() => this.showAm = '', 500);
|
||||
// #endif
|
||||
// #ifndef H5 || APP-PLUS-NVUE
|
||||
var nodes;
|
||||
if (!html)
|
||||
return this.nodes = [];
|
||||
else if (typeof html == 'string') {
|
||||
let parser = new Parser(html, this);
|
||||
// 缓存读取
|
||||
if (this.useCache) {
|
||||
var hashVal = hash(html);
|
||||
if (cache[hashVal])
|
||||
nodes = cache[hashVal];
|
||||
else {
|
||||
nodes = parser.parse();
|
||||
cache[hashVal] = nodes;
|
||||
}
|
||||
} else nodes = parser.parse();
|
||||
this.$emit('parse', nodes);
|
||||
} else if (Object.prototype.toString.call(html) == '[object Array]') {
|
||||
// 非本插件产生的 array 需要进行一些转换
|
||||
if (html.length && html[0].PoweredBy != 'Parser') {
|
||||
let parser = new Parser(html, this);
|
||||
(function f(ns) {
|
||||
for (var i = 0, n; n = ns[i]; i++) {
|
||||
if (n.type == 'text') continue;
|
||||
n.attrs = n.attrs || {};
|
||||
for (var item in n.attrs)
|
||||
if (typeof n.attrs[item] != 'string') n.attrs[item] = n.attrs[item].toString();
|
||||
parser.matchAttr(n, parser);
|
||||
if (n.children && n.children.length) {
|
||||
parser.STACK.push(n);
|
||||
f(n.children);
|
||||
parser.popNode(parser.STACK.pop());
|
||||
} else n.children = void 0;
|
||||
}
|
||||
})(html);
|
||||
}
|
||||
nodes = html;
|
||||
} else if (typeof html == 'object' && html.nodes) {
|
||||
nodes = html.nodes;
|
||||
console.warn('错误的 html 类型：object 类型已废弃');
|
||||
} else
|
||||
return console.warn('错误的 html 类型：' + typeof html);
|
||||
// #ifdef APP-PLUS
|
||||
this.loadVideo = false;
|
||||
// #endif
|
||||
if (document) this.document = new document(this.nodes, 'nodes', this);
|
||||
if (append) this.nodes = this.nodes.concat(nodes);
|
||||
else this.nodes = nodes;
|
||||
if (nodes.length && nodes[0].title && this.autosetTitle)
|
||||
uni.setNavigationBarTitle({
|
||||
title: nodes[0].title
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.imgList.length = 0;
|
||||
this.videoContexts = [];
|
||||
// #ifdef MP-TOUTIAO
|
||||
setTimeout(() => {
|
||||
// #endif
|
||||
var f = (cs) => {
|
||||
for (let i = 0, c; c = cs[i++];) {
|
||||
if (c.$options.name == 'trees') {
|
||||
for (var j = c.nodes.length, item; item = c.nodes[--j];) {
|
||||
if (item.c) continue;
|
||||
if (item.name == 'img') {
|
||||
this.imgList.setItem(item.attrs.i, item.attrs.src);
|
||||
// #ifndef MP-ALIPAY
|
||||
if (!c.observer && !c.imgLoad && item.attrs.i != '0') {
|
||||
if (this.lazyLoad && uni.createIntersectionObserver) {
|
||||
c.observer = uni.createIntersectionObserver(c);
|
||||
c.observer.relativeToViewport({
|
||||
top: 900,
|
||||
bottom: 900
|
||||
}).observe('._img', () => {
|
||||
c.imgLoad = true;
|
||||
c.observer.disconnect();
|
||||
})
|
||||
} else
|
||||
c.imgLoad = true;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
// #ifndef MP-ALIPAY
|
||||
else if (item.name == 'video') {
|
||||
var ctx = uni.createVideoContext(item.attrs.id, c);
|
||||
ctx.id = item.attrs.id;
|
||||
this.videoContexts.push(ctx);
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU || MP-ALIPAY || APP-PLUS
|
||||
if (item.attrs && item.attrs.id) {
|
||||
this.anchors = this.anchors || [];
|
||||
this.anchors.push({
|
||||
id: item.attrs.id,
|
||||
node: c
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
if (c.$children.length)
|
||||
f(c.$children)
|
||||
}
|
||||
}
|
||||
f(this.$children);
|
||||
// #ifdef MP-TOUTIAO
|
||||
}, 200)
|
||||
this.$emit('load');
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
setTimeout(() => {
|
||||
this.loadVideo = true;
|
||||
}, 3000);
|
||||
// #endif
|
||||
})
|
||||
// #endif
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
var height;
|
||||
clearInterval(this._timer);
|
||||
this._timer = setInterval(() => {
|
||||
// #ifdef H5
|
||||
var res = [this.rtf.getBoundingClientRect()];
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
// #ifdef APP-PLUS
|
||||
uni.createSelectorQuery().in(this)
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
this.createSelectorQuery()
|
||||
// #endif
|
||||
.select('#top').boundingClientRect().exec(res => {
|
||||
// #endif
|
||||
this.width = res[0].width;
|
||||
if (res[0].height == height) {
|
||||
this.$emit('ready', res[0])
|
||||
clearInterval(this._timer);
|
||||
}
|
||||
height = res[0].height;
|
||||
// #ifndef H5
|
||||
});
|
||||
// #endif
|
||||
}, 350)
|
||||
if (this.showWithAnimation && !append) this.showAm = 'animation:show .5s';
|
||||
// #endif
|
||||
},
|
||||
getText(ns = this.nodes) {
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
return this._text;
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
return this.rtf.innerText;
|
||||
// #endif
|
||||
// #ifndef H5 || APP-PLUS-NVUE
|
||||
var txt = '';
|
||||
for (var i = 0, n; n = ns[i++];) {
|
||||
if (n.type == 'text') txt += n.text.replace(/ /g, '\u00A0').replace(/</g, '<').replace(/>/g, '>')
|
||||
.replace(/&/g, '&');
|
||||
else if (n.type == 'br') txt += '\n';
|
||||
else {
|
||||
// 块级标签前后加换行
|
||||
var block = n.name == 'p' || n.name == 'div' || n.name == 'tr' || n.name == 'li' || (n.name[0] == 'h' && n.name[1] >
|
||||
'0' && n.name[1] < '7');
|
||||
if (block && txt && txt[txt.length - 1] != '\n') txt += '\n';
|
||||
if (n.children) txt += this.getText(n.children);
|
||||
if (block && txt[txt.length - 1] != '\n') txt += '\n';
|
||||
else if (n.name == 'td' || n.name == 'th') txt += '\t';
|
||||
}
|
||||
}
|
||||
return txt;
|
||||
// #endif
|
||||
},
|
||||
navigateTo(obj) {
|
||||
if (!this.useAnchor)
|
||||
return obj.fail && obj.fail({
|
||||
errMsg: 'Anchor is disabled'
|
||||
})
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
if (!obj.id)
|
||||
dom.scrollToElement(this.$refs.web);
|
||||
else
|
||||
this.$refs.web.evalJs('var pos=document.getElementById("' + obj.id +
|
||||
'");if(pos)post({action:"linkpress",href:"#",offset:pos.offsetTop})');
|
||||
return obj.success && obj.success({
|
||||
errMsg: 'pageScrollTo:ok'
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
if (!obj.id) {
|
||||
window.scrollTo(0, this.rtf.offsetTop);
|
||||
return obj.success && obj.success({
|
||||
errMsg: 'pageScrollTo:ok'
|
||||
});
|
||||
}
|
||||
var target = document.getElementById(obj.id);
|
||||
if (!target) return obj.fail && obj.fail({
|
||||
errMsg: 'Label not found'
|
||||
});
|
||||
obj.scrollTop = this.rtf.offsetTop + target.offsetTop;
|
||||
uni.pageScrollTo(obj);
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
var Scroll = (selector, component) => {
|
||||
uni.createSelectorQuery().in(component ? component : this).select(selector).boundingClientRect().selectViewport()
|
||||
.scrollOffset()
|
||||
.exec(res => {
|
||||
if (!res || !res[0])
|
||||
return obj.fail && obj.fail({
|
||||
errMsg: 'Label not found'
|
||||
});
|
||||
obj.scrollTop = res[1].scrollTop + res[0].top;
|
||||
uni.pageScrollTo(obj);
|
||||
})
|
||||
}
|
||||
if (!obj.id) Scroll('#top');
|
||||
else {
|
||||
// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
|
||||
Scroll('#top >>> #' + obj.id + ', #top >>> .' + obj.id);
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU || MP-ALIPAY || APP-PLUS
|
||||
for (var anchor of this.anchors)
|
||||
if (anchor.id == obj.id)
|
||||
Scroll('#' + obj.id + ', .' + obj.id, anchor.node);
|
||||
// #endif
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
getVideoContext(id) {
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
if (!id) return this.videoContexts;
|
||||
else
|
||||
for (var i = this.videoContexts.length; i--;)
|
||||
if (this.videoContexts[i].id == id) return this.videoContexts[i];
|
||||
// #endif
|
||||
},
|
||||
// 预加载
|
||||
preLoad(html, num) {
|
||||
// #ifdef H5 || APP-PLUS-NVUE
|
||||
if (html.constructor == Array)
|
||||
html = this._Dom2Str(html);
|
||||
var script = "var contain=document.createElement('div');contain.innerHTML='" + html.replace(/'/g, "\\'") +
|
||||
"';for(var imgs=contain.querySelectorAll('img'),i=imgs.length-1;i>=" + num +
|
||||
";i--)imgs[i].removeAttribute('src');";
|
||||
// #endif
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
this.$refs.web.evalJs(script);
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
eval(script);
|
||||
// #endif
|
||||
// #ifndef H5 || APP-PLUS-NVUE
|
||||
if (typeof html == 'string') {
|
||||
var id = hash(html);
|
||||
html = new Parser(html, this).parse();
|
||||
cache[id] = html;
|
||||
}
|
||||
var wait = [];
|
||||
(function f(ns) {
|
||||
for (var i = 0, n; n = ns[i++];) {
|
||||
if (n.name == 'img' && n.attrs.src && !wait.includes(n.attrs.src))
|
||||
wait.push(n.attrs.src);
|
||||
f(n.children || []);
|
||||
}
|
||||
})(html);
|
||||
if (num) wait = wait.slice(0, num);
|
||||
this._wait = (this._wait || []).concat(wait);
|
||||
if (!this.imgs) this.imgs = this._wait.splice(0, 15);
|
||||
else if (this.imgs.length < 15)
|
||||
this.imgs = this.imgs.concat(this._wait.splice(0, 15 - this.imgs.length));
|
||||
// #endif
|
||||
},
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
_message(e) {
|
||||
// 接收 web-view 消息
|
||||
var data = e.detail.data[0];
|
||||
if (data.action == 'load') {
|
||||
this.$emit('load');
|
||||
this._text = data.text;
|
||||
} else if (data.action == 'getTitle') {
|
||||
if (this.autosetTitle)
|
||||
uni.setNavigationBarTitle({
|
||||
title: data.title
|
||||
})
|
||||
} else if (data.action == 'getImgList') {
|
||||
this.imgList.length = 0;
|
||||
for (var i = data.imgList.length; i--;)
|
||||
this.imgList.setItem(i, data.imgList[i]);
|
||||
} else if (data.action == 'preview') {
|
||||
var preview = true;
|
||||
data.img.ignore = () => preview = false;
|
||||
this.$emit('imgtap', data.img);
|
||||
if (preview)
|
||||
uni.previewImage({
|
||||
current: data.img.i,
|
||||
urls: this.imgList
|
||||
})
|
||||
} else if (data.action == 'linkpress') {
|
||||
var jump = true,
|
||||
href = data.href;
|
||||
this.$emit('linkpress', {
|
||||
href,
|
||||
ignore: () => jump = false
|
||||
})
|
||||
if (jump && href) {
|
||||
if (href[0] == '#') {
|
||||
if (this.useAnchor)
|
||||
dom.scrollToElement(this.$refs.web, {
|
||||
offset: data.offset
|
||||
})
|
||||
} else if (href.includes('://'))
|
||||
plus.runtime.openWeb(href);
|
||||
else
|
||||
uni.navigateTo({
|
||||
url: href
|
||||
})
|
||||
}
|
||||
} else if (data.action == 'error')
|
||||
this.$emit('error', {
|
||||
source: data.source,
|
||||
target: data.target
|
||||
})
|
||||
else if (data.action == 'ready') {
|
||||
this.height = data.height;
|
||||
this.$nextTick(() => {
|
||||
uni.createSelectorQuery().in(this).select('#top').boundingClientRect().exec(res => {
|
||||
this.rect = res[0];
|
||||
this.$emit('ready', res[0]);
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
// #ifndef APP-PLUS-NVUE
|
||||
// #ifndef H5
|
||||
_load(e) {
|
||||
if (this._wait.length)
|
||||
this.$set(this.imgs, e.target.id, this._wait.shift());
|
||||
},
|
||||
// #endif
|
||||
_tap(e) {
|
||||
// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
|
||||
if (this.gestureZoom && e.timeStamp - this._lastT < 300) {
|
||||
var initY = e.touches[0].pageY - e.currentTarget.offsetTop;
|
||||
if (this._zoom) {
|
||||
this._scaleAm.translateX(0).scale(1).step();
|
||||
uni.pageScrollTo({
|
||||
scrollTop: (initY + this._initY) / 2 - e.touches[0].clientY,
|
||||
duration: 400
|
||||
})
|
||||
} else {
|
||||
var initX = e.touches[0].pageX - e.currentTarget.offsetLeft;
|
||||
this._initY = initY;
|
||||
this._scaleAm = uni.createAnimation({
|
||||
transformOrigin: `${initX}px ${this._initY}px 0`,
|
||||
timingFunction: 'ease-in-out'
|
||||
});
|
||||
// #ifdef MP-TOUTIAO
|
||||
this._scaleAm.opacity(1);
|
||||
// #endif
|
||||
this._scaleAm.scale(2).step();
|
||||
this._tMax = initX / 2;
|
||||
this._tMin = (initX - this.width) / 2;
|
||||
this._tX = 0;
|
||||
}
|
||||
this._zoom = !this._zoom;
|
||||
this.scaleAm = this._scaleAm.export();
|
||||
}
|
||||
this._lastT = e.timeStamp;
|
||||
// #endif
|
||||
},
|
||||
_touchstart(e) {
|
||||
// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
|
||||
if (e.touches.length == 1)
|
||||
this._initX = this._lastX = e.touches[0].pageX;
|
||||
// #endif
|
||||
},
|
||||
_touchmove(e) {
|
||||
// #ifndef MP-BAIDU || MP-ALIPAY || APP-PLUS
|
||||
var diff = e.touches[0].pageX - this._lastX;
|
||||
if (this._zoom && e.touches.length == 1 && Math.abs(diff) > 20) {
|
||||
this._lastX = e.touches[0].pageX;
|
||||
if ((this._tX <= this._tMin && diff < 0) || (this._tX >= this._tMax && diff > 0))
|
||||
return;
|
||||
this._tX += (diff * Math.abs(this._lastX - this._initX) * 0.05);
|
||||
if (this._tX < this._tMin) this._tX = this._tMin;
|
||||
if (this._tX > this._tMax) this._tX = this._tMax;
|
||||
this._scaleAm.translateX(this._tX).step();
|
||||
this.scaleAm = this._scaleAm.export();
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@keyframes show {
|
||||
0% {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* #ifdef MP-WEIXIN */
|
||||
:host {
|
||||
display: block;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
/*
|
||||
解析和匹配 Css 的选择器
|
||||
github：https://github.com/jin-yufeng/Parser
|
||||
docs：https://jin-yufeng.github.io/Parser
|
||||
author：JinYufeng
|
||||
update：2020/03/15
|
||||
*/
|
||||
var cfg = require('./config.js');
|
||||
class CssHandler {
|
||||
constructor(tagStyle) {
|
||||
var styles = Object.assign({}, cfg.userAgentStyles);
|
||||
for (var item in tagStyle)
|
||||
styles[item] = (styles[item] ? styles[item] + ';' : '') + tagStyle[item];
|
||||
this.styles = styles;
|
||||
}
|
||||
getStyle = data => this.styles = new CssParser(data, this.styles).parse();
|
||||
match(name, attrs) {
|
||||
var tmp, matched = (tmp = this.styles[name]) ? tmp + ';' : '';
|
||||
if (attrs.class) {
|
||||
var items = attrs.class.split(' ');
|
||||
for (var i = 0, item; item = items[i]; i++)
|
||||
if (tmp = this.styles['.' + item])
|
||||
matched += tmp + ';';
|
||||
}
|
||||
if (tmp = this.styles['#' + attrs.id])
|
||||
matched += tmp + ';';
|
||||
return matched;
|
||||
}
|
||||
}
|
||||
module.exports = CssHandler;
|
||||
class CssParser {
|
||||
constructor(data, init) {
|
||||
this.data = data;
|
||||
this.floor = 0;
|
||||
this.i = 0;
|
||||
this.list = [];
|
||||
this.res = init;
|
||||
this.state = this.Space;
|
||||
}
|
||||
parse() {
|
||||
for (var c; c = this.data[this.i]; this.i++)
|
||||
this.state(c);
|
||||
return this.res;
|
||||
}
|
||||
section = () => this.data.substring(this.start, this.i);
|
||||
isLetter = c => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z');
|
||||
// 状态机
|
||||
Space(c) {
|
||||
if (c == '.' || c == '#' || this.isLetter(c)) {
|
||||
this.start = this.i;
|
||||
this.state = this.Name;
|
||||
} else if (c == '/' && this.data[this.i + 1] == '*')
|
||||
this.Comment();
|
||||
else if (!cfg.blankChar[c] && c != ';')
|
||||
this.state = this.Ignore;
|
||||
}
|
||||
Comment() {
|
||||
this.i = this.data.indexOf('*/', this.i) + 1;
|
||||
if (!this.i) this.i = this.data.length;
|
||||
this.state = this.Space;
|
||||
}
|
||||
Ignore(c) {
|
||||
if (c == '{') this.floor++;
|
||||
else if (c == '}' && !--this.floor) this.state = this.Space;
|
||||
}
|
||||
Name(c) {
|
||||
if (cfg.blankChar[c]) {
|
||||
this.list.push(this.section());
|
||||
this.state = this.NameSpace;
|
||||
} else if (c == '{') {
|
||||
this.list.push(this.section());
|
||||
this.Content();
|
||||
} else if (c == ',') {
|
||||
this.list.push(this.section());
|
||||
this.Comma();
|
||||
} else if (!this.isLetter(c) && (c < '0' || c > '9') && c != '-' && c != '_')
|
||||
this.state = this.Ignore;
|
||||
}
|
||||
NameSpace(c) {
|
||||
if (c == '{') this.Content();
|
||||
else if (c == ',') this.Comma();
|
||||
else if (!cfg.blankChar[c]) this.state = this.Ignore;
|
||||
}
|
||||
Comma() {
|
||||
while (cfg.blankChar[this.data[++this.i]]);
|
||||
if (this.data[this.i] == '{') this.Content();
|
||||
else {
|
||||
this.start = this.i--;
|
||||
this.state = this.Name;
|
||||
}
|
||||
}
|
||||
Content() {
|
||||
this.start = ++this.i;
|
||||
if ((this.i = this.data.indexOf('}', this.i)) == -1) this.i = this.data.length;
|
||||
var content = this.section();
|
||||
for (var i = 0, item; item = this.list[i++];)
|
||||
if (this.res[item]) this.res[item] += ';' + content;
|
||||
else this.res[item] = content;
|
||||
this.list = [];
|
||||
this.state = this.Space;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,586 @@
|
|||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
/*
|
||||
将 html 解析为适用于小程序 rich-text 的 DOM 结构
|
||||
github：https://github.com/jin-yufeng/Parser
|
||||
docs：https://jin-yufeng.github.io/Parser
|
||||
author：JinYufeng
|
||||
update：2020/04/13
|
||||
*/
|
||||
var cfg = require('./config.js'),
|
||||
blankChar = cfg.blankChar,
|
||||
CssHandler = require('./CssHandler.js'),
|
||||
{
|
||||
screenWidth,
|
||||
system
|
||||
} = wx.getSystemInfoSync();
|
||||
// #ifdef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO
|
||||
var entities = {
|
||||
lt: '<',
|
||||
gt: '>',
|
||||
amp: '&',
|
||||
quot: '"',
|
||||
apos: "'",
|
||||
nbsp: '\xA0',
|
||||
ensp: '\u2002',
|
||||
emsp: '\u2003',
|
||||
ndash: '–',
|
||||
mdash: '—',
|
||||
middot: '·',
|
||||
lsquo: '‘',
|
||||
rsquo: '’',
|
||||
ldquo: '“',
|
||||
rdquo: '”',
|
||||
bull: '•',
|
||||
hellip: '…',
|
||||
permil: '‰',
|
||||
copy: '©',
|
||||
reg: '®',
|
||||
trade: '™',
|
||||
times: '×',
|
||||
divide: '÷',
|
||||
cent: '￠',
|
||||
pound: '£',
|
||||
yen: '¥',
|
||||
euro: '€',
|
||||
sect: '§'
|
||||
};
|
||||
// #endif
|
||||
var emoji; // emoji 补丁包 https://jin-yufeng.github.io/Parser/#/instructions?id=emoji
|
||||
class MpHtmlParser {
|
||||
constructor(data, options = {}) {
|
||||
this.attrs = {};
|
||||
this.compress = options.compress;
|
||||
this.CssHandler = new CssHandler(options.tagStyle, screenWidth);
|
||||
this.data = data;
|
||||
this.domain = options.domain;
|
||||
this.DOM = [];
|
||||
this.i = this.start = this.audioNum = this.imgNum = this.videoNum = 0;
|
||||
this.protocol = this.domain && this.domain.includes('://') ? this.domain.split('://')[0] : '';
|
||||
this.state = this.Text;
|
||||
this.STACK = [];
|
||||
this.useAnchor = options.useAnchor;
|
||||
this.xml = options.xml;
|
||||
}
|
||||
parse() {
|
||||
if (emoji) this.data = emoji.parseEmoji(this.data);
|
||||
for (var c; c = this.data[this.i]; this.i++)
|
||||
this.state(c);
|
||||
if (this.state == this.Text) this.setText();
|
||||
while (this.STACK.length) this.popNode(this.STACK.pop());
|
||||
// #ifdef MP-BAIDU || MP-TOUTIAO
|
||||
// 将顶层标签的一些样式提取出来给 rich-text
|
||||
(function f(ns) {
|
||||
for (var i = ns.length, n; n = ns[--i];) {
|
||||
if (n.type == 'text') continue;
|
||||
if (!n.c) {
|
||||
var style = n.attrs.style;
|
||||
if (style) {
|
||||
var j, k, res;
|
||||
if ((j = style.indexOf('display')) != -1)
|
||||
res = style.substring(j, (k = style.indexOf(';', j)) == -1 ? style.length : k);
|
||||
if ((j = style.indexOf('float')) != -1)
|
||||
res += ';' + style.substring(j, (k = style.indexOf(';', j)) == -1 ? style.length : k);
|
||||
n.attrs.contain = res;
|
||||
}
|
||||
} else f(n.children);
|
||||
}
|
||||
})(this.DOM);
|
||||
// #endif
|
||||
if (this.DOM.length) {
|
||||
this.DOM[0].PoweredBy = 'Parser';
|
||||
if (this.title) this.DOM[0].title = this.title;
|
||||
}
|
||||
return this.DOM;
|
||||
}
|
||||
// 设置属性
|
||||
setAttr() {
|
||||
var name = this.getName(this.attrName);
|
||||
if (cfg.trustAttrs[name]) {
|
||||
if (!this.attrVal) {
|
||||
if (cfg.boolAttrs[name]) this.attrs[name] = 'T';
|
||||
} else if (name == 'src') this.attrs[name] = this.getUrl(this.attrVal.replace(/&/g, '&'));
|
||||
else this.attrs[name] = this.attrVal;
|
||||
}
|
||||
this.attrVal = '';
|
||||
while (blankChar[this.data[this.i]]) this.i++;
|
||||
if (this.isClose()) this.setNode();
|
||||
else {
|
||||
this.start = this.i;
|
||||
this.state = this.AttrName;
|
||||
}
|
||||
}
|
||||
// 设置文本节点
|
||||
setText() {
|
||||
var back, text = this.section();
|
||||
if (!text) return;
|
||||
text = (cfg.onText && cfg.onText(text, () => back = true)) || text;
|
||||
if (back) {
|
||||
this.data = this.data.substr(0, this.start) + text + this.data.substr(this.i);
|
||||
let j = this.start + text.length;
|
||||
for (this.i = this.start; this.i < j; this.i++) this.state(this.data[this.i]);
|
||||
return;
|
||||
}
|
||||
if (!this.pre) {
|
||||
// 合并空白符
|
||||
var tmp = [];
|
||||
for (let i = text.length, c; c = text[--i];)
|
||||
if (!blankChar[c] || (!blankChar[tmp[0]] && (c = ' '))) tmp.unshift(c);
|
||||
text = tmp.join('');
|
||||
if (text == ' ') return;
|
||||
}
|
||||
// 处理实体
|
||||
var siblings = this.siblings(),
|
||||
i = -1,
|
||||
j, en;
|
||||
while (1) {
|
||||
if ((i = text.indexOf('&', i + 1)) == -1) break;
|
||||
if ((j = text.indexOf(';', i + 2)) == -1) break;
|
||||
if (text[i + 1] == '#') {
|
||||
en = parseInt((text[i + 2] == 'x' ? '0' : '') + text.substring(i + 2, j));
|
||||
if (!isNaN(en)) text = text.substr(0, i) + String.fromCharCode(en) + text.substring(j + 1);
|
||||
} else {
|
||||
en = text.substring(i + 1, j);
|
||||
// #ifdef MP-WEIXIN || MP-QQ || APP-PLUS
|
||||
if (en == 'nbsp') text = text.substr(0, i) + '\xA0' + text.substr(j + 1); // 解决 失效
|
||||
else if (en != 'lt' && en != 'gt' && en != 'amp' && en != 'ensp' && en != 'emsp' && en != 'quot' && en != 'apos') {
|
||||
i && siblings.push({
|
||||
type: 'text',
|
||||
text: text.substr(0, i)
|
||||
})
|
||||
siblings.push({
|
||||
type: 'text',
|
||||
text: `&${en};`,
|
||||
en: 1
|
||||
})
|
||||
text = text.substr(j + 1);
|
||||
i = -1;
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-BAIDU || MP-ALIPAY || MP-TOUTIAO
|
||||
if (entities[en]) text = text.substr(0, i) + entities[en] + text.substr(j + 1);
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
text && siblings.push({
|
||||
type: 'text',
|
||||
text
|
||||
})
|
||||
}
|
||||
// 设置元素节点
|
||||
setNode() {
|
||||
var node = {
|
||||
name: this.tagName.toLowerCase(),
|
||||
attrs: this.attrs
|
||||
},
|
||||
close = cfg.selfClosingTags[node.name] || (this.xml && this.data[this.i] == '/');
|
||||
this.attrs = {};
|
||||
if (!cfg.ignoreTags[node.name]) {
|
||||
this.matchAttr(node);
|
||||
if (!close) {
|
||||
node.children = [];
|
||||
if (node.name == 'pre' && cfg.highlight) {
|
||||
this.remove(node);
|
||||
this.pre = node.pre = true;
|
||||
}
|
||||
this.siblings().push(node);
|
||||
this.STACK.push(node);
|
||||
} else if (!cfg.filter || cfg.filter(node, this) != false)
|
||||
this.siblings().push(node);
|
||||
} else {
|
||||
if (!close) this.remove(node);
|
||||
else if (node.name == 'source') {
|
||||
var parent = this.STACK[this.STACK.length - 1],
|
||||
attrs = node.attrs;
|
||||
if (parent && attrs.src)
|
||||
if (parent.name == 'video' || parent.name == 'audio')
|
||||
parent.attrs.source.push(attrs.src);
|
||||
else {
|
||||
var i, media = attrs.media;
|
||||
if (parent.name == 'picture' && !parent.attrs.src && !(attrs.src.indexOf('.webp') && system.includes('iOS')) &&
|
||||
(!media || (media.includes('px') &&
|
||||
(((i = media.indexOf('min-width')) != -1 && (i = media.indexOf(':', i + 8)) != -1 && screenWidth > parseInt(
|
||||
media.substr(i + 1))) ||
|
||||
((i = media.indexOf('max-width')) != -1 && (i = media.indexOf(':', i + 8)) != -1 && screenWidth < parseInt(
|
||||
media.substr(i + 1)))))))
|
||||
parent.attrs.src = attrs.src;
|
||||
}
|
||||
} else if (node.name == 'base' && !this.domain) this.domain = node.attrs.href;
|
||||
}
|
||||
if (this.data[this.i] == '/') this.i++;
|
||||
this.start = this.i + 1;
|
||||
this.state = this.Text;
|
||||
}
|
||||
// 移除标签
|
||||
remove(node) {
|
||||
var name = node.name,
|
||||
j = this.i;
|
||||
while (1) {
|
||||
if ((this.i = this.data.indexOf('</', this.i + 1)) == -1) {
|
||||
if (name == 'pre' || name == 'svg') this.i = j;
|
||||
else this.i = this.data.length;
|
||||
return;
|
||||
}
|
||||
this.start = (this.i += 2);
|
||||
while (!blankChar[this.data[this.i]] && !this.isClose()) this.i++;
|
||||
if (this.getName(this.section()) == name) {
|
||||
// 代码块高亮
|
||||
if (name == 'pre') {
|
||||
this.data = this.data.substr(0, j + 1) + cfg.highlight(this.data.substring(j + 1, this.i - 5), node.attrs) +
|
||||
this.data.substr(this.i - 5);
|
||||
return this.i = j;
|
||||
} else if (name == 'style')
|
||||
this.CssHandler.getStyle(this.data.substring(j + 1, this.i - 7));
|
||||
else if (name == 'title')
|
||||
this.title = this.data.substring(j + 1, this.i - 7);
|
||||
if ((this.i = this.data.indexOf('>', this.i)) == -1) this.i = this.data.length;
|
||||
// 处理 svg
|
||||
if (name == 'svg') {
|
||||
var src = this.data.substring(j, this.i + 1);
|
||||
if (!node.attrs.xmlns) src = ' xmlns="http://www.w3.org/2000/svg"' + src;
|
||||
var i = j;
|
||||
while (this.data[j] != '<') j--;
|
||||
src = this.data.substring(j, i) + src;
|
||||
var parent = this.STACK[this.STACK.length - 1];
|
||||
if (node.attrs.width == '100%' && parent && (parent.attrs.style || '').includes('inline'))
|
||||
parent.attrs.style = 'width:300px;max-width:100%;' + parent.attrs.style;
|
||||
this.siblings().push({
|
||||
name: 'img',
|
||||
attrs: {
|
||||
src: 'data:image/svg+xml;utf8,' + src.replace(/#/g, '%23'),
|
||||
ignore: 'T'
|
||||
}
|
||||
})
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 处理属性
|
||||
matchAttr(node) {
|
||||
var attrs = node.attrs,
|
||||
style = this.CssHandler.match(node.name, attrs, node) + (attrs.style || ''),
|
||||
styleObj = {};
|
||||
if (attrs.id) {
|
||||
if (this.compress & 1) attrs.id = void 0;
|
||||
else if (this.useAnchor) this.bubble();
|
||||
}
|
||||
if ((this.compress & 2) && attrs.class) attrs.class = void 0;
|
||||
switch (node.name) {
|
||||
case 'img':
|
||||
if (attrs['data-src']) {
|
||||
attrs.src = attrs.src || attrs['data-src'];
|
||||
attrs['data-src'] = void 0;
|
||||
}
|
||||
if (attrs.src && !attrs.ignore) {
|
||||
if (this.bubble()) attrs.i = (this.imgNum++).toString();
|
||||
else attrs.ignore = 'T';
|
||||
}
|
||||
break;
|
||||
case 'a':
|
||||
case 'ad':
|
||||
// #ifdef APP-PLUS
|
||||
case 'iframe':
|
||||
case 'embed':
|
||||
// #endif
|
||||
this.bubble();
|
||||
break;
|
||||
case 'font':
|
||||
if (attrs.color) {
|
||||
styleObj['color'] = attrs.color;
|
||||
attrs.color = void 0;
|
||||
}
|
||||
if (attrs.face) {
|
||||
styleObj['font-family'] = attrs.face;
|
||||
attrs.face = void 0;
|
||||
}
|
||||
if (attrs.size) {
|
||||
var size = parseInt(attrs.size);
|
||||
if (size < 1) size = 1;
|
||||
else if (size > 7) size = 7;
|
||||
var map = ['xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large'];
|
||||
styleObj['font-size'] = map[size - 1];
|
||||
attrs.size = void 0;
|
||||
}
|
||||
break;
|
||||
case 'video':
|
||||
case 'audio':
|
||||
if (!attrs.id) attrs.id = node.name + (++this[`${node.name}Num`]);
|
||||
else this[`${node.name}Num`]++;
|
||||
if (node.name == 'video') {
|
||||
if (attrs.width) {
|
||||
style = `width:${parseFloat(attrs.width) + (attrs.width.includes('%') ? '%' : 'px')};${style}`;
|
||||
attrs.width = void 0;
|
||||
}
|
||||
if (attrs.height) {
|
||||
style = `height:${parseFloat(attrs.height) + (attrs.height.includes('%') ? '%' : 'px')};${style}`;
|
||||
attrs.height = void 0;
|
||||
}
|
||||
if (this.videoNum > 3) node.lazyLoad = true;
|
||||
}
|
||||
attrs.source = [];
|
||||
if (attrs.src) attrs.source.push(attrs.src);
|
||||
if (!attrs.controls && !attrs.autoplay)
|
||||
console.warn(`存在没有 controls 属性的 ${node.name} 标签，可能导致无法播放`, node);
|
||||
this.bubble();
|
||||
break;
|
||||
case 'td':
|
||||
case 'th':
|
||||
if (attrs.colspan || attrs.rowspan)
|
||||
for (var k = this.STACK.length, item; item = this.STACK[--k];)
|
||||
if (item.name == 'table') {
|
||||
item.c = void 0;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (attrs.align) {
|
||||
styleObj['text-align'] = attrs.align;
|
||||
attrs.align = void 0;
|
||||
}
|
||||
// 压缩 style
|
||||
var styles = style.replace(/"/g, '"').replace(/&/g, '&').split(';');
|
||||
style = '';
|
||||
for (var i = 0, len = styles.length; i < len; i++) {
|
||||
var info = styles[i].split(':');
|
||||
if (info.length < 2) continue;
|
||||
let key = info[0].trim().toLowerCase(),
|
||||
value = info.slice(1).join(':').trim();
|
||||
if (value.includes('-webkit') || value.includes('-moz') || value.includes('-ms') || value.includes('-o') || value
|
||||
.includes(
|
||||
'safe'))
|
||||
style += `;${key}:${value}`;
|
||||
else if (!styleObj[key] || value.includes('import') || !styleObj[key].includes('import'))
|
||||
styleObj[key] = value;
|
||||
}
|
||||
if (node.name == 'img' && parseInt(styleObj.width || attrs.width) > screenWidth)
|
||||
styleObj.height = 'auto';
|
||||
for (var key in styleObj) {
|
||||
var value = styleObj[key];
|
||||
if (key.includes('flex') || key == 'order' || key == 'self-align') node.c = 1;
|
||||
// 填充链接
|
||||
if (value.includes('url')) {
|
||||
var j = value.indexOf('(');
|
||||
if (j++ != -1) {
|
||||
while (value[j] == '"' || value[j] == "'" || blankChar[value[j]]) j++;
|
||||
value = value.substr(0, j) + this.getUrl(value.substr(j));
|
||||
}
|
||||
}
|
||||
// 转换 rpx
|
||||
else if (value.includes('rpx'))
|
||||
value = value.replace(/[0-9.]+\s*rpx/g, $ => parseFloat($) * screenWidth / 750 + 'px');
|
||||
else if (key == 'white-space' && value.includes('pre'))
|
||||
this.pre = node.pre = true;
|
||||
style += `;${key}:${value}`;
|
||||
}
|
||||
style = style.substr(1);
|
||||
if (style) attrs.style = style;
|
||||
}
|
||||
// 节点出栈处理
|
||||
popNode(node) {
|
||||
// 空白符处理
|
||||
if (node.pre) {
|
||||
node.pre = this.pre = void 0;
|
||||
for (let i = this.STACK.length; i--;)
|
||||
if (this.STACK[i].pre)
|
||||
this.pre = true;
|
||||
}
|
||||
if (node.name == 'head' || (cfg.filter && cfg.filter(node, this) == false))
|
||||
return this.siblings().pop();
|
||||
var attrs = node.attrs;
|
||||
// 替换一些标签名
|
||||
if (node.name == 'picture') {
|
||||
node.name = 'img';
|
||||
if (!attrs.src && (node.children[0] || '').name == 'img')
|
||||
attrs.src = node.children[0].attrs.src;
|
||||
if (attrs.src && !attrs.ignore)
|
||||
attrs.i = (this.imgNum++).toString();
|
||||
return node.children = void 0;
|
||||
}
|
||||
if (cfg.blockTags[node.name]) node.name = 'div';
|
||||
else if (!cfg.trustTags[node.name]) node.name = 'span';
|
||||
// 处理列表
|
||||
if (node.c) {
|
||||
if (node.name == 'ul') {
|
||||
var floor = 1;
|
||||
for (let i = this.STACK.length; i--;)
|
||||
if (this.STACK[i].name == 'ul') floor++;
|
||||
if (floor != 1)
|
||||
for (let i = node.children.length; i--;)
|
||||
node.children[i].floor = floor;
|
||||
} else if (node.name == 'ol') {
|
||||
for (let i = 0, num = 1, child; child = node.children[i++];)
|
||||
if (child.name == 'li') {
|
||||
child.type = 'ol';
|
||||
child.num = ((num, type) => {
|
||||
if (type == 'a') return String.fromCharCode(97 + (num - 1) % 26);
|
||||
if (type == 'A') return String.fromCharCode(65 + (num - 1) % 26);
|
||||
if (type == 'i' || type == 'I') {
|
||||
num = (num - 1) % 99 + 1;
|
||||
var one = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX'],
|
||||
ten = ['X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC'],
|
||||
res = (ten[Math.floor(num / 10) - 1] || '') + (one[num % 10 - 1] || '');
|
||||
if (type == 'i') return res.toLowerCase();
|
||||
return res;
|
||||
}
|
||||
return num;
|
||||
})(num++, attrs.type) + '.';
|
||||
}
|
||||
}
|
||||
}
|
||||
// 处理表格的边框
|
||||
if (node.name == 'table') {
|
||||
var padding = attrs.cellpadding,
|
||||
spacing = attrs.cellspacing,
|
||||
border = attrs.border;
|
||||
if (node.c) {
|
||||
this.bubble();
|
||||
if (!padding) padding = 2;
|
||||
if (!spacing) spacing = 2;
|
||||
}
|
||||
if (border) attrs.style = `border:${border}px solid gray;${attrs.style || ''}`;
|
||||
if (spacing) attrs.style = `border-spacing:${spacing}px;${attrs.style || ''}`;
|
||||
if (border || padding)
|
||||
(function f(ns) {
|
||||
for (var i = 0, n; n = ns[i]; i++) {
|
||||
if (n.name == 'th' || n.name == 'td') {
|
||||
if (border) n.attrs.style = `border:${border}px solid gray;${n.attrs.style}`;
|
||||
if (padding) n.attrs.style = `padding:${padding}px;${n.attrs.style}`;
|
||||
} else f(n.children || []);
|
||||
}
|
||||
})(node.children)
|
||||
}
|
||||
this.CssHandler.pop && this.CssHandler.pop(node);
|
||||
// 自动压缩
|
||||
if (node.name == 'div' && !Object.keys(attrs).length) {
|
||||
var siblings = this.siblings();
|
||||
if (node.children.length == 1 && node.children[0].name == 'div')
|
||||
siblings[siblings.length - 1] = node.children[0];
|
||||
}
|
||||
}
|
||||
// 工具函数
|
||||
bubble() {
|
||||
for (var i = this.STACK.length, item; item = this.STACK[--i];) {
|
||||
if (cfg.richOnlyTags[item.name]) {
|
||||
if (item.name == 'table' && !Object.hasOwnProperty.call(item, 'c')) item.c = 1;
|
||||
return false;
|
||||
}
|
||||
item.c = 1;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
getName = val => this.xml ? val : val.toLowerCase();
|
||||
getUrl(url) {
|
||||
if (url[0] == '/') {
|
||||
if (url[1] == '/') url = this.protocol + ':' + url;
|
||||
else if (this.domain) url = this.domain + url;
|
||||
} else if (this.domain && url.indexOf('data:') != 0 && !url.includes('://'))
|
||||
url = this.domain + '/' + url;
|
||||
return url;
|
||||
}
|
||||
isClose = () => this.data[this.i] == '>' || (this.data[this.i] == '/' && this.data[this.i + 1] == '>');
|
||||
section = () => this.data.substring(this.start, this.i);
|
||||
siblings = () => this.STACK.length ? this.STACK[this.STACK.length - 1].children : this.DOM;
|
||||
// 状态机
|
||||
Text(c) {
|
||||
if (c == '<') {
|
||||
var next = this.data[this.i + 1],
|
||||
isLetter = c => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z');
|
||||
if (isLetter(next)) {
|
||||
this.setText();
|
||||
this.start = this.i + 1;
|
||||
this.state = this.TagName;
|
||||
} else if (next == '/') {
|
||||
this.setText();
|
||||
if (isLetter(this.data[++this.i + 1])) {
|
||||
this.start = this.i + 1;
|
||||
this.state = this.EndTag;
|
||||
} else
|
||||
this.Comment();
|
||||
} else if (next == '!') {
|
||||
this.setText();
|
||||
this.Comment();
|
||||
}
|
||||
}
|
||||
}
|
||||
Comment() {
|
||||
var key;
|
||||
if (this.data.substring(this.i + 2, this.i + 4) == '--') key = '-->';
|
||||
else if (this.data.substring(this.i + 2, this.i + 9) == '[CDATA[') key = ']]>';
|
||||
else key = '>';
|
||||
if ((this.i = this.data.indexOf(key, this.i + 2)) == -1) this.i = this.data.length;
|
||||
else this.i += key.length - 1;
|
||||
this.start = this.i + 1;
|
||||
this.state = this.Text;
|
||||
}
|
||||
TagName(c) {
|
||||
if (blankChar[c]) {
|
||||
this.tagName = this.section();
|
||||
while (blankChar[this.data[this.i]]) this.i++;
|
||||
if (this.isClose()) this.setNode();
|
||||
else {
|
||||
this.start = this.i;
|
||||
this.state = this.AttrName;
|
||||
}
|
||||
} else if (this.isClose()) {
|
||||
this.tagName = this.section();
|
||||
this.setNode();
|
||||
}
|
||||
}
|
||||
AttrName(c) {
|
||||
var blank = blankChar[c];
|
||||
if (blank) {
|
||||
this.attrName = this.section();
|
||||
c = this.data[this.i];
|
||||
}
|
||||
if (c == '=') {
|
||||
if (!blank) this.attrName = this.section();
|
||||
while (blankChar[this.data[++this.i]]);
|
||||
this.start = this.i--;
|
||||
this.state = this.AttrValue;
|
||||
} else if (blank) this.setAttr();
|
||||
else if (this.isClose()) {
|
||||
this.attrName = this.section();
|
||||
this.setAttr();
|
||||
}
|
||||
}
|
||||
AttrValue(c) {
|
||||
if (c == '"' || c == "'") {
|
||||
this.start++;
|
||||
if ((this.i = this.data.indexOf(c, this.i + 1)) == -1) return this.i = this.data.length;
|
||||
this.attrVal = this.section();
|
||||
this.i++;
|
||||
} else {
|
||||
for (; !blankChar[this.data[this.i]] && !this.isClose(); this.i++);
|
||||
this.attrVal = this.section();
|
||||
}
|
||||
this.setAttr();
|
||||
}
|
||||
EndTag(c) {
|
||||
if (blankChar[c] || c == '>' || c == '/') {
|
||||
var name = this.getName(this.section());
|
||||
for (var i = this.STACK.length; i--;)
|
||||
if (this.STACK[i].name == name) break;
|
||||
if (i != -1) {
|
||||
var node;
|
||||
while ((node = this.STACK.pop()).name != name);
|
||||
this.popNode(node);
|
||||
} else if (name == 'p' || name == 'br')
|
||||
this.siblings().push({
|
||||
name,
|
||||
attrs: {}
|
||||
});
|
||||
this.i = this.data.indexOf('>', this.i);
|
||||
this.start = this.i + 1;
|
||||
if (this.i == -1) this.i = this.data.length;
|
||||
else this.state = this.Text;
|
||||
}
|
||||
}
|
||||
}
|
||||
module.exports = MpHtmlParser;
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
/* 配置文件 */
|
||||
// #ifdef MP-WEIXIN
|
||||
const canIUse = wx.canIUse('editor'); // 高基础库标识，用于兼容
|
||||
// #endif
|
||||
module.exports = {
|
||||
// 过滤器函数
|
||||
filter: null,
|
||||
// 代码高亮函数
|
||||
highlight: null,
|
||||
// 文本处理函数
|
||||
onText: null,
|
||||
blankChar: makeMap(' ,\xA0,\t,\r,\n,\f'),
|
||||
// 块级标签，将被转为 div
|
||||
blockTags: makeMap('address,article,aside,body,caption,center,cite,footer,header,html,nav,section' + (
|
||||
// #ifdef MP-WEIXIN
|
||||
canIUse ? '' :
|
||||
// #endif
|
||||
',pre')),
|
||||
// 将被移除的标签
|
||||
ignoreTags: makeMap(
|
||||
'area,base,basefont,canvas,command,frame,input,isindex,keygen,link,map,meta,param,script,source,style,svg,textarea,title,track,use,wbr'
|
||||
// #ifdef MP-WEIXIN
|
||||
+ (canIUse ? ',rp' : '')
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
+ ',embed,iframe'
|
||||
// #endif
|
||||
),
|
||||
// 只能被 rich-text 显示的标签
|
||||
richOnlyTags: makeMap('a,colgroup,fieldset,legend,picture,table'
|
||||
// #ifdef MP-WEIXIN
|
||||
+ (canIUse ? ',bdi,bdo,caption,rt,ruby' : '')
|
||||
// #endif
|
||||
),
|
||||
// 自闭合的标签
|
||||
selfClosingTags: makeMap(
|
||||
'area,base,basefont,br,col,circle,ellipse,embed,frame,hr,img,input,isindex,keygen,line,link,meta,param,path,polygon,rect,source,track,use,wbr'
|
||||
),
|
||||
// 信任的属性
|
||||
trustAttrs: makeMap(
|
||||
'align,alt,app-id,author,autoplay,border,cellpadding,cellspacing,class,color,colspan,controls,data-src,dir,face,height,href,id,ignore,loop,media,muted,name,path,poster,rowspan,size,span,src,start,style,type,unit-id,width,xmlns'
|
||||
),
|
||||
// bool 型的属性
|
||||
boolAttrs: makeMap('autoplay,controls,ignore,loop,muted'),
|
||||
// 信任的标签
|
||||
trustTags: makeMap(
|
||||
'a,abbr,ad,audio,b,blockquote,br,code,col,colgroup,dd,del,dl,dt,div,em,fieldset,h1,h2,h3,h4,h5,h6,hr,i,img,ins,label,legend,li,ol,p,q,source,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,title,ul,video'
|
||||
// #ifdef MP-WEIXIN
|
||||
+ (canIUse ? ',bdi,bdo,caption,pre,rt,ruby' : '')
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
+ ',embed,iframe'
|
||||
// #endif
|
||||
),
|
||||
// 默认的标签样式
|
||||
userAgentStyles: {
|
||||
address: 'font-style:italic',
|
||||
big: 'display:inline;font-size:1.2em',
|
||||
blockquote: 'background-color:#f6f6f6;border-left:3px solid #dbdbdb;color:#6c6c6c;padding:5px 0 5px 10px',
|
||||
caption: 'display:table-caption;text-align:center',
|
||||
center: 'text-align:center',
|
||||
cite: 'font-style:italic',
|
||||
dd: 'margin-left:40px',
|
||||
img: 'max-width:100%',
|
||||
mark: 'background-color:yellow',
|
||||
picture: 'max-width:100%',
|
||||
pre: 'font-family:monospace;white-space:pre;overflow:scroll',
|
||||
s: 'text-decoration:line-through',
|
||||
small: 'display:inline;font-size:0.8em',
|
||||
u: 'text-decoration:underline'
|
||||
}
|
||||
}
|
||||
|
||||
function makeMap(str) {
|
||||
var map = {},
|
||||
list = str.split(',');
|
||||
for (var i = list.length; i--;)
|
||||
map[list[i]] = true;
|
||||
return map;
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
var inlineTags = {
|
||||
abbr: 1,
|
||||
b: 1,
|
||||
big: 1,
|
||||
code: 1,
|
||||
del: 1,
|
||||
em: 1,
|
||||
i: 1,
|
||||
ins: 1,
|
||||
label: 1,
|
||||
q: 1,
|
||||
small: 1,
|
||||
span: 1,
|
||||
strong: 1
|
||||
}
|
||||
export default {
|
||||
// 从顶层标签的样式中取出一些给 rich-text
|
||||
getStyle: function(style) {
|
||||
if (style) {
|
||||
var i, j, res = '';
|
||||
if ((i = style.indexOf('display')) != -1)
|
||||
res = style.substring(i, (j = style.indexOf(';', i)) == -1 ? style.length : j);
|
||||
if ((i = style.indexOf('float')) != -1)
|
||||
res += ';' + style.substring(i, (j = style.indexOf(';', i)) == -1 ? style.length : j);
|
||||
return res;
|
||||
}
|
||||
},
|
||||
getNode: function(item) {
|
||||
return [item];
|
||||
},
|
||||
// 是否通过 rich-text 显示
|
||||
useRichText: function(item) {
|
||||
return !item.c && !inlineTags[item.name] && (item.attrs.style || '').indexOf('display:inline') == -1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
var inlineTags = {
|
||||
abbr: 1,
|
||||
b: 1,
|
||||
big: 1,
|
||||
code: 1,
|
||||
del: 1,
|
||||
em: 1,
|
||||
i: 1,
|
||||
ins: 1,
|
||||
label: 1,
|
||||
q: 1,
|
||||
small: 1,
|
||||
span: 1,
|
||||
strong: 1
|
||||
}
|
||||
module.exports = {
|
||||
// 从顶层标签的样式中取出一些给 rich-text
|
||||
getStyle: function(style) {
|
||||
if (style) {
|
||||
var i, j, res = '';
|
||||
if ((i = style.indexOf('display')) != -1)
|
||||
res = style.substring(i, (j = style.indexOf(';', i)) == -1 ? style.length : j);
|
||||
if ((i = style.indexOf('float')) != -1)
|
||||
res += ';' + style.substring(i, (j = style.indexOf(';', i)) == -1 ? style.length : j);
|
||||
return res;
|
||||
}
|
||||
},
|
||||
// 处理懒加载
|
||||
getNode: function(item, imgLoad) {
|
||||
if (!imgLoad && item.attrs.i != '0') {
|
||||
var img = {
|
||||
name: 'img',
|
||||
attrs: JSON.parse(JSON.stringify(item.attrs))
|
||||
}
|
||||
delete img.attrs.src;
|
||||
img.attrs.style += ';width:20px;height:20px';
|
||||
return [img];
|
||||
} else return [item];
|
||||
},
|
||||
// 是否通过 rich-text 显示
|
||||
useRichText: function(item) {
|
||||
return !item.c && !inlineTags[item.name] && (item.attrs.style || '').indexOf('display:inline') == -1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,485 @@
|
|||
<!--
|
||||
trees 递归显示组件
|
||||
github：https://github.com/jin-yufeng/Parser
|
||||
docs：https://jin-yufeng.github.io/Parser
|
||||
插件市场：https://ext.dcloud.net.cn/plugin?id=805
|
||||
author：JinYufeng
|
||||
update：2020/04/13
|
||||
-->
|
||||
<template>
|
||||
<view class="interlayer">
|
||||
<block v-for="(n, index) in nodes" v-bind:key="index">
|
||||
<!--图片-->
|
||||
<!--#ifdef MP-WEIXIN || MP-QQ || MP-ALIPAY || APP-PLUS-->
|
||||
<rich-text v-if="n.name=='img'" :id="n.attrs.id" class="_img" :style="''+handler.getStyle(n.attrs.style)" :nodes="handler.getNode(n,!lazyLoad||imgLoad)"
|
||||
:data-attrs="n.attrs" @tap="imgtap" @longpress="imglongtap" />
|
||||
<!--#endif-->
|
||||
<!--#ifdef MP-BAIDU || MP-TOUTIAO-->
|
||||
<rich-text v-if="n.name=='img'" :id="n.attrs.id" class="_img" :style="n.attrs.contain" :nodes='[n]' :data-attrs="n.attrs"
|
||||
@tap="imgtap" @longpress="imglongtap" />
|
||||
<!--#endif-->
|
||||
<!--文本-->
|
||||
<!--#ifdef MP-WEIXIN || MP-QQ || APP-PLUS-->
|
||||
<rich-text v-else-if="n.decode" class="_entity" :nodes="[n]"></rich-text>
|
||||
<!--#endif-->
|
||||
<text v-else-if="n.type=='text'" decode>{{n.text}}</text>
|
||||
<text v-else-if="n.name=='br'">\n</text>
|
||||
<!--视频-->
|
||||
<view v-else-if="n.name=='video'">
|
||||
<view v-if="(!loadVideo||n.lazyLoad)&&!(controls[n.attrs.id]&&controls[n.attrs.id].play)" :id="n.attrs.id" :class="'_video '+(n.attrs.class||'')"
|
||||
:style="n.attrs.style" @tap="_loadVideo" />
|
||||
<video v-else :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay||(controls[n.attrs.id]&&controls[n.attrs.id].play)"
|
||||
:controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :poster="n.attrs.poster" :src="n.attrs.source[(controls[n.attrs.id]&&controls[n.attrs.id].index)||0]"
|
||||
:unit-id="n.attrs['unit-id']" :data-id="n.attrs.id" data-from="video" data-source="source" @error="error" @play="play" />
|
||||
</view>
|
||||
<!--音频-->
|
||||
<audio v-else-if="n.name=='audio'" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author" :autoplay="n.attrs.autoplay"
|
||||
:controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster" :src="n.attrs.source[(controls[n.attrs.id]&&controls[n.attrs.id].index)||0]"
|
||||
:data-id="n.attrs.id" data-from="audio" data-source="source" @error="error" @play="play" />
|
||||
<!--链接-->
|
||||
<view v-else-if="n.name=='a'" :class="'_a '+(n.attrs.class||'')" hover-class="_hover" :style="n.attrs.style"
|
||||
:data-attrs="n.attrs" @tap="linkpress">
|
||||
<trees class="_span" :nodes="n.children" />
|
||||
</view>
|
||||
<!--广告（按需打开注释）-->
|
||||
<!--#ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO-->
|
||||
<!--<ad v-else-if="n.name=='ad'" :class="n.attrs.class" :style="n.attrs.style" :unit-id="n.attrs['unit-id']"
|
||||
data-from="ad" @error="error" />-->
|
||||
<!--#endif-->
|
||||
<!--#ifdef MP-BAIDU-->
|
||||
<!--<ad v-else-if="n.name=='ad'" :class="n.attrs.class" :style="n.attrs.style" :appid="n.attrs.appid"
|
||||
:apid="n.attrs.apid" :type="n.attrs.type" data-from="ad" @error="error" />-->
|
||||
<!--#endif-->
|
||||
<!--#ifdef APP-PLUS-->
|
||||
<!--<ad v-else-if="n.name=='ad'" :class="n.attrs.class" :style="n.attrs.style" :adpid="n.attrs.adpid"
|
||||
data-from="ad" @error="error" />-->
|
||||
<!--#endif-->
|
||||
<!--列表-->
|
||||
<view v-else-if="n.name=='li'" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:flex'">
|
||||
<view v-if="n.type=='ol'" class="_ol-bef">{{n.num}}</view>
|
||||
<view v-else class="_ul-bef">
|
||||
<view v-if="n.floor%3==0" class="_ul-p1">█</view>
|
||||
<view v-else-if="n.floor%3==2" class="_ul-p2" />
|
||||
<view v-else class="_ul-p1" style="border-radius:50%">█</view>
|
||||
</view>
|
||||
<!--#ifdef MP-ALIPAY-->
|
||||
<view class="_li">
|
||||
<trees :nodes="n.children" />
|
||||
</view>
|
||||
<!--#endif-->
|
||||
<!--#ifndef MP-ALIPAY-->
|
||||
<trees class="_li" :nodes="n.children" :lazyLoad="lazyLoad" :loadVideo="loadVideo" />
|
||||
<!--#endif-->
|
||||
</view>
|
||||
<!--表格-->
|
||||
<view v-else-if="n.name=='table'&&n.c" :id="n.attrs.id" :class="n.attrs.class" :style="(n.attrs.style||'')+';display:table'">
|
||||
<view v-for="(tbody, i) in n.children" v-bind:key="i" :class="tbody.attrs.class" :style="(tbody.attrs.style||'')+(tbody.name[0]=='t'?';display:table-'+(tbody.name=='tr'?'row':'row-group'):'')">
|
||||
<view v-for="(tr, j) in tbody.children" v-bind:key="j" :class="tr.attrs.class" :style="(tr.attrs.style||'')+(tr.name[0]=='t'?';display:table-'+(tr.name=='tr'?'row':'cell'):'')">
|
||||
<trees v-if="tr.name=='td'" :nodes="tr.children" :lazyLoad="lazyLoad" :loadVideo="loadVideo" />
|
||||
<block v-else>
|
||||
<!--#ifdef MP-ALIPAY-->
|
||||
<view v-for="(td, k) in tr.children" v-bind:key="k" :class="td.attrs.class" :style="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')">
|
||||
<trees :nodes="td.children" />
|
||||
</view>
|
||||
<!--#endif-->
|
||||
<!--#ifndef MP-ALIPAY-->
|
||||
<trees v-for="(td, k) in tr.children" v-bind:key="k" :class="td.attrs.class" :style="(td.attrs.style||'')+(td.name[0]=='t'?';display:table-'+(td.name=='tr'?'row':'cell'):'')"
|
||||
:nodes="td.children" :lazyLoad="lazyLoad" :loadVideo="loadVideo" />
|
||||
<!--#endif-->
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--#ifdef APP-PLUS-->
|
||||
<iframe v-else-if="n.name=='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder"
|
||||
:width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" />
|
||||
<embed v-else-if="n.name=='embed'" :style="n.attrs.style" :width="n.attrs.width" :height="n.attrs.height" :src="n.attrs.src" />
|
||||
<!--#endif-->
|
||||
<!--富文本-->
|
||||
<!--#ifdef MP-WEIXIN || MP-QQ || MP-ALIPAY || APP-PLUS-->
|
||||
<rich-text v-else-if="handler.useRichText(n)" :id="n.attrs.id" :class="'_p __'+n.name" :nodes="[n]" />
|
||||
<!--#endif-->
|
||||
<!--#ifdef MP-BAIDU || MP-TOUTIAO-->
|
||||
<rich-text v-else-if="!(n.c||n.continue)" :id="n.attrs.id" :class="_p" :style="n.attrs.contain" :nodes="[n]" />
|
||||
<!--#endif-->
|
||||
<!--#ifdef MP-ALIPAY-->
|
||||
<view v-else :id="n.attrs.id" :class="'_'+n.name+' '+(n.attrs.class||'')" :style="n.attrs.style">
|
||||
<trees :nodes="n.children" />
|
||||
</view>
|
||||
<!--#endif-->
|
||||
<!--#ifndef MP-ALIPAY-->
|
||||
<trees v-else :class="(n.attrs.id||'')+' _'+n.name+' '+(n.attrs.class||'')" :style="n.attrs.style" :nodes="n.children"
|
||||
:lazyLoad="lazyLoad" :loadVideo="loadVideo" />
|
||||
<!--#endif-->
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
<script module="handler" lang="wxs" src="./handler.wxs"></script>
|
||||
<script module="handler" lang="sjs" src="./handler.sjs"></script>
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
global.Parser = {};
|
||||
import trees from './trees'
|
||||
export default {
|
||||
components: {
|
||||
trees
|
||||
},
|
||||
name: 'trees',
|
||||
data() {
|
||||
return {
|
||||
controls: {},
|
||||
// #ifdef MP-WEIXIN || MP-QQ || APP-PLUS
|
||||
imgLoad: false,
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
loadVideo: true
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
props: {
|
||||
nodes: Array,
|
||||
// #ifdef MP-WEIXIN || MP-QQ || H5 || APP-PLUS
|
||||
lazyLoad: Boolean,
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
loadVideo: Boolean
|
||||
// #endif
|
||||
},
|
||||
mounted() {
|
||||
// 获取顶层组件
|
||||
this.top = this.$parent;
|
||||
while (this.top.$options.name != 'parser') {
|
||||
if (this.top.top) {
|
||||
this.top = this.top.top;
|
||||
break;
|
||||
}
|
||||
this.top = this.top.$parent;
|
||||
}
|
||||
},
|
||||
// #ifdef MP-WEIXIN || MP-QQ || APP-PLUS
|
||||
beforeDestroy() {
|
||||
if (this.observer)
|
||||
this.observer.disconnect();
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
// #ifndef MP-ALIPAY
|
||||
play(e) {
|
||||
if (this.top.videoContexts.length > 1 && this.top.autopause)
|
||||
for (var i = this.top.videoContexts.length; i--;)
|
||||
if (this.top.videoContexts[i].id != e.currentTarget.dataset.id)
|
||||
this.top.videoContexts[i].pause();
|
||||
},
|
||||
// #endif
|
||||
imgtap(e) {
|
||||
var attrs = e.currentTarget.dataset.attrs;
|
||||
if (!attrs.ignore) {
|
||||
var preview = true, data = {
|
||||
id: e.target.id,
|
||||
src: attrs.src,
|
||||
ignore: () => preview = false
|
||||
};
|
||||
global.Parser.onImgtap && global.Parser.onImgtap(data);
|
||||
this.top.$emit('imgtap', data);
|
||||
if (preview) {
|
||||
var urls = this.top.imgList,
|
||||
current = urls[attrs.i] ? parseInt(attrs.i) : (urls = [attrs.src], 0);
|
||||
uni.previewImage({
|
||||
current,
|
||||
urls
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
imglongtap(e) {
|
||||
var attrs = e.item.dataset.attrs;
|
||||
if (!attrs.ignore)
|
||||
this.top.$emit('imglongtap', {
|
||||
id: e.target.id,
|
||||
src: attrs.src
|
||||
})
|
||||
},
|
||||
linkpress(e) {
|
||||
var jump = true,
|
||||
attrs = e.currentTarget.dataset.attrs;
|
||||
attrs.ignore = () => jump = false;
|
||||
global.Parser.onLinkpress && global.Parser.onLinkpress(attrs);
|
||||
this.top.$emit('linkpress', attrs);
|
||||
if (jump) {
|
||||
// #ifdef MP
|
||||
if (attrs['app-id']) {
|
||||
return uni.navigateToMiniProgram({
|
||||
appId: attrs['app-id'],
|
||||
path: attrs.path
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
if (attrs.href) {
|
||||
if (attrs.href[0] == '#') {
|
||||
if (this.top.useAnchor)
|
||||
this.top.navigateTo({
|
||||
id: attrs.href.substring(1)
|
||||
})
|
||||
} else if (attrs.href.indexOf('http') == 0 || attrs.href.indexOf('//') == 0) {
|
||||
// #ifdef APP-PLUS
|
||||
plus.runtime.openWeb(attrs.href);
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
uni.setClipboardData({
|
||||
data: attrs.href,
|
||||
success: () =>
|
||||
uni.showToast({
|
||||
title: '链接已复制'
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
} else
|
||||
uni.navigateTo({
|
||||
url: attrs.href
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
error(e) {
|
||||
var context, target = e.currentTarget,
|
||||
source = target.dataset.from;
|
||||
if (source == 'video' || source == 'audio') {
|
||||
// 加载其他 source
|
||||
var index = this.controls[target.id] ? this.controls[target.id].index + 1 : 1;
|
||||
if (index < target.dataset.source.length)
|
||||
this.$set(this.controls, target.id + '.index', index);
|
||||
if (source == 'video') context = uni.createVideoContext(target.id, this);
|
||||
}
|
||||
this.top && this.top.$emit('error', {
|
||||
source,
|
||||
target,
|
||||
errMsg: e.detail.errMsg,
|
||||
errCode: e.detail.errCode,
|
||||
context
|
||||
});
|
||||
},
|
||||
_loadVideo(e) {
|
||||
this.$set(this.controls, e.currentTarget.id, {
|
||||
play: true,
|
||||
index: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 在这里引入自定义样式 */
|
||||
|
||||
/* 链接和图片效果 */
|
||||
._a {
|
||||
display: inline;
|
||||
color: #366092;
|
||||
word-break: break-all;
|
||||
padding: 1.5px 0 1.5px 0;
|
||||
}
|
||||
|
||||
._hover {
|
||||
opacity: 0.7;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
._img {
|
||||
display: inline-block;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
/* #ifdef MP-WEIXIN */
|
||||
:host {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef MP */
|
||||
.interlayer {
|
||||
align-content: inherit;
|
||||
align-items: inherit;
|
||||
display: inherit;
|
||||
flex-direction: inherit;
|
||||
flex-wrap: inherit;
|
||||
justify-content: inherit;
|
||||
width: 100%;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
._b,
|
||||
._strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
._blockquote,
|
||||
._div,
|
||||
._p,
|
||||
._ol,
|
||||
._ul,
|
||||
._li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
._code {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
._del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
._em,
|
||||
._i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
._h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
._h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
._h3 {
|
||||
font-size: 1.17em;
|
||||
}
|
||||
|
||||
._h5 {
|
||||
font-size: 0.83em;
|
||||
}
|
||||
|
||||
._h6 {
|
||||
font-size: 0.67em;
|
||||
}
|
||||
|
||||
._h1,
|
||||
._h2,
|
||||
._h3,
|
||||
._h4,
|
||||
._h5,
|
||||
._h6 {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
._ins {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
._li {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
._ol-bef {
|
||||
margin-right: 5px;
|
||||
text-align: right;
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
._ul-bef {
|
||||
line-height: normal;
|
||||
margin: 0 12px 0 23px;
|
||||
}
|
||||
|
||||
._ol-bef,
|
||||
._ul_bef {
|
||||
flex: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
._ul-p1 {
|
||||
display: inline-block;
|
||||
height: 0.3em;
|
||||
line-height: 0.3em;
|
||||
overflow: hidden;
|
||||
width: 0.3em;
|
||||
}
|
||||
|
||||
._ul-p2 {
|
||||
border: 0.05em solid black;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
height: 0.23em;
|
||||
width: 0.23em;
|
||||
}
|
||||
|
||||
._q::before {
|
||||
content: '"';
|
||||
}
|
||||
|
||||
._q::after {
|
||||
content: '"';
|
||||
}
|
||||
|
||||
._sub {
|
||||
font-size: smaller;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
._sup {
|
||||
font-size: smaller;
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
/* #ifndef MP-WEIXIN */
|
||||
._abbr,
|
||||
._b,
|
||||
._code,
|
||||
._del,
|
||||
._em,
|
||||
._i,
|
||||
._ins,
|
||||
._label,
|
||||
._q,
|
||||
._span,
|
||||
._strong,
|
||||
._sub,
|
||||
._sup {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef MP-WEIXIN || MP-QQ || MP-ALIPAY */
|
||||
.__bdo,
|
||||
.__bdi,
|
||||
.__ruby,
|
||||
.__rt,
|
||||
._entity {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
._video {
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
height: 225px;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
._video::after {
|
||||
border-color: transparent transparent transparent white;
|
||||
border-style: solid;
|
||||
border-width: 15px 0 15px 30px;
|
||||
content: '';
|
||||
left: 50%;
|
||||
margin: -15px 0 0 -15px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
<template>
|
||||
<view class="msg-view">
|
||||
<scroll-view class="msg-view-p" scroll-y="true" :scroll-top="msgPanelScrollTop">
|
||||
<view id="chatArea">
|
||||
<view class="chat-area-line" v-for="(item,index) in msgList">
|
||||
|
||||
<view class="system-msg"
|
||||
:style="{'flex-direction':((item.userName.length + item.content.length)<15?'row':'')}"
|
||||
v-if="item.msg_type == 'system'">
|
||||
<view class="system-msg-detail ">
|
||||
<text class="system-msg-detail-username " v-for="i in item.userName">{{i}}</text>
|
||||
<text class="system-msg-detail-content " v-for="i in ':'">{{i}}</text>
|
||||
<text class="system-msg-detail-content " v-for="i in item.content">{{i}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="user-msg"
|
||||
:style="{'flex-direction':((item.userName.length + item.content.length)<15?'row':'')}" v-else>
|
||||
|
||||
<view class="user-msg-detail">
|
||||
<view class="user-msg-detail-tag">
|
||||
<!-- <text style="text-align: center;font-size: 20px;color: #DD524D;">★1</text> -->
|
||||
<!-- 这里可以根据用户等级显示图片 -->
|
||||
<image :src="item.avatar" class="user-msg-detail-tag"></image>
|
||||
</view>
|
||||
<text class="user-msg-detail-username" v-for="i in item.userName"
|
||||
@click="test(item.userName)">{{i}}</text>
|
||||
<text class="user-msg-detail-content" v-for="i in ':'">{{i}}</text>
|
||||
<text class="user-msg-detail-content" v-for="i in item.content">{{i}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'MhMsgList',
|
||||
props: {
|
||||
msgList: {
|
||||
type: [Object, Array],
|
||||
default: [{
|
||||
userName: "系统通知",
|
||||
content: "直播倡导绿色直播，严禁发布涉黄涉毒涉赌，严禁发布涉政、违法及低俗违规内容。健康直播，文明互动",
|
||||
cmd: "say",
|
||||
|
||||
msg_type: "system"
|
||||
}, ]
|
||||
},
|
||||
msgPanelScrollTop: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
test(e) {
|
||||
uni.showToast({
|
||||
title: e,
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
|
||||
setMsgPanelScroll() {
|
||||
var that = this;
|
||||
setTimeout(function() {
|
||||
const query = uni.createSelectorQuery().in(that);
|
||||
query.select('#chatArea').boundingClientRect(data => {
|
||||
that.msgPanelScrollTop = data.height - 200;
|
||||
}).exec();
|
||||
}, 50)
|
||||
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.msg-view-p {
|
||||
display: flex;
|
||||
width: 550rpx;
|
||||
height: 550rpx;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.chat-area-line {
|
||||
width: 550upx;
|
||||
|
||||
flex-direction: row;
|
||||
margin-bottom: 5upx;
|
||||
}
|
||||
|
||||
.system-msg {
|
||||
width: 550upx;
|
||||
margin-bottom: 5upx;
|
||||
}
|
||||
|
||||
.system-msg-detail {
|
||||
// max-width: 550upx;
|
||||
|
||||
padding: 10upx;
|
||||
border-radius: 30upx;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 14upx;
|
||||
|
||||
>.system-msg-detail-username {
|
||||
color: red;
|
||||
font-size: 32upx;
|
||||
font-weight: 400;
|
||||
line-height: 40upx;
|
||||
|
||||
}
|
||||
|
||||
>.system-msg-detail-content {
|
||||
font-size: 32upx;
|
||||
font-weight: 400;
|
||||
line-height: 40upx;
|
||||
color: #A0CFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.user-line {
|
||||
// max-width: 530upx;
|
||||
padding: 10upx;
|
||||
color: #FFFFFF;
|
||||
flex-direction: row;
|
||||
border-radius: 30upx;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
margin-right: 14upx;
|
||||
font-size: 28upx;
|
||||
font-weight: 400;
|
||||
line-height: 40upx;
|
||||
}
|
||||
|
||||
.user-msg {
|
||||
width: 530upx;
|
||||
|
||||
|
||||
margin-bottom: 5upx;
|
||||
}
|
||||
|
||||
.user-msg-detail-tag {
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
|
||||
.user-msg-detail {
|
||||
padding: 10upx;
|
||||
border-radius: 30upx;
|
||||
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 14upx;
|
||||
|
||||
|
||||
|
||||
>.user-msg-detail-username {
|
||||
color: #A0CFFF;
|
||||
font-size: 32upx;
|
||||
font-weight: 400;
|
||||
line-height: 40upx;
|
||||
}
|
||||
|
||||
>.user-msg-detail-content {
|
||||
font-size: 32upx;
|
||||
font-weight: 400;
|
||||
line-height: 40upx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,488 @@
|
|||
<template>
|
||||
<view class="containers">
|
||||
<view class="header">
|
||||
<view class="search">
|
||||
<text class="iconfont icon-xiazai5"></text>
|
||||
<input type="text" placeholder="请输入商品名称" v-model="searchVal" @input="setValue" confirm-type="search"
|
||||
@confirm="searchBut()" placeholder-class='placeholder'>
|
||||
</view>
|
||||
<view class="iconclose" @click="close">
|
||||
<image src="@/static/img/close.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="main">
|
||||
<scroll-view scroll-y="true" @touchmove.stop>
|
||||
<block>
|
||||
|
||||
<view v-if="bought.length>0" @touchmove="onTouchmove" id="goods" class="goods">
|
||||
<view class="picTxt acea-row" v-for="(item, i) in bought" :key="i">
|
||||
<view class="checkbox">
|
||||
<text @click.stop="goodsCheck(item)" v-if="item.check" class="iconfont icon-xuanzhong1"
|
||||
style="color: red;"></text>
|
||||
<text @click.stop="goodsCheck(item)" v-else class="iconfont icon-weixuanzhong"></text>
|
||||
</view>
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
</view>
|
||||
|
||||
<view class='text'>
|
||||
<view class='line2 name'>{{item.store_name}}</view>
|
||||
<view class="" style="margin-top: 20rpx;">
|
||||
{{item.price}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty">
|
||||
<image src="/static/images/no_thing.png"></image>
|
||||
<text>暂无内容哦~</text>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<view class="foot_bar">
|
||||
<button class="confirm_btn" @click="submit">确定({{checkedArr.length}})</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import subtractive from '@/components/subtractive/subtractive.vue';
|
||||
|
||||
import {
|
||||
good
|
||||
} from '@/api/api.js'
|
||||
|
||||
|
||||
export default {
|
||||
props: {
|
||||
checkedObj: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
subtractive
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isActive: 0,
|
||||
loadedb: false,
|
||||
loadingb: false,
|
||||
loadedc: false,
|
||||
loadingc: false,
|
||||
loadeds: false,
|
||||
loadings: false,
|
||||
whereb: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
keyword: '',
|
||||
},
|
||||
peicenumber: 0,
|
||||
|
||||
searchVal: '',
|
||||
checked: [],
|
||||
list: [],
|
||||
|
||||
bought: [],
|
||||
|
||||
checkedArr: [],
|
||||
aryys: [],
|
||||
// picker下拉数据源
|
||||
storageCustomList: [],
|
||||
index: 0,
|
||||
pickerData: '请选择',
|
||||
itstock: '',
|
||||
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
checkedObj: {
|
||||
handler(n) {
|
||||
this.checkedArr = n
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.checkedArr = this.checkedObj
|
||||
this.aryys = this.checkedObj
|
||||
this.getBounht();
|
||||
},
|
||||
methods: {
|
||||
|
||||
//价格
|
||||
producrprice(e, i, item) {
|
||||
this.bought[i].price = e.detail.value
|
||||
this.$set(item, 'check', false);
|
||||
for (let i in this.checkedArr) {
|
||||
if (this.checkedArr[i].product_id == item.product_id) {
|
||||
this.checkedArr.splice(i, 1)
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
incrementTotal(e, i, item) {
|
||||
// console.log(e, i, item)
|
||||
this.$set(item, 'check', false);
|
||||
for (let i in this.checkedArr) {
|
||||
if (this.checkedArr[i].product_id == item.product_id) {
|
||||
this.checkedArr.splice(i, 1)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
// picker修改事件
|
||||
bindPickerChange: function(e, storage, num) {
|
||||
this.bought[num].attrValue[this.index].sku = storage[e.detail.value].sku
|
||||
this.bought[num].attrValue[this.index].stock = storage[e.detail.value].stock
|
||||
this.bought[num].product_attr_unique = storage[e.detail.value].unique
|
||||
this.pickerData = storage[this.index] // 这里就是选中的对象
|
||||
if (this.bought[num].attrValue[this.index].stock == 0) {
|
||||
this.$util.Tips({
|
||||
title: '库存不足'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 点击关闭按钮
|
||||
close() {
|
||||
this.$emit('close');
|
||||
},
|
||||
numberChange(data, i) {
|
||||
this.peicenumber = data.number;
|
||||
this.bought[i].number = data.number
|
||||
|
||||
},
|
||||
setValue: function(event) {
|
||||
this.$set(this.whereb, 'keyword', event.detail.value);
|
||||
if (!event.detail.value) {
|
||||
this.whereb.page = 1
|
||||
this.loadedb = false
|
||||
this.getBounht()
|
||||
}
|
||||
|
||||
},
|
||||
searchBut() {
|
||||
this.bought = []
|
||||
this.whereb.page = 1
|
||||
this.loadedb = false
|
||||
this.getBounht()
|
||||
},
|
||||
tabs(index) {
|
||||
this.isActive = index
|
||||
this.$set(this.whereb, 'keyword', '');
|
||||
|
||||
|
||||
},
|
||||
onTouchmove(e) {
|
||||
if (this.loadendb) return;
|
||||
if (this.loadingb) return;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('#goods').boundingClientRect(data => {
|
||||
if (data.bottom < 1500 && data.top < 0) {
|
||||
this.getBounht();
|
||||
}
|
||||
}).exec();
|
||||
|
||||
// 模拟触底刷新
|
||||
},
|
||||
|
||||
|
||||
getBounht() {
|
||||
var that = this;
|
||||
|
||||
// if (that.loadingb || that.loadedb) return;
|
||||
// that.loadingb = true;
|
||||
|
||||
good(that.whereb).then(
|
||||
res => {
|
||||
that.loadingb = false;
|
||||
that.loadedb = res.data.list.length < that.whereb.limit;
|
||||
that.bought.push.apply(that.bought, res.data.list);
|
||||
that.whereb.page = that.whereb.page + 1;
|
||||
that.getInitchecked(that.bought);
|
||||
},
|
||||
error => {
|
||||
|
||||
console.log(error.msg)
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
|
||||
/*获取初始化选中的数据*/
|
||||
getInitchecked(arr) {
|
||||
let that = this;
|
||||
arr.forEach((item, index) => {
|
||||
that.$set(item, 'check', false);
|
||||
that.checkedArr.forEach((val, i) => {
|
||||
if (item.product_id == val.product_id) {
|
||||
that.$set(item, 'check', true);
|
||||
that.$set(item, 'number', val.number);
|
||||
that.$set(item, 'price', val.price);
|
||||
that.peicenumber = val.number
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
/*已选中的商品打钩*/
|
||||
getCheckedGoods() {
|
||||
this.checked = []
|
||||
this.checkedArr.forEach((item, index) => {
|
||||
this.checkedArr.push(item)
|
||||
})
|
||||
},
|
||||
/*点击选中与否*/
|
||||
goodsCheck(item) {
|
||||
this.$set(item, 'check', !item.check);
|
||||
if (item.check) {
|
||||
this.checkedArr.push(item)
|
||||
|
||||
} else {
|
||||
this.checkedArr.splice(this.checkedArr.findIndex(itemn => ((itemn.product_id == item.product_id))), 1)
|
||||
}
|
||||
},
|
||||
|
||||
/*确定提交*/
|
||||
submit() {
|
||||
this.$emit('getProduct', this.checkedArr);
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.containers {
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
padding: 40rpx 0;
|
||||
position: relative;
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
text {
|
||||
position: relative;
|
||||
margin: 0 50rpx;
|
||||
color: #999999;
|
||||
font-size: 30rpx;
|
||||
|
||||
&.on {
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 40rpx;
|
||||
height: 5rpx;
|
||||
background: var(--view-theme);
|
||||
position: absolute;
|
||||
bottom: -10rpx;
|
||||
left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iconclose {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
|
||||
position: absolute;
|
||||
top: -150rpx;
|
||||
right: 30rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sub_title {
|
||||
color: #282828;
|
||||
font-size: 26rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
color: #8A8A8A;
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
scroll-view {
|
||||
height: 650rpx;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 650rpx;
|
||||
margin: 40rpx 0 80rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.picTxt {
|
||||
width: 100%;
|
||||
padding: 25rpx 0;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
border-top: 2rpx solid #E7E6E4;
|
||||
|
||||
.picTxt_one {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.picTxt_one {
|
||||
display: flex;
|
||||
margin-top: 20rpx;
|
||||
|
||||
|
||||
.slecte {
|
||||
margin-right: 30rpx;
|
||||
width: 280rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #959595;
|
||||
background-color: #E7E6E4;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.checkbox {
|
||||
margin-right: 30rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 38rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.icon-xuanzhong1 {
|
||||
color: var(--view-theme);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.pictrue {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 430rpx;
|
||||
margin-left: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
position: relative;
|
||||
height: 160rpx;
|
||||
|
||||
.name {
|
||||
color: #282828;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.money {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: var(--view-priceColor);
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.foot_bar {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
// bottom: 54px;
|
||||
left: 0;
|
||||
padding: 20rpx 0;
|
||||
z-index: 5;
|
||||
|
||||
.confirm_btn {
|
||||
width: 710rpx;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
background-color: red;
|
||||
border-radius: 43rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin: 130rpx 0 150rpx;
|
||||
text-align: center;
|
||||
|
||||
image,
|
||||
uni-image {
|
||||
display: inline-block;
|
||||
width: 414rpx;
|
||||
height: 305rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
display: block;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
<template>
|
||||
<view class="uni-numbox">
|
||||
<!-- -部分 -->
|
||||
<view class="uni-numbox-minus" @click="_calcValue('subtract')">
|
||||
<text :class="minDisabled?'uni-numbox-disabled': ''">-</text>
|
||||
</view>
|
||||
<!-- 中间输入数值部分 -->
|
||||
<input class="uni-numbox-value" type="number" :disabled="disabled" :value="inputValue" @blur="_onBlur">
|
||||
<!-- + 部分 -->
|
||||
<view class="uni-numbox-plus" @click="_calcValue('add')">
|
||||
<text :class="maxDisabled?'uni-numbox-disabled': ''">+</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'uni-number-box',
|
||||
props: {
|
||||
// isMax 是否有上限设置
|
||||
isMax: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// isMin 是否有下限设置
|
||||
isMin: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// index 唯一值，如果一个页面有多个数量增减组件时，起到唯一的作用
|
||||
index: {
|
||||
type: String,
|
||||
default: 0
|
||||
},
|
||||
// value 是数值
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// min 最小值
|
||||
min: {
|
||||
type: Number,
|
||||
default: -Infinity
|
||||
},
|
||||
// max 最大值
|
||||
max: {
|
||||
type: Number,
|
||||
default: Infinity
|
||||
},
|
||||
// step 步长
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
// disabled 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputValue: this.value,
|
||||
minDisabled: false,
|
||||
maxDisabled: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.maxDisabled = this.isMax;
|
||||
this.minDisabled = this.isMin;
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
inputValue(number) {
|
||||
const data = {
|
||||
number: number,
|
||||
index: this.index
|
||||
}
|
||||
this.$emit('eventChange', data);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_calcValue(type) {
|
||||
const scale = this._getDecimalScale();
|
||||
let value = this.inputValue * scale;
|
||||
let newValue = 0;
|
||||
let step = this.step * scale;
|
||||
|
||||
if (type === 'subtract') {
|
||||
newValue = value - step;
|
||||
if (newValue <= this.min) {
|
||||
this.minDisabled = true;
|
||||
}
|
||||
if (newValue < this.min) {
|
||||
newValue = this.min
|
||||
this.$util.Tips({
|
||||
title: '达到最小值了',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
if (newValue < this.max && this.maxDisabled === true) {
|
||||
this.maxDisabled = false;
|
||||
}
|
||||
} else if (type === 'add') {
|
||||
newValue = value + step;
|
||||
if (newValue >= this.max) {
|
||||
this.maxDisabled = true;
|
||||
}
|
||||
if (newValue > this.max) {
|
||||
this.$util.Tips({
|
||||
title: '达到最大值了',
|
||||
icon: 'error'
|
||||
})
|
||||
newValue = this.max
|
||||
}
|
||||
if (newValue > this.min && this.minDisabled === true) {
|
||||
this.minDisabled = false;
|
||||
}
|
||||
}
|
||||
if (newValue === value) {
|
||||
return;
|
||||
}
|
||||
this.inputValue = newValue / scale;
|
||||
this.$emit('increment', this.inputValue)
|
||||
},
|
||||
_getDecimalScale() {
|
||||
let scale = 1;
|
||||
// 浮点型
|
||||
if (~~this.step !== this.step) {
|
||||
scale = Math.pow(10, (this.step + '').split('.')[1].length);
|
||||
}
|
||||
return scale;
|
||||
},
|
||||
_onBlur(event) {
|
||||
let value = event.detail.value;
|
||||
if (!value) {
|
||||
this.inputValue = 0;
|
||||
return
|
||||
}
|
||||
value = +value;
|
||||
if (value > this.max) {
|
||||
value = this.max;
|
||||
} else if (value < this.min) {
|
||||
value = this.min
|
||||
}
|
||||
|
||||
this.inputValue = value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.uni-numbox {
|
||||
/* position:absolute; */
|
||||
/* left: 30upx;
|
||||
bottom: 0; */
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 200upx;
|
||||
height: 50upx;
|
||||
/* background:#f5f5f5; */
|
||||
}
|
||||
|
||||
.uni-numbox-minus {
|
||||
background: #EEEEEE !important;
|
||||
|
||||
color: #909399 !important;
|
||||
}
|
||||
|
||||
.uni-numbox-minus,
|
||||
.uni-numbox-plus {
|
||||
margin: 0;
|
||||
width: 53rpx;
|
||||
height: 53rpx;
|
||||
background-color: #F84221;
|
||||
opacity: 1;
|
||||
line-height: 53rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 40upx;
|
||||
}
|
||||
|
||||
.uni-numbox-minus .yticon,
|
||||
.uni-numbox-plus .yticon {
|
||||
font-size: 36upx;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.uni-numbox-minus {
|
||||
/* border-right: none;
|
||||
border-top-left-radius: 6upx;
|
||||
border-bottom-left-radius: 6upx; */
|
||||
}
|
||||
|
||||
.uni-numbox-plus {
|
||||
/* border-left: none;
|
||||
border-top-right-radius: 6upx;
|
||||
border-bottom-right-radius: 6upx; */
|
||||
}
|
||||
|
||||
.uni-numbox-value {
|
||||
position: relative;
|
||||
/* background-color: #f5f5f5; */
|
||||
width: 90upx;
|
||||
height: 50upx;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
font-size: 30upx;
|
||||
}
|
||||
|
||||
.uni-numbox-disabled.yticon {
|
||||
color: #d6d6d6;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
<template>
|
||||
<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
|
||||
<uni-transition :mode-class="['fade']" :styles="maskClass" :show="showTrans" @click="onTap" />
|
||||
<uni-transition :mode-class="ani" :styles="transClass" :show="showTrans" @click="onTap">
|
||||
<view class="uni-popup__wrapper-box" @click.stop="clear">
|
||||
<slot />
|
||||
</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||
type: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// maskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
maskClass: {
|
||||
'position': 'fixed',
|
||||
'bottom': 0,
|
||||
'top': 0,
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'backgroundColor': 'rgba(0, 0, 0, 0)'
|
||||
},
|
||||
transClass: {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type: {
|
||||
handler: function(newVal) {
|
||||
switch (this.type) {
|
||||
case 'top':
|
||||
this.ani = ['slide-top']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
}
|
||||
break
|
||||
case 'bottom':
|
||||
this.ani = ['slide-bottom']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'bottom': 0
|
||||
}
|
||||
console.log('直播调用弹窗')
|
||||
break
|
||||
case 'center':
|
||||
this.ani = ['zoom-out', 'fade']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
/* #ifndef APP-NVUE */
|
||||
'display': 'flex',
|
||||
'flexDirection': 'column',
|
||||
/* #endif */
|
||||
'bottom': 0,
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'top': 0,
|
||||
'justifyContent': 'center',
|
||||
'alignItems': 'center'
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
clear(e) {
|
||||
// TODO nvue 取消冒泡
|
||||
e.stopPropagation()
|
||||
},
|
||||
open() {
|
||||
this.showPopup = true
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.showTrans = true
|
||||
}, 0);
|
||||
})
|
||||
this.$emit('change', {
|
||||
show: true
|
||||
})
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false
|
||||
this.$nextTick(() => {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
this.$emit('change', {
|
||||
show: false
|
||||
})
|
||||
this.showPopup = false
|
||||
}, 0)
|
||||
})
|
||||
},
|
||||
onTap() {
|
||||
if (!this.maskClick) return
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
/* #ifdef H5 */
|
||||
top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-popup__mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mask-ani {
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.uni-top-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-bottom-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-center-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-popup__wrapper {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-500px);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(500px);
|
||||
}
|
||||
|
||||
.center {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* #endif */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: scale(1.2);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.uni-popup__wrapper-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-ani {
|
||||
/* transition: transform 0.3s;
|
||||
*/
|
||||
transition-property: transform, opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
|
||||
.uni-top-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.uni-bottom-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.uni-center-content {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
<template>
|
||||
<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
|
||||
<uni-transition :mode-class="['fade']" :styles="maskClass" :show="showTrans" @click="onTap" />
|
||||
<uni-transition :mode-class="ani" :styles="transClass" :show="showTrans" @click="onTap">
|
||||
<view class="uni-popup__wrapper-box" @click.stop="clear">
|
||||
<slot />
|
||||
</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||
type: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// maskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
maskClass: {
|
||||
'position': 'fixed',
|
||||
'bottom': 0,
|
||||
'top': 0,
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'backgroundColor': 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
transClass: {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type: {
|
||||
handler: function(newVal) {
|
||||
switch (this.type) {
|
||||
case 'top':
|
||||
this.ani = ['slide-top']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
}
|
||||
break
|
||||
case 'bottom':
|
||||
this.ani = ['slide-bottom']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'bottom': 0
|
||||
}
|
||||
console.log('底部条用')
|
||||
console.log(this.type)
|
||||
break
|
||||
case 'center':
|
||||
this.ani = ['zoom-out', 'fade']
|
||||
this.transClass = {
|
||||
'position': 'fixed',
|
||||
/* #ifndef APP-NVUE */
|
||||
'display': 'flex',
|
||||
'flexDirection': 'column',
|
||||
/* #endif */
|
||||
'bottom': 0,
|
||||
'left': 0,
|
||||
'right': 0,
|
||||
'top': 0,
|
||||
'justifyContent': 'center',
|
||||
'alignItems': 'center'
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
clear(e) {
|
||||
// TODO nvue 取消冒泡
|
||||
e.stopPropagation()
|
||||
},
|
||||
open() {
|
||||
this.showPopup = true
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.showTrans = true
|
||||
}, 50);
|
||||
})
|
||||
this.$emit('change', {
|
||||
show: true
|
||||
})
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false
|
||||
this.$nextTick(() => {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
this.$emit('change', {
|
||||
show: false
|
||||
})
|
||||
this.showPopup = false
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
onTap() {
|
||||
if (!this.maskClick) return
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
/* #ifdef H5 */
|
||||
top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-popup__mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mask-ani {
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.uni-top-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-bottom-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-center-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.uni-popup__wrapper {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-500px);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(500px);
|
||||
}
|
||||
|
||||
.center {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* #endif */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: scale(1.2);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.uni-popup__wrapper-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-ani {
|
||||
/* transition: transform 0.3s;
|
||||
*/
|
||||
transition-property: transform, opacity;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
|
||||
.uni-top-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.uni-bottom-content {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.uni-center-content {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
// import CryptoJS from './crypto-js.js'
|
||||
/**
|
||||
* @word 要加密的内容
|
||||
* @keyWord String 服务器随机返回的关键字
|
||||
* */
|
||||
export function aesEncrypt(word,keyWord="XwKsGlMcdPMEhR1B"){
|
||||
// var key = CryptoJS.enc.Utf8.parse(keyWord);
|
||||
// var srcs = CryptoJS.enc.Utf8.parse(word);
|
||||
// var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
|
||||
// return encrypted.toString();
|
||||
return word
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,544 @@
|
|||
<template>
|
||||
<view style="position: relative">
|
||||
<view class="verify-image-out" v-show="showImage">
|
||||
<view class="verify-image-panel" :style="{'width': imgSize.width,
|
||||
'height': imgSize.height,
|
||||
'margin-bottom': vSpace + 'px'}">
|
||||
<view class="verify-refresh" style="z-index:3" @click="refresh" v-show="showRefresh">
|
||||
<text class="iconfont icon-refresh"></text>
|
||||
</view>
|
||||
<image :src="pointBackImgBase?('data:image/png;base64,'+pointBackImgBase):defaultImg" id="image"
|
||||
ref="canvas" style="width:100%;height:100%;display:block"
|
||||
@click=" bindingClick? canvasClick($event): undefined"></image>
|
||||
<view v-for="(tempPoint, index) in tempPoints" :key="index" class="point-area" :style="{
|
||||
'background-color':'#1abd6c',
|
||||
color:'#fff',
|
||||
'z-index':9999,
|
||||
width:'20px',
|
||||
height:'20px',
|
||||
'text-align':'center',
|
||||
'line-height':'20px',
|
||||
'border-radius': '50%',
|
||||
position:'absolute',
|
||||
top:parseInt(tempPoint.y-10) + 'px',
|
||||
left:parseInt(tempPoint.x-10) + 'px'
|
||||
}">
|
||||
{{index + 1}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 'height': this.barSize.height, -->
|
||||
<view class="verify-bar-area" :style="{'width': imgSize.width,
|
||||
'color': barAreaColor,
|
||||
'border-color': barAreaBorderColor,
|
||||
'line-height':'40px'}">
|
||||
<text class="verify-msg">{{text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script type="text/babel">
|
||||
/**
|
||||
* VerifyPoints
|
||||
* @description 点选
|
||||
* */
|
||||
import {aesEncrypt} from "./../utils/ase.js"
|
||||
import {getAjcaptcha,ajcaptchaCheck} from '@/api/api.js';
|
||||
|
||||
export default {
|
||||
name: 'VerifyPoints',
|
||||
props: {
|
||||
//弹出式pop，固定fixed
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'fixed'
|
||||
},
|
||||
captchaType:{
|
||||
type:String,
|
||||
},
|
||||
//间隔
|
||||
vSpace: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
imgSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '155px'
|
||||
}
|
||||
}
|
||||
},
|
||||
barSize: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '40px'
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultImg: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
secretKey:'', //后端返回的加密秘钥 字段
|
||||
checkNum:3, //
|
||||
fontPos: [], // 选中的坐标信息
|
||||
checkPosArr: [], //用户点击的坐标
|
||||
num: 1, //点击的记数
|
||||
pointBackImgBase:'', //后端获取到的背景图片
|
||||
poinTextList:[], //后端返回的点击字体顺序
|
||||
backToken:'', //后端返回的token值
|
||||
imgRand: 0, //随机的背景图片
|
||||
setSize: {
|
||||
imgHeight: 0,
|
||||
imgWidth: 0,
|
||||
barHeight: 0,
|
||||
barWidth: 0
|
||||
},
|
||||
showImage: true,
|
||||
tempPoints: [],
|
||||
text: '',
|
||||
barAreaColor: '#fff',
|
||||
barAreaBorderColor: "#fff",
|
||||
showRefresh: true,
|
||||
bindingClick: true,
|
||||
imgLeft:'' ,
|
||||
imgTop:'',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
//加载页面
|
||||
this.fontPos.splice(0, this.fontPos.length)
|
||||
this.checkPosArr.splice(0, this.checkPosArr.length)
|
||||
this.num = 1
|
||||
this.$nextTick(() => {
|
||||
this.refresh();
|
||||
this.$parent.$emit('ready', this)
|
||||
})
|
||||
},
|
||||
canvasClick(e) {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('#image').boundingClientRect(data => {
|
||||
this.imgLeft =Math.ceil(data.left)
|
||||
this.imgTop =Math.ceil(data.top)
|
||||
this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e));
|
||||
if (this.num == this.checkNum) {
|
||||
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
|
||||
//按比例转换坐标值
|
||||
this.checkPosArr = this.pointTransfrom(this.checkPosArr,this.imgSize);
|
||||
//等创建坐标执行完
|
||||
setTimeout(() => {
|
||||
//发送后端请求
|
||||
var captchaVerification =this.secretKey? aesEncrypt(this.backToken+'---'+JSON.stringify(this.checkPosArr),this.secretKey):this.backToken+'---'+JSON.stringify(this.checkPosArr)
|
||||
let data = {
|
||||
captchaType:this.captchaType,
|
||||
"pointJson":this.secretKey? aesEncrypt(JSON.stringify(this.checkPosArr),this.secretKey):JSON.stringify(this.checkPosArr),
|
||||
"token":this.backToken
|
||||
}
|
||||
ajcaptchaCheck(data).then(result => {
|
||||
let res = result.data
|
||||
this.barAreaColor = '#4cae4c'
|
||||
this.barAreaBorderColor = '#5cb85c'
|
||||
this.text = '验证成功'
|
||||
this.bindingClick = false
|
||||
setTimeout(()=>{
|
||||
if (this.mode=='pop') {
|
||||
this.$parent.clickShow = false;
|
||||
}
|
||||
this.refresh();
|
||||
},1500)
|
||||
this.$parent.$emit('success', {captchaVerification})
|
||||
}).catch(res=>{
|
||||
this.$parent.$emit('error', this)
|
||||
this.barAreaColor = '#d9534f'
|
||||
this.barAreaBorderColor = '#d9534f'
|
||||
this.text = '验证失败'
|
||||
setTimeout(() => {
|
||||
this.refresh();
|
||||
}, 700);
|
||||
})
|
||||
}, 400);
|
||||
}
|
||||
if (this.num < this.checkNum) {
|
||||
this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
|
||||
}
|
||||
}).exec();
|
||||
},
|
||||
//获取坐标
|
||||
getMousePos: function (obj, e) {
|
||||
let position = {
|
||||
x:Math.ceil(e.detail.x)-this.imgLeft,
|
||||
y:Math.ceil(e.detail.y)-this.imgTop,
|
||||
}
|
||||
return position
|
||||
},
|
||||
//创建坐标点
|
||||
createPoint: function (pos) {
|
||||
this.tempPoints.push(Object.assign({}, pos))
|
||||
return ++this.num;
|
||||
},
|
||||
refresh: function () {
|
||||
this.tempPoints.splice(0, this.tempPoints.length)
|
||||
this.barAreaColor = '#000'
|
||||
this.barAreaBorderColor = '#ddd'
|
||||
this.bindingClick = true
|
||||
|
||||
this.fontPos.splice(0, this.fontPos.length)
|
||||
this.checkPosArr.splice(0, this.checkPosArr.length)
|
||||
this.num = 1
|
||||
|
||||
this.getPictrue();
|
||||
|
||||
// this.text = '验证失败'
|
||||
this.showRefresh = true
|
||||
},
|
||||
// 请求背景图片和验证图片
|
||||
getPictrue(){
|
||||
let data = {
|
||||
captchaType:this.captchaType,
|
||||
clientUid: uni.getStorageSync('point'),
|
||||
ts: Date.now(), // 现在的时间戳
|
||||
}
|
||||
getAjcaptcha(data).then((result) => {
|
||||
let res = result.data
|
||||
this.pointBackImgBase = res.originalImageBase64
|
||||
this.backToken = res.token
|
||||
this.secretKey = res.secretKey
|
||||
this.poinTextList = res.wordList
|
||||
this.text = '请依次点击【' + this.poinTextList.join(",") + '】'
|
||||
}).catch(()=>{
|
||||
this.pointBackImgBase = null
|
||||
})
|
||||
},
|
||||
//坐标转换函数
|
||||
pointTransfrom(pointArr,imgSize){
|
||||
var newPointArr = pointArr.map(p=>{
|
||||
let x = Math.round(310 * p.x/parseInt(imgSize.width))
|
||||
let y =Math.round(155 * p.y/parseInt(imgSize.height))
|
||||
return {x,y}
|
||||
})
|
||||
// console.log(newPointArr,"newPointArr");
|
||||
return newPointArr
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// type变化则全面刷新
|
||||
type: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.defaultImg)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.verifybox {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #e4e7eb;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.verifybox-top {
|
||||
padding: 0 15px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
color: #45494c;
|
||||
border-bottom: 1px solid #e4e7eb;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.verifybox-bottom {
|
||||
/* padding: 15px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.verifybox-close {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 9px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
/* display: none; */
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.verify-tips {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: rgb(231, 27, 27, .5);
|
||||
line-height: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tips-enter,
|
||||
.tips-leave-to {
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
.tips-enter-active,
|
||||
.tips-leave-active {
|
||||
transition: bottom .5s;
|
||||
}
|
||||
|
||||
/* ---------------------------- */
|
||||
/*常规验证码*/
|
||||
.verify-code {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.cerify-code-panel {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.verify-code-area {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.verify-input-area {
|
||||
float: left;
|
||||
width: 60%;
|
||||
padding-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
.verify-change-area {
|
||||
line-height: 30px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.varify-input-code {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.verify-change-code {
|
||||
color: #337AB7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #337AB7;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
/*滑动验证码*/
|
||||
.verify-bar-area {
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
text-align: center;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
box-shadow: 0 0 2px #888888;
|
||||
-webkit-border-radius: 1px;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block:hover {
|
||||
background-color: #337ab7;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-left-bar {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
background: #f0fff0;
|
||||
cursor: pointer;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.verify-image-panel {
|
||||
margin: 0;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.verify-image-panel .verify-refresh {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.verify-image-panel .icon-refresh {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.verify-image-panel .verify-gap {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block .verify-sub-block {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
z-index: 3;
|
||||
/* border: 1px solid #fff; */
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block .verify-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-msg {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/*字体图标的css*/
|
||||
/*@font-face {font-family: "iconfont";*/
|
||||
/*src: url('../fonts/iconfont.eot?t=1508229193188'); !* IE9*!*/
|
||||
/*src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), !* IE6-IE8 *!*/
|
||||
/*url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAaAAAsAAAAACUwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kiSY21hcAAAAYAAAAB3AAABuM+qBlRnbHlmAAAB+AAAAnQAAALYnrUwT2hlYWQAAARsAAAALwAAADYPNwajaGhlYQAABJwAAAAcAAAAJAfeA4dobXR4AAAEuAAAABMAAAAYF+kAAGxvY2EAAATMAAAADgAAAA4CvAGsbWF4cAAABNwAAAAfAAAAIAEVAF1uYW1lAAAE/AAAAUUAAAJtPlT+fXBvc3QAAAZEAAAAPAAAAE3oPPXPeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxbwtzwv4EhhrmBoQEozAiSAwAw1A0UeJzFkcENgCAMRX8RjCGO4gTe9eQcnhzAfXC2rqG/hYsT8MmD9gdS0gJIAAaykAjIBYHppCvuD8juR6zMJ67A89Zdn/f1aNPikUn8RvYo8G20CjKim6Rf6b9m34+WWd/vBr+oW8V6q3vF5qKlYrPRp4L0Ad5nGL8AeJxFUc9rE0EYnTezu8lMsrvtbrqb3TRt0rS7bdOmdI0JbWmCtiItIv5oi14qevCk9SQVLFiQgqAF8Q9QLKIHLx48FkHo3ZNnFUXwD5C2B6dO6sFhmI83w7z3fe8RnZCjb2yX5YlLhskkmScXCIFRxYBFiyjH9Rqtoqes9/g5i8WVuJyqDNTYLPwBI+cljXrkGynDhoU+nCgnjbhGY5yst+gMEq8IBIXwsjPU67CnEPm4b0su0h309Fd67da4XBhr55KSm17POk7gOE/Shq6nKdVsC7d9j+tcGPKVboc9u/0jtB/ZIA7PXTVLBef6o/paccjnwOYm3ELJetPuDrvV3gg91wlSXWY6H5qVwRzWf2TybrYYfSdqoXOwh/Qa8RWIjBTiSI3h614/vKSNRhONOrsnQi6Xf4nQFQDTmJE1NKbhI6crHEJO/+S5QPxhYJRRyvBFBP+5T9EPpEAIVzzRQIrjmJ6jY1WTo+NXTMchuBsKuS8PRZATSMl9oTA4uNLkeIA0V1UeqOoGQh7IAxGo+7T83fn3T+voqCNPPAUazUYUI7LgKSV1Jk2oUeghYGhZ+cKOe2FjVu5ZKEY2VkE13AK1+jI4r1KLbPlZfrKiPhOXKPRj7q9sj9XJ7LFHNmrKJS3VCdhXGSdKrtmoQaWeMjQVt0KD6sGPOx0oH2fgtzoNROxtNq8F3tzYM/n+TjKSX5qf2jx941276TIr9FjXxKr8eX/6bK4yuopwo9py1sw8F9kdw4AmurRpLUM3tYx5ZnKpfHPi8dzz19vJ6MjyxYUrpqeb1uLs3eGV6vr21pSqpeWkqonAN9oUyIiXpv8XvlN5e3icY2BkYGAA4n0vN4fG89t8ZeBmYQCBa9wPPRH0/wcsDMwmQC4HAxNIFABAfAqaAHicY2BkYGBu+N/AEMPCAAJAkpEBFbABAEcMAm94nGNhYGBgfsnAwMKAigESnwEBAAAAAAAAdgCkANoBCAFsAAB4nGNgZGBgYGMIZGBlAAEmIOYCQgaG/2A+AwARSAFzAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgI2RiZGZkYWRlZGNkZ2BsYI1OSM1OZs1OSe/OJW1KDM9o4S9KDWtKLU4g4EBAJ79CeQ=') format('woff'),*/
|
||||
/*url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), !* chrome, firefox, opera, Safari, Android, iOS 4.2+*!*/
|
||||
/*url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); !* iOS 4.1- *!*/
|
||||
/*}*/
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-check:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background-image: url("@/static/images/arrow-good.png");
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-close:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background-image: url("@/static/images/arrow-close.png");
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-right:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-size: cover;
|
||||
z-index: 9999;
|
||||
background-image: url("@/static/images/arrow-right.png");
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-refresh:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background-image: url("@/static/images/refresh.png");
|
||||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,648 @@
|
|||
<template>
|
||||
<view style="position: relative;">
|
||||
<view v-if="type === '2'" class="verify-img-out" :style="{height: (parseInt(imgSize.height) + vSpace) + 'px'}">
|
||||
<view class="verify-img-panel" :style="{width: imgSize.width,
|
||||
height: imgSize.height,}">
|
||||
|
||||
<image :src="backImgBase?('data:image/png;base64,'+backImgBase):defaultImg" alt=""
|
||||
style="width:100%;height:100%;display:block"></image>
|
||||
<view class="verify-refresh" @click="refresh" v-show="showRefresh">
|
||||
<text class="iconfont icon-refresh"></text>
|
||||
</view>
|
||||
<transition name="tips">
|
||||
<text class="verify-tips" v-if="tipWords" :class="passFalg ? 'suc-bg':'err-bg'">{{tipWords}}</text>
|
||||
</transition>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 公共部分 -->
|
||||
<view class="verify-bar-area" :style="{width: imgSize.width,
|
||||
height: '40px',
|
||||
'line-height':'40px'}">
|
||||
<text class="verify-msg" v-text="text"></text>
|
||||
<view class="verify-left-bar"
|
||||
:style="{width: leftBarWidth?leftBarWidth:'40px', height: '40px', 'border-color': leftBarBorderColor, transaction: transitionWidth}">
|
||||
<text class="verify-msg" v-text="finishText"></text>
|
||||
<view class="verify-move-block" @touchstart="start" @touchend="end" @touchmove="move"
|
||||
:style="{width:'40px', height: '40px', 'background-color': moveBlockBackgroundColor, left: moveBlockLeft, transition: transitionLeft}">
|
||||
<text :class="['verify-icon iconfont', iconClass]" :style="{color: iconColor}"></text>
|
||||
<view v-if="type === '2'" class="verify-sub-block" :style="{'width':Math.floor(parseInt(imgSize.width)*47/310)+ 'px' ,
|
||||
'height': imgSize.height,
|
||||
'top':'-' + (parseInt(imgSize.height) + vSpace) + 'px',
|
||||
}">
|
||||
<image :src="'data:image/png;base64,'+blockBackImgBase" alt=""
|
||||
style="width:100%;height:100%;display:block"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/**
|
||||
* VerifySlide
|
||||
* @description 滑块
|
||||
* */
|
||||
import {
|
||||
aesEncrypt
|
||||
} from "./../utils/ase.js"
|
||||
import {
|
||||
getAjcaptcha,
|
||||
ajcaptchaCheck
|
||||
} from '@/api/api.js';
|
||||
|
||||
export default {
|
||||
name: 'VerifySlide',
|
||||
props: {
|
||||
captchaType: {
|
||||
type: String,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: '1'
|
||||
},
|
||||
//弹出式pop，固定fixed
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'fixed'
|
||||
},
|
||||
vSpace: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
explain: {
|
||||
type: String,
|
||||
default: '向右滑动完成验证'
|
||||
},
|
||||
imgSize: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
width: '310px',
|
||||
height: '155px'
|
||||
}
|
||||
}
|
||||
},
|
||||
blockSize: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
width: '50px',
|
||||
height: '50px'
|
||||
}
|
||||
}
|
||||
},
|
||||
barSize: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
width: '100%',
|
||||
height: '40px'
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultImg: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
secretKey: '', //后端返回的加密秘钥 字段
|
||||
passFalg: false, //请求通过与否
|
||||
backImgBase: '', //验证码背景图片
|
||||
blockBackImgBase: '', //验证滑块的背景图片
|
||||
backToken: "", //后端返回的唯一token值
|
||||
startMoveTime: "", //移动开始的时间
|
||||
endMovetime: '', //移动结束的时间
|
||||
tipsBackColor: '', //提示词的北京颜色
|
||||
tipWords: '',
|
||||
text: '',
|
||||
finishText: '',
|
||||
setSize: {
|
||||
imgHeight: 0,
|
||||
imgWidth: 0,
|
||||
barHeight: 0,
|
||||
barWidth: 0
|
||||
},
|
||||
top: 0,
|
||||
left: 0,
|
||||
moveBlockLeft: undefined,
|
||||
leftBarWidth: undefined,
|
||||
// 移动中样式
|
||||
moveBlockBackgroundColor: undefined,
|
||||
leftBarBorderColor: '#ddd',
|
||||
iconColor: undefined,
|
||||
iconClass: 'icon-right',
|
||||
status: false, //鼠标状态
|
||||
isEnd: false, //是够验证完成
|
||||
showRefresh: true,
|
||||
transitionLeft: '',
|
||||
transitionWidth: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.text = this.explain
|
||||
this.getPictrue();
|
||||
this.$nextTick(() => {
|
||||
this.$parent.$emit('ready', this)
|
||||
})
|
||||
},
|
||||
|
||||
//鼠标按下
|
||||
start: function(e) {
|
||||
this.startMoveTime = new Date().getTime(); //开始滑动的时间
|
||||
if (this.isEnd == false) {
|
||||
this.text = ''
|
||||
this.moveBlockBackgroundColor = '#337ab7'
|
||||
this.leftBarBorderColor = '#337AB7'
|
||||
this.iconColor = '#fff'
|
||||
e.stopPropagation();
|
||||
this.status = true;
|
||||
}
|
||||
},
|
||||
//鼠标移动
|
||||
move: function(e) {
|
||||
var query = uni.createSelectorQuery().in(this);
|
||||
this.barArea = query.select('.verify-bar-area')
|
||||
var bar_area_left, barArea_offsetWidth;
|
||||
this.barArea.boundingClientRect(data => {
|
||||
bar_area_left = Math.ceil(data.left)
|
||||
barArea_offsetWidth = Math.ceil(data.width)
|
||||
|
||||
if (this.status && this.isEnd == false) {
|
||||
if (!e.touches) { //兼容移动端
|
||||
var x = Math.ceil(e.clientX);
|
||||
} else { //兼容PC端
|
||||
var x = Math.ceil(e.touches[0].pageX);
|
||||
}
|
||||
// var bar_area_left = this.getLeft(this.barArea);
|
||||
|
||||
var move_block_left = x - bar_area_left //小方块相对于父元素的left值
|
||||
if (this.type !== '1') { //图片滑动
|
||||
if (move_block_left >= barArea_offsetWidth - parseInt(parseInt(this.blockSize
|
||||
.width) / 2) - 2) {
|
||||
move_block_left = barArea_offsetWidth - parseInt(parseInt(this.blockSize
|
||||
.width) / 2) - 2;
|
||||
}
|
||||
}
|
||||
|
||||
if (move_block_left <= 0) {
|
||||
move_block_left = parseInt(parseInt(this.blockSize.width) / 2);
|
||||
}
|
||||
|
||||
//拖动后小方块的left值
|
||||
this.moveBlockLeft = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) +
|
||||
"px"
|
||||
this.leftBarWidth = (move_block_left - parseInt(parseInt(this.blockSize.width) / 2)) +
|
||||
"px"
|
||||
|
||||
}
|
||||
}).exec();
|
||||
},
|
||||
|
||||
//鼠标松开
|
||||
end: function() {
|
||||
this.endMovetime = new Date().getTime();
|
||||
var _this = this;
|
||||
// 判断是否重合
|
||||
if (this.status && this.isEnd == false) {
|
||||
if (this.type !== '1') { //图片滑动
|
||||
var moveLeftDistance = parseInt((this.moveBlockLeft || '').replace('px', ''));
|
||||
|
||||
moveLeftDistance = moveLeftDistance * 310 / parseInt(this.imgSize.width)
|
||||
|
||||
var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify({
|
||||
x: moveLeftDistance,
|
||||
y: 5.0
|
||||
}), this.secretKey) : this.backToken + '---' + JSON.stringify({
|
||||
x: moveLeftDistance,
|
||||
y: 5.0
|
||||
})
|
||||
let data = {
|
||||
captchaType: this.captchaType,
|
||||
"pointJson": this.secretKey ? aesEncrypt(JSON.stringify({
|
||||
x: moveLeftDistance,
|
||||
y: 5.0
|
||||
}), this.secretKey) : JSON.stringify({
|
||||
x: moveLeftDistance,
|
||||
y: 5.0
|
||||
}),
|
||||
"token": this.backToken
|
||||
}
|
||||
ajcaptchaCheck(data).then((result) => {
|
||||
let res = result.data
|
||||
this.moveBlockBackgroundColor = '#5cb85c'
|
||||
this.leftBarBorderColor = '#5cb85c'
|
||||
this.iconColor = '#fff'
|
||||
this.iconClass = 'icon-check'
|
||||
this.showRefresh = true
|
||||
this.isEnd = true;
|
||||
setTimeout(() => {
|
||||
if (this.mode == 'pop') {
|
||||
this.$parent.clickShow = false;
|
||||
}
|
||||
this.refresh();
|
||||
}, 1500)
|
||||
this.passFalg = true
|
||||
this.tipWords =
|
||||
`${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
|
||||
setTimeout(() => {
|
||||
this.tipWords = ""
|
||||
this.$emit('success', {
|
||||
captchaVerification
|
||||
})
|
||||
}, 1000)
|
||||
}).catch(res => {
|
||||
this.moveBlockBackgroundColor = '#d9534f'
|
||||
this.leftBarBorderColor = '#d9534f'
|
||||
this.iconColor = '#fff'
|
||||
this.iconClass = 'icon-close'
|
||||
this.passFalg = false
|
||||
setTimeout(() => {
|
||||
this.refresh();
|
||||
}, 1000);
|
||||
this.$parent.$emit('error', this)
|
||||
this.tipWords = "验证失败"
|
||||
setTimeout(() => {
|
||||
this.tipWords = ""
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
this.status = false;
|
||||
}
|
||||
},
|
||||
refresh: function() {
|
||||
this.showRefresh = true
|
||||
this.finishText = ''
|
||||
this.transitionLeft = 'left .3s'
|
||||
this.moveBlockLeft = 0
|
||||
this.leftBarWidth = false
|
||||
this.transitionWidth = 'width .3s'
|
||||
this.leftBarBorderColor = '#ddd'
|
||||
this.moveBlockBackgroundColor = '#fff'
|
||||
this.iconColor = '#000'
|
||||
this.iconClass = 'icon-right'
|
||||
this.getPictrue()
|
||||
this.isEnd = false
|
||||
setTimeout(() => {
|
||||
this.transitionWidth = ''
|
||||
this.transitionLeft = ''
|
||||
this.text = this.explain
|
||||
}, 300)
|
||||
},
|
||||
|
||||
//获取left值
|
||||
getLeft: function(node) {
|
||||
let leftValue = 0;
|
||||
while (node) {
|
||||
leftValue += node.offsetLeft;
|
||||
node = node.offsetParent;
|
||||
}
|
||||
let finalvalue = leftValue;
|
||||
return finalvalue;
|
||||
},
|
||||
|
||||
// 请求背景图片和验证图片
|
||||
getPictrue() {
|
||||
let data = {
|
||||
captchaType: this.captchaType,
|
||||
clientUid: uni.getStorageSync('slider'),
|
||||
ts: Date.now(), // 现在的时间戳
|
||||
}
|
||||
getAjcaptcha(data).then((result) => {
|
||||
let res = result.data
|
||||
this.backImgBase = res.originalImageBase64
|
||||
this.blockBackImgBase = res.jigsawImageBase64
|
||||
this.backToken = res.token
|
||||
this.secretKey = res.secretKey
|
||||
}).catch(() => {
|
||||
this.backImgBase = null
|
||||
this.blockBackImgBase = null
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// type变化则全面刷新
|
||||
type: {
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.verifybox {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #e4e7eb;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.verifybox-top {
|
||||
padding: 0 15px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
color: #45494c;
|
||||
border-bottom: 1px solid #e4e7eb;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.verifybox-bottom {
|
||||
/* padding: 15px; */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.verifybox-close {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 9px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
/* display: none; */
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.verify-tips {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: rgb(231, 27, 27, .5);
|
||||
line-height: 30px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.suc-bg {
|
||||
background-color: rgba(92, 184, 92, .5);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
|
||||
}
|
||||
|
||||
.err-bg {
|
||||
background-color: rgba(217, 83, 79, .5);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
|
||||
}
|
||||
|
||||
|
||||
.tips-enter,
|
||||
.tips-leave-to {
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
.tips-enter-active,
|
||||
.tips-leave-active {
|
||||
transition: bottom .5s;
|
||||
}
|
||||
|
||||
/* ---------------------------- */
|
||||
/*常规验证码*/
|
||||
.verify-code {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.cerify-code-panel {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.verify-code-area {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.verify-input-area {
|
||||
float: left;
|
||||
width: 60%;
|
||||
padding-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
.verify-change-area {
|
||||
line-height: 30px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.varify-input-code {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.verify-change-code {
|
||||
color: #337AB7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: #337AB7;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
/*滑动验证码*/
|
||||
.verify-bar-area {
|
||||
position: relative;
|
||||
background: #FFFFFF;
|
||||
text-align: center;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
box-shadow: 0 0 2px #888888;
|
||||
-webkit-border-radius: 1px;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block:hover {
|
||||
background-color: #337ab7;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-left-bar {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
background: #f0fff0;
|
||||
cursor: pointer;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.verify-img-panel {
|
||||
margin: 0;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.verify-img-panel .verify-refresh {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.verify-img-panel .icon-refresh {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.verify-img-panel .verify-gap {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block .verify-sub-block {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
z-index: 3;
|
||||
/* border: 1px solid #fff; */
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-move-block .verify-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.verify-bar-area .verify-msg {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/*字体图标的css*/
|
||||
/*@font-face {font-family: "iconfont";*/
|
||||
/*src: url('../fonts/iconfont.eot?t=1508229193188'); !* IE9*!*/
|
||||
/*src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), !* IE6-IE8 *!*/
|
||||
/*url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAaAAAsAAAAACUwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kiSY21hcAAAAYAAAAB3AAABuM+qBlRnbHlmAAAB+AAAAnQAAALYnrUwT2hlYWQAAARsAAAALwAAADYPNwajaGhlYQAABJwAAAAcAAAAJAfeA4dobXR4AAAEuAAAABMAAAAYF+kAAGxvY2EAAATMAAAADgAAAA4CvAGsbWF4cAAABNwAAAAfAAAAIAEVAF1uYW1lAAAE/AAAAUUAAAJtPlT+fXBvc3QAAAZEAAAAPAAAAE3oPPXPeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxbwtzwv4EhhrmBoQEozAiSAwAw1A0UeJzFkcENgCAMRX8RjCGO4gTe9eQcnhzAfXC2rqG/hYsT8MmD9gdS0gJIAAaykAjIBYHppCvuD8juR6zMJ67A89Zdn/f1aNPikUn8RvYo8G20CjKim6Rf6b9m34+WWd/vBr+oW8V6q3vF5qKlYrPRp4L0Ad5nGL8AeJxFUc9rE0EYnTezu8lMsrvtbrqb3TRt0rS7bdOmdI0JbWmCtiItIv5oi14qevCk9SQVLFiQgqAF8Q9QLKIHLx48FkHo3ZNnFUXwD5C2B6dO6sFhmI83w7z3fe8RnZCjb2yX5YlLhskkmScXCIFRxYBFiyjH9Rqtoqes9/g5i8WVuJyqDNTYLPwBI+cljXrkGynDhoU+nCgnjbhGY5yst+gMEq8IBIXwsjPU67CnEPm4b0su0h309Fd67da4XBhr55KSm17POk7gOE/Shq6nKdVsC7d9j+tcGPKVboc9u/0jtB/ZIA7PXTVLBef6o/paccjnwOYm3ELJetPuDrvV3gg91wlSXWY6H5qVwRzWf2TybrYYfSdqoXOwh/Qa8RWIjBTiSI3h614/vKSNRhONOrsnQi6Xf4nQFQDTmJE1NKbhI6crHEJO/+S5QPxhYJRRyvBFBP+5T9EPpEAIVzzRQIrjmJ6jY1WTo+NXTMchuBsKuS8PRZATSMl9oTA4uNLkeIA0V1UeqOoGQh7IAxGo+7T83fn3T+voqCNPPAUazUYUI7LgKSV1Jk2oUeghYGhZ+cKOe2FjVu5ZKEY2VkE13AK1+jI4r1KLbPlZfrKiPhOXKPRj7q9sj9XJ7LFHNmrKJS3VCdhXGSdKrtmoQaWeMjQVt0KD6sGPOx0oH2fgtzoNROxtNq8F3tzYM/n+TjKSX5qf2jx941276TIr9FjXxKr8eX/6bK4yuopwo9py1sw8F9kdw4AmurRpLUM3tYx5ZnKpfHPi8dzz19vJ6MjyxYUrpqeb1uLs3eGV6vr21pSqpeWkqonAN9oUyIiXpv8XvlN5e3icY2BkYGAA4n0vN4fG89t8ZeBmYQCBa9wPPRH0/wcsDMwmQC4HAxNIFABAfAqaAHicY2BkYGBu+N/AEMPCAAJAkpEBFbABAEcMAm94nGNhYGBgfsnAwMKAigESnwEBAAAAAAAAdgCkANoBCAFsAAB4nGNgZGBgYGMIZGBlAAEmIOYCQgaG/2A+AwARSAFzAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgI2RiZGZkYWRlZGNkZ2BsYI1OSM1OZs1OSe/OJW1KDM9o4S9KDWtKLU4g4EBAJ79CeQ=') format('woff'),*/
|
||||
/*url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), !* chrome, firefox, opera, Safari, Android, iOS 4.2+*!*/
|
||||
/*url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); !* iOS 4.1- *!*/
|
||||
/*}*/
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-check:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background-image: url("@/static/images/arrow-good.png");
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-close:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background-image: url("@/static/images/arrow-close.png");
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-right:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-size: cover;
|
||||
z-index: 9999;
|
||||
background-image: url("@/static/images/arrow-right.png");
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.icon-refresh:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background-image: url("@/static/images/refresh.png");
|
||||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
// #ifdef H5
|
||||
let VUE_APP_WS_URL = `ws://${location.hostname}?type=user`
|
||||
// #endif
|
||||
|
||||
let openPlantGrass = '-openPlantGrass-'
|
||||
let httpApi
|
||||
|
||||
// 在打包之前请检查当前环境是否正确
|
||||
const env = 'dev'; // 开发
|
||||
// const env = 'prod'; // 生产
|
||||
// const env = 'prew'; // 预上线
|
||||
|
||||
switch (env) {
|
||||
case 'prod':
|
||||
httpApi = 'https://shop.lihaink.cn' // 生产
|
||||
httpApione = 'http://ceshi-zhibo.lihaink.cn'
|
||||
|
||||
break;
|
||||
case 'prew':
|
||||
httpApi = 'https://test.shop.lihaink.cn' //预发布环境
|
||||
httpApione = 'http://ceshi-zhibo.lihaink.cn'
|
||||
break;
|
||||
default:
|
||||
httpApi = "https://crmeb-test.shop.lihaink.cn" // 测试
|
||||
httpApione = 'https://ceshi-zhibo.lihaink.cn'
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 聊天接口修改此字符 小程序聊天要求wss 例如：wss://mer.crmeb.net
|
||||
// let wsApi = 'ws://192.168.3.20:8324'
|
||||
let wsApi = 'wss://ceshi-zhibo.lihaink.cn/chat_room'
|
||||
// console.log(httpApione,'11111111111')
|
||||
|
||||
|
||||
module.exports = {
|
||||
// 请求域名 格式： https://您的域名
|
||||
// #ifdef MP || APP-PLUS
|
||||
// HTTP_REQUEST_URL: httpApi,
|
||||
HTTP_REQUEST_URL: httpApi,
|
||||
HTTP_REQUEST_URL_ONE: httpApione,
|
||||
|
||||
VUE_APP_WS_URL: wsApi,
|
||||
// #endif
|
||||
|
||||
|
||||
// #ifdef H5
|
||||
HTTP_REQUEST_URL: httpApi,
|
||||
HTTP_REQUEST_URL_ONE: httpApione,
|
||||
//H5接口是浏览器地址
|
||||
// 聊天长连接地址
|
||||
VUE_APP_WS_URL: VUE_APP_WS_URL,
|
||||
// #endif
|
||||
openPlantGrass: openPlantGrass,
|
||||
HEADER: {
|
||||
'content-type': 'application/json',
|
||||
|
||||
//#ifdef H5
|
||||
// 'Form-type': navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1 ? 'wechat' : 'h5',
|
||||
//#endif
|
||||
//#ifdef MP
|
||||
'Form-type': 'routine',
|
||||
//#endif
|
||||
//#ifdef APP-PLUS
|
||||
'Form-type': 'app',
|
||||
//#endif
|
||||
},
|
||||
// 回话密钥名称 请勿修改此配置
|
||||
TOKENNAME: 'X-Token',
|
||||
// 缓存时间 0 永久
|
||||
EXPIRE: 0,
|
||||
};
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
module.exports = {
|
||||
//token
|
||||
LOGIN_STATUS: 'LOGIN_STATUS_TOKEN',
|
||||
// uid
|
||||
UID:'UID',
|
||||
//<2F>û<EFBFBD>
|
||||
USER_INFO: 'USER_INFO',
|
||||
//token<65><6E><EFBFBD><EFBFBD><EFBFBD>¼<EFBFBD>
|
||||
EXPIRES_TIME: 'EXPIRES_TIME',
|
||||
//<2F>Ƿ<EFBFBD><C7B7><EFBFBD>Ȩ
|
||||
WX_AUTH: 'WX_AUTH',
|
||||
//<2F><><EFBFBD>ں<EFBFBD><DABA><EFBFBD>Ȩcode
|
||||
STATE_KEY: 'wx_authorize_state',
|
||||
//<2F>û<EFBFBD><C3BB><EFBFBD><EFBFBD><EFBFBD>
|
||||
LOGINTYPE: 'loginType',
|
||||
//<2F><><EFBFBD>ں<EFBFBD><DABA><EFBFBD>ת<EFBFBD><D7AA><EFBFBD><EFBFBD>
|
||||
BACK_URL: 'login_back_url',
|
||||
// С<><D0A1><EFBFBD><EFBFBD>code
|
||||
STATE_R_KEY: 'roution_authorize_state',
|
||||
//<2F><>ȨlogoС<6F><D0A1><EFBFBD><EFBFBD>
|
||||
LOGO_URL: 'LOGO_URL',
|
||||
//模板缓存
|
||||
SUBSCRIBE_MESSAGE: 'SUBSCRIBE_MESSAGE',
|
||||
|
||||
TIPS_KEY: 'TIPS_KEY',
|
||||
|
||||
SPREAD: 'spread',
|
||||
//缓存经度
|
||||
CACHE_LONGITUDE: 'LONGITUDE',
|
||||
//缓存纬度
|
||||
CACHE_LATITUDE: 'LATITUDE',
|
||||
//缓存地址信息
|
||||
ADRESS_LOCATION:'ADRESS_LOCATION'
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
disabled: false,
|
||||
text: "获取验证码"
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
sendCode() {
|
||||
if (this.disabled) return;
|
||||
this.disabled = true;
|
||||
let n = 60;
|
||||
this.text = "剩余 " + n + "s";
|
||||
const run = setInterval(() => {
|
||||
n = n - 1;
|
||||
if (n < 0) {
|
||||
clearInterval(run);
|
||||
}
|
||||
this.text = "剩余 " + n + "s";
|
||||
if (this.text < "剩余 " + 0 + "s") {
|
||||
this.disabled = false;
|
||||
this.text = "重新获取";
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import { history } from '@/api/public.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getHistory() {
|
||||
// console.log(this.$util.getNowUrl(),'page')
|
||||
history({
|
||||
page:this.$util.getNowUrl()
|
||||
}).then(res=>{})
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<view>
|
||||
<live-pusher id='livePusher' ref="livePusher" class="livePusher" :url="url" mode="SD" :muted="true"
|
||||
:enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2" aspect="9:16" @statechange="statechange"
|
||||
@netstatus="netstatus" @error="error"
|
||||
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;z-inde:-1;'">
|
||||
</live-pusher>
|
||||
<sd-float-page :room='room' @switchCamera='switchCamera' :msgList='msgList'
|
||||
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;position: absolute;z-index:999999;' "></sd-float-page>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import sdFloatPage from '@/components/sd-live-page/livepage.nvue';
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
sdFloatPage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: '',
|
||||
windowHeight: 0,
|
||||
windowWidth: 0,
|
||||
room: {},
|
||||
pusherContext: null,
|
||||
userName:this.userName,
|
||||
inputModel:'',
|
||||
msgList:[]
|
||||
};
|
||||
},
|
||||
onReady() {
|
||||
// this.context = uni.createLivePusherContext('livePusher', this);
|
||||
// this.context.switchCamera() // 摄像头切换（切换为后置）
|
||||
// this.context.startPreview() // 摄像头预览 （不加会黑屏）
|
||||
this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
|
||||
this.windowHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
|
||||
// 监听窗口大小的变化
|
||||
uni.onWindowResize((res) => {
|
||||
this.windowHeight = res.size.windowHeight;
|
||||
})
|
||||
|
||||
},
|
||||
onLoad(options) {
|
||||
|
||||
this.room = JSON.parse(decodeURIComponent(options.data));
|
||||
this.url = this.room.push_url
|
||||
},
|
||||
mounted() {
|
||||
this.pusherContext = uni.createLivePusherContext('livePusher', this);
|
||||
// console.log('创建 pusherContext：', this.pusherContext);
|
||||
|
||||
//开始推流
|
||||
this.pusherContext.start(function(e) {
|
||||
console.log('推流情况')
|
||||
// console.log(e)
|
||||
});
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
statechange(e) {
|
||||
// console.log("statechange:" + JSON.stringify(e));
|
||||
},
|
||||
//切换摄像头
|
||||
switchCamera: function() {
|
||||
this.pusherContext.switchCamera({
|
||||
success: (a) => {
|
||||
console.log("livePusher.switchCamera:" + JSON.stringify(a));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
netstatus(e) {
|
||||
// console.log("netstatus:" + JSON.stringify(e));
|
||||
},
|
||||
error(e) {
|
||||
// console.log("error:" + JSON.stringify(e));
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'">
|
||||
<!--
|
||||
1.这里的 swiper 不是用来控制视频滑动的，而是用来控制左右滑动的，如果不需要的可以改成 view
|
||||
2.为了 视频无限加载，已经把 21 行的 appear 去掉了，加上了 loadmore 方法（第10行）
|
||||
3.由于方法比较多，可以采取下面的方式查看代码：
|
||||
（1）Mac：按住 option 键，然后点击方法名，即可跳转到方法
|
||||
（2）windows：按住 Alt 键，然后鼠标左击，即可跳转到方法
|
||||
-->
|
||||
<view class="root">
|
||||
<video ref="videoPlayer" :src="currentSrc" controls @ended="playNext" :object-fit="object_fit" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'"></video>
|
||||
</view>
|
||||
<sd-float-page :room='room' :msgList='msgList'
|
||||
:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;position: absolute;' "></sd-float-page>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import sdFloatPage from '@/components/sd-live-page/histroy.nvue';
|
||||
|
||||
import {
|
||||
playbackDetail
|
||||
} from '@/api/api.js'
|
||||
export default {
|
||||
components: {
|
||||
sdFloatPage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rtmpSources: [],
|
||||
currentIndex: 0,
|
||||
room: {},
|
||||
wHeight: 0, //获取的屏幕高度🌟💗
|
||||
boxStyle: { //视频，图片封面样式🌟💗
|
||||
'height': 0,
|
||||
'width': 0,
|
||||
},
|
||||
object_fit: 'cover', //视频样式默认包含🌟💗
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
currentSrc() {
|
||||
return this.rtmpSources[this.currentIndex];
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.room = JSON.parse(decodeURIComponent(options.data));
|
||||
this.platform = uni.getSystemInfoSync().platform
|
||||
this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
|
||||
this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
|
||||
this.wHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
|
||||
this.boxStyle.height = this.wHeight; //改变视频高度
|
||||
this.get()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// 初始化时播放第一个源
|
||||
this.playCurrent();
|
||||
},
|
||||
|
||||
methods: {
|
||||
playCurrent() {
|
||||
this.$refs.videoPlayer.load();
|
||||
this.$refs.videoPlayer.play();
|
||||
},
|
||||
playNext() {
|
||||
this.currentIndex++;
|
||||
if (this.currentIndex >= this.rtmpSources.length) {
|
||||
this.currentIndex = 0; // 回到第一个源
|
||||
}
|
||||
this.playCurrent();
|
||||
},
|
||||
|
||||
|
||||
get() {
|
||||
let that = this
|
||||
console.log(this.room)
|
||||
playbackDetail({
|
||||
app_name: 'shop',
|
||||
live_stream_id: this.room.live_stream_id
|
||||
}).then((res) => {
|
||||
// console.log(res.data, '1111')
|
||||
|
||||
this.rtmpSources = res.data.playback_url;
|
||||
|
||||
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,358 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'">
|
||||
<!--
|
||||
1.这里的 swiper 不是用来控制视频滑动的，而是用来控制左右滑动的，如果不需要的可以改成 view
|
||||
2.为了 视频无限加载，已经把 21 行的 appear 去掉了，加上了 loadmore 方法（第10行）
|
||||
3.由于方法比较多，可以采取下面的方式查看代码：
|
||||
（1）Mac：按住 option 键，然后点击方法名，即可跳转到方法
|
||||
（2）windows：按住 Alt 键，然后鼠标左击，即可跳转到方法
|
||||
-->
|
||||
<list @loadmore="getData" @scroll="scrolls" :loadmoreoffset="wHeight*1" :show-scrollbar="false"
|
||||
ref="listBox" :pagingEnabled="true" :scrollable="true">
|
||||
<!-- 循环数据 -->
|
||||
<cell v-for="(item,i) in dataList" :key="i">
|
||||
<!-- 用div把视频模组套起来 -->
|
||||
<div :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">
|
||||
<!-- <view v-if="Math.abs(k-i)<=1"> -->
|
||||
<view v-if="Math.abs(k-i)<=1">
|
||||
<view class="root">
|
||||
<video :ref="'item'+i" :id="item.id" :loop="true" :autoplay="i == k"
|
||||
:src="item.pull_url" :muted="item.isplay" :enable-progress-gesture="false"
|
||||
:page-gesture="false" :controls="false" :show-loading="true" :is-live='true'
|
||||
@error='vedioerr' :show-fullscreen-btn="false" :show-center-play-btn="false"
|
||||
:style="boxStyle" :object-fit="object_fit" @timeupdate="timeupdate($event,i)">
|
||||
|
||||
</video>
|
||||
<!-- {{item}} {{i}} -->
|
||||
|
||||
</view>
|
||||
<sd-float-page :room='room' :msgList='msgList'
|
||||
:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;position: absolute;' "></sd-float-page>
|
||||
</view>
|
||||
|
||||
</div>
|
||||
</cell>
|
||||
</list>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import list from '@/uni_modules/uview-ui/libs/config/props/list';
|
||||
import sdFloatPage from '@/components/sd-live-page/livepage.nvue';
|
||||
import {
|
||||
VUE_APP_WS_URL
|
||||
} from '@/config/app';
|
||||
|
||||
import json from '../../static/js/json';
|
||||
export default {
|
||||
components: {
|
||||
sdFloatPage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
imgHost: '',
|
||||
//下面打🌟号的是必须要的基础字段
|
||||
//下面打💗号的是拥有滑动条的必须字段
|
||||
dataList: [], //用于数据循环的列表🌟💗
|
||||
wHeight: 0, //获取的屏幕高度🌟💗
|
||||
boxStyle: { //视频，图片封面样式🌟💗
|
||||
'height': 0,
|
||||
'width': 0,
|
||||
},
|
||||
k: 0, //默认为0🌟💗
|
||||
max: 2,
|
||||
playIngIds: [], //正在播放的视频id列队，列队用于处理滑动过快导致的跳频问题🌟💗
|
||||
ready: false, //可忽略
|
||||
isDragging: false, //false代表停止滑动🌟💗
|
||||
refreshing: true, //用于下拉刷新🌟💗
|
||||
windowWidth: 0, //获取屏幕宽度🌟💗
|
||||
windowHeight: 0,
|
||||
dex: [0, 0], //用于判断是上滑还是下滑，第一个存旧值，第二个存新值【目前在1.0.7已经废弃】
|
||||
currents: 0, //用于左右滑动，0代表视频界面，1代表右滑界面🌟💗
|
||||
platform: '', //用于获取操作系统：ios、android🌟💗
|
||||
playIng: false, //用于视频初始化时是否播放，默认不播放🌟💗
|
||||
videoTime: '', //视频总时长，这个主要用来截取时间数值💗
|
||||
videoTimes: '', //视频时长，用这个来获取时间值，例如：00:30这个时间值💗
|
||||
changeTime: '', //显示滑动进度条时变化的时间💗
|
||||
isShowimage: false, //是否显示封面【1.0.4已废弃，但是意思需要记住】
|
||||
currenttimes: 0, //当前时间💗
|
||||
isShowProgressBarTime: false, //是否拖动进度条，如果拖动（true）则显示进度条时间，否则不显示（false）【1.0.4已废弃，但是意思需要记住】
|
||||
ProgressBarOpacity: 0.7, //进度条不拖动时的默认值，就是透明的💗
|
||||
dotWidth: 0, //播放的小圆点，默认没有💗
|
||||
deleteHeight: 0, //测试高度🌟💗
|
||||
percent: 0, //百分小数💗
|
||||
currentPosition: 0, //滑块当前位置💗//2.0已弃用，现已用于后端参数
|
||||
currentPositions: 0, //滑块当前位置的副本💗//2.0已弃用，现已用于后端参数
|
||||
newTime: 0, //跟手滑动后的最新时间💗
|
||||
timeNumber: 0, //🌟💗
|
||||
ProgressBarBottom: 20, //进度条离底部的距离💗
|
||||
object_fit: 'cover', //视频样式默认包含🌟💗
|
||||
mode: 'aspectFit', //图片封面样式🌟💗
|
||||
timeout: "", //🌟用来阻止 setTimeout()方法
|
||||
voice: "", //🌟用来阻止 setTimeout()方法
|
||||
oldVideo: "",
|
||||
isAutoplay: false, //是否开启自动播放(默认不开启)
|
||||
autoplayText: "开启自动播放",
|
||||
msgList: [],
|
||||
room: {},
|
||||
socketTask: null,
|
||||
userName: '',
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
async k(new_k, old_k) { //监听 k 值的变化，可以控制视频的播放与暂停
|
||||
const max = new_k + 2;
|
||||
if (this.max < max) {
|
||||
this.max = max;
|
||||
}
|
||||
// if (this.oldCurrent != this.currentNav) {
|
||||
// this.oldCurrent = this.currentNav
|
||||
// return false
|
||||
// }
|
||||
this.dataList[old_k].playIng = false //如果视频暂停，就加载封面
|
||||
this.dataList[old_k].isplay = true
|
||||
this.dataList[old_k].state = 'pause'
|
||||
// console.log('预留第' + (old_k) + '个视频：' + this.dataList[old_k].community_id)
|
||||
// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
|
||||
uni.createVideoContext(this.dataList[old_k].community_id, this)
|
||||
.pause() //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
|
||||
// console.log('已经暂停 --> 第' + (old_k) + '个视频～') //提示
|
||||
this.dataList[new_k].state = 'play'
|
||||
this.dataList[new_k].isplay = false
|
||||
this.dataList[new_k].playIng = true
|
||||
uni.createVideoContext(this.dataList[new_k].community_id, this).play()
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
uni.hideLoading();
|
||||
// console.log('回到前台' + this.dataList.length);
|
||||
if (this.dataList.length !== 0) {
|
||||
this.dataList[this.k].state = 'play';
|
||||
setTimeout(() => {
|
||||
uni.createVideoContext(this.dataList[this.k].id, this).play()
|
||||
}, 250)
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
this.dataList[this.k].state = 'pause'; //界面隐藏也要停止播放视频
|
||||
setTimeout(() => {
|
||||
uni.createVideoContext(this.dataList[this.k].community_id, this).pause(); //暂停以后继续播放
|
||||
}, 250)
|
||||
// console.log('到后台');
|
||||
},
|
||||
onLoad(options) {
|
||||
this.platform = uni.getSystemInfoSync().platform
|
||||
this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
|
||||
this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
|
||||
this.wHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
|
||||
this.boxStyle.height = this.wHeight; //改变视频高度
|
||||
console.log(this.boxStyle.height)
|
||||
this.room = JSON.parse(decodeURIComponent(options.data));
|
||||
|
||||
this.get()
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
Ready() {},
|
||||
methods: {
|
||||
|
||||
|
||||
|
||||
autoPlay() {
|
||||
this.isAutoplay = !this.isAutoplay;
|
||||
if (!this.isAutoplay) {
|
||||
this.autoplayText = "开启自动播放"
|
||||
uni.showToast({
|
||||
title: "关闭自动播放",
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
} else {
|
||||
this.autoplayText = "关闭自动播放"
|
||||
uni.showToast({
|
||||
title: "开启自动播放",
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
// 这里就是数据加载完以后再向后端发送数据的地方,
|
||||
|
||||
|
||||
},
|
||||
vedioerr(e) {
|
||||
let timer = null
|
||||
if (e.tye = 'error') {
|
||||
timer = setInterval((res) => {
|
||||
uni.createVideoContext('myVideo', this).play()
|
||||
console.log('重新连接', '1111111111')
|
||||
}, 600000)
|
||||
} else {
|
||||
timer = null
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
touchstart(event) {
|
||||
this.dataList[this.k].isShowimage = true //刚触摸的时候就要显示预览视频图片了
|
||||
this.dataList[this.k].isShowProgressBarTime = true //显示时间线
|
||||
this.ProgressBarOpacity = 1 //让滑块显示起来更明显一点
|
||||
this.dotWidth = 10 //让点显示起来更明显一点
|
||||
},
|
||||
touchend() { //当手松开后，跳到最新时间
|
||||
uni.createVideoContext(this.dataList[this.k].community_id, this).seek(this.newTime)
|
||||
if (this.dataList[this.k].state == 'pause') {
|
||||
this.dataList[this.k].state = 'play'
|
||||
uni.createVideoContext(this.dataList[this.k].community_id, this).play()
|
||||
}
|
||||
this.dataList[this.k].isShowProgressBarTime = false //触摸结束后，隐藏时间线
|
||||
this.dataList[this.k].isShowimage = false //触摸结束后，隐藏时间预览
|
||||
this.ProgressBarOpacity = 0.5 //隐藏起来进度条，不那么明显了
|
||||
this.dotWidth = 0 //隐藏起来进度条，不那么明显了
|
||||
},
|
||||
touchmove(event) { //当手移动滑块时，计算位置、百分小数、新的时间
|
||||
var msg = []
|
||||
if (this.videoTime !== '') {
|
||||
msg = this.videoTime.split(':')
|
||||
}
|
||||
var timeNumber = Number(msg[0]) * 60 + Number(msg[1])
|
||||
this.currentPositions = event.changedTouches[0].screenX
|
||||
this.percent = this.currentPositions / this.windowWidth
|
||||
this.newTime = this.percent * timeNumber
|
||||
this.currenttimes = parseInt(this.newTime)
|
||||
let theTime = this.newTime
|
||||
let middle = 0; // 分
|
||||
if (theTime > 60) {
|
||||
middle = parseInt(theTime / 60);
|
||||
theTime = parseInt(theTime % 60);
|
||||
}
|
||||
this.changeTime =
|
||||
`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
|
||||
},
|
||||
timeupdate(event, index) { //计算滑块当前位置，计算当前百分小数
|
||||
if (index == this.k) {
|
||||
var currenttime = event.detail.currentTime
|
||||
this.timeNumber = Math.round(event.detail.duration)
|
||||
this.getTime()
|
||||
this.percent = currenttime / this.timeNumber
|
||||
this.currentPosition = this.windowWidth * this.percent
|
||||
let theTime = currenttime
|
||||
let middle = 0; // 分
|
||||
if (theTime > 60) {
|
||||
middle = parseInt(theTime / 60);
|
||||
theTime = parseInt(theTime % 60);
|
||||
}
|
||||
this.changeTime =
|
||||
`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
|
||||
//自动切换视频
|
||||
if (this.isAutoplay) { //true,代表自动播放
|
||||
if (Math.round(currenttime) == this.timeNumber - 1) {
|
||||
const dom = uni.requireNativePlugin('dom')
|
||||
let doms = 'item' + (this.k + 1)
|
||||
setTimeout(() => {
|
||||
let el = this.$refs[doms][0]
|
||||
dom.scrollToElement(el, {
|
||||
offset: 0,
|
||||
animated: true
|
||||
})
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getTime() { //得到时间函数
|
||||
this.videoTime = this.formatSeconds(this.timeNumber);
|
||||
var msg = []
|
||||
if (this.videoTime !== '') {
|
||||
msg = this.videoTime.split(':')
|
||||
}
|
||||
this.videoTimes = `${msg[0]>9?msg[0]:'0'+msg[0]}:${msg[1]>9?msg[1]:'0'+msg[1]}`;
|
||||
},
|
||||
formatSeconds(value) { //获取时间函数
|
||||
let theTime = parseInt(value); // 秒
|
||||
let middle = 0; // 分
|
||||
if (theTime > 60) {
|
||||
middle = parseInt(theTime / 60);
|
||||
theTime = parseInt(theTime % 60);
|
||||
}
|
||||
return `${middle>9?middle:middle}:${theTime>9?theTime:theTime}`;
|
||||
},
|
||||
moreVideo(index) {
|
||||
|
||||
},
|
||||
toVideo(index) {
|
||||
|
||||
},
|
||||
scrolls(event) {
|
||||
|
||||
this.showManage = false;
|
||||
this.isDragging = event.isDragging;
|
||||
if (!event.isDragging) { //isDragging：判断用户是不是在滑动，滑动：true，停止滑动：false。我们要用户停止滑动时才给 k 赋值，这样就可以避免很多麻烦
|
||||
var i = Math.round(Math.abs(event.contentOffset.y) / (this.wHeight - this.deleteHeight +
|
||||
1)) //先用绝对值取出滑动的距离，然后除以屏幕高度，取一个整，就知道你现在滑动到哪一个视频了
|
||||
if (i !== this.k) { //这里加判断是因为这个方法会执行很多次，会造成重复请求，所以这里写一个限制
|
||||
if (uni.getSystemInfoSync().platform == 'ios') {
|
||||
this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
|
||||
this.dataList[this.k].state = 'play'
|
||||
// console.log('正在播放 --> 第' + (this.k + 1) + '个视频～')
|
||||
} else {
|
||||
clearTimeout(this.timers);
|
||||
this.timers = setTimeout(() => {
|
||||
this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
|
||||
this.dataList[this.k].state = 'play'
|
||||
// console.log('正在播放 --> 第' + (this.k + 1) + '个视频～')
|
||||
}, 80)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
get() {
|
||||
let that = this
|
||||
var msg = [this.room];
|
||||
console.log(this.room)
|
||||
for (let i = 0; i < msg.length; i++) {
|
||||
msg[i]['isMore'] = false
|
||||
msg[i]['playIng'] = false
|
||||
msg[i]['state'] = false
|
||||
msg[i]['isplay'] = false
|
||||
msg[i]['loading'] = false
|
||||
msg[i]['id'] = msg[i]['live_stream_id']
|
||||
}
|
||||
this.dataList = msg;
|
||||
|
||||
if (this.dataList.length !== 0) {
|
||||
|
||||
this.dataList[this.k].state = 'play';
|
||||
uni.createVideoContext(this.dataList[this.k].id, this).play()
|
||||
this.page = that.page + 1
|
||||
}
|
||||
|
||||
console.log(this.dataList, this.dataList[this.k].id, 222222)
|
||||
},
|
||||
onpullingdown() {
|
||||
this.refreshing = true
|
||||
},
|
||||
onrefresh() {
|
||||
setTimeout(() => {
|
||||
this.refreshing = false
|
||||
}, 1000)
|
||||
},
|
||||
|
||||
},
|
||||
onReachBottom() {
|
||||
uni.$emit('onReachBottom');
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,534 @@
|
|||
<template name="create-float-page">
|
||||
<view>
|
||||
<view class="do-box">
|
||||
<view class="do-box-top">
|
||||
<text>请输入直播主题：</text>
|
||||
<view class="cover-input">
|
||||
<input type="text" v-model="livename" placeholder="请输入内容，吸引更多观众"
|
||||
placeholder-class="cover-inputplaceholder" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="do-box-top" @click="chooseImage">
|
||||
<text>请上传直播封面：</text>
|
||||
<view class="cover-box">
|
||||
<image :src="imageSrc" mode="aspectFill" v-if='imageSrc'></image>
|
||||
<view class="cover-box-img" v-else>
|
||||
|
||||
<image src="@/static/img/xj.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="cover-text web-font"v-if='imageSrc'>更新封面</view>
|
||||
<view class="cover-text web-font"v-else style="color: #B3B3B3;">上传图片</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="do-box-check">
|
||||
<view class="do-box-check-top">
|
||||
<view class="do-box-check-left">
|
||||
<view class="check-top-imga">
|
||||
<image src="@/static/img/c2.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="check-top-txt">请选择直播商品</view>
|
||||
</view>
|
||||
<view class="do-box-check-right">
|
||||
<view class="check-top-imgb" @click="shop">
|
||||
<image src="@/static/img/c1.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" v-if="goodlist.length>0" @click="editshop(goodlist)">
|
||||
<scroll-view scroll-x="true" scroll-left="0" style="width: 450rpx;white-space: nowrap;">
|
||||
<view class="" v-for="(item,i) in goodlist" :key='i'
|
||||
style="width: 100rpx;height: 100rpx;margin-right: 20rpx;display:inline-block;">
|
||||
<image :src="item.app_goods_pic" mode="aspectFit" style="width: 100rpx;height: 100rpx;">
|
||||
</image>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="start-but web-font" @click="create_live_room">开始直播</view>
|
||||
|
||||
|
||||
|
||||
<uni-popup ref="popup" type="bottom" style="height: 560rpx;">
|
||||
<shoppinglist @getProduct="getProduct" :checkedObj="productList" @close='close'></shoppinglist>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
HTTP_REQUEST_URL
|
||||
} from '@/config/app';
|
||||
|
||||
import {
|
||||
good,
|
||||
createPushLive
|
||||
} from '@/api/api.js'
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||||
import shoppinglist from '@/components/shoppinglist/shoppinglist.vue'
|
||||
export default {
|
||||
components: {
|
||||
uniPopup,
|
||||
shoppinglist
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
livename: '',
|
||||
imageSrc: '',
|
||||
cover_path: '',
|
||||
inputValue: '新建直播间',
|
||||
|
||||
|
||||
|
||||
|
||||
productList: [],
|
||||
goodlist: [],
|
||||
userinfo: {}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (this.isUserInfoExist) {
|
||||
console.log('用户信息存在');
|
||||
} else {
|
||||
console.log('用户信息不存在');
|
||||
uni.showModal({
|
||||
// title: '标题',
|
||||
content: '用户信息不存在,是否重新登录',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确定',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
// 用户点击了确定按钮
|
||||
uni.redirectTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
// 用户点击了取消按钮
|
||||
console.log('用户点击了取消按钮');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
isUserInfoExist() {
|
||||
const userInfo = this.$store.state.app.userInfo;
|
||||
|
||||
uni.sendHostEvent('userinfo', userInfo, (ret) => {
|
||||
//发送消息成功回调
|
||||
console.log('消息成功' + JSON.stringify(userInfo));
|
||||
});
|
||||
return !!userInfo; // 如果 userInfo 为空，则返回 false；否则返回 true
|
||||
},
|
||||
//关闭弹窗
|
||||
close() {
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
//选择商品
|
||||
shop() {
|
||||
this.$refs.popup.open()
|
||||
},
|
||||
editshop(e) {
|
||||
let arr1 = []
|
||||
for (let i in e) {
|
||||
arr1.push({
|
||||
product_id: e[i].app_goods_id,
|
||||
store_name: e[i].app_goods_name,
|
||||
image: e[i].app_goods_pic,
|
||||
price: e[i].app_goods_price,
|
||||
})
|
||||
}
|
||||
this.productList = arr1
|
||||
this.$refs.popup.open()
|
||||
},
|
||||
//获取商品数据
|
||||
getProduct(e) {
|
||||
|
||||
this.goodlist = []
|
||||
for (let i in e) {
|
||||
this.goodlist.push({
|
||||
app_goods_id: e[i].product_id,
|
||||
app_goods_name: e[i].store_name,
|
||||
app_goods_pic: e[i].image,
|
||||
app_goods_price: e[i].price,
|
||||
})
|
||||
}
|
||||
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
|
||||
//创建房间
|
||||
create_live_room: function(e) {
|
||||
|
||||
if (this.cover_path == '') {
|
||||
uni.showToast({
|
||||
title: '请上传封面',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.livename == '') {
|
||||
uni.showToast({
|
||||
title: '请填写标题',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.goodlist.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请添加商品',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
createPushLive({
|
||||
live_name: this.livename,
|
||||
cover: this.cover_path,
|
||||
app_name: "shop",
|
||||
app_user_id: this.$store.state.app.userInfo.uid,
|
||||
goods: this.goodlist
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
uni.sendHostEvent('log', res, (ret) => {
|
||||
//发送消息成功回调
|
||||
console.log('消息成功' + JSON.stringify(res));
|
||||
|
||||
});
|
||||
|
||||
if (res.code == 1) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/live/anchor?data=' + encodeURIComponent(JSON.stringify(res
|
||||
.data))
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}).catch((err) => {
|
||||
uni.sendHostEvent('log', err, (ret) => {
|
||||
//发送消息成功回调
|
||||
console.log('消息成功' + JSON.stringify(err));
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
chooseImage: function() {
|
||||
let that = this;
|
||||
that.$util.uploadImageOne('upload/image', function(res) {
|
||||
// console.log(res.data.path)
|
||||
that.cover_path = res.data.path
|
||||
that.imageSrc = res.data.path
|
||||
});
|
||||
|
||||
},
|
||||
},
|
||||
onBackPress() {
|
||||
|
||||
|
||||
// this.$refs['showpopup'].close()
|
||||
// this.$refs['showtip'].close()
|
||||
// this.$refs['showimage'].close()
|
||||
// this.$refs['showshare'].close()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.top-do-box {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
/* #ifdef MP-WEIXIN */
|
||||
margin-top: 120upx;
|
||||
/* #endif */
|
||||
/* #ifdef APP-PLUS */
|
||||
margin-top: 60upx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.ico-box {
|
||||
width: 70upx;
|
||||
height: 70upx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ico {
|
||||
color: #FFFFFF;
|
||||
font-size: 48upx;
|
||||
}
|
||||
|
||||
.lico {
|
||||
color: #FFFFFF;
|
||||
font-size: 28upx;
|
||||
margin-right: 4upx;
|
||||
}
|
||||
|
||||
.do-box {
|
||||
width: 90%;
|
||||
padding: 40upx 0;
|
||||
flex-wrap: nowrap;
|
||||
margin: auto;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.do-box-top {
|
||||
.cover-box {
|
||||
width: 193rpx;
|
||||
height: 193rpx;
|
||||
background: #F4F4F4;
|
||||
border-radius: 10upx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.cover-box-img {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 30rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-inputplaceholder {
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.cover-input {
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
margin-top: 32rpx;
|
||||
margin-bottom: 70rpx;
|
||||
}
|
||||
|
||||
|
||||
.cover-text {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
width: 100%;
|
||||
height: 50upx;
|
||||
line-height: 50upx;
|
||||
text-align: center;
|
||||
font-size: 28upx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.cover-box image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.do-box-check {
|
||||
margin-top: 35rpx;
|
||||
flex: 1;
|
||||
|
||||
.do-box-check-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.do-box-check-left {
|
||||
display: flex;
|
||||
.check-top-imga {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
margin-right: 20rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.check-top-txt {
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.do-box-check-right {
|
||||
.check-top-imgb {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.check-lable {
|
||||
width: 200upx;
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
border-radius: 60upx;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 28upx;
|
||||
}
|
||||
|
||||
.uni-input {
|
||||
background: none !important;
|
||||
color: #FFFFFF;
|
||||
font-size: 40upx;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
|
||||
/* 底部分享 */
|
||||
.uni-share {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* #endif */
|
||||
background-color: #fff;
|
||||
padding: 0 40upx;
|
||||
border-top-left-radius: 20upx;
|
||||
border-top-right-radius: 20upx;
|
||||
}
|
||||
|
||||
.uni-share-title {
|
||||
line-height: 60rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 15rpx 0;
|
||||
text-align: center;
|
||||
border-bottom: 2upx solid #F0F0F0;
|
||||
}
|
||||
|
||||
.uni-share-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
/* display: flex; */
|
||||
/* #endif */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
/* justify-content: space-around; */
|
||||
padding: 15px 0;
|
||||
/* padding-bottom: 0; */
|
||||
}
|
||||
|
||||
.content-image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.uni-share-content-text {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.uni-share-btn {
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: 14px;
|
||||
border-top-color: #f5f5f5;
|
||||
border-top-width: 1px;
|
||||
border-top-style: solid;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.type-lable {
|
||||
width: 20%;
|
||||
margin-left: 2.5%;
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
border-radius: 60upx;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
font-size: 24upx;
|
||||
border: 2upx solid #F0F0F0;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
|
||||
.type-lable-active {
|
||||
background-color: #ff2d54;
|
||||
border: 2upx solid #ff2d54;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.ok-but {
|
||||
width: 100%;
|
||||
height: 90upx;
|
||||
line-height: 90upx;
|
||||
border-radius: 90upx;
|
||||
font-size: 28upx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
background-color: #ff2d54;
|
||||
margin: 20upx auto;
|
||||
}
|
||||
|
||||
.ok-but-none {
|
||||
background-color: #F0F0F0;
|
||||
}
|
||||
|
||||
.loc-lable {
|
||||
line-height: 70upx;
|
||||
text-align: center;
|
||||
font-size: 32upx;
|
||||
}
|
||||
|
||||
.loc-lable-active {
|
||||
color: #ff2d54;
|
||||
}
|
||||
|
||||
.start-but {
|
||||
width: 60%;
|
||||
height: 90upx;
|
||||
line-height: 90upx;
|
||||
border-radius: 90upx;
|
||||
font-size: 36upx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
background-color: #ff2d54;
|
||||
position: fixed;
|
||||
bottom: 100upx;
|
||||
left: 20%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,590 @@
|
|||
<template>
|
||||
<view class="view_body">
|
||||
<z-paging ref="paging" refresher-only @onRefresh="onRefresh">
|
||||
<view class="" :style="'height:'+statusBarHeight+'px'">
|
||||
|
||||
</view>
|
||||
<view>
|
||||
<view class="search_content flex_a_c_j_sb">
|
||||
<view class="flex_a_c">
|
||||
<view class="iconfont icon-sousuo" style="font-size: 39rpx;"></view>
|
||||
<input type="text" v-model="keyword" placeholder="搜索主播或关键字"
|
||||
placeholder-style="font-size: 30rpx;" @input="change">
|
||||
</view>
|
||||
<button class="search_btn" @click="search">搜索</button>
|
||||
</view>
|
||||
|
||||
<view class="content-detail">
|
||||
<view class="banner">
|
||||
<view class="banner-detail" v-for="(item,i) in list" :key='i' @click="zhisort(i)">
|
||||
<view class="banner-name">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="banner-t" v-if="isindex==i">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
<view class="content-detaila" @click="jump_url">
|
||||
去开直播
|
||||
<text class="iconfont icon-xiangyou"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-top="0" scroll-y="true" class="goods_body_scroll" v-if="isindex==0">
|
||||
<view class="roomsbox">
|
||||
<view class="roomblock" v-for="(room,index) in roomList" :key="index" @click="jump(room)"
|
||||
style="border: 1px solid #e1d9d4;">
|
||||
<image :src="room.cover" mode="aspectFill" v-if="room.cover"></image>
|
||||
<image src="/static/lw/6.gif" mode="aspectFill" v-else></image>
|
||||
<view class="livetitle">{{room.live_name}}</view>
|
||||
<view class="roomstatus-d" v-if="room.status==1" style="background-color: #09BB07;">
|
||||
</view>
|
||||
<view class="roomstatus-d" v-else style="background-color: #fa2306;">
|
||||
</view>
|
||||
|
||||
<view class="roomstatus" style="color: #00B26A;" v-if="room.status==1">直播中
|
||||
</view>
|
||||
<view class="roomstatus" style="color: #fa2306;" v-else>已停播
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
<scroll-view scroll-top="0" scroll-y="true" class="goods_body_scroll" v-if="isindex==1">
|
||||
<view v-for="(pp,index) in roomList" :key="index">
|
||||
<view class="roomsbox-a" v-for="(kk,i) in pp" :key="i">
|
||||
<view class="roomsbox-title">
|
||||
{{i}}
|
||||
</view>
|
||||
<view class="roomsbox">
|
||||
<view class="roomblock" style="border: 1px solid #e1d9d4;" v-for="(room,j) in kk"
|
||||
:key="j" @click="hsitroyjump(room)">
|
||||
<image :src="room.cover" mode="aspectFill" v-if="room.cover"></image>
|
||||
<image src="/static/lw/6.gif" mode="aspectFill" v-else></image>
|
||||
<view class="livetitle">{{room.live_name}}</view>
|
||||
<view class="roomstatus-d" v-if="room.status==1" style="background-color: #09BB07;">
|
||||
</view>
|
||||
<view class="roomstatus-d" v-else style="background-color: #fa2306;">
|
||||
</view>
|
||||
<view class="roomstatus-d" v-if="room.status==3" style="background-color: #e1d9d4;">
|
||||
</view>
|
||||
<view class="roomstatus" style="color: #00B26A;" v-if="room.status==1">直播中
|
||||
</view>
|
||||
<view class="roomstatus" style="color: #fa2306;" v-else>已停播
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
<view class="noshuju" v-if="roomList.length==0">
|
||||
<emptyPage title="暂无房间信息"></emptyPage>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import emptyPage from '@/components/emptyPage.vue';
|
||||
import {
|
||||
live,
|
||||
playbackList
|
||||
} from '@/api/api.js'
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
emptyPage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
statusBarHeight: 0,
|
||||
page: 1,
|
||||
dataindex: 1,
|
||||
page_data: true,
|
||||
list: [{
|
||||
name: '直播精选'
|
||||
},
|
||||
{
|
||||
name: '历史直播'
|
||||
},
|
||||
|
||||
],
|
||||
roomList: [],
|
||||
user: [],
|
||||
index: 0,
|
||||
isGetLoginInfo: true,
|
||||
isindex: 0,
|
||||
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
||||
},
|
||||
mounted() {
|
||||
if (this.isUserInfoExist()) {
|
||||
console.log('用户信息存在');
|
||||
this.getRoomList()
|
||||
} else {
|
||||
console.log('用户信息不存在');
|
||||
uni.showModal({
|
||||
// title: '标题',
|
||||
content: '用户信息不存在,是否重新登录',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确定',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
// 用户点击了确定按钮
|
||||
uni.redirectTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
// 用户点击了取消按钮
|
||||
console.log('用户点击了取消按钮');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
onShow() {},
|
||||
onReachBottom() {
|
||||
if (this.isindex == 0) {
|
||||
this.getRoomList()
|
||||
} else {
|
||||
this.getbackList()
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
onPullDownRefresh: function() {
|
||||
console.log('下拉刷新')
|
||||
this.getRoomList()
|
||||
},
|
||||
methods: {
|
||||
|
||||
//下拉刷新被触发
|
||||
onRefresh() {
|
||||
//以告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
|
||||
setTimeout(() => {
|
||||
//1.5秒之后停止刷新动画
|
||||
if (this.isindex == 0) {
|
||||
this.getRoomList()
|
||||
} else {
|
||||
this.getbackList()
|
||||
}
|
||||
this.$refs.paging.complete();
|
||||
}, 1500)
|
||||
},
|
||||
isUserInfoExist() {
|
||||
const userInfo = this.$store.state.app.userInfo;
|
||||
uni.sendHostEvent('userinfo', userInfo, (ret) => {
|
||||
//发送消息成功回调
|
||||
console.log('消息成功' + JSON.stringify(userInfo));
|
||||
});
|
||||
return !!userInfo; // 如果 userInfo 为空，则返回 false；否则返回 true
|
||||
},
|
||||
//输入
|
||||
change(e) {
|
||||
// console.log(e)
|
||||
if (e.detail.value.length <= 0) {
|
||||
this.page = 1
|
||||
this.getRoomList()
|
||||
}
|
||||
},
|
||||
//查询
|
||||
search() {
|
||||
|
||||
this.page = 1
|
||||
this.roomList = []
|
||||
if (this.isindex == 0) {
|
||||
this.getRoomList()
|
||||
} else {
|
||||
this.getbackList()
|
||||
}
|
||||
},
|
||||
//分类
|
||||
zhisort(i) {
|
||||
this.isindex = i
|
||||
this.page = 1
|
||||
this.roomList = []
|
||||
if (i == 0) {
|
||||
this.getRoomList()
|
||||
} else {
|
||||
this.getbackList()
|
||||
}
|
||||
},
|
||||
getbackList: function() {
|
||||
playbackList({
|
||||
page_size: 100,
|
||||
page: this.page,
|
||||
app_name: 'shop',
|
||||
keyword: this.keyword
|
||||
}).then(res => {
|
||||
// console.log(res)
|
||||
if (res.data.code = 1) {
|
||||
uni.hideLoading()
|
||||
// this.roomList = res.data.lists
|
||||
// this.roomList.push(res.data.lists)
|
||||
if (res.data.lists.length > 0) {
|
||||
const groupedArray = res.data.lists.reduce((acc, obj) => {
|
||||
const date = obj.date;
|
||||
if (!acc[date]) {
|
||||
acc[date] = [];
|
||||
}
|
||||
acc[date].push(obj);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
this.roomList.push(groupedArray)
|
||||
// 输出结果
|
||||
console.log(this.roomList);
|
||||
}
|
||||
// this.page = this.page + 1
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 拉取房间列表
|
||||
* @return {[type]}
|
||||
* [description]
|
||||
*/
|
||||
getRoomList: function() {
|
||||
live({
|
||||
page_size: 10,
|
||||
page: this.page,
|
||||
app_name: 'shop',
|
||||
keyword: this.keyword
|
||||
}).then(res => {
|
||||
// console.log(res)
|
||||
if (res.data.code = 1) {
|
||||
uni.hideLoading()
|
||||
if (res.data.lists.length > 0) {
|
||||
let list = res.data.lists;
|
||||
let productList = this.$util.SplitArray(list, this.roomList);
|
||||
setTimeout(() => {
|
||||
this.$set(this, 'roomList', productList);
|
||||
}, 500)
|
||||
this.page = this.page + 1
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
jump: function(e) {
|
||||
console.log(e)
|
||||
uni.navigateTo({
|
||||
url: '/pages/live/spectator' + '?data=' + encodeURIComponent(JSON.stringify(e))
|
||||
})
|
||||
|
||||
},
|
||||
//历史直播间
|
||||
hsitroyjump: function(e) {
|
||||
console.log(e)
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/live/histroyroom' + '?data=' + encodeURIComponent(JSON.stringify(e))
|
||||
})
|
||||
|
||||
},
|
||||
//创建直播间
|
||||
jump_url() {
|
||||
if (this.isUserInfoExist()) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/room/create_room'
|
||||
});
|
||||
} else {
|
||||
uni.showModal({
|
||||
// title: '标题',
|
||||
content: '用户信息不存在,是否重新登录',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确定',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
// 用户点击了确定按钮
|
||||
uni.redirectTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
// 用户点击了取消按钮
|
||||
console.log('用户点击了取消按钮');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.goods_body_scroll {
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
|
||||
.search_content {
|
||||
margin: 0 auto;
|
||||
width: 724rpx;
|
||||
height: 64rpx;
|
||||
padding: 2px 2px 2px 21.05rpx;
|
||||
border-radius: 175rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 21rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 2rpx solid #FCB9AD;
|
||||
margin-top: 30rpx;
|
||||
|
||||
.icon-sousuo {
|
||||
font-size: 26.32rpx;
|
||||
font-weight: bold;
|
||||
color: #c8c7c6;
|
||||
margin-right: 17.54rpx;
|
||||
}
|
||||
|
||||
.search_btn {
|
||||
color: #fff;
|
||||
width: 105.26rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
background: #f84221;
|
||||
border-radius: 100px;
|
||||
font-size: 28.07rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content-detail {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
padding-left: 28rpx;
|
||||
|
||||
}
|
||||
|
||||
.roomsbox-title {
|
||||
font-size: 30rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-bottom: 30rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.banner-detail {
|
||||
width: 133rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.banner-name {
|
||||
font-size: 33rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.content-detaila {
|
||||
font-size: 33rpx;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-bottom: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.banner-t {
|
||||
width: 46px;
|
||||
height: 0rpx;
|
||||
opacity: 1;
|
||||
border: 2rpx solid #F84221;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.noshuju {
|
||||
height: 760upx;
|
||||
}
|
||||
|
||||
.mico-18 {
|
||||
margin-top: 10upx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.view_body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.roomstatus-d {
|
||||
width: 20upx;
|
||||
height: 20upx;
|
||||
border-radius: 20upx;
|
||||
position: absolute;
|
||||
left: 20upx;
|
||||
top: 20upx;
|
||||
}
|
||||
|
||||
.roomstatus {
|
||||
position: absolute;
|
||||
left: 40upx;
|
||||
top: 10upx;
|
||||
font-size: 28upx;
|
||||
}
|
||||
|
||||
.livetitle {
|
||||
position: absolute;
|
||||
bottom: 20upx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 70upx;
|
||||
line-height: 70upx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
padding: 20upx;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 95%;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.top_li {
|
||||
font-size: 32upx;
|
||||
padding: 0 20upx;
|
||||
display: table-cell;
|
||||
/* vertical-align:bottom; */
|
||||
padding-top: 10upx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.top-lable-box {
|
||||
/* #ifdef APP-PLUS */
|
||||
/* flex: 1; */
|
||||
|
||||
/* #endif */
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.active {
|
||||
font-size: 40upx;
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.roomsbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.roomblock {
|
||||
width: 45%;
|
||||
height: 300upx;
|
||||
border-radius: 10upx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20upx;
|
||||
position: relative;
|
||||
margin-left: 2.5%;
|
||||
}
|
||||
|
||||
.right_top_scroll {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
display: inline-block;
|
||||
margin-right: 30rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10rpx;
|
||||
|
||||
}
|
||||
|
||||
.view_body {
|
||||
background: #FFFFFF;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mico-14 {
|
||||
margin-right: 4upx;
|
||||
}
|
||||
|
||||
.noshuju {
|
||||
height: 750upx;
|
||||
}
|
||||
|
||||
.noshuju_ico {
|
||||
width: 120upx;
|
||||
height: 80upx;
|
||||
margin: 0 auto;
|
||||
margin-top: 300rpx;
|
||||
|
||||
}
|
||||
|
||||
.noshuju_ico image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mico-18 {
|
||||
margin-top: 10upx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.create-but {
|
||||
background-color: #1ce0c5;
|
||||
width: 120upx;
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
border-radius: 10upx;
|
||||
/* #ifdef MP-WEIXIN */
|
||||
margin-left: 40upx;
|
||||
/* #endif */
|
||||
margin-top: 4upx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue