Skip to content

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

组合票优惠券开发

parent 74371ab7
Show whitespace changes
Inline Side-by-side
Showing with 185 additions and 107 deletions
pages/combination/combiChoose/combiChoose.vue
View file @ d3d4f147
......@@ -3,13 +3,13 @@
<view class="wrap">
<scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" scroll-y enhanced :bounces="false">
<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:16px" height="400" :interval='interval' circular>
<view slot="indicator" class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgList.length }}</text>
</view>
</u-swiper>
</view>
<view class="middle" :style="middleStyle">
<view class="middle">
<!-- 中间上面部分 -->
<view class="middle-top">
<view class="merchant-name">
......@@ -50,7 +50,7 @@
<!-- 列表部分 -->
<view class="middle-bottom" id="middle-bottom">
<!-- 左边滚动条 -->
<scroll-view class="scroll-left" :style="{height:scrollHeight+'px'}" :scroll-into-view="toViewLeft" scroll-y>
<scroll-view class="scroll-left" :style="{height:scrollHeight+'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}}
......@@ -59,9 +59,9 @@
</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">
<scroll-view class="scroll-right" @scroll="scrollRight" :style="{height:rightHeight+'px'}" :scroll-into-view="toViewRight" scroll-y enhanced :bounces="false">
<view class="middle-right">
<checkbox-group @change="checkboxChange" class="checkbox-box">
<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)">
......@@ -110,7 +110,11 @@
<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
</view>
<view class="product-sell">
<text style="font-size: 28rpx">¥</text>{{ items.sellingPrice }}
<text style="font-size: 28rpx">¥</text>
<!-- 页面加载的时候，有券显示原价，没有券，或者券已领取显示售价 -->
<text v-if="showSmallCoupon">{{ items.originalPrice}}</text>
<!-- 显示售价 -->
<text v-else>{{ items.sellingPrice}}</text>
</view>
</view>
</view>
......@@ -140,7 +144,7 @@
</view>
<view class="bottom" :style="bottomStyle">
<view class="bottom">
<view class="bottom-left" @click="showCustomer()">
<u-icon name="chat" size="42"></u-icon>
客服
......@@ -174,8 +178,11 @@
<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">
<!-- 模态框1，用于是否更改产品 -->
<u-modal :show="showModal1" @confirm="chooseConfirm" @cancel="chooseCancel" title="提示" content="是否更改产品" :showCancelButton="true">
</u-modal>
<!-- 模态框2，用于联票不能组合购买 -->
<u-modal :show="showModal2" @confirm="notBuyConfirm" title="提示" content="联票产品不能进行多产品购买" >
</u-modal>
<image class="suodaoImg" v-if="showSuodaoImg" src="https://lx.pangdly.com/img/cjsdFirst.50a2e63.jpg"></image>
<!-- 系统无法访问时弹窗 -->
......@@ -190,13 +197,31 @@
</view>
</u-popup>
<!-- 自定义导航栏 -->
<view class="tabbar" :style="{height:topHeight+'px',opacity:tabbarOpacity}" >
<view class="tabbar-title">
<!--#ifdef MP-WEIXIN-->
<view class="tabbar" :style="{height:tabbarHeight+'px',opacity:tabbarOpacity,maxHeight:(topHeight+40)+'px'}" >
<view class="tabbar-title" :style="{top:(topHeight-32)+'px'}">
<u-icon @click="goTop()" name="arrow-left" color="#333333" size="48"></u-icon>
<text>选择产品</text>
<text></text>
</view>
</view>
<!-- #endif -->
<!-- 券部分 -->
<view>
<!-- 小券 -->
<image v-if="showSmallCoupon" @click="showBigCoupon=true" src="/static/img/combination/smallCoupon.png" style="position: fixed;bottom: 200rpx;right:80rpx;width:120rpx;height: 122rpx;"></image>
<!-- 大券 -->
<view v-if="showBigCoupon" @click="showBigCoupon=false,showSmallCoupon=false" style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;background:rgba(0, 0, 0, 0.5);z-index: 10;display: flex;align-items: center;">
<view style="width: 100%;">
<view style="display:flex;justify-content: center;">
<image src="/static/img/combination/bigCoupon.png" style="width: 85%;" mode="widthFix"></image>
</view>
<!-- <view style="display: flex;justify-content: center;">
<u-icon name="close-circle-fill" color="#333333" size="56"></u-icon>
</view> -->
</view>
</view>
</view>
</view>
</template>
......@@ -216,6 +241,7 @@ export default {
},
data() {
return {
interval:3000,//轮播时间
currentMerchant:'',//当前入口商家信息
showTip:false,//系统调不通或者崩了跳出弹窗
detailData:'',//详情数据
......@@ -231,22 +257,24 @@ export default {
showDistance: false, //定位成功显示距离
buyKnowData: '', //购买须知数据
chooseProduct: [], //选中的产品
showModal: false, //是否显示模态框
showModal1: false, //模态框1，用于是否更改产品
showModal2: false, //模态框2，用于联票不能组合购买
chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
merchantIndex:0,//选中的商家下标
middleHeight:0,//中间列表盒子高度
rightHeight:0,//右边列表盒子高度
heightArr:[],//元素高度数组
toViewRight:'',//右边滚动到某个元素
toViewLeft:'',//左边滚动到某个元素
toViewFull:'',//全屏滚动到某个元素
showTransition:true,//控制动画显示隐藏
scrollHeight:0,//中间盒子滚动时的高度
originHeight:0,//中间盒子原本高度
scrollHeight:0,//左边滚动条scroll-view高度
originHeight:0,//右边滚动条原本高度
middleTopHeight:0,//中间盒子上部分高度
topHeight:0,//上面状态栏+上面导航栏总高度
tabbarOpacity:0,//导航栏透明度
bottomStyle:'',//处理苹果手机的横线，单独增加一个样式
middleStyle:'',//中间盒子样式，单独增加一个样式
tabbarHeight:'',//导航栏高度
showSmallCoupon:false,//显示小券
showBigCoupon:false,//显示大券
}
},
watch: {
......@@ -255,8 +283,15 @@ export default {
handler(newValue, oldValue) {
//当选中产品时
if (newValue.length > oldValue.length) {
//找到当前选中的产品
let product = newValue[newValue.length - 1]
//一、联票不允许组合
if(this.chooseProduct.length>1){
if(this.chooseProduct.find(item=>item.ticketType==2)){
this.showModal2=true
return
}
}
//二、该产品是否支持多产品购买
let product = newValue[newValue.length - 1]//找到当前选中的产品
//商家一级
let merchant = ''
//通过产品一级找到商家一级
......@@ -275,7 +310,7 @@ export default {
if (product.isMoreBuy !== 0) {
if (number > 1) {
//显示确认弹窗
this.showModal = true
this.showModal1 = true
//当前选中的景区产品，用于确定以及取消方法取值
this.chooseMerchantProduct = product
}
......@@ -319,15 +354,15 @@ export default {
this.channelId=this.$commonjs.getKey(option,'channelId')||''
this.groupId=this.$commonjs.getKey(option,'groupId')||''
this.groupChannelId=this.$commonjs.getKey(option,'groupChannelId')||''
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
let statusBarHeight = uni.getWindowInfo().statusBarHeight||0 // 状态栏高度
let capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
if(capsule){
//防止部分手机获取不到胶囊信息时，出现页面抖动bug，加上该逻辑
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;'
}else{
this.topHeight=statusBarHeight
}
this.giveCoupon()
},
onShow() {
//清空之前选中的数据以及状态
......@@ -420,6 +455,22 @@ export default {
//获取当前景区图片,把当前景区放在第一位
if (item.id == this.merchantId) {
this.imgList = item.imgList
//视频排在图片前面
this.imgList.sort((a,b)=>{
return b.type-a.type
})
//类型转化，用于视频播放
this.imgList.forEach(item2=>{
if(item2.type==1){
//图片
item2.type='image'
}
if(item2.type==2){
//如果有视频，轮播时间改为60秒
item2.type='video'
this.interval=100*1000
}
})
this.scenicList.splice(index, 1)
this.scenicList.unshift(item)
item.productListCopy = item.productList
......@@ -473,20 +524,20 @@ export default {
//获取中间盒子原本高度
// #ifdef MP-WEIXIN
uni.createSelectorQuery().in(this).select('.middle-right').boundingClientRect(data => {
//获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
//获取右边盒子原本高度,默认右边盒子等于原本高度，滚动之后等于滚动高度
if(data){
this.originHeight=data.height
this.middleHeight=data.height
this.rightHeight=data.height
}
}).exec()
// #endif
// #ifdef MP-ALIPAY
uni.createSelectorQuery().select('.middle-right').boundingClientRect(data => {
//获取中间盒子原本高度,默认中间盒子等于原本高度，滚动之后等于滚动高度
uni.createSelectorQuery().select('.middle-right').boundingClientRect(data =>{
//获取右边盒子原本高度,默认右边盒子等于原本高度，滚动之后等于滚动高度
if(data){
this.originHeight=data.height
this.middleHeight=data.height
this.rightHeight=data.height
}
}).exec()
// #endif
......@@ -520,27 +571,9 @@ export default {
}).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
}
})
let windowHeight=uni.getWindowInfo().screenHeight||1100
//60为底部高度
this.scrollHeight=windowHeight-60-this.topHeight
})
} else {
uni.showToast({
......@@ -573,6 +606,23 @@ export default {
uni.setStorageSync('newTimestamp', newTimestamp)
})
},
//---送券
giveCoupon() {
let data = {
pageCode:'SD_GROUP',//页面码
marketingStatus: 1,//状态
userId: uni.getStorageSync('userId')||'',
openid: uni.getStorageSync('openid')||'',
companyId:this.companyId,//公司Id
}
this.$request('scenic/market/findPageMarket', data).then((res) => {
if (res.data && res.data.length > 0) {
//有券时显示券
this.showSmallCoupon=true
this.showBigCoupon=true
}
})
},
//---初始化详情
initDetail(merchantId){
let data={
......@@ -609,7 +659,7 @@ export default {
})
//点击左边，右边可滚动
this.merchantIndex=index
this.middleHeight=this.scrollHeight
this.rightHeight=this.scrollHeight
//为了让scrollview能检测到滚动数据的变化
this.toViewRight='aaa'
// 数据更新后，视图的更新是异步的,防止第一次点击无效
......@@ -624,22 +674,31 @@ export default {
//---全屏滚动
scrollFull(e){
setTimeout(()=>{
//由于下面三个值可能在这个这个方法之后生成，故加上这个判断条件
if(this.middleTopHeight&&this.scrollHeight&&this.originHeight){
let height=0
let scrollTop=e.detail.scrollTop
let selectFun=(data)=>{
if(data){
//20为中间盒子的top-20
height=data.height+this.middleTopHeight-20-this.topHeight
let opacity=scrollTop/(data.height)
//10为中间盒子的top-10,50是一个安全值，防止个别手机出现抖动，并可以防止滑动时会出现往下抖动一次的效果
height=data.height+this.middleTopHeight-10-this.topHeight-50
let opacity=scrollTop/150
this.tabbarOpacity=parseFloat(opacity.toFixed(2))
if(this.tabbarOpacity<0.1){
//出现小数时，防止有残影
this.tabbarOpacity0
}
//下面值取整数，防止部分手机取值太多小数，出现抖动的bug
if(parseInt(scrollTop)>=parseInt(height)){
//中间上部分固定，中间下部分可滚动，全屏不滚动
this.middleHeight=this.scrollHeight
this.rightHeight=this.scrollHeight
//动态改变导航栏高度
uni.createSelectorQuery().in(this).select('.middle-top').boundingClientRect(data => {
this.tabbarHeight=data.bottom
}).exec()
}else{
//中间上部分不固定，中间下部分不可滚动，全屏滚动'
this.middleHeight=this.originHeight
this.rightHeight=this.originHeight
}
}
}
......@@ -653,6 +712,7 @@ export default {
selectFun(data)
}).exec()
// #endif
}
},5)
},
......@@ -679,7 +739,7 @@ export default {
},
//---回到顶部
goTop(){
this.middleHeight=this.originHeight
this.rightHeight=this.originHeight
//为了让scrollview能检测到滚动数据的变化
this.toViewFull='aaa'
this.$nextTick(()=>{
......@@ -731,6 +791,10 @@ export default {
},
//---多选框变化
checkboxChange(e) {
//如果有券没有领取，直接显示券，并领取
if(this.showSmallCoupon){
this.showBigCoupon=true
}
let value = e.detail.value
let arr = []
value.forEach(item => {
......@@ -749,7 +813,6 @@ export default {
//由于支付宝小程序会出现bug,所以只在微信小程序里面执行该代码
item2.ifChecked = true
//#endif
}
})
})
......@@ -775,7 +838,7 @@ export default {
this.chooseProduct = this.chooseProduct.filter(function (val) {
return val
})
this.showModal = false
this.showModal1 = false
},
//---不支持多选产品，选择取消事件
chooseCancel() {
......@@ -794,9 +857,24 @@ export default {
this.chooseProduct.splice(index, 1)
}
})
this.showModal = false
this.showModal1 = false
},
//---联票产品不支持组合购买
notBuyConfirm(){
//获取最新的一个产品，删除最新的产品
let product=this.chooseProduct[this.chooseProduct.length-1]
//取消选中状态和选中背景颜色
this.scenicList.forEach(item2 => {
item2.productList.forEach(item3 => {
if (product.id == item3.id) {
item3.ifChecked = false
item3.ifChangeBg = false
}
})
})
this.chooseProduct.splice(this.chooseProduct.length-1,1)
this.showModal2=false
},
//---跳转填写订单页面
goFillorder() {
for (let i = 0; i < this.chooseProduct.length; i++) {
......@@ -865,9 +943,9 @@ export default {
background: #f7f7f7;
}
.middle {
padding-bottom: 100rpx;
padding-bottom:60px;
position: relative;
top: -20px;
top: -10px;
}
// 中间上部分
.middle-top{
......@@ -1098,14 +1176,14 @@ export default {
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
height: 60px;
background: #fff;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16);
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
padding: 0 32rpx 10rpx 32rpx;
}
.bottom-left{
display: flex;
......@@ -1184,10 +1262,10 @@ export default {
top: 0;
width: 100%;
opacity: 0;
z-index: 10;
}
.tabbar-title{
position: absolute;
bottom: 10px;
text-align: center;
display: flex;
width: 100%;
......
pages/combination/distributionCombiChoose/distributionCombiChoose.vue
View file @ d3d4f147
......@@ -214,7 +214,7 @@
<view v-if="showBigCoupon" @click="showBigCoupon=false,showSmallCoupon=false" style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;background:rgba(0, 0, 0, 0.5);z-index: 10;display: flex;align-items: center;">
<view style="width: 100%;">
<view style="display:flex;justify-content: center;">
<image src="/static/img/combination/coupon.gif" style="width: 85%;" mode="widthFix"></image>
<image src="/static/img/combination/bigCoupon.png" style="width: 85%;" mode="widthFix"></image>
</view>
<!-- <view style="display: flex;justify-content: center;">
<u-icon name="close-circle-fill" color="#333333" size="56"></u-icon>
......
pages/indexs/merchantListIndex/merchantListIndex.vue
View file @ d3d4f147
......@@ -457,7 +457,7 @@ export default {
width: 465rpx;
height:155rpx;
padding: 10rpx 20rpx;
background: url('/static/img/coupon/redEnvelope.png') no-repeat;
background: url('/static/img/coupon/coupon-new.png') no-repeat;
background-size: 100% 100%;
text-align: left;
}
......
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