liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat：甄选好礼

Browse Source
This commit is contained in:
linxi
2025-11-22 14:23:46 +08:00
parent c9f3767cbd
commit 19e598bce7
3 changed files with 131 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages.json
+1 -1
View File
@@ -51,7 +51,7 @@
{
"path": "pages/home/newZone",
"style": {
"navigationBarTitleText": "新品专区",
"navigationBarTitleText": "甄选好礼",
"navigationBarBackgroundColor": "#FFFFFF"
}
},
pages/home/index.vue
+53 -3
View File
@@ -183,7 +183,24 @@
</swiper-item>
</swiper> -->
<view class="new-zone-wrap">
<view v-if="indexVideo" class="kd" id="xkd">
<image class="bg-img" :src="newZone.indexBackgroundImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
<view class="swiper-wrap-zx v12-mt-2" @click="toNewZone">
<swiper autoplay @change="changeIndex" :current="currentIndex" next-margin="40rpx" previous-margin="80rpx" circular style="width: 100%;height: 400rpx;" interval="3000">
<swiper-item style="position: absolute; width: 100%; transform: translate(200%, 0px) translateZ(0px);" v-for="(item, index) in newZone.indexProducts" :key="index" class="s-item" :class="{'n-actived': currentIndex !== index}">
<view class="zx-item">
<image :src="item.productImage" style="width: 192rpx; height: 192rpx; border-radius:10rpx"></image>
<view class="v12-pa-2">
<view class="v12-font-28 more-t v12-font-bold" style="text-align: center;">{{ item.productName }}</view>
<view class="v12-primary-text v12-font-bold price-wrap" style="text-align: center;">
<text class="v12-font-16">￥</text>
<text class="v12-font-24">{{ item.productPrice }}</text>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
<!-- <view v-if="indexVideo" class="kd" id="xkd">
<view class="img-wrap" style="padding-top: 10rpx; box-sizing:border-box">
<image style="width: 112rpx; height:26rpx" :src="webUrl + '/orderIcon/kd.png'" mode="heightFix|widthFix"></image>
</view>
@@ -215,7 +232,7 @@
</swiper-item>
</swiper>
</view>
</view>
</view> -->
</view>
</view>
</view>
@@ -433,7 +450,8 @@ export default {
messageIcon: {},
recommendKeyword: [],
keywordIndex: 0,
shareData: {}
shareData: {},
currentIndex: 0
}
},
onLoad() {
@@ -479,6 +497,9 @@ export default {
}
},
methods: {
changeIndex(e) {
this.currentIndex = e.detail.current
},
changeRecommendKeyword(e) {
this.keywordIndex = e
},
@@ -1550,6 +1571,27 @@ export default {
</script>
<style scoped lang="less">
.n-actived{
bottom: 20rpx !important;
}
.s-item{
height: fit-content !important;
bottom: 0rpx;
}
.zx-item{
width: 192rpx;
background: #fff;
border-radius: 16rpx;
height: 346rpx;
}
.swiper-wrap-zx{
position: absolute;
bottom: 20rpx;
z-index: 2;
/* height: 50%; */
width: 100%;
left: 0;
}
.swiper-item {
height: 100%;
}
@@ -1833,6 +1875,14 @@ export default {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
.bg-img{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.kd{
width: 100%;
height: 266rpx;
pages/home/newZone.vue
+77 -4
View File
@@ -29,8 +29,31 @@
</swiper>
</view>
</view>
<view class="v12-mt-2 v12-align-center">
<view class="v12-align-center tabs-wrap v1-py-1 v12-mt-2">
<view class="tab-item v12-font-bold" v-for="(tab, index) in tabs" :key="index" @click="handleClick(index, tab)">
{{ tab.cateName }}
<view class="tab-line" v-if="activeIndex == index"></view>
</view>
</view>
<view class="product-wrap v12-mt-3">
<view class="product-card" v-for="(item, index) in products" :key="index" @click="toGoods(item)">
<image :src="item.productImage" class="product-card-img" mode="heightFix|widthFix"></image>
<view class="new-info">
<view class="v12-font-26 more-t" style="width: 100%;">{{ item.productName }}</view>
<view style="width: 100%;" class="v12-font-bold v12-primary-text v12-align-center v12-justify-between">
<view>
<text>￥</text>
<text class=" v12-font-36">{{ item.productPrice }}</text>
</view>
<view>
<u-icon :name="webUrl + '/home/icon-cart.png'" size="24"></u-icon>
</view>
</view>
</view>
</view>
</view>
<!-- <view class="v12-mt-2 v12-align-center">
<view class="primary-title" v-if="details.contentTitle">
{{ details.contentTitle }}
<view class="title-line"></view>
@@ -42,7 +65,7 @@
</view>
<view class="cover-img v12-mt-2" v-for="(item, index) in details.contents" :key="index" @click="toGoods(item)">
<image :src="item.contentImage" class="cover-img" mode="heightFix|widthFix"></image>
</view>
</view> -->
</view>
</template>
<script>
@@ -50,13 +73,19 @@ import { queryNewZone } from '@/api/activity'
export default{
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
details: {},
current: 0,
tabs: [],
activeIndex: 0,
products: []
}
},
onLoad() {
queryNewZone().then(res => {
this.details = res.data
this.tabs = res.data.categories
this.handleClick(0, this.tabs[0])
})
},
computed: {
@@ -66,6 +95,10 @@ export default{
},
methods: {
handleClick(index, tab) {
this.activeIndex = index
this.products = tab.products
},
handleChange(e) {
this.current = e.detail.current
},
@@ -78,10 +111,50 @@ export default{
}
</script>
<style lang="scss" scoped>
.product-card{
width: 342rpx;
height: 520rpx;
background: #fff;
border-radius: 20rpx;
margin-bottom: 20rpx;
}
.product-card-img{
width: 344rpx;
height: 344rpx;
background: rgba(169,56,56,0.39);
border-radius: 20rpx;
}
.product-wrap{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.tab-line{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 6rpx;
background: linear-gradient(to right, #C52733 0%, rgba(202,56,67,0.92) 51%, rgba(255,255,255,0) 100%);
border-radius: 6rpx;
}
.tabs-wrap{
overflow: auto;
justify-content: space-around;
}
.tab-item{
margin-right: 20rpx;
white-space: nowrap;
position: relative;
&:last-child{
margin-right: 0;
}
}
.new-info{
display: flex;
align-items: center;
flex-direction: column;
padding: 20rpx 20rpx 0 20rpx;
}
.box-emp{
width: 100%;
@@ -160,7 +233,7 @@ export default{
}
.new-zone-page{
min-height: 100vh;
background-color: #fff;
// background-color: #fff;
padding: 20rpx;
}
.banner-zone{