v2.1 2022-10-22
1.添加自动登录逻辑 2.各个界面微调美化
This commit is contained in:
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 主体区域 -->
|
||||
<view class="main">
|
||||
<!-- 提示区域 -->
|
||||
<view class="tip" :class="'level-'+tip.level" v-if="(tip!='')&&(tip.isShow)" @tap="showTip()">
|
||||
<text class="tip-text">
|
||||
{{tip.msg}}
|
||||
</text>
|
||||
</view>
|
||||
<view class="tip" v-else></view>
|
||||
<!-- 轮播图 -->
|
||||
<swiper class="swiper" v-if="(swiper!='')" :indicator-dots="swiper.indicatorDots"
|
||||
:vertical="swiper.vertical" :circular="swiper.circular" :interval="swiper.interval"
|
||||
:duration="swiper.duration" :autoplay="swiper.autoplay">
|
||||
<swiper-item v-for="(item,index) in swiper.background" :key="index"
|
||||
@tap="item.clickable?swiperTap(item.action,item.content):null">
|
||||
<view class="swiper-item" v-if="item.type=='color'" :style="{backgroundColor:item.background}">
|
||||
{{item.text}}
|
||||
</view>
|
||||
<image class="swiper-item" v-if="item.type=='image'" :src="item.background" :mode="item.imageMode">
|
||||
</image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper" v-else></view>
|
||||
<!-- 图片展示区域 -->
|
||||
<view class="pics" v-if="(pics!='')">
|
||||
<!-- 瀑布流左边 -->
|
||||
<view class="left">
|
||||
<icard class="icard" v-for="(item,index) in leftList" :key="index" :url="item.url"
|
||||
:source="item.source" :id="item.id" @tap="showImg(item)"></icard>
|
||||
</view>
|
||||
<!-- 瀑布流右边 -->
|
||||
<view class="right">
|
||||
<icard class="icard" v-for="(item,index) in rightList" :key="index" :url="item.url"
|
||||
:source="item.source" :id="item.id" @tap="showImg(item)"></icard>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pics" v-else>
|
||||
<!-- 瀑布流左边 -->
|
||||
<view class="left">
|
||||
<icard class="icard-left-tmp"></icard>
|
||||
<icard class="icard-left-tmp"></icard>
|
||||
</view>
|
||||
<!-- 瀑布流右边 -->
|
||||
<view class="right">
|
||||
<icard class="icard-right-tmp"></icard>
|
||||
<icard class="icard-right-tmp"></icard>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pic-show-more" @tap="showMorePics()">加载更多</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icard from "@/components/image-card.vue";
|
||||
export default {
|
||||
components: {
|
||||
icard,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
"picPage": 1,
|
||||
"picSize": 4,
|
||||
// 初始化左右盒子
|
||||
"leftList": [],
|
||||
"rightList": [],
|
||||
// 初始化左右盒子高度
|
||||
"leftH": 0,
|
||||
"rightH": 0,
|
||||
'tip': '',
|
||||
'swiper': '',
|
||||
'pics': ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getDataByOnline();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
const that = this;
|
||||
this.leftList = [];
|
||||
this.rightList = [];
|
||||
this.tip = {};
|
||||
this.swiper = {};
|
||||
this.pics = '';
|
||||
setTimeout(function() {
|
||||
that.getDataByOnline();
|
||||
uni.showToast({
|
||||
title: "刷新成功",
|
||||
duration: 500
|
||||
})
|
||||
uni.hideNavigationBarLoading();
|
||||
//完成停止加载图标
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
getDataByOnline() {
|
||||
const that = this;
|
||||
uni.request({
|
||||
url: 'https://www.lailab.cn/miniprogram/data.php?type=all',
|
||||
success(rst) {
|
||||
that.tip = rst.data.tip;
|
||||
that.swiper = rst.data.swiper;
|
||||
that.showPics();
|
||||
},
|
||||
});
|
||||
},
|
||||
doList() {
|
||||
const that = this;
|
||||
// console.log("pics", this.pics);
|
||||
if ((this.pics == '') || (this.pics == undefined)) return;
|
||||
that.pics.forEach(res => {
|
||||
// 获取图片宽高
|
||||
uni.getImageInfo({
|
||||
src: res.url,
|
||||
success: (image) => {
|
||||
// console.log("image", image);
|
||||
// 计算图片渲染高度
|
||||
let showH = (50 * image.height) / image.width
|
||||
// 判断左右盒子高度
|
||||
if (that.leftH <= that.rightH) {
|
||||
that.leftList.push(res);
|
||||
that.leftH += showH;
|
||||
} else {
|
||||
that.rightList.push(res);
|
||||
that.rightH += showH;
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
showTip() {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: this.tip.msg,
|
||||
confirmText: "我知道了",
|
||||
showCancel: false
|
||||
})
|
||||
},
|
||||
showMorePics() {
|
||||
uni.showToast({
|
||||
title: "加载更多",
|
||||
icon: "loading"
|
||||
});
|
||||
this.picPage += 1;
|
||||
this.showPics();
|
||||
},
|
||||
showPics() {
|
||||
const that = this;
|
||||
uni.request({
|
||||
url: "https://www.lailab.cn/miniprogram/pics.php?page=" + that.picPage + "&size=" + that
|
||||
.picSize,
|
||||
success(rst) {
|
||||
// console.log(rst);
|
||||
that.pics = rst.data;
|
||||
that.doList();
|
||||
}
|
||||
})
|
||||
},
|
||||
showImg(pic) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/utils/showImg/showImg?id=${pic.id}&url=${pic.url}&source=${pic.source}`
|
||||
})
|
||||
},
|
||||
swiperTap(action, content) {
|
||||
switch (action) {
|
||||
case "dialog":
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: content
|
||||
})
|
||||
break;
|
||||
case "goto":
|
||||
uni.navigateTo({
|
||||
url: content
|
||||
})
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 主体区域 */
|
||||
.main {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 提示区域 */
|
||||
.tip {
|
||||
width: auto;
|
||||
height: 30px;
|
||||
margin: 10px 10px 0 10px;
|
||||
overflow: hidden;
|
||||
border-radius: 15px;
|
||||
padding: 5px;
|
||||
background-color: #f6f7f9;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 提示区域文字 */
|
||||
.tip-text {
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
animation: 10s loop linear infinite normal;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
vertical-align: top;
|
||||
font-size: 15px;
|
||||
line-height: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* swiper轮播图样式 */
|
||||
.swiper {
|
||||
height: 200px;
|
||||
width: auto;
|
||||
margin: 10px 10px 5px 10px;
|
||||
border-radius: 20px;
|
||||
background-color: #f6f7f9;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 40px;
|
||||
line-height: 200px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* 展示图片 */
|
||||
.pics {
|
||||
padding: 0 30rpx;
|
||||
font-size: 14rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
|
||||
.right,
|
||||
.left {
|
||||
display: inline-block;
|
||||
width: 48%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.left {
|
||||
margin-right: 4%;
|
||||
}
|
||||
|
||||
.icard-left-tmp {
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.icard-right-tmp {
|
||||
height: 150px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
/* 图片下方加载更多 */
|
||||
.pic-show-more {
|
||||
display: block;
|
||||
height: 40px;
|
||||
margin: 10px;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
background-color: #ff6b6b;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 各种等级文字及背景颜色 */
|
||||
.level-1 {
|
||||
background-color: #222f3e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.level-2 {
|
||||
background-color: #54a0ff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.level-3 {
|
||||
background-color: #feca57;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.level-4 {
|
||||
background-color: #ff6b6b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 提示框平移动画 */
|
||||
@keyframes loop {
|
||||
0% {
|
||||
transform: translateX(350px);
|
||||
-webkit-transform: translateX(350px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
-webkit-transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,397 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="user-info" open-type="getUserInfo" @tap="login()">
|
||||
<view class="info-img">
|
||||
<view class="img-bg"></view>
|
||||
<image class="img-icon" :src="hasUserInfo?userInfo.avatarUrl:''" mode="cover"></image>
|
||||
</view>
|
||||
<view class="info-text">
|
||||
<text class="text-name">{{hasUserInfo?userInfo.nickName:"点击登录"}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="items">
|
||||
<button class="item" open-type="contact">
|
||||
<image class="i-icon" src="/static/icons/icon_author_message.png" mode="widthFix"></image>
|
||||
<text class="i-name">联系作者</text>
|
||||
<text class="i-more iconfont icon-arrow-right"></text>
|
||||
</button>
|
||||
<button class="item feedback" @tap="feedback()">
|
||||
<image class="i-icon" src="/static/icons/icon_feedback.png" mode="widthFix"></image>
|
||||
<text class="i-name">反馈问题</text>
|
||||
<text class="i-more iconfont icon-arrow-right"></text>
|
||||
</button>
|
||||
<button class="item clearcatch" @tap="clearStorage()">
|
||||
<image class="i-icon" src="/static/icons/icon_clear_catch.png" mode="widthFix"></image>
|
||||
<text class="i-name">清理缓存</text>
|
||||
<text class="i-more iconfont icon-arrow-right"></text>
|
||||
</button>
|
||||
<button class="item devlog" @tap="log()">
|
||||
<image class="i-icon" src="/static/icons/icon_dev_log.png" mode="widthFix"></image>
|
||||
<text class="i-name">开发日志</text>
|
||||
<text class="i-more iconfont icon-arrow-right"></text>
|
||||
</button>
|
||||
<button class="item love" @tap="admire()">
|
||||
<image class="i-icon" src="/static/icons/icon_love.png" mode="widthFix"></image>
|
||||
<text class="i-name">捐赠作者</text>
|
||||
<text class="i-more iconfont icon-arrow-right"></text>
|
||||
</button>
|
||||
<button class="item share" open-type="share">
|
||||
<image class="i-icon" src="/static/icons/icon_share.png" mode="widthFix"></image>
|
||||
<text class="i-name">分享好友</text>
|
||||
<text class="i-more iconfont icon-arrow-right"></text>
|
||||
</button>
|
||||
<button class="item" open-type="openSetting">
|
||||
<image class="i-icon" src="/static/icons/icon_setting.png" mode="widthFix"></image>
|
||||
<text class="i-name">功能设置</text>
|
||||
<text class="i-more iconfont icon-arrow-right"></text>
|
||||
</button>
|
||||
<view v-if="hasUserInfo" class="item singout" @tap="logout()">
|
||||
<text class="i-name singout-text">退出登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
hasUserInfo: false,
|
||||
userInfo: {},
|
||||
openid: "",
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
const that = this;
|
||||
if (app.globalData.hasUserInfo) {
|
||||
this.hasUserInfo = app.globalData.hasUserInfo;
|
||||
this.userInfo = app.globalData.userInfo;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
const that = this;
|
||||
// 若用户未登录
|
||||
if (!app.globalData.hasUserInfo) {
|
||||
that.toast("正在登录", 'loading');
|
||||
uni.getUserProfile({
|
||||
desc: "获取你的昵称、头像、地区及性别",
|
||||
success: res => {
|
||||
app.globalData.hasUserInfo = true;
|
||||
app.globalData.userInfo = res.userInfo;
|
||||
that.hasUserInfo = true;
|
||||
that.userInfo = res.userInfo;
|
||||
that.toast("登录成功", 'success');
|
||||
const openId = app.globalData.openId;
|
||||
if (openId) {
|
||||
res.userInfo.openId = openId;
|
||||
// console.log("res",res);
|
||||
uni.request({
|
||||
url: app.globalData.website + "/api/login.php",
|
||||
method: 'POST',
|
||||
data: res.userInfo,
|
||||
success(res) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: res.msg
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
console.log("没有OpenId,请重新进入小程序");
|
||||
}
|
||||
|
||||
},
|
||||
fail: res => {
|
||||
that.toast("您拒绝了请求", 'error');
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "您已经登录",
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
logout() {
|
||||
const that = this;
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "是否确定退出登录？",
|
||||
complete(res) {
|
||||
if (res.confirm) {
|
||||
app.globalData.hasUserInfo = false;
|
||||
app.globalData.userInfo = {};
|
||||
that.hasUserInfo = false;
|
||||
that.userInfo = {};
|
||||
} else if (res.cancel) {
|
||||
that.toast("取消操作", 'success');
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
feedback() {
|
||||
const mail = "lailab_mail@126.com";
|
||||
const qq = "1694319867";
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "有问题可以通过联系客服进行反馈,也可以添加作者QQ[1694319867]或发送邮箱[lailab_mail@126.com]进行反馈,点击下面按钮可以进行一键复制。",
|
||||
confirmText: "邮箱",
|
||||
cancelText: "QQ",
|
||||
confirmColor: "#000",
|
||||
success(res) {
|
||||
var msg = "";
|
||||
if (res.confirm) {
|
||||
msg = mail;
|
||||
} else if (res.cancel) {
|
||||
msg = qq;
|
||||
}
|
||||
uni.setClipboardData({
|
||||
data: msg,
|
||||
success(res) {
|
||||
uni.getClipboardData({
|
||||
success(res) {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: "success",
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
share() {},
|
||||
// 获取本地缓存大小
|
||||
getStorageSize() {
|
||||
let that = this;
|
||||
try {
|
||||
plus.cache.calculate(function(size) {
|
||||
let sizeCache = parseInt(size);
|
||||
if (sizeCache == 0) {
|
||||
that.currentSize = "0B";
|
||||
} else if (sizeCache < 1024) {
|
||||
that.currentSize = sizeCache + "B";
|
||||
} else if (sizeCache < 1048576) {
|
||||
that.currentSize = (sizeCache / 1024).toFixed(2) + "KB";
|
||||
} else if (sizeCache < 1073741824) {
|
||||
that.currentSize = (sizeCache / 1048576).toFixed(2) + "MB";
|
||||
} else {
|
||||
that.currentSize = (sizeCache / 1073741824).toFixed(2) + "GB";
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
},
|
||||
// 清理缓存
|
||||
clearStorage() {
|
||||
let that = this;
|
||||
that.toast("正在清理", "loading");
|
||||
try {
|
||||
let os = plus.os.name;
|
||||
|
||||
if (os == 'Android') {
|
||||
let main = plus.android.runtimeMainActivity();
|
||||
let sdRoot = main.getCacheDir();
|
||||
let files = plus.android.invoke(sdRoot, "listFiles");
|
||||
let len = files.length;
|
||||
console.log(files, len)
|
||||
for (let i = 0; i < len; i++) {
|
||||
let filePath = '' + files[i]; // 没有找到合适的方法获取路径，这样写可以转成文件路径
|
||||
plus.io.resolveLocalFileSystemURL(filePath, function(entry) {
|
||||
if (entry.isDirectory) {
|
||||
entry.removeRecursively(function(entry) { //递归删除其下的所有文件及子目录
|
||||
that.files = []
|
||||
that.toast("清除成功", "success");
|
||||
that.getStorageSize(); // 重新计算缓存
|
||||
}, function(e) {
|
||||
console.log(e.message)
|
||||
});
|
||||
} else {
|
||||
entry.remove();
|
||||
}
|
||||
}, function(e) {
|
||||
console.log('文件路径读取失败')
|
||||
});
|
||||
}
|
||||
} else { // ios
|
||||
plus.cache.clear(function() {
|
||||
that.toast("清除成功", "success");
|
||||
that.getStorageSize();
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
that.toast("清理完成", "success");
|
||||
return;
|
||||
}
|
||||
},
|
||||
log() {
|
||||
const log = `
|
||||
<b>v1.0 2022-10-7</b><br />
|
||||
1.从微信端进行移植<br /><br />
|
||||
<b>v2.0 2022-10-19</b><br />
|
||||
1.更新主页空内容显示<br />
|
||||
2.实现工具智能抠图、证件照、摩斯电码、随机骰子等功能<br />
|
||||
3.实现部分登录逻辑<br /><br />
|
||||
<b>v2.1 2022-10-22</b><br />
|
||||
1.添加自动登录逻辑<br />
|
||||
`;
|
||||
uni.navigateTo({
|
||||
url: `/pages/utils/showText/showText?nodes=${log}`
|
||||
});
|
||||
},
|
||||
admire() {
|
||||
const url = app.globalData.website + "/image/other/image_admire.jpg"
|
||||
uni.navigateTo({
|
||||
url: `/pages/utils/showImg/showImg?id=${0}&url=${url}&showBar=false&showMode=aspectFit&canLongTap=true`
|
||||
});
|
||||
},
|
||||
toast(title, icon) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: icon
|
||||
})
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
if (app.globalData.hasUserInfo) {
|
||||
this.hasUserInfo = app.globalData.hasUserInfo;
|
||||
this.userInfo = app.globalData.userInfo;
|
||||
}
|
||||
this.getStorageSize();
|
||||
},
|
||||
onShow() {
|
||||
if (app.globalData.hasUserInfo) {
|
||||
this.hasUserInfo = app.globalData.hasUserInfo;
|
||||
this.userInfo = app.globalData.userInfo;
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("../../static/iconfont/iconfont.css");
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
/* background-color: red; */
|
||||
background-color: #ffffff;
|
||||
padding: 20px 0 80px 0;
|
||||
/* text-align: center; */
|
||||
}
|
||||
|
||||
.user-info {
|
||||
width: 90%;
|
||||
height: 140px;
|
||||
background-color: #f6f7f9;
|
||||
border-radius: 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.info-img {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
/* background-color: green; */
|
||||
float: left;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.img-bg {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
border-radius: 15px;
|
||||
background-color: #eeeeee;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.img-icon {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
/* background-color: red; */
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
/* background-color: skyblue; */
|
||||
float: right;
|
||||
}
|
||||
|
||||
.text-name {
|
||||
font-size: 30px;
|
||||
line-height: 140px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.items {
|
||||
width: 90%;
|
||||
background-color: #ffffff;
|
||||
border-radius: 15px;
|
||||
margin: 20px auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: left;
|
||||
background-color: #f6f7f9;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.item:first-child {
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
|
||||
.item:last-child {
|
||||
border-radius: 0 0 20px 20px;
|
||||
}
|
||||
|
||||
.i-icon {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
/* background-color: red; */
|
||||
float: left;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.i-name {
|
||||
font-size: 18px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.i-more {
|
||||
display: block;
|
||||
height: 30px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
margin: 10px auto;
|
||||
color: #888888;
|
||||
font-size: 17px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* 退出登录字体 */
|
||||
.singout-text {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
color: #ff6b6b;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="main">
|
||||
<view class="classify-cards" v-for="(items,index) in tools" :key="index">
|
||||
<text class="classify-name" style="margin: 10px auto;">{{items.name}}</text>
|
||||
<view>
|
||||
<tcard class="tool-card" v-for="(item,index1) in items.cards" :key="index1" :title="item.title" :detail="item.detail"
|
||||
:color="item.color" :icon="item.icon" :url="item.url">
|
||||
</tcard>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tcard from "@/components/tool-card.vue";
|
||||
export default {
|
||||
components: {
|
||||
tcard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tools: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getDataByOnline();
|
||||
},
|
||||
methods: {
|
||||
getDataByOnline() {
|
||||
const that = this;
|
||||
uni.request({
|
||||
url: 'https://www.lailab.cn/miniprogram/data.php?type=tools',
|
||||
success: function(rst) {
|
||||
that.tools = rst.data;
|
||||
},
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: #ffffff;
|
||||
color: black;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.main-dark {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.classify-cards {
|
||||
width: 94%;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.classify-name {
|
||||
display: block;
|
||||
height: 30px;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
text-indent: 0.5em;
|
||||
font-weight: bold;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.tool-card {
|
||||
width: 47.5%;
|
||||
display: inline-block;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.tool-card:nth-child(2n-1) {
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.tool-card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<view class="byh-view">
|
||||
<image :src="picUrl" mode="widthFix" :animation="animationData"></image>
|
||||
<button class="byh-share" open-type="share"></button>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('jipigu')">鸡屁股</text>
|
||||
<text @tap="audioPlay('peidasuan')">配大蒜</text>
|
||||
<text @tap="audioPlay('jianjiandandan')">简简单单</text>
|
||||
<text @tap="audioPlay('yidunfan')">一顿饭</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('jishihui')">既实惠</text>
|
||||
<text @tap="audioPlay('haiguanbao')">还管饱</text>
|
||||
<text @tap="audioPlay('jiuchilaoba')">就吃老八</text>
|
||||
<text @tap="audioPlay('mizhihanbao')">蜜汁汉堡</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('yirisancan')">一日三餐</text>
|
||||
<text @tap="audioPlay('meifannao')">没烦恼</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('choudoufu')">臭豆腐</text>
|
||||
<text @tap="audioPlay('furu')">腐乳</text>
|
||||
<text @tap="audioPlay('jianingmeng')">加柠檬</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('nikanzhe')">你看这</text>
|
||||
<text @tap="audioPlay('hanbao')">汉堡</text>
|
||||
<text @tap="audioPlay('zuode')">做的</text>
|
||||
<text @tap="audioPlay('xingbuxing')">行不行</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('xiongdimen')">兄弟们</text>
|
||||
<text @tap="audioPlay('aoligei')">奥里给</text>
|
||||
<text @tap="audioPlay('zaojiuwanle')">造就完了</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('heiheihei')">嘿嘿嘿</text>
|
||||
<text @tap="audioPlay('panta')">盘它</text>
|
||||
<text @tap="audioPlay('lailea')">来了啊</text>
|
||||
<text @tap="audioPlay('meizizi')">美滋滋</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('ou1')">呕1</text>
|
||||
<text @tap="audioPlay('ou2')">呕2</text>
|
||||
<text @tap="audioPlay('ou3')">呕3</text>
|
||||
<text @tap="audioPlay('haihaihai')">嗨嗨嗨</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('huojimian')">火鸡面</text>
|
||||
<text @tap="audioPlay('dalajiao')">大辣椒</text>
|
||||
<text @tap="audioPlay('yidunbuchi')">一顿不吃</text>
|
||||
<text @tap="audioPlay('xincinao')">心刺挠</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('dsnhalg')">大声呐喊奥里给</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('sydxdxw')">所有东西都下胃</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('bgsxhsc')">不管是腥还是臭</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('dwzlskr')">到我嘴里是块肉</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('msjlwlb')">美食界里我老八</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('wrcwmsj')">万人称我美食家</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('lbmzxhb')">老八秘制小汉堡</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('lbzgh')">老八中国话</text>
|
||||
<text @tap="audioPlay('lbjl')">老八惊雷</text>
|
||||
</view>
|
||||
<view>
|
||||
<text @tap="audioPlay('szcshbz')">si在厕所汉堡中</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="btn-stop" @tap="audioPause" type="primary')">停止</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
picUrl: app.globalData.website + "/image/other/image_tool_bayinhe.jpg",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
audioPlay(flag) {
|
||||
let that = this;
|
||||
var srcMic = "";
|
||||
uni.request({
|
||||
url: "https://www.lailab.cn/miniprogram/tools/bayinhe.php?flag=" + flag,
|
||||
success(res) {
|
||||
// console.log(res);
|
||||
if (res.statusCode == 200) {
|
||||
srcMic = res.data;
|
||||
that.innerAudioContext = uni.createInnerAudioContext();
|
||||
//创建内部 audio 上下文 InnerAudioContext 对象。
|
||||
that.innerAudioContext.onError(function(res) {});
|
||||
if ((srcMic == '') || (srcMic == undefined)) return;
|
||||
that.innerAudioContext.src = srcMic; //设置音频地址
|
||||
that.innerAudioContext.play(); //播放音频
|
||||
} else {
|
||||
app.toast("网络错误", "error");
|
||||
}
|
||||
},
|
||||
fail() {
|
||||
app.toast("未知错误", "error");
|
||||
}
|
||||
})
|
||||
},
|
||||
// 停止播放
|
||||
audioPause() {
|
||||
if ((this.innerAudioContext == '') || (this.innerAudioContext == undefined)) return;
|
||||
this.innerAudioContext.pause(); //暂停音频
|
||||
},
|
||||
toast(title, icon) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: icon
|
||||
});
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
this.audioPause();
|
||||
},
|
||||
onUnload() {
|
||||
this.audioPause();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
view {
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 96vw;
|
||||
height: auto;
|
||||
margin: 2vw;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
text {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
background-color: #54a0ff;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-stop {
|
||||
width: 100%;
|
||||
background-color: #ff6b6b;
|
||||
}
|
||||
|
||||
.byh-view {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.byh-share {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background-image: url('../../../static/icons/icon_share.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: rgba(84, 160, 255, .2);
|
||||
background-size: 60% 60%;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="top-block"></view>
|
||||
<textarea class="tq-input" placeholder="请输入文字/网址" maxlength="-1" @input="getInputValue">
|
||||
<button class="tq-share" open-type="share"></button>
|
||||
</textarea>
|
||||
<image class="tq-qrcode" :src="url" show-menu-by-longpress="true"></image>
|
||||
<text class="tq-tip">长按图片进行保存</text>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getInputValue(e) {
|
||||
// 获取到input的值
|
||||
let value = e.detail.value;
|
||||
this.url = "https://www.lailab.cn/miniprogram/tools/qrcode.php?text=" + value;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: #54a0ff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.top-block {
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tq-input {
|
||||
width: 86%;
|
||||
height: 200px;
|
||||
border-radius: 20px;
|
||||
font-size: 20px;
|
||||
margin: 0 auto 40px auto;
|
||||
padding: 15px;
|
||||
background-color: #f6f7f9;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tq-qrcode {
|
||||
height: 250px;
|
||||
width: 250px;
|
||||
background-color: white;
|
||||
margin: 70px auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tq-tip {
|
||||
width: auto;
|
||||
color: white;
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tq-share {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background-image: url('../../../static/icons/icon_share.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: rgba(84,160,255,.2);
|
||||
background-size: 60% 60%;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="top-block"></view>
|
||||
<textarea class="ms-input" placeholder="输入内容自动识别" maxlength="-1" @input="inputValue">
|
||||
<button class="ms-share" open-type="share"></button>
|
||||
</textarea>
|
||||
<text class="ms-output" @longtap="copyOutCode()">{{outcode?outcode:"长按复制"}}</text>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
outcode: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
inputValue(e) {
|
||||
const that = this;
|
||||
// 获取到input的值
|
||||
const value = e.detail.value + ' .';
|
||||
var operate = 'encode';
|
||||
if (value.indexOf('-') >= 0) {
|
||||
operate = 'decode';
|
||||
}
|
||||
uni.request({
|
||||
url: app.globalData.website + '/tools/mosidianma.php?type=' + operate + '&text=' + value,
|
||||
method: 'POST',
|
||||
success(res) {
|
||||
// console.log(res);
|
||||
that.outcode = res.data;
|
||||
},
|
||||
fail(res) {
|
||||
console.log("请求失败", res);
|
||||
uni.showToast({
|
||||
content: '请求失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
copyOutCode() {
|
||||
const that = this;
|
||||
if(that.outcode=='')return;
|
||||
//提示模板
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: that.outcode, //模板中提示的内容
|
||||
confirmText: '复制内容',
|
||||
success: (res) => { //点击复制内容的后调函数
|
||||
if (res.confirm) {
|
||||
//uni.setClipboardData方法就是讲内容复制到粘贴板
|
||||
uni.setClipboardData({
|
||||
data: that.outcode, //要被复制的内容
|
||||
success: () => { //复制成功的回调函数
|
||||
uni.showToast({ //提示
|
||||
title: '复制成功'
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-color: #54a0ff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.top-block {
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ms-input,
|
||||
.ms-output {
|
||||
width: 86%;
|
||||
height: 200px;
|
||||
border-radius: 20px;
|
||||
font-size: 20px;
|
||||
margin: 0 auto 20px auto;
|
||||
padding: 15px;
|
||||
background-color: #f6f7f9;
|
||||
}
|
||||
|
||||
.ms-input {
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.ms-output {
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
display: block;
|
||||
color: #262626;
|
||||
margin: 0 auto 20px auto;
|
||||
overflow: scroll;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.ms-share {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background-image: url('../../../static/icons/icon_share.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: rgba(84, 160, 255, .2);
|
||||
background-size: 60% 60%;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="bg-muyu">
|
||||
<switch class="sw-animation" @change="changeAnimation()">{{useanim?'关':'开'}}动画</switch>
|
||||
<text class="te-sumgongde">今日已累计 {{num*gongde}} 功德</text>
|
||||
</view>
|
||||
<image class="img-muyu" :src="bgurl" mode="widthFix"></image>
|
||||
<button class="dzmy-share" open-type="share"></button>
|
||||
<view class="v-muyu" @tap="audioPlay">
|
||||
<view class="v-gongde" :animation="animationData">功德+{{gongde}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
bgurl: "https://www.lailab.cn/miniprogram/image/other/image_tool_muyu.jpg",
|
||||
num: 0,
|
||||
gongde: 500,
|
||||
useanim: false,
|
||||
animationData: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
audioPlay: function(e) {
|
||||
let that = this;
|
||||
var srcMic = "https://www.lailab.cn/owncloud/index.php/s/RMVFmfrDy0He7Ka/download";
|
||||
const x = e.detail.x;
|
||||
const y = e.detail.y;
|
||||
if (this.useanim) {
|
||||
this.startAnimation(x, y);
|
||||
}
|
||||
// if (that.innerAudioContext == undefined) {
|
||||
// console.log("请求了");
|
||||
that.innerAudioContext = uni.createInnerAudioContext();
|
||||
//创建内部 audio 上下文 InnerAudioContext 对象。
|
||||
that.innerAudioContext.onError(function(res) {});
|
||||
if ((srcMic == '') || (srcMic == undefined)) return;
|
||||
that.innerAudioContext.src = srcMic; //设置音频地址
|
||||
// }
|
||||
that.audioPause();
|
||||
that.innerAudioContext.play(); //播放音频
|
||||
that.num += 1;
|
||||
},
|
||||
// 停止播放
|
||||
audioPause() {
|
||||
if ((this.innerAudioContext == '') || (this.innerAudioContext == undefined)) return;
|
||||
this.innerAudioContext.pause(); //暂停音频
|
||||
},
|
||||
startAnimation(x, y) {
|
||||
this.animation.translate(x - 110, y - 400).opacity(1).step();
|
||||
this.animationData = this.animation.export();
|
||||
setTimeout(function() {
|
||||
this.animation.opacity(0).translate(x - 110, y - 600).step();
|
||||
this.animationData = this.animation.export()
|
||||
}.bind(this), 300)
|
||||
setTimeout(function() {
|
||||
this.animation.translate(x - 110, y - 380).opacity(0).step();
|
||||
this.animationData = this.animation.export()
|
||||
}.bind(this), 600);
|
||||
},
|
||||
// 开关动画
|
||||
changeAnimation() {
|
||||
console.log("转化", this.useanim);
|
||||
this.useanim = !this.useanim;
|
||||
},
|
||||
},
|
||||
onShow: function() {
|
||||
var animation = uni.createAnimation({
|
||||
duration: 300,
|
||||
timingFunction: 'ease',
|
||||
})
|
||||
this.animation = animation
|
||||
this.animationData = animation.export()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.containr {
|
||||
height: 1000px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.sw-animation {
|
||||
font-size: 18px;
|
||||
line-height: 45px;
|
||||
/* background-color: red; */
|
||||
padding: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.te-sumgongde {
|
||||
line-height: 45px;
|
||||
padding: 10px;
|
||||
/* background-color: green; */
|
||||
float: right;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bg-muyu {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.img-muyu {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dzmy-share {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 15px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background-image: url('../../../static/icons/icon_share.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: #84602D;
|
||||
background-size: 60% 60%;
|
||||
z-index: 10;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.v-muyu {
|
||||
width: 65vw;
|
||||
height: 220px;
|
||||
position: absolute;
|
||||
bottom: 210px;
|
||||
left: 15vw;
|
||||
}
|
||||
|
||||
.v-gongde {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<button class="sjtz-share" open-type="share"></button>
|
||||
<view class="row row-1">
|
||||
<text v-if="count>0" class="dice"
|
||||
:style="{backgroundPosition: position[nums[0]].posX+'px '+position[nums[0]].posY+'px'}"></text>
|
||||
<text v-if="count>5" class="dice"
|
||||
:style="{backgroundPosition: position[nums[5]].posX+'px '+position[nums[5]].posY+'px'}"></text>
|
||||
<text v-if="count>1" class="dice"
|
||||
:style="{backgroundPosition: position[nums[1]].posX+'px '+position[nums[1]].posY+'px'}"></text>
|
||||
</view>
|
||||
<view v-if="count>2" class="row row-2">
|
||||
<text v-if="count>2" class="dice"
|
||||
:style="{backgroundPosition: position[nums[2]].posX+'px '+position[nums[2]].posY+'px'}"></text>
|
||||
<text v-if="count>4" class="dice"
|
||||
:style="{backgroundPosition: position[nums[4]].posX+'px '+position[nums[4]].posY+'px'}"></text>
|
||||
<text v-if="count>3" class="dice"
|
||||
:style="{backgroundPosition: position[nums[3]].posX+'px '+position[nums[3]].posY+'px'}"></text>
|
||||
</view>
|
||||
<picker class="picker" @change="countChange" :value="index" :range="array">
|
||||
<view class="picker-text">
|
||||
当前选择：{{array[index]}} v
|
||||
</view>
|
||||
</picker>
|
||||
|
||||
<button class="btn-start" @tap="start()">{{sum}}</button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
position: [{
|
||||
posX: 0,
|
||||
posY: 0,
|
||||
},
|
||||
{
|
||||
posX: -100,
|
||||
posY: 0,
|
||||
},
|
||||
{
|
||||
posX: -200,
|
||||
posY: 0,
|
||||
},
|
||||
{
|
||||
posX: -300,
|
||||
posY: 0,
|
||||
},
|
||||
{
|
||||
posX: -400,
|
||||
posY: 0,
|
||||
},
|
||||
{
|
||||
posX: -500,
|
||||
posY: 0,
|
||||
}
|
||||
],
|
||||
count: 1,
|
||||
nums: [0, 1, 2, 3, 4, 5],
|
||||
array: ['1个骰子', '2个骰子', '3个骰子', '4个骰子', '5个骰子', '6个骰子'],
|
||||
index: 0,
|
||||
sum: '开始',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
start() {
|
||||
clearInterval(this.timer);
|
||||
this.sum = "等待计算中";
|
||||
this.timer = setInterval(this.picFn, 50);
|
||||
setTimeout(() => {
|
||||
clearInterval(this.timer);
|
||||
let num = 0;
|
||||
for (var i = 0; i < this.nums.length; i++) {
|
||||
if (i >= this.count) {
|
||||
this.nums[i] = 0;
|
||||
}
|
||||
}
|
||||
this.nums.forEach(item => {
|
||||
num += item
|
||||
});
|
||||
this.sum = `分数：${num+this.count}`;
|
||||
}, 2000);
|
||||
},
|
||||
randNum: () => Math.floor(Math.random() * 6),
|
||||
picFn() {
|
||||
this.nums = this.nums.map(item => this.randNum())
|
||||
},
|
||||
countChange: function(e) {
|
||||
// console.log('picker发送选择改变，携带值为', e.detail.value);
|
||||
let num = e.detail.value;
|
||||
this.index = num;
|
||||
this.count = ++num;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: #f6f7f9;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.row {
|
||||
width: 90vw;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
margin: 0 5vw;
|
||||
}
|
||||
|
||||
.row-1 {
|
||||
padding-top: 150px;
|
||||
}
|
||||
|
||||
.row-2 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.dice {
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: red;
|
||||
background: url('https://www.lailab.cn/miniprogram/image/other/image_tool_suijitouzi.png') no-repeat;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.picker,
|
||||
.btn-start {
|
||||
height: 45px;
|
||||
width: 90vw;
|
||||
margin: 0 5vw;
|
||||
text-align: center;
|
||||
line-height: 45px;
|
||||
font-size: 20px;
|
||||
margin-top: 30px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.picker {
|
||||
background-color: #262626;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
background-color: #262626;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sjtz-share {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background-image: url('../../../static/icons/icon_share.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: rgba(38, 38, 38, .5);
|
||||
background-size: 60% 60%;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="tmp"></view>
|
||||
<view class="view-show" @tap="chooseImg()">
|
||||
<image class="img-show" :src="imgUrl" :style="{'backgroundColor':color}" mode="heightFix" @tap="showImg()"
|
||||
@load="loadImg()" @error="errImg()" show-menu-by-longpress></image>
|
||||
<button class='zjz-share' open-type="share" @tap.stop="testFn($event)"></button>
|
||||
</view>
|
||||
<view class="colors">
|
||||
<text class="colors-tip">选择背景色</text>
|
||||
<view class="colors-choose">
|
||||
<text class="color color-red" @tap="changeColor('#D9001B')">红</text>
|
||||
<text class="color color-blue" @tap="changeColor('#02A7F0')">蓝</text>
|
||||
<text class="color color-white" @tap="changeColor('#FFFFFF')">白</text>
|
||||
<text class="color color-black" @tap="changeColor('#222f3e')">黑</text>
|
||||
<text class="color color-more" @tap="changeColor('#ff9ff3')">粉</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="upload" @tap="startMake()">开始制作</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isChoose: false,
|
||||
imgUrl: '',
|
||||
color: '#00000000',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseImg() {
|
||||
const that = this;
|
||||
console.log(!this.isChoose);
|
||||
if (!this.isChoose) {
|
||||
wx.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success(res) {
|
||||
that.imgUrl = res.tempFilePaths[0];
|
||||
that.isChoose = true;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
showImg() {
|
||||
if (this.isChoose) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/utils/showImg/showImg?id=${0}&url=${this.imgUrl}&source=${this.imgUrl}`
|
||||
});
|
||||
}
|
||||
},
|
||||
changeColor(col) {
|
||||
this.color = col;
|
||||
},
|
||||
startMake() {
|
||||
const that = this;
|
||||
uni.showLoading({
|
||||
title: '正在生成',
|
||||
icon: 'loading'
|
||||
});
|
||||
uni.uploadFile({
|
||||
url: app.globalData.website + "/tools/zhengjianzhao.php",
|
||||
filePath: that.imgUrl,
|
||||
name: 'pic',
|
||||
formData: {
|
||||
color: that.color,
|
||||
},
|
||||
success(res) {
|
||||
console.log(res, '上传成功');
|
||||
if (res.data.length > 5) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '生成成功',
|
||||
icon: 'success'
|
||||
})
|
||||
that.imgUrl = res.data;
|
||||
uni.showLoading({
|
||||
title: '图片加载中...',
|
||||
icon: 'loading'
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '生成失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail(err) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '生成失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
loadImg() {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '图片加载成功',
|
||||
icon: 'success',
|
||||
})
|
||||
},
|
||||
errImg() {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '图片加载失败',
|
||||
icon: 'error',
|
||||
})
|
||||
},
|
||||
testFn(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.tmp {
|
||||
height: 3vh;
|
||||
}
|
||||
|
||||
.view-show {
|
||||
height: 65vh;
|
||||
width: 90vw;
|
||||
background: url("https://www.lailab.cn/miniprogram/image/other/image_zhengjianzhao_bg.jpg");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0 5vw;
|
||||
border-radius: 25px;
|
||||
text-align: center;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
/*解决ios上滑动不流畅*/
|
||||
-webkit-overflow-scrolling: touch;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zjz-share {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
right: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background-image: url('../../../static/icons/icon_share.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: rgba(34, 47, 62, .1);
|
||||
background-size: 60% 60%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
.img-show {
|
||||
height: 100%;
|
||||
min-width: auto;
|
||||
/* border-radius: 25px; */
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.colors {
|
||||
height: 15vh;
|
||||
width: 90vw;
|
||||
margin: 2vh 5vw 0 5vw;
|
||||
background-color: #eee;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.colors-tip {
|
||||
height: 30%;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.colors-choose {
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
display: inline-block;
|
||||
background-color: #eee;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.color-red {
|
||||
background-color: #D9001B;
|
||||
}
|
||||
|
||||
.color-blue {
|
||||
background-color: #02A7F0;
|
||||
}
|
||||
|
||||
.color-white {
|
||||
background-color: #ffffff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.color-black {
|
||||
background-color: #222f3e;
|
||||
}
|
||||
|
||||
.color-more {
|
||||
background-color: #ff9ff3;
|
||||
}
|
||||
|
||||
.upload {
|
||||
height: 45px;
|
||||
width: 90vw;
|
||||
margin: 2vh 5vw 0 5vw;
|
||||
border-radius: 20px;
|
||||
border: 0;
|
||||
background-color: #222f3e;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="tmp"></view>
|
||||
<view class="view-show" @tap="chooseImg()">
|
||||
<image class="img-show" :src="imgUrl" @load="loadImg()" @error="errImg()" @tap="showImg()" mode="heightFix"
|
||||
show-menu-by-longpress></image>
|
||||
<button class="znkt-share" open-type="share" @tap.stop="testFn($event)"></button>
|
||||
</view>
|
||||
<button class="upload" @tap="startMake()">开始抠图</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isChoose: false,
|
||||
imgUrl: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseImg() {
|
||||
const that = this;
|
||||
console.log(!this.isChoose);
|
||||
if (!this.isChoose) {
|
||||
wx.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success(res) {
|
||||
wx.editImage({
|
||||
src: res.tempFilePaths[0],
|
||||
success(res1) {
|
||||
that.imgUrl = res1.tempFilePath;
|
||||
that.isChoose = true;
|
||||
},
|
||||
fail(e) {
|
||||
that.imgUrl = res.tempFilePaths[0];
|
||||
that.isChoose = true;
|
||||
console.info('该客户端不支持此操作', e);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
showImg() {
|
||||
if (this.isChoose) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/utils/showImg/showImg?id=${0}&url=${this.imgUrl}&source=${this.imgUrl}`
|
||||
});
|
||||
}
|
||||
},
|
||||
startMake() {
|
||||
const that = this;
|
||||
uni.showLoading({
|
||||
title: '正在生成',
|
||||
icon: 'loading'
|
||||
});
|
||||
uni.uploadFile({
|
||||
url: app.globalData.website + "/tools/zhinengkoutu.php",
|
||||
filePath: that.imgUrl,
|
||||
name: 'pic',
|
||||
formData: {},
|
||||
success(res) {
|
||||
console.log(res, '上传成功');
|
||||
if (res.data.length > 5) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '生成成功',
|
||||
icon: 'success'
|
||||
})
|
||||
that.imgUrl = res.data;
|
||||
uni.showLoading({
|
||||
title: '图片加载中...',
|
||||
icon: 'loading'
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '生成失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
},
|
||||
fail(err) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '生成失败',
|
||||
icon: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
loadImg() {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '图片加载成功',
|
||||
icon: 'success',
|
||||
})
|
||||
},
|
||||
errImg() {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '图片加载失败',
|
||||
icon: 'error',
|
||||
})
|
||||
},
|
||||
testFn(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.tmp {
|
||||
height: 3vh;
|
||||
}
|
||||
|
||||
.view-show {
|
||||
height: 83vh;
|
||||
width: 90vw;
|
||||
background: url("https://www.lailab.cn/miniprogram/image/other/image_zhinengkoutu_bg.jpg");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
/*解决ios上滑动不流畅*/
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin: 0 5vw;
|
||||
border-radius: 25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.znkt-share {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
right: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background-image: url('../../../static/icons/icon_share.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-color: rgba(34, 47, 62, .1);
|
||||
background-size: 60% 60%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.img-show {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
border-radius: 25px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.colors {
|
||||
height: 15vh;
|
||||
width: 90vw;
|
||||
margin: 2vh 5vw 0 5vw;
|
||||
background-color: #eee;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.colors-tip {
|
||||
height: 30%;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.colors-choose {
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
display: inline-block;
|
||||
background-color: #eee;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
border-radius: 25px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.color-red {
|
||||
background-color: #D9001B;
|
||||
}
|
||||
|
||||
.color-blue {
|
||||
background-color: #02A7F0;
|
||||
}
|
||||
|
||||
.color-white {
|
||||
background-color: #ffffff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.color-black {
|
||||
background-color: #222f3e;
|
||||
}
|
||||
|
||||
.color-more {
|
||||
background-color: #ff9ff3;
|
||||
}
|
||||
|
||||
.upload {
|
||||
height: 45px;
|
||||
width: 90vw;
|
||||
margin: 2vh 5vw 0 5vw;
|
||||
border-radius: 20px;
|
||||
border: 0;
|
||||
background-color: #222f3e;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="view-show">
|
||||
<image class="img-show" :src="picUrl" @load="loadImg()" @error="errImg()" :mode="showMode" :show-menu-by-longpress="canLongTap"></image>
|
||||
</view>
|
||||
<button class="btn btn-back" @tap="back()">X</button>
|
||||
<view v-if="showBar&&hindBar" class="btnbar">
|
||||
<button class="btn btn-copyright" @tap="copyright()">版权</button>
|
||||
<button class="btn btn-share" open-type="share">分享</button>
|
||||
<button class="btn btn-download" @tap="download()">下载</button>
|
||||
<button class="btn btn-source" @tap="sourceImg()">原图</button>
|
||||
<button class="btn btn-hide" @tap="hideBar()">隐藏</button>
|
||||
<!-- 版权 分享 下载 原图 -->
|
||||
</view>
|
||||
<button v-if="!hindBar" class="btn btn-show" @tap="showBarFn()">开</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: "",
|
||||
url: "",
|
||||
source: "",
|
||||
picUrl: "",
|
||||
showMode: "heightFix",
|
||||
hindBar: true,
|
||||
showBar: true,
|
||||
canLongTap: false
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
console.log('获取数据成功');
|
||||
this.id = option.id?option.id:this.id;
|
||||
this.url = option.url?option.url:this.url;
|
||||
this.source = option.source?option.source:this.source;
|
||||
this.showMode = option.showMode?option.showMode:this.showMode;
|
||||
this.showBar = option.showBar?(option.showBar.indexOf('t')==0?true:false):this.showBar;
|
||||
this.canLongTap = option.canLongTap?(option.canLongTap.indexOf('t')==0?true:false):this.canLongTap;
|
||||
this.picUrl = this.url;
|
||||
uni.showLoading({
|
||||
title: '图片加载中...',
|
||||
icon: 'loading'
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
try{
|
||||
uni.navigateBack();
|
||||
}catch(e){
|
||||
uni.switchTab({
|
||||
url: "/pages/home/home"
|
||||
})
|
||||
}
|
||||
},
|
||||
hideBar() {
|
||||
this.hindBar = false;
|
||||
},
|
||||
showBarFn() {
|
||||
this.hindBar = true;
|
||||
},
|
||||
copyright() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '图片皆为网上搜寻，若侵权。请联系我进行删除。',
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
console.log('确定');
|
||||
|
||||
} else if (res.cancel) {
|
||||
console.log('取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
share() {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "长按图片进行分享操作!"
|
||||
});
|
||||
},
|
||||
download() {
|
||||
const link = this.picUrl;
|
||||
// 展示进度框
|
||||
uni.showLoading({
|
||||
title: "开始下载",
|
||||
icon: "loading",
|
||||
|
||||
})
|
||||
uni.downloadFile({
|
||||
url: link,
|
||||
success(res) {
|
||||
if (res.statusCode == 200) {
|
||||
uni.getFileSystemManager().saveFile({
|
||||
tempFilePath: res.tempFilePath,
|
||||
filePath: `${wx.env.USER_DATA_PATH}/image.png`,
|
||||
success(res) {
|
||||
console.log(res.savedFilePath);
|
||||
wx.saveImageToPhotosAlbum({
|
||||
filePath: res.savedFilePath,
|
||||
success(res) {
|
||||
console.log(res)
|
||||
console.log('保存图片成功')
|
||||
uni.hideLoading();
|
||||
wx.showToast({
|
||||
title: '下载成功',
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
fail() {
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "下载失败,可以通过长按图片进行保存。"
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
fail() {
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "下载失败,可以通过长按图片进行保存。"
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
sourceImg() {
|
||||
this.picUrl = this.source;
|
||||
uni.showLoading({
|
||||
title: '图片加载中...',
|
||||
icon: 'loading'
|
||||
})
|
||||
},
|
||||
loadImg() {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '图片加载成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
errImg() {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '图片加载失败',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.view-show {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
/*解决ios上滑动不流畅*/
|
||||
-webkit-overflow-scrolling: touch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.img-show {
|
||||
height: 100%;
|
||||
min-width: 100vw;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.btn {
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
border: 0;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.btnbar {
|
||||
height: 60px;
|
||||
width: 80vw;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
left: 10vw;
|
||||
}
|
||||
|
||||
.btn-show {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 6vh;
|
||||
right: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
|
||||
<rich-text :nodes="nodes"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: `<div class="div_class">
|
||||
<h1>Title</h1>
|
||||
<p class="p">
|
||||
Life is <i>like</i> a box of
|
||||
<b> chocolates</b>.
|
||||
</p>
|
||||
</div>`
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.nodes = option.nodes ? option.nodes : this.nodes;
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user