Skip to content

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

影集项目新建

parent 11bf8463
Show 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>
<!-- 详情 -->
<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>
<script>
export default {
props: ['chooseProduct'],
data() {
return {
showPop: false, //控制弹窗显示隐藏
}
},
methods: {
}
}
</script>
<style>
<style scoped="scoped">
.son-wrap{
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,6 +12,7 @@
<swiper :current="active" @animationfinish="animationfinish" class="swiper-box">
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height:100%;width: 100%;">
<checkbox-group @change="checkboxChange">
<view class="merchant" v-for="(item,index) in scenicList" :key='index'>
<view class="merchant-title">
<view class="title-left">
......@@ -26,11 +27,11 @@
距您{{item.distance?parseFloat((item.distance/1000).toFixed(2)):0}}km
</view>
</view>
<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)" />
<checkbox class="blue" :disabled="items.status==2" :value="JSON.stringify(items)" :checked="items.ifChecked" />
</view>
<view class="product-right">
......@@ -65,7 +66,7 @@
</view>
</view>
</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)">
更多
......@@ -78,6 +79,7 @@
</view>
</view>
</view>
</checkbox-group>
<u-empty text="空空如也..." mode="list" v-if="scenicList.length==0"></u-empty>
</scroll-view>
</swiper-item>
......@@ -105,7 +107,7 @@
<text class="bottom-three"></text>
</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>
......@@ -123,6 +125,8 @@
<customer :scenicList='scenicList' ref='customer'></customer>
<!-- 购买须知 -->
<buyKnow :buyKnowData='buyKnowData' ref='buyKnow'></buyKnow>
<!-- 详情明细 -->
<detail :chooseProduct='chooseProduct' ref='detail'></detail>
<!-- 模态框 -->
<u-modal
v-model="showModal"
......@@ -138,10 +142,12 @@
<script>
import customer from '@/components/customer.vue'//客服
import buyKnow from '@/components/buyKnow.vue'//购买须知
import detail from '@/components/detail.vue'//购买须知
export default {
components:{
customer,
buyKnow
buyKnow,
detail
},
data() {
return {
......@@ -154,6 +160,7 @@ export default {
buyKnowData:'',//购买须知数据
chooseProduct:[],//选中的产品
showModal:false,//是否显示模态框
chooseMerchantProduct:'',//不支持多产品购买时，选中的景区产品
}
},
watch: {
......@@ -168,13 +175,49 @@ export default {
// })
//当选中产品时
if(newValue.length>oldValue.length){
let item=newValue[newValue.length-1]
if(item.isMoreBuy!==0){
//不支持多产品购买时，删除该景区的其他产品
//找到当前选中的产品
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.ifChoose=false
}
})
})
delete this.chooseProduct[index]
}
})
this.chooseProduct=this.chooseProduct.filter(function (val) {
return val
})
}
}
},
......@@ -221,6 +264,10 @@ export default {
this.buyKnowData=data
this.$refs.buyKnow.showPop=true
},
//---展示明细弹窗
showDetail(){
this.$refs.detail.showPop=true
},
//---展示更多产品
showMoreProduct(item){
item.productListCopy=item.productList
......@@ -251,47 +298,46 @@ export default {
})
})
},
//---不支持多选产品弹窗，选择确定事件
//---不支持多选产品，选择确定事件
chooseConfirm(){
this.chooseProduct.forEach((item2,index)=>{
this.chooseProduct.forEach((item,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
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]
}
})
this.chooseProduct=this.chooseProduct.filter(function (val) {
return val
})
this.showConfig=false
this.showModal=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.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.ifChoose=false
}
})
})
this.chooseProduct.splice(index,1)
}
})
this.chooseProduct=this.chooseProduct.filter(function (val) {
return val
})
this.showConfig=false
this.showModal=false
},
//---商品列表
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