上传

App.vue

@@ -15,6 +15,7 @@
 	body{
 		background-color: $uni-bg-color;
 		font-size: 30rpx;
+		color: #333;
 	}
 	.page{
 		padding-top: var(--window-top);

components/base/tabbar.vue

@@ -18,13 +18,9 @@
 </template>
 
 <script>
-	import { mapGetters } from 'vuex'
 	export default {
 		name:"tabbar",
 		props : ['select'],
-		computed : {
-			...mapGetters(['userShop']),
-		},
 		data() {
 			return {
 				list : [

components/tourGuide/locations.vue

@@ -0,0 +1,166 @@
+<template>
+	<view class="Locations">
+		
+		<view class="Locations-list">
+			<view class="main">
+				<image 
+				class="main-image"
+				src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" 
+				mode="aspectFill"></image>
+				
+				<view class="info">
+					<view class="title">
+						陶阳里景区
+					</view>
+					<view class="tips">
+						6个遗产点
+					</view>
+					<view class="btn">
+						<image src="/static/image/tourGuide/a.png" 
+						mode=""></image>
+						<text class="">
+							语音讲解
+						</text>
+					</view>
+				</view>
+				
+				<view class="controls">
+					<view class="f">
+						<image src="/static/image/tourGuide/f.png" mode=""></image>
+					</view>
+					<view class="btn"
+					@click="show = !show">
+						<text class="">
+							{{ show ? '收起' : '展开' }}
+						</text>
+						<uv-icon
+						:name="show ? 'arrow-up' : 'arrow-down'"
+						size="30rpx"></uv-icon>
+					</view>
+				</view>
+			</view>
+			<view class="list"
+			v-if="show">
+				<view class="main"
+				v-for="(item, index) in 10"
+				:key="index">
+					<image 
+					class="main-image"
+					src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" 
+					mode="aspectFill"></image>
+					
+					<view class="info">
+						<view class="title">
+							陶阳里景区
+						</view>
+						<view class="tips">
+							6个遗产点
+						</view>
+					</view>
+					
+					<view class="controls">
+						<view class="f">
+							<image src="/static/image/tourGuide/f.png" mode=""></image>
+						</view>
+						<view class="f">
+							<image src="/static/image/tourGuide/a.png" mode=""></image>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show : true,
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+.Locations{
+	.Locations-list{
+		.main{
+			display: flex;
+			margin: 20rpx;
+			.main-image{
+				width: 150rpx;
+				height: 150rpx;
+				border-radius: 20rpx;
+			}
+			.info{
+				margin-left: 20rpx;
+				.title{
+					font-size: 30rpx;
+					font-weight: 900;
+				}
+				.tips{
+					font-size: 24rpx;
+					color: #999999;
+					margin-top: 10rpx;
+				}
+			}
+			.controls{
+				margin-left: auto;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				.f{
+					image{
+						width: 50rpx;
+						height: 50rpx;
+					}
+				}
+			}
+			.btn{
+				padding: 10rpx;
+				font-size: 22rpx;
+				color: $uni-color;
+				border: 1rpx solid $uni-color;
+				background-color: #F4E4C4;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				margin-top: 10rpx;
+				border-radius: 15rpx;
+				image{
+					width: 25rpx;
+					height: 25rpx;
+				}
+				text{
+					margin: 0 10rpx;
+				}
+			}
+		}
+		.list{
+			padding-left: 40rpx;
+			.main{
+				align-items: center;
+				.main-image{
+					width: 140rpx;
+					height: 140rpx;
+				}
+				.controls{
+					flex-direction: row;
+					.f{
+						margin: 30rpx;
+						image{
+							width: 40rpx;
+							height: 40rpx;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>

pages/index/center.vue

@@ -5,7 +5,7 @@
 
 		<view class="head">
 			<view class="headImage">
-				<image src="" mode=""></image>
+				<image src="" mode="aspectFill"></image>
 			</view>
 			<view class="info">
 				<view class="name">

pages/index/index.vue

@@ -14,6 +14,7 @@
 					<uv-search 
 					placeholder="请输入搜索服务" 
 					:showAction="false"
+					search-icon-size="40rpx"
 					v-model="keyword"></uv-search>
 				</view>
 				<view class="title">
@@ -30,11 +31,49 @@
 					v-for="(item,index) in baseList"
 					@click="$utils.navigateTo(item.path)"
 					:key="index">
-						<image class="grid-icon" :src="item.icon" mode=""></image>
+						<image class="grid-icon" :src="item.icon" mode="aspectFill"></image>
 						<text class="grid-text">{{item.title}}</text>
 					</uv-grid-item>
 				</uv-grid>
 			</view>
+			
+			<view class="video-title">
+				视频中的景徳镇
+			</view>
+			<view class="videoList">
+				<view class="video-item"
+				v-for="(item, index) in 10"
+				:key="index">
+					<view class="image">
+						<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill"></image>
+						<view class="icon">
+							<uv-icon
+							size="35rpx"
+							name="play-right-fill">
+							</uv-icon>
+						</view>
+					</view>
+					<view class="bottom">
+						<view class="headImage">
+							<image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill"></image>
+							爱旅行的小张
+						</view>
+						<view class="like">
+							<uv-icon 
+							size="45rpx" 
+							v-if="false"
+							name="heart"></uv-icon>
+							<uv-icon
+							size="45rpx" 
+							color="#FF4340"
+							v-else
+							name="heart-fill"></uv-icon>
+							300
+						</view>
+					</view>
+				</view>
+			</view>
+			
 		</view>
 		
 		
@@ -180,6 +219,69 @@
 					font-weight: 900;
 				}
 			}
+			
+			.video-title{
+				padding: 20rpx 30rpx;
+				background-color: $uni-color;
+				color: #fff;
+				font-weight: 900;
+				font-size: 24rpx;
+				margin: 10rpx 20rpx;
+				margin-top: 30rpx;
+				width: fit-content;
+				border-radius: 20rpx;
+			}
+			.videoList{
+				display: flex;
+				flex-wrap: wrap;
+				.video-item{
+					margin: 20rpx;
+					width: 335rpx;
+					.image{
+						position: relative;
+						width: 100%;
+						height: 460rpx;
+						border-radius: 30rpx;
+						overflow: hidden;
+						image{
+							width: 100%;
+							height: 100%;
+						}
+						.icon{
+							position: absolute;
+							right: 30rpx;
+							top: 30rpx;
+							width: 60rpx;
+							height: 60rpx;
+							background-color: #ffffffaa;
+							border-radius: 50%;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+						}
+					}
+					.bottom{
+						padding: 10rpx 0;
+						font-size: 22rpx;
+						display: flex;
+						justify-content: space-between;
+						.headImage{
+							display: flex;
+							align-items: center;
+							image{
+								width: 50rpx;
+								height: 50rpx;
+								border-radius: 50%;
+								margin-right: 6rpx;
+							}
+						}
+						.like{
+							display: flex;
+							align-items: center;
+						}
+					}
+				}
+			}
 		}
 	}
 </style>

pages/index/tourGuide.vue

@@ -1,25 +1,136 @@
 <template>
 	<view class="page">
+		<map 
+		style="width: 100%;" 
+		:layer-style='5' 
+		:style="{height:mapheight}" 
+		:show-location='true'
+		:latitude="latitude" 
+		:longitude="longitude" 
+		:markers="markers" 
+		:scale="scale" 
+		@markertap="markertap"
+		@callouttap='callouttap'>
+		</map>
 		
-		<tabber select="1" />
+		<view class="content">
+			<locations/>
+		</view>
+		
+		<tabber select="1"/>
 	</view>
 </template>
 
 <script>
+	import position from '@/utils/position.js'
+	import locations from '@/components/tourGuide/locations.vue'
 	export default {
 		components : {
+			locations,
 		},
 		data() {
 			return {
+				latitude: 23.106574, //纬度
+				longitude: 113.324587, //经度
+				scale: 12, //缩放级别
+				bottomData: false,
+				mapCtx: null,
+				markers:[
+					// { //标记点A 的信息
+					// 	iconPath: "/static/logo.png",  //图标
+					// 	id: 0,
+					// 	width: 20, //图标icon 宽度
+					// 	height: 28 ,//图标icon 高度
+					// 	latitude: 26.1272,
+					// 	longitude: 113.11659
+					// }
+				],
 				
 			}
 		},
+		onLoad() {
+			position.getLocation(res => {
+				console.log(res);
+				this.latitude = res.latitude
+				this.longitude = res.longitude
+				this.random()
+			})
+		},
+		computed: {
+			mapheight() {
+				let data = ''
+				if (this.bottomData) {
+					if (this.upTop) {
+						data = '50px'
+					} else {
+						data = '200px'
+					}
+				} else {
+					data = '50vh'
+				}
+				return data
+			},
+			coverbottom() {
+				let data = ''
+				if (this.bottomData) {
+					data = '20rpx'
+				} else {
+					data = '100rpx'
+				}
+				return data
+			}
+		},
+		onShow() {
+			// this.mapCtx = wx.createMapContext('map');
+			// this.mapCtx && this.mapCtx.addCustomLayer({
+			// 	layerId: '66c5a2ad2849',
+			// 	success: (res) => {
+			// 		console.log('success', res);
+			// 	},
+			// 	fail: (e) => {
+			// 		console.log('fail', e);
+			// 	},
+			// });
+		},
 		methods: {
-			
+			//地图点击事件
+			markertap(e) {
+				console.log("===你点击了标记点===", e)
+				uni.getLocation({
+					success: res => {
+					uni.openLocation({
+						latitude: this.latitude + 0.01,
+						longitude: this.longitude + 0.01
+					})
+					}
+				})
+			},
+			//地图点击事件
+			callouttap(e) {
+				console.log('地图点击事件', e)
+			},
+			random(){
+				let list = []
+				for(let i = 0;i < 10;i++){
+					let a = uni.$uv.random(1, 4)
+					let obj = {
+						latitude: this.latitude + uni.$uv.random(1, 30) / 1000 * (uni.$uv.random(1, 3) - 2),
+						longitude: this.longitude + uni.$uv.random(1, 30) / 1000 * (uni.$uv.random(1, 3) - 2),
+						width: 30, //图标icon 宽度
+						height: 40 ,//图标icon 高度
+						iconPath: `/static/image/tourGuide/${a}.png`,  //图标
+						id: i,
+					}
+					list.push(obj)
+				}
+				this.markers = list
+			},
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-
+.page{
+	padding-bottom: 200rpx;
+}
 </style>

components/user/productList.vue → pages_order/components/product/productList.vue

@@ -6,7 +6,7 @@
 		:key="index">
 			<image 
 			class="image"
-			src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode=""></image>
+			src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode="aspectFill"></image>
 			<view class="info">
 				<view class="title">
 					桌布租赁

pages_order/product/productDetail.vue

@@ -85,7 +85,7 @@
 				productDetail : {
 					image : 'https://cdn.uviewui.com/uview/swiper/swiper3.png,https://cdn.uviewui.com/uview/swiper/swiper2.png',
 					content : '',
-				}
+				},
 			}
 		},
 		onLoad(args) {