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:
modendeveloper
2024-11-19 00:38:58 +08:00
parent 655bb7e7e3
commit 0edbbfcdf5
4 changed files with 295 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/home/index.vue
+130 -2
View File
@@ -109,12 +109,47 @@
/>
</swiper-item>
</swiper>
<image
<!-- <image
v-if="contentFestival.indexImage"
:src="contentFestival.indexImage"
mode="scaleToFill"
@click="goFestival"
/>
/> -->
<view class="new-zone-wrap">
<view class="kd" @click="toKD">
<view class="img-wrap">
<image style="width: 112rpx; height:26rpx" :src="webUrl + '/orderIcon/kd.png'" mode="heightFix|widthFix"></image>
</view>
<view class="tip-img">
<image style="width: 142rpx; height:66.11rpx;border-radius: 0" :src="webUrl + '/orderIcon/dot.png'" mode="heightFix|widthFix"></image>
</view>
<view class="kd-cover">
<video v-if="indexVideo" class="kd-cover v12-mt-0" :src="indexVideo" controls :poster="indexVideo + '?vframe/jpg/offset/1'"></video>
<view class="enter-btn">点击进入</view>
</view>
</view>
<view class="xpsx">
<view class="img-wrap">
<image style="width: 140rpx; height:26.44rpx" :src="webUrl + '/orderIcon/xp.png'" mode="heightFix|widthFix"></image>
</view>
<view class="new-zone v12-mt-2" @click="toNewZone">
<swiper autoplay circular style="width: 100%;" interval="3000" next-margin="40rpx">
<swiper-item v-for="(item, index) in newZone" :key="index">
<view class="new-item">
<image :src="item.productImage" style="width: 120rpx; height: 120rpx; border-radius:10rpx"></image>
<view class="goods-info">
<view class="v12-font-22 more-t">{{ item.productTitle }}</view>
<view class="v12-primary-text v12-font-bold price-wrap">
<text class="v12-font-16">￥</text>
<text class="v12-font-24">{{ item.productPrice }}</text>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
</view>
</view>
<!-- 2022/6/20 add 尖货推荐 -->
@@ -291,6 +326,9 @@ export default {
oldUserPopup: {},
// 民宿专题轮播
contentHomestay: [],
// 新品推荐
newZone: [],
indexVideo: '',
// 节日专题
contentFestival: {},
pageKeyId: Object.freeze('appIndex'),
@@ -329,6 +367,12 @@ export default {
this.scrollTop = e.scrollTop
},
methods: {
toKD() {
this.$yrouter.push('/pages/VideoPlayBackList/VideoPlayBackList')
},
toNewZone() {
this.$yrouter.push('/pages/home/newZone')
},
init() {
getShareImage().then(({ data }) => this.shareAppImg = data)
sharpBannar().then(res => {
@@ -370,6 +414,8 @@ export default {
_this.$set(_this, 'oldUserPopup', data.oldUserPopup)
_this.$set(_this, 'contentHomestay', data.contentHomestayV2)
_this.$set(_this, 'contentFestival', data.contentFestivalV2)
_this.$set(_this, 'newZone', data.newGoods)
_this.indexVideo = data.indexVideo.videoUrl
_this.bastLeftList = []
_this.bastRightList = []
_this.lotteryCanDraw = data.lotteryCanDraw
@@ -796,5 +842,87 @@ export default {
margin: 0 0 0 20rpx;
}
}
}
.new-zone-wrap{
width: 336rpx;
height: 480rpx;
background: rgba(240,240,240,0.8);
border-radius: 16rpx;
padding: 10rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
.kd{
width: 100%;
height: 266rpx;
background: #fff;
border-radius: 16rpx;
padding: 10rpx;
box-sizing: border-box;
position: relative;
}
.xpsx{
width: 100%;
height: 180rpx;
background: #fff;
border-radius: 16rpx;
padding: 10rpx;
box-sizing: border-box;
}
}
.img-wrap{
height: 27rpx;
width: 140rpx;
image{
border-radius: 0 !important;
vertical-align: text-top !important
}
}
.tip-img{
position: absolute;
right: 0;
top: 0;
}
.kd-cover{
width: 100%;
height: 180rpx;
border-radius: 20rpx;
margin-top: 20rpx;
}
.enter-btn{
color: #333;
background-color: rgba(255,255,255,0.6);
font-size: 28rpx;
width: fit-content;
padding: 6rpx 20rpx;
border-radius: 100rpx;
position: absolute;
left: 0;
right: 0;
bottom: 40rpx;
margin: auto;
}
.new-zone{
display: flex;
align-items: center;
justify-content: flex-start;
overflow: scroll;
}
.new-item{
display: flex;
margin-right: 20rpx;
align-items: center;
}
.goods-info{
width: 122rpx;
height: 110rpx;
background: rgba(240,240,240,0.8);
border-radius: 0rpx 20rpx 20rpx 0rpx;
box-sizing: border-box;
padding: 10rpx;
}
.price-wrap{
}
</style>
pages/home/newZone.vue
+148
View File
@@ -0,0 +1,148 @@
<template>
<view class="new-zone-page">
<view class="zone-title">
<rich-text :nodes="details.title"></rich-text>
</view>
<view class="banner-zone v12-mt-2">
<image class="banner-zone" :src="details.banners[0] || ''" mode="heightFix|widthFix"></image>
<view class="swiper-wrap">
<swiper style="height: 100%;" :autoplay=" details.newProducts.length > 2" circular next-margin="460rpx" interval="3000">
<swiper-item v-for="(item, index) in details.newProducts" :key="index" @click="toGoods(item)">
<view class="new-card">
<image :src="item.productImage" class="new-card-img" mode="heightFix|widthFix"></image>
<view class="box-emp"></view>
<view class="new-info">
<view class="v12-font-30 one-t" style="width: 100px;text-align:center">{{ item.productTitle }}</view>
<view class="v12-font-bold">
<text>￥</text>
<text class=" v12-font-40">{{ item.productPrice }}</text>
</view>
<view class="buy-btn">即刻选购</view>
</view>
</view>
</swiper-item>
</swiper>
</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>
</view>
<view class="secondary-title v12-ml-2" v-if="details.contentSubTitle">
—
{{ details.contentSubTitle }}
</view>
</view>
<view class="cover-img v12-mt-2" v-for="(item, index) in details.contents" @click="toGoods(item)">
<image :src="item.contentImage" class="cover-img" mode="heightFix|widthFix"></image>
</view>
</view>
</template>
<script>
import { queryNewZone } from '@/api/activity'
export default{
data() {
return {
details: {}
}
},
onLoad() {
queryNewZone().then(res => {
console.log(res);
this.details = res.data
})
},
methods: {
toGoods(item) {
uni.navigateTo({
url: `/pages/shop/GoodsCon/index?id=${item.productId}`
})
}
}
}
</script>
<style lang="scss" scoped>
.new-info{
display: flex;
align-items: center;
flex-direction: column;
}
.box-emp{
width: 100%;
height: 85rpx;
}
.buy-btn{
border-radius: 100px;
width: fit-content;
color: #fff;
background: #C52733;
font-size: 28rpx;
padding: 4rpx 20rpx;
}
.swiper-wrap{
position: absolute;
width: 100%;
height: 400rpx;
left: 20rpx;
bottom: 40rpx;
}
.new-card{
width: 220rpx;
height: 240rpx;
background: #fff;
border-radius: 20rpx;
position: absolute;
bottom: 0;
}
.cover-img{
width: 706rpx;
height: 400rpx;
border-radius: 20rpx;
}
.new-card-img{
position: absolute;
width: 150rpx;
height: 150rpx;
top: -75rpx;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
}
.primary-title{
width: fit-content;
position: relative;
font-size: 34rpx;
color: #333333;
font-weight: 800;
}
.secondary-title{
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 28rpx;
color: #999999;
line-height: 40rpx;
}
.title-line{
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;
position: absolute;
bottom: 3rpx;
}
.new-zone-page{
min-height: 100vh;
background-color: #fff;
padding: 20rpx;
}
.banner-zone{
width: 706rpx;
height: 760rpx;
border-radius: 20rpx;
position: relative;
}
</style>