|
@@ -0,0 +1,82 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="title">
|
|
|
+ <view class="title_text">鲍鱼展览</view>
|
|
|
+ </view>
|
|
|
+ <view class="swiperstyle">
|
|
|
+ <u-swiper style="width:702rpx" :effect3d="true" height="351rpx" :list="swiperlist" indicatorMode="line"
|
|
|
+ circular indicator keyName="url" @click="clicktabs"></u-swiper>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <viewer :images="swiperlist" v-if="isPreviewVisible" @close="isPreviewVisible = false"></viewer>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ carouselList
|
|
|
+ } from '@/http/api/common.js'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ swiperlist: [],
|
|
|
+ isPreviewVisible: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ this.getCarouselList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getCarouselList() {
|
|
|
+ //获取轮播图
|
|
|
+ let res = await carouselList({
|
|
|
+ modules: '3'
|
|
|
+ })
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ let data = res.data.data.rows
|
|
|
+ this.swiperlist = data.map(v => {
|
|
|
+ return {
|
|
|
+ ...v,
|
|
|
+ url: v.carouselUrlList[0].fileUrl
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ clicktabs(item) {
|
|
|
+ console.log(this.swiperlist[item].url)
|
|
|
+ uni.previewImage({
|
|
|
+ loop: true,
|
|
|
+ urls: [this.swiperlist[item].url]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ width: 90vw;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title_text {
|
|
|
+ width: 128rpx;
|
|
|
+ height: 45rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 45rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiperstyle {
|
|
|
+ width: 702rpx;
|
|
|
+ height: 351rpx;
|
|
|
+ box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+</style>
|