172 lines
4.2 KiB
Vue
172 lines
4.2 KiB
Vue
<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="bannerImage" ></image>
|
|
|
|
<!-- <swiper :current="current" interval="3000" circular style="height:760rpx">
|
|
<swiper-item v-for="(item, index) in details.newProducts" :key="index">
|
|
</swiper-item>
|
|
</swiper> -->
|
|
<view class="swiper-wrap">
|
|
<swiper @change="handleChange" style="height: 100%;" autoplay circular next-margin="460rpx" interval="4000">
|
|
<swiper-item v-for="(item, index) in details.newProducts" :key="index" @click="toGoods(item)">
|
|
<view class="new-card" :class="{'is-actived': current == index}">
|
|
<image :src="item.productCover" class="new-card-img" mode="heightFix|widthFix"></image>
|
|
<view class="box-emp"></view>
|
|
<view class="new-info">
|
|
<view class="v12-font-26 one-t" style="width: 100px;text-align:center">{{ item.productTitle }}</view>
|
|
<view class="v12-font-bold">
|
|
<text>￥</text>
|
|
<text class=" v12-font-36">{{ 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" :key="index" @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: {},
|
|
current: 0,
|
|
}
|
|
},
|
|
onLoad() {
|
|
queryNewZone().then(res => {
|
|
this.details = res.data
|
|
})
|
|
},
|
|
computed: {
|
|
bannerImage() {
|
|
return this.details.newProducts && this.details.newProducts[this.current] && this.details.newProducts[this.current].bannerImage
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
handleChange(e) {
|
|
this.current = e.detail.current
|
|
},
|
|
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: -17rpx;
|
|
transition: all ease-in-out 0.3s;
|
|
scale: 0.85;
|
|
left: 15rpx;
|
|
}
|
|
.is-actived{
|
|
// width: 225rpx;
|
|
// height: 260rpx;
|
|
bottom: 0;
|
|
scale: 1;
|
|
left: 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 !important;
|
|
height: 760rpx !important;
|
|
border-radius: 20rpx !important;
|
|
position: relative !important;
|
|
}
|
|
</style> |