point-app/pagesHome/order/components/dialog_1.vue

<template>
	<view class="dialog">
		<view v-if="dialog.show==true" @tap="dialogClose">
			<view class="dialog_1" v-if="dialog.type=='1'">
				<swiper class="swiper" circular @change="diaSpecs" :current="is_specs">
					<swiper-item class="list" v-for="(item,index) in specsList" :key="index">
						<view class="list_1">
							<image class="image"
								:src="item.file&&item.file.length>0?item.file[0].url:info.goods.file[0].url"
								mode="aspectFit"></image>
						</view>
						<view class="name">
							<text>{{item.name}}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dialog: {
				type: Object,
			},
			info: {
				type: Object
			},
			is_specs: {
				type: Number
			},
		},
		data() {
			return {
				specsList: [],
			};
		},
		methods: {
			dialogClose() {
				const that = this;
				that.$emit('dialogClose')
			},
			diaSpecs() {
				const that = this;
				that.$emit('diaSpecs')
			},
		},
		watch: {
			info: {
				deep: true,
				immediate: true,
				handler(val) {
					if (val && val.specs && val.specs.length > 0) this.$set(this, `specsList`, val?.specs)
				}
			}
		},
	}
</script>

<style lang="scss">
	.dialog {

		swiper {
			height: 60vh;
		}

		.list {
			.list_1 {
				padding: 2vw;
				margin: 0 0 5vw 0;

				.image {
					width: 100%;
					height: 40vh;
				}
			}

			.name {
				text-align: center;
				margin: 0 10vw;
				background-color: #6666669f;
				border-radius: 25px;
				padding: 2vw;

				text {
					color: #fff;
					font-size: 15px;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					word-break: break-all;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}

		}
	}
</style>