1.0yangche/pages/packageOne/service/classify/photo/photo.vue

<template>
	<view class="photo_list">
		<view class="title">全部<view class="red">({{photoList.length}})</view></view>
		<view class="photo">
		    <view v-for="(item,index) in photoList" :key="index" class="photo_item" :data-index="index">
		        <image mode="aspectFill" :src="item.imgPath" :data-src="item.imgPath" @tap="openImage"></image>
		    </view>
		</view>	
	</view>
</template>

<script>
	let app = getApp();
	import api from "../../../../../api.js"
	export default {
		data() {
			return {
				url:app.globalData.url,
				photoList:[],
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			//加载数据
			getData(){
				let data = {
					id:1757
				}
				api.getShopPhoto(data).then((res)=>{
					console.log(res);
					let data = res.data.data;
					let url = this.url;
					for(let i = 0;i<data.length;i++){
					    data[i].imgPath = url + data[i].imgPath
					}
					this.photoList = data
				})
			},
			//预览图片
			openImage(e){
				let current = e.target.dataset.src;
				let photoList = this.photoList;
				let imgUrl = [];
				for(let i = 0;i<photoList.length;i++){
				  imgUrl.push(photoList[i].imgPath)
				}
				wx.previewImage({
				  current:current,
				  urls: imgUrl,
				})
			}
		}
	}
</script>

<style>
	page{
	  width:100%;
	  height:100%;
	}
	.photo_list{
	  width:100%;
	  overflow: hidden;
	  padding:0 30rpx;
	  box-sizing: border-box;
	  border-top:1px solid #f2f2f2;
	}
	.title{
	  font-size: 30rpx;
	  color:#222222;
	  margin-top:18rpx;
	}
	.red{
	  font-size: 30rpx;
	  color:#E11521;
	  display: inline-block;
	  margin-left: 20rpx;
	}
	.photo{
	  width:100%;
	  margin-top:20rpx;
	  overflow: hidden;
	}
	.photo_item{
	  width:calc(50% - 6rpx);
	  height:198rpx;
	  margin:0 6rpx 10rpx 0;
	  float:left;
	  position: relative;
	  overflow: hidden;
	}
	.photo_item:nth-child(2n){
	  margin-right: 0;
	  margin-left: 6rpx
	}
	.photo_item image{
	  display: block;
	  width:100%;
	  height:100%;
	  position: absolute;
	  top:50%;
	  left: 50%;
	  transform: translate(-50%,-50%);
	}
</style>