Skip to content

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

首页，下单页面逻辑修改

parent 4540fb8a
Show whitespace changes
Inline Side-by-side
Showing with 2856 additions and 2844 deletions
main.js
View file @ 0738836e
......@@ -8,7 +8,7 @@ import commonjs from 'common/common.js'
Vue.prototype.$commonjs = commonjs
Vue.prototype.$request = request
Vue.prototype.$wxurl = 'https://wx.pangdly.com/#/'
Vue.prototype.$wxurl = 'https://lx.pangdly.com/#/'
Vue.prototype.imageError ='@/static/img/common/pangdingLogo.png'
Vue.use(uView)
uni.$u.config.unit = 'rpx'
......
pages/combination/combiChoose/combiChoose-new.vue deleted 100644 → 0
View file @ 4540fb8a
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad(option) {
//由于之前配置了这个页面，暂时进入页面直接跳转页面
this.companyId=this.$commonjs.getCompanyId(option)||''
let merchantId=this.$commonjs.getKey(option,'merchantId')||''
let channelType=this.$commonjs.getKey(option,'channelType')||0
uni.navigateTo({
url:`/pages/combination/distributionCombiChoose/distributionCombiChoose?merchantId=${merchantId}&channelType=${channelType}`
})
},
methods: {
}
}
</script>
<style>
</style>
pages/combination/combiChoose/combiChoose-备份.vue 0 → 100644
View file @ 0738836e
<template>
<view>
<web-view :src="outUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
enterUrl:'',//进入页面路由
outUrl:'',//跳出页面路由
}
},
onLoad(option) {
//#ifdef MP-WEIXIN
this.enterUrl=option.q
//#endif
//#ifdef MP-ALIPAY
this.enterUrl=uni.getStorageSync('alipayQrCode')
//#endif
if(this.enterUrl){//普通二维码扫码进入
let channelId=this.getUrlKey('channelId')
let companyId=this.getUrlKey('companyId')
let merchantId=this.getUrlKey('merchantId')
let groupId=this.getUrlKey('groupId')
let groupChannelId=this.getUrlKey('groupChannelId')
let pageType=this.getUrlKey('pageType')
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let pageCode=this.getUrlKey('pageCode')//赠送优惠券接口参数
if(pageType==1){//组合
this.outUrl=this.$wxurl+'combiChoose?channelId='+channelId+'&merchantId='+merchantId+'&groupId='+groupId+'&groupChannelId='+groupChannelId+'&companyId='+companyId+'&pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId
}else{//分销
uni.navigateTo({
url:'../distributionCombiChoose/distributionCombiChoose?channelId='+channelId+'&merchantId='+merchantId+'&groupId='+groupId+'&groupChannelId='+groupChannelId+'&companyId='+companyId+'&pageCode'+pageCode
})
}
}else{//小程序页面跳转进入
let channelId=option.channelId||''
let companyId=option.companyId||''
let merchantId=option.merchantId||''
let groupId=option.groupId||''
let groupChannelId=option.groupChannelId||''
let thirdOpenid=option.thirdOpenid||''//第三方openid
let touristType=option.touristType||''//游客类型
let pdOpenid=uni.getStorageSync('openid')||''//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')||''
let pdCreateUserId=uni.getStorageSync('createUserId')||''
let pdUserId=uni.getStorageSync('userId')||''
let baseUrl=this.$wxurl+'combiChoose?thirdOpenid='+thirdOpenid+'&touristType='+touristType
this.outUrl=baseUrl+'&channelId='+channelId+'&merchantId='+merchantId+'&groupId='+groupId+'&groupChannelId='+groupChannelId+'&companyId='+companyId+'&pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId
}
},
methods: {
getUrlKey(name){//---------------------------------------------------------------获取url
return(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(this.enterUrl)) || [, ''])[1].replace(/\+/g, '%20') || ''
},
}
}
</script>
<style>
</style>
pages/combination/combiChoose/combiChoose.vue
View file @ 0738836e
<template>
<view>
<web-view :src="outUrl"></web-view>
</view>
</template>
......@@ -8,60 +8,22 @@
export default {
data() {
return {
enterUrl:'',//进入页面路由
outUrl:'',//跳出页面路由
}
},
onLoad(option) {
//#ifdef MP-WEIXIN
this.enterUrl=option.q
//#endif
//#ifdef MP-ALIPAY
this.enterUrl=uni.getStorageSync('alipayQrCode')
//#endif
if(this.enterUrl){//普通二维码扫码进入
let channelId=this.getUrlKey('channelId')
let companyId=this.getUrlKey('companyId')
let merchantId=this.getUrlKey('merchantId')
let groupId=this.getUrlKey('groupId')
let groupChannelId=this.getUrlKey('groupChannelId')
let pageType=this.getUrlKey('pageType')
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let pageCode=this.getUrlKey('pageCode')//赠送优惠券接口参数
if(pageType==1){//组合
this.outUrl=this.$wxurl+'combiChoose?channelId='+channelId+'&merchantId='+merchantId+'&groupId='+groupId+'&groupChannelId='+groupChannelId+'&companyId='+companyId+'&pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId
}else{//分销
//由于之前配置了这个页面，暂时进入页面直接跳转页面
this.companyId=this.$commonjs.getCompanyId(option)||''
let merchantId=this.$commonjs.getKey(option,'merchantId')||''
let channelId=this.$commonjs.getKey(option,'channelId')||''
this.groupId=this.$commonjs.getKey(option,'groupId')||''
this.groupChannelId=this.$commonjs.getKey(option,'groupChannelId')||''
uni.navigateTo({
url:'../distributionCombiChoose/distributionCombiChoose?channelId='+channelId+'&merchantId='+merchantId+'&groupId='+groupId+'&groupChannelId='+groupChannelId+'&companyId='+companyId+'&pageCode'+pageCode
url:`/pages/combination/distributionCombiChoose/distributionCombiChoose?merchantId=${merchantId}&channelId=${channelId}&groupId=${groupId}&groupChannelId=${groupChannelId}&companyId=${companyId}`
})
}
}else{//小程序页面跳转进入
let channelId=option.channelId||''
let companyId=option.companyId||''
let merchantId=option.merchantId||''
let groupId=option.groupId||''
let groupChannelId=option.groupChannelId||''
let thirdOpenid=option.thirdOpenid||''//第三方openid
let touristType=option.touristType||''//游客类型
let pdOpenid=uni.getStorageSync('openid')||''//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')||''
let pdCreateUserId=uni.getStorageSync('createUserId')||''
let pdUserId=uni.getStorageSync('userId')||''
let baseUrl=this.$wxurl+'combiChoose?thirdOpenid='+thirdOpenid+'&touristType='+touristType
this.outUrl=baseUrl+'&channelId='+channelId+'&merchantId='+merchantId+'&groupId='+groupId+'&groupChannelId='+groupChannelId+'&companyId='+companyId+'&pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId
}
},
methods: {
getUrlKey(name){//---------------------------------------------------------------获取url
return(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(this.enterUrl)) || [, ''])[1].replace(/\+/g, '%20') || ''
},
}
}
</script>
......
pages/combination/distributionCombiChoose/distributionCombiChoose-new.vue deleted 100644 → 0
View file @ 4540fb8a
<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>
<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="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="title-coupon"> 劵惠 </text>
</template>
</view>
<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>
</view>
<label v-for="(items, a) in item.productListCopy" :key="a" :class="{ off: items.status == 2 }">
<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-price">
<view style="font-size: 24rpx;display: flex;">
<text class="product-rule" 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>
<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>
</view>
</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 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>
</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>
</view>
<view class="bottom">
<view class="bottom-left" @click="showCustomer()">
<u-icon name="chat" size="36"></u-icon>
客服
</view>
<view class="bottom-middle">
<view class="bottom-more" v-show="chooseProduct.length > 0">
组合购更优惠
<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 class="bottom-number">
{{ chooseProduct.length }}
</text>
</view>
</view>
<view class="bottom-right">
<text class="btn" @click="goFillorder()">去预定</text>
</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>
<image class="suodaoImg" v-if="showSuodaoImg" src="https://lx.pangdly.com/img/cjsdFirst.50a2e63.jpg"></image>
</view>
</template>
<script>
import customer from '@/components/customer.vue' //客服
import buyKnow from '@/components/buyKnow.vue' //购买须知
import detail from './components/detail.vue' //购买须知
import UWaterfall from '@/uview-ui/components/u-waterfall/u-waterfall.vue'
import merchantDetail from '@/components/merchantDetail' //详情弹窗
export default {
components: {
customer,
buyKnow,
detail,
UWaterfall,
merchantDetail
},
data() {
return {
detailData:'',//详情数据
showSuodaoImg:false,//索道耳麦图片是否显示隐藏
companyId:'',//公司Id
merchantId: '', //商户Id
// tabbar:['热门景点','一日游','摄影/旅拍','文创DIY'],//tabbar标题列表
tabbar: ['热门景点', '摄影/旅拍', '一日游'], //tabbar标题列表
active: 0, //导航栏下标
currentNum:0,//轮播图下标
imgList: [], //图片列表
scenicList: [], //景区数据
showDistance: false, //定位成功显示距离
buyKnowData: '', //购买须知数据
chooseProduct: [], //选中的产品
showModal: false, //是否显示模态框
chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
groupId: '', //组合Id
groupChannelId: '', //组合渠道Id
channelType: 0, //渠道类型
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: {
//选中产品的数量变化
chooseProduct: {
handler(newValue, oldValue) {
//当选中产品时
if (newValue.length > oldValue.length) {
//找到当前选中的产品
let product = newValue[newValue.length - 1]
//商家一级
let merchant = ''
//通过产品一级找到商家一级
this.scenicList.forEach(item => {
if (item.id == product.merchantId) {
merchant = item
}
})
//当选中产品的景区有2个以上选中产品时
let number = 0
this.chooseProduct.forEach(item => {
if (merchant.id == item.merchantId) {
number += 1
}
})
if (product.isMoreBuy !== 0) {
if (number > 1) {
//显示确认弹窗
this.showModal = true
//当前选中的景区产品，用于确定以及取消方法取值
this.chooseMerchantProduct = product
}
} else {
//支持多产品购买时，删除该景区其他产品不支持多产品购买的产品
this.chooseProduct.forEach((item, index) => {
if (merchant.id == item.merchantId && item.isMoreBuy !== 0) {
//取消选中状态和选中背景颜色
this.scenicList.forEach(item2 => {
item2.productList.forEach(item3 => {
if (item.id == item3.id) {
item3.ifChecked = false
item3.ifChangeBg = false
}
})
})
delete this.chooseProduct[index]
}
})
this.chooseProduct = this.chooseProduct.filter(function (val) {
return val
})
}
}
},
deep: true,
immediate: false
}
},
onLoad(option) {
//获取公司Id,保存到本地，支付等逻辑需要入口companyId
this.companyId=this.$commonjs.getCompanyId(option)||''
this.merchantId = this.$commonjs.getKey(option,'merchantId')|| ''
this.channelType = this.$commonjs.getKey(option,'channelType')|| 0
},
onShow() {
//如果是索道
if(this.merchantId=='z0015605022691a5945bbe463141668c'){
this.showSuodaoImg=true
setTimeout(() => {
this.showSuodaoImg = false
}, 2500)
}
//清空之前选中的数据以及状态
this.detailData=''
this.chooseProduct=[]
this.$refs.detail.showPop = false
let token = uni.getStorageSync('token')
if (token) {
uni.getLocation({
type: 'wgs84',
success: res => {
let latitude = res.latitude //纬度
let longitude = res.longitude //经度
this.showDistance = true
this.initList(latitude, longitude)
},
fail: res => {
let latitude = ''
let longitude = ''
this.initList(latitude, longitude)
}
})
}
},
methods: {
//---页面滚动事件
scroll(e) {
if(e.detail.scrollTop>200){
//固定导航栏
this.tabbarObj='top:0;position:fixed;border-radius:0'
}else{
this.tabbarObj='top:-40rpx;position:relative;border-radius:16rpx;'
}
},
//---导航栏切换
tabbarChange(index) {
this.active = index
if(index==0){
this.countSwiper()
}
if(index==1){
this.countSwiper('waterfall')
}
},
//---swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current
this.active = current
},
//---展示客服组件
showCustomer() {
this.$refs.customer.showPop = true
},
//---展示购买须知
showBuyKnow(data) {
this.buyKnowData = data
this.$refs.buyKnow.showPop = true
},
//---点击详情
clikDetail(merchantId){
this.$refs.merchantDetail.showPop=true
this.initDetail(merchantId)
},
//---初始化详情
initDetail(merchantId){
let data={
userId:uni.getStorageSync('userId')||'',
openid:uni.getStorageSync('openid')||'',
id:merchantId,//商户id
isDetail:1,//商户详情
}
this.detailData=''
this.$request('scenic/user/merchant/findDetailInfo',data).then((res)=>{
if(res.code=='00'){
this.detailData=res.data
//解决详情里面图片太宽超出屏幕宽度出现滚动条的问题
if(this.detailData.introduce){
this.detailData.introduce=this.detailData.introduce.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
}
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---展示明细弹窗
showDetail() {
this.$refs.detail.showPop = true
},
//计算第一个swiper高度
countSwiper(label){
let labels=label||'checkbox-box'
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this)
query.select(`.${labels}`).boundingClientRect(data => {
this.swiperHeight=data.height
}).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) {
let value = e.detail.value
let arr = []
value.forEach(item => {
arr.push(JSON.parse(item))
})
this.chooseProduct = arr
//判断是否选中产品，选中产品的背景颜色需要变化
this.scenicList.forEach(item => {
item.productList.forEach(item2 => {
item2.ifChangeBg = false
this.chooseProduct.forEach(item3 => {
if (item2.id == item3.id) {
item2.ifChangeBg = true
//解决是否支持多产品购买弹窗2次之后，选中状态错误bug,需要在选中时修改状态
item2.ifChecked = true
}
})
})
})
},
//---不支持多选产品，选择确定事件
chooseConfirm() {
this.chooseProduct.forEach((item, index) => {
//删除选中产品以外的其他所有产品
if (this.chooseMerchantProduct.merchantId == item.merchantId && JSON.stringify(item) != JSON.stringify(this.chooseMerchantProduct)) {
//取消选中状态和选中背景颜色
this.scenicList.forEach(item2 => {
item2.productList.forEach(item3 => {
if (item.id == item3.id) {
item3.ifChecked = false
item3.ifChangeBg = false
}
})
})
delete this.chooseProduct[index]
}
})
this.chooseProduct = this.chooseProduct.filter(function (val) {
return val
})
this.showModal = false
},
//---不支持多选产品，选择取消事件
chooseCancel() {
//删除选中产品
this.chooseProduct.forEach((item, index) => {
if (item.id === this.chooseMerchantProduct.id) {
//取消选中状态和选中背景颜色
this.scenicList.forEach(item2 => {
item2.productList.forEach(item3 => {
if (item.id == item3.id) {
item3.ifChecked = false
item3.ifChangeBg = false
}
})
})
this.chooseProduct.splice(index, 1)
}
})
this.showModal = false
},
//---商品列表
initList(latitude, longitude) {
let data = {
merchantId: this.merchantId, //商户id
openid: uni.getStorageSync('openid') || '',
channelType: this.channelType, //渠道类型
latitude,
longitude
}
uni.showLoading({
title: '加载中'
})
this.$request('/scenic/groupGood/getGroupProducts', data).then(res => {
uni.hideLoading()
if (res.code == '00') {
this.scenicList = res.data.merchantList || []
this.groupId = res.data.groupId || ''
this.groupChannelId = res.data.groupChannelId || ''
this.scenicList.forEach((item, index) => {
//获取当前景区图片,把当前景区放在第一位
if (item.id == this.merchantId) {
this.imgList = item.imgList
this.scenicList.splice(index, 1)
this.scenicList.unshift(item)
item.productListCopy = item.productList
} else {
item.productListCopy = item.productList.slice(0, 2)
}
//预订时间为当天时，当前时间大于最早预订时间显示未开售，当前时间大于最晚预订时间显示已售罄
let times = new Date().Format('hh:mm:ss')
let timeNumber = parseInt(this.$commonjs.changeTime(times)) //将当前时间转化为数字
item.productList.forEach(item2 => {
item2.timeNumber1 = parseInt(this.$commonjs.changeTime(item2.earlyBookTime))
item2.timeNumber2 = parseInt(this.$commonjs.changeTime(item2.bookTime))
if (item2.aheadBookDays == 0) {
if (item2.status == 2) {
item2.statusName = '已售罄'
} else {
if (timeNumber < item2.timeNumber1) {
item2.status = 2
item2.statusName = '未开售'
}
if (timeNumber > item2.timeNumber2) {
item2.status = 2
item2.statusName = '已售罄'
}
}
}
})
})
this.$nextTick(() => {
this.countSwiper()
})
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
.catch(err => {
uni.hideLoading()
})
},
//---跳转填写订单页面
goFillorder() {
for (let i = 0; i < this.chooseProduct.length; i++) {
let item = this.chooseProduct[i]
if (item.status == 2) {
uni.showToast({
title: '售罄产品不能进行购买',
icon: 'none'
})
return
}
}
if (this.chooseProduct.length == 0) {
uni.showToast({
title: '请选择至少一个产品',
icon: 'none'
})
return
} else if (this.chooseProduct.length == 1) {
let query = '?merchantId=' + this.chooseProduct[0].merchantId + '&productId=' + this.chooseProduct[0].id + '&orderSource=3'
if (this.chooseProduct[0].ticketType == 2) {
//联票
uni.navigateTo({
url: '/pages/scenic/scenicJointOrder/scenicJointOrder' + query
})
} else {
//普通票
uni.navigateTo({
url: '/pages/scenic/scenicSingleOrder/scenicSingleOrder'+ query
})
}
} else {
let productIdList = this.chooseProduct.map(item => {
return item.id
})
let query ='?productIdList=' + JSON.stringify(productIdList) + '&groupId=' + this.groupId + '&groupChannelId=' + this.groupChannelId + '&orderSource=3'
uni.navigateTo({
url: '/pages/combination/combiOrder/combiOrder' + query
})
}
},
//---跳转影集页面
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>
<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;
position: relative;
top: -40rpx;
}
.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;
justify-content: space-between;
font-size: 32rpx;
text {
padding: 24rpx 32rpx 24rpx 20rpx;
border-radius: 16rpx;
width: 33.3%;
text-align: center;
}
}
.tabbar .on {
// background: url('../../../static/img/scenic/tabbar.png') no-repeat;
background: $theme;
background-size: 100% 100%;
color: #fff;
font-weight: bold;
}
.merchant {
border-radius: 16rpx;
background: #ffffff;
margin-top: 24rpx;
padding: 24rpx;
}
.merchant label{
width: 100%;
}
.merchant label.off .product {
background: #f3f3f3;
color: #999999;
}
.merchant label.off .product-name {
color: #999999;
}
.merchant label.off .product-rule {
color: #999999;
}
.merchant-title {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
}
.title-left {
font-size: 32rpx;
margin-right: 10rpx;
font-weight: bold;
image {
width: 36rpx;
height: 36rpx;
position: relative;
top: 6rpx;
margin: 0 8rpx;
}
}
.title-coupon {
color: $red;
font-size: 24rpx;
}
.title-right {
color: $grey;
font-size: 24rpx;
display: flex;
}
.product {
padding:16rpx 16rpx 10rpx 16rpx;
background: #ffffff;
border-radius: 8rpx;
display: flex;
align-items: center;
margin-top: 10rpx;
}
.product.on {
background: #e2eeff;
}
.product-left {
margin-right: 10rpx;
}
.product-right {
flex: 1;
}
.product-name {
font-size: 28rpx;
font-weight: bold;
color: #191919;
display: flex;
justify-content: space-between;
}
.product-status {
padding: 6rpx 12rpx;
border: 2px solid #f40000;
color: #f40000;
font-size: 24rpx;
border-radius: 4rpx;
transform: rotate(-25deg);
position: relative;
top: 30rpx;
right: 80rpx;
}
.product-price {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-rule {
color: $theme;
}
.product-rule::after {
display: inline-block;
content: '';
height: 22rpx;
margin: 0 10rpx;
background: #ccc;
width: 1px;
}
.product-orange {
font-size: 20rpx;
color: $grey;
text-decoration: line-through;
}
.product-sell {
font-size: 40rpx;
color: $red;
font-weight: bold;
margin-left: 10rpx;
}
.product-more {
padding-top:24rpx;
font-size: 20rpx;
}
.product-more>view{
display: flex;
justify-content: center;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
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;
}
.bottom-left{
display: flex;
flex-direction: column;
align-items: center;
}
.bottom-middle {
position: relative;
padding: 0 40rpx;
}
.bottom-more {
position: relative;
top: -40rpx;
background: #f40000;
border-radius: 28px;
opacity: 0.64;
padding: 10rpx 20rpx;
color: #ffffff;
}
.bottom-three {
width: 14rpx;
height: 14rpx;
display: inline-block;
background: #f40000;
opacity: 0.64;
position: absolute;
right: 42rpx;
bottom: -7rpx;
transform: rotate(45deg);
}
.bottom-detail {
position: relative;
text-align: center;
display: flex;
justify-content: center;
}
.bottom-number {
display: inline-block;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
text-align: center;
background: #f40000;
color: #ffffff;
font-weight: bold;
margin-left: 10rpx;
}
.btn {
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%;
}
.swiper-item /deep/ .u-waterfall{
padding-top:8rpx;
}
.swiper-item /deep/ .u-empty{
height: 300px;
}
</style>
pages/combination/distributionCombiChoose/distributionCombiChoose-备份.vue 0 → 100644
View file @ 0738836e
<template>
<view>
<web-view :src="outUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
enterUrl:'',//进入页面路由
outUrl:'',//跳出页面路由
}
},
onLoad(option) {
//#ifdef MP-WEIXIN
this.enterUrl=option.q
//#endif
//#ifdef MP-ALIPAY
this.enterUrl=uni.getStorageSync('alipayQrCode')
//#endif
if(this.enterUrl){//普通二维码扫码进入
let channelId=this.getUrlKey('channelId')
let companyId=this.getUrlKey('companyId')
let merchantId=this.getUrlKey('merchantId')
let groupId=this.getUrlKey('groupId')
let groupChannelId=this.getUrlKey('groupChannelId')
let pageType=this.getUrlKey('pageType')
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let pageCode=this.getUrlKey('pageCode')//赠送优惠券接口参数
if(pageType==1){//组合
uni.navigateTo({
url:'../combiChoose/combiChoose?channelId='+channelId+'&merchantId='+merchantId+'&groupId='+groupId+'&groupChannelId='+groupChannelId+'&companyId='+companyId
})
}else{//分销
this.outUrl=this.$wxurl+'distributionCombiChooseS?channelId='+channelId+'&merchantId='+merchantId+'&groupId='+groupId+'&groupChannelId='+groupChannelId+'&companyId='+companyId+'&pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId+'&pageCode'+pageCode
}
}else{//小程序页面跳转进入
let channelId=option.channelId||''
let companyId=option.companyId||''
let merchantId=option.merchantId||''
let groupId=option.groupId||''
let groupChannelId=option.groupChannelId||''
let thirdOpenid=option.thirdOpenid||''//第三方openid
let touristType=option.touristType||''//游客类型
let pageCode=option.pageCode||''//赠送优惠券接口参数
let pdOpenid=uni.getStorageSync('openid')||''//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')||''
let pdCreateUserId=uni.getStorageSync('createUserId')||''
let pdUserId=uni.getStorageSync('userId')||''
let baseUrl=this.$wxurl+'distributionCombiChooseS?thirdOpenid='+thirdOpenid+'&touristType='+touristType
this.outUrl=baseUrl+'&channelId='+channelId+'&merchantId='+merchantId+'&groupId='+groupId+'&groupChannelId='+groupChannelId+'&companyId='+companyId+'&pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId+'&pageCode'+pageCode
}
},
methods: {
getUrlKey(name){//---------------------------------------------------------------获取url
return(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(this.enterUrl)) || [, ''])[1].replace(/\+/g, '%20') || ''
}
}
}
</script>
<style>
</style>
pages/combination/distributionCombiChoose/distributionCombiChoose.vue
View file @ 0738836e
<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>
<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="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="title-coupon"> 劵惠 </text>
</template>
</view>
<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>
</view>
<label v-for="(items, a) in item.productListCopy" :key="a" :class="{ off: items.status == 2 }">
<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-price">
<view style="font-size: 24rpx;display: flex;">
<text class="product-rule" 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>
<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>
</view>
</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 class="album-list-bottom" :style="{'background': item.color}">
<view>{{item.title}}</view>
<view>快来定制吧</view>
<view>
<web-view :src="outUrl"></web-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>
</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>
</view>
<view class="bottom">
<view class="bottom-left" @click="showCustomer()">
<u-icon name="chat" size="36"></u-icon>
客服
</view>
<view class="bottom-middle">
<view class="bottom-more" v-show="chooseProduct.length > 0">
组合购更优惠
<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 class="bottom-number">
{{ chooseProduct.length }}
</text>
</view>
</view>
<view class="bottom-right">
<text class="btn" @click="goFillorder()">去预定</text>
</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>
<image class="suodaoImg" v-if="showSuodaoImg" src="https://lx.pangdly.com/img/cjsdFirst.50a2e63.jpg"></image>
</view>
</template>
<script>
import customer from '@/components/customer.vue' //客服
import buyKnow from '@/components/buyKnow.vue' //购买须知
import detail from './components/detail.vue' //明细
import UWaterfall from '@/uview-ui/components/u-waterfall/u-waterfall.vue'
import merchantDetail from '@/components/merchantDetail' //详情弹窗
export default {
components: {
customer,
buyKnow,
detail,
UWaterfall,
merchantDetail
},
data() {
return {
enterUrl:'',//进入页面路由
outUrl:'',//跳出页面路由
detailData:'',//详情数据
showSuodaoImg:false,//索道耳麦图片是否显示隐藏
companyId:'',//公司Id
merchantId: '', //商户Id
groupId: '', //组合Id
groupChannelId: '', //组合渠道Id
channelId:'',//渠道Id
// tabbar:['热门景点','一日游','摄影/旅拍','文创DIY'],//tabbar标题列表
tabbar: ['热门景点', '摄影/旅拍', '一日游'], //tabbar标题列表
active: 0, //导航栏下标
currentNum:0,//轮播图下标
imgList: [], //图片列表
scenicList: [], //景区数据
showDistance: false, //定位成功显示距离
buyKnowData: '', //购买须知数据
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'
}
],
}
},
watch: {
//选中产品的数量变化
chooseProduct: {
handler(newValue, oldValue) {
//当选中产品时
if (newValue.length > oldValue.length) {
//找到当前选中的产品
let product = newValue[newValue.length - 1]
//商家一级
let merchant = ''
//通过产品一级找到商家一级
this.scenicList.forEach(item => {
if (item.id == product.merchantId) {
merchant = item
}
})
//当选中产品的景区有2个以上选中产品时
let number = 0
this.chooseProduct.forEach(item => {
if (merchant.id == item.merchantId) {
number += 1
}
})
if (product.isMoreBuy !== 0) {
if (number > 1) {
//显示确认弹窗
this.showModal = true
//当前选中的景区产品，用于确定以及取消方法取值
this.chooseMerchantProduct = product
}
} else {
//支持多产品购买时，删除该景区其他产品不支持多产品购买的产品
this.chooseProduct.forEach((item, index) => {
if (merchant.id == item.merchantId && item.isMoreBuy !== 0) {
//取消选中状态和选中背景颜色
this.scenicList.forEach(item2 => {
item2.productList.forEach(item3 => {
if (item.id == item3.id) {
item3.ifChecked = false
item3.ifChangeBg = false
}
})
})
delete this.chooseProduct[index]
}
})
this.chooseProduct = this.chooseProduct.filter(function (val) {
return val
})
}
}
},
deep: true,
immediate: false
}
},
onLoad(option) {
//#ifdef MP-WEIXIN
this.enterUrl=option.q
//#endif
//#ifdef MP-ALIPAY
this.enterUrl=uni.getStorageSync('alipayQrCode')
//#endif
if(this.enterUrl){//普通二维码扫码进入
let channelId=this.getUrlKey('channelId')
let companyId=this.getUrlKey('companyId')
let merchantId=this.getUrlKey('merchantId')
let groupId=this.getUrlKey('groupId')
let groupChannelId=this.getUrlKey('groupChannelId')
let pageType=this.getUrlKey('pageType')
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let pageCode=this.getUrlKey('pageCode')//赠送优惠券接口参数
if(pageType==1){//组合
uni.navigateTo({
url:'../combiChoose/combiChoose?channelId='+channelId+'&merchantId='+merchantId+'&groupId='+groupId+'&groupChannelId='+groupChannelId+'&companyId='+companyId
//获取公司Id,保存到本地，支付等逻辑需要入口companyId
this.companyId=this.$commonjs.getCompanyId(option)||''
this.merchantId = this.$commonjs.getKey(option,'merchantId')|| ''
this.channelId=this.$commonjs.getKey(option,'channelId')||''
this.groupId=this.$commonjs.getKey(option,'groupId')||''
this.groupChannelId=this.$commonjs.getKey(option,'groupChannelId')||''
},
onShow() {
//如果是索道
if(this.merchantId=='z0015605022691a5945bbe463141668c'){
this.showSuodaoImg=true
setTimeout(() => {
this.showSuodaoImg = false
}, 2500)
}
//清空之前选中的数据以及状态
this.detailData=''
this.chooseProduct=[]
this.$refs.detail.showPop = false
let token = uni.getStorageSync('token')
if (token) {
uni.getLocation({
type: 'wgs84',
success: res => {
let latitude = res.latitude //纬度
let longitude = res.longitude //经度
this.showDistance = true
this.initList(latitude, longitude)
},
fail: res => {
let latitude = ''
let longitude = ''
this.initList(latitude, longitude)
}
})
}else{//分销
this.outUrl=this.$wxurl+'distributionCombiChooseS?channelId='+channelId+'&merchantId='+merchantId+'&groupId='+groupId+'&groupChannelId='+groupChannelId+'&companyId='+companyId+'&pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId+'&pageCode'+pageCode
}
},
methods: {
//---商品列表
initList(latitude, longitude) {
let data = {
channelId: this.channelId, //渠道Id
companyId: this.companyId, //公司Id
merchantId: this.merchantId, //商户id
groupId: this.groupId, //组合Id
openid: uni.getStorageSync('openid')||'',
latitude,
longitude
}
uni.showLoading({
title: '加载中',
mask:true
})
this.scenicList=[]
this.$request('/scenic/groupGood/findGroupGoodProductList', data).then(res => {
uni.hideLoading()
if (res.code == '00') {
let merchantList=res.data.merchantList||[]
merchantList.forEach(item=>{
if(item.type==1&&item.productList.length>0){
//type=1为景区
this.scenicList.push(item)
}
})
this.scenicList.forEach((item, index) => {
//获取当前景区图片,把当前景区放在第一位
if (item.id == this.merchantId) {
this.imgList = item.imgList
this.scenicList.splice(index, 1)
this.scenicList.unshift(item)
item.productListCopy = item.productList
} else {
item.productListCopy = item.productList.slice(0, 2)
}
//预订时间为当天时，当前时间大于最早预订时间显示未开售，当前时间大于最晚预订时间显示已售罄
let times = new Date().Format('hh:mm:ss')
let timeNumber = parseInt(this.$commonjs.changeTime(times)) //将当前时间转化为数字
item.productList.forEach(item2 => {
item2.timeNumber1 = parseInt(this.$commonjs.changeTime(item2.earlyBookTime))
item2.timeNumber2 = parseInt(this.$commonjs.changeTime(item2.bookTime))
if (item2.aheadBookDays == 0) {
if (item2.status == 2) {
item2.statusName = '已售罄'
} else {
if (timeNumber < item2.timeNumber1) {
item2.status = 2
item2.statusName = '未开售'
}
if (timeNumber > item2.timeNumber2) {
item2.status = 2
item2.statusName = '已售罄'
}
}
}
})
})
this.$nextTick(() => {
this.countSwiper()
})
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
}).catch(err => {
uni.hideLoading()
})
},
//---初始化详情
initDetail(merchantId){
let data={
userId:uni.getStorageSync('userId')||'',
openid:uni.getStorageSync('openid')||'',
id:merchantId,//商户id
isDetail:1,//商户详情
}
this.detailData=''
this.$request('scenic/user/merchant/findDetailInfo',data).then((res)=>{
if(res.code=='00'){
this.detailData=res.data
//解决详情里面图片太宽超出屏幕宽度出现滚动条的问题
if(this.detailData.introduce){
this.detailData.introduce=this.detailData.introduce.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
}
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---展示明细弹窗
showDetail() {
this.$refs.detail.showPop = true
},
//---页面滚动事件
scroll(e) {
if(e.detail.scrollTop>200){
//固定导航栏
this.tabbarObj='top:0;position:fixed;border-radius:0'
}else{
this.tabbarObj='top:-40rpx;position:relative;border-radius:16rpx;'
}
},
//---导航栏切换
tabbarChange(index) {
this.active = index
if(index==0){
this.countSwiper()
}
}else{//小程序页面跳转进入
let channelId=option.channelId||''
let companyId=option.companyId||''
let merchantId=option.merchantId||''
let groupId=option.groupId||''
let groupChannelId=option.groupChannelId||''
let thirdOpenid=option.thirdOpenid||''//第三方openid
let touristType=option.touristType||''//游客类型
let pageCode=option.pageCode||''//赠送优惠券接口参数
let pdOpenid=uni.getStorageSync('openid')||''//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')||''
let pdCreateUserId=uni.getStorageSync('createUserId')||''
let pdUserId=uni.getStorageSync('userId')||''
let baseUrl=this.$wxurl+'distributionCombiChooseS?thirdOpenid='+thirdOpenid+'&touristType='+touristType
this.outUrl=baseUrl+'&channelId='+channelId+'&merchantId='+merchantId+'&groupId='+groupId+'&groupChannelId='+groupChannelId+'&companyId='+companyId+'&pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId+'&pageCode'+pageCode
if(index==1){
this.countSwiper('waterfall')
}
},
//---swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current
this.active = current
},
//---展示客服组件
showCustomer() {
this.$refs.customer.showPop = true
},
//---展示购买须知
showBuyKnow(data) {
this.buyKnowData = data
this.$refs.buyKnow.showPop = true
},
//---点击详情
clikDetail(merchantId){
this.$refs.merchantDetail.showPop=true
this.initDetail(merchantId)
},
//计算swiper高度
countSwiper(label){
let labels=label||'checkbox-box'
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this)
query.select(`.${labels}`).boundingClientRect(data => {
this.swiperHeight=data.height+20
}).exec()
})
},
methods: {
getUrlKey(name){//---------------------------------------------------------------获取url
return(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(this.enterUrl)) || [, ''])[1].replace(/\+/g, '%20') || ''
//---展示更多产品
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) {
let value = e.detail.value
let arr = []
value.forEach(item => {
arr.push(JSON.parse(item))
})
this.chooseProduct = arr
//判断是否选中产品，选中产品的背景颜色需要变化
this.scenicList.forEach(item => {
item.productList.forEach(item2 => {
item2.ifChangeBg = false
this.chooseProduct.forEach(item3 => {
if (item2.id == item3.id) {
item2.ifChangeBg = true
//解决是否支持多产品购买弹窗2次之后，选中状态错误bug,需要在选中时修改状态
item2.ifChecked = true
}
})
})
})
},
//---不支持多选产品，选择确定事件
chooseConfirm() {
this.chooseProduct.forEach((item, index) => {
//删除选中产品以外的其他所有产品
if (this.chooseMerchantProduct.merchantId == item.merchantId && JSON.stringify(item) != JSON.stringify(this.chooseMerchantProduct)) {
//取消选中状态和选中背景颜色
this.scenicList.forEach(item2 => {
item2.productList.forEach(item3 => {
if (item.id == item3.id) {
item3.ifChecked = false
item3.ifChangeBg = false
}
})
})
delete this.chooseProduct[index]
}
})
this.chooseProduct = this.chooseProduct.filter(function (val) {
return val
})
this.showModal = false
},
//---不支持多选产品，选择取消事件
chooseCancel() {
//删除选中产品
this.chooseProduct.forEach((item, index) => {
if (item.id === this.chooseMerchantProduct.id) {
//取消选中状态和选中背景颜色
this.scenicList.forEach(item2 => {
item2.productList.forEach(item3 => {
if (item.id == item3.id) {
item3.ifChecked = false
item3.ifChangeBg = false
}
})
})
this.chooseProduct.splice(index, 1)
}
})
this.showModal = false
},
//---跳转填写订单页面
goFillorder() {
for (let i = 0; i < this.chooseProduct.length; i++) {
let item = this.chooseProduct[i]
if (item.status == 2) {
uni.showToast({
title: '售罄产品不能进行购买',
icon: 'none'
})
return
}
}
if (this.chooseProduct.length == 0) {
uni.showToast({
title: '请选择至少一个产品',
icon: 'none'
})
return
} else if (this.chooseProduct.length == 1) {
let query = '?merchantId=' + this.chooseProduct[0].merchantId + '&productId=' + this.chooseProduct[0].id + '&orderSource=3'
if (this.chooseProduct[0].ticketType == 2) {
//联票
uni.navigateTo({
url: '/pages/scenic/scenicJointOrder/scenicJointOrder' + query
})
} else {
//普通票
uni.navigateTo({
url: '/pages/scenic/scenicSingleOrder/scenicSingleOrder'+ query
})
}
} else {
let productIdList = this.chooseProduct.map(item => {
return item.id
})
let query ='?productIdList=' + JSON.stringify(productIdList) + '&groupId=' + this.groupId + '&groupChannelId=' + this.groupChannelId + '&orderSource=3'
uni.navigateTo({
url: '/pages/combination/combiOrder/combiOrder' + query
})
}
},
//---跳转影集页面
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>
<style>
<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;
position: relative;
top: -40rpx;
}
.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;
justify-content: space-between;
font-size: 32rpx;
text {
padding: 24rpx 32rpx 24rpx 20rpx;
border-radius: 16rpx;
width: 33.3%;
text-align: center;
}
}
.tabbar .on {
// background: url('../../../static/img/scenic/tabbar.png') no-repeat;
background: $theme;
background-size: 100% 100%;
color: #fff;
font-weight: bold;
}
.merchant {
border-radius: 16rpx;
background: #ffffff;
margin-top: 24rpx;
padding: 24rpx;
}
.merchant label{
width: 100%;
}
.merchant label.off .product {
background: #f3f3f3;
color: #999999;
}
.merchant label.off .product-name {
color: #999999;
}
.merchant label.off .product-rule {
color: #999999;
}
.merchant-title {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
}
.title-left {
font-size: 32rpx;
margin-right: 10rpx;
font-weight: bold;
image {
width: 36rpx;
height: 36rpx;
position: relative;
top: 6rpx;
margin: 0 8rpx;
}
}
.title-coupon {
color: $red;
font-size: 24rpx;
}
.title-right {
color: $grey;
font-size: 24rpx;
display: flex;
}
.product {
padding:16rpx 16rpx 10rpx 16rpx;
background: #ffffff;
border-radius: 8rpx;
display: flex;
align-items: center;
margin-top: 10rpx;
}
.product.on {
background: #e2eeff;
}
.product-left {
margin-right: 10rpx;
}
.product-right {
flex: 1;
}
.product-name {
font-size: 28rpx;
font-weight: bold;
color: #191919;
display: flex;
justify-content: space-between;
}
.product-status {
padding: 6rpx 12rpx;
border: 2px solid #f40000;
color: #f40000;
font-size: 24rpx;
border-radius: 4rpx;
transform: rotate(-25deg);
position: relative;
top: 30rpx;
right: 80rpx;
}
.product-price {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-rule {
color: $theme;
}
.product-rule::after {
display: inline-block;
content: '';
height: 22rpx;
margin: 0 10rpx;
background: #ccc;
width: 1px;
}
.product-orange {
font-size: 20rpx;
color: $grey;
text-decoration: line-through;
}
.product-sell {
font-size: 40rpx;
color: $red;
font-weight: bold;
margin-left: 10rpx;
}
.product-more {
padding-top:24rpx;
font-size: 20rpx;
}
.product-more>view{
display: flex;
justify-content: center;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
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;
}
.bottom-left{
display: flex;
flex-direction: column;
align-items: center;
}
.bottom-middle {
position: relative;
padding: 0 40rpx;
}
.bottom-more {
position: relative;
top: -40rpx;
background: #f40000;
border-radius: 28px;
opacity: 0.64;
padding: 10rpx 20rpx;
color: #ffffff;
}
.bottom-three {
width: 14rpx;
height: 14rpx;
display: inline-block;
background: #f40000;
opacity: 0.64;
position: absolute;
right: 42rpx;
bottom: -7rpx;
transform: rotate(45deg);
}
.bottom-detail {
position: relative;
text-align: center;
display: flex;
justify-content: center;
}
.bottom-number {
display: inline-block;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
text-align: center;
background: #f40000;
color: #ffffff;
font-weight: bold;
margin-left: 10rpx;
}
.btn {
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%;
}
.swiper-item /deep/ .u-waterfall{
padding-top:8rpx;
}
.swiper-item /deep/ .u-empty{
height: 300px;
}
</style>
pages/indexs/index/index.vue
View file @ 0738836e
......@@ -214,8 +214,6 @@ export default {
goProduct(url){
uni.navigateTo({
url
// url:'/pages/combination/distributionCombiChoose/distributionCombiChoose?merchantId=z0015605022691a5945bbe463141668c'
})
}
......
pages/scenic/scenicSingleOrder/scenicSingleOrder-new.vue deleted 100644 → 0
View file @ 4540fb8a
<template>
<view class="orderBox">
<view class="head"> </view>
<view class="middle">
<view class="middle-top">
<!-- --------------------------------------------产品信息部分------------------------------------- -->
<view class="middle-Product">
<view class="merchantName">
<text class="title-text">
{{ productIfo.merchantName || '' }}
</text>
<text>
{{ productIfo.name || '' }}
</text>
</view>
<view @click="showBuyKnow()" class="buyKnow">
<view>
<text v-if="productIfo.backChangeRule == 0">不可退换</text>
<text v-if="productIfo.backChangeRule == 1">可退</text>
<text v-if="productIfo.backChangeRule == 2">随时可退</text>
<text v-if="productIfo.isFetch == 1">无需取号</text>
</view>
<view>
购买须知
<u-icon name="arrow-right" color='#FC6703'></u-icon>
</view>
</view>
</view>
<!--需要排队并且站点数大于1-->
<view class="middle-place" @click="openArea()" v-if="productIfo.isFetch == 1 && productIfo.productAreaList.length > 1 && areaUp">
<view> 出发站点 </view>
<view>
{{ areaObj.areaName || '请选择站点' }}
</view>
<view>
<u-icon name="arrow-right" color="#3688FF"></u-icon>
</view>
</view>
<!--需要排队并且为一个站点-->
<!-- <view class="middle-place" v-if="productIfo.isFetch == 1 && productIfo.productAreaList.length == 1 && areaUp" @click="getSortInfor()">
<view> 获取排队信息 </view>
<view>
{{ areaObj.areaName }}
</view>
<view>
<u-icon name="arrow-right" color="#3688FF"></u-icon>
</view>
</view> -->
<view class="middle-Date">
<view class="title-text">游玩日期</view>
<view class="middle-Datelist">
<scroll-view class="date-content" scroll-x="true" :scroll-left="dateScroll" v-if="dateList.length > 0">
<view class="date-list" v-for="(item, index) of dateList" :class="{ on: active == index }" @click="dateChoose(index)" :key="index">
<view v-if="item.week">
<text v-if="item.week != '今天' && item.week != '明天' && item.week != '后天'">周</text>
{{ item.week }}
</view>
<view>
{{ item.startTime ? item.startTime.substr(5, 5) : '' }}
</view>
<view class="date-price">
¥<text style="font-weight: bold;">{{ item.sellingPrice }}</text>
</view>
<view v-if="active == index" class="date-icon">
<u-icon name="checkmark" color="#ffffff"></u-icon>
</view>
</view>
</scroll-view>
<text v-else class="no-date"> 不可购买 </text>
<view class="dateMore" @click="showCalendar()">
<view class="date-more-content">
<view>更多</view>
<view>日期</view>
</view>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
</view>
<view class="middle-time" v-if="productIfo.productType == 3">
<view class="title-text"> 场次 </view>
<view class="middle-timelist">
<scroll-view class="time-content" scroll-x="true" :scroll-left="timeScroll" v-if="timeList.length> 0">
<view class="time-list"
:style="{color:item.copyLast=='售罄'?'#ff0000':''}"
v-for="(item, index) of timeList"
@click="chooseTime(index)"
:class="{ on: timeActive == index }"
:key="index"
>
<view >
{{ item.startPlanTime ? item.startPlanTime.substr(0, 5) : '' }}
<text v-if="!item.saleOnlyShowFromDate">
-{{ item.endPlanTime ? item.endPlanTime.substr(0, 5) : '' }}
</text>
</view>
<view>
<text v-if="item.copyLast!='余票充足'&&item.copyLast!='售罄'">剩余：</text>
{{ item.copyLast }}
</view>
<view v-if="timeActive == index" class="date-icon">
<u-icon name="checkmark" color="#ffffff"></u-icon>
</view>
</view>
</scroll-view>
<text class="no-time" v-if="startDate && endDate && timeList.length == 0"> 该日票种已售罄，请选择其他日期 </text>
<text class="no-time" v-if="!startDate || !endDate"> 请先选游玩日期 </text>
<view class="timeMore" @click="showTime()">
<view class="time-more-content">
<view>更多</view>
<view>场次</view>
</view>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
</view>
<view class="middle-divider">
</view>
<view class="middle-Number">
<view class="title-text"> 购买数量 </view>
<view>
<u-number-box v-model="buyNum" @change='buyNumChange' :max="maxBookNum">
<view slot="minus" class="number-minus" >
<u-icon name="minus" color="#FFFFFF" size="32"></u-icon>
</view>
<text slot="input" class="number-input">{{buyNum}}</text>
<view slot="plus" class="number-plus">
<u-icon name="plus" color="#FFFFFF" size="32"></u-icon>
</view>
</u-number-box>
</view>
</view>
<view class=" middle-coupon" v-if="couponData.length>0" @click="showCoupon()">
<view>
券
</view>
<!-- 有可用优惠券,并且未选中 -->
<template v-if="couponData.masterSlaveCouponList&&couponData.masterSlaveCouponList.length>0&&!chooseCouponObj">
<view>
{{couponData.masterSlaveCouponList[0].couponName}}
</view>
<view >
未使用优惠券
</view>
</template>
<!-- 有可用优惠券 -->
<template v-if="chooseCouponObj&&savedMoney>0">
<view>
{{chooseCouponObj.couponName}}
</view>
<view style="font-size: 32rpx;">
<text style="font-size: 24rpx;position: relative;top: 6rpx;">¥</text>
{{parseFloat(savedMoney.toFixed(2))}}
</view>
</template>
<!-- 可用优惠券条件-->
<template v-if="ableConpon">
<view>
{{ableConpon.couponName}}
</view>
<view>
{{ableConpon.couponRule}}
</view>
</template>
<u-icon name="arrow-right" color="#3688FF"></u-icon>
</view>
<!-- --------------------------------------------额外服务部分-------------------------------------------- -->
<view class="extraService" v-if="serviceList.length>0&&showErmai">
<checkbox-group @change="extraChange">
<view v-for="(item,index) of serviceList" :key="item.id">
<label>
<view>
<text>{{item.name}}</text>
<text style="font-size:20rpx;color: #666666;" v-if="item.deposit">(押金：¥{{item.deposit}})</text>
</view>
<view>
<text style="font-size: 24rpx;">¥</text>
<text style="font-size: 32rpx;font-weight: bold;">{{item.sellingPrice}}</text>
<checkbox class="blue" :value="JSON.stringify(item)" style="transform: scale(0.7);position: relative;left: 10rpx;" :checked="item.ifChoose" />
</view>
</label>
</view>
</checkbox-group>
</view>
<!-- -----------------------------------支付之后有额外服务，没有选额外服务的弹窗------------------------- -->
<u-popup :show="showExtraPop" :round="20" @close="showExtraPop = false" closeable>
<view class="extra-wrap">
<view style="font-weight: bold;font-size: 32rpx;">
云智能导览耳机
</view>
<view style="color: #666666;margin:40rpx 0;">
深度了解索道典故由来，周边攻略推荐
</view>
<view>
<text @click="extraNo()" class="btn" style="background: #fff;color: #333;border: 1px solid #c0c0c0;">
不需要
</text>
<text @click="extraYes()" class="btn" style="margin-left: 40rpx;">
需要
</text>
</view>
</view>
</u-popup>
</view>
<view class="middle-divider">
</view>
<!-- ---------------------------------------------游客信息-------------------------------------------- -->
<view class="middle-bottom" v-if="productIfo.tripTemplateFlag != 2">
<view class="middle-visitor">
<view class="visitorTitle">
<text class="title-text"> 用户信息 </text>
<text>
需填<text class="title-bold">{{ contactNum }}</text>位出行人
<!-- <text class="title-bold" v-if="contactNum - chooseContact.length > 0">，还需{{ contactNum - chooseContact.length }}位</text> -->
</text>
</view>
<view class="visitorPlus" v-if="contactTotal.length>0">
<!-- 这里key必须是index,如果是id会出现数据改变和样式不改变的bug -->
<view
class="plus-list"
:class="{on:item.ifChoose}"
v-for="(item, index) of contactTotal.slice(0, 3)"
@click="visitorChoose(index)"
:key="index"
>
{{ item.name }}
<view v-if="item.ifChoose" class="date-icon">
<u-icon name="checkmark" color="#ffffff"></u-icon>
</view>
</view>
<view @click="showContacts()" class="plus-list plus-list-last">
选择/新增
<u-icon name="arrow-right" color="#3688FF"></u-icon>
</view>
</view>
<view class="visitorBtn" v-else @click="$refs.editContacts.showEdit = true">
<u-icon name="plus-circle" color="#3688FF" size="52"></u-icon>
<text style="margin-left:16rpx;">新增</text>
</view>
<view class="visitorEdit" v-show="chooseContact.length > 0">
<view class="edit-list" v-for="(item, index) of chooseContact" :key="item.id">
<view @click="delChooseContact(item, index)">
<u-icon name="close-circle" color="#3688ff" size="40"></u-icon>
</view>
<view>
{{ item.name }}
</view>
<view>
{{ item.credentialNumber ? item.credentialNumber.substr(0, 3) + '****' + item.credentialNumber.substr(14, 4) : '' }}
</view>
<view @click="showEdit(item)">
<u-icon name="edit-pen-fill" color="#3688ff" size="48"></u-icon>
</view>
</view>
</view>
</view>
<view class="middle-phone" v-if="productIfo.tripTemplateFlag != 2">
<text> 联系电话： </text>
<input type="number" maxlength="11" placeholder="请输入联系电话" v-model.trim="ticketPhone" />
</view>
</view>
<!-- ---------------------------------------------产品押金部分---------------------------------------- -->
<view class="productDeposit" v-if="productIfo.deposit">
<view>
{{ productIfo.name }}
<text style="color: #FC6703;margin-left: 10rpx;">押金</text>
</view>
<view style="color: #FC6703"> {{ productIfo.deposit }}元 </view>
</view>
</view>
<view class="bottom">
<view class="bottom-left">
<text> ¥{{ originalTotal || 0 }} </text>
<text> <text>¥</text>{{ sellTotal || 0 }} </text>
</view>
<view class="bottom-right">
<view @click="showDetail()" class="bottom-detail">
明细
<u-icon name="arrow-down"></u-icon>
</view>
<view class="bottom-btn">
<text v-if="productIfo.status == 1">已下架</text>
<template v-else>
<text v-if="parseInt(maxBookNum) <1">暂无库存</text>
<text v-if="parseInt(maxBookNum) >0" @click="goPay()" style="background:#3688FF;">去支付</text>
</template>
</view>
</view>
</view>
<calendar ref="calendar" @dateConfig="dateConfig" :dateList="dateList" v-if="dateList.length > 0"></calendar>
<buyKnow ref="buyKnow" :buyKnowData="buyKnowData"></buyKnow>
<detail
ref="detail"
:sellTotal='sellTotal'
:merchantName="productIfo.merchantName"
:name="productIfo.name"
:buyNum="buyNum"
:sellingPrice="sellingPrice"
:chooseService="chooseService"
:productDepositTotal="productDepositTotal"
:chooseCouponObj="chooseCouponObj"
></detail>
<chooseArea
v-if="showArea"
:areaList="productIfo.productAreaList"
@areaSure="areaSure"
:sortArr="sortArr"
:defaultAreaCode="defaultAreaCode"
></chooseArea>
<times ref="times" :chooseTimeList="timeList" @timeConfig="timeConfig" :timeActive="timeActive"></times>
<editContacts ref="editContacts" :editContact="editContact" :contactTotal="contactTotal"></editContacts>
<contactList
ref="contactList"
@getEditContact="getEditContact"
:contactTotal="contactTotal"
:contactNum="contactNum"
></contactList>
<orderCoupon :couponData="couponData" ref="orderCoupon" @couponChoose="couponChoose" :chooseCouponObj="chooseCouponObj"></orderCoupon>
<!--一个站点时获取排队信息弹窗-->
<!-- <u-popup :show="sortInforPop" :round="10" closeable @close="sortInforPop = false">
<view style="padding: 40rpx 60rpx">
<view>
景区名称：
<text class="sortPoptext" style="font-size: 28rpx">{{ productIfo.merchantName }}</text>
</view>
<view style="margin-top: 40rpx">
排队人数：
<text class="sortPoptext">{{ sortIfo.peopleNumber }}</text>
</view>
<view style="margin-top: 40rpx">
当前可排队：
<text class="sortPoptext">{{ sortIfo.showStart }}-</text>
<text class="sortPoptext">{{ sortIfo.showEnd }}</text>
</view>
<view style="margin-top: 40rpx">
当前排号至：
<text class="sortPoptext">{{ sortIfo.sortTotalCapacity }}</text>
</view>
<view style="margin-top: 40rpx; text-align: center" @click="sortInforPop = false">
<text class="middle-btn">确定</text>
</view>
</view>
</u-popup> -->
</view>
</template>
<script>
import calendar from '../scenicComponents/calendar' //日历组件
import buyKnow from '@/components/buyKnow.vue' //购票须知
import orderCoupon from '@/components/orderCoupon' //优惠券
import detail from '../scenicComponents/detail.vue' //明细弹窗
import chooseArea from '../scenicComponents/chooseArea' //选择站点
import contactList from '../scenicComponents/contactList' //联系人弹窗
import editContacts from '../scenicComponents/editContacts' //编辑联系人弹窗
import times from '../scenicComponents/times' //更多时间弹窗
export default {
components: {
calendar,
buyKnow,
detail,
contactList,
editContacts,
times,
chooseArea,
orderCoupon
},
data() {
return {
defaultAreaCode: '', //默认站点
sortArr: [], //多个站点排号信息列表
sortIfo: '', //单个站点排号信息
sortInforPop: false, //一个站点时获取排队信息弹窗
showErmai: true, //临时的，选择了南站不显示耳麦
showArea: false, //控制选择站点显示隐藏
areaUp: false, //排号是否上架
active: 10000, //日期下标
timeActive: 10000, //时间下标，默认不选中
buyNum: 1, //订单数量
maxBookNum: 999, //最大预订数量
dateList: [], //日期列表
timeList: [], //时间列表
buyKnowData: '', //购买须知数据
editContact: '', //编辑联系人传值对象
productId: '', //产品Id
merchantId: '', //商户Id
ticketPhone: '', //联系电话
productIfo: '', //初始化产品基本信息
originalPrice: 0, //原价单价
sellingPrice: 0, //卖价单价
interfaceCode: '', //接口编号
merchantCode: '', //商户code
productCode: '', //产品code
contactTotal: [], //所有联系人列表
chooseContact: [], //选中的游客信息列表
contactNum: 1, //需要选择几位联系人数量
cruisePlanId: '', //班次Id
timeNumber: '', //当前时间转化为数字
startDate: '', //开始日期
endDate: '', //结束日期
startPlayTime: '', //开始时间
endPlayTime: '', //结束时间
areaObj: {}, //区域组件的传值
templateList: [], //该产品联系人必须要填写的信息
timeFlag: '', //setTimeout函数
savedMoney: 0, //优惠价格
serviceList: [], //所有额外服务
chooseService: [], //选中的额外服务
extraPrice: 0, //额外服务总价格
showExtraPop: false, //控制支付时有额外服务，没有选中额外服务的弹窗显示隐藏
orderProductList: [], //额外服务，儿童票等入参
productDepositTotal: 0, //产品总押金
orderSource: '', //订单来源 1公众号平台、2公众号组合页面1、3公众号组合页面2、4胖丁伙伴app、5第三方自助机、6第三方票房窗口
thirdOpenid: '', //第三方openid
beforeBookDays: '', //需提前预定天数
companyId: '', //公司Id
docQuery: '', //元素变量
dateScroll: '', //日期滚动值
timeScroll: '' ,//时间滚动值
openid:uni.getStorageSync('openid') || '',//openid
couponData:[], //所有劵数据
chooseCouponObj: '', //默认选中最优价格优惠券
ableConpon: '', //没有可用优惠券时，达到一定条件可用，显示达到的条件
}
},
onLoad(option) {
let times = new Date().Format('yyyy-MM-dd hh:mm:ss')
this.timeNumber = parseInt(this.$commonjs.changeTime(times)) //将当前时间转化为数字
this.companyId=this.$commonjs.getCompanyId(option)|| ''
this.orderSource = this.$commonjs.getKey(option,'orderSource')|| ''
this.thirdOpenid = this.$commonjs.getKey(option,'thirdOpenid')|| '' //第三方openid
this.productId = this.$commonjs.getKey(option,'productId') || ''
this.initData() //页面初始化数据
this.docQuery = uni.createSelectorQuery().in(this)
},
computed: {
originalTotal() {
//原价总价
if (this.chooseService.length > 0) {
//额外服务价格和押金总价格
let singleProduct = 0 //单个产品押金
this.extraPrice = 0
this.extraDepositTotal = 0 //总押金
for (let i = 0; i < this.chooseService.length; i++) {
this.extraPrice += parseFloat((this.chooseService[i].sellingPrice * this.buyNum).toFixed(2))
if (this.chooseService[i].depositType == 1) {
//等于1，押金金额跟数量没关系
singleProduct = this.chooseService[i].deposit
} else if (this.chooseService[i].depositType == 2) {
//等于2，押金单价乘购买数量
singleProduct = parseFloat((this.chooseService[i].deposit * this.buyNum).toFixed(2))
}
this.extraDepositTotal += singleProduct
}
} else {
this.extraPrice = 0
this.extraDepositTotal = 0
}
if (this.productIfo.deposit) {
//如果有押金
if (this.productIfo.depositType == 1) {
//等于1，押金金额跟数量没关系
this.productDepositTotal = this.productIfo.deposit
} else if (this.productIfo.depositType == 2) {
//等于2，押金单价乘购买数量
this.productDepositTotal = parseFloat((this.productIfo.deposit * this.buyNum).toFixed(2))
}
} else {
this.productDepositTotal = 0
}
return parseFloat((this.originalPrice * this.buyNum + this.productDepositTotal + this.extraPrice + this.extraDepositTotal).toFixed(2)) //产品总价+产品押金+额外产品总价+额外产品押金-优惠价格
},
sellTotal() {
//卖价总价
if (this.chooseService.length == 0) {
this.extraPrice = 0
this.extraDepositTotal = 0
}
return parseFloat(
(this.sellingPrice * this.buyNum + this.productDepositTotal + this.extraPrice + this.extraDepositTotal - this.savedMoney).toFixed(2)
) //产品总价+产品押金+额外产品总价+额外产品押金-优惠价格
}
},
methods: {
//---页面初始化数据，获取产品基本信息
initData() {
let data = {
id: this.productId //产品id
}
uni.showLoading({
title: '加载中',
mask:true
})
this.$request('scenic/groupGood/loadProduct', data).then(res => {
if (res.code == '00') {
this.productIfo = res.data
this.defaultAreaCode = this.productIfo.defaultAreaCode || ''
this.merchantCode = this.productIfo.merchantVo.code, //商户code
this.productId = res.data.id//产品id变化，重新赋值产品id
this.merchantId = res.data.merchantId //重新赋值商户id
this.beforeBookDays = res.data.beforeBookDays || 0 //提前预定天数
this.buyKnowData = res.data //购买须知，传给子组件
this.serviceList = res.data.loadProductResVoList //额外服务
//this.chooseService=res.data.data.loadProductResVoList//默认全部选中
if (this.productIfo.status == 1) {
//下架状态
return
}
if (this.productIfo.productType != 3) {
//不为班次票时，开始时间为当前时间，结束时间为23:59:59
this.startPlayTime = new Date().Format('hh:mm:ss')
this.endPlayTime = '23:59:59'
}
this.getPriceList()
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---获取产品价格库存列表
getPriceList() {
let data = {
productId: this.productId //产品id
}
this.$request('scenic/user/product/priceStockList', data).then(res => {
if (res.code == '00') {
this.dateList = res.data //日期列表
if (this.dateList.length > 0) {
let time1 = this.dateList[0].startTime.substr(0, 10) + this.productIfo.bookTime //获取价格列表的第一个日期+预订最晚时间
let timeNum1 = parseInt(this.$commonjs.changeTime(time1))
let time2 = new Date().Format('yyyy-MM-dd hh:mm:ss')
let timeNum2 = parseInt(this.$commonjs.changeTime(time2)) //将当前时间转化为数字
if (timeNum2 > timeNum1) {
//如果当前时间大于价格列表第一个日期+预订最晚时间，第一个价格不显示
this.dateList.splice(0, 1)
}
this.dateList.forEach((item, index) => {
//价格上面时间小于当前时间加上需预定天数之后的需删除
let date = new Date()
date.setDate(date.getDate() + this.beforeBookDays)
let newDate = date.Format('yyyy-MM-dd')
let priceTime = this.$commonjs.changeTime(item.endTime.substr(0, 10))
let newTime = this.$commonjs.changeTime(newDate)
if (priceTime < newTime) {
delete this.dateList[index]
}
})
this.dateList = this.dateList.filter(val => {
return val
})
if (this.dateList.length == 0) {
uni.showToast({
title: '没有库存',
icon: 'none'
})
this.maxBookNum=0
return
}
if (this.productIfo.isFetch == 1) {
this.sortUpDown()
}
if (this.productIfo.tripTemplateFlag != 2) {
//等于2时不需要填写联系人信息和手机号码
this.getContactList()
}
if (this.dateList.length == 1 && this.beforeBookDays == 0) {
//长度为1而且只能预订当天，默认选中
this.$nextTick(()=>{
this.dateChoose(0)
})
}
} else {
uni.showToast({
title: '没有库存',
icon: 'none'
})
this.maxBookNum=0
return
}
let today = this.$commonjs.today() //今天
let tomorrow = this.$commonjs.tomorrow() //明天
let afterTomorrow = this.$commonjs.afterTomorrow() //后天
this.dateList.forEach((item, index) => {
item.week = '日一二三四五六'.charAt(new Date(item.startTime.substr(0, 10)).getDay())
if (item.startTime.substr(0, 10) == today) {
item.week = '今天'
}
if (item.startTime.substr(0, 10) == tomorrow) {
item.week = '明天'
}
if (item.startTime.substr(0, 10) == afterTomorrow) {
item.week = '后天'
}
})
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---排号是否上下架
sortUpDown() {
let data = {
merchantCode: this.merchantCode //商户code
}
uni.showLoading({
title: '加载中',
mask:true
})
this.$request('distribution/distribution/findNewFetchInfoFromSceinc', data).then(res => {
if (res.code == '00') {
this.sortArr = res.data.data
let data = res.data
let areaList=this.productIfo.productAreaList
if (areaList.length > 1) {
//有库存并且需要选择两个站点以上的票种，显示区域组件
for (let item in data.main) {
if (data.main[item].sceneSortStatus == '1'){
//上架
this.areaUp = true
this.showArea = true
//通过默认站点找到站点数据
if (this.defaultAreaCode) {
areaList.forEach(item => {
if (item.areaCode == this.defaultAreaCode) {
this.areaObj.areaCode = item.areaCode
this.areaObj.areaName = item.areaName
}
})
}
}
}
} else if (areaList.length == 1) {
//只有一个站点时，直接选中站点(现目前还没有一个站点的景区)
for (let item in data.main) {
if (data.main[item].sceneSortStatus == '1') {
//上架
this.areaUp = true
this.areaObj.areaCode = areaList[0].areaCode
this.areaObj.areaName = areaList[0].areaName
}
}
}
}
})
},
//---获取班次票
getTimeStock() {
this.timeList=[]
let data = {
endDate: this.endDate, //结束日期
startDate: this.startDate, //开始日期
interfaceCode: this.productIfo.merchantVo.interfaceCompanyId, //接口编号
merchantCode: this.merchantCode, //商户code
productCode: this.productIfo.code //产品code
}
uni.showLoading({
title: '加载中',
mask:true
})
this.$request('distribution/distribution/getTimeStock', data).then(res => {
if (res.code == '00') {
this.timeList = res.data||[]
this.timeList.forEach((item, index) => {
//增加一个时间Number字段，用于判断当前时间大于班次结束时间时，显示售罄
let text=parseFloat((item.last/item.total).toFixed(2))||0
if(text>0.4){
item.copyLast='余票充足'
}else{
item.copyLast=item.last
}
item.timeNumber = parseInt(this.$commonjs.changeTime(item.planDate.substr(0, 10) + item.endPlanTime))
if (this.timeNumber > item.timeNumber || item.last <= 0) {
item.copyLast='售罄'
}
})
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---获取排号信息
getSortInfor() {
let data = {
areaCode: this.areaObj.areaCode,
merchantCode: this.merchantCode //商户code
}
uni.showLoading({
title: '加载中',
mask:true
})
this.$request('distribution/distribution/findNewFetchInfoFromSceinc', data).then(res => {
if (res.code == '00') {
this.sortInforPop = true
res.data.forEach(item => {
item.peopleNumber = Math.max(item.sortTotalCapacity - item.showEnd, 0)
})
let index = res.data.findIndex(item => {
return item.projectId == this.areaObj.areaCode
})
this.sortIfo = res.data[index]
}
})
},
//---获取子组件的传值
areaSure(data) {
this.areaObj = data
if (this.areaObj.areaCode == 'cjsd_project_0001') {
//选择了南站不显示耳麦
this.showErmai = false
this.chooseService = []
//多选框状态设置成未选中
this.serviceList.forEach(item=>{
item.ifChoose=false
})
} else {
this.showErmai = true
}
},
//---展示选择站点
openArea() {
this.showArea = true
},
//---关闭选择站点
closeArea() {
this.showArea = false
},
//---展示详情弹窗
showDetail() {
this.$refs.detail.showPop = true
},
//---展示日历
showCalendar() {
this.$refs.calendar.showPop = true
},
//---日期选择
dateChoose(index) {
this.active = index //修改选中样式
this.maxBookNum = Math.min(this.dateList[index].surplus, this.productIfo.maxBookNum) //剩余量变化
this.originalPrice = this.dateList[index].originalPrice //原价变化
this.sellingPrice = this.dateList[index].sellingPrice //卖价变化
this.endDate = this.dateList[index].endTime //开始日期
this.startDate = this.dateList[index].startTime //结束日期
this.$refs.calendar.defaultDate = this.dateList[index].startTime.substr(0, 10) //日历组件选中日期
this.initCoupon()
if(this.productIfo.productType == 3){
//productType=3为场次票
this.cruisePlanId = '' //清空班次id
this.timeActive = 10000
this.getTimeStock()
}
// uni.$u.throttle(()=>{
// 1.通过日历插件选择日期之后未执行该方法
// 2.用了该方法之后点击其他日期也会3秒之内无效果，
// },3000)
},
//---日历确认事件
dateConfig(data) {
let index = this.dateList.findIndex(item => {
return item.startTime.substr(0, 10) == data
})
this.dateChoose(index)
this.docQuery.selectAll('.date-list').boundingClientRect(data => {
this.dateScroll = (data[index].width + 6) * index
}).exec()
},
//---展示更多时间
showTime() {
this.$refs.times.showPop = true
},
//---时间选择
chooseTime(i) {
if(this.timeList[i].copyLast!='售罄'){
this.timeActive = i
this.cruisePlanId = this.timeList[i].cruisePlanId //获取班次Id
this.maxBookNum = Math.min(this.timeList[i].last, this.maxBookNum) //获取剩余库存
//如果为班次票,开始时间为班次时间的开始时间，结束时间为班次时间的结束时间，班次时间的结束时间为空时，结束时间为班次时间的开始时间
this.startPlayTime = this.timeList[i].startPlanTime
this.endPlayTime = this.timeList[i].endPlanTime || this.timeList[i].startPlanTime
}
},
//---时间确认事件
timeConfig(index) {
this.chooseTime(index) //选中确认的日期
this.docQuery.selectAll('.time-list').boundingClientRect(data => {
this.timeScroll = (data[index].width + 6) * index
}).exec()
},
//---获取点击的编辑联系人信息，传给编辑联系人组件
getEditContact(data) {
this.editContact = data
},
//---删除选中的联系人
delChooseContact(item, index) {
//所有联系人中找到删除联系人下标，改成未选中状态
let sub = this.contactTotal.findIndex(item2 => item2.id == item.id)
this.contactTotal[sub].ifChoose = false
this.chooseContact.splice(index, 1) //删除数组
},
//---展示编辑联系人
showEdit(obj) {
this.$refs.editContacts.showEdit = true
this.editContact = obj
},
//---展示新增联系人，并获取联系人列表
showContacts() {
this.$refs.contactList.showPop = true
},
//---游客选择
visitorChoose(i) {
let chooseList = this.chooseContact
let data = this.contactTotal
data[i].ifChoose = !data[i].ifChoose
if (data[i].ifChoose) {
if (chooseList.length == this.contactNum) {
//需要人数满足时，点击增加联系人时，删除最后一个，增加点击的那个人
chooseList[chooseList.length - 1].ifChoose = false
chooseList.splice(chooseList.length - 1, 1)
}
chooseList.push(data[i]) //加入数组
} else {
let index = chooseList.findIndex(items => {
return items.id == data[i].id
})
chooseList.splice(index, 1) //删除数组
}
this.$forceUpdate()
},
//---订单数量变化
buyNumChange(e) {
if (e.value >= this.maxBookNum) {
uni.showToast({
title: '最大可预订数量为' + this.maxBookNum,
icon: 'none'
})
}
if (this.productIfo.tripTemplateFlag == 1) {
//实名制
this.contactNum = e.value
if (this.chooseContact.length>this.contactNum) {
//当选中联系人数量大于购买数量时
this.chooseContact.splice(this.chooseContact.length - 1, 1) //删除多余的联系人
//联系人列表重新判断是否选中
this.contactTotal.forEach(item=>{
item.ifChoose=false
})
this.chooseContact.forEach(item=>{
this.contactTotal.forEach(item2=>{
if(item.id==item2.id){
item2.ifChoose=true
}
})
})
}
}
if (this.productIfo.tripTemplateFlag == 0) {
//非实名制
this.contactNum = 1
}
clearTimeout(this.timeFlag)
this.timeFlag = setTimeout(()=>{
this.initCoupon()
}, 1500)
},
//---展示购票须知
showBuyKnow() {
this.$refs.buyKnow.showPop = true
},
//---初始化联系人列表
getContactList() {
let data = {
openid:this.openid
}
this.$request('wechatUser/contact/findContactList', data).then(res => {
if (res.code == '00') {
this.contactTotal = res.data
this.contactTotal.forEach(item => {
//用于判断是否被选中
item.ifChoose = false
})
//编辑成功重新调该方法时，把之前选中的游客，设为选中状态
this.contactTotal.forEach(item => {
this.chooseContact.forEach(item2 => {
if (item.id == item2.id) {
item.ifChoose = true
}
})
})
//删除联系人成功重新调该方法时，之前选中的联系人，数据库可能被删除，删除该联系人
this.chooseContact.forEach((item, index) => {
if (!this.contactTotal.find(item2 => item.id == item2.id)) {
this.chooseContact.splice(index, 1)
}
})
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---添加并选中联系人--用于添加联系人之后直接从联系人列表选出需要填写的几位联系人
addChoose() {
let data = {
openid:this.openid
}
this.$request('wechatUser/contact/findContactList', data).then(res => {
if (res.code == '00') {
this.contactTotal = res.data
for (let i = 0; i < this.contactNum; i++) {
let item = this.contactTotal[i] || null
if (item) {
item.ifChoose = true
}
}
this.chooseContact = this.contactTotal.slice(0, this.contactNum)
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---加载优惠券
initCoupon() {
let savedMoneyList = []
this.chooseCouponObj = ''
this.ableConpon = ''
this.couponData=[]
let data = {
productId: this.productId, //产品id
tickets: this.buyNum, //房间数量
singleMoney: this.sellingPrice, //单价
money: parseFloat((this.buyNum * this.sellingPrice).toFixed(2)), //订单总价，不算券，和现金红包
merchantId: this.merchantId, //商户Id
openid:this.openid
}
this.$request('wechatUser/myPage/usableCouponList', data).then((res) => {
if (res.code == '00') {
this.couponData = res.data
let masterSlaveCouponList=res.data.masterSlaveCouponList
if (masterSlaveCouponList&&masterSlaveCouponList.length>0) {
masterSlaveCouponList.forEach((item) => { //获取最优券
savedMoneyList.push(item.savedMoney)
})
let maxMoney = Math.max.apply(null, savedMoneyList)
let arr=masterSlaveCouponList.filter((item)=>{//找到最大值的数组
return item.savedMoney==maxMoney
})
if(arr.length==1){
this.chooseCouponObj=arr[0]
}else{
let index=arr.findIndex((item)=>{//如果有多个，找到是否有平台券，平台劵优先
return item.createSource==1
})
if(index>-1){
this.chooseCouponObj=arr[index]
}else{
this.chooseCouponObj=arr[0]
}
}
this.savedMoney=this.chooseCouponObj.savedMoney
} else {
if (res.data.unusableCouponList.length > 0) {
res.data.unusableCouponList.forEach((item, i) => { //没有可用优惠券，有达到条件可以用的优惠券，先显示条件，达到条件时显示可用优惠券
if (item.isProduct == 1) {
this.ableConpon = item
}
})
}
}
}
})
},
//---获取优惠价格
getDiscountPrice() {
let data = {
productId: this.productId, //产品ID
merchantId: this.merchantId, //商家ID
companyId: this.companyId, //公司ID
openid: this.openid //openid
}
this.$request('scenic/user/productRule/getProductRule', data).then(res => {})
},
//---子组件券选择之后触发的事件
couponChoose(data) {
if(data){
this.chooseCouponObj = data
this.savedMoney=this.chooseCouponObj.savedMoney||0
}else{
this.chooseCouponObj = ''
this.savedMoney=0
}
},
//---展示券列表
showCoupon() {
this.$refs.orderCoupon.showPop=true
},
//---额外服务多选框变化
extraChange(e) {
this.chooseService=[]
//解决数据修改之后，多选框未选中bug
this.serviceList.forEach(item=>{
item.ifChoose=false
})
let value=e.detail.value
value.forEach(item=>{
this.chooseService.push(JSON.parse(item))
})
//获取选中的多选框为选中状态
this.serviceList.forEach(item=>{
this.chooseService.forEach(item2=>{
if(item.id==item2.id){
item.ifChoose=true
}
})
})
},
//---不需要享受耳麦服务
extraNo() {
this.showExtraPop = false
this.placeOrder()
},
//---需要享受耳麦服务
extraYes() {
this.showExtraPop = false
this.serviceList.forEach(item=>{
item.ifChoose=true
})
this.chooseService = this.serviceList
this.placeOrder()
},
//---点击去支付
goPay() {
if (this.serviceList.length == 0) {
//没有额外服务，直接支付
this.placeOrder()
}
if (this.serviceList.length > 0) {
//有额外服务，并且选择了额外服务的，直接支付
if (this.chooseService.length > 0) {
this.placeOrder()
}
}
if (this.serviceList.length > 0) {
//有额外服务，没有选中额外服务的，弹出提示框
if (this.productIfo.tripTemplateFlag != 2) {
if (!this.$commonjs.phoneReg().test(this.ticketPhone)) {
//未填写正确手机号码
uni.showToast({
title: '请填写正确的手机号码',
icon: 'none'
})
return
}
}
if (this.productIfo.tripTemplateFlag == 1) {
//实名制
if (this.chooseContact.length != this.buyNum) {
uni.showToast({
title: '需要添加' + this.buyNum + '位出行人',
icon: 'none'
})
return
}
} else if (this.productIfo.tripTemplateFlag == 0) {
//非实名制
if (this.chooseContact.length < 1) {
uni.showToast({
title: '需要添加一位出行人',
icon: 'none'
})
return
}
}
if (this.productIfo.productType == 3) {
//如果为班次票，需要选择班次
if (this.cruisePlanId == '') {
uni.showToast({
title: '该票为班次票,请选择游玩时间',
icon: 'none'
})
return
}
}
if (this.productIfo.isFetch == 1 && this.areaUp) {
//需要选择站点的票种，必须选择站点
if (!this.areaObj.areaCode) {
uni.showToast({
title: '请选择站点',
icon: 'none'
})
return
}
}
if (this.chooseService.length == 0 && this.showErmai) {
//没有购买额外服务，并且选择的北站，跳出弹窗
this.showExtraPop = true
}
if (this.chooseService.length == 0 && !this.showErmai) {
//没有购买额外服务，并且选择的南站，直接购买
this.placeOrder()
}
}
},
//---下单
placeOrder() {
if (this.dateList.length == 0) {
//价格库存为空时，点击无效
return
}
if (this.productIfo.status == 1) {
//下架状态，点击无效
return
}
if (this.productIfo.tripTemplateFlag != 2) {
//需要填写电话号码
if (!this.$commonjs.phoneReg().test(this.ticketPhone) && this.productIfo.tripTemplateFlag != 2) {
//未填写正确手机号码
uni.showToast({
title: '请填写正确的手机号码',
icon: 'none'
})
return
}
}
if (!this.startDate || !this.endDate) {
uni.showToast({
title: '请选择游玩日期',
icon: 'none'
})
return
}
if (this.productIfo.tripTemplateFlag == 1) {
//实名制
if (this.chooseContact.length != this.buyNum) {
uni.showToast({
title: '需要添加' + this.buyNum + '位出行人',
icon: 'none'
})
return
}
} else if (this.productIfo.tripTemplateFlag == 0) {
//非实名制
if (this.chooseContact.length < 1) {
uni.showToast({
title: '需要添加一位出行人',
icon: 'none'
})
return
}
}
if (this.productIfo.productType == 3) {
//如果为班次票，需要选择班次
if (this.cruisePlanId == '') {
uni.showToast({
title: '该票为班次票,请选择游玩时间',
icon: 'none'
})
return
}
}
if (this.productIfo.isFetch == 1 && this.areaUp) {
//需要选择站点的票种，必须选择站点
if (!this.areaObj.areaCode) {
uni.showToast({
title: '请选择站点',
icon: 'none'
})
return
}
}
this.preOrder()
},
//---预下单
preOrder() {
//参数游客信息组装
let orderTouristList = this.chooseContact.map((item) => {
return {
category: 0,
name: item.name,
credentialNumber: item.credentialNumber
}
})
let couponList = []
if (this.chooseCouponObj) {
if(this.chooseCouponObj.slaveList.length>0){//有从券取值从券，没有从券取值主劵
couponList=[//券列表
{
couponId:this.chooseCouponObj.slaveCouponId,//券id
isMerchant:this.chooseCouponObj.slaveCreateSource,//是否是商户的券
myCouponId:this.chooseCouponObj.slaveId,//领取人编号
couponType:this.chooseCouponObj.couponType,//券类型
couponPrice:this.chooseCouponObj.savedMoney,//券价格
}
]
}else{
couponList=[
{
couponId:this.chooseCouponObj.couponId,//券id
isMerchant:this.chooseCouponObj.createSource,//是否是商户的券
myCouponId:this.chooseCouponObj.id,//领取人编号
couponType:this.chooseCouponObj.couponType,//券类型
couponPrice:this.chooseCouponObj.savedMoney,//券价格
}
]
}
}
//额外服务不为空，联票购买不为空，带有儿童票，组合购买不为空，单品购买为空
if (this.chooseService.length > 0) {
this.orderProductList = this.chooseService.map((item) => {
return {
distributionPrice: item.sellingPrice, //临时用
productId: item.id, //产品Id
buyNum: this.buyNum, //购买数量
subOrderType: 0, //产品类型，网络
unitPrice: item.sellingPrice, //产品单价
merchantId: item.merchantId, //商户id
orderTouristList, //游客信息
playDate: this.startDate.substr(0, 10), //开始日期
endPlayDate: this.endDate.substr(0, 10), //结束日期
isMaster: 1, //是否主产品 1 否， 0 是
startPlayTime: this.startPlayTime, //开始时间
endPlayTime: this.endPlayTime, //结束时间
}
})
}else{
this.orderProductList=[]
}
let data = {
companyId: this.companyId, //公司Id
buyMethod: 1, // 单品购买，2套票、联票购买，3组合购买
userId: this.openid,//用户id
ticketPhone: this.ticketPhone, //联系电话
cash: 0, //现金红包
orderMoney: this.sellTotal, //订单总价 = 订单原价 - 优惠券价格 - 现金抵扣价格
orderType: 1, //订单类型,景区
orderSource:this.orderSource||1, //订单来源 1公众号平台、2公众号组合页面1、3公众号组合页面2、4胖丁伙伴app、5第三方自助机、6第三方票房窗口
orderProductList: this.orderProductList, //额外服务不为空，联票购买不为空，带有儿童票，组合购买不为空，单品购买为空
orderProductVo: //产品信息列表
{
bookTime:this.productIfo.bookTime,//最晚预定时间
earlyBookTime:this.productIfo.earlyBookTime,//最早预定时间
extendContent:'{"openid":'+'"'+this.openid+'"'+','+'"zr":'+'"'+this.thirdOpenid+'"'+'}',
productId: this.productId, //产品Id
buyNum: this.buyNum, //购买数量
subOrderType: 0, //产品类型，网络
cruisePlanId: this.cruisePlanId, //班次id
unitPrice: this.sellingPrice, //产品单价
distributionPrice: this.sellingPrice, //临时用
merchantId: this.merchantId, //商户id
orderTouristList, //游客信息
playDate: this.startDate.substr(0, 10), //开始日期
endPlayDate: this.endDate.substr(0, 10), //结束日期
isMaster: 0, //是否主产品 1 否， 0 是
startPlayTime: this.startPlayTime, //开始时间
endPlayTime: this.endPlayTime, //结束时间
productAreaCode:this.areaObj.areaCode, //选择的站点编码
couponList, //券列表
}
}
uni.showLoading({
title:'加载中',
mask:true
})
this.$request('orderc/order/createOrder', data).then((res) => {
if (res.code == '00') {
if (res.data.id) {
uni.navigateTo({
url: '/pages/payment/orderPayment/orderPayment?orderId='+res.data.id
})
} else {
uni.showToast({
title: '下单失败',
icon: 'none'
})
}
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
}
}
}
</script>
<style lang="scss" scoped="scoped">
.head {
height: 160rpx;
background: linear-gradient(to bottom, #2984ef, #d8eaf6);
}
.orderBox {
min-height: 100%;
background: #f5f5f5;
}
.middle {
position: relative;
top: -100rpx;
padding: 30rpx 20rpx;
background: #ffffff;
}
.title-text{
font-size: 32rpx;
font-weight: bold;
}
/*中间上面部分*/
.merchantName {
display: flex;
align-items: center;
}
.merchantName text:nth-child(2) {
color: #666666;
margin-left: 20rpx;
}
.buyKnow {
margin-top: 20rpx;
background: #fef0e6;
height: 56rpx;
font-size: 24rpx;
display: flex;
justify-content: space-between;
padding-left: 10rpx;
align-items: center;
border-radius: 5rpx;
color:$red;
}
.buyKnow view:nth-child(2) {
display: flex;
}
.middle-place {
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.middle-place view:nth-child(2) {
flex: 1;
margin-left: 20rpx;
color: $theme;
font-size: 28rpx;
font-weight: bolder;
}
.middle-Date{
margin-top: 40rpx;
}
.middle-Datelist {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30rpx;
}
.date-content {
flex: 1;
overflow-x: scroll;
white-space: nowrap;
}
.date-content::-webkit-scrollbar {
display: none;
}
.date-list {
width: 140rpx;
text-align: center;
margin-right:12rpx;
border-radius: 10rpx;
position: relative;
display: inline-block;
background: #f2f2f2;
padding-bottom: 8rpx;
}
.date-list.on {
border: 1px solid $theme;
background: #DAE6F6;
}
.date-list>view{
margin-top: 6rpx;
}
.date-price {
font-size: 32rpx;
color: $red;
}
.no-date {
color: $red;
flex: 1;
margin-left: 30rpx;
font-weight: bolder;
}
.date-icon {
position: absolute;
right: -1px;
bottom: -1px;
display: inline-block;
width: 30rpx;
height: 28rpx;
background:$theme;
border-radius: 10rpx 0;
}
.dateMore {
flex-shrink: 0;
padding: 20rpx 0;
width: 120rpx;
display: flex;
justify-content: center;
align-items: center;
}
.date-more-content {
margin-right:8rpx;
}
.middle-time{
margin-top: 40rpx;
}
.middle-timelist {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30rpx;
}
.time-content {
flex: 1;
overflow-x: scroll;
white-space: nowrap;
height: 90rpx;
}
.time-content::-webkit-scrollbar {
display: none;
}
.time-list {
width: 200rpx;
height: 90rpx;
line-height: 30rpx;
text-align: center;
margin-right: 8rpx;
border-radius: 15rpx;
display: inline-block;
background:#f2f2f2;
position: relative;
padding-bottom: 8rpx;
}
.time-list view {
margin-top: 10rpx;
}
.time-list.on {
border: 1px solid $theme;
background: #DAE6F6;
}
.timeMore {
flex-shrink: 0;
width: 120rpx;
display: flex;
justify-content: center;
align-items: center;
}
.time-more-content {
margin-right:8rpx;
}
.no-time {
color:$red;
flex: 1;
font-weight: bolder;
}
.middle-divider{
height: 2rpx;
background:$divider;
margin: 40rpx 0;
}
.middle-Number {
display: flex;
justify-content: space-between;
align-items: center;
}
.number-minus {
width: 52rpx;
height: 52rpx;
background:#ccc;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.number-input {
padding:0 20rpx;
width: 100rpx;
text-align: center;
font-size: 40rpx;
}
.number-plus{
width: 52rpx;
height: 52rpx;
background:$theme;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.middle-coupon{
display: flex;
justify-content: space-between;
align-items: center;
padding:30rpx 0;
}
.middle-coupon view:first-child{
width: 36rpx;
height: 36rpx;
background: $theme;
color: #FFFFFF;
text-align: center;
line-height:32rpx;
border-radius:4rpx;
}
.middle-coupon view:nth-child(2){
flex: 1;
margin-left: 10rpx;
}
.middle-coupon view:nth-child(3){
display: flex;
color: $theme;
font-weight: bold;
}
/*中间下面部分*/
.middle-visitor {
padding-bottom: 40rpx;
border-bottom: 1px solid $divider;
}
.visitorTitle > text:nth-child(2) {
font-size: 24rpx;
color: #666666;
margin-left: 10rpx;
}
.title-bold {
color: #f9690e;
font-weight: bolder;
font-size: 28rpx;
}
.visitorBtn{
display: flex;
align-items: center;
justify-content: center;
height: 88rpx;
background:#ECF3FE;
margin-top: 40rpx;
color: $theme;
font-size: 32rpx;
border-radius:20rpx;
}
.visitorPlus {
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.plus-list {
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 5rpx 0;
width: 145rpx;
text-align: center;
background: #f2f2f2;
border-radius: 5rpx;
position: relative;
margin: 20rpx 15rpx 0 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.plus-list-last {
color: $theme;
background: #efefef;
width: 200rpx;
border: none;
}
.plus-list.on {
border: 1px solid $theme;
background: #DAE6F6;
}
.visitorEdit {
margin-top: 40rpx;
}
.visitorEdit > view:not(first-child) {
margin-top: 25rpx;
}
.edit-list {
display: flex;
justify-content: space-between;
align-items: center;
}
.edit-list view:nth-child(2) {
display: inline-block;
width: 120rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 30rpx;
}
.edit-list view:nth-child(3) {
flex: 1;
}
.middle-phone {
margin-top: 30rpx;
display: flex;
align-items: center;
}
.middle-phone input {
flex: 1;
}
/*押金部分*/
.productDeposit {
padding: 40rpx 15rpx;
background: #ffffff;
border-radius: 10rpx;
margin-top: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
/*额外服务部分*/
.extraService {
padding: 20rpx;
background:#DAE6F6;
margin-top: 30rpx;
border-radius: 10rpx;
}
.extraService label {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
color:#f45803;
}
.extra-wrap{
text-align: center;
padding-top: 100rpx;
height: 65vh;
}
/*底部部分*/
.bottom {
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff;
position: fixed;
bottom: 0;
width: 100%;
max-width: 750rpx;
z-index: 10;
padding: 0 24rpx 0 40rpx;
box-shadow: 0px 4px 12px rgba(0,0,0,0.16)
}
.bottom-left > text:first-child {
font-size: 28rpx;
text-decoration: line-through;
margin-right: 16rpx;
}
.bottom-left text:nth-child(2) {
font-size: 40rpx;
font-weight: bolder;
color: #f45803;
}
.bottom-left text:nth-child(2) text {
font-size: 32rpx;
}
.bottom-right {
display: flex;
align-items: center;
}
.bottom-detail {
display: flex;
}
.bottom-btn {
position: relative;
width: 240rpx;
height: 80rpx;
margin-left: 20rpx;
line-height: 80rpx;
font-size: 32rpx;
font-weight: bolder;
text-align: center;
}
.bottom-btn text {
position: absolute;
width: 100%;
height: 100%;
display: inline-block;
left: 0;
color: #ffffff;
top: 0;
background:#C0C0C0;
border-radius: 24rpx;
}
.sortPoptext {
font-size: 30rpx;
font-weight: bolder;
color: #f32048;
}
</style>
pages/scenic/scenicSingleOrder/scenicSingleOrder-备份.vue 0 → 100644
View file @ 0738836e
<template>
<view>
<web-view :src="outUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
enterUrl:'',//进入页面路由
outUrl:'',//跳出页面路由
}
},
onLoad(option) {
//#ifdef MP-WEIXIN
this.enterUrl=option.q
//#endif
//#ifdef MP-ALIPAY
this.enterUrl=uni.getStorageSync('alipayQrCode')
//#endif
if(this.enterUrl){//普通二维码扫码进入
let merchantId=this.getUrlKey('merchantId')
let productId=this.getUrlKey('productId')
let orderSource=this.getUrlKey('orderSource')
let companyId=this.getUrlKey('companyId')
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let baseUrl=this.$wxurl+'scenicSingleOrder?pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId
let url='&merchantId='+merchantId+'&productId='+productId+'&orderSource='+orderSource+'&companyId='+companyId
this.outUrl=baseUrl+url
}else{//小程序页面跳转进入
let merchantId=option.merchantId||''
let productId=option.productId||''
let orderSource=option.orderSource||''
let companyId=option.companyId||''
let ifyukuaiCode=option.ifyukuaiCode||''//是否是渝快码跳入，渝快码跳入需要在H5端另外走流程
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let baseUrl=this.$wxurl+'scenicSingleOrder?pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId
let url='&merchantId='+merchantId+'&productId='+productId+'&orderSource='+orderSource+'&companyId='+companyId+'&ifyukuaiCode='+ifyukuaiCode
this.outUrl=baseUrl+url
}
},
methods: {
getUrlKey(name){//---------------------------------------------------------------获取url
return(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(this.enterUrl)) || [, ''])[1].replace(/\+/g, '%20') || ''
},
}
}
</script>
<style>
</style>
pages/scenic/scenicSingleOrder/scenicSingleOrder.vue
View file @ 0738836e
<template>
<view class="orderBox">
<view class="head"> </view>
<view class="middle">
<view class="middle-top">
<!-- --------------------------------------------产品信息部分------------------------------------- -->
<view class="middle-Product">
<view class="merchantName">
<text class="title-text">
{{ productIfo.merchantName || '' }}
</text>
<text>
{{ productIfo.name || '' }}
</text>
</view>
<view @click="showBuyKnow()" class="buyKnow">
<view>
<text v-if="productIfo.backChangeRule == 0">不可退换</text>
<text v-if="productIfo.backChangeRule == 1">可退</text>
<text v-if="productIfo.backChangeRule == 2">随时可退</text>
<text v-if="productIfo.isFetch == 1">无需取号</text>
</view>
<view>
购买须知
<u-icon name="arrow-right" color='#FC6703'></u-icon>
</view>
</view>
</view>
<!--需要排队并且站点数大于1-->
<view class="middle-place" @click="openArea()" v-if="productIfo.isFetch == 1 && productIfo.productAreaList.length > 1 && areaUp">
<view> 出发站点 </view>
<view>
{{ areaObj.areaName || '请选择站点' }}
</view>
<view>
<u-icon name="arrow-right" color="#3688FF"></u-icon>
</view>
</view>
<!--需要排队并且为一个站点-->
<!-- <view class="middle-place" v-if="productIfo.isFetch == 1 && productIfo.productAreaList.length == 1 && areaUp" @click="getSortInfor()">
<view> 获取排队信息 </view>
<view>
{{ areaObj.areaName }}
</view>
<view>
<u-icon name="arrow-right" color="#3688FF"></u-icon>
</view>
</view> -->
<view class="middle-Date">
<view class="title-text">游玩日期</view>
<view class="middle-Datelist">
<scroll-view class="date-content" scroll-x="true" :scroll-left="dateScroll" v-if="dateList.length > 0">
<view class="date-list" v-for="(item, index) of dateList" :class="{ on: active == index }" @click="dateChoose(index)" :key="index">
<view v-if="item.week">
<text v-if="item.week != '今天' && item.week != '明天' && item.week != '后天'">周</text>
{{ item.week }}
</view>
<view>
{{ item.startTime ? item.startTime.substr(5, 5) : '' }}
</view>
<view class="date-price">
¥<text style="font-weight: bold;">{{ item.sellingPrice }}</text>
</view>
<view v-if="active == index" class="date-icon">
<u-icon name="checkmark" color="#ffffff"></u-icon>
</view>
</view>
</scroll-view>
<text v-else class="no-date"> 不可购买 </text>
<view class="dateMore" @click="showCalendar()">
<view class="date-more-content">
<view>更多</view>
<view>日期</view>
</view>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
</view>
<view class="middle-time" v-if="productIfo.productType == 3">
<view class="title-text"> 场次 </view>
<view class="middle-timelist">
<scroll-view class="time-content" scroll-x="true" :scroll-left="timeScroll" v-if="timeList.length> 0">
<view class="time-list"
:style="{color:item.copyLast=='售罄'?'#ff0000':''}"
v-for="(item, index) of timeList"
@click="chooseTime(index)"
:class="{ on: timeActive == index }"
:key="index"
>
<view >
{{ item.startPlanTime ? item.startPlanTime.substr(0, 5) : '' }}
<text v-if="!item.saleOnlyShowFromDate">
-{{ item.endPlanTime ? item.endPlanTime.substr(0, 5) : '' }}
</text>
</view>
<view>
<text v-if="item.copyLast!='余票充足'&&item.copyLast!='售罄'">剩余：</text>
{{ item.copyLast }}
</view>
<view v-if="timeActive == index" class="date-icon">
<u-icon name="checkmark" color="#ffffff"></u-icon>
</view>
</view>
</scroll-view>
<text class="no-time" v-if="startDate && endDate && timeList.length == 0"> 该日票种已售罄，请选择其他日期 </text>
<text class="no-time" v-if="!startDate || !endDate"> 请先选游玩日期 </text>
<view class="timeMore" @click="showTime()">
<view class="time-more-content">
<view>更多</view>
<view>场次</view>
</view>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
</view>
<view class="middle-divider">
</view>
<view class="middle-Number">
<view class="title-text"> 购买数量 </view>
<view>
<u-number-box v-model="buyNum" @change='buyNumChange' :max="maxBookNum">
<view slot="minus" class="number-minus" >
<u-icon name="minus" color="#FFFFFF" size="32"></u-icon>
</view>
<text slot="input" class="number-input">{{buyNum}}</text>
<view slot="plus" class="number-plus">
<u-icon name="plus" color="#FFFFFF" size="32"></u-icon>
</view>
</u-number-box>
</view>
</view>
<view class=" middle-coupon" v-if="couponData.length>0" @click="showCoupon()">
<view>
券
</view>
<!-- 有可用优惠券,并且未选中 -->
<template v-if="couponData.masterSlaveCouponList&&couponData.masterSlaveCouponList.length>0&&!chooseCouponObj">
<view>
{{couponData.masterSlaveCouponList[0].couponName}}
</view>
<view >
未使用优惠券
</view>
</template>
<!-- 有可用优惠券 -->
<template v-if="chooseCouponObj&&savedMoney>0">
<view>
{{chooseCouponObj.couponName}}
</view>
<view style="font-size: 32rpx;">
<text style="font-size: 24rpx;position: relative;top: 6rpx;">¥</text>
{{parseFloat(savedMoney.toFixed(2))}}
</view>
</template>
<!-- 可用优惠券条件-->
<template v-if="ableConpon">
<view>
{{ableConpon.couponName}}
</view>
<view>
{{ableConpon.couponRule}}
</view>
</template>
<u-icon name="arrow-right" color="#3688FF"></u-icon>
</view>
<!-- --------------------------------------------额外服务部分-------------------------------------------- -->
<view class="extraService" v-if="serviceList.length>0&&showErmai">
<checkbox-group @change="extraChange">
<view v-for="(item,index) of serviceList" :key="item.id">
<label>
<view>
<text>{{item.name}}</text>
<text style="font-size:20rpx;color: #666666;" v-if="item.deposit">(押金：¥{{item.deposit}})</text>
</view>
<view>
<text style="font-size: 24rpx;">¥</text>
<text style="font-size: 32rpx;font-weight: bold;">{{item.sellingPrice}}</text>
<checkbox class="blue" :value="JSON.stringify(item)" style="transform: scale(0.7);position: relative;left: 10rpx;" :checked="item.ifChoose" />
</view>
</label>
</view>
</checkbox-group>
</view>
<!-- -----------------------------------支付之后有额外服务，没有选额外服务的弹窗------------------------- -->
<u-popup :show="showExtraPop" :round="20" @close="showExtraPop = false" closeable>
<view class="extra-wrap">
<view style="font-weight: bold;font-size: 32rpx;">
云智能导览耳机
</view>
<view style="color: #666666;margin:40rpx 0;">
深度了解索道典故由来，周边攻略推荐
</view>
<view>
<web-view :src="outUrl"></web-view>
<text @click="extraNo()" class="btn" style="background: #fff;color: #333;border: 1px solid #c0c0c0;">
不需要
</text>
<text @click="extraYes()" class="btn" style="margin-left: 40rpx;">
需要
</text>
</view>
</view>
</u-popup>
</view>
<view class="middle-divider">
</view>
<!-- ---------------------------------------------游客信息-------------------------------------------- -->
<view class="middle-bottom" v-if="productIfo.tripTemplateFlag != 2">
<view class="middle-visitor">
<view class="visitorTitle">
<text class="title-text"> 用户信息 </text>
<text>
需填<text class="title-bold">{{ contactNum }}</text>位出行人
<!-- <text class="title-bold" v-if="contactNum - chooseContact.length > 0">，还需{{ contactNum - chooseContact.length }}位</text> -->
</text>
</view>
<view class="visitorPlus" v-if="contactTotal.length>0">
<!-- 这里key必须是index,如果是id会出现数据改变和样式不改变的bug -->
<view
class="plus-list"
:class="{on:item.ifChoose}"
v-for="(item, index) of contactTotal.slice(0, 3)"
@click="visitorChoose(index)"
:key="index"
>
{{ item.name }}
<view v-if="item.ifChoose" class="date-icon">
<u-icon name="checkmark" color="#ffffff"></u-icon>
</view>
</view>
<view @click="showContacts()" class="plus-list plus-list-last">
选择/新增
<u-icon name="arrow-right" color="#3688FF"></u-icon>
</view>
</view>
<view class="visitorBtn" v-else @click="$refs.editContacts.showEdit = true">
<u-icon name="plus-circle" color="#3688FF" size="52"></u-icon>
<text style="margin-left:16rpx;">新增</text>
</view>
<view class="visitorEdit" v-show="chooseContact.length > 0">
<view class="edit-list" v-for="(item, index) of chooseContact" :key="item.id">
<view @click="delChooseContact(item, index)">
<u-icon name="close-circle" color="#3688ff" size="40"></u-icon>
</view>
<view>
{{ item.name }}
</view>
<view>
{{ item.credentialNumber ? item.credentialNumber.substr(0, 3) + '****' + item.credentialNumber.substr(14, 4) : '' }}
</view>
<view @click="showEdit(item)">
<u-icon name="edit-pen-fill" color="#3688ff" size="48"></u-icon>
</view>
</view>
</view>
</view>
<view class="middle-phone" v-if="productIfo.tripTemplateFlag != 2">
<text> 联系电话： </text>
<input type="number" maxlength="11" placeholder="请输入联系电话" v-model.trim="ticketPhone" />
</view>
</view>
<!-- ---------------------------------------------产品押金部分---------------------------------------- -->
<view class="productDeposit" v-if="productIfo.deposit">
<view>
{{ productIfo.name }}
<text style="color: #FC6703;margin-left: 10rpx;">押金</text>
</view>
<view style="color: #FC6703"> {{ productIfo.deposit }}元 </view>
</view>
</view>
<view class="bottom">
<view class="bottom-left">
<text> ¥{{ originalTotal || 0 }} </text>
<text> <text>¥</text>{{ sellTotal || 0 }} </text>
</view>
<view class="bottom-right">
<view @click="showDetail()" class="bottom-detail">
明细
<u-icon name="arrow-down"></u-icon>
</view>
<view class="bottom-btn">
<text v-if="productIfo.status == 1">已下架</text>
<template v-else>
<text v-if="parseInt(maxBookNum) <1">暂无库存</text>
<text v-if="parseInt(maxBookNum) >0" @click="goPay()" style="background:#3688FF;">去支付</text>
</template>
</view>
</view>
</view>
<calendar ref="calendar" @dateConfig="dateConfig" :dateList="dateList" v-if="dateList.length > 0"></calendar>
<buyKnow ref="buyKnow" :buyKnowData="buyKnowData"></buyKnow>
<detail
ref="detail"
:sellTotal='sellTotal'
:merchantName="productIfo.merchantName"
:name="productIfo.name"
:buyNum="buyNum"
:sellingPrice="sellingPrice"
:chooseService="chooseService"
:productDepositTotal="productDepositTotal"
:chooseCouponObj="chooseCouponObj"
></detail>
<chooseArea
v-if="showArea"
:areaList="productIfo.productAreaList"
@areaSure="areaSure"
:sortArr="sortArr"
:defaultAreaCode="defaultAreaCode"
></chooseArea>
<times ref="times" :chooseTimeList="timeList" @timeConfig="timeConfig" :timeActive="timeActive"></times>
<editContacts ref="editContacts" :editContact="editContact" :contactTotal="contactTotal"></editContacts>
<contactList
ref="contactList"
@getEditContact="getEditContact"
:contactTotal="contactTotal"
:contactNum="contactNum"
></contactList>
<orderCoupon :couponData="couponData" ref="orderCoupon" @couponChoose="couponChoose" :chooseCouponObj="chooseCouponObj"></orderCoupon>
<!--一个站点时获取排队信息弹窗-->
<!-- <u-popup :show="sortInforPop" :round="10" closeable @close="sortInforPop = false">
<view style="padding: 40rpx 60rpx">
<view>
景区名称：
<text class="sortPoptext" style="font-size: 28rpx">{{ productIfo.merchantName }}</text>
</view>
<view style="margin-top: 40rpx">
排队人数：
<text class="sortPoptext">{{ sortIfo.peopleNumber }}</text>
</view>
<view style="margin-top: 40rpx">
当前可排队：
<text class="sortPoptext">{{ sortIfo.showStart }}-</text>
<text class="sortPoptext">{{ sortIfo.showEnd }}</text>
</view>
<view style="margin-top: 40rpx">
当前排号至：
<text class="sortPoptext">{{ sortIfo.sortTotalCapacity }}</text>
</view>
<view style="margin-top: 40rpx; text-align: center" @click="sortInforPop = false">
<text class="middle-btn">确定</text>
</view>
</view>
</u-popup> -->
</view>
</template>
<script>
import calendar from '../scenicComponents/calendar' //日历组件
import buyKnow from '@/components/buyKnow.vue' //购票须知
import orderCoupon from '@/components/orderCoupon' //优惠券
import detail from '../scenicComponents/detail.vue' //明细弹窗
import chooseArea from '../scenicComponents/chooseArea' //选择站点
import contactList from '../scenicComponents/contactList' //联系人弹窗
import editContacts from '../scenicComponents/editContacts' //编辑联系人弹窗
import times from '../scenicComponents/times' //更多时间弹窗
export default {
components: {
calendar,
buyKnow,
detail,
contactList,
editContacts,
times,
chooseArea,
orderCoupon
},
data() {
return {
enterUrl:'',//进入页面路由
outUrl:'',//跳出页面路由
defaultAreaCode: '', //默认站点
sortArr: [], //多个站点排号信息列表
sortIfo: '', //单个站点排号信息
sortInforPop: false, //一个站点时获取排队信息弹窗
showErmai: true, //临时的，选择了南站不显示耳麦
showArea: false, //控制选择站点显示隐藏
areaUp: false, //排号是否上架
active: 10000, //日期下标
timeActive: 10000, //时间下标，默认不选中
buyNum: 1, //订单数量
maxBookNum: 999, //最大预订数量
dateList: [], //日期列表
timeList: [], //时间列表
buyKnowData: '', //购买须知数据
editContact: '', //编辑联系人传值对象
productId: '', //产品Id
merchantId: '', //商户Id
ticketPhone: '', //联系电话
productIfo: '', //初始化产品基本信息
originalPrice: 0, //原价单价
sellingPrice: 0, //卖价单价
interfaceCode: '', //接口编号
merchantCode: '', //商户code
productCode: '', //产品code
contactTotal: [], //所有联系人列表
chooseContact: [], //选中的游客信息列表
contactNum: 1, //需要选择几位联系人数量
cruisePlanId: '', //班次Id
timeNumber: '', //当前时间转化为数字
startDate: '', //开始日期
endDate: '', //结束日期
startPlayTime: '', //开始时间
endPlayTime: '', //结束时间
areaObj: {}, //区域组件的传值
templateList: [], //该产品联系人必须要填写的信息
timeFlag: '', //setTimeout函数
savedMoney: 0, //优惠价格
serviceList: [], //所有额外服务
chooseService: [], //选中的额外服务
extraPrice: 0, //额外服务总价格
showExtraPop: false, //控制支付时有额外服务，没有选中额外服务的弹窗显示隐藏
orderProductList: [], //额外服务，儿童票等入参
productDepositTotal: 0, //产品总押金
orderSource: '', //订单来源 1公众号平台、2公众号组合页面1、3公众号组合页面2、4胖丁伙伴app、5第三方自助机、6第三方票房窗口
thirdOpenid: '', //第三方openid
beforeBookDays: '', //需提前预定天数
companyId: '', //公司Id
docQuery: '', //元素变量
dateScroll: '', //日期滚动值
timeScroll: '' ,//时间滚动值
openid:uni.getStorageSync('openid') || '',//openid
couponData:[], //所有劵数据
chooseCouponObj: '', //默认选中最优价格优惠券
ableConpon: '', //没有可用优惠券时，达到一定条件可用，显示达到的条件
}
},
onLoad(option) {
//#ifdef MP-WEIXIN
this.enterUrl=option.q
//#endif
//#ifdef MP-ALIPAY
this.enterUrl=uni.getStorageSync('alipayQrCode')
//#endif
if(this.enterUrl){//普通二维码扫码进入
let merchantId=this.getUrlKey('merchantId')
let productId=this.getUrlKey('productId')
let orderSource=this.getUrlKey('orderSource')
let companyId=this.getUrlKey('companyId')
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let baseUrl=this.$wxurl+'scenicSingleOrder?pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId
let url='&merchantId='+merchantId+'&productId='+productId+'&orderSource='+orderSource+'&companyId='+companyId
this.outUrl=baseUrl+url
}else{//小程序页面跳转进入
let merchantId=option.merchantId||''
let productId=option.productId||''
let orderSource=option.orderSource||''
let companyId=option.companyId||''
let ifyukuaiCode=option.ifyukuaiCode||''//是否是渝快码跳入，渝快码跳入需要在H5端另外走流程
let pdOpenid=uni.getStorageSync('openid')//胖丁小程序openid,临时用，当公众号授权做好之后可以删除
let pdToken=uni.getStorageSync('token')
let pdCreateUserId=uni.getStorageSync('createUserId')
let pdUserId=uni.getStorageSync('userId')
let baseUrl=this.$wxurl+'scenicSingleOrder?pdOpenid='+pdOpenid+'&pdToken='+pdToken+'&pdCreateUserId='+pdCreateUserId+'&pdUserId='+pdUserId
let url='&merchantId='+merchantId+'&productId='+productId+'&orderSource='+orderSource+'&companyId='+companyId+'&ifyukuaiCode='+ifyukuaiCode
this.outUrl=baseUrl+url
let times = new Date().Format('yyyy-MM-dd hh:mm:ss')
this.timeNumber = parseInt(this.$commonjs.changeTime(times)) //将当前时间转化为数字
this.companyId=this.$commonjs.getCompanyId(option)|| ''
this.orderSource = this.$commonjs.getKey(option,'orderSource')|| ''
this.thirdOpenid = this.$commonjs.getKey(option,'thirdOpenid')|| '' //第三方openid
this.productId = this.$commonjs.getKey(option,'productId') || ''
this.initData() //页面初始化数据
this.docQuery = uni.createSelectorQuery().in(this)
},
computed: {
originalTotal() {
//原价总价
if (this.chooseService.length > 0) {
//额外服务价格和押金总价格
let singleProduct = 0 //单个产品押金
this.extraPrice = 0
this.extraDepositTotal = 0 //总押金
for (let i = 0; i < this.chooseService.length; i++) {
this.extraPrice += parseFloat((this.chooseService[i].sellingPrice * this.buyNum).toFixed(2))
if (this.chooseService[i].depositType == 1) {
//等于1，押金金额跟数量没关系
singleProduct = this.chooseService[i].deposit
} else if (this.chooseService[i].depositType == 2) {
//等于2，押金单价乘购买数量
singleProduct = parseFloat((this.chooseService[i].deposit * this.buyNum).toFixed(2))
}
this.extraDepositTotal += singleProduct
}
} else {
this.extraPrice = 0
this.extraDepositTotal = 0
}
if (this.productIfo.deposit) {
//如果有押金
if (this.productIfo.depositType == 1) {
//等于1，押金金额跟数量没关系
this.productDepositTotal = this.productIfo.deposit
} else if (this.productIfo.depositType == 2) {
//等于2，押金单价乘购买数量
this.productDepositTotal = parseFloat((this.productIfo.deposit * this.buyNum).toFixed(2))
}
} else {
this.productDepositTotal = 0
}
return parseFloat((this.originalPrice * this.buyNum + this.productDepositTotal + this.extraPrice + this.extraDepositTotal).toFixed(2)) //产品总价+产品押金+额外产品总价+额外产品押金-优惠价格
},
sellTotal() {
//卖价总价
if (this.chooseService.length == 0) {
this.extraPrice = 0
this.extraDepositTotal = 0
}
return parseFloat(
(this.sellingPrice * this.buyNum + this.productDepositTotal + this.extraPrice + this.extraDepositTotal - this.savedMoney).toFixed(2)
) //产品总价+产品押金+额外产品总价+额外产品押金-优惠价格
}
},
methods: {
getUrlKey(name){//---------------------------------------------------------------获取url
return(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(this.enterUrl)) || [, ''])[1].replace(/\+/g, '%20') || ''
//---页面初始化数据，获取产品基本信息
initData() {
let data = {
id: this.productId //产品id
}
uni.showLoading({
title: '加载中',
mask:true
})
this.$request('scenic/groupGood/loadProduct', data).then(res => {
if (res.code == '00') {
this.productIfo = res.data
this.defaultAreaCode = this.productIfo.defaultAreaCode || ''
this.merchantCode = this.productIfo.merchantVo.code, //商户code
this.productId = res.data.id//产品id变化，重新赋值产品id
this.merchantId = res.data.merchantId //重新赋值商户id
this.beforeBookDays = res.data.beforeBookDays || 0 //提前预定天数
this.buyKnowData = res.data //购买须知，传给子组件
this.serviceList = res.data.loadProductResVoList //额外服务
//this.chooseService=res.data.data.loadProductResVoList//默认全部选中
if (this.productIfo.status == 1) {
//下架状态
return
}
if (this.productIfo.productType != 3) {
//不为班次票时，开始时间为当前时间，结束时间为23:59:59
this.startPlayTime = new Date().Format('hh:mm:ss')
this.endPlayTime = '23:59:59'
}
this.getPriceList()
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---获取产品价格库存列表
getPriceList() {
let data = {
productId: this.productId //产品id
}
this.$request('scenic/user/product/priceStockList', data).then(res => {
if (res.code == '00') {
this.dateList = res.data //日期列表
if (this.dateList.length > 0) {
let time1 = this.dateList[0].startTime.substr(0, 10) + this.productIfo.bookTime //获取价格列表的第一个日期+预订最晚时间
let timeNum1 = parseInt(this.$commonjs.changeTime(time1))
let time2 = new Date().Format('yyyy-MM-dd hh:mm:ss')
let timeNum2 = parseInt(this.$commonjs.changeTime(time2)) //将当前时间转化为数字
if (timeNum2 > timeNum1) {
//如果当前时间大于价格列表第一个日期+预订最晚时间，第一个价格不显示
this.dateList.splice(0, 1)
}
this.dateList.forEach((item, index) => {
//价格上面时间小于当前时间加上需预定天数之后的需删除
let date = new Date()
date.setDate(date.getDate() + this.beforeBookDays)
let newDate = date.Format('yyyy-MM-dd')
let priceTime = this.$commonjs.changeTime(item.endTime.substr(0, 10))
let newTime = this.$commonjs.changeTime(newDate)
if (priceTime < newTime) {
delete this.dateList[index]
}
})
this.dateList = this.dateList.filter(val => {
return val
})
if (this.dateList.length == 0) {
uni.showToast({
title: '没有库存',
icon: 'none'
})
this.maxBookNum=0
return
}
if (this.productIfo.isFetch == 1) {
this.sortUpDown()
}
if (this.productIfo.tripTemplateFlag != 2) {
//等于2时不需要填写联系人信息和手机号码
this.getContactList()
}
if (this.dateList.length == 1 && this.beforeBookDays == 0) {
//长度为1而且只能预订当天，默认选中
this.$nextTick(()=>{
this.dateChoose(0)
})
}
} else {
uni.showToast({
title: '没有库存',
icon: 'none'
})
this.maxBookNum=0
return
}
let today = this.$commonjs.today() //今天
let tomorrow = this.$commonjs.tomorrow() //明天
let afterTomorrow = this.$commonjs.afterTomorrow() //后天
this.dateList.forEach((item, index) => {
item.week = '日一二三四五六'.charAt(new Date(item.startTime.substr(0, 10)).getDay())
if (item.startTime.substr(0, 10) == today) {
item.week = '今天'
}
if (item.startTime.substr(0, 10) == tomorrow) {
item.week = '明天'
}
if (item.startTime.substr(0, 10) == afterTomorrow) {
item.week = '后天'
}
})
} else {
this.maxBookNum=0
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---排号是否上下架
sortUpDown() {
let data = {
merchantCode: this.merchantCode //商户code
}
uni.showLoading({
title: '加载中',
mask:true
})
this.$request('distribution/distribution/findNewFetchInfoFromSceinc', data).then(res => {
if (res.code == '00') {
this.sortArr = res.data.data
let data = res.data
let areaList=this.productIfo.productAreaList
if (areaList.length > 1) {
//有库存并且需要选择两个站点以上的票种，显示区域组件
for (let item in data.main) {
if (data.main[item].sceneSortStatus == '1'){
//上架
this.areaUp = true
this.showArea = true
//通过默认站点找到站点数据
if (this.defaultAreaCode) {
areaList.forEach(item => {
if (item.areaCode == this.defaultAreaCode) {
this.areaObj.areaCode = item.areaCode
this.areaObj.areaName = item.areaName
}
})
}
}
}
} else if (areaList.length == 1) {
//只有一个站点时，直接选中站点(现目前还没有一个站点的景区)
for (let item in data.main) {
if (data.main[item].sceneSortStatus == '1') {
//上架
this.areaUp = true
this.areaObj.areaCode = areaList[0].areaCode
this.areaObj.areaName = areaList[0].areaName
}
}
}
}
})
},
//---获取班次票
getTimeStock() {
this.timeList=[]
let data = {
endDate: this.endDate, //结束日期
startDate: this.startDate, //开始日期
interfaceCode: this.productIfo.merchantVo.interfaceCompanyId, //接口编号
merchantCode: this.merchantCode, //商户code
productCode: this.productIfo.code //产品code
}
uni.showLoading({
title: '加载中',
mask:true
})
this.$request('distribution/distribution/getTimeStock', data).then(res => {
if (res.code == '00') {
this.timeList = res.data||[]
this.timeList.forEach((item, index) => {
//增加一个时间Number字段，用于判断当前时间大于班次结束时间时，显示售罄
let text=parseFloat((item.last/item.total).toFixed(2))||0
if(text>0.4){
item.copyLast='余票充足'
}else{
item.copyLast=item.last
}
item.timeNumber = parseInt(this.$commonjs.changeTime(item.planDate.substr(0, 10) + item.endPlanTime))
if (this.timeNumber > item.timeNumber || item.last <= 0) {
item.copyLast='售罄'
}
})
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---获取排号信息
getSortInfor() {
let data = {
areaCode: this.areaObj.areaCode,
merchantCode: this.merchantCode //商户code
}
uni.showLoading({
title: '加载中',
mask:true
})
this.$request('distribution/distribution/findNewFetchInfoFromSceinc', data).then(res => {
if (res.code == '00') {
this.sortInforPop = true
res.data.forEach(item => {
item.peopleNumber = Math.max(item.sortTotalCapacity - item.showEnd, 0)
})
let index = res.data.findIndex(item => {
return item.projectId == this.areaObj.areaCode
})
this.sortIfo = res.data[index]
}
})
},
//---获取子组件的传值
areaSure(data) {
this.areaObj = data
if (this.areaObj.areaCode == 'cjsd_project_0001') {
//选择了南站不显示耳麦
this.showErmai = false
this.chooseService = []
//多选框状态设置成未选中
this.serviceList.forEach(item=>{
item.ifChoose=false
})
} else {
this.showErmai = true
}
},
//---展示选择站点
openArea() {
this.showArea = true
},
//---关闭选择站点
closeArea() {
this.showArea = false
},
//---展示详情弹窗
showDetail() {
this.$refs.detail.showPop = true
},
//---展示日历
showCalendar() {
this.$refs.calendar.showPop = true
},
//---日期选择
dateChoose(index) {
this.active = index //修改选中样式
this.maxBookNum = Math.min(this.dateList[index].surplus, this.productIfo.maxBookNum) //剩余量变化
this.originalPrice = this.dateList[index].originalPrice //原价变化
this.sellingPrice = this.dateList[index].sellingPrice //卖价变化
this.endDate = this.dateList[index].endTime //开始日期
this.startDate = this.dateList[index].startTime //结束日期
this.$refs.calendar.defaultDate = this.dateList[index].startTime.substr(0, 10) //日历组件选中日期
this.initCoupon()
if(this.productIfo.productType == 3){
//productType=3为场次票
this.cruisePlanId = '' //清空班次id
this.timeActive = 10000
this.getTimeStock()
}
// uni.$u.throttle(()=>{
// 1.通过日历插件选择日期之后未执行该方法
// 2.用了该方法之后点击其他日期也会3秒之内无效果，
// },3000)
},
//---日历确认事件
dateConfig(data) {
let index = this.dateList.findIndex(item => {
return item.startTime.substr(0, 10) == data
})
this.dateChoose(index)
this.docQuery.selectAll('.date-list').boundingClientRect(data => {
this.dateScroll = (data[index].width + 6) * index
}).exec()
},
//---展示更多时间
showTime() {
this.$refs.times.showPop = true
},
//---时间选择
chooseTime(i) {
if(this.timeList[i].copyLast!='售罄'){
this.timeActive = i
this.cruisePlanId = this.timeList[i].cruisePlanId //获取班次Id
this.maxBookNum = Math.min(this.timeList[i].last, this.maxBookNum) //获取剩余库存
//如果为班次票,开始时间为班次时间的开始时间，结束时间为班次时间的结束时间，班次时间的结束时间为空时，结束时间为班次时间的开始时间
this.startPlayTime = this.timeList[i].startPlanTime
this.endPlayTime = this.timeList[i].endPlanTime || this.timeList[i].startPlanTime
}
},
//---时间确认事件
timeConfig(index) {
this.chooseTime(index) //选中确认的日期
this.docQuery.selectAll('.time-list').boundingClientRect(data => {
this.timeScroll = (data[index].width + 6) * index
}).exec()
},
//---获取点击的编辑联系人信息，传给编辑联系人组件
getEditContact(data) {
this.editContact = data
},
//---删除选中的联系人
delChooseContact(item, index) {
//所有联系人中找到删除联系人下标，改成未选中状态
let sub = this.contactTotal.findIndex(item2 => item2.id == item.id)
this.contactTotal[sub].ifChoose = false
this.chooseContact.splice(index, 1) //删除数组
},
//---展示编辑联系人
showEdit(obj) {
this.$refs.editContacts.showEdit = true
this.editContact = obj
},
//---展示新增联系人，并获取联系人列表
showContacts() {
this.$refs.contactList.showPop = true
},
//---游客选择
visitorChoose(i) {
let chooseList = this.chooseContact
let data = this.contactTotal
data[i].ifChoose = !data[i].ifChoose
if (data[i].ifChoose) {
if (chooseList.length == this.contactNum) {
//需要人数满足时，点击增加联系人时，删除最后一个，增加点击的那个人
chooseList[chooseList.length - 1].ifChoose = false
chooseList.splice(chooseList.length - 1, 1)
}
chooseList.push(data[i]) //加入数组
} else {
let index = chooseList.findIndex(items => {
return items.id == data[i].id
})
chooseList.splice(index, 1) //删除数组
}
this.$forceUpdate()
},
//---订单数量变化
buyNumChange(e) {
if (e.value >= this.maxBookNum) {
uni.showToast({
title: '最大可预订数量为' + this.maxBookNum,
icon: 'none'
})
}
if (this.productIfo.tripTemplateFlag == 1) {
//实名制
this.contactNum = e.value
if (this.chooseContact.length>this.contactNum) {
//当选中联系人数量大于购买数量时
this.chooseContact.splice(this.chooseContact.length - 1, 1) //删除多余的联系人
//联系人列表重新判断是否选中
this.contactTotal.forEach(item=>{
item.ifChoose=false
})
this.chooseContact.forEach(item=>{
this.contactTotal.forEach(item2=>{
if(item.id==item2.id){
item2.ifChoose=true
}
})
})
}
}
if (this.productIfo.tripTemplateFlag == 0) {
//非实名制
this.contactNum = 1
}
clearTimeout(this.timeFlag)
this.timeFlag = setTimeout(()=>{
this.initCoupon()
}, 1500)
},
//---展示购票须知
showBuyKnow() {
this.$refs.buyKnow.showPop = true
},
//---初始化联系人列表
getContactList() {
let data = {
openid:this.openid
}
this.$request('wechatUser/contact/findContactList', data).then(res => {
if (res.code == '00') {
this.contactTotal = res.data
this.contactTotal.forEach(item => {
//用于判断是否被选中
item.ifChoose = false
})
//编辑成功重新调该方法时，把之前选中的游客，设为选中状态
this.contactTotal.forEach(item => {
this.chooseContact.forEach(item2 => {
if (item.id == item2.id) {
item.ifChoose = true
}
})
})
//删除联系人成功重新调该方法时，之前选中的联系人，数据库可能被删除，删除该联系人
this.chooseContact.forEach((item, index) => {
if (!this.contactTotal.find(item2 => item.id == item2.id)) {
this.chooseContact.splice(index, 1)
}
})
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---添加并选中联系人--用于添加联系人之后直接从联系人列表选出需要填写的几位联系人
addChoose() {
let data = {
openid:this.openid
}
this.$request('wechatUser/contact/findContactList', data).then(res => {
if (res.code == '00') {
this.contactTotal = res.data
for (let i = 0; i < this.contactNum; i++) {
let item = this.contactTotal[i] || null
if (item) {
item.ifChoose = true
}
}
this.chooseContact = this.contactTotal.slice(0, this.contactNum)
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
//---加载优惠券
initCoupon() {
let savedMoneyList = []
this.chooseCouponObj = ''
this.ableConpon = ''
this.couponData=[]
let data = {
productId: this.productId, //产品id
tickets: this.buyNum, //房间数量
singleMoney: this.sellingPrice, //单价
money: parseFloat((this.buyNum * this.sellingPrice).toFixed(2)), //订单总价，不算券，和现金红包
merchantId: this.merchantId, //商户Id
openid:this.openid
}
this.$request('wechatUser/myPage/usableCouponList', data).then((res) => {
if (res.code == '00') {
this.couponData = res.data
let masterSlaveCouponList=res.data.masterSlaveCouponList
if (masterSlaveCouponList&&masterSlaveCouponList.length>0) {
masterSlaveCouponList.forEach((item) => { //获取最优券
savedMoneyList.push(item.savedMoney)
})
let maxMoney = Math.max.apply(null, savedMoneyList)
let arr=masterSlaveCouponList.filter((item)=>{//找到最大值的数组
return item.savedMoney==maxMoney
})
if(arr.length==1){
this.chooseCouponObj=arr[0]
}else{
let index=arr.findIndex((item)=>{//如果有多个，找到是否有平台券，平台劵优先
return item.createSource==1
})
if(index>-1){
this.chooseCouponObj=arr[index]
}else{
this.chooseCouponObj=arr[0]
}
}
this.savedMoney=this.chooseCouponObj.savedMoney
} else {
if (res.data.unusableCouponList.length > 0) {
res.data.unusableCouponList.forEach((item, i) => { //没有可用优惠券，有达到条件可以用的优惠券，先显示条件，达到条件时显示可用优惠券
if (item.isProduct == 1) {
this.ableConpon = item
}
})
}
}
}
})
},
//---获取优惠价格
getDiscountPrice() {
let data = {
productId: this.productId, //产品ID
merchantId: this.merchantId, //商家ID
companyId: this.companyId, //公司ID
openid: this.openid //openid
}
this.$request('scenic/user/productRule/getProductRule', data).then(res => {})
},
//---子组件券选择之后触发的事件
couponChoose(data) {
if(data){
this.chooseCouponObj = data
this.savedMoney=this.chooseCouponObj.savedMoney||0
}else{
this.chooseCouponObj = ''
this.savedMoney=0
}
},
//---展示券列表
showCoupon() {
this.$refs.orderCoupon.showPop=true
},
//---额外服务多选框变化
extraChange(e) {
this.chooseService=[]
//解决数据修改之后，多选框未选中bug
this.serviceList.forEach(item=>{
item.ifChoose=false
})
let value=e.detail.value
value.forEach(item=>{
this.chooseService.push(JSON.parse(item))
})
//获取选中的多选框为选中状态
this.serviceList.forEach(item=>{
this.chooseService.forEach(item2=>{
if(item.id==item2.id){
item.ifChoose=true
}
})
})
},
//---不需要享受耳麦服务
extraNo() {
this.showExtraPop = false
this.placeOrder()
},
//---需要享受耳麦服务
extraYes() {
this.showExtraPop = false
this.serviceList.forEach(item=>{
item.ifChoose=true
})
this.chooseService = this.serviceList
this.placeOrder()
},
//---点击去支付
goPay() {
if (this.serviceList.length == 0) {
//没有额外服务，直接支付
this.placeOrder()
}
if (this.serviceList.length > 0) {
//有额外服务，并且选择了额外服务的，直接支付
if (this.chooseService.length > 0) {
this.placeOrder()
}
}
if (this.serviceList.length > 0) {
//有额外服务，没有选中额外服务的，弹出提示框
if (this.productIfo.tripTemplateFlag != 2) {
if (!this.$commonjs.phoneReg().test(this.ticketPhone)) {
//未填写正确手机号码
uni.showToast({
title: '请填写正确的手机号码',
icon: 'none'
})
return
}
}
if (this.productIfo.tripTemplateFlag == 1) {
//实名制
if (this.chooseContact.length != this.buyNum) {
uni.showToast({
title: '需要添加' + this.buyNum + '位出行人',
icon: 'none'
})
return
}
} else if (this.productIfo.tripTemplateFlag == 0) {
//非实名制
if (this.chooseContact.length < 1) {
uni.showToast({
title: '需要添加一位出行人',
icon: 'none'
})
return
}
}
if (this.productIfo.productType == 3) {
//如果为班次票，需要选择班次
if (this.cruisePlanId == '') {
uni.showToast({
title: '该票为班次票,请选择游玩时间',
icon: 'none'
})
return
}
}
if (this.productIfo.isFetch == 1 && this.areaUp) {
//需要选择站点的票种，必须选择站点
if (!this.areaObj.areaCode) {
uni.showToast({
title: '请选择站点',
icon: 'none'
})
return
}
}
if (this.chooseService.length == 0 && this.showErmai) {
//没有购买额外服务，并且选择的北站，跳出弹窗
this.showExtraPop = true
}
if (this.chooseService.length == 0 && !this.showErmai) {
//没有购买额外服务，并且选择的南站，直接购买
this.placeOrder()
}
}
},
//---下单
placeOrder() {
if (this.dateList.length == 0) {
//价格库存为空时，点击无效
return
}
if (this.productIfo.status == 1) {
//下架状态，点击无效
return
}
if (this.productIfo.tripTemplateFlag != 2) {
//需要填写电话号码
if (!this.$commonjs.phoneReg().test(this.ticketPhone) && this.productIfo.tripTemplateFlag != 2) {
//未填写正确手机号码
uni.showToast({
title: '请填写正确的手机号码',
icon: 'none'
})
return
}
}
if (!this.startDate || !this.endDate) {
uni.showToast({
title: '请选择游玩日期',
icon: 'none'
})
return
}
if (this.productIfo.tripTemplateFlag == 1) {
//实名制
if (this.chooseContact.length != this.buyNum) {
uni.showToast({
title: '需要添加' + this.buyNum + '位出行人',
icon: 'none'
})
return
}
} else if (this.productIfo.tripTemplateFlag == 0) {
//非实名制
if (this.chooseContact.length < 1) {
uni.showToast({
title: '需要添加一位出行人',
icon: 'none'
})
return
}
}
if (this.productIfo.productType == 3) {
//如果为班次票，需要选择班次
if (this.cruisePlanId == '') {
uni.showToast({
title: '该票为班次票,请选择游玩时间',
icon: 'none'
})
return
}
}
if (this.productIfo.isFetch == 1 && this.areaUp) {
//需要选择站点的票种，必须选择站点
if (!this.areaObj.areaCode) {
uni.showToast({
title: '请选择站点',
icon: 'none'
})
return
}
}
this.preOrder()
},
//---预下单
preOrder() {
//参数游客信息组装
let orderTouristList = this.chooseContact.map((item) => {
return {
category: 0,
name: item.name,
credentialNumber: item.credentialNumber
}
})
let couponList = []
if (this.chooseCouponObj) {
if(this.chooseCouponObj.slaveList.length>0){//有从券取值从券，没有从券取值主劵
couponList=[//券列表
{
couponId:this.chooseCouponObj.slaveCouponId,//券id
isMerchant:this.chooseCouponObj.slaveCreateSource,//是否是商户的券
myCouponId:this.chooseCouponObj.slaveId,//领取人编号
couponType:this.chooseCouponObj.couponType,//券类型
couponPrice:this.chooseCouponObj.savedMoney,//券价格
}
]
}else{
couponList=[
{
couponId:this.chooseCouponObj.couponId,//券id
isMerchant:this.chooseCouponObj.createSource,//是否是商户的券
myCouponId:this.chooseCouponObj.id,//领取人编号
couponType:this.chooseCouponObj.couponType,//券类型
couponPrice:this.chooseCouponObj.savedMoney,//券价格
}
]
}
}
//额外服务不为空，联票购买不为空，带有儿童票，组合购买不为空，单品购买为空
if (this.chooseService.length > 0) {
this.orderProductList = this.chooseService.map((item) => {
return {
distributionPrice: item.sellingPrice, //临时用
productId: item.id, //产品Id
buyNum: this.buyNum, //购买数量
subOrderType: 0, //产品类型，网络
unitPrice: item.sellingPrice, //产品单价
merchantId: item.merchantId, //商户id
orderTouristList, //游客信息
playDate: this.startDate.substr(0, 10), //开始日期
endPlayDate: this.endDate.substr(0, 10), //结束日期
isMaster: 1, //是否主产品 1 否， 0 是
startPlayTime: this.startPlayTime, //开始时间
endPlayTime: this.endPlayTime, //结束时间
}
})
}else{
this.orderProductList=[]
}
let data = {
companyId: this.companyId, //公司Id
buyMethod: 1, // 单品购买，2套票、联票购买，3组合购买
userId: this.openid,//用户id
ticketPhone: this.ticketPhone, //联系电话
cash: 0, //现金红包
orderMoney: this.sellTotal, //订单总价 = 订单原价 - 优惠券价格 - 现金抵扣价格
orderType: 1, //订单类型,景区
orderSource:this.orderSource||1, //订单来源 1公众号平台、2公众号组合页面1、3公众号组合页面2、4胖丁伙伴app、5第三方自助机、6第三方票房窗口
orderProductList: this.orderProductList, //额外服务不为空，联票购买不为空，带有儿童票，组合购买不为空，单品购买为空
orderProductVo: //产品信息列表
{
bookTime:this.productIfo.bookTime,//最晚预定时间
earlyBookTime:this.productIfo.earlyBookTime,//最早预定时间
extendContent:'{"openid":'+'"'+this.openid+'"'+','+'"zr":'+'"'+this.thirdOpenid+'"'+'}',
productId: this.productId, //产品Id
buyNum: this.buyNum, //购买数量
subOrderType: 0, //产品类型，网络
cruisePlanId: this.cruisePlanId, //班次id
unitPrice: this.sellingPrice, //产品单价
distributionPrice: this.sellingPrice, //临时用
merchantId: this.merchantId, //商户id
orderTouristList, //游客信息
playDate: this.startDate.substr(0, 10), //开始日期
endPlayDate: this.endDate.substr(0, 10), //结束日期
isMaster: 0, //是否主产品 1 否， 0 是
startPlayTime: this.startPlayTime, //开始时间
endPlayTime: this.endPlayTime, //结束时间
productAreaCode:this.areaObj.areaCode, //选择的站点编码
couponList, //券列表
}
}
uni.showLoading({
title:'加载中',
mask:true
})
this.$request('orderc/order/createOrder', data).then((res) => {
if (res.code == '00') {
if (res.data.id) {
uni.navigateTo({
url: '/pages/payment/orderPayment/orderPayment?orderId='+res.data.id
})
} else {
uni.showToast({
title: '下单失败',
icon: 'none'
})
}
} else {
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
}
}
}
</script>
<style>
<style lang="scss" scoped="scoped">
.head {
height: 160rpx;
background: linear-gradient(to bottom, #2984ef, #d8eaf6);
}
.orderBox {
min-height: 100%;
background: #f5f5f5;
}
.middle {
position: relative;
top: -100rpx;
padding: 30rpx 20rpx;
background: #ffffff;
}
.title-text{
font-size: 32rpx;
font-weight: bold;
}
/*中间上面部分*/
.merchantName {
display: flex;
align-items: center;
}
.merchantName text:nth-child(2) {
color: #666666;
margin-left: 20rpx;
}
.buyKnow {
margin-top: 20rpx;
background: #fef0e6;
height: 56rpx;
font-size: 24rpx;
display: flex;
justify-content: space-between;
padding-left: 10rpx;
align-items: center;
border-radius: 5rpx;
color:$red;
}
.buyKnow view:nth-child(2) {
display: flex;
}
.middle-place {
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.middle-place view:nth-child(2) {
flex: 1;
margin-left: 20rpx;
color: $theme;
font-size: 28rpx;
font-weight: bolder;
}
.middle-Date{
margin-top: 40rpx;
}
.middle-Datelist {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30rpx;
}
.date-content {
flex: 1;
overflow-x: scroll;
white-space: nowrap;
}
.date-content::-webkit-scrollbar {
display: none;
}
.date-list {
width: 140rpx;
text-align: center;
margin-right:12rpx;
border-radius: 10rpx;
position: relative;
display: inline-block;
background: #f2f2f2;
padding-bottom: 8rpx;
}
.date-list.on {
border: 1px solid $theme;
background: #DAE6F6;
}
.date-list>view{
margin-top: 6rpx;
}
.date-price {
font-size: 32rpx;
color: $red;
}
.no-date {
color: $red;
flex: 1;
margin-left: 30rpx;
font-weight: bolder;
}
.date-icon {
position: absolute;
right: -1px;
bottom: -1px;
display: inline-block;
width: 30rpx;
height: 28rpx;
background:$theme;
border-radius: 10rpx 0;
}
.dateMore {
flex-shrink: 0;
padding: 20rpx 0;
width: 120rpx;
display: flex;
justify-content: center;
align-items: center;
}
.date-more-content {
margin-right:8rpx;
}
.middle-time{
margin-top: 40rpx;
}
.middle-timelist {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30rpx;
}
.time-content {
flex: 1;
overflow-x: scroll;
white-space: nowrap;
height: 90rpx;
}
.time-content::-webkit-scrollbar {
display: none;
}
.time-list {
width: 200rpx;
height: 90rpx;
line-height: 30rpx;
text-align: center;
margin-right: 8rpx;
border-radius: 15rpx;
display: inline-block;
background:#f2f2f2;
position: relative;
padding-bottom: 8rpx;
}
.time-list view {
margin-top: 10rpx;
}
.time-list.on {
border: 1px solid $theme;
background: #DAE6F6;
}
.timeMore {
flex-shrink: 0;
width: 120rpx;
display: flex;
justify-content: center;
align-items: center;
}
.time-more-content {
margin-right:8rpx;
}
.no-time {
color:$red;
flex: 1;
font-weight: bolder;
}
.middle-divider{
height: 2rpx;
background:$divider;
margin: 40rpx 0;
}
.middle-Number {
display: flex;
justify-content: space-between;
align-items: center;
}
.number-minus {
width: 52rpx;
height: 52rpx;
background:#ccc;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.number-input {
padding:0 20rpx;
width: 100rpx;
text-align: center;
font-size: 40rpx;
}
.number-plus{
width: 52rpx;
height: 52rpx;
background:$theme;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.middle-coupon{
display: flex;
justify-content: space-between;
align-items: center;
padding:30rpx 0;
}
.middle-coupon view:first-child{
width: 36rpx;
height: 36rpx;
background: $theme;
color: #FFFFFF;
text-align: center;
line-height:32rpx;
border-radius:4rpx;
}
.middle-coupon view:nth-child(2){
flex: 1;
margin-left: 10rpx;
}
.middle-coupon view:nth-child(3){
display: flex;
color: $theme;
font-weight: bold;
}
/*中间下面部分*/
.middle-visitor {
padding-bottom: 40rpx;
border-bottom: 1px solid $divider;
}
.visitorTitle > text:nth-child(2) {
font-size: 24rpx;
color: #666666;
margin-left: 10rpx;
}
.title-bold {
color: #f9690e;
font-weight: bolder;
font-size: 28rpx;
}
.visitorBtn{
display: flex;
align-items: center;
justify-content: center;
height: 88rpx;
background:#ECF3FE;
margin-top: 40rpx;
color: $theme;
font-size: 32rpx;
border-radius:20rpx;
}
.visitorPlus {
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.plus-list {
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 5rpx 0;
width: 145rpx;
text-align: center;
background: #f2f2f2;
border-radius: 5rpx;
position: relative;
margin: 20rpx 15rpx 0 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.plus-list-last {
color: $theme;
background: #efefef;
width: 200rpx;
border: none;
}
.plus-list.on {
border: 1px solid $theme;
background: #DAE6F6;
}
.visitorEdit {
margin-top: 40rpx;
}
.visitorEdit > view:not(first-child) {
margin-top: 25rpx;
}
.edit-list {
display: flex;
justify-content: space-between;
align-items: center;
}
.edit-list view:nth-child(2) {
display: inline-block;
width: 120rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 30rpx;
}
.edit-list view:nth-child(3) {
flex: 1;
}
.middle-phone {
margin-top: 30rpx;
display: flex;
align-items: center;
}
.middle-phone input {
flex: 1;
}
/*押金部分*/
.productDeposit {
padding: 40rpx 15rpx;
background: #ffffff;
border-radius: 10rpx;
margin-top: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
/*额外服务部分*/
.extraService {
padding: 20rpx;
background:#DAE6F6;
margin-top: 30rpx;
border-radius: 10rpx;
}
.extraService label {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
color:#f45803;
}
.extra-wrap{
text-align: center;
padding-top: 100rpx;
height: 65vh;
}
/*底部部分*/
.bottom {
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff;
position: fixed;
bottom: 0;
width: 100%;
max-width: 750rpx;
z-index: 10;
padding: 0 24rpx 0 40rpx;
box-shadow: 0px 4px 12px rgba(0,0,0,0.16)
}
.bottom-left > text:first-child {
font-size: 28rpx;
text-decoration: line-through;
margin-right: 16rpx;
}
.bottom-left text:nth-child(2) {
font-size: 40rpx;
font-weight: bolder;
color: #f45803;
}
.bottom-left text:nth-child(2) text {
font-size: 32rpx;
}
.bottom-right {
display: flex;
align-items: center;
}
.bottom-detail {
display: flex;
}
.bottom-btn {
position: relative;
width: 240rpx;
height: 80rpx;
margin-left: 20rpx;
line-height: 80rpx;
font-size: 32rpx;
font-weight: bolder;
text-align: center;
}
.bottom-btn text {
position: absolute;
width: 100%;
height: 100%;
display: inline-block;
left: 0;
color: #ffffff;
top: 0;
background:#C0C0C0;
border-radius: 24rpx;
}
.sortPoptext {
font-size: 30rpx;
font-weight: bolder;
color: #f32048;
}
</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