Commit 8f10bc98 authored by 潘永坪's avatar 潘永坪

弹窗修改

parent c86d9003
<template>
<u-popup v-model="showPop" mode="bottom" border-radius="14" closeable height="85%">
<u-popup :show="showPop" :round="20" @close="showPop=false">
<view class="son-wrap">
<view class="head">
<view class="head1">
购买须知
<view style="flex: 1;text-align: center;">
购买须知
</view>
<u-icon name="close" @click="showPop=false"></u-icon>
</view>
<view class="head2">
{{buyKnowData.name}}
......@@ -12,39 +15,43 @@
<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}}
<view style="flex: 1;overflow-y: scroll;">
<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>
<view class="bottom">
<text class="bottom-left">
¥ <text>{{buyKnowData.sellingPrice}}</text>
</text>
<view class="bottom-right">
<text class="btn" @click="showPop=false">
去预订
<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>
</view>
</u-popup>
</template>
......@@ -63,102 +70,99 @@ export default {
</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;
}
.son-wrap{
position: relative;
height:85vh;
display: flex;
flex-direction:column;
}
.head{
padding: 0 24rpx;
}
.head1{
display: flex;
font-size: 32rpx;
font-weight: bold;
padding: 30rpx 0;
border-radius: 20rpx 20rpx 0 0;
}
.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{
color: #f9690e;
}
.bottom-left text {
font-size: 36rpx;
font-weight: bolder;
}
.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;
}
.bottom view {
display: flex;
align-items: center;
}
.btn{
padding: 16rpx 48rpx;
border-radius: 20rpx;
font-size: 32rpx;
}
</style>
<template>
<!-- 客服 -->
<u-popup v-model="showPop" mode="bottom" border-radius="14" closeable height="75%">
<u-popup :show="showPop" :round="20" @close="showPop = false">
<view class="son-wrap">
<view class="title">
客服电话
<view style="flex: 1; text-align: center"> 客服电话 </view>
<u-icon name="close" @click="showPop = false"></u-icon>
</view>
<view class="middle">
<view class="list" v-for="(item,index) in scenicList" :key='index' @click="makePhone(item.phone)">
<view class="list" v-for="(item, index) in scenicList" :key="index" @click="makePhone(item.phone)">
<text> {{ item.name }}: </text>
<text>
{{item.name}}:
</text>
<text>
{{item.phone}}
{{ item.phone }}
</text>
</view>
</view>
......@@ -20,50 +19,49 @@
</template>
<script>
export default{
props:['scenicList'],
data(){
return{
showPop:false,//控制弹窗显示隐藏
export default {
props: ['scenicList'],
data() {
return {
showPop: false //控制弹窗显示隐藏
}
},
methods:{
methods: {
//---拨打电话
makePhone(phoneNumber){
makePhone(phoneNumber) {
uni.makePhoneCall({
phoneNumber
})
}
}
}
</script>
<style scoped lang="scss">
.son-wrap{
position: relative;
}
.title{
text-align: center;
font-size: 32rpx;
font-weight: bold;
padding: 30rpx 0;
position:fixed;
top: 0;
width: 100%;
background: #fff;
z-index: 1;
}
.middle{
padding-top: 100rpx;
}
.list{
height:100rpx;
border-bottom: 1px solid #E6E6E6;
padding: 0 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
\ No newline at end of file
.son-wrap {
position: relative;
height: 65vh;
display: flex;
flex-direction: column;
}
.title {
display: flex;
font-size: 32rpx;
font-weight: bold;
padding: 30rpx;
background: #fff;
border-radius: 20rpx 20rpx 0 0;
}
.middle {
flex: 1;
overflow-y: scroll;
}
.list {
height: 100rpx;
border-bottom: 1px solid #e6e6e6;
padding: 0 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
<template>
<!-- 商家详情弹窗 -->
<u-popup v-model="showPop" mode="bottom" border-radius="14" closeable height="85%">
<u-popup :show="showPop" :round="20" @close="showPop=false">
<view class="son-wrap">
<view class="head">
{{detailData.name}}
</view>
<view style="padding-top: 100rpx;">
<u-swiper :list="detailData.imgList" mode="number" height="350" name="url"></u-swiper>
</view>
<view class="middle">
<!-- 景区介绍 -->
<view class="introduce">
<view class="middle-title">
介绍
</view>
<view v-html="detailData.introduce">
</view>
<view class="middle-title" style="margin-top: 20rpx;">
用时参考
</view>
<view>
建议游玩时长:{{detailData.timeSpent}}
</view>
<view class="head-name">
{{detailData.name}}
</view>
<!-- 开放时间 -->
<view class="opentime">
<view class="middle-title">开放时间</view>
<table border-color="#04a7f4" >
<tr v-if="!times">
<td>每天</td>
</tr>
<tr v-if="!times">
<td>
{{detailData.businessStart?detailData.businessStart.substr(0,5):""}}
~{{detailData.businessEnd?detailData.businessEnd.substr(0,5):""}}
</td>
</tr>
<tr v-if="times">
<td colspan="2">开放时间</td>
</tr>
<tr v-for="(item,index) of times" :key="index" v-if="times">
<td v-for="(items,b) of item" :key="b" v-if="items!=''">
{{items}}
</td>
</tr>
</table>
<u-icon name="close" @click="showPop=false"></u-icon>
</view>
<view style="flex: 1;overflow-y: scroll;">
<view>
<u-swiper :list="detailData.imgList" mode="number" height="350" name="url"></u-swiper>
</view>
<!-- 优待政策 -->
<view class="policy" v-if="policy">
<view class="middle-title" style="padding-bottom: 4rpx;">
{{policy.childTitle}}
<view class="middle">
<!-- 景区介绍 -->
<view class="introduce">
<view class="middle-title">
介绍
</view>
<view v-html="detailData.introduce">
</view>
<view class="middle-title" style="margin-top: 20rpx;">
用时参考
</view>
<view>
建议游玩时长:{{detailData.timeSpent}}
</view>
</view>
<view v-for="(item,index) of policy.contentList" :key="index" style="margin-top: 20rpx;">
{{item.content}}
<!-- 开放时间 -->
<view class="opentime">
<view class="middle-title">开放时间</view>
<table border-color="#04a7f4" >
<tr v-if="!times">
<td>每天</td>
</tr>
<tr v-if="!times">
<td>
{{detailData.businessStart?detailData.businessStart.substr(0,5):""}}
~{{detailData.businessEnd?detailData.businessEnd.substr(0,5):""}}
</td>
</tr>
<tr v-if="times">
<td colspan="2">开放时间</td>
</tr>
<tr v-for="(item,index) of times" :key="index" v-if="times">
<td v-for="(items,b) of item" :key="b" v-if="items!=''">
{{items}}
</td>
</tr>
</table>
</view>
</view>
<!--景区设施 -->
<view class="facilities" v-if="facilities">
<view class="middle-title" style="padding-bottom: 4rpx;">
{{facilities.title}}
<!-- 优待政策 -->
<view class="policy" v-if="policy">
<view class="middle-title" style="padding-bottom: 4rpx;">
{{policy.childTitle}}
</view>
<view v-for="(item,index) of policy.contentList" :key="index" style="margin-top: 20rpx;">
{{item.content}}
</view>
</view>
<view class="fac-content" v-for="(item,a) of facilities.merchantChildTitleData" :key="a">
<text class="fac-left">
{{item.childTitle}}
</text>
<view class="fac-right">
<text v-for="(items,b) of item.contentList" :key="b">
{{items.content}}
<!--景区设施 -->
<view class="facilities" v-if="facilities">
<view class="middle-title" style="padding-bottom: 4rpx;">
{{facilities.title}}
</view>
<view class="fac-content" v-for="(item,a) of facilities.merchantChildTitleData" :key="a">
<text class="fac-left">
{{item.childTitle}}
</text>
<view class="fac-right">
<text v-for="(items,b) of item.contentList" :key="b">
{{items.content}}
</text>
</view>
</view>
</view>
</view>
<!-- 出行贴士 -->
<view class="travelTips" v-if="travelTips">
<view class="middle-title" style="padding-bottom: 4rpx;">
{{travelTips.title}}
</view>
<view class="travel-content" v-for="(item,a) of travelTips.merchantChildTitleData" :key="a">
<text class="travel-left">
{{item.childTitle}}
</text>
<view class="travel-right">
<text v-for="(items,b) of item.contentList" :key="b">
{{items.content}}
<!-- 出行贴士 -->
<view class="travelTips" v-if="travelTips">
<view class="middle-title" style="padding-bottom: 4rpx;">
{{travelTips.title}}
</view>
<view class="travel-content" v-for="(item,a) of travelTips.merchantChildTitleData" :key="a">
<text class="travel-left">
{{item.childTitle}}
</text>
<view class="travel-right">
<text v-for="(items,b) of item.contentList" :key="b">
{{items.content}}
</text>
</view>
</view>
</view>
</view>
</view>
</view>
</u-popup>
</template>
......@@ -158,17 +164,22 @@ export default {
<style scoped="scoped" lang="scss">
.son-wrap{
position: relative;
height:80vh;
display: flex;
flex-direction:column;
}
.head{
text-align: center;
display: flex;
font-size: 32rpx;
font-weight: bold;
padding: 30rpx 0;
position:fixed;
top: 0;
width: 100%;
padding: 30rpx;
background: #fff;
z-index: 1;
border-radius: 20rpx 20rpx 0 0;
border-bottom: 1px solid #f5f5f5;
}
.head-name{
flex: 1;
text-align: center;
}
.middle{
padding: 24rpx 24rpx 80rpx 24rpx;
......
<template>
<!----------------适用于订单选择券的时候展示券列表-------------------------->
<u-popup v-model="show" mode="bottom">
<u-popup :show="show" :round="20" closeable @close="show=false">
<view class="title">
<view class="titleContent" v-for="(item,index) of navTitle" :key="index" :class="{on:active==index}" @click="navClick(index)">
<view style="position: relative;top:15rpx;">{{item}}</view>
......
......@@ -53,7 +53,7 @@
</view>
<view class="product-price">
<view style="font-size: 24rpx">
<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>
......@@ -74,12 +74,12 @@
</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)">
<view style="display: flex;justify-content: center;" 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 style="display: flex;justify-content: center;" v-else @click="retractProduct(item)">
收起
<u-icon name="arrow-up"></u-icon>
</view>
......@@ -707,6 +707,7 @@ export default {
.title-right {
color: $grey;
font-size: 24rpx;
display: flex;
}
.product {
padding: 10rpx 16rpx;
......@@ -816,6 +817,7 @@ export default {
.bottom-detail {
position: relative;
text-align: center;
display: flex;
}
.bottom-number {
display: inline-block;
......@@ -862,15 +864,16 @@ export default {
}
}
.album-btn{
display: inline-block;
display: flex;
width: 160rpx;
height: 44rpx;
background: #E1E1D9;
border-radius: 20rpx 20rpx 20rpx 20rpx;
font-size: 22rpx;
color: #333333;
text-align: center;
line-height: 44rpx;
align-items: center;
justify-content: center;
padding-left: 8rpx;
}
.swiper-item /deep/ .u-waterfall{
padding-top:8rpx;
......
<template>
<!-- 详情 -->
<u-popup v-model="showPop" mode="bottom" border-radius="14" closeable height="75%">
<u-popup :show="showPop" :round="20" @close="showPop = false">
<view class="son-wrap">
<view class="title">
明细
<view style="flex: 1; text-align: center">
明细
</view>
<u-icon name="close" @click="showPop = false"></u-icon>
</view>
<view class="middle">
<view class="merchantlist" v-for="(item,index) in merchantList" :key="index">
<view class="merchant-title">
{{item.merchantName}}
<view style="flex: 1;overflow-y: scroll;">
<view class="middle">
<view class="merchantlist" v-for="(item,index) in merchantList" :key="index">
<view class="merchant-title">
{{item.merchantName}}
</view>
<view class="productlist" v-for="(items,a) in item.productlist" :key='a'>
<text>
{{items.name}}
</text>
<text style="font-weight: bold;">
¥{{items.sellingPrice}}
</text>
</view>
</view>
<view class="productlist" v-for="(items,a) in item.productlist" :key='a'>
<text>
{{items.name}}
</text>
<text style="font-weight: bold;">
¥{{items.sellingPrice}}
</view>
<view class="bottom">
<view class="bottom-left">
合计:¥
<text style="font-weight: bold;font-size: 40rpx;">{{priceTotal}}</text>
</view>
<view class="bottom-right">
<text class="btn" @click="goFillorder()">
去预订
</text>
</view>
</view>
</view>
<view class="bottom">
<view class="bottom-left">
合计:¥
<text style="font-weight: bold;font-size: 40rpx;">{{priceTotal}}</text>
</view>
<view class="bottom-right">
<text class="btn" @click="goFillorder()">
去预订
</text>
</view>
</view>
</view>
</u-popup>
</template>
......@@ -91,21 +96,20 @@ export default {
<style scoped="scoped" lang="scss">
.son-wrap{
position: relative;
}
height:80vh;
display: flex;
flex-direction:column;
}
.title{
text-align: center;
display: flex;
font-size: 32rpx;
font-weight: bold;
text-align: center;
padding: 30rpx 0;
position:fixed;
top: 0;
width: 100%;
padding: 30rpx;
background: #fff;
z-index: 1;
border-radius: 20rpx 20rpx 0 0;
}
.middle {
padding: 100rpx 24rpx;
padding:0 24rpx 100rpx 24rpx;
}
.merchantlist{
border-bottom:2rpx solid #ececec;
......
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