Skip to content

U
uni-pdtravel
Commit d5e12e20 authored by renjie's avatar renjie
Browse files
Options

扫脸页样式高度获取延迟处理

parent dadf240d
Hide whitespace changes
Inline Side-by-side
Showing with 232 additions and 173 deletions
pages/album/albumIndex.vue
View file @ d5e12e20
<template>
<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}" v-if="show">
<view class="nav-bar" :style="{'top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
<view class="nav-bar"
:style="{'top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
<u-icon name="arrow-left" v-if="options.index" @click="returnClick"></u-icon>
摄影/旅拍
</view>
<view class="body">
<view class="scroll-view" >
<view class="scroll-view">
<view class="item" @click="jumpToScanFaceClick">
<image class="img" src="./static/album/myAlbum.png"></image>
<text class="title">我的相片</text>
......@@ -25,12 +26,13 @@
<text class="title">我的Vlog</text>
</view>
</view>
<view class="private-custom">
<view class="title">私人定制</view>
<u-waterfall v-model="list" ref="uWaterfall">
<template v-slot:left="{leftList}">
<view class="left demo-water" v-for="(item, index) in leftList" :key="index" @click="jumpToClick(item.title)">
<view class="left demo-water" v-for="(item, index) in leftList" :key="index"
@click="jumpToClick(item.title)">
<image :src="item.image" mode="aspectFill"></image>
<!-- <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load> -->
<view class="info-box" :style="{'background-color': item.color}">
......@@ -44,10 +46,11 @@
<text class="count">{{item.count}}</text>
</view>
</view>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="demo-water" v-for="(item, index) in rightList" :key="index" @click="jumpToClick(item.title)">
<view class="demo-water" v-for="(item, index) in rightList" :key="index"
@click="jumpToClick(item.title)">
<image :src="item.image" mode="aspectFill"></image>
<!-- <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load> -->
<view class="info-box" :style="{'background-color': item.color}">
......@@ -66,20 +69,16 @@
</u-waterfall>
</view>
</view>
<view class="coupon" @click="couponTip = true">
<image
class="coupon-img"
src="@/static/img/my/coupon.png"
mode="aspectFit"
v-if="isHaveCoupon">
<image class="coupon-img" src="@/static/img/my/coupon.png" mode="aspectFit" v-if="isHaveCoupon">
</image>
<text class="coupon-price">
<text class="r-symbol">￥</text>
{{couponPrice}}
</text>
</view>
<u-mask :show="postCartTip || couponTip || showUseRule">
<view class="mask">
<view class="img-box">
......@@ -96,7 +95,7 @@
<view class="coupon-box" v-if="couponTip">
<view class="congra">恭喜您！</view>
<view class="get-coupon">
获得摄影抵用券
获得摄影抵用券
<text class="price">{{couponPrice}}</text>元
</view>
<image class="my-card" src="./static/album/myCard.png" mode="aspectFit"></image>
......@@ -123,7 +122,7 @@
<u-button type="primary" shape="circle" @click="closeMask">知道了</u-button>
</view>
</u-mask>
</view>
</template>
......@@ -134,70 +133,71 @@ import UMask from '@/uview-ui/components/u-mask/u-mask.vue'
export default {
components: {
UWaterfall,
ULazyLoad,
UWaterfall,
ULazyLoad,
UMask
},
data() {
return {
postCartTip: false,//明信片领取提示
couponTip: false,//券领取提示
showUseRule: false,//使用规则提示
postCartTip: false, //明信片领取提示
couponTip: false, //券领取提示
showUseRule: false, //使用规则提示
statusBarHeight: 0,
capsule: 0,
navHeight: 0,
show: false,//是否显示首页
isHaveCoupon: false,//是否有劵
list: [
{
title: '精彩瞬间',
count: '10W+',
image: './static/album/wonderfulMoment.png',
color: '#037EFF'
},
{
title: '网红旅拍',
count: '8W+',
image: './static/album/travalphoto.png',
color: '#826847'
},
{
title: '抱枕DIY',
count: '4W+',
image: './static/album/pillow.png',
color: '#1175B4'
},
{
title: '明信片',
count: '4W+',
image: './static/album/postcard.png',
color: '#3478DC'
},
{
title: '旅游台历定制',
count: '4W+',
image: './static/album/deskCalender.png',
color: '#1A9B45'
},
{
title: '定制相册',
count: '4W+',
image: './static/album/customPic.png',
color: '#D48D46'
}
show: false, //是否显示首页
isHaveCoupon: false, //是否有劵
list: [{
title: '精彩瞬间',
count: '10W+',
image: './static/album/wonderfulMoment.png',
color: '#037EFF'
},
{
title: '网红旅拍',
count: '8W+',
image: './static/album/travalphoto.png',
color: '#826847'
},
{
title: '抱枕DIY',
count: '4W+',
image: './static/album/pillow.png',
color: '#1175B4'
},
{
title: '明信片',
count: '4W+',
image: './static/album/postcard.png',
color: '#3478DC'
},
{
title: '旅游台历定制',
count: '4W+',
image: './static/album/deskCalender.png',
color: '#1A9B45'
},
{
title: '定制相册',
count: '4W+',
image: './static/album/customPic.png',
color: '#D48D46'
}
],
rules: [],//使用规则
options: {},//路由参数
couponPrice: '',//优惠券金额
rules: [], //使用规则
options: {}, //路由参数
couponPrice: '', //优惠券金额
openid: '',
userId: '',
}
},
methods: {
returnClick() {
uni.navigateBack({delta: 1})
uni.navigateBack({
delta: 1
})
},
closeMask() {//---关闭遮罩
closeMask() { //---关闭遮罩
this.postCartTip = false
this.couponTip = false
this.showUseRule = false
......@@ -206,159 +206,169 @@ export default {
this.couponTip = false
this.showUseRule = true
},
jumpToScanFaceClick() {//---跳转扫脸页面
this.$request('wechatUser/pdFace/checkScanFace',{openid: this.openid}).then(res => {
if (res.code === '00') {
const merchantId = this.options.merchantId || 'z0015605022691a5945bbe463141668c'// 默认长江索道
if(res.data.isScanFace === 0) {//未扫脸
jumpToScanFaceClick() { //---跳转扫脸页面
this.$request('wechatUser/pdFace/checkScanFace', {
openid: this.openid
}).then(res => {
if (res.code === '00') {
const merchantId = this.options.merchantId || 'z0015605022691a5945bbe463141668c' // 默认长江索道
if (res.data.isScanFace === 0) { //未扫脸
uni.navigateTo({
url: `./getPortrait?merchantId${merchantId}`
})
}else if(res.data.isScanFace === 1) {//已扫脸
} else if (res.data.isScanFace === 1) { //已扫脸
const faceIds = JSON.stringify(res.data.faceIds)
const companyId = this.options.companyId
uni.navigateTo({
url: `./myPhotoAlbum/myPhotoAlbum?faceIds=${faceIds}&companyId=${companyId}&merchantId${merchantId}`
url: `./myPhotoAlbum/myPhotoAlbum?faceIds=${faceIds}&companyId=${companyId}&merchantId${merchantId}`
})
}
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
title: err,
icon: 'none'
})
})
},
jumptoVlog() {//---跳转到vlog页面
jumptoVlog() { //---跳转到vlog页面
uni.redirectTo({
url: '/pages/vlog/vlogIndex/vlogIndex'
url: '/pages/vlog/vlogIndex/vlogIndex'
})
},
jumpToClick(title) {
if(title === '精彩瞬间' || title === '网红旅拍') {
if (title === '精彩瞬间' || title === '网红旅拍') {
this.jumpToScanFaceClick()
}
},
judgeWhether(url, data) {//---判断是否成功的封装函数
return new Promise((resolve, reject) => {
this.$request(url, data).then(res => {
if (res.code === '00') {
resolve(res.data)
}else{
reject(false)
}
}).catch(() => {
judgeWhether(url, data) { //---判断是否成功的封装函数
return new Promise((resolve, reject) => {
this.$request(url, data).then(res => {
if (res.code === '00') {
resolve(res.data)
} else {
reject(false)
}
}).catch(() => {
reject(false)
})
})
})
},
async handleWhetherToVotePage() {//---判断是否跳转投票页面
async handleWhetherToVotePage() { //---判断是否跳转投票页面
// 1.获取调查列表
const surveyQueryData = {
pageCode: 'albumIndex',//默认前端写死
channelId: this.options.channelId//游客扫码携带的channelId或者是胖丁登录时的公司id
pageCode: 'albumIndex', //默认前端写死
channelId: this.options.channelId //游客扫码携带的channelId或者是胖丁登录时的公司id
}
const surveyList = await this.judgeWhether('scenic/market/findPageMarket', surveyQueryData)
// 2.判断商店是否在做投票活动
let surveyIds
let surveyResult = []
if(surveyList.length) {
if (surveyList.length) {
surveyIds = surveyList.map(item => item.surveyId)
surveyResult = await this.judgeWhether('scenic/albumConfig/getSurveyConfig', { surveyIds })
surveyResult = await this.judgeWhether('scenic/albumConfig/getSurveyConfig', {
surveyIds
})
}
// 3.判断用户是否已经投过票
let voteObj = {}// 用户投票信息
if(surveyResult.length) {
let voteObj = {} // 用户投票信息
if (surveyResult.length) {
// 默认保存第一个商店id
// this.options.merchantId = surveyResult[0].merchantId
const votedQueryData = {
merchantId: surveyResult[0].merchantId,
openid: uni.getStorageSync('openid')
}
voteObj = await this.judgeWhether('wechatUser/pdAlbum/checkVisitorSurvey', votedQueryData)
}
// 4.判断是否跳转投票页面
if(voteObj.alreadySurvey === 0) {// 未投过票
if (voteObj.alreadySurvey === 0) { // 未投过票
uni.navigateTo({
url: `./chooseFavorite?surveyConfig=${JSON.stringify(surveyResult)}`
url: `./chooseFavorite?surveyConfig=${JSON.stringify(surveyResult)}`
})
}else if(voteObj.alreadySurvey === 1) {// 已投票
} else if (voteObj.alreadySurvey === 1) { // 已投票
this.show = true
}
},
findPageMarketFun(){//---获取优惠券
var data = {
pageCode: 'albumIndex',
marketingStatus: 1,
openid: this.openid,
userId: this.userId
}
this.$request('scenic/market/findPageMarket',data).then((res)=>{
if(res.code === '00'){
this.couponIsUse()
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
findPageMarketFun() { //---获取优惠券
var data = {
pageCode: 'albumIndex',
marketingStatus: 1,
openid: this.openid,
userId: this.userId
}
this.$request('scenic/market/findPageMarket', data).then((res) => {
if (res.code === '00') {
this.couponIsUse()
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
couponIsUse() {//---判断是否有劵
this.$request('wechatUser/myPage/getUserCouponList',{openid: this.openid}).then(res => {
if (res.code === '00') {
couponIsUse() { //---判断是否有劵
this.$request('wechatUser/myPage/getUserCouponList', {
openid: this.openid
}).then(res => {
if (res.code === '00') {
res.data.forEach(item => {
if(item.useRange === 11 && item.couponStatus === 1) {
if (item.useRange === 11 && item.couponStatus === 1) {
this.isHaveCoupon = true
this.couponPrice = item.deductPrice
// 处理使用规则数据结构
let ruleContents = item.couponRule ? item.couponRule.split(';') : []
ruleContents = ruleContents.map(value => {
return {value}
return {
value
}
})
this.rules.push({
ruleName: '规则说明',
contents: ruleContents
ruleName: '规则说明',
contents: ruleContents
})
let elseContents = item.couponRuleRemind ? item.couponRuleRemind.split(';') : []
let elseContents = item.couponRuleRemind ? item.couponRuleRemind.split(
';') : []
elseContents = elseContents.map(value => {
return {value}
return {
value
}
})
this.rules.push({
ruleName: '补充说明',
contents: elseContents
ruleName: '补充说明',
contents: elseContents
})
}
})
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
uni.showToast({
title: err,
icon: 'none'
})
})
},
recordDeviceInfo() {//---记录设备信息
recordDeviceInfo() { //---记录设备信息
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
......@@ -371,28 +381,28 @@ export default {
this.findPageMarketFun()
this.recordDeviceInfo()
this.options = options
if(this.options.tip === 'true') {// 从模板选择页进入
if (this.options.tip === 'true') { // 从模板选择页进入
this.show = true
this.postCartTip = true
}else if(this.options.index == 1) {// 从vlog首页进入
} else if (this.options.index == 1) { // 从vlog首页进入
this.show = true
}else {// 扫码进入本页
} else { // 扫码进入本页
this.handleWhetherToVotePage()
}
if(uni.getStorageSync('location')) return
uni.getLocation({//获取定位
if (uni.getStorageSync('location')) return
uni.getLocation({ //获取定位
type: 'wgs84',
success: res => {
uni.setStorageSync('location', JSON.stringify(res))
uni.setStorageSync('location', JSON.stringify(res))
},
fail() {
uni.showToast({
title: '获取经纬度失败',
icon: 'none'
})
}
fail() {
uni.showToast({
title: '获取经纬度失败',
icon: 'none'
})
}
})
}
}
......@@ -404,32 +414,37 @@ export default {
padding: 0 24rpx;
background: linear-gradient(to right bottom, #c778f350, #66ddad50, #68d6de50);
z-index: 0;
&::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
background: linear-gradient(to top, #f7f7f7, #f7f7f7 80%, transparent 100%);
}
/deep/.u-mask {
display: flex;
justify-content: center;
align-items: center;
transform: scale(1);
}
.coupon {
position: fixed;
right: -30rpx;
bottom: 200rpx;
width: 180rpx;
height: 180rpx;
.coupon-img {
width: 100%;
height: 100%;
}
.coupon-price {
position: absolute;
bottom: 64rpx;
......@@ -437,18 +452,21 @@ export default {
transform: translateX(-50%);
font-size: 40rpx;
font-weight: 700;
color: #fff;
color: #fff;
}
.r-symbol {
font-size: 10rpx;
}
}
}
.nav-bar {
font-size: 36rpx;
font-weight: 700;
z-index: 9;
}
}
.scroll-view {
display: flex;
width: calc(100% + 48rpx);
......@@ -458,34 +476,40 @@ export default {
overflow-x: auto;
padding: 46rpx 0 0 24rpx;
margin-bottom: 48rpx;
&::-webkit-scrollbar {
display: none;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 24rpx;
}
.img {
width: 200rpx;
height: 136rpx;
border-radius: 16rpx;
margin-bottom: 16rpx;
box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.12);
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.12);
overflow: hidden;
}
.title {
font-size: 28rpx;
font-weight: 700;
}
}
.private-custom {
.title {
position: relative;
margin-bottom: 24rpx;
font-size: 32rpx;
font-weight: 700;
&::after {
content: '';
width: 128rpx;
......@@ -496,23 +520,28 @@ export default {
background: url('@/pages/album/static/album/private-custom.png') no-repeat;
}
}
.demo-water {
image {
border-radius: 16rpx 16rpx 0 0;
height: 458rpx;
width: 100%;
}
/deep/.u-wrap,
/deep/.u-lazy-item {
broder-radius: 16rpx 16rpx 0 0 !important;
}
}
.left.demo-water {
margin-right: 14rpx;
image {
height: 400rpx;
}
}
.info-box {
display: flex;
flex-direction: column;
......@@ -524,13 +553,16 @@ export default {
box-sizing: border-box;
border-radius: 0 0 16rpx 16rpx;
color: #fff;
.item-title {
font-size: 28rpx;
font-weight: 700;
}
.slogan {
font-size: 24rpx;
}
.img-btn {
display: flex;
justify-content: center;
......@@ -542,9 +574,11 @@ export default {
color: #333;
font-size: 22rpx;
}
.bottom {
display: flex;
justify-content: space-between;
.count {
font-size: 28rpx;
color: #ececec;
......@@ -552,20 +586,24 @@ export default {
}
}
}
.mask {
width: 504rpx;
height: 720rpx;
.img-box {
position: relative;
margin-bottom: 32rpx;
width: 100%;
height: 100%;
.close {
position: absolute;
top: -64rpx;
right: 24rpx;
color: #fff;
font-size: 40rpx;
&::after {
position: absolute;
content: '';
......@@ -577,6 +615,7 @@ export default {
border-left: 1px dotted #fff;
}
}
.bg {
position: absolute;
left: 0;
......@@ -585,11 +624,13 @@ export default {
height: 100%;
z-index: -1;
}
.my-card {
width: 85%;
height: 340rpx;
}
}
.post-card,
.coupon-box,
.rules {
......@@ -600,53 +641,66 @@ export default {
height: 100%;
overflow-y: auto;
}
.post-card {
justify-content: space-between;
font-size: 36rpx;
.thank {
font-size: 28rpx;
color: #999;
}
.tip-content {
display: flex;
flex-direction: column;
align-items: center;
}
.address {
font-size: 24rpx;
font-weight: 700;
}
}
.coupon-box {
justify-content: space-between;
font-size: 36rpx;
.congra {
font-weight: 700;
}
.price {
margin: 0 6rpx;
font-size: 64rpx;
font-weight: 700;
color: #EE520E;
}
.use-rule,
.address {
font-size: 24rpx;
}
.address {
font-weight: 700;
}
}
.rules {
padding: 50rpx 32rpx 24rpx;
.title {
font-size: 36rpx;
font-weight: 700;
margin-bottom: 48rpx;
}
.block {
font-size: 32rpx;
align-self: flex-start;
.name {
display: inline-block;
padding: 4rpx 16rpx;
......@@ -656,23 +710,28 @@ export default {
background-color: #000;
color: #fff;
}
.small-font {
display: flex;
font-size: 20rpx;
}
.small-font:not(:last-child) {
margin-bottom: 16rpx;
}
.dot {
margin-right: 10rpx;
}
}
.block:not(:last-child) {
margin-bottom: 32rpx;
}
}
/deep/.u-btn {
width: 304rpx;
}
}
</style>
\ No newline at end of file
</style>
pages/album/getPortrait.vue
View file @ d5e12e20
<template>
<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}">
<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}" v-if="statusBarHeight">
<view class="nav-bar" :style="{'height': navHeight + 'px'}"></view>
<text class="title">扫脸获取您的照片</text>
<view class="scan">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment