welcomeNew/pages/map/map.vue

<template>
  <!-- 地图导览页面 -->
  <view class="container">
    <view class="item-image">
		<view class="item-kuang">
			<image class="inner-image" src="../../static/images/bigger.png" @click="clickImg"></image>
		</view>
	</view>
	<!-- 地点 -->
	<!-- <view>
		<view class="item-list">
		  <view class="item-list-one">
			<image class="img-btn"></image><text class="txt-btn">1</text>
			<text class="list-txt">行政楼</text>
		  </view>
		  <view class="item-list-one">
			<image class="img-btn"></image><text class="txt-btn">2</text>
			<text class="list-txt">科技楼</text>
		  </view>
		  <view class="item-list-one">
			<image class="img-btn"></image><text class="txt-btn">3</text>
			<text class="list-txt">大学生活动中心</text>
		  </view>
		</view>
		<view class="item-list-two">
		  <view class="item-list-two2">
			<image class="img-btn-two"></image><text class="txt-btn-two">4</text>
			<text class="list-txt-two">食堂</text>
		  </view>
		  <view class="item-list-two2">
			<image class="img-btn-two"></image><text class="txt-btn-two">5</text>
			<text class="list-txt-two">系办大楼</text>
		  </view>
		  <view class="item-list-two2">
			<image class="img-btn-two"></image><text class="txt-btn-two">6</text>
			<text class="list-txt-two">学生公寓</text>
		  </view>
		</view>
		<view class="item-list-three">
		  <view class="item-list-three3">
			<image class="img-btn-three"></image><text class="txt-btn-three">7</text>
			<text class="list-txt-three">1号教学楼</text>
		  </view>
		  <view class="item-list-three3">
			<image class="img-btn-three"></image><text class="txt-btn-three">8</text>
			<text class="list-txt-three">2号教学楼</text>
		  </view>
		  <view class="item-list-three3">
			<image class="img-btn-three"></image><text class="txt-btn-three">9</text>
			<text class="list-txt-three">图文信息中心</text>
		  </view>
		</view>
	</view> -->
	<view class="item-title">
	  <view class="item-title-line"></view>
	  <view class="item-title-font">报到路线</view>
	</view>
	<!-- 路线 -->
	<view class="position-list">
	  <view class="position-list-one" v-for="(item,index) in position"
            :key="index">
		<image class="img-position"></image><text class="txt-position">{{index+1}}</text>
		<text class="position-txt">{{item.place}}</text>
		<image v-if="index<2" src="../../static/images/jiantou.png" class="position-jian"></image>
	  </view>
	</view>
	<!-- 详细介绍 -->
	<view class="item-mark">
		<view class="mark-list" v-for="(item,index) in mark" :key="index">{{item.list}}</view>
	</view>
	<!-- 报到流程表 -->
	<view class="item-title">
	  <view class="item-title-line"></view>
	  <view class="item-title-font">报到流程表</view>
	</view>
	<!-- 流程图 -->
	<swiper class="swiper" circular :indicator-dots="indicatorDots">
		<swiper-item v-for="(item, index) in img" :key="index">
			<view class="swiper-item">
				<image @click="clickImg2(item)" :src="item.srcUrl" class="swiper-img"></image>
			</view>
		</swiper-item>
	</swiper>

  </view>
</template>

<script>
// 导入图片
import room1 from '../../static/images/liuchengtu1.jpg'
import room2 from '../../static/images/liuchengtu2.jpg'
import room3 from '../../static/images/liuchengtu3.jpg'
export default {
  data() {
    return {
		position:[
			{id:1,place:"行政楼"},
			{id:2,place:"学生公寓"},
			{id:3,place:"自由活动"},
		],
		mark:[
			{list:"①第一步：主校门进门，到行政楼大厅交验通知书，缴费，领取收款收据，分配宿舍；"},
			{list:"②第二步：到宿舍区，领取钥匙，以及生活用品，入住宿舍；"},
			{list:"③第三步：自由活动、食堂就餐或参观校园；"},
		],
		indicatorDots: true,//滚动图片提示条默认出现
		img:[
			{
				value: '1',
				srcUrl:room1,
				name: '图1'
			},
			{
				value: '2',
				srcUrl:room2,
				name: '图2'
			},
			{
				value: '3',
				srcUrl:room3,
				name: '图3'
			},
		],
    };
  },
  created() {
  },

  methods: {
	  //点击放大图片
	  clickImg() {
			wx.previewImage({
				urls: ["../../static/images/map_head.png"], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {},
			})
		},
		//点击放大图片
		clickImg2(item) {
			// console.log(item.srcUrl)
			wx.previewImage({
				urls: [item.srcUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				current: '', // 当前显示图片的http链接，默认是第一个
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {},
			})
		},
	
  },
};
</script>

<style lang="scss" scoped>
@import url("./css/index.css");
</style>