Skip to content

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

Merge branch 'develop' of http://192.168.0.204/panyongping/uni-pdtravel into develop

parents 75dc1b15 1c0a3499
Hide whitespace changes
Inline Side-by-side
Showing with 1005 additions and 992 deletions
pages/combination/distributionCombiChoose/distributionCombiChoose-old.vue → pages/combination/combiChoose/combiChoose - 旅拍横向滚动版本.vue
View file @ d754840b
<!-- 修改这个页面时，需要同步更新combiChoose页面的代码 --> <!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
<template> <template>
<view class="wrap"> <view class="wrap">
<scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" scroll-y enhanced :bounces="false"> <scroll-view @scroll="scroll" style="height: 100%;" scroll-y>
<view class="banner" id='banner'> <view class="banner">
<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular> <u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
<view slot="indicator" class="indicator-num"> <view slot="indicator" class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text> <text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
</view> </view>
</u-swiper> </u-swiper>
</view> </view>
<view class="middle" :style="middleStyle"> <view class="middle">
<!-- 中间上面部分 --> <!-- <view class="tabbar" :style="tabbarObj">
<view class="middle-top"> <text v-for="(item, index) in tabbar" :key="index" @click="tabbarChange(index)" :class="{ on: active == index }">
<view class="merchant-name"> {{ item }}
{{currentMerchant.name||''}} </text>
</view> </view> -->
<u-transition :show="showTransition" :duration='600'> <swiper :current="active" @animationfinish="animationfinish" class="swiper-box" :style="{ height: swiperHeight + 'px' }">
<view class="merchant-info-bottom"> <swiper-item class="swiper-item">
<view class="merchant-bottom-left"> <checkbox-group @change="checkboxChange" class="checkbox-box">
<view> <view class="merchant" v-for="(item, index) in scenicList" :key="index">
<text style="color: #00B42B;">营业时间</text> <view class="merchant-title" @click="clikDetail(item.id)">
</view> <view class="title-left">
<view> <text>{{ item.name }}</text>
{{currentMerchant.businessStart?currentMerchant.businessStart.substr(0,5):''}}- <template v-if="item.couponVoList && item.couponVoList.length > 0">
{{currentMerchant.businessEnd?currentMerchant.businessEnd.substr(0,5):''}} <image src="@/static/img/scenic/coupon.png"></image>
</view> <text class="title-coupon"> 劵惠 </text>
</view> </template>
<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> <view class="title-right">
<view class="merchant-phone" @click="makePhone(currentMerchant.phone)"> <u-icon name="arrow-right" style="margin-left: 4rpx;" size='26' color='#B4B4B4'></u-icon>
<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> <label v-for="(items, a) in item.productListCopy" :key="a" :class="{ off: items.status == 2 }">
</u-transition> <view class="product" :class="{ on: items.ifChangeBg }">
</view> <view class="product-left">
<checkbox
<!-- 列表部分 --> style="transform: scale(0.8)"
<view class="middle-bottom" id="middle-bottom"> class="blue"
<!-- 左边滚动条 --> :disabled="items.status == 2"
<scroll-view class="scroll-left" :style="{height:scrollHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y> :value="JSON.stringify(items)"
<view class="middle-left"> :checked="items.ifChecked"
<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>
<!-- 右边滚动条 -->
<!-- enhanced和bounces是处理ios系统橡皮筋回弹bug -->
<scroll-view class="scroll-right" @scroll="scrollRight" :style="{height:middleHeight+'px'}" :scroll-into-view="toViewRight" scroll-y enhanced :bounces="false">
<view class="middle-right">
<checkbox-group @change="checkboxChange" class="checkbox-box">
<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="merchantlist-coupon"> 劵惠 </text>
</template>
</view>
<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>
</view> </view>
<label v-for="(items, a) in item.productListCopy" :key="a" :class="{ off: items.status == 2 }"> <view class="product-right">
<view class="product" :class="{ on: items.ifChangeBg }"> <view class="product-name">
<view class="product-left"> <text>{{ items.name }}</text>
<checkbox <text class="product-status" v-if="items.status == 2">{{ items.statusName }}</text>
style="transform: scale(0.8)" </view>
class="blue"
:disabled="items.status == 2" <view class="product-price">
:value="JSON.stringify(items)" <view style="font-size: 24rpx;display: flex;">
:checked="items.ifChecked" <text class="product-rule" v-if="items.productRefundRuleVo">
/> <!-- 索道写死 -->
</view> <!-- <text v-if="item.id=='z0015605022691a5945bbe463141668c'">
<view class="product-right"> 有条件退
<view class="product-name"> </text>
<text>{{ items.name }}</text> <template v-else>
<text class="product-status" v-if="items.status == 2">{{ items.statusName }}</text>
</view>
<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 == 0">不可退</text>
<text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text> <text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text>
<text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text> <text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text>
</template> </template> -->
<text> 无需取票 </text> <text v-if="items.productRefundRuleVo.refundType == 0">不可退</text>
</view> <text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text>
<view class="product-price"> <text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text>
<view style="display: flex;"> </text>
<text @click.stop="showBuyKnow(items)">购买须知</text> <text class="product-rule"> 无需取票 </text>
<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon> <text @click.stop="showBuyKnow(items)">购买须知</text>
</view> <u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
<view class="product-sell"> </view>
<text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }} <view>
</view> <text class="product-orange"> ¥{{ items.originalPrice }} </text>
</view> <text class="product-sell"> <text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }} </text>
</view> </view>
</view> </view>
</label> </view>
</view>
</label>
<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>
</view>
<view v-else @click="retractProduct(item)">
收起
<u-icon name="arrow-up" size='24' color='#B4B4B4'></u-icon>
</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>
<!-- <view class="product-more" v-if="index > 0 && item.productList.length > 2">
<view v-if="item.productListCopy.length != item.productList.length" @click="showMoreProduct(item)"> <view class="album-list-bottom" :style="{'background': item.color}">
更多 <view>{{item.title}}</view>
<u-icon name="arrow-down" size='24' color='#B4B4B4'></u-icon> <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>
<view v-else @click="retractProduct(item)"> </view>
收起 </template>
<u-icon name="arrow-up" size='24' color='#B4B4B4'></u-icon> <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> </view>
</view> --> </view>
</view> </view>
</checkbox-group> </template>
<view class="no-more"> </u-waterfall>
已经到底啦 </swiper-item>
</view>
<!-- <u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty> --> <swiper-item class="swiper-item">
</view> <u-empty text="空空如也..." mode="list" width="320" height="320"></u-empty>
</scroll-view> </swiper-item>
</view> <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>
<view class="bottom" :style="bottomStyle"> <view class="bottom">
<view class="bottom-left" @click="showCustomer()"> <view class="bottom-left" @click="showCustomer()">
<u-icon name="chat" size="42"></u-icon> <u-icon name="chat" size="36"></u-icon>
客服 客服
</view> </view>
<view class="bottom-right"> <view class="bottom-middle">
<view class="bottom-choose"> <view class="bottom-more" v-show="chooseProduct.length > 0">
<view class="bottom-more" v-show="chooseProduct.length > 0"> 组合购更优惠
组合购更便捷 <text class="bottom-three"></text>
<text class="bottom-triangle"></text>
</view>
<view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }">
<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>
<view class="bottom-btn" @click="goFillorder()">
去预定 <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 class="bottom-number">
{{ chooseProduct.length }}
</text>
</view> </view>
</view> </view>
<view class="bottom-right">
<text class="btn" @click="goFillorder()">去预定</text>
</view>
</view> </view>
<!-- 客服组件 -->
<customer :scenicList="scenicList" ref="customer"></customer>
<!-- 购买须知 -->
<buyKnow :buyKnowData="buyKnowData" ref="buyKnow"></buyKnow>
<!-- 产品明细 -->
<detail :chooseProduct="chooseProduct" ref="detail"></detail>
<!-- 商户详情 -->
<merchantDetail :detailData='detailData' ref='merchantDetail'></merchantDetail>
<!-- 模态框 -->
<u-modal :show="showModal" @confirm="chooseConfirm" @cancel="chooseCancel" title="提示" content="是否更改产品" show-cancel-button="true">
</u-modal>
</scroll-view> </scroll-view>
<!-- 客服组件 -->
<customer :scenicList="scenicList" ref="customer"></customer>
<!-- 购买须知 -->
<buyKnow :buyKnowData="buyKnowData" ref="buyKnow"></buyKnow>
<!-- 产品明细 -->
<detail :chooseProduct="chooseProduct" ref="detail"></detail>
<!-- 商户详情 -->
<merchantDetail :detailData='detailData' ref='merchantDetail'></merchantDetail>
<!-- 模态框 -->
<u-modal :show="showModal" @confirm="chooseConfirm" @cancel="chooseCancel" title="提示" content="是否更改产品" show-cancel-button="true">
</u-modal>
<image class="suodaoImg" v-if="showSuodaoImg" src="https://lx.pangdly.com/img/cjsdFirst.50a2e63.jpg"></image> <image class="suodaoImg" v-if="showSuodaoImg" src="https://lx.pangdly.com/img/cjsdFirst.50a2e63.jpg"></image>
<!-- 系统无法访问时弹窗 --> <!-- 系统无法访问时弹窗 -->
<u-popup :show="showTip" :round="20"> <u-popup :show="showTip" :round="20">
...@@ -189,14 +195,6 @@ ...@@ -189,14 +195,6 @@
</view> </view>
</view> </view>
</u-popup> </u-popup>
<!-- 自定义导航栏 -->
<view class="tabbar" :style="{height:topHeight+'px',opacity:tabbarOpacity}" >
<view class="tabbar-title">
<u-icon @click="goTop()" name="arrow-left" color="#333333" size="48"></u-icon>
<text>选择产品</text>
<text></text>
</view>
</view>
</view> </view>
</template> </template>
...@@ -216,7 +214,6 @@ export default { ...@@ -216,7 +214,6 @@ export default {
}, },
data() { data() {
return { return {
currentMerchant:'',//当前入口商家信息
showTip:false,//系统调不通或者崩了跳出弹窗 showTip:false,//系统调不通或者崩了跳出弹窗
detailData:'',//详情数据 detailData:'',//详情数据
showSuodaoImg:false,//索道耳麦图片是否显示隐藏 showSuodaoImg:false,//索道耳麦图片是否显示隐藏
...@@ -225,28 +222,55 @@ export default { ...@@ -225,28 +222,55 @@ export default {
groupId: '', //组合Id groupId: '', //组合Id
groupChannelId: '', //组合渠道Id groupChannelId: '', //组合渠道Id
channelId:'',//渠道Id channelId:'',//渠道Id
// tabbar:['热门景点','一日游','摄影/旅拍','文创DIY'],//tabbar标题列表
tabbar: ['热门景点', '摄影/旅拍', '一日游'], //tabbar标题列表
active: 0, //导航栏下标
currentNum:0,//轮播图下标 currentNum:0,//轮播图下标
imgList: [], //图片列表 imgList: [], //图片列表
scenicList:[], //景区数据 scenicList: [], //景区数据
showDistance: false, //定位成功显示距离
buyKnowData: '', //购买须知数据 buyKnowData: '', //购买须知数据
chooseProduct: [], //选中的产品 chooseProduct: [], //选中的产品
showModal: false, //是否显示模态框 showModal: false, //是否显示模态框
chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品 chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
merchantIndex:0,//选中的商家下标 swiperHeight: 0 ,//swiper高度
middleHeight:0,//中间列表盒子高度 tabbarObj:'',
heightArr:[],//元素高度数组 albumList: [{
toViewRight:'',//右边滚动到某个元素 title: '精彩瞬间',
toViewLeft:'',//左边滚动到某个元素 count: '10W+',
toViewFull:'',//全屏滚动到某个元素 image: '../static/scenic/wonderfulMoment.png',
showTransition:true,//控制动画显示隐藏 color: '#037EFF'
scrollHeight:0,//中间盒子滚动时的高度 },
originHeight:0,//中间盒子原本高度 {
middleTopHeight:0,//中间盒子上部分高度 title: '网红旅拍',
topHeight:0,//上面状态栏+上面导航栏总高度 count: '8W+',
tabbarOpacity:0,//导航栏透明度 image: '../static/scenic/travalphoto.png',
bottomStyle:'',//处理苹果手机的横线，单独增加一个样式 color: '#826847'
middleStyle:'',//中间盒子样式，单独增加一个样式 },
{
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: { watch: {
...@@ -306,30 +330,21 @@ export default { ...@@ -306,30 +330,21 @@ export default {
} }
}, },
onLoad(option) { onLoad(option) {
//如果是索道
if(this.merchantId=='z0015605022691a5945bbe463141668c'){
this.showSuodaoImg=true
setTimeout(() => {
this.showSuodaoImg = false
}, 2500)
}
//获取公司Id,保存到本地，支付等逻辑需要入口companyId //获取公司Id,保存到本地，支付等逻辑需要入口companyId
this.companyId=this.$commonjs.getKey(option,'companyId')||'' this.companyId=this.$commonjs.getKey(option,'companyId')||''
this.merchantId = this.$commonjs.getKey(option,'merchantId')|| '' this.merchantId = this.$commonjs.getKey(option,'merchantId')|| ''
this.channelId=this.$commonjs.getKey(option,'channelId')||'' this.channelId=this.$commonjs.getKey(option,'channelId')||''
this.groupId=this.$commonjs.getKey(option,'groupId')||'' this.groupId=this.$commonjs.getKey(option,'groupId')||''
this.groupChannelId=this.$commonjs.getKey(option,'groupChannelId')||'' this.groupChannelId=this.$commonjs.getKey(option,'groupChannelId')||''
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
let capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
this.topHeight =statusBarHeight+(capsule.top - statusBarHeight) * 2 + capsule.height//整个上部分总高度
//处理苹果手机下面有根横线，影响选中产品明细的操作
let platform = uni.getSystemInfoSync().platform
if(platform=='ios'){
this.bottomStyle='height:140rpx;padding-bottom:10rpx;'
this.middleStyle='padding-bottom:140rpx;'
}
}, },
onShow() { onShow() {
//如果是索道
if(this.merchantId=='z0015605022691a5945bbe463141668c'){
this.showSuodaoImg=true
setTimeout(() => {
this.showSuodaoImg = false
}, 2500)
}
//清空之前选中的数据以及状态 //清空之前选中的数据以及状态
this.detailData='' this.detailData=''
this.chooseProduct=[] this.chooseProduct=[]
...@@ -344,37 +359,18 @@ export default { ...@@ -344,37 +359,18 @@ export default {
let newTimestamp=uni.getStorageSync('newTimestamp')||'' let newTimestamp=uni.getStorageSync('newTimestamp')||''
let token = uni.getStorageSync('token') let token = uni.getStorageSync('token')
if (token) { if (token) {
uni.getLocation({ let latitude = ''
success: res => { let longitude = ''
let latitude = res.latitude //纬度 //判断时间戳,之前请求失败，必须大于缓存时间戳才进行请求
let longitude = res.longitude //经度 if(newTimestamp){
this.showDistance = true if(Date.now()>newTimestamp){
//判断时间戳,之前请求失败，必须大于缓存时间戳才进行请求 this.initList(latitude, longitude)
if(newTimestamp){ }else{
if(Date.now()>newTimestamp){ this.showTip=true
this.initList(latitude, longitude)
}else{
this.showTip=true
}
}else{
this.initList(latitude, longitude)
}
},
fail: res => {
let latitude = ''
let longitude = ''
//判断时间戳,之前请求失败，必须大于缓存时间戳才进行请求
if(newTimestamp){
if(Date.now()>newTimestamp){
this.initList(latitude, longitude)
}else{
this.showTip=true
}
}else{
this.initList(latitude, longitude)
}
} }
}) }else{
this.initList(latitude, longitude)
}
} }
}, },
methods: { methods: {
...@@ -411,11 +407,8 @@ export default { ...@@ -411,11 +407,8 @@ export default {
this.scenicList.splice(index, 1) this.scenicList.splice(index, 1)
this.scenicList.unshift(item) this.scenicList.unshift(item)
item.productListCopy = item.productList item.productListCopy = item.productList
//获取当前商家信息
this.currentMerchant=item
} else { } 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') let times = new Date().Format('hh:mm:ss')
...@@ -439,97 +432,9 @@ export default { ...@@ -439,97 +432,9 @@ export default {
} }
}) })
}) })
this.$nextTick(() => { this.$nextTick(() => {
//清空数组 this.countSwiper()
this.heightArr=[] })
//获取中间盒子需要滚动时的高度
// #ifdef MP-WEIXIN
uni.createSelectorQuery().in(this).select('.middle-top').boundingClientRect(data => {
if(data){
this.middleTopHeight=data.height
}
}).exec()
// #endif
// #ifdef MP-ALIPAY
uni.createSelectorQuery().select('.middle-top').boundingClientRect(data => {
if(data){
this.middleTopHeight=data.height
}
}).exec()
// #endif
//获取中间盒子原本高度
// #ifdef MP-WEIXIN
uni.createSelectorQuery().in(this).select('.middle-right').boundingClientRect(data => {
//获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
if(data){
this.originHeight=data.height
this.middleHeight=data.height
}
}).exec()
// #endif
// #ifdef MP-ALIPAY
uni.createSelectorQuery().select('.middle-right').boundingClientRect(data => {
//获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
if(data){
this.originHeight=data.height
this.middleHeight=data.height
}
}).exec()
// #endif
//不要这样 var query = uni.createSelectorQuery() query.in(this)放入循环里面会多次循环
for(let i=0;i<this.scenicList.length;i++){
// #ifdef MP-WEIXIN
uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => {
//获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
if(data){
if(i==0){
//取整，由于高度多数为小数，防止点击左边，滚动右边时出现bug
this.heightArr.push(parseInt(data.height))
}else{
this.heightArr.push(parseInt(data.height)+this.heightArr[i-1])
}
}
}).exec()
// #endif
// #ifdef MP-ALIPAY
uni.createSelectorQuery().select(`#merchant${i}`).boundingClientRect(data => {
//获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
if(data){
if(i==0){
//取整，由于高度多数为小数，防止点击左边，滚动右边时出现bug
this.heightArr.push(parseInt(data.height))
}else{
this.heightArr.push(parseInt(data.height)+this.heightArr[i-1])
}
}
}).exec()
// #endif
}
uni.getSystemInfo({
complete:(info)=> {
let windowHeight=info.windowHeight||844
// #ifdef MP-WEIXIN
uni.createSelectorQuery().in(this).select('.bottom').boundingClientRect(data => {
if(data){
this.scrollHeight=windowHeight-data.height-this.topHeight
}
}).exec()
// #endif
// #ifdef MP-ALIPAY
uni.createSelectorQuery().select('.bottom').boundingClientRect(data => {
if(data){
this.scrollHeight=windowHeight-data.height-this.topHeight
}
}).exec()
// #endif
}
})
})
} else { } else {
uni.showToast({ uni.showToast({
title: res.message, title: res.message,
...@@ -586,110 +491,33 @@ export default { ...@@ -586,110 +491,33 @@ export default {
} }
}) })
}, },
//---商家下标切换
merchantTabChange(index){
//点击左边，全屏先置顶
//为了让scrollview能检测到滚动数据的变化
this.toViewFull='aaa'
// 数据更新后，视图的更新是异步的,防止点击无效
this.$nextTick(()=>{
this.toViewFull='middle-bottom'
})
//点击左边，右边可滚动
this.merchantIndex=index
this.middleHeight=this.scrollHeight
//为了让scrollview能检测到滚动数据的变化
this.toViewRight='aaa'
// 数据更新后，视图的更新是异步的,防止第一次点击无效
this.$nextTick(()=>{
this.toViewRight='merchant'+index
})
},
//---展示明细弹窗 //---展示明细弹窗
showDetail() { showDetail() {
this.$refs.detail.showPop = true this.$refs.detail.showPop = true
}, },
//---全屏滚动 //---页面滚动事件
scrollFull(e){ scroll(e) {
setTimeout(()=>{ if(e.detail.scrollTop>200){
let height=0 //固定导航栏
let scrollTop=e.detail.scrollTop this.tabbarObj='top:0;position:fixed;border-radius:0'
let selectFun=(data)=>{ }else{
if(data){ this.tabbarObj='top:-40rpx;position:relative;border-radius:16rpx;'
//20为中间盒子的top-20 }
height=data.height+this.middleTopHeight-20-this.topHeight
let opacity=scrollTop/(data.height)
this.tabbarOpacity=parseFloat(opacity.toFixed(2))
if(scrollTop>=height){
//中间上部分固定，中间下部分可滚动，全屏不滚动
this.middleHeight=this.scrollHeight
}else{
//中间上部分不固定，中间下部分不可滚动，全屏滚动'
this.middleHeight=this.originHeight
}
}
}
// #ifdef MP-WEIXIN
uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
selectFun(data)
}).exec()
// #endif
// #ifdef MP-ALIPAY
uni.createSelectorQuery().select('.banner').boundingClientRect(data => {
selectFun(data)
}).exec()
// #endif
},5)
},
//---右边滚动事件
scrollRight(e) {
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{
if(this.heightArr[i-1]<=scrollTop&&scrollTop<item){
this.merchantIndex=i
this.toViewLeft='merchant-tab'+i
}
}
})
},5)
},
//---回到顶部
goTop(){
this.middleHeight=this.originHeight
//为了让scrollview能检测到滚动数据的变化
this.toViewFull='aaa'
this.$nextTick(()=>{
this.toViewFull='banner'
})
}, },
//---导航 //---导航栏切换
navigation(merchant){ tabbarChange(index) {
uni.openLocation({ this.active = index
latitude:merchant.latitude, if(index==0){
longitude:merchant.longitude, this.countSwiper()
name:merchant.name, }
address:merchant.address, if(index==1){
success: function () { this.countSwiper('waterfall')
}
}
})
}, },
//---拨打电话 //---swiper滑动结束，分别设置tabs和swiper的状态
makePhone(phoneNumber) { animationfinish(e) {
uni.makePhoneCall({ let current = e.detail.current
phoneNumber this.active = current
})
}, },
//---展示客服组件 //---展示客服组件
showCustomer() { showCustomer() {
...@@ -705,16 +533,30 @@ export default { ...@@ -705,16 +533,30 @@ export default {
this.$refs.merchantDetail.showPop=true this.$refs.merchantDetail.showPop=true
this.initDetail(merchantId) 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) { showMoreProduct(item) {
item.productListCopy = item.productList item.productListCopy = item.productList
this.$forceUpdate() this.$forceUpdate()
this.countSwiper()
}, },
//---收起产品 //---收起产品
retractProduct(item) { retractProduct(item) {
item.productListCopy = item.productList.slice(0, 2) item.productListCopy = item.productList.slice(0, 2)
this.$forceUpdate() this.$forceUpdate()
this.countSwiper()
}, },
//---多选框变化 //---多选框变化
checkboxChange(e) { checkboxChange(e) {
...@@ -835,13 +677,35 @@ export default { ...@@ -835,13 +677,35 @@ export default {
} }
} }
}, },
onShareAppMessage(options) { //---跳转影集页面
let url='pages/combination/distributionCombiChoose/distributionCombiChoose' goAlbum(index){
return { if(index==0){
title: '组合购更便捷', let data={
path: `${url}?channelId=${this.channelId}&merchantId=${this.merchantId}&groupId=${this.groupId}&groupChannelId=${this.groupChannelId}&companyId=${this.companyId}` 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> </script>
...@@ -849,139 +713,75 @@ export default { ...@@ -849,139 +713,75 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
height: 100%; height: 100%;
display: flex;
flex-direction: column;
background: #f7f7f7; background: #f7f7f7;
} }
.middle { .middle {
padding-bottom: 100rpx; padding: 0 24rpx 100rpx 24rpx;
display: flex;
flex-direction: column;
// flex: 1;
}
.swiper-box {
// flex: 1;
position: relative; position: relative;
top: -20px; top: -40rpx;
} }
// 中间上部分 .tabbar {
.middle-top{ transition:1s;
width: 100%; width: 100%;
background: #ffffff; left: 0;
border-radius: 24rpx 24rpx 0 0;
padding:10px;
z-index: 1; z-index: 1;
overflow: hidden; position: relative;
} top: -40rpx;
.merchant-name{ background: #fff;
font-size: 18px; box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08);
font-weight: 600; border-radius: 16rpx;
}
.merchant-info-bottom{
margin-top: 12rpx;
display: flex; display: flex;
overflow: hidden; justify-content: space-between;
} font-size: 32rpx;
.merchant-bottom-left{ text {
width: 220rpx; padding: 24rpx 32rpx 24rpx 20rpx;
height: 110rpx; border-radius: 16rpx;
margin-right: 20rpx; width: 33.3%;
padding:18rpx 20rpx; text-align: center;
background: #F7F8FA;
border-radius: 12rpx;
font-weight: 600;
view:first-child{
font-size: 26rpx;
}
view:last-child{
font-size: 24rpx;
margin-top: 6rpx;
} }
} }
.merchant-bottom-right{ .tabbar .on {
flex: 1; // background: url('../../../static/img/scenic/tabbar.png') no-repeat;
display: flex; background: $theme;
padding: 0 20rpx;
align-items: center;
background: url('@/static/img/combination/mapbg.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #fff;
font-weight: bold;
} }
.merchant-address{ .merchant {
flex: 1; border-radius: 16rpx;
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;
background: #f7f7f7;
z-index: 1;
}
.scroll-left{
flex-shrink: 0;
padding: 12px 24rpx 0 0;
box-sizing: border-box;
width: 154rpx;
}
.middle-left{
font-size: 24rpx;
background: #ffffff;
border-radius: 0 20rpx 20rpx 0;
text-align: center;
min-height: 100%;
}
.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:12px;
}
.merchantlist {
border-radius: 20rpx;
background: #ffffff; background: #ffffff;
margin-top: 12px; margin-top: 24rpx;
padding: 24rpx 0 0 24rpx; padding: 24rpx;
} }
.middle-right view.merchantlist:first-child{ .merchant label{
margin-top: 0;
}
.merchantlist label{
width: 100%; width: 100%;
} }
.merchantlist label.off .product { .merchant label.off .product {
background: #f3f3f3;
color: #999999; color: #999999;
} }
.merchantlist label.off .product-name { .merchant label.off .product-name {
color: #999999; color: #999999;
} }
.merchantlist-title { .merchant label.off .product-rule {
color: #999999;
}
.merchant-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding:0 24rpx 16rpx 0; padding-bottom: 16rpx;
} }
.merchantlist-name { .title-left {
flex: 1; font-size: 32rpx;
font-size: 36rpx;
margin-right: 10rpx; margin-right: 10rpx;
font-weight: bold; font-weight: bold;
image { image {
...@@ -992,21 +792,22 @@ export default { ...@@ -992,21 +792,22 @@ export default {
margin: 0 8rpx; margin: 0 8rpx;
} }
} }
.merchantlist-coupon { .title-coupon {
color: $red; color: $red;
font-size: 24rpx; font-size: 24rpx;
} }
.merchantlist-detail { .title-right {
color: $grey; color: $grey;
font-size: 24rpx; font-size: 24rpx;
display: flex; display: flex;
} }
.product { .product {
padding:24rpx 24rpx 24rpx 0; padding:16rpx 16rpx 10rpx 16rpx;
background: #ffffff; background: #ffffff;
border-radius: 8rpx; border-radius: 8rpx;
display: flex; display: flex;
border-bottom: 1px solid #f5f5f5; align-items: center;
margin-top: 10rpx;
} }
.product.on { .product.on {
background: #e2eeff; background: #e2eeff;
...@@ -1018,15 +819,13 @@ export default { ...@@ -1018,15 +819,13 @@ export default {
flex: 1; flex: 1;
} }
.product-name { .product-name {
font-size: 32rpx; font-size: 28rpx;
font-weight: bold; font-weight: bold;
color: #191919; color: #191919;
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.product-status { .product-status {
flex-shrink: 0;
padding: 6rpx 12rpx; padding: 6rpx 12rpx;
border: 2px solid #f40000; border: 2px solid #f40000;
color: #f40000; color: #f40000;
...@@ -1035,30 +834,28 @@ export default { ...@@ -1035,30 +834,28 @@ export default {
transform: rotate(-25deg); transform: rotate(-25deg);
position: relative; position: relative;
top: 30rpx; top: 30rpx;
right: 60rpx; right: 80rpx;
} }
.product-rule{ .product-price {
font-size: 24rpx; display: flex;
color: #999999; justify-content: space-between;
margin-top: 12rpx; align-items: center;
}
.product-rule {
color: $theme;
} }
.product-rule text:not(:last-child) ::after { .product-rule::after {
display: inline-block; display: inline-block;
content: ''; content: '';
height: 22rpx; height: 22rpx;
margin: 0 14rpx; margin: 0 10rpx;
background: #ccc; background: #ccc;
width: 1px; width: 1px;
position: relative;
top: 2rpx;
} }
.product-price{ .product-orange {
display: flex; font-size: 20rpx;
margin-top: 6rpx; color: $grey;
align-items: center; text-decoration: line-through;
justify-content: space-between;
font-size: 24rpx;
color: #999999;
} }
.product-sell { .product-sell {
font-size: 40rpx; font-size: 40rpx;
...@@ -1074,13 +871,6 @@ export default { ...@@ -1074,13 +871,6 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.no-more{
height: 600rpx;
margin-top:100rpx;
text-align: center;
font-size:24rpx;
color: #666;
}
.bottom { .bottom {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
...@@ -1098,13 +888,8 @@ export default { ...@@ -1098,13 +888,8 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-size: 24rpx;
}
.bottom-right{
display: flex;
align-items: center;
} }
.bottom-choose { .bottom-middle {
position: relative; position: relative;
padding: 0 40rpx; padding: 0 40rpx;
} }
...@@ -1117,14 +902,14 @@ export default { ...@@ -1117,14 +902,14 @@ export default {
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
color: #ffffff; color: #ffffff;
} }
.bottom-triangle{ .bottom-three {
width: 14rpx; width: 14rpx;
height: 14rpx; height: 14rpx;
display: inline-block; display: inline-block;
background: #f40000; background: #f40000;
opacity: 0.64; opacity: 0.64;
position: absolute; position: absolute;
right: 52rpx; right: 42rpx;
bottom: -7rpx; bottom: -7rpx;
transform: rotate(45deg); transform: rotate(45deg);
} }
...@@ -1143,45 +928,63 @@ export default { ...@@ -1143,45 +928,63 @@ export default {
background: #f40000; background: #f40000;
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
margin:0 10rpx; margin-left: 10rpx;
} }
.bottom-btn { .btn {
display: inline-block;
width: 200rpx;
height: 80rpx;
background: linear-gradient( 119deg, #FFA000 0%, #FE6600 100%);
border-radius: 40rpx;
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; width: 200rpx;
text-align: center; }
line-height: 80rpx; //摄影、旅拍
color: #ffffff; .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{ .suodaoImg{
position: fixed; position: fixed;
z-index: 9999; z-index: 9999;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0;
top: 0;
} }
.tabbar{ .swiper-item /deep/ .u-waterfall{
background: #fff; padding-top:8rpx;
position: fixed;
top: 0;
width: 100%;
opacity: 0;
} }
.tabbar-title{ .swiper-item /deep/ .u-empty{
position: absolute; height: 300px;
bottom: 10px;
text-align: center;
display: flex;
width: 100%;
font-size: 32rpx;
font-weight: 500;
color: #000000;
padding: 0 24rpx;
justify-content: space-between;
} }
</style> </style>
pages/combination/combiChoose/combiChoose.vue
View file @ d754840b
<!-- 修改这个页面时，需要同步更新combiChoose页面的代码 --> <!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
<template> <template>
<view class="wrap"> <view class="wrap">
<scroll-view @scroll="scroll" style="height: 100%;" scroll-y> <scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" scroll-y enhanced :bounces="false">
<view class="banner"> <view class="banner" id='banner'>
<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular> <u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
<view slot="indicator" class="indicator-num"> <view slot="indicator" class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text> <text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
</view> </view>
</u-swiper> </u-swiper>
</view> </view>
<view class="middle"> <view class="middle" :style="middleStyle">
<!-- <view class="tabbar" :style="tabbarObj"> <!-- 中间上面部分 -->
<text v-for="(item, index) in tabbar" :key="index" @click="tabbarChange(index)" :class="{ on: active == index }"> <view class="middle-top">
{{ item }} <view class="merchant-name">
</text> {{currentMerchant.name||''}}
</view> --> </view>
<swiper :current="active" @animationfinish="animationfinish" class="swiper-box" :style="{ height: swiperHeight + 'px' }"> <u-transition :show="showTransition" :duration='600'>
<swiper-item class="swiper-item"> <view class="merchant-info-bottom">
<checkbox-group @change="checkboxChange" class="checkbox-box"> <view class="merchant-bottom-left">
<view class="merchant" v-for="(item, index) in scenicList" :key="index"> <view>
<view class="merchant-title" @click="clikDetail(item.id)"> <text style="color: #00B42B;">营业时间</text>
<view class="title-left"> </view>
<text>{{ item.name }}</text> <view>
<template v-if="item.couponVoList && item.couponVoList.length > 0"> {{currentMerchant.businessStart?currentMerchant.businessStart.substr(0,5):''}}-
<image src="@/static/img/scenic/coupon.png"></image> {{currentMerchant.businessEnd?currentMerchant.businessEnd.substr(0,5):''}}
<text class="title-coupon"> 劵惠 </text> </view>
</template> </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="title-right"> </view>
<u-icon name="arrow-right" style="margin-left: 4rpx;" size='26' color='#B4B4B4'></u-icon> <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>
<label v-for="(items, a) in item.productListCopy" :key="a" :class="{ off: items.status == 2 }"> </view>
<view class="product" :class="{ on: items.ifChangeBg }"> </u-transition>
<view class="product-left"> </view>
<checkbox
style="transform: scale(0.8)" <!-- 列表部分 -->
class="blue" <view class="middle-bottom" id="middle-bottom">
:disabled="items.status == 2" <!-- 左边滚动条 -->
:value="JSON.stringify(items)" <scroll-view class="scroll-left" :style="{height:scrollHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y>
:checked="items.ifChecked" <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}'>
</view> {{item.name}}
</view>
<view class="product-right"> </view>
<view class="product-name"> </scroll-view>
<text>{{ items.name }}</text> <!-- 右边滚动条 -->
<text class="product-status" v-if="items.status == 2">{{ items.statusName }}</text> <!-- enhanced和bounces是处理ios系统橡皮筋回弹bug -->
<scroll-view class="scroll-right" @scroll="scrollRight" :style="{height:middleHeight+'px'}" :scroll-into-view="toViewRight" scroll-y enhanced :bounces="false">
<view class="middle-right">
<checkbox-group @change="checkboxChange" class="checkbox-box">
<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="merchantlist-coupon"> 劵惠 </text>
</template>
</view> </view>
<view class="product-price"> <view class="merchantlist-detail">
<view style="font-size: 24rpx;display: flex;"> <!-- <text v-if="showDistance">距您{{ item.distance ? parseFloat((item.distance / 1000).toFixed(2)) : 0 }}km</text> -->
<text class="product-rule" v-if="items.productRefundRuleVo"> <u-icon name="arrow-right" style="margin-left: 4rpx;" size='26' color='#B4B4B4'></u-icon>
<!-- 索道写死 --> </view>
<!-- <text v-if="item.id=='z0015605022691a5945bbe463141668c'"> </view>
有条件退
</text> <label v-for="(items, a) in item.productListCopy" :key="a" :class="{ off: items.status == 2 }">
<template v-else> <view class="product" :class="{ on: items.ifChangeBg }">
<view class="product-left">
<checkbox
style="transform: scale(0.8)"
class="blue"
:disabled="items.status == 2"
:value="JSON.stringify(items)"
: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">
<text v-if="items.productRefundRuleVo.refundType == 0">不可退</text> <text v-if="items.productRefundRuleVo.refundType == 0">不可退</text>
<text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text> <text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text>
<text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text> <text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text>
</template> --> </template>
<text v-if="items.productRefundRuleVo.refundType == 0">不可退</text> <text> 无需取票 </text>
<text v-if="items.productRefundRuleVo.refundType == 1">有条件退</text> </view>
<text v-if="items.productRefundRuleVo.refundType == 2">随时可退</text> <view class="product-price">
</text> <view style="display: flex;">
<text class="product-rule"> 无需取票 </text> <text @click.stop="showBuyKnow(items)">购买须知</text>
<text @click.stop="showBuyKnow(items)">购买须知</text> <u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon> </view>
</view> <view class="product-sell">
<view> <text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }}
<text class="product-orange"> ¥{{ items.originalPrice }} </text> </view>
<text class="product-sell"> <text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }} </text> </view>
</view> </view>
</view> </view>
</view> </label>
</view> </view>
</label> <!-- <view class="product-more" v-if="index > 0 && item.productList.length > 2">
<view v-if="item.productListCopy.length != item.productList.length" @click="showMoreProduct(item)">
<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>
更多
<u-icon name="arrow-down" size='24' color='#B4B4B4'></u-icon>
</view>
<view v-else @click="retractProduct(item)">
收起
<u-icon name="arrow-up" size='24' color='#B4B4B4'></u-icon>
</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>
</view> <view v-else @click="retractProduct(item)">
</template> 收起
<template v-slot:right="{rightList}"> <u-icon name="arrow-up" size='24' color='#B4B4B4'></u-icon>
<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> </view>
</view> </view> -->
</view> </view>
</template> </checkbox-group>
</u-waterfall> <view class="no-more">
</swiper-item> 已经到底啦
</view>
<swiper-item class="swiper-item"> <!-- <u-empty text="暂无数据..." mode="list" v-if="scenicList.length == 0" iconSize="160" textSize='24' textColor='#3688FF'></u-empty> -->
<u-empty text="空空如也..." mode="list" width="320" height="320"></u-empty> </view>
</swiper-item> </scroll-view>
<swiper-item class="swiper-item"> </view>
<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>
<view class="bottom"> <view class="bottom" :style="bottomStyle">
<view class="bottom-left" @click="showCustomer()"> <view class="bottom-left" @click="showCustomer()">
<u-icon name="chat" size="36"></u-icon> <u-icon name="chat" size="42"></u-icon>
客服 客服
</view> </view>
<view class="bottom-middle"> <view class="bottom-right">
<view class="bottom-more" v-show="chooseProduct.length > 0"> <view class="bottom-choose">
组合购更优惠 <view class="bottom-more" v-show="chooseProduct.length > 0">
<text class="bottom-three"></text> 组合购更便捷
<text class="bottom-triangle"></text>
</view>
<view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }">
<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>
<view class="bottom-btn" @click="goFillorder()">
<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 class="bottom-number">
{{ chooseProduct.length }}
</text>
</view> </view>
</view> </view>
<view class="bottom-right">
<text class="btn" @click="goFillorder()">去预定</text>
</view>
</view> </view>
<!-- 客服组件 -->
<customer :scenicList="scenicList" ref="customer"></customer>
<!-- 购买须知 -->
<buyKnow :buyKnowData="buyKnowData" ref="buyKnow"></buyKnow>
<!-- 产品明细 -->
<detail :chooseProduct="chooseProduct" ref="detail"></detail>
<!-- 商户详情 -->
<merchantDetail :detailData='detailData' ref='merchantDetail'></merchantDetail>
<!-- 模态框 -->
<u-modal :show="showModal" @confirm="chooseConfirm" @cancel="chooseCancel" title="提示" content="是否更改产品" show-cancel-button="true">
</u-modal>
</scroll-view> </scroll-view>
<!-- 客服组件 -->
<customer :scenicList="scenicList" ref="customer"></customer>
<!-- 购买须知 -->
<buyKnow :buyKnowData="buyKnowData" ref="buyKnow"></buyKnow>
<!-- 产品明细 -->
<detail :chooseProduct="chooseProduct" ref="detail"></detail>
<!-- 商户详情 -->
<merchantDetail :detailData='detailData' ref='merchantDetail'></merchantDetail>
<!-- 模态框 -->
<u-modal :show="showModal" @confirm="chooseConfirm" @cancel="chooseCancel" title="提示" content="是否更改产品" show-cancel-button="true">
</u-modal>
<image class="suodaoImg" v-if="showSuodaoImg" src="https://lx.pangdly.com/img/cjsdFirst.50a2e63.jpg"></image> <image class="suodaoImg" v-if="showSuodaoImg" src="https://lx.pangdly.com/img/cjsdFirst.50a2e63.jpg"></image>
<!-- 系统无法访问时弹窗 --> <!-- 系统无法访问时弹窗 -->
<u-popup :show="showTip" :round="20"> <u-popup :show="showTip" :round="20">
...@@ -195,6 +189,14 @@ ...@@ -195,6 +189,14 @@
</view> </view>
</view> </view>
</u-popup> </u-popup>
<!-- 自定义导航栏 -->
<view class="tabbar" :style="{height:topHeight+'px',opacity:tabbarOpacity}" >
<view class="tabbar-title">
<u-icon @click="goTop()" name="arrow-left" color="#333333" size="48"></u-icon>
<text>选择产品</text>
<text></text>
</view>
</view>
</view> </view>
</template> </template>
...@@ -214,6 +216,7 @@ export default { ...@@ -214,6 +216,7 @@ export default {
}, },
data() { data() {
return { return {
currentMerchant:'',//当前入口商家信息
showTip:false,//系统调不通或者崩了跳出弹窗 showTip:false,//系统调不通或者崩了跳出弹窗
detailData:'',//详情数据 detailData:'',//详情数据
showSuodaoImg:false,//索道耳麦图片是否显示隐藏 showSuodaoImg:false,//索道耳麦图片是否显示隐藏
...@@ -222,55 +225,28 @@ export default { ...@@ -222,55 +225,28 @@ export default {
groupId: '', //组合Id groupId: '', //组合Id
groupChannelId: '', //组合渠道Id groupChannelId: '', //组合渠道Id
channelId:'',//渠道Id channelId:'',//渠道Id
// tabbar:['热门景点','一日游','摄影/旅拍','文创DIY'],//tabbar标题列表
tabbar: ['热门景点', '摄影/旅拍', '一日游'], //tabbar标题列表
active: 0, //导航栏下标
currentNum:0,//轮播图下标 currentNum:0,//轮播图下标
imgList: [], //图片列表 imgList: [], //图片列表
scenicList: [], //景区数据 scenicList:[], //景区数据
showDistance: false, //定位成功显示距离
buyKnowData: '', //购买须知数据 buyKnowData: '', //购买须知数据
chooseProduct: [], //选中的产品 chooseProduct: [], //选中的产品
showModal: false, //是否显示模态框 showModal: false, //是否显示模态框
chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品 chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
swiperHeight: 0 ,//swiper高度 merchantIndex:0,//选中的商家下标
tabbarObj:'', middleHeight:0,//中间列表盒子高度
albumList: [{ heightArr:[],//元素高度数组
title: '精彩瞬间', toViewRight:'',//右边滚动到某个元素
count: '10W+', toViewLeft:'',//左边滚动到某个元素
image: '../static/scenic/wonderfulMoment.png', toViewFull:'',//全屏滚动到某个元素
color: '#037EFF' showTransition:true,//控制动画显示隐藏
}, scrollHeight:0,//中间盒子滚动时的高度
{ originHeight:0,//中间盒子原本高度
title: '网红旅拍', middleTopHeight:0,//中间盒子上部分高度
count: '8W+', topHeight:0,//上面状态栏+上面导航栏总高度
image: '../static/scenic/travalphoto.png', tabbarOpacity:0,//导航栏透明度
color: '#826847' bottomStyle:'',//处理苹果手机的横线，单独增加一个样式
}, middleStyle:'',//中间盒子样式，单独增加一个样式
{
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: { watch: {
...@@ -330,21 +306,30 @@ export default { ...@@ -330,21 +306,30 @@ export default {
} }
}, },
onLoad(option) { onLoad(option) {
//如果是索道
if(this.merchantId=='z0015605022691a5945bbe463141668c'){
this.showSuodaoImg=true
setTimeout(() => {
this.showSuodaoImg = false
}, 2500)
}
//获取公司Id,保存到本地，支付等逻辑需要入口companyId //获取公司Id,保存到本地，支付等逻辑需要入口companyId
this.companyId=this.$commonjs.getKey(option,'companyId')||'' this.companyId=this.$commonjs.getKey(option,'companyId')||''
this.merchantId = this.$commonjs.getKey(option,'merchantId')|| '' this.merchantId = this.$commonjs.getKey(option,'merchantId')|| ''
this.channelId=this.$commonjs.getKey(option,'channelId')||'' this.channelId=this.$commonjs.getKey(option,'channelId')||''
this.groupId=this.$commonjs.getKey(option,'groupId')||'' this.groupId=this.$commonjs.getKey(option,'groupId')||''
this.groupChannelId=this.$commonjs.getKey(option,'groupChannelId')||'' this.groupChannelId=this.$commonjs.getKey(option,'groupChannelId')||''
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
let capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
this.topHeight =statusBarHeight+(capsule.top - statusBarHeight) * 2 + capsule.height//整个上部分总高度
//处理苹果手机下面有根横线，影响选中产品明细的操作
let platform = uni.getSystemInfoSync().platform
if(platform=='ios'){
this.bottomStyle='height:140rpx;padding-bottom:10rpx;'
this.middleStyle='padding-bottom:140rpx;'
}
}, },
onShow() { onShow() {
//如果是索道
if(this.merchantId=='z0015605022691a5945bbe463141668c'){
this.showSuodaoImg=true
setTimeout(() => {
this.showSuodaoImg = false
}, 2500)
}
//清空之前选中的数据以及状态 //清空之前选中的数据以及状态
this.detailData='' this.detailData=''
this.chooseProduct=[] this.chooseProduct=[]
...@@ -363,14 +348,45 @@ export default { ...@@ -363,14 +348,45 @@ export default {
let longitude = '' let longitude = ''
//判断时间戳,之前请求失败，必须大于缓存时间戳才进行请求 //判断时间戳,之前请求失败，必须大于缓存时间戳才进行请求
if(newTimestamp){ if(newTimestamp){
if(Date.now()>newTimestamp){ if(Date.now()>newTimestamp){
this.initList(latitude, longitude) this.initList(latitude, longitude)
}else{ }else{
this.showTip=true this.showTip=true
} }
}else{ }else{
this.initList(latitude, longitude) this.initList(latitude, longitude)
} }
// uni.getLocation({//定位暂时注释
// success: res => {
// let latitude = res.latitude //纬度
// let longitude = res.longitude //经度
// this.showDistance = true
// //判断时间戳,之前请求失败，必须大于缓存时间戳才进行请求
// if(newTimestamp){
// if(Date.now()>newTimestamp){
// this.initList(latitude, longitude)
// }else{
// this.showTip=true
// }
// }else{
// this.initList(latitude, longitude)
// }
// },
// fail: res => {
// let latitude = ''
// let longitude = ''
// //判断时间戳,之前请求失败，必须大于缓存时间戳才进行请求
// if(newTimestamp){
// if(Date.now()>newTimestamp){
// this.initList(latitude, longitude)
// }else{
// this.showTip=true
// }
// }else{
// this.initList(latitude, longitude)
// }
// }
// })
} }
}, },
methods: { methods: {
...@@ -407,8 +423,11 @@ export default { ...@@ -407,8 +423,11 @@ export default {
this.scenicList.splice(index, 1) this.scenicList.splice(index, 1)
this.scenicList.unshift(item) this.scenicList.unshift(item)
item.productListCopy = item.productList item.productListCopy = item.productList
//获取当前商家信息
this.currentMerchant=item
} else { } 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') let times = new Date().Format('hh:mm:ss')
...@@ -432,9 +451,97 @@ export default { ...@@ -432,9 +451,97 @@ export default {
} }
}) })
}) })
this.$nextTick(() => { this.$nextTick(() => {
this.countSwiper() //清空数组
}) this.heightArr=[]
//获取中间盒子需要滚动时的高度
// #ifdef MP-WEIXIN
uni.createSelectorQuery().in(this).select('.middle-top').boundingClientRect(data => {
if(data){
this.middleTopHeight=data.height
}
}).exec()
// #endif
// #ifdef MP-ALIPAY
uni.createSelectorQuery().select('.middle-top').boundingClientRect(data => {
if(data){
this.middleTopHeight=data.height
}
}).exec()
// #endif
//获取中间盒子原本高度
// #ifdef MP-WEIXIN
uni.createSelectorQuery().in(this).select('.middle-right').boundingClientRect(data => {
//获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
if(data){
this.originHeight=data.height
this.middleHeight=data.height
}
}).exec()
// #endif
// #ifdef MP-ALIPAY
uni.createSelectorQuery().select('.middle-right').boundingClientRect(data => {
//获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
if(data){
this.originHeight=data.height
this.middleHeight=data.height
}
}).exec()
// #endif
//不要这样 var query = uni.createSelectorQuery() query.in(this)放入循环里面会多次循环
for(let i=0;i<this.scenicList.length;i++){
// #ifdef MP-WEIXIN
uni.createSelectorQuery().in(this).select(`#merchant${i}`).boundingClientRect(data => {
//获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
if(data){
if(i==0){
//取整，由于高度多数为小数，防止点击左边，滚动右边时出现bug
this.heightArr.push(parseInt(data.height))
}else{
this.heightArr.push(parseInt(data.height)+this.heightArr[i-1])
}
}
}).exec()
// #endif
// #ifdef MP-ALIPAY
uni.createSelectorQuery().select(`#merchant${i}`).boundingClientRect(data => {
//获取商家列表各个元素的高度，并且把他们前后相加添加到一个数组里面
if(data){
if(i==0){
//取整，由于高度多数为小数，防止点击左边，滚动右边时出现bug
this.heightArr.push(parseInt(data.height))
}else{
this.heightArr.push(parseInt(data.height)+this.heightArr[i-1])
}
}
}).exec()
// #endif
}
uni.getSystemInfo({
complete:(info)=> {
let windowHeight=info.windowHeight||844
// #ifdef MP-WEIXIN
uni.createSelectorQuery().in(this).select('.bottom').boundingClientRect(data => {
if(data){
this.scrollHeight=windowHeight-data.height-this.topHeight
}
}).exec()
// #endif
// #ifdef MP-ALIPAY
uni.createSelectorQuery().select('.bottom').boundingClientRect(data => {
if(data){
this.scrollHeight=windowHeight-data.height-this.topHeight
}
}).exec()
// #endif
}
})
})
} else { } else {
uni.showToast({ uni.showToast({
title: res.message, title: res.message,
...@@ -491,33 +598,111 @@ export default { ...@@ -491,33 +598,111 @@ export default {
} }
}) })
}, },
//---商家下标切换
merchantTabChange(index){
//点击左边，全屏先置顶
//为了让scrollview能检测到滚动数据的变化
this.toViewFull='aaa'
// 数据更新后，视图的更新是异步的,防止点击无效
this.$nextTick(()=>{
this.toViewFull='middle-bottom'
})
//点击左边，右边可滚动
this.merchantIndex=index
this.middleHeight=this.scrollHeight
//为了让scrollview能检测到滚动数据的变化
this.toViewRight='aaa'
// 数据更新后，视图的更新是异步的,防止第一次点击无效
this.$nextTick(()=>{
this.toViewRight='merchant'+index
})
},
//---展示明细弹窗 //---展示明细弹窗
showDetail() { showDetail() {
this.$refs.detail.showPop = true this.$refs.detail.showPop = true
}, },
//---页面滚动事件 //---全屏滚动
scroll(e) { scrollFull(e){
if(e.detail.scrollTop>200){ setTimeout(()=>{
//固定导航栏 let height=0
this.tabbarObj='top:0;position:fixed;border-radius:0' let scrollTop=e.detail.scrollTop
}else{ let selectFun=(data)=>{
this.tabbarObj='top:-40rpx;position:relative;border-radius:16rpx;' if(data){
} //20为中间盒子的top-20
height=data.height+this.middleTopHeight-20-this.topHeight
let opacity=scrollTop/(data.height)
this.tabbarOpacity=parseFloat(opacity.toFixed(2))
//下面值取整数，防止部分手机取值太多小数，出现抖动的bug
if(parseInt(scrollTop)>=parseInt(height)){
//中间上部分固定，中间下部分可滚动，全屏不滚动
this.middleHeight=this.scrollHeight
}else{
//中间上部分不固定，中间下部分不可滚动，全屏滚动'
this.middleHeight=this.originHeight
}
}
}
// #ifdef MP-WEIXIN
uni.createSelectorQuery().in(this).select('.banner').boundingClientRect(data => {
selectFun(data)
}).exec()
// #endif
// #ifdef MP-ALIPAY
uni.createSelectorQuery().select('.banner').boundingClientRect(data => {
selectFun(data)
}).exec()
// #endif
},5)
}, },
//---导航栏切换 //---右边滚动事件
tabbarChange(index) { scrollRight(e) {
this.active = index setTimeout(()=>{
if(index==0){ let scrollTop=e.detail.scrollTop
this.countSwiper() //通过滚动值获取下标
} this.heightArr.forEach((item,i)=>{
if(index==1){ if(i==0){
this.countSwiper('waterfall') if(0<=scrollTop&&scrollTop<item){
} this.merchantIndex=i
this.toViewLeft='merchant-tab'+i
}
}else{
if(this.heightArr[i-1]<=scrollTop&&scrollTop<item){
this.merchantIndex=i
this.toViewLeft='merchant-tab'+i
}
}
})
},5)
},
//---回到顶部
goTop(){
this.middleHeight=this.originHeight
//为了让scrollview能检测到滚动数据的变化
this.toViewFull='aaa'
this.$nextTick(()=>{
this.toViewFull='banner'
})
},
//---导航
navigation(merchant){
uni.openLocation({
latitude:merchant.latitude,
longitude:merchant.longitude,
name:merchant.name,
address:merchant.address,
success: function () {
}
})
}, },
//---swiper滑动结束，分别设置tabs和swiper的状态 //---拨打电话
animationfinish(e) { makePhone(phoneNumber) {
let current = e.detail.current uni.makePhoneCall({
this.active = current phoneNumber
})
}, },
//---展示客服组件 //---展示客服组件
showCustomer() { showCustomer() {
...@@ -533,30 +718,16 @@ export default { ...@@ -533,30 +718,16 @@ export default {
this.$refs.merchantDetail.showPop=true this.$refs.merchantDetail.showPop=true
this.initDetail(merchantId) 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) { showMoreProduct(item) {
item.productListCopy = item.productList item.productListCopy = item.productList
this.$forceUpdate() this.$forceUpdate()
this.countSwiper()
}, },
//---收起产品 //---收起产品
retractProduct(item) { retractProduct(item) {
item.productListCopy = item.productList.slice(0, 2) item.productListCopy = item.productList.slice(0, 2)
this.$forceUpdate() this.$forceUpdate()
this.countSwiper()
}, },
//---多选框变化 //---多选框变化
checkboxChange(e) { checkboxChange(e) {
...@@ -677,35 +848,13 @@ export default { ...@@ -677,35 +848,13 @@ export default {
} }
} }
}, },
//---跳转影集页面 onShareAppMessage(options) {
goAlbum(index){ let url='pages/combination/distributionCombiChoose/distributionCombiChoose'
if(index==0){ return {
let data={ title: '组合购更便捷',
openid: uni.getStorageSync('openid')||'' path: `${url}?channelId=${this.channelId}&merchantId=${this.merchantId}&groupId=${this.groupId}&groupChannelId=${this.groupChannelId}&companyId=${this.companyId}`
} }
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> </script>
...@@ -713,75 +862,139 @@ export default { ...@@ -713,75 +862,139 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
height: 100%; height: 100%;
display: flex;
flex-direction: column;
background: #f7f7f7; background: #f7f7f7;
} }
.middle { .middle {
padding: 0 24rpx 100rpx 24rpx; padding-bottom: 100rpx;
display: flex;
flex-direction: column;
// flex: 1;
}
.swiper-box {
// flex: 1;
position: relative; position: relative;
top: -40rpx; top: -20px;
} }
.tabbar { // 中间上部分
transition:1s; .middle-top{
width: 100%; width: 100%;
left: 0; background: #ffffff;
border-radius: 24rpx 24rpx 0 0;
padding:10px;
z-index: 1; z-index: 1;
position: relative; overflow: hidden;
top: -40rpx; }
background: #fff; .merchant-name{
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.08); font-size: 18px;
border-radius: 16rpx; font-weight: 600;
}
.merchant-info-bottom{
margin-top: 12rpx;
display: flex; display: flex;
justify-content: space-between; overflow: hidden;
font-size: 32rpx; }
text { .merchant-bottom-left{
padding: 24rpx 32rpx 24rpx 20rpx; width: 220rpx;
border-radius: 16rpx; height: 110rpx;
width: 33.3%; margin-right: 20rpx;
text-align: center; padding:18rpx 20rpx;
background: #F7F8FA;
border-radius: 12rpx;
font-weight: 600;
view:first-child{
font-size: 26rpx;
}
view:last-child{
font-size: 24rpx;
margin-top: 6rpx;
} }
} }
.tabbar .on { .merchant-bottom-right{
// background: url('../../../static/img/scenic/tabbar.png') no-repeat; flex: 1;
background: $theme; display: flex;
padding: 0 20rpx;
align-items: center;
background: url('@/static/img/combination/mapbg.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #fff;
font-weight: bold;
} }
.merchant { .merchant-address{
border-radius: 16rpx; 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; background: #ffffff;
margin-top: 24rpx; border-radius: 50%;
padding: 24rpx; display: flex;
align-items: center;
justify-content: center;
} }
.merchant label{ //中间下部分
width: 100%; .middle-bottom{
display: flex;
background: #f7f7f7;
z-index: 1;
} }
.merchant label.off .product { .scroll-left{
background: #f3f3f3; flex-shrink: 0;
color: #999999; padding: 12px 24rpx 0 0;
box-sizing: border-box;
width: 154rpx;
} }
.merchant label.off .product-name { .middle-left{
font-size: 24rpx;
background: #ffffff;
border-radius: 0 20rpx 20rpx 0;
text-align: center;
min-height: 100%;
}
.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:12px;
}
.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%;
}
.merchantlist label.off .product {
color: #999999; color: #999999;
} }
.merchant label.off .product-rule { .merchantlist label.off .product-name {
color: #999999; color: #999999;
} }
.merchant-title { .merchantlist-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-bottom: 16rpx; padding:0 24rpx 16rpx 0;
} }
.title-left { .merchantlist-name {
font-size: 32rpx; flex: 1;
font-size: 36rpx;
margin-right: 10rpx; margin-right: 10rpx;
font-weight: bold; font-weight: bold;
image { image {
...@@ -792,22 +1005,21 @@ export default { ...@@ -792,22 +1005,21 @@ export default {
margin: 0 8rpx; margin: 0 8rpx;
} }
} }
.title-coupon { .merchantlist-coupon {
color: $red; color: $red;
font-size: 24rpx; font-size: 24rpx;
} }
.title-right { .merchantlist-detail {
color: $grey; color: $grey;
font-size: 24rpx; font-size: 24rpx;
display: flex; display: flex;
} }
.product { .product {
padding:16rpx 16rpx 10rpx 16rpx; padding:24rpx 24rpx 24rpx 0;
background: #ffffff; background: #ffffff;
border-radius: 8rpx; border-radius: 8rpx;
display: flex; display: flex;
align-items: center; border-bottom: 1px solid #f5f5f5;
margin-top: 10rpx;
} }
.product.on { .product.on {
background: #e2eeff; background: #e2eeff;
...@@ -819,13 +1031,15 @@ export default { ...@@ -819,13 +1031,15 @@ export default {
flex: 1; flex: 1;
} }
.product-name { .product-name {
font-size: 28rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
color: #191919; color: #191919;
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.product-status { .product-status {
flex-shrink: 0;
padding: 6rpx 12rpx; padding: 6rpx 12rpx;
border: 2px solid #f40000; border: 2px solid #f40000;
color: #f40000; color: #f40000;
...@@ -834,28 +1048,30 @@ export default { ...@@ -834,28 +1048,30 @@ export default {
transform: rotate(-25deg); transform: rotate(-25deg);
position: relative; position: relative;
top: 30rpx; top: 30rpx;
right: 80rpx; right: 60rpx;
} }
.product-price { .product-rule{
display: flex; font-size: 24rpx;
justify-content: space-between; color: #999999;
align-items: center; margin-top: 12rpx;
}
.product-rule {
color: $theme;
} }
.product-rule::after { .product-rule text:not(:last-child) ::after {
display: inline-block; display: inline-block;
content: ''; content: '';
height: 22rpx; height: 22rpx;
margin: 0 10rpx; margin: 0 14rpx;
background: #ccc; background: #ccc;
width: 1px; width: 1px;
position: relative;
top: 2rpx;
} }
.product-orange { .product-price{
font-size: 20rpx; display: flex;
color: $grey; margin-top: 6rpx;
text-decoration: line-through; align-items: center;
justify-content: space-between;
font-size: 24rpx;
color: #999999;
} }
.product-sell { .product-sell {
font-size: 40rpx; font-size: 40rpx;
...@@ -871,6 +1087,13 @@ export default { ...@@ -871,6 +1087,13 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.no-more{
height: 600rpx;
margin-top:100rpx;
text-align: center;
font-size:24rpx;
color: #666;
}
.bottom { .bottom {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
...@@ -888,8 +1111,13 @@ export default { ...@@ -888,8 +1111,13 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-size: 24rpx;
} }
.bottom-middle { .bottom-right{
display: flex;
align-items: center;
}
.bottom-choose {
position: relative; position: relative;
padding: 0 40rpx; padding: 0 40rpx;
} }
...@@ -902,14 +1130,14 @@ export default { ...@@ -902,14 +1130,14 @@ export default {
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
color: #ffffff; color: #ffffff;
} }
.bottom-three { .bottom-triangle{
width: 14rpx; width: 14rpx;
height: 14rpx; height: 14rpx;
display: inline-block; display: inline-block;
background: #f40000; background: #f40000;
opacity: 0.64; opacity: 0.64;
position: absolute; position: absolute;
right: 42rpx; right: 52rpx;
bottom: -7rpx; bottom: -7rpx;
transform: rotate(45deg); transform: rotate(45deg);
} }
...@@ -928,63 +1156,45 @@ export default { ...@@ -928,63 +1156,45 @@ export default {
background: #f40000; background: #f40000;
color: #ffffff; color: #ffffff;
font-weight: bold; font-weight: bold;
margin-left: 10rpx; margin:0 10rpx;
} }
.btn { .bottom-btn {
font-size: 32rpx; display: inline-block;
width: 200rpx; width: 200rpx;
} height: 80rpx;
//摄影、旅拍 background: linear-gradient( 119deg, #FFA000 0%, #FE6600 100%);
.album-left{ border-radius: 40rpx;
margin:8rpx 6rpx 0 0; font-size: 32rpx;
} font-weight: bold;
.album-right{ text-align: center;
margin: 8rpx 0 0 6rpx; line-height: 80rpx;
} color: #ffffff;
.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{ .suodaoImg{
position: fixed; position: fixed;
z-index: 9999; z-index: 9999;
width: 100%; width: 100%;
height: 100%; height: 100%;
left: 0;
top: 0;
} }
.swiper-item /deep/ .u-waterfall{ .tabbar{
padding-top:8rpx; background: #fff;
position: fixed;
top: 0;
width: 100%;
opacity: 0;
} }
.swiper-item /deep/ .u-empty{ .tabbar-title{
height: 300px; position: absolute;
bottom: 10px;
text-align: center;
display: flex;
width: 100%;
font-size: 32rpx;
font-weight: 500;
color: #000000;
padding: 0 24rpx;
justify-content: space-between;
} }
</style> </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