You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
pifa/pages/activity/newGoods.vue

395 lines
8.5 KiB

<template>
<view class="newGoods" :id="`newGoods${styleIndex}`">
<!-- <image src="/static/newGoods/newBack.png" mode="" class="bgImg"></image> -->
<view>
<u-navbar title="新品首发" :border-bottom="false" title-color="#333" :background="styleIndex > 0 ? { background: '#fff'} : background"></u-navbar>
</view>
<view v-if="!styleIndex" class="firGoods" :style="{backgroundImage:'url('+backgroundImg+')'}">
</view>
<view v-else class="firGoods" :style="{backgroundImage:`url(${$picUrl + '/static/goods/firGood' + styleIndex + '.png'})`}">
</view>
<view class="goodsList">
<view class="goodsItem" v-for="(item,index) in list" :key="index" @click="goDetails(item.goods_id)">
<view class="hotSell">
抢先体验
</view>
<view class="item">
<view class="goodsInfo">
<view class="goodsDetail">
<view class="infoRight">
<image :src="item.goods_image" mode="widthFix" class="infoImg"></image>
</view>
<view class="infoLeft">
<view class="gName">
{{item.goods_name}}
</view>
<!-- <view class="gd">
{{item.selling_point}}
</view> -->
<view class="price">
<view class="lowPrice">
¥{{item.goods_price_min?Number(item.goods_price_min):''}}起
</view>
<view class="buyNow">
立即购买
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="lookBtn" @click="backtop">
再挑挑看<u-icon name="arrow-upward" color="#fff" size="30" style="transform: rotate(90deg);"></u-icon>
</view>
<view class="lookJie" v-html="content">
</view>
</view>
<addShuiyin />
</view>
</template>
<script>
import * as Api from '@/api/activity'
import * as help from '@/api/help'
import {
getEmptyPaginateObj,
getMoreListData
} from '@/core/app'
export default {
data() {
let img = 'https://www.royaum.com.cn/static/member/head.png'
return {
background: {
background: 'url(' + img + ') center top no-repeat',
backgroundSize: '100% auto',
},
page: 1,
backgroundImg: '',
list: [],
content: '',
scrollTop: 0
}
},
computed: {
styleIndex() {
const index = uni.getStorageSync('styleIndex') || '';
return index;
},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getCarouselList()
this.getBrandList()
this.getCarousel()
},
methods: {
getCarousel(type) {
const app = this;
help.getAgreement({
type: 'copyright'
})
.then(result => {
let content = result.data.detail?result.data.detail.content:'';
this.content = content
})
.finally(() => app.isLoading = false)
},
// 获取新牌商品
getBrandList() {
const app = this;
let pamars = {
page: app.page,
is_brand: '',
is_new: 1,
categoryId: '',
order: '',
is_in_store: 0
}
Api.brandList(pamars)
.then(result => {
app.list = result.data.data
app.total = result.data.total
})
.finally(() => app.isLoading = false)
},
goDetails(goodsId) {
uni.navigateTo({
url: '/pages/goods/detail?goodsId=' + goodsId
})
},
// 获取背景图
getCarouselList() {
const app = this;
Api.getImage({
type: 1
})
.then(result => {
app.backgroundImg = result.data.imgurl
})
.finally(() => app.isLoading = false)
},
backtop() {
uni.pageScrollTo({
scrollTop: 0
});
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
}
}
</script>
<style lang="scss" scoped>
@import './newGoodsStyle.scss';
.lookBtn {
width: 500rpx;
line-height: 90rpx;
height: 90rpx;
background-color: #FFDCC3;
text-align: center;
font-size: 30rpx;
border-radius: 40rpx;
margin: 30rpx auto;
color: #242424;
}
.lookJie {
text-align: center;
color: #fff;
font-size: 28rpx;
margin: 30rpx 0 50rpx 0;
}
.newGoods {
width: 100%;
position: relative;
height: 100vh;
.bgImg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -10;
}
}
.firGoods {
width: 100%;
height: 652rpx;
background-image: url('https://www.royaum.com.cn/static/newGoods/top.png');
background-repeat: no-repeat; /* 不重复平铺背景图片 */
background-position: center top; /* 居中显示背景图片 */
background-size: 100% auto; /* 拉伸并填充至元素内部 */
image{width:100%}
.topLine {
display: flex;
justify-content: center;
.left {
margin-top: 132rpx;
.goodsName {
height: 58rpx;
font-size: 40rpx;
font-weight: 600;
color: #242424;
line-height: 58rpx;
}
.goodsDesc {
width: 280rpx;
height: 78rpx;
font-size: 56rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #242424;
line-height: 78rpx;
}
.newTip {
width: 156rpx;
height: 56rpx;
background: #DA1646;
opacity: 1;
border-radius: 25rpx 0 25rpx 25rpx;
text-align: center;
font-size: 36rpx;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
font-weight: 400;
color: #FFFFFF;
line-height: 56rpx;
}
}
.right {
background-image: url('https://www.royaum.com.cn/static/newGoods/bg.png');
background-repeat: no-repeat;
background-size: 422rpx 102rpx;
position: relative;
background-position: left bottom;
height: 500rpx;
.goodsImg {
width: 414rpx;
height: 414rpx;
box-shadow: 0rpx 12rpx 29rpx 0rpx rgba(0, 0, 0, 0.25);
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
z-index: 99;
}
.bg {
width: 422rpx;
height: 102rpx;
position: absolute;
top: 374rpx;
z-index: 0;
}
}
}
}
.goodsList {
width: 100%;
padding: 26rpx 0 30rpx 26rpx;
background-color: #ffcdd5;
//background-image: url('https://www.royaum.com.cn/static/newGoods/bot.png');
background-repeat: no-repeat;
background-size: 100% 100%;
.goodsItem {
margin-bottom: 32rpx;
}
.item {
width: 700rpx;
height: 334rpx;
background: #FDE7D5;
border-radius: 12rpx 12rpx 12rpx 12rpx;
opacity: 1;
padding: 8rpx 10rpx 10rpx;
}
.hotSell {
width: 226rpx;
height: 82rpx;
background: linear-gradient(180deg, #FDE7D5 0%, #FFDCC3 100%);
opacity: 1;
text-align: center;
font-size: 36rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #C82821;
line-height: 82rpx;
position: relative;
top: 8rpx;
border-radius: 20rpx 20rpx 0 0;
}
.goodsInfo {
width: 680rpx;
height: 316rpx;
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
opacity: 1;
padding-left: 28rpx;
.goodsDetail {
display: flex;
justify-content: space-between;
width: 100%;
position: relative;
align-items: flex-start;
.infoLeft {
flex: 1;
margin-top: 20rpx;
.gName {
margin-bottom: 15rpx;
overflow: hidden;
-webkit-line-clamp: 2;
max-width: 300rpx;
height: 112rpx;
font-size: 40rpx;
font-weight: 600;
color: #3F3F3F;
line-height: 56rpx;
margin-top: 32rpx;
}
// .gd {
// overflow: hidden;
// -webkit-line-clamp: 2;
// height: 88rpx;
// font-size: 32rpx;
// font-weight: 400;
// color: #9F9F9F;
// line-height: 44rpx;
// }
// .gp {
// height: 44rpx;
// font-size: 32rpx;
// font-family: PingFang SC, PingFang SC;
// font-weight: 400;
// color: #DE041C;
// line-height: 38rpx;
// }
}
.infoRight {
width: 220rpx;
height: 220rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin-right: 14rpx;
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: 40rpx;
.infoImg {
width: 200rpx;
height: 200rpx;
}
}
}
.price {
display: flex;
justify-content: space-between;
margin-top: 50rpx;
margin-right: 30rpx;
.lowPrice {
height: 50rpx;
font-size: 36rpx;
font-weight: 600;
color: #DE041C;
line-height: 50rpx;
}
.buyNow {
width: 174rpx;
height: 58rpx;
background: linear-gradient(180deg, #FC522C 0%, #FA2929 100%);
border-radius: 58rpx 58rpx 58rpx 58rpx;
opacity: 1;
text-align: center;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 58rpx;
}
}
}
}
</style>