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