@@ -671,21 +671,21 @@ onUnload(() => { | |||||
.imageBox { | .imageBox { | ||||
position: relative; | position: relative; | ||||
margin-top: 200rpx; | margin-top: 200rpx; | ||||
width: 500rpx; | |||||
height: 500rpx; | |||||
width: 300rpx; | |||||
height: 300rpx; | |||||
border-radius: 30rpx; | border-radius: 30rpx; | ||||
background-color: #fff; | background-color: #fff; | ||||
.mask { | .mask { | ||||
position: absolute; | position: absolute; | ||||
width: 500rpx; | |||||
height: 500rpx; | |||||
width: 100%; | |||||
height: 100%; | |||||
border-radius: 30rpx; | border-radius: 30rpx; | ||||
background-color: rgba($color: #000000, $alpha: 0.7); | background-color: rgba($color: #000000, $alpha: 0.7); | ||||
z-index: 2; | z-index: 2; | ||||
} | } | ||||
image { | image { | ||||
width: 500rpx; | |||||
height: 500rpx; | |||||
width: 100%; | |||||
height: 100%; | |||||
border-radius: 30rpx; | border-radius: 30rpx; | ||||
background-color: #fff; | background-color: #fff; | ||||
} | } | ||||
@@ -96,7 +96,7 @@ const sexList = ref([ | |||||
{ name: "女", id: 2 }, | { name: "女", id: 2 }, | ||||
{ name: "男", id: 1 }, | { name: "男", id: 1 }, | ||||
{ name: "单人", id: 3 }, | { name: "单人", id: 3 }, | ||||
{ name: "多人", id: 4 }, | |||||
// { name: "多人", id: 4 }, | |||||
]); | ]); | ||||
const sexList2 = ref([ | const sexList2 = ref([ | ||||
{ name: "女", id: 2 }, | { name: "女", id: 2 }, | ||||
@@ -107,7 +107,7 @@ const sexList2 = ref([ | |||||
const mouldType = ref(""); | const mouldType = ref(""); | ||||
const mouldTypeList = ref([ | const mouldTypeList = ref([ | ||||
{ name: "单人", id: 1 }, | { name: "单人", id: 1 }, | ||||
{ name: "多人", id: 2 }, | |||||
// { name: "多人", id: 2 }, | |||||
]); | ]); | ||||
// 点击tab | // 点击tab | ||||
function chooseTab(item) { | function chooseTab(item) { | ||||
@@ -2,11 +2,11 @@ | |||||
<view class="page"> | <view class="page"> | ||||
<!-- 用户信息 --> | <!-- 用户信息 --> | ||||
<view class="userInfoBox" v-show="userInfoModulesPinia.token"> | <view class="userInfoBox" v-show="userInfoModulesPinia.token"> | ||||
<view class="phone">用户:{{ userInfoModulesPinia.phone }}</view> | |||||
<!-- <view class="phone">用户:{{ userInfoModulesPinia.phone }}</view> --> | |||||
<view class="createTimes" | <view class="createTimes" | ||||
>剩余次数:{{ userInfoModulesPinia.createTimes }}次</view | |||||
>剩余写真次数:{{ userInfoModulesPinia.createTimes }}</view | |||||
> | > | ||||
<view class="loginOut" @click="loginOut">退出登录</view> | |||||
<view class="loginOut" @click="loginOut">结束拍摄</view> | |||||
</view> | </view> | ||||
<!-- 轮播图 --> | <!-- 轮播图 --> | ||||
<u-swiper | <u-swiper | ||||
@@ -25,9 +25,10 @@ | |||||
<image class="logo" src="../../assets/img/logo-4.png" mode="aspectFit" /> | <image class="logo" src="../../assets/img/logo-4.png" mode="aspectFit" /> | ||||
</view> | </view> | ||||
<view v-if="createState == 2" class="checkMore">左右滑动查看更多</view> | <view v-if="createState == 2" class="checkMore">左右滑动查看更多</view> | ||||
<view v-if="createState != 2" class="wait" | |||||
>生成中,可能需要10-30秒,请您稍等</view | |||||
> | |||||
<view v-if="createState != 2" class="wait"> | |||||
<view>写真生成中</view> | |||||
<view>稍后您可在“智像小相册”微信小程序中查看</view> | |||||
</view> | |||||
<!-- <view | <!-- <view | ||||
@click="subscribe" | @click="subscribe" | ||||
v-if="createState != 2" | v-if="createState != 2" | ||||
@@ -35,15 +36,15 @@ | |||||
class="wait" | class="wait" | ||||
>做好后通知我</view | >做好后通知我</view | ||||
> --> | > --> | ||||
<view class="orangeBtn" @click="goChooseStyle"> 重新选择 </view> | |||||
<view class="grayBtn" @click="loginOut"> 退出登录 </view> | |||||
<view class="orangeBtn" @click="goChooseStyle"> 稍后查看 再来一套 </view> | |||||
<view class="grayBtn" @click="loginOut"> 结束拍摄 </view> | |||||
<u-overlay class="overlay" :show="showQrCode" opacity="0.9"> | <u-overlay class="overlay" :show="showQrCode" opacity="0.9"> | ||||
<view class="content"> | <view class="content"> | ||||
<view class="imageBox"> | <view class="imageBox"> | ||||
<image src="../../assets/img/QRCode.jpg" mode="scaleToFill" /> | <image src="../../assets/img/QRCode.jpg" mode="scaleToFill" /> | ||||
</view> | </view> | ||||
<text>您的次数已用完,微信扫码可以查看作品哦</text> | |||||
<text>微信扫码查看我的写真相册</text> | |||||
<view class="orangeBtn" style="margin-top: 100rpx" @click="cancelUplaod" | <view class="orangeBtn" style="margin-top: 100rpx" @click="cancelUplaod" | ||||
>我知道了</view | >我知道了</view | ||||
> | > | ||||
@@ -148,13 +149,9 @@ async function getUser() { | |||||
//#region 页面跳转 | //#region 页面跳转 | ||||
function goChooseStyle() { | function goChooseStyle() { | ||||
if (userInfoModulesPinia.createTimes) { | |||||
uni.navigateTo({ | |||||
url: "/pages/chooseStyle/index", | |||||
}); | |||||
} else { | |||||
showQrCode.value = true; | |||||
} | |||||
uni.navigateTo({ | |||||
url: "/pages/chooseStyle/index", | |||||
}); | |||||
} | } | ||||
const cancelUplaod = () => { | const cancelUplaod = () => { | ||||
@@ -241,20 +238,27 @@ watch( | |||||
//#region 退出登录 | //#region 退出登录 | ||||
function loginOut() { | function loginOut() { | ||||
uni.showModal({ | |||||
title: "提示", | |||||
content: "是否退出登录?", | |||||
confirmColor: "#ff4f00", | |||||
success: function (res) { | |||||
if (res.confirm) { | |||||
console.log("用户点击确定"); | |||||
userInfoModulesPinia.clearStorage(); | |||||
uni.navigateTo({ url: "/pages/login/index" }); | |||||
} else if (res.cancel) { | |||||
console.log("用户点击取消"); | |||||
} | |||||
}, | |||||
}); | |||||
if (userInfoModulesPinia.createTimes) { | |||||
uni.showModal({ | |||||
title: "是否结束拍摄?", | |||||
content: `您还有${userInfoModulesPinia.createTimes}次拍摄机会`, | |||||
confirmColor: "#ff4f00", | |||||
confirmText: "再来一套", | |||||
cancelText: "结束拍摄", | |||||
success: function (res) { | |||||
if (res.confirm) { | |||||
console.log("用户点击确定"); | |||||
uni.navigateTo({ url: "/pages/chooseStyle/index" }); | |||||
} else if (res.cancel) { | |||||
console.log("用户点击取消"); | |||||
userInfoModulesPinia.clearStorage(); | |||||
uni.navigateTo({ url: "/pages/login/index" }); | |||||
} | |||||
}, | |||||
}); | |||||
} else { | |||||
showQrCode.value = true; | |||||
} | |||||
} | } | ||||
//#endregion --------------------- | //#endregion --------------------- | ||||
@@ -289,17 +293,29 @@ onUnload(() => { | |||||
background-color: rgba(24, 25, 26, 1); | background-color: rgba(24, 25, 26, 1); | ||||
} | } | ||||
.userInfoBox { | .userInfoBox { | ||||
padding: 0rpx 20rpx; | |||||
position: relative; | |||||
padding: 0 50rpx; | |||||
width: 100%; | width: 100%; | ||||
display: flex; | display: flex; | ||||
height: 50rpx; | height: 50rpx; | ||||
line-height: 50rpx; | line-height: 50rpx; | ||||
justify-content: space-between; | |||||
align-items: center; | |||||
border-radius: 20rpx; | border-radius: 20rpx; | ||||
background-color: rgba($color: #ccc, $alpha: 0.4); | background-color: rgba($color: #ccc, $alpha: 0.4); | ||||
.createTimes { | |||||
position: absolute; | |||||
left: 50%; | |||||
transform: translateX(-50%); | |||||
} | |||||
.loginOut { | .loginOut { | ||||
color: #ff4f00; | |||||
text-decoration: underline; | |||||
position: absolute; | |||||
right: 20rpx; | |||||
height: 80%; | |||||
line-height: 160%; | |||||
background-color: #ff4f00; | |||||
color: #ffffff; | |||||
padding: 0 15rpx; | |||||
border-radius: 20rpx; | |||||
} | } | ||||
} | } | ||||
// 轮播图 | // 轮播图 | ||||
@@ -461,6 +477,7 @@ onUnload(() => { | |||||
} | } | ||||
z-index: 9; | z-index: 9; | ||||
} | } | ||||
.overlay { | .overlay { | ||||
.content { | .content { | ||||
width: 100%; | width: 100%; | ||||
@@ -472,21 +489,21 @@ onUnload(() => { | |||||
.imageBox { | .imageBox { | ||||
position: relative; | position: relative; | ||||
margin-top: 200rpx; | margin-top: 200rpx; | ||||
width: 500rpx; | |||||
height: 500rpx; | |||||
width: 300rpx; | |||||
height: 300rpx; | |||||
border-radius: 30rpx; | border-radius: 30rpx; | ||||
background-color: #fff; | background-color: #fff; | ||||
.mask { | .mask { | ||||
position: absolute; | position: absolute; | ||||
width: 500rpx; | |||||
height: 500rpx; | |||||
width: 100%; | |||||
height: 100%; | |||||
border-radius: 30rpx; | border-radius: 30rpx; | ||||
background-color: rgba($color: #000000, $alpha: 0.7); | background-color: rgba($color: #000000, $alpha: 0.7); | ||||
z-index: 2; | z-index: 2; | ||||
} | } | ||||
image { | image { | ||||
width: 500rpx; | |||||
height: 500rpx; | |||||
width: 100%; | |||||
height: 100%; | |||||
border-radius: 30rpx; | border-radius: 30rpx; | ||||
background-color: #fff; | background-color: #fff; | ||||
} | } | ||||
@@ -6,11 +6,11 @@ | |||||
</view> | </view> | ||||
<!-- 用户信息 --> | <!-- 用户信息 --> | ||||
<view class="userInfoBox" v-show="userInfoModulesPinia.token"> | <view class="userInfoBox" v-show="userInfoModulesPinia.token"> | ||||
<view class="phone">用户:{{ userInfoModulesPinia.phone }}</view> | |||||
<!-- <view class="phone">用户:{{ userInfoModulesPinia.phone }}</view> --> | |||||
<view class="createTimes" | <view class="createTimes" | ||||
>剩余次数:{{ userInfoModulesPinia.createTimes }}次</view | |||||
>剩余写真次数:{{ userInfoModulesPinia.createTimes }}</view | |||||
> | > | ||||
<view class="loginOut" @click="loginOut">退出登录</view> | |||||
<view class="loginOut" @click="loginOut">结束拍摄</view> | |||||
</view> | </view> | ||||
<!-- 展示图 --> | <!-- 展示图 --> | ||||
<view class="showImgBox imgContenBox" | <view class="showImgBox imgContenBox" | ||||
@@ -319,16 +319,19 @@ function toCamera() { | |||||
//#region 退出登录 | //#region 退出登录 | ||||
function loginOut() { | function loginOut() { | ||||
uni.showModal({ | uni.showModal({ | ||||
title: "提示", | |||||
content: "是否退出登录?", | |||||
title: "是否结束拍摄?", | |||||
content: `您还有${1}次拍摄机会`, | |||||
confirmColor: "#ff4f00", | confirmColor: "#ff4f00", | ||||
confirmText: "再来一套", | |||||
cancelText: "结束拍摄", | |||||
success: function (res) { | success: function (res) { | ||||
if (res.confirm) { | if (res.confirm) { | ||||
console.log("用户点击确定"); | console.log("用户点击确定"); | ||||
userInfoModulesPinia.clearStorage(); | |||||
uni.navigateTo({ url: "/pages/login/index" }); | |||||
uni.navigateTo({ url: "/pages/chooseStyle/index" }); | |||||
} else if (res.cancel) { | } else if (res.cancel) { | ||||
console.log("用户点击取消"); | console.log("用户点击取消"); | ||||
userInfoModulesPinia.clearStorage(); | |||||
uni.navigateTo({ url: "/pages/login/index" }); | |||||
} | } | ||||
}, | }, | ||||
}); | }); | ||||
@@ -364,17 +367,29 @@ onUnload(() => { | |||||
<style lang="scss"> | <style lang="scss"> | ||||
.userInfoBox { | .userInfoBox { | ||||
padding: 0 20rpx; | |||||
position: relative; | |||||
padding: 0 50rpx; | |||||
width: 100%; | width: 100%; | ||||
display: flex; | display: flex; | ||||
height: 50rpx; | height: 50rpx; | ||||
line-height: 50rpx; | line-height: 50rpx; | ||||
justify-content: space-between; | |||||
align-items: center; | |||||
border-radius: 20rpx; | border-radius: 20rpx; | ||||
background-color: rgba($color: #ccc, $alpha: 0.4); | background-color: rgba($color: #ccc, $alpha: 0.4); | ||||
.createTimes { | |||||
position: absolute; | |||||
left: 50%; | |||||
transform: translateX(-50%); | |||||
} | |||||
.loginOut { | .loginOut { | ||||
color: #ff4f00; | |||||
text-decoration: underline; | |||||
position: absolute; | |||||
right: 20rpx; | |||||
height: 80%; | |||||
line-height: 160%; | |||||
background-color: #ff4f00; | |||||
color: #ffffff; | |||||
padding: 0 15rpx; | |||||
border-radius: 20rpx; | |||||
} | } | ||||
} | } | ||||
.showImgBox { | .showImgBox { | ||||
@@ -422,21 +437,21 @@ onUnload(() => { | |||||
.imageBox { | .imageBox { | ||||
position: relative; | position: relative; | ||||
margin-top: 200rpx; | margin-top: 200rpx; | ||||
width: 500rpx; | |||||
height: 500rpx; | |||||
width: 300rpx; | |||||
height: 300rpx; | |||||
border-radius: 30rpx; | border-radius: 30rpx; | ||||
background-color: #fff; | background-color: #fff; | ||||
.mask { | .mask { | ||||
position: absolute; | position: absolute; | ||||
width: 500rpx; | |||||
height: 500rpx; | |||||
width: 100%; | |||||
height: 100%; | |||||
border-radius: 30rpx; | border-radius: 30rpx; | ||||
background-color: rgba($color: #000000, $alpha: 0.7); | background-color: rgba($color: #000000, $alpha: 0.7); | ||||
z-index: 2; | z-index: 2; | ||||
} | } | ||||
image { | image { | ||||
width: 500rpx; | |||||
height: 500rpx; | |||||
width: 100%; | |||||
height: 100%; | |||||
border-radius: 30rpx; | border-radius: 30rpx; | ||||
background-color: #fff; | background-color: #fff; | ||||
} | } | ||||
@@ -2,7 +2,7 @@ | |||||
<view class="page"> | <view class="page"> | ||||
<image src="../../assets/img/homeImg.jpg" mode="scaleToFill" /> | <image src="../../assets/img/homeImg.jpg" mode="scaleToFill" /> | ||||
<view class="bottomBox"> | <view class="bottomBox"> | ||||
<view class="orangeBtn" @click="toChooseStyle">开始体验</view> | |||||
<view class="orangeBtn" @click="toChooseStyle">拍摄数码写真</view> | |||||
<view class="IMEI" @click="Imei">i</view> | <view class="IMEI" @click="Imei">i</view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||