提交

pages/daoyou/index.vue

@@ -19,6 +19,7 @@
 		<view v-for="(item,index) in list" :key="index" class="item" @click="goDetail(item)">
 			<view class="item-img">
 				<image :src="showImg(item.image)" mode="aspectFill"></image>
+				<image src="https://static.ticket.sz-trip.com/tourist/daoyou/imgBg.png" mode="" class="item-line"></image>
 			</view>
 			
 			<view class="item-content flex-column" v-if="item.guide_data">
@@ -390,9 +391,16 @@
 			width: 204rpx;
 			height: 244rpx;
 			border: 1rpx solid #96684F;
-			background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/imgBg.png');
-			background-size: 100% 100%;
 			flex-shrink: 0;
+			position: relative;
+			
+			.item-line {
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				top: 0;
+				left: 0;
+			}
 			
 			image {
 				width: 100%;

pages/index/index.vue

@@ -34,8 +34,9 @@
 		</view>
 		
 		<view class="tour-box">
-			<navigator :url="'/subPackages/daoyou/detail?id=' + item.goods.id" v-for="(item,index) in tourList" :key="index" class="tour-item">
+			<navigator :url="'/subPackages/daoyou/detail?id=' + item.goods.id" v-for="(item,index) in tourList" :key="index" class="tour-item flex-center">
 				<image :src="showImg(item.goods.image)" mode="aspectFill" class="tour-img"></image>
+				<image src="https://static.ticket.sz-trip.com/tourist/index/tourBg.png" mode="" class="tour-line"></image>
 				<!-- <image src="https://static.ticket.sz-trip.com/tourist/index/play.png" class="playImg"></image> -->
 				<!-- <view class="time">{{item.time}}</view> -->
 			</navigator>
@@ -52,6 +53,7 @@
 		
 		<view class="line-box">
 			<navigator :url="'/subPackages/line/detail?id=' + item.id" v-for="(item,index) in lineList" :key="index" class="line-item">
+				<view class="line-white"></view>
 				<image :src="showImg(item.image)" mode="aspectFill" class="line-img"></image>
 				<view class="line-content">
 					<view class="line-title text-overflowRows">{{item.title}}</view>
@@ -281,18 +283,24 @@
 		display: flex;
 		
 		.tour-item {
-			background-image: url('https://static.ticket.sz-trip.com/tourist/index/tourBg.png');
-			background-size: 100% 100%;
 			margin-right: 20rpx;
 			position: relative;
 			width: 266.73rpx;
 			height: 333.4rpx;
-			padding: 6rpx;
+			padding: 7rpx;
 			box-sizing: border-box;
 			
+			.tour-line {
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				top: 0;
+				left: 0;
+			}
+			
 			.tour-img {
-				width: 253rpx;
-				height: 320rpx;
+				width: 252.73rpx;
+				height: 319.4rpx;
 			}
 			
 			.playImg {
@@ -336,6 +344,16 @@
 			margin-right: 13rpx;
 			padding: 22rpx;
 			box-sizing: border-box;
+			position: relative;
+			
+			.line-white {
+				width: 450rpx;
+				height: 383rpx;
+				background: #FFFFFF;
+				position: absolute;
+				top: 8.5rpx;
+				left: 8.5rpx;
+			}
 			
 			.line-img {
 				width: 423rpx;
@@ -347,6 +365,7 @@
 				display: flex;
 				flex-direction: column;
 				justify-content: space-between;
+				position: relative;
 				
 				.line-title {
 					font-weight: bold;

subPackages/daoyou/detail.vue

@@ -23,7 +23,7 @@
 						<image class="daoyou-img" :src="showImg(item)" mode="aspectFill"></image>
 					</swiper-item>
 				</swiper>
-				
+				<image src="https://static.ticket.sz-trip.com/tourist/daoyou/dyImgBg.png" mode="" class="swiper-line"></image>
 				<view class="swiper-nums">
 					<view :class="['swiper-num', {'swiper-active': item == current + 1}]" v-for="item in imgLength" :key="item"></view>
 				</view>
@@ -412,11 +412,17 @@
 			top: -53rpx;
 			left: 13rpx;
 			
+			.swiper-line {
+				width: 100%;
+				height: 332rpx;
+				position: absolute;
+				top: 0;
+				left: 0;
+			}
+			
 			.daoyou-imgs {
 				width: 265rpx;
 				height: 332rpx;
-				background-image: url('https://static.ticket.sz-trip.com/tourist/daoyou/dyImgBg.png');
-				background-size: 100% 100%;
 				padding: 6rpx;
 				box-sizing: border-box;
 				position: relative;

subPackages/daoyou/order.vue

@@ -564,7 +564,8 @@
 			}
 			.people-more {
 				width: 110rpx;
-				line-height: 73rpx;
+				height: 74rpx;
+				line-height: 74rpx;
 				background: #F6F1EA;
 				border-radius: 11rpx;
 				text-align: center;

subPackages/line/orders.vue

@@ -62,7 +62,7 @@
 			</view>
 		</view> -->
 		
-		<view class="fixed-bottom">
+		<!-- <view class="fixed-bottom">
 		    <view class="order-all-price">
 		        合计：
 		        <text class="order-all-text">
@@ -70,7 +70,21 @@
 				</text>
 		    </view>
 		    <view class="order-btn" @tap="order">去支付</view>
+		</view> -->
+		
+		<footer class="flex-between">
+			<view class="footer-left">
+				<view>
+					合计：<span>{{ priceTotal() / 100 }}</span>
+				</view>
+				<view style="margin-top: 10rpx;" @click="clickAgreement(0)">
+					<span :style="{border: isAgreement ? 'none' : ''}">
+						<image src="https://static.ticket.sz-trip.com/tongli/images/user/dui.png" v-show="isAgreement"></image>
+					</span>阅读并同意《{{xieyi.title}}》
+				</view>
 			</view>
+			<view :class="['order-btn', {'order-disable': !isAgreement}]" @click="order">去支付</view>
+		</footer>
 		
 		<!-- 协议弹框 -->
 		<!-- <uni-popup ref="popup" type="bottom" :safe-area="false">
@@ -126,6 +140,24 @@
 				</view>
 			</view>
 		</uni-popup>
+		
+		<!-- 协议弹框 -->
+		<uni-popup ref="agreementPopup" type="bottom" backgroundColor="#FFFFFF">
+			<view class="agreement-box">
+				<image src="https://static.ticket.sz-trip.com/tourist/daoyou/cha.png" class="agreement-cha" @click="$refs.agreementPopup.close()"></image>
+				
+				<scroll-view class="agreement-content" scroll-y="true" @scrolltolower="lower" lower-threshold="20">
+					<view class="agreement-title">{{xieyi.title}}</view>
+					<view v-html="formateRichText(xieyi.content)"></view>
+				</scroll-view>
+				
+				<view class="agreement-btn flex-center">
+					<view :class="['flex-center', {'agreement-disable': !isBottom}]" @click="clickAgreement(1)">
+						{{isBottom ? '同意本条款' : '请上滑看完本条款后同意'}}
+					</view>
+				</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
@@ -148,7 +180,10 @@
 				remark: '',
 				peopleList: [],
 				linkmanList: [],
-				xySeld: false
+				xySeld: false,
+				isAgreement: false,
+				isBottom: false,
+				xieyi: ''
 			}
 		},
 		onReady() {
@@ -173,6 +208,13 @@
 			this.sku_ids = sku_ids
 			
 			this.getPeople()
+			
+			// 获取下单协议
+			this.Post({
+				id: 6
+			}, '/api/Article/getArticleById').then(res => {
+				this.xieyi = res.data
+			})
 		},
 		onShow() {
 			this.coupon = this.$store.state.user.coupon
@@ -245,7 +287,8 @@
 				// 	return;
 				// }
 				
-				if(flag){
+				// 阅读协议
+				if(this.isAgreement && flag){
 					let data = {
 					    goods: product_list,
 					    coupon: this.coupon ? this.coupon.id : null,
@@ -296,8 +339,29 @@
 							})
 						}
 					})
+				}else {
+					this.isBottom = false
+					this.$refs.agreementPopup.open()
 				}
 			},
+			// 查看协议
+			clickAgreement(type) {
+				if(type && this.isBottom) {
+					this.isAgreement = true
+					this.$refs.agreementPopup.close()
+				}else {
+					if(this.isAgreement){
+						this.isAgreement = false
+						return;
+					}
+					this.isBottom = false
+					this.$refs.agreementPopup.open()
+				}
+			},
+			// 协议触底
+			lower() {
+				this.isBottom = true
+			},
 			// 总价
 			priceTotal() {
 				let price = 0
@@ -837,4 +901,124 @@
 			margin: 0 22rpx;
 		}
 	}
+	
+	footer {
+		width: 750rpx;
+		height: 153rpx;
+		background: #FFFFFF;
+		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(82,82,82,0.25);
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		
+		.footer-left {
+			margin-left: 26rpx;
+			
+			&>view:first-child {
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #000000;
+				
+				span {
+					font-size: 40rpx;
+					color: #DC2525;
+				}
+				span::before {
+					font-size: 24rpx;
+					content: '￥';
+				}
+			}
+			
+			&>view:last-child {
+				display: flex;
+				align-items: center;
+				font-weight: 500;
+				font-size: 24rpx;
+				color: #666666;
+				
+				span {
+					width: 31rpx;
+					height: 31rpx;
+					border-radius: 50%;
+					border: 1rpx solid #666666;
+					margin-right: 11rpx;
+					
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+		}
+		
+		.order-btn {
+			width: 233rpx;
+			line-height: 73rpx;
+			border-radius: 11rpx;
+			background: #DC2525;
+			text-align: center;
+			font-weight: bold;
+			font-size: 32rpx;
+			color: #FFFFFF;
+			margin-right: 26rpx;
+		}
+		.order-disable {
+			background: #CCCCCC;
+		}
+	}
+	
+	.agreement-box {
+		width: 100vw;
+		height: 60vh;
+		padding: 80rpx 26rpx 200rpx 26rpx;
+		position: relative;
+		
+		.agreement-cha {
+			width: 31.33rpx;
+			height: 31.33rpx;
+			position: absolute;
+			right: 26rpx;
+			top: 26rpx;
+		}
+		
+		.agreement-content {
+			font-weight: 500;
+			font-size: 29rpx;
+			color: #666666;
+			padding-bottom: 50rpx;
+			height: 45vh;
+			
+			.agreement-title {
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #000000;
+				text-align: center;
+				margin-bottom: 36rpx;
+			}
+		}
+		
+		.agreement-btn {
+			width: 750rpx;
+			height: 153rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(82,82,82,0.25);
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			
+			view {
+				width: 697rpx;
+				height: 73rpx;
+				background: #DC2525;
+				border-radius: 11rpx;
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #FFFFFF;
+			}
+			
+			.agreement-disable {
+				background: #CCCCCC;
+			}
+		}
+	}
 </style>

subPackages/user/infoFilling.vue

@@ -885,10 +885,11 @@
 			}
 			.doc-del{
 				width: 40rpx;
-				height: 40rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
+				line-height: 40rpx;
+				// display: flex;
+				// align-items: center;
+				// justify-content: center;
+				text-align: center;
 				background: black;
 				color: white;
 				position: absolute;

unpackage/dist/build/web/index.html

@@ -1,2 +1,2 @@
 <!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>daoyous</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
-            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.690d039f.js></script><script src=/static/js/index.54f9da58.js></script></body></html>
+            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.690d039f.js></script><script src=/static/js/index.4f91d33a.js></script></body></html>