zhihuixiaoyuan2-ui/work/components/popup/popup.vue

<template>
	<view>
		<!-- 弹窗 -->
		<view class="bgbox" @click="getClose" v-if="type"></view>
		<!-- 预览图 -->
		<view v-if="type==1" class="prebox">
			<image :src="bgaimg" class="prebga"></image>
			<image :src="bgimg" class="prebg"></image>
			<image :src="ibga" class="ibga"></image>
			<image :src="ibgb" class="ibgb"></image>
			<image :src="ibgc" class="ibgc"></image>
			<image :src="ibgd" class="ibgd"></image>
			<image :src="ibge" class="ibge"></image>
			<view class="prelists">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" @change="getChange" :current="current" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(ite,idx) in swiperimg" :key='idx'>
						<image :src="baseUrl+ite" class="swimg" @click="getPreview(swiperimg,idx)"></image>
					</swiper-item>
				</swiper>
				<image :src="lbtn" class="btn btn1" @click="getPre"></image>
				<image :src="rbtn" class="btn btn2" @click="getNext"></image>
			</view>
			
			<image :src="closeimg" class="cloimg" @click="getClose"></image>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	export default{
		props:{
			type: {
				type: Number,
				default () {
					return 0
				}
			},
			imgobj:{
				type:Object,
				default () {
					return {}
				}
			}
		},
		watch:{
			type(val){
				if(val==1){
					this.swiperimg=this.imgobj.urls;
					this.current=this.imgobj.idx;
				}
			}
		},
		data(){
			return{
				// type:0,
				bgimg:require("@/work/static/order/bg.png"),
				bgaimg:require("@/work/static/order/bga.png"),
				ibga:require("@/work/static/order/ibga.png"),
				ibgb:require("@/work/static/order/ibgb.png"),
				ibgc:require("@/work/static/order/ibgc.png"),
				ibgd:require("@/work/static/order/ibgd.png"),
				ibge:require("@/work/static/order/ibge.png"),
				closeimg:require("@/static/images/close.png"),
				lbtn:require("@/work/static/order/lbtn.png"),
				rbtn:require("@/work/static/order/rbtn.png"),
				autoplay:false,
				indicatorDots:false,
				interval:5000,
				duration:500,
				swiperimg:[],
				current:0,
				baseUrl:''
			}
		},
		mounted() {
			this.baseUrl = baseUrl
		},
		methods:{
			getClose(){
				this.$emit("getClose")
			},
			getChange(e){
				var val=e.detail.current;
				this.current=val;
			},
			getPre(){
				let curidx = this.current;
				let ncurrent = curidx > 0 ? curidx - 1 : this.swiperimg.length - 1;
				this.current = ncurrent
			},
			getNext(){
				let curidx = this.current;
				let ncurrent = curidx < (this.swiperimg.length - 1) ? curidx + 1 : 0;
				this.current = ncurrent
			},
			getPreview(url,idx) {
				var newArr=[];
				url.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {
						
					},
					fail: function(err) {
						
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 公共
		.pbtn{text-align: center;font-size: 30rpx;font-weight: 500;flex:0 0 auto;
			&.btn1{background: #1f57e6;color: #ffffff;height: 70rpx;border-radius: 35rpx;line-height: 70rpx;width: 100%;}
			&.btn2{color: #aaa;margin-top: 14rpx;padding:10rpx;}
		}
.cloimg{width: 56rpx;height: 56rpx;position: absolute;bottom: -80rpx;left: 50%;margin-left: -28rpx;}
// 图片预览
.prebox{position: fixed;width: 580rpx;height: 400rpx;left: 88rpx;right: 78rpx;top: 50%;margin-top: -280rpx;z-index: 10;box-sizing: border-box;
	.prebga{width: 100%;height: 100%;}
	.prebg{position: absolute;left: -3rpx;right: -3rpx;top: -4rpx;bottom: -4rpx;max-width: none;width: 586rpx;height: 408rpx;}
	.ibga{width: 96rpx;height: 116rpx;position: absolute;top: -80rpx;left: 268rpx;z-index: 1;}
	.ibgb{width: 76rpx;height: 74rpx;position: absolute;top: -14rpx;right: -22rpx;z-index: 1;}
	.ibgc{width: 76rpx;height: 78rpx;position: absolute;bottom: -2rpx;right: -32rpx;z-index: 1;}
	.ibgd{width: 84rpx;height: 76rpx;position: absolute;bottom: -18rpx;left: -28rpx;z-index: 1;}
	.ibge{width: 56rpx;height: 30rpx;position: absolute;top: 68rpx;left: -36rpx;z-index: 1;}
	.btn{
		width: 40rpx;height: 40rpx;position: absolute;top: 50%;margin-top: -20rpx;z-index: 1;
		&.btn1{left: 14rpx;}
		&.btn2{right: 14rpx;}
	}
	.prelists{position: absolute;top: 18rpx;right: 16rpx;bottom: 14rpx;left: 26rpx;box-sizing: border-box;border-radius: 12rpx;overflow: hidden;
		.swiper{width: 100%;height: 100%;
			.swimg{width: 100%;height: 100%;}
		}
	}
} 
// 293 204 290 200

</style>