Skip to content

U
uni-pdtravel
Commit f8e85439 authored by qipeng's avatar qipeng
Browse files
Options

影集首页位置修改

parent 302c2134
Hide whitespace changes
Inline Side-by-side
Showing with 575 additions and 1 deletion
pages.json
View file @ f8e85439
...@@ -437,7 +437,7 @@ ...@@ -437,7 +437,7 @@
{ {
"root": "pages/album", //影集分包 "root": "pages/album", //影集分包
"pages": [{ "pages": [{
"path": "albumIndex", "path": "albumIndex/albumIndex",
"style": { "style": {
"navigationBarTitleText": "相册首页", "navigationBarTitleText": "相册首页",
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
......
pages/album/albumIndex/albumIndex.vue 0 → 100644
View file @ f8e85439
<template>
<view class="big-box" :style="{'padding-top': statusBarHeight + 'px'}" v-if="show">
<view class="nav-bar"
:style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
<u-icon name="arrow-left" color="#333" v-if="options.index" @click="returnClick"></u-icon>
摄影/旅拍
</view>
<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="2000" duration="500">
<swiper-item>
<view class="swiper-item uni-bg-red">A</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green">B</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue">C</view>
</swiper-item>
</swiper>
<view class="photo-acquire">
<view class="acquire-box acquire-boxBlue" @click="jumpToScanFaceClick">
<view class="box-title">获取相片</view>
<view class="box-text">获取拍摄相片</view>
</view>
<view class="acquire-box acquire-boxGreen">
<view class="box-title">相片DIY</view>
<view class="box-text">编辑手机相片</view>
</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)">
<image :src="item.image" mode="aspectFill"></image>
<view class="info-box" :style="{'background-color': item.color}">
<view class="item-title">{{item.title}}</view>
<view class="slogan">快来定制吧</view>
<view class="bottom">
<view class="img-btn">
点击定制
<u-icon name="arrow-right"></u-icon>
</view>
<text class="count">{{item.count}}</text>
</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)">
<image :src="item.image" mode="aspectFill"></image>
<view class="info-box" :style="{'background-color': item.color}">
<view class="item-title">{{item.title}}</view>
<view class="slogan">快来定制吧</view>
<view class="bottom">
<view class="img-btn">
点击定制
<u-icon name="arrow-right"></u-icon>
</view>
<text class="count">{{item.count}}</text>
</view>
</view>
</view>
</template>
</u-waterfall>
</view>
</view>
</template>
<script>
export default {
data() {
return {
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'
}
],
rules: [], //使用规则
options: {}, //路由参数
couponPrice: '', //优惠券金额
openid: '',
userId: '',
}
},
methods: {
returnClick() {
uni.navigateBack({
delta: 1
})
},
closeMask() { //---关闭遮罩
this.couponTip = false
this.showUseRule = false
},
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) { //已扫脸
const faceIds = JSON.stringify(res.data.faceIds)
const companyId = this.options.companyId
uni.navigateTo({
url: `./myPhotoAlbum/myPhotoAlbum?faceIds=${faceIds}&companyId=${companyId}&merchantId=${merchantId}`
})
}
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
})
},
jumptoVlog() { //---跳转到vlog页面
uni.redirectTo({
url: '/pages/vlog/vlogIndex/vlogIndex'
})
},
jumpToClick(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(() => {
reject(false)
})
})
},
async handleWhetherToVotePage() { //---判断是否跳转投票页面
try{
// 1.获取调查列表id
const surveyQueryData = {
pageCode: 'albumIndex', //默认前端写死
channelId: this.options.channelId //游客扫码携带的channelId
}
const surveyList = await this.judgeWhether('scenic/market/findPageMarket', surveyQueryData)
// 2.判断商店是否在做投票活动，获取模板
let surveyIds
let surveyResult = []
if (surveyList.length) {
surveyIds = surveyList.map(item => item.surveyId)
surveyResult = await this.judgeWhether('scenic/albumConfig/getSurveyConfig', {
surveyIds
})
}else {// 调查模板为空则直接展示首页
this.show = true
this.couponIsUse()
return
}
// 3.判断用户是否已经投过票
let voteObj = {} // 用户投票信息
if (surveyResult.length) {
const votedQueryData = {
merchantId: surveyResult[0].merchantId,
openid: uni.getStorageSync('openid')
}
voteObj = await this.judgeWhether('wechatUser/pdAlbum/checkVisitorSurvey', votedQueryData)
}else {
this.show = true
this.couponIsUse()
return
}
// 4.判断是否跳转投票页面
if (voteObj.alreadySurvey === 0) { // 未投过票
uni.navigateTo({
url: `./chooseFavorite?surveyConfig=${JSON.stringify(surveyResult)}`
})
} else if (voteObj.alreadySurvey === 1) { // 已投票
this.show = true
this.couponIsUse()
}
}catch(e){
this.show = true
this.couponIsUse()
console.log(e)
}
},
getCoupon() { //---获取优惠券
var data = {
pageCode: 'albumIndex',
marketingStatus: 1,
openid: this.openid,
userId: this.userId
}
this.$request('scenic/market/findPageMarket', data).then((res) => {
if (res.code === '00') {
if(res.data.length) {
this.couponTip = true
}
} else if(res.code === '04') {
this.isHaveCoupon = false
}else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
couponIsUse() { //---判断是否有劵
this.$request('wechatUser/myPage/getUserCouponList', {
openid: this.openid
}).then(res => {
if (res.code === '00') {
const albumCoupon = res.data.filter(item => item.useRange === 11 && item.couponStatus === 1) // 过滤 相册的劵
if(!albumCoupon.length) return
const firstItem = albumCoupon[0]
this.isHaveCoupon = true
this.couponPrice = firstItem.deductPrice
// 处理使用规则数据结构
this.handleDataStructure(firstItem.couponRule, '规则说明')
this.handleDataStructure(firstItem.couponRuleRemind, '补充说明')
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
})
},
handleDataStructure(str, title) { //---处理使用规则数据结构
let ruleContents = str ? str.split(';') : []
ruleContents = ruleContents.map(value => {
return {
value
}
})
this.rules.push({
ruleName: title,
contents: ruleContents
})
},
recordDeviceInfo() { //---记录设备信息
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
}
},
onLoad(options) {
this.$commonjs.getCompanyId(options)
this.openid = uni.getStorageSync('openid')
this.userId = uni.getStorageSync('userId')
this.recordDeviceInfo()
this.options = options
if (this.options.template === 'true') { // 从模板选择页进入
this.show = true
this.couponTip = true
}else if (this.options.channelId) { // 扫码进入本页
this.handleWhetherToVotePage()
} else if (this.options.index == 1) { // 从vlog首页进入
this.show = true
this.couponIsUse()
}
if (uni.getStorageSync('location')) return
uni.getLocation({ //获取定位
type: 'wgs84',
success: res => {
uni.setStorageSync('location', JSON.stringify(res))
},
fail() {
console.log('获取经纬度失败')
}
})
}
}
</script>
<style lang="scss" scoped>
.big-box {
position: relative;
padding: 0;
//background: linear-gradient(to right bottom, #c778f350, #66ddad50, #68d6de50);
// background: #F7F8FA;
z-index: 0;
&::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
// background: linear-gradient(to top, #f7f7f7, #f7f7f7 80%, transparent 100%);
}
/deep/.u-transition {
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;
left: 50%;
transform: translateX(-50%);
font-size: 40rpx;
font-weight: 700;
color: #fff;
}
.r-symbol {
font-size: 10rpx;
}
}
}
.nav-bar {
font-size: 36rpx;
font-weight: 700;
padding: 0 24rpx 0 24rpx;
z-index: 10;
}
.swiper {
width: 750rpx;
height: 520rpx;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.swiper-item {
display: block;
height: 520rpx;
line-height: 520rpx;
text-align: center;
background-color: red;
}
.swiper-list {
margin-top: 40rpx;
margin-bottom: 0;
}
.uni-common-mt {
margin-top: 60rpx;
position: relative;
}
.info {
position: absolute;
right: 20rpx;
}
.uni-padding-wrap {
width: 550rpx;
padding: 0 100rpx;
}
/deep/ .wx-swiper-dots-horizontal{
bottom: 80rpx;
}
.photo-acquire{
display: flex;
justify-content: space-between;
width: 750rpx;
background-color: #fff;
border-radius: 24rpx 24rpx 0 0;
padding: 32rpx;
margin-top: 292rpx;
margin-bottom: 20rpx;
.acquire-box{
width: 334rpx;
height: 240rpx;
border-radius: 16rpx;
position: relative;
.box-title{
font-weight: bold;
font-size: 36rpx;
color: #FFFFFF;
line-height: 36rpx;
text-align: center;
margin-top: 40rpx;
margin-bottom: 12rpx;
}
.box-text{
font-weight: 500;
font-size: 24rpx;
color: #A5D3FF;
line-height: 28rpx;
text-align: center;
}
}
.acquire-boxBlue{
background: linear-gradient( 132deg, #3465F7 0%, #659EF3 100%);
}
.acquire-boxGreen{
background: linear-gradient( 132deg, #5CB18F 0%, #81D2B1 100%);
.box-text{
color: #DAFFF0;
}
}
}
.private-custom {
background-color: #fff;
padding: 40rpx 32rpx 40rpx 32rpx;
.title {
position: relative;
margin-bottom: 40rpx;
font-weight: 600;
font-size: 36rpx;
color: #191919;
line-height: 46rpx;
&::after {
content: '';
width: 128rpx;
height: 44rpx;
position: absolute;
left: -8rpx;
bottom: -24rpx;
// 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;
justify-content: space-between;
height: 170rpx;
position: relative;
top: -16rpx;
padding: 16rpx;
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;
align-items: center;
width: 160rpx;
height: 40rpx;
border-radius: 20rpx;
background-color: #E1E1D9;
color: #333;
font-size: 22rpx;
}
.bottom {
display: flex;
justify-content: space-between;
.count {
font-size: 28rpx;
color: #ececec;
}
}
}
}
</style>
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