feat: 邮件弹窗优化+上传面部头像优化
This commit is contained in:
kenny
+160
-28
@@ -49,19 +49,43 @@
|
||||
</view>
|
||||
|
||||
<view class="btn-bottom">
|
||||
<button class="next-btn" @tap="nextStep">下一步</button>
|
||||
<button class="next-btn" @tap="nextStep"> 下一步 </button>
|
||||
|
||||
<uni-file-picker
|
||||
v-if="isHideUploadBtn"
|
||||
:auto-upload="false"
|
||||
:del-icon="false"
|
||||
:disable-preview="true"
|
||||
sizeType="['original']"
|
||||
class="custom-upload"
|
||||
:sourceType="['album', 'camera']"
|
||||
limit="1"
|
||||
mode="grid"
|
||||
@select="selectPic"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<div class="dialog" v-if="false">
|
||||
<div class="dialog-main">
|
||||
<input class="next-input" type="file" />
|
||||
<div class="next-input">
|
||||
<uni-file-picker
|
||||
:auto-upload="false"
|
||||
:del-icon="false"
|
||||
:disable-preview="true"
|
||||
sizeType="['original']"
|
||||
class="upload"
|
||||
limit="1"
|
||||
mode="grid"
|
||||
>选择选择选择选择选择选择选择选择
|
||||
</uni-file-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { getAccessToken } from '@/sheep/request';
|
||||
import { getUserInfo, saveUserInfo } from '@/sheep/api/user';
|
||||
|
||||
@@ -394,6 +418,91 @@
|
||||
|
||||
// getUserInfo()
|
||||
|
||||
const isHideUploadBtn = computed(() => {
|
||||
if (!form.value.color) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!form.value.feeling_of_quantity) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!form.value.right_and_wrong) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!form.value.dynamic_and_static) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!form.value.somatotype) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!form.value.question.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!form.value.purpose.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!form.value.occasion_dressing.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
const selectPic = async (e) => {
|
||||
console.log('selectPic: ', e.tempFilePaths[0]);
|
||||
|
||||
uni.showLoading({
|
||||
icon: 'loading',
|
||||
title: '',
|
||||
});
|
||||
|
||||
const userInfo = await getUserInfo();
|
||||
|
||||
await saveUserInfo({
|
||||
...JSON.parse(userInfo.data.dataJson),
|
||||
...form.value,
|
||||
question: form.value.question.toString(),
|
||||
purpose: form.value.purpose.toString(),
|
||||
occasion_dressing: form.value.occasion_dressing.toString(),
|
||||
}).then(() => {
|
||||
uni.showLoading({
|
||||
icon: 'loading',
|
||||
title: '',
|
||||
});
|
||||
uni.uploadFile({
|
||||
url: 'https://puton.huimeimeta.com/app-api/cloth/uploadFace',
|
||||
filePath: e.tempFilePaths[0],
|
||||
name: 'file',
|
||||
formData: {},
|
||||
header: {
|
||||
Authorization: getAccessToken(),
|
||||
},
|
||||
success: (res) => {
|
||||
console.log('上传成功', typeof res.data);
|
||||
console.log('res.data.code: ', JSON.parse(res.data));
|
||||
|
||||
if (JSON.parse(res.data).code === 200) {
|
||||
window.location.href = `https://face-canvas.huimeimeta.com/?img=${
|
||||
JSON.parse(res.data).result.fileUrl
|
||||
}&token=${getAccessToken()}`;
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
},
|
||||
|
||||
complete: () => {
|
||||
uni.hideLoading();
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const nextStep = async () => {
|
||||
if (!form.value.color) {
|
||||
uni.showToast({
|
||||
@@ -472,14 +581,14 @@
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
sourceType: ['album', 'camera'], //从相册选择
|
||||
success: function (res) {
|
||||
console.log(JSON.stringify(res.tempFilePaths));
|
||||
|
||||
uni.showLoading({
|
||||
icon: 'loading',
|
||||
title: ''
|
||||
})
|
||||
title: '',
|
||||
});
|
||||
|
||||
uni.uploadFile({
|
||||
url: 'https://puton.huimeimeta.com/app-api/cloth/uploadFace',
|
||||
@@ -487,26 +596,28 @@
|
||||
name: 'file',
|
||||
formData: {},
|
||||
header: {
|
||||
Authorization: getAccessToken()
|
||||
Authorization: getAccessToken(),
|
||||
},
|
||||
success: (res) => {
|
||||
console.log('上传成功',typeof res.data);
|
||||
console.log('上传成功', typeof res.data);
|
||||
console.log('res.data.code: ', JSON.parse(res.data));
|
||||
|
||||
if(JSON.parse(res.data).code === 200) {
|
||||
window.location.href = `https://face-canvas.huimeimeta.com/?img=${JSON.parse(res.data).result.fileUrl}&token=${getAccessToken()}`
|
||||
if (JSON.parse(res.data).code === 200) {
|
||||
window.location.href = `https://face-canvas.huimeimeta.com/?img=${
|
||||
JSON.parse(res.data).result.fileUrl
|
||||
}&token=${getAccessToken()}`;
|
||||
}
|
||||
},
|
||||
|
||||
complete:()=>{
|
||||
uni.hideLoading()
|
||||
complete: () => {
|
||||
uni.hideLoading();
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
fail: (fail) => {
|
||||
console.log('fail: ', fail);
|
||||
uni.showToast('上传图片报错了')
|
||||
uni.showToast('上传图片报错了');
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -592,8 +703,8 @@
|
||||
|
||||
.btn-bottom {
|
||||
margin-top: 40rpx;
|
||||
// padding-bottom: 40rpx;
|
||||
padding: 20rpx 40rpx;
|
||||
position: relative;
|
||||
|
||||
.next-btn {
|
||||
height: 80rpx;
|
||||
@@ -602,8 +713,17 @@
|
||||
color: white;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-upload {
|
||||
// background-color: red;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
:deep(.file-picker__box) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
position: fixed;
|
||||
@@ -623,27 +743,39 @@
|
||||
font-size: 32rpx;
|
||||
.next-input {
|
||||
height: 80rpx;
|
||||
width: 200rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #0d232c;
|
||||
color: white;
|
||||
font-size: 32rpx;
|
||||
position: relative;
|
||||
|
||||
// &:after {
|
||||
// content: '点击上传头像';
|
||||
// position: absolute;
|
||||
// left: 50%;
|
||||
// top: 50%;
|
||||
// color: white;
|
||||
// font-size: 28rpx;
|
||||
// transform: translate(-50%, -50%);
|
||||
// font-weight: bolder;
|
||||
// }
|
||||
:deep(.file-picker__box-content) {
|
||||
background-color: pink;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 300rpx;
|
||||
z-index: 200;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// position: relative;
|
||||
|
||||
&:after {
|
||||
content: '点击上传头像';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
color: white;
|
||||
font-size: 28rpx;
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: bolder;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -313,6 +313,7 @@
|
||||
<button class="next-btn" @click="openEmailDialog">发送到邮件</button>
|
||||
</view>
|
||||
|
||||
<!--
|
||||
<view class="m-dialog" v-if="dialog.visible">
|
||||
<div class="m-dialog-main">
|
||||
<div class="email">
|
||||
@@ -326,7 +327,7 @@
|
||||
|
||||
<button class="btn" @click="sendEmail">发送</button>
|
||||
</div>
|
||||
</view>
|
||||
</view> -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -887,16 +888,14 @@
|
||||
visible: false,
|
||||
});
|
||||
|
||||
const openEmailDialog = () => {
|
||||
|
||||
const openEmailDialog = async () => {
|
||||
console.log('openEmailDialog: ');
|
||||
const emailVal = window.prompt('请输入邮箱')
|
||||
|
||||
dialog.value.visible = true;
|
||||
};
|
||||
|
||||
const sendEmail = async () => {
|
||||
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||||
|
||||
if (!emailRegex.test(email.value)) {
|
||||
if (!emailRegex.test(emailVal)) {
|
||||
uni.showToast({ title: '请输入正确的邮箱', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
@@ -904,7 +903,7 @@
|
||||
const res = await sendMail({
|
||||
timeout: 100 * 1000,
|
||||
pageUrl: window.location.href,
|
||||
email: email.value,
|
||||
email: emailVal
|
||||
});
|
||||
|
||||
if (res.data.code == 0) {
|
||||
@@ -913,6 +912,8 @@
|
||||
|
||||
uni.showToast({ title: '已经进入发送队列，稍后请查收邮件', icon: 'none' });
|
||||
}
|
||||
|
||||
// dialog.value.visible = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user