v2.1 2022-10-22
1.添加自动登录逻辑 2.各个界面微调美化
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user