v2.1 2022-10-22
1.添加自动登录逻辑 2.各个界面微调美化
This commit is contained in:
@@ -0,0 +1,177 @@
|
||||
<script>
|
||||
export default {
|
||||
globalData: {
|
||||
website: "https://www.lailab.cn/miniprogram",
|
||||
hasUserInfo: false,
|
||||
userInfo: {},
|
||||
openId: null
|
||||
},
|
||||
onLaunch: function() {
|
||||
this.login();
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
const that = this
|
||||
if (this.globalData.hasUserInfo) {
|
||||
console.log("已获取用户信息");
|
||||
} else {
|
||||
//调用登录接口
|
||||
uni.login({
|
||||
success: function(res1) {
|
||||
// 获取个人 code
|
||||
uni.getUserInfo({
|
||||
success: res2 => {
|
||||
// 获取 OpenId
|
||||
wx.request({
|
||||
url: that.globalData.website +
|
||||
"/api/getOpenId.php",
|
||||
method: "POST",
|
||||
data: {
|
||||
code: res1.code,
|
||||
},
|
||||
header: {
|
||||
"Content-Type": "application/x-www-form-urlencoded"
|
||||
},
|
||||
success: function(res3) {
|
||||
if (res3.data.result.openid) {
|
||||
that.globalData.openId = res3.data
|
||||
.result.openid;
|
||||
console.log("获取OpenId成功");
|
||||
uni.request({
|
||||
url: that.globalData
|
||||
.website +
|
||||
"/api/getUserInfo.php",
|
||||
method: 'POST',
|
||||
data: {
|
||||
openId: res3.data
|
||||
.result.openid
|
||||
},
|
||||
success(res4) {
|
||||
if (res4.data.err ==
|
||||
0) {
|
||||
console.log(
|
||||
"用户未注册");
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '检测到您尚未登录，某些工具可能无权使用，请先去登录。',
|
||||
confirmText: '去登陆',
|
||||
cancelText: '取消',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
that.userLogin();
|
||||
}
|
||||
}
|
||||
})
|
||||
} else if (res4.data
|
||||
.err == 1) {
|
||||
console.log(
|
||||
"用户已注册");
|
||||
that.globalData
|
||||
.userInfo =
|
||||
res4.data
|
||||
.result[0];
|
||||
that.globalData
|
||||
.hasUserInfo =
|
||||
true;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log("获取OpenId失败", res3);
|
||||
}
|
||||
},
|
||||
fail: function(res3) {
|
||||
console.log("访问OpenId服务器失败", res);
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: function() {
|
||||
that.authorizeCheck("scope.userInfo");
|
||||
}
|
||||
})
|
||||
},
|
||||
fail(res) {
|
||||
console.log("调用登录服务失败", res);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
getRandomShareTitle: function() {
|
||||
var arr = [];
|
||||
|
||||
if (this.globalData.shareapptext) {
|
||||
arr = this.globalData.shareapptext;
|
||||
}
|
||||
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
},
|
||||
getMainAppShare: function() {
|
||||
return {
|
||||
title: this.getRandomShareTitle(),
|
||||
path: '/pages/index/index',
|
||||
success: function(res) {
|
||||
// 转发成功
|
||||
},
|
||||
fail: function(res) {
|
||||
// 转发失败
|
||||
}
|
||||
}
|
||||
},
|
||||
userLogin() {
|
||||
const that = this;
|
||||
// 若用户未登录
|
||||
if (!that.globalData.hasUserInfo) {
|
||||
that.toast("正在登录", 'loading');
|
||||
uni.getUserProfile({
|
||||
desc: "获取你的昵称、头像、地区及性别",
|
||||
success: res => {
|
||||
that.globalData.hasUserInfo = true;
|
||||
that.globalData.userInfo = res.userInfo;
|
||||
that.toast("登录成功", 'success');
|
||||
uni.switchTab({
|
||||
url: '/pages/mine/mine'
|
||||
})
|
||||
const openId = that.globalData.openId;
|
||||
if (openId) {
|
||||
res.userInfo.openId = openId;
|
||||
uni.request({
|
||||
url: that.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 {
|
||||
that.toast("您已经登录",'none');
|
||||
}
|
||||
},
|
||||
toast(title, icon) {
|
||||
uni.showToast({
|
||||
title: title,
|
||||
icon: icon
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
uni-page-body,
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<!-- 主页展示卡片 -->
|
||||
<view class="ic-container">
|
||||
<image class="ic-image" mode="widthFix" :src="url" lazy-load="true"/>
|
||||
<text class="ic-source" :class="'level-'+Math.ceil(Math.random()*9)">{{id}}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "image-card",
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
value: ""
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
value: ""
|
||||
},
|
||||
source: {
|
||||
type: String,
|
||||
value: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showImage() {
|
||||
this.isShow = true;
|
||||
},
|
||||
closeImage() {
|
||||
this.isShow = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ic-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ic-image {
|
||||
min-height: 200px;
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
margin-top: 10px;
|
||||
background-color: #f6f7f9;
|
||||
}
|
||||
|
||||
|
||||
.ic-source {
|
||||
min-height: 15px;
|
||||
min-width: 15px;
|
||||
line-height: 15px;
|
||||
padding: 3px 7px;
|
||||
border-radius: 7px;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 15px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.level-1 {
|
||||
background-color: #c8d6e5;
|
||||
}
|
||||
|
||||
.level-2 {
|
||||
background-color: #576574;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.level-3 {
|
||||
background-color: #222f3e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.level-4 {
|
||||
background-color: #48dbfb;
|
||||
}
|
||||
|
||||
.level-5 {
|
||||
background-color: #54a0ff;
|
||||
}
|
||||
|
||||
.level-6 {
|
||||
background-color: #5f27cd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.level-7 {
|
||||
background-color: #feca57;
|
||||
}
|
||||
|
||||
.level-8 {
|
||||
background-color: #ff9ff3;
|
||||
}
|
||||
|
||||
.level-9 {
|
||||
background-color: #ff6b6b;
|
||||
clear: white;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<view class="tc-container" @tap="turn2Url(url)">
|
||||
<view class="tc-text">
|
||||
<text class="tc-title">{{title}}</text>
|
||||
<text class="tc-detail">{{detail}}</text>
|
||||
</view>
|
||||
<view class="tc-img">
|
||||
<text class="tc-bg" :style="{'backgroundColor':color}"></text>
|
||||
<image class="tc-icon" :src="icon" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "tool-card",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
value: ""
|
||||
},
|
||||
detail: {
|
||||
type: String,
|
||||
value: ""
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
value: ""
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
value: ""
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
value: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
turn2Url(iurl) {
|
||||
uni.navigateTo({
|
||||
url: iurl,
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: "正在加载",
|
||||
icon: "loading",
|
||||
duration: 500
|
||||
});
|
||||
},
|
||||
fail() {
|
||||
uni.showToast({
|
||||
title: "开发中...",
|
||||
icon: "error"
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tc-container {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.tc-text {
|
||||
width: 70%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.tc-title {
|
||||
margin: 15px 15px 2px 15px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tc-detail {
|
||||
margin: 0 0 0 15px;
|
||||
height: 15px;
|
||||
line-height: 15px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #888888;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tc-img {
|
||||
width: 30%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tc-bg {
|
||||
display: block;
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
margin: 12px;
|
||||
border-radius: 18px;
|
||||
background-color: pink;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.tc-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin: 12px;
|
||||
border-radius: 18px;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
</style>
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
import App from './App'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
+127
@@ -0,0 +1,127 @@
|
||||
{
|
||||
"name" : "LaiLab工具箱",
|
||||
"appid" : "__UNI__C046081",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {
|
||||
"OAuth" : {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {
|
||||
"capabilities" : {
|
||||
"entitlements" : {
|
||||
"com.apple.developer.associated-domains" : [ "applinks:lailab.cn", "applinks:mp.lailab.cn" ]
|
||||
}
|
||||
}
|
||||
},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {
|
||||
"oauth" : {
|
||||
"weixin" : {
|
||||
"appid" : "wx09ed3facc95abf94",
|
||||
"appsecret" : "",
|
||||
"UniversalLinks" : "https://mp.lailab.cn/uni-universallinks/__UNI__C046081/"
|
||||
}
|
||||
},
|
||||
"maps" : {},
|
||||
"ad" : {
|
||||
"hw" : {}
|
||||
}
|
||||
},
|
||||
"icons" : {
|
||||
"android" : {
|
||||
"hdpi" : "static/icons/logos/72x72.png",
|
||||
"xhdpi" : "static/icons/logos/96x96.png",
|
||||
"xxhdpi" : "static/icons/logos/144x144.png",
|
||||
"xxxhdpi" : "static/icons/logos/192x192.png"
|
||||
},
|
||||
"ios" : {
|
||||
"appstore" : "static/icons/logos/1024x1024.png",
|
||||
"ipad" : {
|
||||
"app" : "static/icons/logos/76x76.png",
|
||||
"app@2x" : "static/icons/logos/152x152.png",
|
||||
"notification" : "static/icons/logos/20x20.png",
|
||||
"notification@2x" : "static/icons/logos/40x40.png",
|
||||
"proapp@2x" : "static/icons/logos/167x167.png",
|
||||
"settings" : "static/icons/logos/29x29.png",
|
||||
"settings@2x" : "static/icons/logos/58x58.png",
|
||||
"spotlight" : "static/icons/logos/40x40.png",
|
||||
"spotlight@2x" : "static/icons/logos/80x80.png"
|
||||
},
|
||||
"iphone" : {
|
||||
"app@2x" : "static/icons/logos/120x120.png",
|
||||
"app@3x" : "static/icons/logos/180x180.png",
|
||||
"notification@2x" : "static/icons/logos/40x40.png",
|
||||
"notification@3x" : "static/icons/logos/60x60.png",
|
||||
"settings@2x" : "static/icons/logos/58x58.png",
|
||||
"settings@3x" : "static/icons/logos/87x87.png",
|
||||
"spotlight@2x" : "static/icons/logos/80x80.png",
|
||||
"spotlight@3x" : "static/icons/logos/120x120.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wx09ed3facc95abf94",
|
||||
"setting" : {
|
||||
"urlCheck" : false,
|
||||
"minified" : true
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "3",
|
||||
"_spaceID" : "2eebff55-6264-4fb1-91bf-56146519ad87"
|
||||
}
|
||||
Generated
+7
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"requires": true,
|
||||
"lockfileVersion": 1,
|
||||
"dependencies": {
|
||||
|
||||
}
|
||||
}
|
||||
+126
@@ -0,0 +1,126 @@
|
||||
{
|
||||
"pages": [{
|
||||
"path": "pages/home/home",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/more/more",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/mine",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#ffffff"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/utils/showImg/showImg",
|
||||
"style": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/utils/showText/showText",
|
||||
"style": {
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/subpages/bayinhe/bayinhe",
|
||||
"style": {
|
||||
"navigationBarTitleText": "八音盒",
|
||||
"navigationBarBackgroundColor": "#ffffff"
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/subpages/erweima/erweima",
|
||||
"style": {
|
||||
"navigationBarTitleText": "二维码",
|
||||
"navigationBarBackgroundColor": "#54a0ff",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/subpages/qiaomuyu/qiaomuyu",
|
||||
"style": {
|
||||
"navigationBarTitleText": "敲木鱼",
|
||||
"navigationBarBackgroundColor": "#000000",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/subpages/zhengjianzhao/zhengjianzhao",
|
||||
"style": {
|
||||
"navigationBarTitleText": "证件照",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/subpages/zhinengkoutu/zhinengkoutu",
|
||||
"style": {
|
||||
"navigationBarTitleText": "智能抠图",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/subpages/mosidianma/mosidianma",
|
||||
"style": {
|
||||
"navigationBarTitleText": "摩斯电码",
|
||||
"navigationBarBackgroundColor": "#54a0ff",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/subpages/suijitouzi/suijitouzi",
|
||||
"style": {
|
||||
"navigationBarTitleText": "随机骰子",
|
||||
"navigationBarBackgroundColor": "#f6f7f9"
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/subpages/choujiangzhushou/choujiangzhushou",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "LaiLab工具箱",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"backgroundColor": "#ffffff",
|
||||
"lazyCodeLoading": "requiredComponents"
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#7A7E83",
|
||||
"selectedColor": "#000000",
|
||||
"borderStyle": "white",
|
||||
"backgroundColor": "#ffffff",
|
||||
"list": [{
|
||||
"pagePath": "pages/home/home",
|
||||
"iconPath": "static/images/image_home.png",
|
||||
"selectedIconPath": "static/images/image_home_selected.png",
|
||||
"text": "主页"
|
||||
}, {
|
||||
"pagePath": "pages/more/more",
|
||||
"iconPath": "static/images/image_more.png",
|
||||
"selectedIconPath": "static/images/image_more_selected.png",
|
||||
"text": "更多"
|
||||
}, {
|
||||
"pagePath": "pages/mine/mine",
|
||||
"iconPath": "static/images/image_mine.png",
|
||||
"selectedIconPath": "static/images/image_mine_selected.png",
|
||||
"text": "我的"
|
||||
}]
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,19 @@
|
||||
# LaiLab工具箱 uni-app
|
||||
|
||||
v1.0 2022-10-7
|
||||
|
||||
1.从微信端进行移植
|
||||
|
||||
v2.0 2022-10-19
|
||||
|
||||
1.更新主页空内容显示
|
||||
|
||||
2.实现工具智能抠图、证件照、摩斯电码、随机骰子等功能
|
||||
|
||||
3.实现部分登录逻辑
|
||||
|
||||
v2.1 2022-10-22
|
||||
|
||||
1.添加自动登录逻辑
|
||||
|
||||
2.各个界面微调美化
|
||||
@@ -0,0 +1,75 @@
|
||||
/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3683562 */
|
||||
src: url('//at.alicdn.com/t/c/font_3683562_hhqgn724iob.woff2?t=1665041844705') format('woff2'),
|
||||
url('//at.alicdn.com/t/c/font_3683562_hhqgn724iob.woff?t=1665041844705') format('woff'),
|
||||
url('//at.alicdn.com/t/c/font_3683562_hhqgn724iob.ttf?t=1665041844705') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 26px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-arrow-right:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.icon-a-Arrow-Right2:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-home:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-home2:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-my:before {
|
||||
content: "\e78b";
|
||||
}
|
||||
|
||||
.icon-myfill:before {
|
||||
content: "\e78c";
|
||||
}
|
||||
|
||||
.icon-fenlei-xuanzhong:before {
|
||||
content: "\e638";
|
||||
}
|
||||
|
||||
.icon-circle:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.icon-moon:before {
|
||||
content: "\eb68";
|
||||
}
|
||||
|
||||
.icon-music-albums:before {
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.icon-love-line:before {
|
||||
content: "\e637";
|
||||
}
|
||||
|
||||
.icon-music-rf:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.icon-pause-f:before {
|
||||
content: "\e659";
|
||||
}
|
||||
|
||||
.icon-arrow-down-filling:before {
|
||||
content: "\e688";
|
||||
}
|
||||
|
||||
.icon-play:before {
|
||||
content: "\e680";
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 777 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 735 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 709 B |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 876 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 925 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 953 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 962 B |
@@ -0,0 +1,76 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$uni-text-color:#333;//基本色
|
||||
$uni-text-color-inverse:#fff;//反色
|
||||
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable:#c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-bg-color-grey:#f8f8f8;
|
||||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||
|
||||
/* 边框颜色 */
|
||||
$uni-border-color:#c8c7cc;
|
||||
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:20px;
|
||||
$uni-img-size-base:26px;
|
||||
$uni-img-size-lg:40px;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 2px;
|
||||
$uni-border-radius-base: 3px;
|
||||
$uni-border-radius-lg: 6px;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 5px;
|
||||
$uni-spacing-row-base: 10px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 4px;
|
||||
$uni-spacing-col-base: 8px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:20px;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:26px;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:15px;
|
||||
Reference in New Issue
Block a user