522 lines
10 KiB
Vue
522 lines
10 KiB
Vue
<template>
|
|
<view class="contain">
|
|
<!-- 头部营销区域 -->
|
|
<view class="header-section">
|
|
<view class="hero-content">
|
|
<view class="hero-title">
|
|
<text class="hero-main">新人专享特惠</text>
|
|
<text class="hero-sub">精选好物·品质优选</text>
|
|
</view>
|
|
<!-- <view class="promotion-banner">
|
|
<text class="promo-text">限时优惠·新人福利</text>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
|
|
<view class="goods-container">
|
|
<scroll-view
|
|
class="goodList"
|
|
scroll-y="true"
|
|
enhanced
|
|
:show-scrollbar="false"
|
|
>
|
|
<view v-for="item in goodList" :key="item.waresCode" class="goodList_i">
|
|
<img :src="item.cover1" class="cover" alt="" />
|
|
<view class="goodList_ir">
|
|
<view class="tit1">
|
|
{{ item.waresName }}
|
|
</view>
|
|
|
|
<view class="goodList_ib">
|
|
<view class="price-container">
|
|
<!-- <text class="currency">￥</text> -->
|
|
<text class="price">{{
|
|
item.waresPrice | numberToCurrency
|
|
}}</text>
|
|
</view>
|
|
<!-- <img @click.stop="addCar(item)"
|
|
src="@/static/images/cart.png"
|
|
alt=""> -->
|
|
</view>
|
|
<view class="toBuy" @click.stop="goBuy(item)">立即购买</view>
|
|
</view>
|
|
</view>
|
|
<view class="list-bottom">
|
|
<text class="bottom-text">— 已显示全部商品 —</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as api from '@/config/login.js'
|
|
import { setToken } from '@/config/auth.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
pkParent: '',
|
|
goodList: [],
|
|
placeParent: '',
|
|
}
|
|
},
|
|
filters: {
|
|
seles(value) {
|
|
if (value > 999) {
|
|
return 999 + '+'
|
|
} else {
|
|
return value
|
|
}
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
this.pkParent = options.pkParent
|
|
this.getToken()
|
|
},
|
|
methods: {
|
|
getToken() {
|
|
api
|
|
.autoLogin({
|
|
pkParent: this.pkParent,
|
|
})
|
|
.then(res => {
|
|
setToken(res.data.access_token, res.data.expires_in)
|
|
this.getList()
|
|
this.getCode()
|
|
})
|
|
},
|
|
getCode() {
|
|
api.fansConvertCode(this.pkParent).then(res => {
|
|
this.placeParent = res.data
|
|
uni.setStorageSync('placeParent', this.placeParent)
|
|
})
|
|
},
|
|
getList() {
|
|
api
|
|
.queryWares({
|
|
shareMemberCode: this.pkParent,
|
|
})
|
|
.then(res => {
|
|
this.goodList = res.data
|
|
})
|
|
},
|
|
goBuy(item) {
|
|
const params = {
|
|
...item,
|
|
pkParent: this.pkParent,
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pages/shareArea/hiOrder?allData=' + JSON.stringify(item),
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.contain {
|
|
background: linear-gradient(
|
|
135deg,
|
|
#005bac 0%,
|
|
#0066cc 50%,
|
|
#f5f7fa 50%,
|
|
#e8f4f8 100%
|
|
);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
// 头部营销区域
|
|
.header-section {
|
|
background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
|
|
padding: 50rpx 32rpx 60rpx;
|
|
animation: slideDown 0.6s ease-out;
|
|
|
|
.hero-content {
|
|
text-align: center;
|
|
|
|
.hero-title {
|
|
margin-bottom: 24rpx;
|
|
|
|
.hero-main {
|
|
display: block;
|
|
color: #fff;
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
margin-bottom: 8rpx;
|
|
animation: fadeInUp 0.8s ease-out 0.2s both;
|
|
}
|
|
|
|
.hero-sub {
|
|
display: block;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
animation: fadeInUp 0.8s ease-out 0.4s both;
|
|
}
|
|
}
|
|
|
|
.promotion-banner {
|
|
background: linear-gradient(
|
|
135deg,
|
|
#ff6b35 0%,
|
|
#f7931e 50%,
|
|
#ffd700 100%
|
|
);
|
|
border-radius: 30rpx;
|
|
padding: 18rpx 36rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.4);
|
|
animation:
|
|
fadeInUp 0.8s ease-out 0.6s both,
|
|
promoBreathe 3s ease-in-out infinite 1s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 2rpx solid rgba(255, 255, 255, 0.3);
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.4),
|
|
transparent
|
|
);
|
|
animation: shimmer 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
.promo-text {
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 商品容器区域
|
|
.goods-container {
|
|
flex: 1;
|
|
background: #f8fafc;
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
margin-top: -40rpx;
|
|
position: relative;
|
|
z-index: 3;
|
|
padding: 32rpx 24rpx 0;
|
|
animation: fadeIn 0.8s ease-out 0.3s both;
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
margin-bottom: 24rpx;
|
|
padding: 20rpx 0;
|
|
|
|
.title-text {
|
|
display: block;
|
|
color: #1e293b;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.title-desc {
|
|
display: block;
|
|
color: #64748b;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 商品列表滚动区域
|
|
.goodList {
|
|
height: calc(100vh - 400rpx);
|
|
padding: 0 8rpx;
|
|
|
|
.goodList_i {
|
|
display: flex;
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 24rpx;
|
|
padding: 24rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 91, 172, 0.06);
|
|
border: 1rpx solid rgba(0, 91, 172, 0.1);
|
|
transition: all 0.3s ease;
|
|
animation: slideInUp 0.6s ease-out both;
|
|
opacity: 0;
|
|
|
|
&:hover {
|
|
transform: translateY(-4rpx);
|
|
box-shadow: 0 12rpx 32rpx rgba(0, 91, 172, 0.15);
|
|
}
|
|
|
|
.cover {
|
|
width: 240rpx;
|
|
height: 240rpx;
|
|
background: #f8fafc;
|
|
border: 1rpx solid #e2e8f0;
|
|
border-radius: 16rpx;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.goodList_ir {
|
|
margin-left: 24rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.tit1 {
|
|
color: #1e293b;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
margin-bottom: 16rpx;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sales {
|
|
color: #64748b;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.goodList_ib {
|
|
margin-bottom: 24rpx;
|
|
|
|
.price-container {
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
.currency {
|
|
color: #ff6b35;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.price {
|
|
color: #ff6b35;
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
}
|
|
|
|
.toBuy {
|
|
background: #005bac;
|
|
color: #ffffff;
|
|
padding: 20rpx 0;
|
|
text-align: center;
|
|
border-radius: 12rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.2),
|
|
transparent
|
|
);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
&:hover {
|
|
background: #0066cc;
|
|
transform: translateY(-2rpx);
|
|
box-shadow: 0 6rpx 16rpx rgba(0, 91, 172, 0.3);
|
|
|
|
&::before {
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-bottom {
|
|
text-align: center;
|
|
padding: 40rpx 0 60rpx;
|
|
|
|
.bottom-text {
|
|
color: #64748b;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 动画定义
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-50rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(40rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.02);
|
|
}
|
|
}
|
|
|
|
@keyframes promoBreathe {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.4);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 12rpx 32rpx rgba(255, 107, 53, 0.6);
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
left: -100%;
|
|
}
|
|
50% {
|
|
left: -100%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
// 商品卡片延迟动画
|
|
.goodList_i:nth-child(1) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
.goodList_i:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
.goodList_i:nth-child(3) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
.goodList_i:nth-child(4) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
.goodList_i:nth-child(5) {
|
|
animation-delay: 0.5s;
|
|
}
|
|
.goodList_i:nth-child(n + 6) {
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
// 响应式优化
|
|
@media (max-width: 750rpx) {
|
|
.header-section {
|
|
padding: 40rpx 24rpx 50rpx;
|
|
|
|
.hero-content {
|
|
.hero-title .hero-main {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goodList {
|
|
.goodList_i {
|
|
padding: 20rpx;
|
|
|
|
.cover {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
}
|
|
|
|
.goodList_ir {
|
|
margin-left: 20rpx;
|
|
|
|
.tit1 {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.goodList_ib {
|
|
.price-container {
|
|
.price {
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toBuy {
|
|
padding: 18rpx 0;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|