Skip to content

飞
飞鹤小程序
Commit 0a03137a authored by 王炽's avatar 王炽
Browse files
Options

6666

parent 90766518
Hide whitespace changes
Inline Side-by-side
Showing with 229 additions and 6 deletions
project.config.json
View file @ 0a03137a
......@@ -20,6 +20,6 @@
"ignore": [],
"include": []
},
"appid": "wx88ab296d52e9835d",
"appid": "wxc83b55d61c7fc51d",
"editorSetting": {}
}
\ No newline at end of file
views/Integral.vue
View file @ 0a03137a
......@@ -132,9 +132,85 @@
</view>
</view>
<view class="vip-active-area">
<text class="vip-title">会员活动</text>
<swiper
class="vip-active-swiper"
:indicator-dots="true"
:autoplay="true"
:circular="true"
indicator-color="#dfddd9"
indicator-active-color="#b27c1e"
:indicator-top="32"
>
<swiper-item v-for="(item, index) in 3" :key="index">
<image
class="vip-active-img"
:src="`/static/integral/vipAct${index}.png`"
mode="aspectFit"
/>
</swiper-item>
</swiper>
</view>
<!-- 商品展示容器 -->
<view class="goods-container">
<!-- 页签栏 -->
<view class="custom-tabs">
<view
v-for="(tab, index) in tabs"
:key="index"
class="tab-item"
:class="{ active: activeIndex === index }"
@click="tabItemClick(index)"
>
<text class="tab-line1">{{ tab.line1 }}</text>
<text class="tab-line2">{{ tab.line2 }}</text>
</view>
</view>
<!-- 商品内容 -->
<view class="goods-content">
<!-- 精选榜单 -->
<view
class="goods-list"
v-if="activeIndex === 0"
>
<view
class="goods-item"
v-for="i in 16"
:key="i"
>
<image
class="goods-img"
:src="`/static/integral/listItemImgJx${i-1}.png`"
mode="aspectFit"
/>
<text class="title-text">{{ goodsData[0].titles[i-1] }}</text>
<text class="price-text">￥<text class="num">65</text></text>
</view>
</view>
<!-- 品质专区 -->
<view
class="goods-list"
v-if="activeIndex === 1"
>
// ... 结构同上，数量改为8 ...
</view>
<!-- 限量推荐 -->
<view
class="goods-list"
v-if="activeIndex === 2"
>
// ... 结构同第一个 ...
</view>
</view>
</view>
<view class="content">
<!-- 积分服务内容 -->
<text>积分服务内容</text>
<!-- 积分底部填充位置 -->
</view>
</view>
</template>
......@@ -144,6 +220,19 @@
// "rgba(255,255,255,0.5)"
import { ref, onMounted } from 'vue';
const activeIndex = ref(0);
const tabs = ref([
{ line1: '精选榜单', line2: '积分超值兑' },
{ line1: '品质专区', line2: '北纬47°' },
{ line1: '限量推荐', line2: '积分加价购' }
]);
const goodsData = ref([
{
titles: ['星飞帆4段儿童成长...','星飞帆卓睿4段儿童...','金装1962-高锌多维学...','香葱流心可颂面包500g','茁然 茁护儿童配方奶...','六水香清禾香大米5kg','星蕴孕产妇奶粉听装700g','美维仕宝宝钙维生素...','金装1962-中老年高钙...','金装1962-高钙高蛋白...','茁然纯牛奶(A2 B酪蛋...','北纬47度黄糯鲜玉米','钙铁锌牛乳软饼干6g*...','迪奥口红 烈焰蓝金唇...','浅香(ASAKA)百合氨基...','心相印茶语精选320抽...']
},
// 其他分类数据...
]);
const vipLevel = ref(0);
const vipNameArr = ref(['V1 黄金会员', 'V2 铂金会员', 'V3 钻石会员', 'V4 星光会员', 'V5 星耀会员']);
......@@ -172,16 +261,29 @@
const scrollToIndex = (index) => {
};
const tabItemClick = (index) => {
// console.log('activeIndex=',index);
activeIndex.value = index;
console.log('activeIndex=',activeIndex.value);
}
</script>
<style lang="less" scoped>
.integral-container{
width: 100%;
min-height: 100vh;
// height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
overflow-y: auto;
// // 确保所有子容器正确布局
// > view {
// width: 100%;
// flex-shrink: 0;
// }
.banner-swiper {
width: 100%;
......@@ -388,6 +490,8 @@
.title-text {
font-size: 32rpx;
color: #1d1e25;
font-weight: bold;
margin-left: 20rpx;
.highlight {
color: #d3a358;
......@@ -438,14 +542,133 @@
.new-tip {
position: absolute;
top: -10rpx;
right: -10rpx;
top: -20rpx;
right: -5rpx;
width: 40rpx;
height: 40rpx;
}
}
}
}
.vip-active-area {
width: 686rpx;
height: auto;
margin-top: 62rpx;
.vip-title{
font-size: 32rpx;
color: #1d1e25;
font-weight: bold;
margin-left: 16rpx;
}
.vip-active-swiper {
width: 100%;
height: 200rpx;
flex-shrink: 0;
margin-top: 30rpx;
.vip-active-img {
width: 100%;
height: 100%;
// border-radius: 16rpx;
}
}
}
.goods-container {
width: 686rpx;
margin: 40rpx auto 0;
.custom-tabs {
display: flex;
justify-content: space-between;
.tab-item {
width: 245rpx;
height: 112rpx;
// background: url('/static/integral/tapListItemBg.png') no-repeat center/cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&.active {
background-image: url('/static/integral/tapSelectBg.png');
background-size: 100% 100%;
.tab-line1 { color: #1d1e25; }
.tab-line2 { color: #b27c1e; }
}
.tab-line1 {
font-size: 28rpx;
font-weight: bold;
color: #6f6d67;
line-height: 40rpx;
}
.tab-line2 {
font-size: 24rpx;
color: #b2b2b0;
line-height: 34rpx;
}
}
}
.goods-content {
position: relative;
margin-top: 30rpx;
height: auto;
.goods-list {
// display: grid;
// grid-template-columns: repeat(2, 1fr);
gap: 20rpx;
display: flex;
flex-wrap: wrap;
.goods-item {
position: relative;
width: 333rpx;
height: 459rpx;
background: #fff;
border-radius: 16rpx;
// padding: 20rpx;
.goods-img {
width: 100%;
height: 300rpx;
margin-bottom: 20rpx;
}
.title-text {
font-size: 26rpx;
color: #1d1e25;
margin-bottom: 16rpx;
display: -webkit-box;
/* 定义标准属性 line-clamp 以提高兼容性 */
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.price-text {
font-size: 26rpx;
color: #b27c1e;
.num {
font-size: 32rpx;
}
}
}
}
}
}
.content{
width: 100%;
height: 180rpx;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment