Skip to content

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

产品选择页面开发

parent 995c4ad1
Show whitespace changes
Inline Side-by-side
Showing with 446 additions and 124 deletions
common/common.js
View file @ 11bf8463
...@@ -4,37 +4,48 @@ export default{ ...@@ -4,37 +4,48 @@ export default{
let currentPage = pages[pages.length-1] //获取当前页面的对象 let currentPage = pages[pages.length-1] //获取当前页面的对象
let url = currentPage.route //当前页面url let url = currentPage.route //当前页面url
let options = currentPage.options //如果要获取url中所带的参数可 let options = currentPage.options //如果要获取url中所带的参数可
let queryTotal="" let queryTotal=''
for (let key in options){ for (let key in options){
queryTotal+="&"+key+"="+options[key] queryTotal+='&'+key+'='+options[key]
} }
queryTotal=queryTotal.substr(1) queryTotal=queryTotal.substr(1)
let pageUrl=url+"?"+queryTotal//请求的全路径 let pageUrl=url+'?'+queryTotal//请求的全路径
return pageUrl return pageUrl
}, },
today:function(){//默认当天 today:function(){//默认当天
var now = new Date(); var now = new Date()
var day = ("0" + now.getDate()).slice(-2); var day = ('0' + now.getDate()).slice(-2)
var month = ("0" + (now.getMonth() + 1)).slice(-2); var month = ('0' + (now.getMonth() + 1)).slice(-2)
var today = now.getFullYear()+"-"+(month)+"-"+(day) ; var today = now.getFullYear()+'-'+(month)+'-'+(day)
return today return today
}, },
todayTime:function(){ todayTime:function(){
var now = new Date(); var now = new Date()
var hour = now.getHours()<10?'0'+now.getHours():now.getHours() var hour = now.getHours()<10?'0'+now.getHours():now.getHours()
var minutes = now.getMinutes()<10?'0'+now.getMinutes():now.getMinutes() var minutes = now.getMinutes()<10?'0'+now.getMinutes():now.getMinutes()
var seconds = now.getSeconds()<10?'0'+now.getSeconds():now.getSeconds() var seconds = now.getSeconds()<10?'0'+now.getSeconds():now.getSeconds()
var time = hour+":"+minutes+":"+seconds var time = hour+':'+minutes+':'+seconds
return time return time
}, },
dateDifference:function(start,end){//结束日期与开始日期相差几天 dateDifference:function(start,end){//结束日期与开始日期相差几天
var strSeparator = "-"; var strSeparator = '-'
var oDate1= start.split(strSeparator); var oDate1= start.split(strSeparator)
var oDate2= end.split(strSeparator); var oDate2= end.split(strSeparator)
var strDateS = new Date(oDate1[0], oDate1[1]-1, oDate1[2]); var strDateS = new Date(oDate1[0], oDate1[1]-1, oDate1[2])
var strDateE = new Date(oDate2[0], oDate2[1]-1, oDate2[2]); var strDateE = new Date(oDate2[0], oDate2[1]-1, oDate2[2])
var iDays = parseInt((strDateE- strDateS) / 1000 / 60 / 60 /24) var iDays = parseInt((strDateE- strDateS) / 1000 / 60 / 60 /24)
return iDays return iDays
},
changeTime:function(option) {//把时间格式转化成数字
// currentTime当前时间，假设是 2019-7-2 19:03
var currentTime = option
var reg = new RegExp('-','g')//去掉时间里面的-
var a = currentTime.replace(reg,'')
var regs = new RegExp(' ','g')//去掉时间里面的空格
var b = a.replace(regs,'')
var regss = new RegExp(':','g')//去掉时间里面的:冒号
var c = b.replace(regss,'')
return c
} }
} }
//调用方法时--this.$commonjs.today() //调用方法时--this.$commonjs.today()
\ No newline at end of file
components/buyKnow.vue 0 → 100644
View file @ 11bf8463
<template>
<u-popup v-model="showPop" mode="bottom" border-radius="14" closeable height="85%">
<view class="son-wrap">
<view class="head">
<view class="head1">
购买须知
</view>
<view class="head2">
{{buyKnowData.name}}
</view>
<view class="head3">
挂牌价：￥{{buyKnowData.originalPrice}}
</view>
</view>
<view class="middle">
<view class="middle-list" v-for="(item,a) of buyKnowData.productTitleResVos" :key="a">
<view class="middle-title">
{{item.title}}
</view>
<view class="middle-content" v-for="(items,b) of item.productChildTitleData" :key="b">
<text>
{{items.title}}
</text>
<view>
<!--<text>随买随用</text>-->
<text v-for="(itemss,c) of items.contentList" :key="c" class="content-child">
{{itemss.content}}
</text>
</view>
</view>
</view>
</view>
<view class="bottom">
<text class="bottom-left">
¥ <text>{{buyKnowData.sellingPrice}}</text>
</text>
<view class="bottom-right">
<text class="btn" @click="showPop=false">
去预订
</text>
</view>
</view>
</view>
</u-popup>
</template>
<script>
export default {
props: ['buyKnowData'],
data() {
return {
showPop: false, //控制弹窗显示隐藏
}
},
methods: {
}
}
</script>
<style scoped="scoped">
.son-wrap{
font-size: 24rpx;
position: relative;
}
.head {
padding: 100rpx 24rpx 0 24rpx;
}
.head1{
text-align: center;
font-size: 32rpx;
font-weight: bold;
text-align: center;
padding: 30rpx 0;
position:fixed;
top: 0;
width: 100%;
background: #fff;
z-index: 1;
}
.head2{
font-weight: bolder;
font-size: 32rpx;
line-height: 40rpx;
}
.head3{
font-size: 28rpx;
margin-top: 20rpx;
color: #666666;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 30rpx;
}
.middle {
padding-bottom: 100rpx;
font-size: 28rpx;
}
.middle-list {
margin: 30rpx 24rpx;
padding-bottom: 24rpx;
border-bottom: 1px solid #E6E6E6;
}
.middle-title{
font-size: 32rpx;
font-weight: bold;
}
.middle-content {
display: flex;
margin-top: 30rpx;
position: relative;
}
.middle-content>text {
color: #666666;
margin-right: 30rpx;
width: 120rpx;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
flex-shrink: 0;
font-size: 26rpx;
position: relative;
}
.middle-content view {
display: flex;
flex-direction: column;
justify-content: center;
}
.bottom {
display: flex;
justify-content: space-between;
padding: 0 24rpx;
height: 100rpx;
align-items: center;
position: fixed;
bottom: 0;
width: 100%;
z-index: 9;
background: #FFFFFF;
box-sizing: border-box;
}
.bottom-left{
color: #f9690e;
}
.bottom-left text {
font-size: 36rpx;
font-weight: bolder;
}
.bottom view {
display: flex;
align-items: center;
}
.btn{
padding: 16rpx 48rpx;
border-radius: 20rpx;
font-size: 32rpx;
}
</style>
components/customer.vue
View file @ 11bf8463
<template> <template>
<!-- 客服 --> <!-- 客服 -->
<u-popup v-model="showPop" mode="bottom" border-radius="14" closeable > <u-popup v-model="showPop" mode="bottom" border-radius="14" closeable height="85%">
<view class="wrap"> <view class="son-wrap">
<view class="title"> <view class="title">
客服电话 客服电话
</view> </view>
...@@ -40,6 +40,9 @@ export default{ ...@@ -40,6 +40,9 @@ export default{
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.son-wrap{
position: relative;
}
.title{ .title{
text-align: center; text-align: center;
font-size: 32rpx; font-size: 32rpx;
...@@ -62,26 +65,5 @@ export default{ ...@@ -62,26 +65,5 @@ export default{
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.wrap{
overflow-y: auto;
position: relative;
}
@media only screen and (max-height: 900px) {
.wrap{
max-height: 750px;
}
}
@media only screen and (max-height: 750px) {
.wrap{
max-height: 600px;
}
}
@media only screen and (max-height: 600px) {
.wrap{
max-height: 500px;
}
}
</style> </style>
\ No newline at end of file
components/merchantDetail.vue
View file @ 11bf8463
<template> <template>
<!-- 商家详情弹窗 --> <!-- 商家详情弹窗 -->
<u-popup v-model="showPop" mode="bottom" border-radius="14" closeable > <u-popup v-model="showPop" mode="bottom" border-radius="14" closeable height="85%">
<view class="buy-wrap"> <view class="son-wrap">
<view class="head"> <view class="head">
{{detailData.name}} {{detailData.name}}
</view> </view>
...@@ -155,7 +155,10 @@ export default { ...@@ -155,7 +155,10 @@ export default {
} }
</script> </script>
<style scoped="scoped"> <style scoped="scoped" lang="scss">
.son-wrap{
position: relative;
}
.head{ .head{
text-align: center; text-align: center;
font-size: 32rpx; font-size: 32rpx;
...@@ -228,26 +231,4 @@ export default { ...@@ -228,26 +231,4 @@ export default {
white-space: nowrap; white-space: nowrap;
margin-right: 10rpx; margin-right: 10rpx;
} }
.buy-wrap{
overflow-y: auto;
position: relative;
}
@media only screen and (max-height: 900px) {
.buy-wrap{
max-height: 750px;
}
}
@media only screen and (max-height: 750px) {
.buy-wrap{
max-height: 600px;
}
}
@media only screen and (max-height: 600px) {
.buy-wrap{
max-height: 500px;
}
}
</style> </style>
\ No newline at end of file
main.js
View file @ 11bf8463
...@@ -41,4 +41,27 @@ Number.prototype.toFixed=function (d) { ...@@ -41,4 +41,27 @@ Number.prototype.toFixed=function (d) {
return (pm+s).replace(/\.$/,'') return (pm+s).replace(/\.$/,'')
}return this+'' }return this+''
} }
// 时间格式化
Date.prototype.Format = function(fmt) {
var o = {
'M+': this.getMonth() + 1, // 月份
'd+': this.getDate(), // 日
'h+': this.getHours(), // 小时
'm+': this.getMinutes(), // 分
's+': this.getSeconds(), // 秒
'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
S: this.getMilliseconds() // 毫秒
}
if (/(y+)/.test(fmt))
fmt = fmt.replace(
RegExp.$1,
(this.getFullYear() + '').substr(4 - RegExp.$1.length)
)
for (var k in o)
if (new RegExp('(' + k + ')').test(fmt))
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
)
return fmt
} //调用new Date().Format("yyyy-MM-dd hh:mm");
pages/scenic/scenicChooseProduct/scenicChooseProduct.vue
View file @ 11bf8463
<template> <template>
<view class="wrap"> <view class="wrap">
<view class="banner"> <view class="banner">
<u-swiper :list="imgList" name='url' mode="number" height="350"></u-swiper> <u-swiper :list="imgList" name='url' mode="number" height="420" indicator-pos="topRight"></u-swiper>
</view> </view>
<view class="middle"> <view class="middle">
<view class="tabbar"> <view class="tabbar">
...@@ -26,16 +26,17 @@ ...@@ -26,16 +26,17 @@
距您{{item.distance?parseFloat((item.distance/1000).toFixed(2)):0}}km 距您{{item.distance?parseFloat((item.distance/1000).toFixed(2)):0}}km
</view> </view>
</view> </view>
<label v-for="(items,a) in item.productList" :key='a'> <checkbox-group @change="checkboxChange">
<view class="product"> <label v-for="(items,a) in item.productListCopy" :key='a'>
<view class="product" :class="{'on':items.ifChoose}">
<view class="product-left"> <view class="product-left">
<checkbox class="blue" /> <checkbox class="blue" :disabled="items.status==2" :value="JSON.stringify(items)" />
</view> </view>
<view class="product-right"> <view class="product-right">
<view class="product-name"> <view class="product-name">
<text>{{items.name}}</text> <text>{{items.name}}</text>
<!-- <text class="product-status">已售罄</text> --> <text class="product-status" v-if='items.status==2'>{{items.statusName}}</text>
</view> </view>
<view class="product-price"> <view class="product-price">
...@@ -49,7 +50,7 @@ ...@@ -49,7 +50,7 @@
<text class="product-rule"> <text class="product-rule">
无需取票 无需取票
</text> </text>
<text>购买须知</text> <text @click="showBuyKnow(items)">购买须知</text>
<u-icon name="arrow-right"></u-icon> <u-icon name="arrow-right"></u-icon>
</view> </view>
<view> <view>
...@@ -64,6 +65,18 @@ ...@@ -64,6 +65,18 @@
</view> </view>
</view> </view>
</label> </label>
</checkbox-group>
<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'></u-icon>
</view>
<view v-else @click="retractProduct(item)">
收起
<u-icon name='arrow-up'></u-icon>
</view>
</view>
</view> </view>
<u-empty text="空空如也..." mode="list" v-if="scenicList.length==0"></u-empty> <u-empty text="空空如也..." mode="list" v-if="scenicList.length==0"></u-empty>
</scroll-view> </scroll-view>
...@@ -87,18 +100,18 @@ ...@@ -87,18 +100,18 @@
客服 客服
</view> </view>
<view class="bottom-middle"> <view class="bottom-middle">
<view class="bottom-more"> <view class="bottom-more" v-show="chooseProduct.length>0">
组合购更优惠 组合购更优惠
<text class="bottom-three"></text> <text class="bottom-three"></text>
</view> </view>
<view class="bottom-detail"> <view class="bottom-detail" :style="{'top':chooseProduct.length>0?'-28rpx':'0'}">
<text> <text>
明细 明细
</text> </text>
<u-icon name='arrow-up' size='32' style="margin: 0 8rpx;"></u-icon> <u-icon name='arrow-up' size='32' style="margin: 0 8rpx;"></u-icon>
<text class="bottom-number"> <text class="bottom-number">
1 {{chooseProduct.length}}
</text> </text>
</view> </view>
</view> </view>
...@@ -108,14 +121,27 @@ ...@@ -108,14 +121,27 @@
</view> </view>
<!-- 客服组件 --> <!-- 客服组件 -->
<customer :scenicList='scenicList' ref='customer'></customer> <customer :scenicList='scenicList' ref='customer'></customer>
<!-- 购买须知 -->
<buyKnow :buyKnowData='buyKnowData' ref='buyKnow'></buyKnow>
<!-- 模态框 -->
<u-modal
v-model="showModal"
@confirm="chooseConfirm"
@cancel='chooseCancel'
title='提示'
content='该产品不支持多选'
show-cancel-button=true >
</u-modal>
</view> </view>
</template> </template>
<script> <script>
import customer from '@/components/customer.vue'//客服 import customer from '@/components/customer.vue'//客服
import buyKnow from '@/components/buyKnow.vue'//购买须知
export default { export default {
components:{ components:{
customer customer,
buyKnow
}, },
data() { data() {
return { return {
...@@ -125,8 +151,38 @@ export default { ...@@ -125,8 +151,38 @@ export default {
imgList:[],//图片列表 imgList:[],//图片列表
scenicList:[],//景区数据 scenicList:[],//景区数据
showDistance:false,//定位成功显示距离 showDistance:false,//定位成功显示距离
buyKnowData:'',//购买须知数据
chooseProduct:[],//选中的产品
showModal:false,//是否显示模态框
} }
}, },
watch: {
//选中产品的数量变化
chooseProduct: {
handler(newValue, oldValue){
// this.originalTotal=0
// this.sellTotal=0
// this.chooseProduct.forEach((item)=>{//通过选中的产品计算价格
// this.originalTotal+=item.originalPrice
// this.sellTotal+=item.sellingPrice
// })
//当选中产品时
if(newValue.length>oldValue.length){
let item=newValue[newValue.length-1]
if(item.isMoreBuy!==0){
//不支持多产品购买时，删除该景区的其他产品
this.showModal=true
}else{
//支持多产品购买时，删除该景区其他产品不支持多产品购买的产品
}
}
},
deep:true,
immediate: false
},
},
onLoad(option){ onLoad(option){
let token = uni.getStorageSync('token') let token = uni.getStorageSync('token')
if(token){ if(token){
...@@ -160,6 +216,83 @@ export default { ...@@ -160,6 +216,83 @@ export default {
showCustomer(){ showCustomer(){
this.$refs.customer.showPop=true this.$refs.customer.showPop=true
}, },
//---展示购买须知
showBuyKnow(data){
this.buyKnowData=data
this.$refs.buyKnow.showPop=true
},
//---展示更多产品
showMoreProduct(item){
item.productListCopy=item.productList
this.$forceUpdate()
},
//---收起产品
retractProduct(item){
item.productListCopy=item.productList.slice(0,2)
this.$forceUpdate()
},
//---多选框变化
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.ifChoose=false
this.chooseProduct.forEach(item3=>{
if(item2.id==item3.id){
item2.ifChoose=true
}
})
})
})
},
//---不支持多选产品弹窗，选择确定事件
chooseConfirm(){
this.chooseProduct.forEach((item2,index)=>{
//删除选中产品以外的其他所有产品
if(this.chooseMerchantId==item2.merchantId&&JSON.stringify(item2)!=JSON.stringify(this.chooseMerchantProduct)){
delete this.chooseProduct[index]
//找到删除下标，然后找到对应的多选框不让选中
this.scenicList.forEach((item3,x)=>{
item3.productList.forEach((item4,y)=>{
if(JSON.stringify(item2)==JSON.stringify(item4)){
document.querySelectorAll('.list')[x].children[1].children[y].children[0].children[0].children[0].checked=false
}
})
})
}
})
this.chooseProduct=this.chooseProduct.filter(function (val) {
return val
})
this.showConfig=false
},
//---不支持多选产品弹窗，选择取消事件
chooseCancel(){
//删除选中产品
this.chooseProduct.forEach((item2,index)=>{
if(JSON.stringify(item2)===JSON.stringify(this.chooseMerchantProduct)){
delete this.chooseProduct[index]
//找到删除下标，然后找到对应的多选框不让选中
this.scenicList.forEach((item3,x)=>{
item3.productList.forEach((item4,y)=>{
if(JSON.stringify(item2)==JSON.stringify(item4)){
document.querySelectorAll('.list')[x].children[1].children[y].children[0].children[0].children[0].checked=false
}
})
})
}
})
this.chooseProduct=this.chooseProduct.filter(function (val) {
return val
})
this.showConfig=false
},
//---商品列表 //---商品列表
initList(latitude,longitude) { initList(latitude,longitude) {
let data = { let data = {
...@@ -171,10 +304,36 @@ export default { ...@@ -171,10 +304,36 @@ export default {
if (res.code == '00') { if (res.code == '00') {
this.scenicList = res.data.merchantList this.scenicList = res.data.merchantList
this.scenicList.forEach((item,index)=>{ this.scenicList.forEach((item,index)=>{
//获取当前景区图片,把当前景区放在第一位
if(item.id==this.merchantId){ if(item.id==this.merchantId){
this.imgList=item.imgList this.imgList=item.imgList
console.log(this.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='已售罄'
}
} }
}
})
}) })
} else { } else {
uni.showToast({ uni.showToast({
...@@ -198,7 +357,7 @@ export default { ...@@ -198,7 +357,7 @@ export default {
.middle{ .middle{
position: relative; position: relative;
top: -40rpx; top: -40rpx;
padding: 0 24rpx; padding: 0 24rpx 60rpx 24rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
...@@ -318,7 +477,10 @@ export default { ...@@ -318,7 +477,10 @@ export default {
font-weight: bold; font-weight: bold;
margin-left: 10rpx; margin-left: 10rpx;
} }
.product-more{
padding: 10rpx;
text-align: center;
}
.bottom{ .bottom{
position: fixed; position: fixed;
...@@ -359,7 +521,6 @@ export default { ...@@ -359,7 +521,6 @@ export default {
} }
.bottom-detail{ .bottom-detail{
position: relative; position: relative;
top: -28rpx;
text-align: center; text-align: center;
} }
.bottom-number{ .bottom-number{
......
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