|
@ -2,22 +2,26 @@ |
|
|
<view class="bg"> |
|
|
<view class="bg"> |
|
|
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix"></image> |
|
|
<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix"></image> |
|
|
|
|
|
|
|
|
<image class="what-img" @click="openPop()" mode="aspectFill" src="https://static.ticket.sz-trip.com/uploads/20250915/798f91cfde30414c091603666be573b7.png"></image> |
|
|
<image class="what-img" @click="openPop()" mode="aspectFill" src="https://static.ticket.sz-trip.com/uploads/20250916/d5e91bdb2114c3e485349d8edae18173.png"></image> |
|
|
|
|
|
|
|
|
<view class="main-container" style="margin-top: -2400rpx;position: relative;" > |
|
|
<view class="main-container" style="margin-top: -2400rpx;position: relative;" > |
|
|
|
|
|
|
|
|
<view class="type-container no-scrollbar"> |
|
|
<view class="type-container no-scrollbar" style="padding: 0 20rpx;"> |
|
|
<view :class="['type-item']" @click="typeIndex=i" |
|
|
<view :class="['type-item']" @click="changeTypeIndex(i)" |
|
|
v-for="(item,i) in typeList" :key="i"> |
|
|
v-for="(item,i) in typeList" :key="i"> |
|
|
<image v-show="typeIndex==i" mode="aspectFill" :src="item.imgs"></image> |
|
|
<image v-show="typeIndex==i" mode="aspectFill" :src="item.imgs"></image> |
|
|
<image v-show="typeIndex!=i" mode="aspectFill" :src="item.img"></image> |
|
|
<image v-show="typeIndex!=i" mode="aspectFill" :src="item.img"></image> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
<uni-transition :mode-class="['slide-left','fade']" :show="show"> |
|
|
<view class="type-container"> |
|
|
<view class="type-container"> |
|
|
<image :src="typeList[typeIndex].textImg" mode="widthFix" style="width: 100%;margin: 14rpx 0 30rpx;"></image> |
|
|
<image :src="typeList[typeIndex].textImg" mode="widthFix" style="width: 100%;margin: 25rpx 0 30rpx;"></image> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
</uni-transition> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<view class="flex-between" style="flex-wrap: wrap;padding: 0 26rpx;"> |
|
|
|
|
|
|
|
|
<view class="flex-between" style="flex-wrap: wrap;padding: 0 26rpx;box-sizing: border-box;"> |
|
|
<view class="column-product" @click="gotoDetailByType(item)" :key="index" |
|
|
<view class="column-product" @click="gotoDetailByType(item)" :key="index" |
|
|
v-for="(item,index) in typeList[typeIndex].list.slice(0,typeList[typeIndex].viewNum)"> |
|
|
v-for="(item,index) in typeList[typeIndex].list.slice(0,typeList[typeIndex].viewNum)"> |
|
|
<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image> |
|
|
<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image> |
|
@ -42,7 +46,7 @@ |
|
|
<view class="view-more" v-if="typeList[typeIndex].list.length>0&&typeList[typeIndex].viewNum<=6" @click="typeList[typeIndex].viewNum=999"> |
|
|
<view class="view-more" v-if="typeList[typeIndex].list.length>0&&typeList[typeIndex].viewNum<=6" @click="typeList[typeIndex].viewNum=999"> |
|
|
查看更多<image src="https://static.ticket.sz-trip.com/uploads/20250909/848e3a18b3ad3227fa4b2952890b91ef.png"></image> |
|
|
查看更多<image src="https://static.ticket.sz-trip.com/uploads/20250909/848e3a18b3ad3227fa4b2952890b91ef.png"></image> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20250909/55c100f9650df6cbd4a4e5a18c8201de.png"></image> |
|
|
<image class="bottom-img" src="https://static.ticket.sz-trip.com/uploads/20250909/55c100f9650df6cbd4a4e5a18c8201de.png"></image> |
|
|
<image @click="returnTop" v-show="showGoTop" class="back-img" src="https://static.ticket.sz-trip.com/uploads/20250915/74031edf3be17888e522df104e790540.png"></image> |
|
|
<image @click="returnTop" v-show="showGoTop" class="back-img" src="https://static.ticket.sz-trip.com/uploads/20250915/74031edf3be17888e522df104e790540.png"></image> |
|
|
|
|
|
|
|
@ -72,30 +76,32 @@ |
|
|
typeList: [ |
|
|
typeList: [ |
|
|
{ |
|
|
{ |
|
|
id: 104,title: "绿色食品",viewNum:6, list: [], |
|
|
id: 104,title: "绿色食品",viewNum:6, list: [], |
|
|
img:"https://static.ticket.sz-trip.com/uploads/20250915/d0f14bd53f532c48a2d5bd22bca1158f.png", |
|
|
img:"https://static.ticket.sz-trip.com/uploads/20250916/70b50a9d3f0b70454763e7146ac0a4d1.png", |
|
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250915/d0f14bd53f532c48a2d5bd22bca1158f.png", |
|
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250916/3b251683c250cf6669378266ed786de4.png", |
|
|
textImg: "https://static.ticket.sz-trip.com/uploads/20250915/cd9a01bfa17006675d0294847f20caa8.png", |
|
|
textImg: "https://static.ticket.sz-trip.com/uploads/20250916/e03b1f9e7a9880d2c7f67ee6b4a58643.png", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
id: 105,title: "有机农产品",viewNum:6, list: [], |
|
|
id: 105,title: "有机农产品",viewNum:6, list: [], |
|
|
img:"https://static.ticket.sz-trip.com/uploads/20250915/cd09a87a9c154f07b7f470aa1e62049c.png", |
|
|
img:"https://static.ticket.sz-trip.com/uploads/20250916/600b3f0ca1b6582da3dc128f98cc1ea9.png", |
|
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250915/1eb123c06d0f0bd860e107cf4adf57a8.png", |
|
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250916/9692497b22091c3e3d3d69bf9c4fd311.png", |
|
|
textImg:"https://static.ticket.sz-trip.com/uploads/20250915/6f8105990a5d701d5b384ce22c05d28e.png", |
|
|
textImg:"https://static.ticket.sz-trip.com/uploads/20250916/51606f5e0a94c364a8237777e5398aaa.png", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
id: 106,title: "名特优新",viewNum:6, list: [], |
|
|
id: 106,title: "名特优新",viewNum:6, list: [], |
|
|
img:"https://static.ticket.sz-trip.com/uploads/20250915/2148b40317d93d6ed2a710ff3488f3b7.png", |
|
|
img:"https://static.ticket.sz-trip.com/uploads/20250916/9810f9261e137b354132063fced2d43c.png", |
|
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250915/c5140db3128bb15f4e34b68ddf31b644.png", |
|
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250916/2b3cfb94571cd911af3cca2b4027438c.png", |
|
|
textImg:"https://static.ticket.sz-trip.com/uploads/20250915/bfa055d9cacd07e839c3219e0c198459.png", |
|
|
textImg:"https://static.ticket.sz-trip.com/uploads/20250916/d99a160fb1caa3eb56697344fc08df46.png", |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
id: 107,title: "农产品地理标志",viewNum:6, list: [], |
|
|
id: 107,title: "农产品地理标志",viewNum:6, list: [], |
|
|
img:"https://static.ticket.sz-trip.com/uploads/20250915/cb572317ca0cdeba972d430c7fea2b5d.png", |
|
|
img:"https://static.ticket.sz-trip.com/uploads/20250916/6c8216888e1224e9534309bde2a87a14.png", |
|
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250915/8fbde0a77dca289c96100581b550c511.png", |
|
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250916/37d84af1f692cce86158ff0784fefb73.png", |
|
|
textImg:"https://static.ticket.sz-trip.com/uploads/20250915/697ecdc92a344884ddbb6982ca453031.png", |
|
|
textImg:"https://static.ticket.sz-trip.com/uploads/20250916/898fda5fdc950817faa0bfd318f1fa95.png", |
|
|
}, |
|
|
}, |
|
|
], |
|
|
], |
|
|
showGoTop: false, |
|
|
showGoTop: false, |
|
|
|
|
|
|
|
|
|
|
|
show: true, |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
onLoad(option) { |
|
|
onLoad(option) { |
|
@ -106,6 +112,16 @@ |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
|
|
|
changeTypeIndex (i) { |
|
|
|
|
|
if (this.typeIndex==i) { |
|
|
|
|
|
return |
|
|
|
|
|
} |
|
|
|
|
|
this.show = false |
|
|
|
|
|
setTimeout(()=>{ |
|
|
|
|
|
this.typeIndex = i; |
|
|
|
|
|
this.show = true; |
|
|
|
|
|
},300) |
|
|
|
|
|
}, |
|
|
getHeadImg (id) { |
|
|
getHeadImg (id) { |
|
|
this.Post({id},'/api/multimedia/detail').then(res => { |
|
|
this.Post({id},'/api/multimedia/detail').then(res => { |
|
|
this.headImg = res.data.head_img |
|
|
this.headImg = res.data.head_img |
|
@ -237,14 +253,13 @@ |
|
|
.type-container{ |
|
|
.type-container{ |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-wrap: nowrap; |
|
|
flex-wrap: nowrap; |
|
|
margin: 0 0 32rpx; |
|
|
|
|
|
width: 100%; |
|
|
width: 100%; |
|
|
overflow-y: hidden; |
|
|
overflow-y: hidden; |
|
|
overflow-x: auto; |
|
|
overflow-x: auto; |
|
|
padding:0 26rpx; |
|
|
padding:0 26rpx; |
|
|
.type-item{ |
|
|
.type-item{ |
|
|
height: 88rpx; |
|
|
height: 88rpx; |
|
|
margin-right: 13rpx; |
|
|
margin-right: 10rpx; |
|
|
flex-shrink: 0; |
|
|
flex-shrink: 0; |
|
|
image{ |
|
|
image{ |
|
|
width: 100%; |
|
|
width: 100%; |
|
@ -261,7 +276,8 @@ |
|
|
width: 238.67rpx |
|
|
width: 238.67rpx |
|
|
} |
|
|
} |
|
|
.type-item:nth-of-type(4){ |
|
|
.type-item:nth-of-type(4){ |
|
|
width: 307.33rpx |
|
|
width: 307.33rpx; |
|
|
|
|
|
margin-right: 0; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|