Skip to content

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

影集项目新建

parent 11bf8463
Hide whitespace changes
Inline Side-by-side
Showing with 227 additions and 92 deletions
pages/photos/test.vue 0 → 100644
View file @ 8cee6ef9
<template>
</template>
<script>
</script>
<style>
</style>
\ No newline at end of file
pages/scenic/scenicChooseProduct/components/detail.vue
View file @ 8cee6ef9
<template> <template>
<!-- 详情 --> <!-- 详情 -->
<u-popup v-model="showPop" mode="bottom" border-radius="14" closeable height="85%">
<view class="son-wrap">
<view class="title">
明细
</view>
<view class="middle">
</view>
<view class="bottom">
<text class="bottom-left">
<view></view>
<view></view>
</text>
<view class="bottom-right">
<text class="btn">
去预订
</text>
</view>
</view>
</view>
</u-popup>
</template> </template>
<script> <script>
export default {
props: ['chooseProduct'],
data() {
return {
showPop: false, //控制弹窗显示隐藏
}
},
methods: {
}
}
</script> </script>
<style> <style scoped="scoped">
</style> .son-wrap{
\ No newline at end of file position: relative;
}
.title{
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;
}
.middle {
padding: 100rpx 24rpx 0 24rpx;
}
.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>
pages/scenic/scenicChooseProduct/scenicChooseProduct.vue
View file @ 8cee6ef9
...@@ -12,72 +12,74 @@ ...@@ -12,72 +12,74 @@
<swiper :current="active" @animationfinish="animationfinish" class="swiper-box"> <swiper :current="active" @animationfinish="animationfinish" class="swiper-box">
<swiper-item class="swiper-item"> <swiper-item class="swiper-item">
<scroll-view scroll-y style="height:100%;width: 100%;"> <scroll-view scroll-y style="height:100%;width: 100%;">
<view class="merchant" v-for="(item,index) in scenicList" :key='index'> <checkbox-group @change="checkboxChange">
<view class="merchant-title"> <view class="merchant" v-for="(item,index) in scenicList" :key='index'>
<view class="title-left"> <view class="merchant-title">
<text >{{item.name}}</text> <view class="title-left">
<image src="../../../static/img/scenic/coupon.png" ></image> <text >{{item.name}}</text>
<text class="title-coupon"> <image src="../../../static/img/scenic/coupon.png" ></image>
劵惠 <text class="title-coupon">
</text> 劵惠
</text>
</view>
<view v-if="showDistance" class="title-right">
距您{{item.distance?parseFloat((item.distance/1000).toFixed(2)):0}}km
</view>
</view> </view>
<view v-if="showDistance" class="title-right"> <label v-for="(items,a) in item.productListCopy" :key='a'>
距您{{item.distance?parseFloat((item.distance/1000).toFixed(2)):0}}km <view class="product" :class="{'on':items.ifChoose}">
</view> <view class="product-left">
</view> <checkbox class="blue" :disabled="items.status==2" :value="JSON.stringify(items)" :checked="items.ifChecked" />
<checkbox-group @change="checkboxChange">
<label v-for="(items,a) in item.productListCopy" :key='a'>
<view class="product" :class="{'on':items.ifChoose}">
<view class="product-left">
<checkbox class="blue" :disabled="items.status==2" :value="JSON.stringify(items)" />
</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>
<view class="product-price"> <view class="product-right">
<view style="font-size: 24rpx;"> <view class="product-name">
<text class="product-rule" v-if="items.productRefundRuleVo"> <text>{{items.name}}</text>
<text v-if="items.productRefundRuleVo.refundType==0">不可退</text> <text class="product-status" v-if='items.status==2'>{{items.statusName}}</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="showBuyKnow(items)">购买须知</text>
<u-icon name="arrow-right"></u-icon>
</view> </view>
<view>
<text class="product-orange"> <view class="product-price">
¥{{items.originalPrice}} <view style="font-size: 24rpx;">
</text> <text class="product-rule" v-if="items.productRefundRuleVo">
<text class="product-sell"> <text v-if="items.productRefundRuleVo.refundType==0">不可退</text>
<text style="font-size: 28rpx;">¥</text>{{items.sellingPrice}} <text v-if="items.productRefundRuleVo.refundType==1">规定时间退</text>
</text> <text v-if="items.productRefundRuleVo.refundType==2">随时可退</text>
</text>
<text class="product-rule">
无需取票
</text>
<text @click="showBuyKnow(items)">购买须知</text>
<u-icon name="arrow-right"></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> </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)"> <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-up'></u-icon> 更多
<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> </view>
</view> </checkbox-group>
<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>
</swiper-item> </swiper-item>
...@@ -105,7 +107,7 @@ ...@@ -105,7 +107,7 @@
<text class="bottom-three"></text> <text class="bottom-three"></text>
</view> </view>
<view class="bottom-detail" :style="{'top':chooseProduct.length>0?'-28rpx':'0'}"> <view class="bottom-detail" @click="showDetail()" :style="{'top':chooseProduct.length>0?'-28rpx':'0'}">
<text> <text>
明细 明细
</text> </text>
...@@ -123,6 +125,8 @@ ...@@ -123,6 +125,8 @@
<customer :scenicList='scenicList' ref='customer'></customer> <customer :scenicList='scenicList' ref='customer'></customer>
<!-- 购买须知 --> <!-- 购买须知 -->
<buyKnow :buyKnowData='buyKnowData' ref='buyKnow'></buyKnow> <buyKnow :buyKnowData='buyKnowData' ref='buyKnow'></buyKnow>
<!-- 详情明细 -->
<detail :chooseProduct='chooseProduct' ref='detail'></detail>
<!-- 模态框 --> <!-- 模态框 -->
<u-modal <u-modal
v-model="showModal" v-model="showModal"
...@@ -138,10 +142,12 @@ ...@@ -138,10 +142,12 @@
<script> <script>
import customer from '@/components/customer.vue'//客服 import customer from '@/components/customer.vue'//客服
import buyKnow from '@/components/buyKnow.vue'//购买须知 import buyKnow from '@/components/buyKnow.vue'//购买须知
import detail from '@/components/detail.vue'//购买须知
export default { export default {
components:{ components:{
customer, customer,
buyKnow buyKnow,
detail
}, },
data() { data() {
return { return {
...@@ -154,6 +160,7 @@ export default { ...@@ -154,6 +160,7 @@ export default {
buyKnowData:'',//购买须知数据 buyKnowData:'',//购买须知数据
chooseProduct:[],//选中的产品 chooseProduct:[],//选中的产品
showModal:false,//是否显示模态框 showModal:false,//是否显示模态框
chooseMerchantProduct:'',//不支持多产品购买时，选中的景区产品
} }
}, },
watch: { watch: {
...@@ -168,13 +175,49 @@ export default { ...@@ -168,13 +175,49 @@ export default {
// }) // })
//当选中产品时 //当选中产品时
if(newValue.length>oldValue.length){ if(newValue.length>oldValue.length){
let item=newValue[newValue.length-1] //找到当前选中的产品
if(item.isMoreBuy!==0){ let product=newValue[newValue.length-1]
//不支持多产品购买时，删除该景区的其他产品 //商家一级
this.showModal=true 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{ }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.ifChoose=false
}
})
})
delete this.chooseProduct[index]
}
})
this.chooseProduct=this.chooseProduct.filter(function (val) {
return val
})
} }
} }
}, },
...@@ -221,6 +264,10 @@ export default { ...@@ -221,6 +264,10 @@ export default {
this.buyKnowData=data this.buyKnowData=data
this.$refs.buyKnow.showPop=true this.$refs.buyKnow.showPop=true
}, },
//---展示明细弹窗
showDetail(){
this.$refs.detail.showPop=true
},
//---展示更多产品 //---展示更多产品
showMoreProduct(item){ showMoreProduct(item){
item.productListCopy=item.productList item.productListCopy=item.productList
...@@ -251,47 +298,46 @@ export default { ...@@ -251,47 +298,46 @@ export default {
}) })
}) })
}, },
//---不支持多选产品弹窗，选择确定事件 //---不支持多选产品，选择确定事件
chooseConfirm(){ chooseConfirm(){
this.chooseProduct.forEach((item2,index)=>{ this.chooseProduct.forEach((item,index)=>{
//删除选中产品以外的其他所有产品 //删除选中产品以外的其他所有产品
if(this.chooseMerchantId==item2.merchantId&&JSON.stringify(item2)!=JSON.stringify(this.chooseMerchantProduct)){ 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.ifChoose=false
}
})
})
delete this.chooseProduct[index] 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) { this.chooseProduct=this.chooseProduct.filter(function (val) {
return val return val
}) })
this.showConfig=false this.showModal=false
}, },
//---不支持多选产品弹窗，选择取消事件 //---不支持多选产品，选择取消事件
chooseCancel(){ chooseCancel(){
//删除选中产品 //删除选中产品
this.chooseProduct.forEach((item2,index)=>{ this.chooseProduct.forEach((item,index)=>{
if(JSON.stringify(item2)===JSON.stringify(this.chooseMerchantProduct)){ if(item.id===this.chooseMerchantProduct.id){
delete this.chooseProduct[index] //取消选中状态和选中背景颜色
//找到删除下标，然后找到对应的多选框不让选中 this.scenicList.forEach(item2=>{
this.scenicList.forEach((item3,x)=>{ item2.productList.forEach(item3=>{
item3.productList.forEach((item4,y)=>{ if(item.id==item3.id){
if(JSON.stringify(item2)==JSON.stringify(item4)){ item3.ifChecked=false
document.querySelectorAll('.list')[x].children[1].children[y].children[0].children[0].children[0].checked=false item3.ifChoose=false
} }
}) })
}) })
this.chooseProduct.splice(index,1)
} }
}) })
this.chooseProduct=this.chooseProduct.filter(function (val) { this.showModal=false
return val
})
this.showConfig=false
}, },
//---商品列表 //---商品列表
initList(latitude,longitude) { initList(latitude,longitude) {
......
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