头图

pages.json

@@ -47,6 +47,14 @@
                     "navigationBarTitleText" : "视频"
                 }
             },
+			{
+				"path": "ticket/index",
+				"style": {
+					"navigationBarTitleText": "采摘"
+				}
+			},
+			
+			
             {
                 "path" : "line/index",
                 "style" : {

static/css/base.css

@@ -73,3 +73,18 @@ view {
 	color: #999999;
 }
 
+.flex-shrink-0{
+	flex-shrink: 0;
+}
+.flex-1{
+	flex: 1;
+}
+.flex-wrap{
+	flex-wrap: wrap;
+}
+.w-1rpx{
+	width: 1rpx;
+}
+.h-1rpx{
+	height: 1rpx;
+}

static/js/CommonFunction.js

@@ -90,7 +90,7 @@ Vue.prototype.showImg = img => {
 	if (img.indexOf('https://') != -1 || img.indexOf('http://') != -1) {
 		return img;
 	} else {
-		return this.NEWAPIURL + img;
+		return Vue.prototype.NEWAPIURL + img;
 	}
 }
 
@@ -214,12 +214,12 @@ Vue.prototype.getSubscribeMessage = () => {
 }
 
 // 金刚区头图
-Vue.prototype.getHeadImg = type => {
+Vue.prototype.getHeadImg = id => {
 	return Vue.prototype.Post({
-			type,
+			id,
 		},
-		'/api/public_service/getKumgangHeadImgList'
+		'/api/multimedia/detail'
 	).then(res => {
-		return res.data[0].image
+		return res.data.head_img
 	});
 }

subPackages/ticket/index.vue

@@ -0,0 +1,194 @@
+<template>
+	<view class="bg">
+		<view class="topImg relative">
+			<img v-if="headImg" :src="showImg(headImg)" class="topImg" mode="aspectFill">
+		</view>
+		
+		
+		<view class="goodBox">
+			<view @click="viewDetail(item)" class="goodItem" v-for="(item,index) in list" :key="index">
+				<image class="left-image" :src="showImg(item.headimg||'')" mode="aspectFill"></image>
+				<view class="contentBox flex-column flex-1 w-1rpx">
+					<view class="title text-overflowRows">{{item.title}}</view>
+					<view class="subtitle flex">
+						<view class="text-overflow">{{item.address}}</view>
+					</view>
+					<view class="priceBox">
+						<view class="price price-money">
+							{{item.price/100}}
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- <view class="finished-text" v-if="finished">没有更多数据了</view> -->
+	</view>
+</template>
+
+<script>
+	export default{
+		data(){
+			return {
+				headImg:null,
+				
+				systemInfo: {
+					height:"0px",
+					textHeight:"0px",
+					textTop:"0px",
+					contentTop: '0px',
+				},
+				
+				list: [],
+				finished: false,
+				
+
+				type_id: 4,//景点分类id
+			}
+		},
+		onShow() {
+			this.finished = false
+			// this.getHeadImg('piaowu')
+		},
+		onReady() {
+			this.getHeadImg(2366).then(res => {this.headImg = res})
+			this.getList()
+		},
+		onLoad(options) {
+			// let that = this
+			// uni.getSystemInfo({
+			//   success(res) {
+			//     console.log(res)
+			//     that.systemInfo.height =res.windowHeight+'px'
+			// 	const menu=uni.getMenuButtonBoundingClientRect()
+			// 	that.systemInfo.textHeight=menu.height+"px"
+			// 	that.systemInfo.textTop=menu.top+"px"
+			// 	that.systemInfo.contentTop = (menu.height + menu.top)+"px"
+			//     console.log(that.systemInfo)
+			//   }
+			// })
+		},
+		  
+		methods: {
+			
+			// 根据景点标签获取景点列表
+			getList(){
+				this.Post({tag_id: this.type_id,offset: this.list.length,limit: 10},
+				'/api/scene/get_scene_by_tag').then(res => {
+					this.list = [...this.list, ...res.data.list];
+					if (res.data.length < 10) {
+						this.finished = true
+					}
+				})
+			},
+			
+			viewDetail (item) {
+				this.goOtherDetail(item)
+				if(!item.link_type) {
+					uni.navigateTo({
+						url:'/subPackages/ticketBooking/detail?id='+item.id
+					})
+				}
+			},
+		},
+		onReachBottom() {
+			setTimeout(() => {
+				if (!this.finished) this.getList()
+			},1000)
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	*{
+		box-sizing: border-box;
+		font-family: PingFangSC;
+	}
+	.bg{
+		min-height: 100vh;
+		background: #FFFFFF;
+	}
+	.topImg{
+		width: 100%;
+		height: 440rpx;
+		.icon-back{
+			position: fixed;
+			display: flex;
+			align-items: center;
+			z-index: 50;
+			background: rgba(0,0,0,0.5);
+			border-radius: 50%;
+			width: 60rpx;
+			height: 60rpx;
+			padding-left: 5rpx;
+		}
+	}
+	
+	
+	.goodBox{
+		width: 100%;
+		z-index: 2;
+		padding: 26rpx;
+		
+		.goodItem{
+			width: 100%;
+			height: 226rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(153,153,153,0.38);
+			margin-bottom: 26rpx;
+			display: flex;
+			border-radius: 13rpx;
+			.left-image{
+				width: 280rpx;
+				height: 226rpx;
+				border-radius: 13rpx;
+				flex-shrink: 0;
+			}
+			
+			.contentBox{
+				padding: 20rpx;
+				justify-content: space-between;
+				
+				.title{
+					width: 100%;
+					font-weight: bold;
+					font-size: 31rpx;
+					color: #000000;
+				}
+				
+				.subtitle{
+					font-weight: 500;
+					font-size: 27rpx;
+					color: #666666;
+					align-items: center;
+					
+					.address-icon{
+						width: 21rpx;
+						height: 25rpx;
+						margin-right: 9rpx;
+					}
+				}
+				
+				.priceBox{
+					.price{
+						font-family: PingFang SC;
+						font-weight: bold;
+						font-size: 33rpx;
+						color: #C3282E;
+						text-align: right;
+					}
+					.price-money::before{
+						content: '￥';
+						color: #C3282E;
+						font-size: 24rpx;
+					}
+					.price-money::after{
+						content: '起';
+						color: #999;
+						font-size: 24rpx;
+						font-weight: normal;
+					}
+				}
+			}
+		}
+	}
+</style>