261 lines
6.8 KiB
Vue
261 lines
6.8 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-align-center tabs-wrap v1-py-1 v12-my-4">
|
|
<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 @click.stop="addToCart(item, 'productId')">
|
|
<u-icon :name="webUrl + '/home/icon-cart.png'" size="24"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<ProductWindow
|
|
ref="attrWindow"
|
|
:attr="attr"
|
|
:cartNum="cart_num"
|
|
:showOk="true"
|
|
@changeFun="changeFun"
|
|
@ok="handleOk(() => this.getCartCount())"
|
|
/>
|
|
<!-- <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'
|
|
import ProductWindow from '@/components/ProductWindow'
|
|
import goCartMixin from '@/mixins/goCartMixins'
|
|
import { mapGetters } from 'vuex'
|
|
export default{
|
|
components: {
|
|
ProductWindow
|
|
},
|
|
mixins: [goCartMixin],
|
|
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: {
|
|
...mapGetters(['isLogin', 'location', 'userInfo']),
|
|
bannerImage() {
|
|
return this.details.newProducts && this.details.newProducts[this.current] && this.details.newProducts[this.current].bannerImage
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick(index, tab) {
|
|
this.activeIndex = index
|
|
this.products = tab.products
|
|
},
|
|
handleChange(e) {
|
|
this.current = e.detail.current
|
|
},
|
|
toGoods(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/shop/GoodsCon/index?id=${item.productId}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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-between;
|
|
}
|
|
.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;
|
|
}
|
|
.box-emp{
|
|
width: 100%;
|
|
height: 85rpx;
|
|
}
|
|
.buy-btn{
|
|
border-radius: 100px;
|
|
width: fit-content;
|
|
color: #fff;
|
|
background: #C52733;
|
|
font-size: 30rpx;
|
|
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>
|