You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
394 lines
8.4 KiB
394 lines
8.4 KiB
<template>
|
|
<view class="container">
|
|
<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />
|
|
<view class="topSpace" :style="'margin-top:-'+margin_top+'px'"></view>
|
|
<view class="uploadBox">
|
|
<view class="uploadBtn">
|
|
<u-upload
|
|
:fileList="uploadImg"
|
|
@afterRead="afterRead"
|
|
@delete="deletePic"
|
|
name="uploadPic"
|
|
width="400rpx"
|
|
height="500rpx"
|
|
:sizeType="['compressed']"
|
|
:deletable="true"
|
|
:maxCount="1"
|
|
:previewFullImage="false"
|
|
>
|
|
<image src="/static/img/index/upload.png" mode="widthFix"></image>
|
|
</u-upload>
|
|
</view>
|
|
</view>
|
|
<view class="uploadTips" @click="tips">
|
|
<text>照片注意事项</text> <image src="/static/img/index/tips.png" mode="widthFix"></image>
|
|
</view>
|
|
|
|
<view class="colorBox">
|
|
<view class="title">选择背景颜色</view>
|
|
<scroll-view class="scrollBox" scroll-x="true" @scroll="scroll" scroll-left="0">
|
|
<view v-for="(item,index) in colorList" :key="index" :class="'color '+(index == selectIndex ? 'on':'') " :style="'background-color:'+item.back_color+';'" @click="selectColor(index)">
|
|
<image v-if="index == selectIndex" src="/static/img/index/duigou.png" mode="widthFix"></image>
|
|
</view>
|
|
|
|
|
|
</scroll-view>
|
|
|
|
<view class="btnBox no" v-if="uploadImg.length == 0">
|
|
保存
|
|
</view>
|
|
<view class="btnBox yes" v-else @click="submit">
|
|
保存
|
|
</view>
|
|
<view class="num">
|
|
<text>剩余生成次数</text>
|
|
<text class="use">{{color_has}}</text>
|
|
<text>/{{all}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<u-popup :show="show" :round="10" mode="center" bgColor="transparent" @close="close" @open="open">
|
|
<view class="popupBox">
|
|
<view class="popupTop">
|
|
提醒
|
|
</view>
|
|
<view class="popupDesc">
|
|
<u-parse :content="content" :tagStyle="style"></u-parse>
|
|
|
|
</view>
|
|
<view class="popupBtn">
|
|
<view class="sbtnBox a3" @click="yes">我了解啦</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import custom_navbar from "../photo/components/photo_header.vue";
|
|
export default {
|
|
components: {
|
|
custom_navbar
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
navbar_title: '证件照换底色',
|
|
theme: "blue",
|
|
margin_top: 0,
|
|
|
|
|
|
//弹窗
|
|
show: false,
|
|
content: `<p>1.人物需抬头挺胸，两眼平视前方</p>
|
|
<p>2.人物应去掉发饰，眼镜，露出双耳</p>
|
|
<p>3.深色衣服，白色背景墙效果更佳</p>
|
|
<p>4.请使用后置摄像头拍摄，效果更佳</p>`,
|
|
style: {
|
|
// 字符串的形式
|
|
|
|
p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 60rpx;',
|
|
|
|
},
|
|
|
|
uploadImg: [],
|
|
users_image:'',
|
|
//颜色
|
|
colorList : [],
|
|
selectIndex:0,
|
|
|
|
|
|
color_has:0, //已生成
|
|
all:0, //可生成总数
|
|
}
|
|
},
|
|
onLoad() {
|
|
var _this = this;
|
|
_this.getColorList();
|
|
_this.getUserInfo();
|
|
},
|
|
onPageScroll(e) {
|
|
if (e.scrollTop > 50) {
|
|
this.theme = 'white';
|
|
|
|
} else {
|
|
|
|
this.theme = 'blue';
|
|
}
|
|
},
|
|
onShow() {
|
|
var _this = this;
|
|
var sceneList = _this.$user.session('sceneList');
|
|
var all = sceneList[1].number;
|
|
console.log(all);
|
|
_this.all = all;
|
|
},
|
|
methods: {
|
|
getNavHeight(e) {
|
|
this.margin_top += e;
|
|
},
|
|
//滚动监控
|
|
scroll1(e) {
|
|
console.log(e);
|
|
},
|
|
//弹窗
|
|
tips(){
|
|
this.show = true;
|
|
},
|
|
|
|
open() {
|
|
console.log('open');
|
|
},
|
|
close() {
|
|
this.show = false;
|
|
|
|
},
|
|
yes(){
|
|
this.close();
|
|
},
|
|
|
|
// 删除图片
|
|
deletePic(event) {
|
|
var _this = this;
|
|
_this.uploadImg = [];
|
|
_this.users_image = '';
|
|
},
|
|
// 新增图片
|
|
afterRead(event) {
|
|
|
|
var _this = this
|
|
console.log('event',event);
|
|
var edetail = event.file.thumb;
|
|
if (edetail.indexOf('http://tmp') != -1 || edetail.indexOf('wxfile://tmp') != -1)
|
|
{
|
|
|
|
//上传
|
|
var upData = {filePath:edetail,fileType:'image',scene:'user_max'};
|
|
_this.$api.ossUpload(upData,function(res){
|
|
console.log('ossUpload success',res);
|
|
var d = res.data;
|
|
|
|
_this.uploadImg = [{url:_this.$api.ossurl(d.file_url)}];
|
|
_this.users_image = d.file_url;
|
|
|
|
},function(err){
|
|
console.log('ossUpload fail',err);
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
///api/userInfo
|
|
getUserInfo(){
|
|
|
|
var _this = this;
|
|
_this.$api.get('/api/userInfo',{},function(res){
|
|
_this.color_has = res.attach.photo.back_color_number;
|
|
|
|
});
|
|
},
|
|
getColorList()
|
|
{
|
|
var _this = this;
|
|
var post ={};
|
|
_this.$api.get('api/color/list', post, function(res) {
|
|
|
|
var d = res;
|
|
console.log(d);
|
|
_this.colorList = d;
|
|
_this.selectIndex = 0;
|
|
|
|
});
|
|
},
|
|
selectColor(index)
|
|
{
|
|
var _this = this;
|
|
_this.selectIndex = index;
|
|
},
|
|
submit(){
|
|
|
|
var _this = this;
|
|
var color_id = _this.colorList[_this.selectIndex].id ?? 0;
|
|
if(color_id == 0)
|
|
{
|
|
_this.$com.showError('请选择背景颜色!');
|
|
return false;
|
|
}
|
|
var users_image = _this.users_image;
|
|
if(_this.$com.isNull(users_image))
|
|
{
|
|
_this.$com.showError('请上传需要换色的照片!');
|
|
return false;
|
|
}
|
|
var post = {
|
|
back_color_id:color_id,
|
|
users_image:users_image,
|
|
};
|
|
_this.$com.showLoading('保存图片中');
|
|
_this.$api.post('api/color/append', post,function(rs){
|
|
console.log(rs);
|
|
_this.$com.hideLoading();
|
|
uni.navigateTo({
|
|
url:"/pagesA/merge/success"
|
|
});
|
|
|
|
});
|
|
},
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{background-color: #F5F6FB;}
|
|
.container{width: 100%;}
|
|
.topSpace{ width: 100%; height: 100rpx;}
|
|
.uploadBox{
|
|
width: 400rpx;
|
|
height: 500rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
margin:200rpx auto auto auto;
|
|
}
|
|
.uploadBtn{ width: 100%; height: auto;}
|
|
|
|
.uploadBtn .u-upload{width: 400rpx; height: 500rpx; text-align: center; overflow: hidden;}
|
|
.uploadBtn .u-upload image{ width: 400rpx; height: 500rpx; margin: 0rpx auto; display: inline-block;}
|
|
|
|
.uploadTips{ width: 100%; height: 50rpx; line-height: 50rpx; text-align: center;}
|
|
|
|
.uploadTips text{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
.uploadTips image{ width: 24rpx; height: 24rpx; display: inline-block; margin-left: 10rpx;}
|
|
|
|
.colorBox{
|
|
width: 750rpx;
|
|
height: 520rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
}
|
|
.title{
|
|
width: 100%;
|
|
height: 40rpx;
|
|
font-weight: 700;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
margin: 20rpx 0rpx;
|
|
}
|
|
|
|
.scrollBox {
|
|
margin-top: 20rpx;
|
|
width: 100%;
|
|
height: 90rpx;
|
|
white-space: nowrap;
|
|
|
|
}
|
|
.color{
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-left: 30rpx;
|
|
border: 8rpx solid #E7E7EF;
|
|
overflow: hidden;
|
|
}
|
|
.on{
|
|
|
|
}
|
|
.on image{width: 50rpx; height:auto; margin: 12rpx 0rpx 0rpx 12rpx;}
|
|
|
|
|
|
.popupBox{
|
|
width: 600rpx;
|
|
height: auto;
|
|
border-radius: 24rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
.popupTop{
|
|
width: 600rpx;
|
|
height: 140rpx;
|
|
background: linear-gradient(to bottom, #D3D5FF 20%, #FFFFFF 50%);
|
|
border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
line-height: 140rpx;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
}
|
|
.popupDesc{
|
|
width:480rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #555555;
|
|
padding: 0rpx 60rpx;
|
|
}
|
|
|
|
.popupBtn{ width: 100%; height: auto;
|
|
display: flex; flex-wrap: wrap;
|
|
justify-content: space-around; /* 使子元素在容器中均匀分布 */
|
|
align-items: center; /* 如果需要垂直居中子元素 */
|
|
}
|
|
.sbtnBox{
|
|
margin: 30rpx auto;
|
|
width: 478rpx;
|
|
height: 80rpx;
|
|
font-weight: 700;
|
|
font-size: 30rpx;
|
|
line-height: 80rpx;
|
|
border: 2rpx solid #4D94FF;
|
|
text-align: center;
|
|
border-radius: 44rpx;
|
|
|
|
|
|
}
|
|
|
|
.a3{
|
|
background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
|
|
color:#FFFFFF;
|
|
}
|
|
|
|
|
|
.btnBox{
|
|
width: 702rpx;
|
|
height: 88rpx;
|
|
border-radius: 44rpx;
|
|
|
|
font-weight: 700;
|
|
font-size: 30rpx;
|
|
line-height: 88rpx;
|
|
text-align: center;
|
|
|
|
margin: 20rpx auto;
|
|
|
|
}
|
|
.yes{
|
|
border: 2rpx solid #9B75FF;
|
|
background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
|
|
color:#FFFFFF;
|
|
}
|
|
.no{
|
|
border: 2rpx solid #ECEBF1;
|
|
background-color: #ECEBF1;
|
|
color:#C8C6D4;
|
|
}
|
|
|
|
|
|
.num{ width: 100%; height: 60rpx; text-align: center;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #555555;
|
|
line-height: 60rpx;
|
|
}
|
|
.num .use{ color: #7A74F0;}
|
|
</style>
|
|
|