Skip to content

U
uni-pdtravel
Commit 58795d6b authored by 潘永坪's avatar 潘永坪
Browse files
Options

组合票开发

parent 61f8b5d0
Show whitespace changes
Inline Side-by-side
Showing with 770 additions and 698 deletions
pages.json
View file @ 58795d6b
......@@ -57,13 +57,6 @@
"enablePullDownRefresh": false
}
},
{
"path": "pages/combination/distributionCombiChoose/distributionCombiChooseNew",
"style": {
"navigationBarTitleText": "产品选择",
"enablePullDownRefresh": false
}
},
{
"path": "pages/combination/combiOrder/combiOrder",
"style": {
......
pages/combination/distributionCombiChoose/distributionCombiChooseNew.vue → pages/combination/distributionCombiChoose/distributionCombiChoose-old.vue
View file @ 58795d6b
<!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
<template>
<view class="wrap">
<scroll-view @scroll="scroll" style="height: 100%;" scroll-y>
<view class="banner">
<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
<view slot="indicator" class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
</view>
</u-swiper>
<view class="merchant-info">
<view class="merchant-name">
长江索道
</view>
<view class="merchant-info-bottom">
<view class="merchant-bottom-left">
<view>营业中</view>
<view>08:00-22:00</view>
</view>
<view class="merchant-bottom-right">
<view class="merchant-address">
重庆市渝中区新华路
</view>
<view class="merchant-nav">
<view class="merchant-bg">
<image src="@/static/img/combination/nav.png" style="width: 28rpx;height: 28rpx;"></image>
</view>
<view>导航</view>
</view>
<view class="merchant-phone">
<view class="merchant-bg">
<image src="@/static/img/combination/phone.png" style="width: 28rpx;height: 28rpx;"></image>
</view>
<view>电话</view>
</view>
</view>
</view>
</view>
</view>
<view class="middle" :style="{height:middleHeight+'px'}">
<view class="middle-left">
<view class="merchant-tab" v-for="(item,index) in scenicList" :key="index" @click="merchantTabChange(index)" :class='{on:merchantIndex==index}'>
{{item.name}}
</view>
</view>
<scroll-view @scroll="scroll" :style="{height:middleHeight+'px'}" :scroll-into-view="toView" scroll-y>
<view class="middle-right">
<view class="middle">
<!-- <view class="tabbar" :style="tabbarObj">
<text v-for="(item, index) in tabbar" :key="index" @click="tabbarChange(index)" :class="{ on: active == index }">
{{ item }}
</text>
</view> -->
<swiper :current="active" @animationfinish="animationfinish" class="swiper-box" :style="{ height: swiperHeight + 'px' }">
<swiper-item class="swiper-item">
<checkbox-group @change="checkboxChange" class="checkbox-box">
<view class="merchantlist" :id="'merchant'+index" v-for="(item, index) in scenicList" :key="index">
<view class="merchantlist-title" @click="clikDetail(item.id)">
<view class="merchantlist-name">
<view class="merchant" v-for="(item, index) in scenicList" :key="index">
<view class="merchant-title" @click="clikDetail(item.id)">
<view class="title-left">
<text>{{ item.name }}</text>
<template v-if="item.couponVoList && item.couponVoList.length > 0">
<image src="@/static/img/scenic/coupon.png"></image>
<text class="merchantlist-coupon"> 劵惠 </text>
<text class="title-coupon"> 劵惠 </text>
</template>
</view>
<view v-if="showDistance" class="merchantlist-detail">
<view v-if="showDistance" class="title-right">
距您{{ item.distance ? parseFloat((item.distance / 1000).toFixed(2)) : 0 }}km
<u-icon name="arrow-right" style="margin-left: 4rpx;" size='26' color='#B4B4B4'></u-icon>
</view>
......@@ -72,34 +45,43 @@
:checked="items.ifChecked"
/>
</view>
<view class="product-right">
<view class="product-name">
<text>{{ items.name }}</text>
<text class="product-status" v-if="items.status == 2">{{ items.statusName }}</text>
</view>
<view class="product-rule">
<text>随买随用</text>
<template v-if="items.productRefundRuleVo">
<view class="product-price">
<view style="font-size: 24rpx;display: flex;">
<text class="product-rule" v-if="items.productRefundRuleVo">
<!-- 索道写死 -->
<!-- <text v-if="item.id=='z0015605022691a5945bbe463141668c'">
有条件退
</text>
<template v-else>
<text v-if="items.productRefundRuleVo.refundType == 0">不可退</text>
<text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text>
<text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text>
</template>
<text> 无需取票 </text>
</view>
<view class="product-price">
<view style="display: flex;">
</template> -->
<text v-if="items.productRefundRuleVo.refundType == 0">不可退</text>
<text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text>
<text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text>
</text>
<text class="product-rule"> 无需取票 </text>
<text @click.stop="showBuyKnow(items)">购买须知</text>
<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
</view>
<view class="product-sell">
<text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }}
<view>
<text class="product-orange"> ¥{{ items.originalPrice }} </text>
<text class="product-sell"> <text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }} </text>
</view>
</view>
</view>
</view>
</label>
<!-- <view class="product-more" v-if="index > 0 && item.productList.length > 2">
<view class="product-more" v-if="index > 0 && item.productList.length > 2">
<view v-if="item.productListCopy.length != item.productList.length" @click="showMoreProduct(item)">
更多
<u-icon name="arrow-down" size='24' color='#B4B4B4'></u-icon>
......@@ -109,12 +91,63 @@
收起
<u-icon name="arrow-up" size='24' color='#B4B4B4'></u-icon>
</view>
</view> -->
</view>
</view>
</checkbox-group>
<u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty>
<!-- <u-empty text="空空如也..." mode="list" v-if="scenicList.length == 0" width="320" height="320"></u-empty> -->
</swiper-item>
<!-- <swiper-item class="swiper-item">
<u-waterfall v-model="albumList" class="waterfall" style="padding-top: 8rpx;">
<template v-slot:left="{leftList}">
<view v-for="(item, index) in leftList" :key="index" class="album-left" @click="goAlbum(index)">
<view class="album-list-top">
<image :src="item.image" mode="widthFix"></image>
</view>
<view class="album-list-bottom" :style="{'background': item.color}">
<view>{{item.title}}</view>
<view>快来定制吧</view>
<view>
<view class="album-btn">
点击定制
<u-icon name="arrow-right" style="margin-left: 4rpx;"></u-icon>
</view>
<text class="count">{{item.count}}</text>
</view>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view v-for="(item, index) in rightList" :key="index" class="album-right" @click="goAlbum(index)">
<view class="album-list-top">
<image :src="item.image" mode="widthFix"></image>
</view>
<view class="album-list-bottom" :style="{'background': item.color}">
<view>{{item.title}}</view>
<view>快来定制吧</view>
<view>
<view class="album-btn">
点击定制
<u-icon name="arrow-right" style="margin-left: 4rpx;"></u-icon>
</view>
<text class="count">{{item.count}}</text>
</view>
</scroll-view>
</view>
</view>
</template>
</u-waterfall>
</swiper-item>
<swiper-item class="swiper-item">
<u-empty text="空空如也..." mode="list" width="320" height="320"></u-empty>
</swiper-item>
<swiper-item class="swiper-item">
<u-empty text="空空如也..." mode="list" width="320" height="320"></u-empty>
</swiper-item> -->
</swiper>
<u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty>
</view>
<view class="bottom">
<view class="bottom-left" @click="showCustomer()">
......@@ -126,6 +159,7 @@
组合购更优惠
<text class="bottom-three"></text>
</view>
<view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }">
<text style="margin-right: 10rpx;"> 明细 </text>
<u-icon name="arrow-up" size="32"></u-icon>
......@@ -149,6 +183,7 @@
<!-- 模态框 -->
<u-modal :show="showModal" @confirm="chooseConfirm" @cancel="chooseCancel" title="提示" content="是否更改产品" show-cancel-button="true">
</u-modal>
</scroll-view>
<image class="suodaoImg" v-if="showSuodaoImg" src="https://lx.pangdly.com/img/cjsdFirst.50a2e63.jpg"></image>
<!-- 系统无法访问时弹窗 -->
<u-popup :show="showTip" :round="20">
......@@ -188,6 +223,9 @@ export default {
groupId: '', //组合Id
groupChannelId: '', //组合渠道Id
channelId:'',//渠道Id
// tabbar:['热门景点','一日游','摄影/旅拍','文创DIY'],//tabbar标题列表
tabbar: ['热门景点', '摄影/旅拍', '一日游'], //tabbar标题列表
active: 0, //导航栏下标
currentNum:0,//轮播图下标
imgList: [], //图片列表
scenicList:[], //景区数据
......@@ -196,10 +234,45 @@ export default {
chooseProduct: [], //选中的产品
showModal: false, //是否显示模态框
chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
merchantIndex:0,//选中的商家下标
middleHeight:0,//中间列表盒子高度
heightArr:[],//元素高度数组
toView:'',//点击导航滚动到某个元素
swiperHeight: 0 ,//swiper高度
tabbarObj:'',
albumList: [{
title: '精彩瞬间',
count: '10W+',
image: '../static/scenic/wonderfulMoment.png',
color: '#037EFF'
},
{
title: '网红旅拍',
count: '8W+',
image: '../static/scenic/travalphoto.png',
color: '#826847'
},
{
title: '抱枕DIY',
count: '4W+',
image: '../static/scenic/pillow.png',
color: '#1175B4'
},
{
title: '明信片',
count: '4W+',
image: '../static/scenic/postcard.png',
color: '#3478DC'
},
{
title: '旅游台历定制',
count: '4W+',
image: '../static/scenic/deskCalender.png',
color: '#1A9B45'
},
{
title: '定制相册',
count: '4W+',
image: '../static/scenic/customPic.png',
color: '#D48D46'
}
],
}
},
watch: {
......@@ -357,8 +430,7 @@ export default {
this.scenicList.unshift(item)
item.productListCopy = item.productList
} else {
// item.productListCopy = item.productList.slice(0, 2)不要更多，暂时注释
item.productListCopy = item.productList
item.productListCopy = item.productList.slice(0, 2)
}
//预订时间为当天时，当前时间大于最早预订时间显示未开售，当前时间大于最晚预订时间显示已售罄
let times = new Date().Format('hh:mm:ss')
......@@ -383,35 +455,7 @@ export default {
})
})
this.$nextTick(() => {
let bannerHeight=0
uni.getSystemInfo({
success:(info)=> {
let windowHeight=info.windowHeight
//获取元素都用 uni.createSelectorQuery()，不要用变量代替，不然会循环。
uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
//获取中间盒子的高度
if(data){
bannerHeight=data.height
this.middleHeight=windowHeight-bannerHeight
}
}).exec()
//不要这样 多个的时候就会循环 varquery = uni.createSelectorQuery()
for(let i=0;i<this.scenicList.length;i++){
uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => {
//获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
if(data){
if(i==0){
this.heightArr.push(data.height)
}else{
this.heightArr.push(data.height+this.heightArr[i-1])
}
}
}).exec()
}
}
})
this.countSwiper()
})
} else {
uni.showToast({
......@@ -469,32 +513,33 @@ export default {
}
})
},
//---商家下标切换
merchantTabChange(index){
this.merchantIndex=index
this.toView='merchant'+index
},
//---展示明细弹窗
showDetail() {
this.$refs.detail.showPop = true
},
//---页面滚动事件
scroll(e) {
setTimeout(()=>{
//100是自己定义的一个值，根据这个值来控制该元素距离盒子下方的距离
let scrollTop=e.detail.scrollTop
this.heightArr.forEach((item,i)=>{
if(i==0){
if(0<=scrollTop&&scrollTop<item){
this.merchantIndex=i
}
if(e.detail.scrollTop>200){
//固定导航栏
this.tabbarObj='top:0;position:fixed;border-radius:0'
}else{
if(this.heightArr[i-1]<=scrollTop&&scrollTop<item){
this.merchantIndex=i
this.tabbarObj='top:-40rpx;position:relative;border-radius:16rpx;'
}
},
//---导航栏切换
tabbarChange(index) {
this.active = index
if(index==0){
this.countSwiper()
}
})
},100)
if(index==1){
this.countSwiper('waterfall')
}
},
//---swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current
this.active = current
},
//---展示客服组件
showCustomer() {
......@@ -511,15 +556,29 @@ export default {
this.initDetail(merchantId)
},
//计算swiper高度
countSwiper(label){
let labels=label||'checkbox-box'
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this)
query.select(`.${labels}`).boundingClientRect(data => {
if(data){
this.swiperHeight=data.height+20
}
}).exec()
})
},
//---展示更多产品
showMoreProduct(item) {
item.productListCopy = item.productList
this.$forceUpdate()
this.countSwiper()
},
//---收起产品
retractProduct(item) {
item.productListCopy = item.productList.slice(0, 2)
this.$forceUpdate()
this.countSwiper()
},
//---多选框变化
checkboxChange(e) {
......@@ -639,7 +698,36 @@ export default {
})
}
}
},
//---跳转影集页面
goAlbum(index){
if(index==0){
let data={
openid: uni.getStorageSync('openid')||''
}
this.$request('wechatUser/pdFace/checkScanFace',data).then(res => {
if (res.code === '00') {
let merchantId = this.merchantId || 'z0015605022691a5945bbe463141668c' // 默认长江索道
if (res.data.isScanFace == 0) { //未扫脸
uni.navigateTo({
url:`/pages/album/getPortrait?merchantId=${merchantId}`
})
} else if (res.data.isScanFace == 1) { //已扫脸
let faceIds = JSON.stringify(res.data.faceIds)
let companyId = this.companyId
uni.navigateTo({
url: `/pages/album/myPhotoAlbum/myPhotoAlbum?faceIds=${faceIds}&companyId=${companyId}&merchantId${merchantId}`
})
}
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
}
},
}
}
</script>
......@@ -647,129 +735,75 @@ export default {
<style lang="scss" scoped>
.wrap {
height: 100%;
display: flex;
flex-direction: column;
background: #f7f7f7;
}
// 商家部分
.merchant-info{
background: #ffffff;
border-radius: 24rpx 24rpx 0 0;
padding: 20rpx;
.middle {
padding: 0 24rpx 100rpx 24rpx;
display: flex;
flex-direction: column;
// flex: 1;
}
.swiper-box {
// flex: 1;
position: relative;
top: -40rpx;
}
.merchant-name{
font-size: 36rpx;
font-weight: 600;
}
.merchant-info-bottom{
margin-top: 12rpx;
.tabbar {
transition:1s;
width: 100%;
left: 0;
z-index: 1;
position: relative;
top: -40rpx;
background: #fff;
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
border-radius: 16rpx;
display: flex;
}
.merchant-bottom-left{
width: 220rpx;
height: 110rpx;
margin-right: 20rpx;
padding:16rpx 20rpx;
background: #F7F8FA;
border-radius: 12rpx;
font-weight: 600;
view:first-child{
font-size: 26rpx;
}
view:last-child{
font-size: 24rpx;
margin-top: 10rpx;
justify-content: space-between;
font-size: 32rpx;
text {
padding: 24rpx 32rpx 24rpx 20rpx;
border-radius: 16rpx;
width: 33.3%;
text-align: center;
}
}
.merchant-bottom-right{
flex: 1;
display: flex;
padding: 0 20rpx;
align-items: center;
background: url('@/static/img/combination/mapbg.png') no-repeat;
.tabbar .on {
// background: url('../../../static/img/scenic/tabbar.png') no-repeat;
background: $theme;
background-size: 100% 100%;
color: #fff;
font-weight: bold;
}
.merchant-address{
flex: 1;
font-size: 26rpx;
font-weight: 600;
}
.merchant-nav{
margin: 0 36rpx;
font-size: 20rpx;
text-align: center;
}
.merchant-phone{
font-size: 20rpx;
text-align: center;
}
.merchant-bg{
width: 52rpx;
height: 52rpx;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
//中间下部分
.middle {
display: flex;
padding-bottom: 100rpx;
position: relative;
top: -40rpx;
}
.middle-left{
width: 128rpx;
margin:24rpx 24rpx 0 0;
font-size: 24rpx;
background: #ffffff;
border-radius: 0 20rpx 20rpx 0;
height: 100%;
overflow-y: auto;
}
.merchant-tab{
padding: 24rpx 16rpx;
}
.merchant-tab.on{
background: linear-gradient( 124deg, #FF9F00 0%, #FE6600 100%);
border-radius: 0px 20px 20px 0px;
color: #ffffff;
}
.middle-right{
flex: 1;
// height: 100%;
// overflow-y: auto;
margin-top: 24rpx;
}
.merchantlist {
border-radius: 20rpx;
.merchant {
border-radius: 16rpx;
background: #ffffff;
margin-top: 24rpx;
padding: 24rpx 0 0 24rpx;
}
.middle-right view.merchantlist:first-child{
margin-top: 0;
padding: 24rpx;
}
.merchantlist label{
.merchant label{
width: 100%;
}
.merchantlist label.off .product {
.merchant label.off .product {
background: #f3f3f3;
color: #999999;
}
.merchantlist label.off .product-name {
.merchant label.off .product-name {
color: #999999;
}
.merchantlist-title {
.merchant label.off .product-rule {
color: #999999;
}
.merchant-title {
display: flex;
justify-content: space-between;
align-items: center;
padding:0 24rpx 16rpx 0;
padding-bottom: 16rpx;
}
.merchantlist-name {
flex: 1;
font-size: 36rpx;
.title-left {
font-size: 32rpx;
margin-right: 10rpx;
font-weight: bold;
image {
......@@ -780,22 +814,22 @@ export default {
margin: 0 8rpx;
}
}
.merchantlist-coupon {
.title-coupon {
color: $red;
font-size: 24rpx;
}
.merchantlist-detail {
.title-right {
color: $grey;
font-size: 24rpx;
display: flex;
}
.product {
padding:24rpx 24rpx 24rpx 0;
padding:16rpx 16rpx 10rpx 16rpx;
background: #ffffff;
border-radius: 8rpx;
display: flex;
align-items: center;
border-bottom: 1px solid #f5f5f5;
margin-top: 10rpx;
}
.product.on {
background: #e2eeff;
......@@ -807,7 +841,7 @@ export default {
flex: 1;
}
.product-name {
font-size: 30rpx;
font-size: 28rpx;
font-weight: bold;
color: #191919;
display: flex;
......@@ -824,12 +858,15 @@ export default {
top: 30rpx;
right: 80rpx;
}
.product-rule{
font-size: 24rpx;
color: #999999;
margin-top: 16rpx;
.product-price {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-rule {
color: $theme;
}
.product-rule text:not(:last-child) ::after {
.product-rule::after {
display: inline-block;
content: '';
height: 22rpx;
......@@ -837,13 +874,10 @@ export default {
background: #ccc;
width: 1px;
}
.product-price{
display: flex;
margin-top: 10rpx;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
color: #999999;
.product-orange {
font-size: 20rpx;
color: $grey;
text-decoration: line-through;
}
.product-sell {
font-size: 40rpx;
......@@ -922,12 +956,57 @@ export default {
font-size: 32rpx;
width: 200rpx;
}
//摄影、旅拍
.album-left{
margin:8rpx 6rpx 0 0;
}
.album-right{
margin: 8rpx 0 0 6rpx;
}
.album-list-top image {
width: 100%;
}
.album-list-bottom{
border-radius: 0 0 16rpx 16rpx;
position: relative;
top: -4px;
padding: 20rpx 16rpx;
color: #fff;
view:first-child{
font-weight: bold;
}
view:nth-child(2){
font-size: 24rpx;
margin-top: 16rpx;
}
view:nth-child(3){
display: flex;
justify-content: space-between;
margin-top: 20rpx;
}
}
.album-btn{
display: flex;
width: 160rpx;
height: 44rpx;
background: #E1E1D9;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-size: 22rpx;
color: #333333;
align-items: center;
justify-content: center;
padding-left: 8rpx;
}
.suodaoImg{
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.swiper-item /deep/ .u-waterfall{
padding-top:8rpx;
}
.swiper-item /deep/ .u-empty{
height: 300px;
}
</style>
pages/combination/distributionCombiChoose/distributionCombiChoose.vue
View file @ 58795d6b
<!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
<template>
<view class="wrap">
<scroll-view @scroll="scroll" style="height: 100%;" scroll-y>
<view class="banner">
<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
<view slot="indicator" class="indicator-num">
......@@ -9,26 +8,64 @@
</view>
</u-swiper>
</view>
<view class="middle">
<!-- <view class="tabbar" :style="tabbarObj">
<text v-for="(item, index) in tabbar" :key="index" @click="tabbarChange(index)" :class="{ on: active == index }">
{{ item }}
</text>
</view> -->
<swiper :current="active" @animationfinish="animationfinish" class="swiper-box" :style="{ height: swiperHeight + 'px' }">
<swiper-item class="swiper-item">
<view class="middle" :style="{height:middleHeight+'px'}">
<view class="merchant-info">
<view class="merchant-name">
{{currentMerchant.name}}
</view>
<view class="merchant-info-bottom">
<view class="merchant-bottom-left">
<view>
<text v-if="showBusiness" style="color: #00B42B;">营业中</text>
<text v-if="showPauseBusiness" style="color:#F53F3F;">暂停营业</text>
</view>
<view>
{{currentMerchant.businessStart?currentMerchant.businessStart.substr(0,5):''}}-
{{currentMerchant.businessEnd?currentMerchant.businessEnd.substr(0,5):''}}
</view>
</view>
<view class="merchant-bottom-right">
<view class="merchant-address">
{{currentMerchant.address}}
</view>
<view class="merchant-nav" @click="navigation(currentMerchant)">
<view class="merchant-bg">
<image src="@/static/img/combination/nav.png" style="width: 28rpx;height: 28rpx;"></image>
</view>
<view>导航</view>
</view>
<view class="merchant-phone" @click="makePhone(currentMerchant.phone)">
<view class="merchant-bg">
<image src="@/static/img/combination/phone.png" style="width: 28rpx;height: 28rpx;"></image>
</view>
<view>电话</view>
</view>
</view>
</view>
</view>
<view class="middle-bottom">
<!-- <scroll-view :style="{height:middleHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y> -->
<view class="middle-left">
<view :id="'merchant-tab'+index" class="merchant-tab" v-for="(item,index) in scenicList" :key="index" @click="merchantTabChange(index)" :class='{on:merchantIndex==index}'>
{{item.name}}
</view>
</view>
<!-- </scroll-view> -->
<scroll-view @scroll="scroll" :style="{height:middleHeight+'px'}" :scroll-into-view="toViewRight" scroll-y>
<view class="middle-right">
<checkbox-group @change="checkboxChange" class="checkbox-box">
<view class="merchant" v-for="(item, index) in scenicList" :key="index">
<view class="merchant-title" @click="clikDetail(item.id)">
<view class="title-left">
<view class="merchantlist-wrap" :id="'merchant'+index" v-for="(item, index) in scenicList" :key="index">
<view class="merchantlist">
<view class="merchantlist-title" @click="clikDetail(item.id)">
<view class="merchantlist-name">
<text>{{ item.name }}</text>
<template v-if="item.couponVoList && item.couponVoList.length > 0">
<image src="@/static/img/scenic/coupon.png"></image>
<text class="title-coupon"> 劵惠 </text>
<text class="merchantlist-coupon"> 劵惠 </text>
</template>
</view>
<view v-if="showDistance" class="title-right">
<view v-if="showDistance" class="merchantlist-detail">
距您{{ item.distance ? parseFloat((item.distance / 1000).toFixed(2)) : 0 }}km
<u-icon name="arrow-right" style="margin-left: 4rpx;" size='26' color='#B4B4B4'></u-icon>
</view>
......@@ -45,43 +82,34 @@
:checked="items.ifChecked"
/>
</view>
<view class="product-right">
<view class="product-name">
<text>{{ items.name }}</text>
<text class="product-status" v-if="items.status == 2">{{ items.statusName }}</text>
</view>
<view class="product-price">
<view style="font-size: 24rpx;display: flex;">
<text class="product-rule" v-if="items.productRefundRuleVo">
<!-- 索道写死 -->
<!-- <text v-if="item.id=='z0015605022691a5945bbe463141668c'">
有条件退
</text>
<template v-else>
<text v-if="items.productRefundRuleVo.refundType == 0">不可退</text>
<text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text>
<text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text>
</template> -->
<view class="product-rule">
<text>随买随用</text>
<template v-if="items.productRefundRuleVo">
<text v-if="items.productRefundRuleVo.refundType == 0">不可退</text>
<text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text>
<text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text>
</text>
<text class="product-rule"> 无需取票 </text>
</template>
<text> 无需取票 </text>
</view>
<view class="product-price">
<view style="display: flex;">
<text @click.stop="showBuyKnow(items)">购买须知</text>
<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
</view>
<view>
<text class="product-orange"> ¥{{ items.originalPrice }} </text>
<text class="product-sell"> <text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }} </text>
<view class="product-sell">
<text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }}
</view>
</view>
</view>
</view>
</label>
<view class="product-more" v-if="index > 0 && item.productList.length > 2">
</view>
<!-- <view class="product-more" v-if="index > 0 && item.productList.length > 2">
<view v-if="item.productListCopy.length != item.productList.length" @click="showMoreProduct(item)">
更多
<u-icon name="arrow-down" size='24' color='#B4B4B4'></u-icon>
......@@ -91,63 +119,17 @@
收起
<u-icon name="arrow-up" size='24' color='#B4B4B4'></u-icon>
</view>
</view>
</view> -->
</view>
</checkbox-group>
<!-- <u-empty text="空空如也..." mode="list" v-if="scenicList.length == 0" width="320" height="320"></u-empty> -->
</swiper-item>
<!-- <swiper-item class="swiper-item">
<u-waterfall v-model="albumList" class="waterfall" style="padding-top: 8rpx;">
<template v-slot:left="{leftList}">
<view v-for="(item, index) in leftList" :key="index" class="album-left" @click="goAlbum(index)">
<view class="album-list-top">
<image :src="item.image" mode="widthFix"></image>
</view>
<view class="album-list-bottom" :style="{'background': item.color}">
<view>{{item.title}}</view>
<view>快来定制吧</view>
<view>
<view class="album-btn">
点击定制
<u-icon name="arrow-right" style="margin-left: 4rpx;"></u-icon>
</view>
<text class="count">{{item.count}}</text>
</view>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view v-for="(item, index) in rightList" :key="index" class="album-right" @click="goAlbum(index)">
<view class="album-list-top">
<image :src="item.image" mode="widthFix"></image>
</view>
<view class="album-list-bottom" :style="{'background': item.color}">
<view>{{item.title}}</view>
<view>快来定制吧</view>
<view>
<view class="album-btn">
点击定制
<u-icon name="arrow-right" style="margin-left: 4rpx;"></u-icon>
</view>
<text class="count">{{item.count}}</text>
<view class="no-more">
已经到底啦
</view>
<!-- <u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty> -->
</view>
</scroll-view>
</view>
</template>
</u-waterfall>
</swiper-item>
<swiper-item class="swiper-item">
<u-empty text="空空如也..." mode="list" width="320" height="320"></u-empty>
</swiper-item>
<swiper-item class="swiper-item">
<u-empty text="空空如也..." mode="list" width="320" height="320"></u-empty>
</swiper-item> -->
</swiper>
<u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty>
</view>
<view class="bottom">
<view class="bottom-left" @click="showCustomer()">
......@@ -159,17 +141,16 @@
组合购更优惠
<text class="bottom-three"></text>
</view>
<view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }">
<text style="margin-right: 10rpx;"> 明细 </text>
<u-icon name="arrow-up" size="32"></u-icon>
<text style="margin-right: 10rpx;">已选产品 </text>
<text class="bottom-number">
{{ chooseProduct.length }}
</text>
<u-icon name="arrow-up" size="32"></u-icon>
</view>
</view>
<view class="bottom-right">
<text class="btn" @click="goFillorder()">去预定</text>
<text class="bottom-btn" @click="goFillorder()">去预定</text>
</view>
</view>
<!-- 客服组件 -->
......@@ -183,7 +164,6 @@
<!-- 模态框 -->
<u-modal :show="showModal" @confirm="chooseConfirm" @cancel="chooseCancel" title="提示" content="是否更改产品" show-cancel-button="true">
</u-modal>
</scroll-view>
<image class="suodaoImg" v-if="showSuodaoImg" src="https://lx.pangdly.com/img/cjsdFirst.50a2e63.jpg"></image>
<!-- 系统无法访问时弹窗 -->
<u-popup :show="showTip" :round="20">
......@@ -215,6 +195,7 @@ export default {
},
data() {
return {
currentMerchant:'',//当前入口商家信息
showTip:false,//系统调不通或者崩了跳出弹窗
detailData:'',//详情数据
showSuodaoImg:false,//索道耳麦图片是否显示隐藏
......@@ -223,9 +204,6 @@ export default {
groupId: '', //组合Id
groupChannelId: '', //组合渠道Id
channelId:'',//渠道Id
// tabbar:['热门景点','一日游','摄影/旅拍','文创DIY'],//tabbar标题列表
tabbar: ['热门景点', '摄影/旅拍', '一日游'], //tabbar标题列表
active: 0, //导航栏下标
currentNum:0,//轮播图下标
imgList: [], //图片列表
scenicList:[], //景区数据
......@@ -234,45 +212,13 @@ export default {
chooseProduct: [], //选中的产品
showModal: false, //是否显示模态框
chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
swiperHeight: 0 ,//swiper高度
tabbarObj:'',
albumList: [{
title: '精彩瞬间',
count: '10W+',
image: '../static/scenic/wonderfulMoment.png',
color: '#037EFF'
},
{
title: '网红旅拍',
count: '8W+',
image: '../static/scenic/travalphoto.png',
color: '#826847'
},
{
title: '抱枕DIY',
count: '4W+',
image: '../static/scenic/pillow.png',
color: '#1175B4'
},
{
title: '明信片',
count: '4W+',
image: '../static/scenic/postcard.png',
color: '#3478DC'
},
{
title: '旅游台历定制',
count: '4W+',
image: '../static/scenic/deskCalender.png',
color: '#1A9B45'
},
{
title: '定制相册',
count: '4W+',
image: '../static/scenic/customPic.png',
color: '#D48D46'
}
],
merchantIndex:0,//选中的商家下标
middleHeight:0,//中间列表盒子高度
heightArr:[],//元素高度数组
toViewRight:'',//右边滚动到某个元素
toViewLeft:'',//左边滚动到某个元素
showBusiness:false,//用于是否显示营业中
showPauseBusiness:false,//用于显示暂停营业
}
},
watch: {
......@@ -429,8 +375,23 @@ export default {
this.scenicList.splice(index, 1)
this.scenicList.unshift(item)
item.productListCopy = item.productList
//获取当前商家信息
this.currentMerchant=item
//判断是营业时间还是暂停营业时间
let times = new Date().Format('hh:mm:ss')
let nowNumber=parseInt(this.$commonjs.changeTime(times))||0
let startNumber=parseInt(this.$commonjs.changeTime(item.businessStart))||0
let endNumber=parseInt(this.$commonjs.changeTime(item.businessEnd))||0
if(startNumber<nowNumber<endNumber){
this.showBusiness=true
}
//由于暂停营业有多种情况，所以另外用一个字段来区分显示隐藏
if(nowNumber<startNumber||nowNumber>endNumber){
this.showPauseBusiness=true
}
} else {
item.productListCopy = item.productList.slice(0, 2)
// item.productListCopy = item.productList.slice(0, 2)不要更多，暂时注释
item.productListCopy = item.productList
}
//预订时间为当天时，当前时间大于最早预订时间显示未开售，当前时间大于最晚预订时间显示已售罄
let times = new Date().Format('hh:mm:ss')
......@@ -455,7 +416,37 @@ export default {
})
})
this.$nextTick(() => {
this.countSwiper()
//清空数组
this.heightArr=[]
let bannerHeight=0
uni.getSystemInfo({
complete:(info)=> {
let windowHeight=info.windowHeight||753
//获取元素都用 uni.createSelectorQuery()，不要用变量代替，不然会循环。
uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
//获取中间盒子的高度
if(data){
bannerHeight=data.height
this.middleHeight=windowHeight-bannerHeight
}
}).exec()
//不要这样 多个的时候就会循环 varquery = uni.createSelectorQuery()
for(let i=0;i<this.scenicList.length;i++){
uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => {
//获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
if(data){
if(i==0){
this.heightArr.push(data.height)
}else{
this.heightArr.push(data.height+this.heightArr[i-1])
}
}
}).exec()
}
}
})
})
} else {
uni.showToast({
......@@ -513,33 +504,52 @@ export default {
}
})
},
//---商家下标切换
merchantTabChange(index){
this.merchantIndex=index
this.toViewRight='merchant'+index
},
//---展示明细弹窗
showDetail() {
this.$refs.detail.showPop = true
},
//---页面滚动事件
//---右边滚动事件
scroll(e) {
if(e.detail.scrollTop>200){
//固定导航栏
this.tabbarObj='top:0;position:fixed;border-radius:0'
setTimeout(()=>{
let scrollTop=e.detail.scrollTop
//通过滚动值获取下标
this.heightArr.forEach((item,i)=>{
if(i==0){
if(0<=scrollTop&&scrollTop<item){
this.merchantIndex=i
this.toViewLeft='merchant-tab'+i
}
}else{
this.tabbarObj='top:-40rpx;position:relative;border-radius:16rpx;'
if(this.heightArr[i-1]<=scrollTop&&scrollTop<item){
this.merchantIndex=i
this.toViewLeft='merchant-tab'+i
}
},
//---导航栏切换
tabbarChange(index) {
this.active = index
if(index==0){
this.countSwiper()
}
if(index==1){
this.countSwiper('waterfall')
})
},100)
},
//---导航
navigation(merchant){
uni.openLocation({
latitude:merchant.latitude,
longitude:merchant.longitude,
name:merchant.name,
address:merchant.address,
success: function () {
}
})
},
//---swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current
this.active = current
//---拨打电话
makePhone(phoneNumber) {
uni.makePhoneCall({
phoneNumber
})
},
//---展示客服组件
showCustomer() {
......@@ -556,29 +566,15 @@ export default {
this.initDetail(merchantId)
},
//计算swiper高度
countSwiper(label){
let labels=label||'checkbox-box'
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this)
query.select(`.${labels}`).boundingClientRect(data => {
if(data){
this.swiperHeight=data.height+20
}
}).exec()
})
},
//---展示更多产品
showMoreProduct(item) {
item.productListCopy = item.productList
this.$forceUpdate()
this.countSwiper()
},
//---收起产品
retractProduct(item) {
item.productListCopy = item.productList.slice(0, 2)
this.$forceUpdate()
this.countSwiper()
},
//---多选框变化
checkboxChange(e) {
......@@ -699,35 +695,13 @@ export default {
}
}
},
//---跳转影集页面
goAlbum(index){
if(index==0){
let data={
openid: uni.getStorageSync('openid')||''
}
this.$request('wechatUser/pdFace/checkScanFace',data).then(res => {
if (res.code === '00') {
let merchantId = this.merchantId || 'z0015605022691a5945bbe463141668c' // 默认长江索道
if (res.data.isScanFace == 0) { //未扫脸
uni.navigateTo({
url:`/pages/album/getPortrait?merchantId=${merchantId}`
})
} else if (res.data.isScanFace == 1) { //已扫脸
let faceIds = JSON.stringify(res.data.faceIds)
let companyId = this.companyId
uni.navigateTo({
url: `/pages/album/myPhotoAlbum/myPhotoAlbum?faceIds=${faceIds}&companyId=${companyId}&merchantId${merchantId}`
})
}
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
onShareAppMessage(options) {
let url='pages/combination/distributionCombiChoose/distributionCombiChoose'
return {
title: '组合购买更优惠',
path: `${url}?channelId=${this.channelId}&merchantId=${this.merchantId}&groupId=${this.groupId}&groupChannelId=${this.groupChannelId}&companyId=${this.companyId}`
}
})
}
},
}
}
</script>
......@@ -735,75 +709,131 @@ export default {
<style lang="scss" scoped>
.wrap {
height: 100%;
display: flex;
flex-direction: column;
background: #f7f7f7;
}
.middle {
padding: 0 24rpx 100rpx 24rpx;
display: flex;
flex-direction: column;
// flex: 1;
}
.swiper-box {
// flex: 1;
padding-bottom: 100rpx;
position: relative;
top: -40rpx;
top: -80rpx;
}
.tabbar {
transition:1s;
width: 100%;
left: 0;
z-index: 1;
position: relative;
top: -40rpx;
background: #fff;
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
border-radius: 16rpx;
// 中间上部分
.merchant-info{
background: #ffffff;
border-radius: 24rpx 24rpx 0 0;
padding: 12rpx 20rpx 20rpx 20rpx;
}
.merchant-name{
font-size: 36rpx;
font-weight: 600;
}
.merchant-info-bottom{
margin-top: 12rpx;
display: flex;
justify-content: space-between;
font-size: 32rpx;
text {
padding: 24rpx 32rpx 24rpx 20rpx;
border-radius: 16rpx;
width: 33.3%;
text-align: center;
}
.merchant-bottom-left{
width: 220rpx;
height: 110rpx;
margin-right: 20rpx;
padding:16rpx 20rpx;
background: #F7F8FA;
border-radius: 12rpx;
font-weight: 600;
view:first-child{
font-size: 26rpx;
}
view:last-child{
font-size: 24rpx;
margin-top: 10rpx;
}
}
.tabbar .on {
// background: url('../../../static/img/scenic/tabbar.png') no-repeat;
background: $theme;
.merchant-bottom-right{
flex: 1;
display: flex;
padding: 0 20rpx;
align-items: center;
background: url('@/static/img/combination/mapbg.png') no-repeat;
background-size: 100% 100%;
color: #fff;
font-weight: bold;
}
.merchant {
border-radius: 16rpx;
.merchant-address{
flex: 1;
font-size: 26rpx;
font-weight: 600;
}
.merchant-nav{
margin: 0 36rpx;
font-size: 20rpx;
text-align: center;
}
.merchant-phone{
font-size: 20rpx;
text-align: center;
}
.merchant-bg{
width: 52rpx;
height: 52rpx;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
//中间下部分
.middle-bottom{
display: flex;
margin-top: 24rpx;
padding: 24rpx;
}
.merchant label{
.middle-left{
width: 130rpx;
flex-shrink: 0;
margin-right: 24rpx;
font-size: 24rpx;
background: #ffffff;
border-radius: 0 20rpx 20rpx 0;
text-align: center;
}
.merchant-tab{
padding: 32rpx 16rpx;
}
.merchant-tab.on{
background: linear-gradient( 124deg, #FF9F00 0%, #FE6600 100%);
border-radius: 0px 20rpx 20rpx 0px;
color: #ffffff;
}
.middle-right{
flex: 1;
}
.merchantlist-wrap{
background: #f7f7f7;
padding-top: 24rpx;
}
.merchantlist {
border-radius: 20rpx;
background: #ffffff;
margin-top: 12px;
padding: 24rpx 0 0 24rpx;
}
.middle-right view.merchantlist:first-child{
margin-top: 0;
}
.merchantlist label{
width: 100%;
}
.merchant label.off .product {
.merchantlist label.off .product {
background: #f3f3f3;
color: #999999;
}
.merchant label.off .product-name {
color: #999999;
}
.merchant label.off .product-rule {
.merchantlist label.off .product-name {
color: #999999;
}
.merchant-title {
.merchantlist-title {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
padding:0 24rpx 16rpx 0;
}
.title-left {
font-size: 32rpx;
.merchantlist-name {
flex: 1;
font-size: 36rpx;
margin-right: 10rpx;
font-weight: bold;
image {
......@@ -814,22 +844,21 @@ export default {
margin: 0 8rpx;
}
}
.title-coupon {
.merchantlist-coupon {
color: $red;
font-size: 24rpx;
}
.title-right {
.merchantlist-detail {
color: $grey;
font-size: 24rpx;
display: flex;
}
.product {
padding:16rpx 16rpx 10rpx 16rpx;
padding:24rpx 24rpx 24rpx 0;
background: #ffffff;
border-radius: 8rpx;
display: flex;
align-items: center;
margin-top: 10rpx;
border-bottom: 1px solid #f5f5f5;
}
.product.on {
background: #e2eeff;
......@@ -841,7 +870,7 @@ export default {
flex: 1;
}
.product-name {
font-size: 28rpx;
font-size: 30rpx;
font-weight: bold;
color: #191919;
display: flex;
......@@ -858,15 +887,12 @@ export default {
top: 30rpx;
right: 80rpx;
}
.product-price {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-rule {
color: $theme;
.product-rule{
font-size: 24rpx;
color: #999999;
margin-top: 16rpx;
}
.product-rule::after {
.product-rule text:not(:last-child) ::after {
display: inline-block;
content: '';
height: 22rpx;
......@@ -874,10 +900,13 @@ export default {
background: #ccc;
width: 1px;
}
.product-orange {
font-size: 20rpx;
color: $grey;
text-decoration: line-through;
.product-price{
display: flex;
margin-top: 10rpx;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
color: #999999;
}
.product-sell {
font-size: 40rpx;
......@@ -893,6 +922,13 @@ export default {
display: flex;
justify-content: center;
}
.no-more{
height: 600rpx;
margin-top:100rpx;
text-align: center;
font-size:24rpx;
color: #666;
}
.bottom {
position: fixed;
bottom: 0;
......@@ -931,7 +967,7 @@ export default {
background: #f40000;
opacity: 0.64;
position: absolute;
right: 42rpx;
right: 52rpx;
bottom: -7rpx;
transform: rotate(45deg);
}
......@@ -950,63 +986,27 @@ export default {
background: #f40000;
color: #ffffff;
font-weight: bold;
margin-left: 10rpx;
margin:0 10rpx;
}
.btn {
font-size: 32rpx;
.bottom-btn {
display: inline-block;
width: 200rpx;
}
//摄影、旅拍
.album-left{
margin:8rpx 6rpx 0 0;
}
.album-right{
margin: 8rpx 0 0 6rpx;
}
.album-list-top image {
width: 100%;
}
.album-list-bottom{
border-radius: 0 0 16rpx 16rpx;
position: relative;
top: -4px;
padding: 20rpx 16rpx;
color: #fff;
view:first-child{
height: 80rpx;
background: linear-gradient( 119deg, #FFA000 0%, #FE6600 100%);
border-radius: 40rpx;
font-size: 32rpx;
font-weight: bold;
}
view:nth-child(2){
font-size: 24rpx;
margin-top: 16rpx;
}
view:nth-child(3){
display: flex;
justify-content: space-between;
margin-top: 20rpx;
}
}
.album-btn{
display: flex;
width: 160rpx;
height: 44rpx;
background: #E1E1D9;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-size: 22rpx;
color: #333333;
align-items: center;
justify-content: center;
padding-left: 8rpx;
text-align: center;
line-height: 80rpx;
color: #ffffff;
}
.suodaoImg{
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
}
.swiper-item /deep/ .u-waterfall{
padding-top:8rpx;
}
.swiper-item /deep/ .u-empty{
height: 300px;
left: 0;
top: 0;
}
</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