chenkainan
/
yandu_WeChat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

专题改版

master
jiazhipeng 6 months ago
parent
de4b49f5dc
commit
88bd4347d7
1 changed files with 129 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 216
      subPackages/activity/springTour.vue

216
subPackages/activity/springTour.vue
View File

@ -1,22 +1,16 @@
<template>
<view class="bg">
<img :src="showImg('/uploads/20250401/c1cd30fafca4c753259aa3272dc7852e.png')" class="topImg" />
<image :src="showImg('/uploads/20250411/c2f08776888c2c46ffbd2c48cc232baf.png')" class="topImg" />
<view class="rule" @click="goRule()">
<text style="padding-bottom: 6rpx;display: inline-block;">活动规则</text>
<uni-icons color="#ffffff" type="right" size="14"></uni-icons></view>
<img :src="showImg('/uploads/20250401/d87051740887376b0cb9b57b37485017.png')" class="coupon-header">
<image :src="showImg('/uploads/20250411/98c8999a389c972aa7e2af20595e4045.png')" class="coupon-header">
<view class="coupon-box">
<view class="rule" @click="goRule()">规则</view>
<view class="coupon-item" v-for="(item,i) in couponList" :key="i" @click="getCoupon(item)">
<view class="coupon-price">
<view >
<text style="font-weight: bold;font-size: 25rpx;">￥</text>{{item.price}}
</view>
</view>
<view class="coupon-content">
<view style="font-weight: bold;font-size: 24rpx;color: #333333;">{{item.title}}</view>
<view class="coupon-btn">立即领取</view>
</view>
<view class="coupon-item" v-for="(item,i) in couponList" :key="i" @click="getCoupon(item)"
:style="{'backgroundImage':`url(${item.img})`}">
<image src="https://tongli.sz-trip.com/uploads/20250411/c5c7e3ee78863380bbdace18bd8ac228.png" class="coupon-btn" />
</view>
</view>
@ -24,18 +18,29 @@
<view class="item" v-for="item in list" :key="item.id" @click="goDetailByType(item.goods)">
<image class="item-img" :src="showImg(item.goods.image)" mode=""></image>
<view class="content">
<view class="title text-overflowRows">{{item.goods.title}}</view>
<view>
<view class="title text-overflowRows">{{item.goods.title}}</view>
<view class="tag-content" v-if="item.goods.goods_new_tag">
<view class="tag-item" v-for="(tag,i) in item.goods.goods_new_tag.split(',')" :key="i">
{{tag}}
</view>
</view>
</view>
<view class="bottom">
<view class="price">
{{item.goods.money/100}}
<view >
<text class="oldPrice">￥{{item.goods.price/100}}</text>
<text class="price">{{item.goods.money/100}}</text>
</view>
<view class="buy">
立即购买
抢购
</view>
</view>
</view>
</view>
</view>
<image v-if="goTop" @click="Totop()" class="goTopImg" src="https://tongli.sz-trip.com/uploads/20250411/83aaaa1a483aa1effe82f6a869ffce50.png"></image>
</view>
</template>
@ -44,22 +49,37 @@
data() {
return {
couponList: [
{id: 1, price:5, title: '满15减5'},
{id: 2, price:10, title: '满30减10'},
{id: 3, price:15, title: '满50减15'},
{id: 4, price:20, title: '满60减20'},
{id: 1, price:5, title: '满15减5',img: 'https://tongli.sz-trip.com/uploads/20250411/c94ac0d977b4767d2809134fdace5a62.png'},
{id: 2, price:10, title: '满30减10',img: 'https://tongli.sz-trip.com/uploads/20250411/15a8af6400b71c5b7e2f8da78ead6f04.png'},
{id: 3, price:15, title: '满50减15',img: 'https://tongli.sz-trip.com/uploads/20250411/529b589eec9ac511f13fadbdd8188f2c.png'},
{id: 4, price:20, title: '满60减20',img: 'https://tongli.sz-trip.com/uploads/20250411/883734155ee9cbbbcee590194f6143be.png'},
],
list:[],
finished: false,
isReceive: true,
goTop: false
}
},
onReady() {
this.getCouponId()
this.getList()
},
onPageScroll(e){
// 监听页面滚动
if(e.scrollTop>200){
this.goTop=true;
}else{
this.goTop=false;
}
},
methods: {
Totop(){
uni.pageScrollTo({
scrollTop: 0,//滚动到页面的目标位置
duration: 300
});
},
// 获取优惠券id
getCouponId () {
this.Post({id: 256},'/api/multimedia/detail').then(res=>{
@ -140,43 +160,61 @@
}
.bg {
background: #A2EEC0;
background: #AFEBB7;
min-height: 100vh;
padding-bottom: 26rpx;
padding-bottom: 120rpx;
position: relative;
}
.topImg {
width: 750rpx;
height: 440rpx;
height: 893.33rpx;
}
.rule{
width: 58rpx;
height: 170rpx;
background: rgba(255,122,69,0.86);
border-radius: 7rpx 0rpx 0rpx 7rpx;
border: 2px solid #FF503B;
font-weight: 500;
font-size: 27rpx;
color: #FFFFFF;
text-align: center;
position: absolute;
top: 529rpx;
right: 0;
padding: 8rpx 14rpx 0;
line-height: 28rpx;
}
.box {
margin-top: 50rpx;
// border-radius: 20rpx 20rpx 0rpx 0rpx;
padding: 0 26rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
margin-bottom: 22rpx;
width: 335rpx;
height: 448rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(153,153,153,0.38);
border-radius: 13rpx;
width: 100%;
height: 272.67rpx;
position: relative;
}
.item-img {
width: 100%;
height: 266.67rpx;
border-radius: 13rpx 13rpx 0rpx 0rpx;
width: 307rpx;
height: 100%;
background: #FA6216;
border-radius: 20rpx;
}
.content {
height: 145rpx;
padding: 0 13rpx 13.33rpx;
height: 100%;
width: 459rpx;
background: #FFFFFF;
border-radius: 20rpx;
position: absolute;
top: 0;
right: 0;
padding: 24rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
@ -184,10 +222,9 @@
.title {
font-family: PingFang SC;
font-size: 29rpx;
color: #000000;
width: 291rpx;
font-weight: 500;
font-size: 31rpx;
color: #00132F;
}
.bottom {
@ -195,31 +232,50 @@
justify-content: space-between;
align-items: center;
}
.oldPrice{
font-weight: 400;
font-size: 24rpx;
color: #66676A;
line-height: 15rpx;
text-decoration-line: line-through;
display: block;
}
.price {
font-size: 33.33rpx;
font-family: PingFangSC;
font-weight: bold;
color: #F40F0B;
color: #F75008;
}
.price::before {
content: '￥';
font-size: 24rpx;
}
.price::after {
content: '起';
font-size: 20rpx;
color: #666;
font-weight: 400;
.tag-content {
display: flex;
width: 100%;
overflow: hidden;
margin-top: 20rpx;
.tag-item{
border-radius: 20rpx;
border: 1px solid #FFA416;
font-weight: 500;
font-size: 24rpx;
color: #FFA416;
line-height: 23rpx;
padding:10rpx 20rpx;
flex-shrink: 0;
margin-right: 13rpx;
}
}
.buy {
width: 151rpx;
height: 48rpx;
background: linear-gradient(180deg, #FB6493, #E2235B);
border-radius: 24rpx;
width: 107rpx;
height: 53rpx;
background: linear-gradient(90deg, #FF413B, #FFAB2E);
border-radius: 27rpx;
text-align: center;
line-height: 48rpx;
line-height: 53rpx;
font-family: PingFang SC;
font-weight: bold;
font-size: 27rpx;
@ -227,48 +283,34 @@
}
.coupon-header{
width: 589.33rpx;
height: 75.33rpx;
width: 450rpx;
height: 100rpx;
display: block;
margin: 0 auto;
position: relative;
margin-top: 35rpx;
z-index: 2;
}
.coupon-box{
width: 697rpx;
height: 413rpx;
background: #FFFDEB;
height: 597rpx;
background: #FFFFFF;
border-radius: 20rpx;
margin: -50rpx auto 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 92rpx 17rpx 0;
padding: 62rpx 32rpx 0;
position: relative;
z-index: 1;
.rule{
width: 83rpx;
height: 40rpx;
background: #27967B;
border-radius: 20rpx 0rpx 0rpx 20rpx;
font-weight: 500;
font-size: 25rpx;
color: #FFFFFF;
position: absolute;
top: 13rpx;
right: 0;
text-align: center;
line-height: 40rpx;
}
.coupon-item{
width: 327.33rpx;
height: 120.67rpx;
width: 306.67rpx;
height: 233.33rpx;
display: flex;
background-image: url("https://tongli.sz-trip.com/uploads/20250401/df0ba64e58d91457c062be571ea51b3e.png");
background-size: 100% 100%;
margin-bottom: 24rpx;
}
.coupon-price{
font-weight: 600;
@ -287,16 +329,16 @@
flex: 1;
}
.coupon-btn{
width: 133rpx;
height: 40rpx;
background: linear-gradient(180deg, #FB6493, #E2235B);
border-radius: 20rpx;
font-weight: bold;
font-size: 24rpx;
color: #FFFFFF;
text-align: center;
line-height: 40rpx;
width: 205.33rpx;
height: 48.67rpx;
margin: 161rpx auto 0;
}
}
.goTopImg{
width: 102rpx;
height: 102rpx;
position: fixed;
right: 28rpx;
bottom: 48rpx;
}
</style>

Write Preview
Loading…
Cancel
Save