code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2026-08-06 10:57:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增index.html文件并更新多个页面样式和结构

Browse Source
This commit is contained in:
pikachu1995@126.com
2026-07-06 13:53:54 +08:00
parent 5f293d929d
commit b1743cefb0
20 changed files with 821 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
pages/promotion/lives.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="box">
<view class="box">
<u-navbar
class="navbar"
:border="false"
@@ -30,46 +30,65 @@
:list="tabs"
></u-tabs>
<div class="wrapper">
<!-- 直播中 全部 直播回放 -->
<div class="live-item" :class="{'invalid':item.status == 'END'}" v-for="(item,index) in liveList" :key="index" @click="handleLivePlayer(item)">
<div class="live-cover-img">
<div class="tips">
<div class="live-box">
<image class="live-gif" src="./static/live.gif"></image>
</div>
<span>{{item.status == 'END' ? '已结束' : item.status =='NEW' ? '未开始' : '直播中'}}</span>
</div>
<div class="bg"></div>
<u-image width="326" height="354" :src="item.shareImg" />
</div>
<div class="live-goods">
<div class="live-goods-name">
{{item.name}}
</div>
<div class="live-store">
<span class="wes">lilishop</span>
</div>
<div class="live-goods-list">
<div class="live-goods-item">
<u-image border-radius="20" :src="item.roomGoodsList ? item.roomGoodsList[0] : ''" height="140"></u-image>
</div>
<div class="live-goods-item">
<u-image border-radius="20" :src="item.roomGoodsList ? item.roomGoodsList[1] : ''" height="140"></u-image>
</div>
</div>
</div>
</div>
<u-loadmore v-if="liveList.length > 10" bg-color="#f8f8f8" :status="status" />
</div>
</div>
<view class="wrapper">
<view
class="live-item"
:class="{ invalid: item.status == 'END' }"
v-for="(item, index) in liveList"
:key="item.id || item.roomId || index"
@click="handleLivePlayer(item)"
>
<view class="live-cover-img">
<view class="tips">
<view class="live-box" v-if="item.status === 'START'">
<image class="live-gif" src="/pages/promotion/static/live.gif" mode="aspectFit"></image>
</view>
<text>{{ item.status == 'END' ? '已结束' : item.status == 'NEW' ? '未开始' : '直播中' }}</text>
</view>
<view class="bg"></view>
<u-image
class="cover-image"
width="326rpx"
height="354rpx"
mode="aspectFill"
:src="item.shareImg"
/>
</view>
<view class="live-goods">
<view class="live-goods-name">{{ item.name }}</view>
<view class="live-store">
<text class="wes">{{ config.name }}</text>
</view>
<view class="live-goods-list" v-if="item.roomGoodsList && item.roomGoodsList.length">
<view
class="live-goods-item"
v-for="(goodsImg, goodsIndex) in item.roomGoodsList.slice(0, 2)"
:key="goodsIndex"
>
<u-image
border-radius="20"
:src="goodsImg"
width="100%"
height="140rpx"
mode="aspectFill"
></u-image>
</view>
</view>
</view>
</view>
<u-loadmore v-if="liveList.length > 0" bg-color="#f8f8f8" :status="status" />
<view class="empty-live" v-if="!liveList.length && status === 'noMore'">暂无直播间</view>
</view>
</view>
</template>
<script>
import { getLiveList } from "@/api/promotions.js";
import config from "@/config/config";
export default {
data() {
return {
config,
status: "loadmore",
activeColor: this.$lightColor,
current: 0, // 当前tabs索引
@@ -142,6 +161,7 @@ export default {
* 点击标签栏切换
*/
changeTabs() {
this.params[this.current].pageNumber = 1;
this.init();
},
@@ -185,9 +205,9 @@ export default {
let recommendLives = await getLiveList(this.recommendParams);
if (recommendLives.data.success) {
// 推荐直播间
if (recommendLives.data.result.records.length ) {
if (recommendLives.data.result.records.length) {
this.status = "loadmore";
this.recommendLives = recommendLives.data.result.records;
this.recommendLiveList = recommendLives.data.result.records;
} else {
this.status = "noMore";
}
@@ -198,9 +218,9 @@ export default {
* 2.如果没有直播间设置一个默认图片
*/
if (!this.recommendLives.length) {
if (this.liveList[0].shareImg) {
this["swiperImg"] = [
if (!this.recommendLiveList.length) {
if (this.liveList[0] && this.liveList[0].shareImg) {
this.swiperImg = [
{
image: this.liveList[0].shareImg,
roomId: this.liveList[0].roomId,
@@ -208,10 +228,8 @@ export default {
];
}
} else {
this.recommendLives.forEach((item) => {
this["swiperImg"] = [
{ image: item.shareImg, roomId: item.roomId },
];
this.recommendLiveList.forEach((item) => {
this.swiperImg = [{ image: item.shareImg, roomId: item.roomId }];
});
}
}
@@ -239,8 +257,12 @@ export default {
this.liveList.forEach((item) => {
if (item.roomGoodsList) {
item.roomGoodsList = JSON.parse(item.roomGoodsList);
if (item.roomGoodsList && typeof item.roomGoodsList === "string") {
try {
item.roomGoodsList = JSON.parse(item.roomGoodsList);
} catch (e) {
item.roomGoodsList = [];
}
}
});
}
@@ -277,61 +299,97 @@ export default {
</script>
<style lang="scss" scoped>
page {
background: #f8f8f8;
}
.box {
width: 100%;
min-height: 100vh;
background: #f8f8f8;
box-sizing: border-box;
}
.slot-wrap {
display: flex;
align-items: center;
/* 如果您想让slot内容占满整个导航栏的宽度 */
flex: 1;
/* 如果您想让slot内容与导航栏左右有空隙 */
/* padding: 0 30rpx; */
padding-right: 24rpx;
}
.invalid {
filter: grayscale(1);
}
.wrapper {
padding: 0 24rpx;
padding: 0 24rpx 40rpx;
box-sizing: border-box;
}
.live-item {
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
border-radius: 20rpx;
flex-wrap: wrap;
background: #fff;
margin: 20rpx 0;
}
.live-cover-img {
position: relative;
flex-shrink: 0;
width: 326rpx;
height: 354rpx;
overflow: hidden;
border-radius: 20rpx 0 0 20rpx;
}
.cover-image {
display: block;
width: 100%;
height: 100%;
}
.swiper {
margin: 20rpx 0;
margin: 20rpx 24rpx;
}
.live-goods {
position: relative;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
padding: 16rpx 24rpx 24rpx;
box-sizing: border-box;
}
.live-goods-name {
height: 84rpx;
min-height: 84rpx;
font-weight: bold;
font-size: 30rpx;
line-height: 1.4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
color: #333;
}
.live-store {
display: flex;
align-items: center;
margin: 20rpx 0;
margin: 12rpx 0 20rpx;
overflow: hidden;
width: calc(100% - 50rpx);
font-size: 24rpx;
color: #999;
}
.live-gif {
width: 20rpx;
height: 20rpx;
}
.live-box {
display: flex;
align-items: center;
@@ -340,66 +398,53 @@ export default {
width: 40rpx;
margin-right: 10rpx;
height: 40rpx;
flex-shrink: 0;
background: linear-gradient(90deg, #ff6b35, #ff9f28, #ffcc03);
}
.live-goods-list {
display: flex;
align-items: center;
justify-content: space-between;
> .live-goods-item {
flex: 1;
}
> .live-goods-item:nth-of-type(1) {
padding-right: 38rpx;
}
gap: 20rpx;
margin-top: auto;
}
.live-icon,
.zan {
position: absolute;
width: 80rpx;
height: 80rpx;
z-index: 9;
.live-goods-item {
flex: 1;
min-width: 0;
overflow: hidden;
border-radius: 20rpx;
}
.tips {
display: flex;
position: absolute;
z-index: 9;
align-items: center;
top: 20rpx;
right: 0;
padding: 4rpx 12rpx 4rpx 0;
left: 20rpx;
padding: 4rpx 12rpx 4rpx 4rpx;
font-size: 24rpx;
border-radius: 100px;
color: #fff;
background: rgba(0, 0, 0, 0.46);
}
.live-icon {
right: 0;
top: 104rpx;
}
.zan {
bottom: 0;
right: 0;
width: 100rpx;
height: 100rpx;
}
.bg {
position: absolute;
bottom: 4rpx;
width: 100%;
left: 0;
right: 0;
bottom: 0;
height: 100rpx;
z-index: 8;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
from(rgba(0, 0, 0, 0.25)),
color-stop(82%, transparent)
);
pointer-events: none;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.25), transparent 82%);
border-bottom-left-radius: 20rpx;
}
.empty-live {
padding: 80rpx 0;
text-align: center;
font-size: 28rpx;
color: #999;
}
</style>

4
pages/promotion/point/detail.vue
View File

@@ -107,6 +107,10 @@ export default {
this.pointDetail = res.data.result;
}
},
closePopupBuy(val) {
this.maskFlag = val;
},
},
};
</script>

125
pages/promotion/point/pointList.vue
View File

@@ -2,6 +2,22 @@
<view class="index">
<user-point />
<view class="index-head">
<!-- #ifdef H5 -->
<view class="list-scroll-content list-scroll-content-h5">
<view class="index-head-navs">
<view
class="index-head-nav"
v-for="(ele, index) in categoryIndexData"
:key="index"
:class="{ 'index-head-nav-active': tabIndex == index }"
@click="setCat(index)"
>
{{ ele.name }}
</view>
</view>
</view>
<!-- #endif -->
<!-- #ifndef H5 -->
<scroll-view scroll-x class="list-scroll-content" :scroll-left="currentLeft" scroll-with-animation>
<view class="index-head-navs">
<view class="index-head-nav" v-for="(ele, index) in categoryIndexData" :key="index"
@@ -10,11 +26,48 @@
</view>
</view>
</scroll-view>
<!-- #endif -->
</view>
<!-- #ifdef H5 -->
<view class="tab-content-h5">
<view class="index-items">
<view
class="index-item"
v-for="(item, key) in categoryIndexData[tabIndex].goods"
:key="item.id || key"
@click="toGoods(item)"
>
<view class="index-item-img">
<image
class="index-item-image"
:src="item.thumbnail"
mode="aspectFit"
lazy-load
></image>
</view>
<view class="index-item-info">
<view class="index-item-title">{{ item.goodsName || item.promotionName || '' }}</view>
<view class="index-item-price">
<view class="point">
<text class="point-num">{{ item.points != null ? item.points : 0 }}</text>
<text class="point-unit">积分</text>
</view>
<text class="tipsMkt">¥{{ unitPrice(item.originalPrice) }}</text>
</view>
</view>
</view>
</view>
<uni-load-more
:status="categoryIndexData[tabIndex].loadStatus"
@clickLoadMore="loadMore"
></uni-load-more>
</view>
<!-- #endif -->
<!-- #ifndef H5 -->
<swiper :current="tabIndex" class="swiper-box" @change="ontabchange" duration="300">
<swiper-item v-for="(nav, index) in categoryIndexData" :key="index" class="swiper-item">
<scroll-view class="scroll-v" enableBackToTop="true" scroll-with-animation scroll-y @scrolltolower="loadMore">
<view class="index-items">
<view class="index-item" v-for="(item, key) in nav.goods" :key="item.id || key" @click="toGoods(item)">
@@ -42,6 +95,7 @@
</scroll-view>
</swiper-item>
</swiper>
<!-- #endif -->
</view>
</template>
@@ -80,11 +134,14 @@ export default {
},
onLoad() {},
async onPullDownRefresh() {
// #ifndef H5
this.categoryIndexData[this.tabIndex].goods = [];
this.categoryIndexData[this.tabIndex].params.pageNumber = 1;
this.categoryIndexData[this.tabIndex].loadStatus = "more";
this.loadGoods();
// #endif
},
// #ifndef H5
onPageScroll(e) {
if (e.scrollTop < -40 && this.flag) {
this.flag = false;
@@ -95,6 +152,7 @@ export default {
this.loadGoods();
}
},
// #endif
watch: {
tabIndex(val) {
if (
@@ -175,7 +233,9 @@ export default {
}, 3000);
}
// #ifndef H5
uni.stopPullDownRefresh();
// #endif
},
setCat(type) {
this.tabIndex = type;
@@ -189,12 +249,21 @@ export default {
}
},
loadMore() {
if (this.categoryIndexData[this.tabIndex].loadStatus == "more") {
this.categoryIndexData[this.tabIndex].params.pageNumber++;
this.loadGoods();
if (this.categoryIndexData[this.tabIndex].loadStatus !== "more") {
return;
}
this.categoryIndexData[this.tabIndex].params.pageNumber++;
this.loadGoods();
},
},
// #ifdef H5
onReachBottom() {
if (this.categoryIndexData[this.tabIndex].loadStatus !== 'more') {
return;
}
this.loadMore();
},
// #endif
};
</script>
<style lang="scss" scoped>
@@ -212,15 +281,21 @@ page {
.index {
height: 100vh;
// #ifdef H5
height: calc(100vh - 44px);
// #endif
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
// #ifdef H5
height: auto;
min-height: 100vh;
overflow: visible;
// #endif
}
.index-head {
background: #fff;
flex-shrink: 0;
}
.list-scroll-content {
@@ -259,14 +334,25 @@ page {
}
}
.swiper-box {
// #ifdef H5
height: calc(100vh - (100rpx + 300rpx + 44px));
// #endif
// #ifdef H5
.list-scroll-content-h5 {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
// #ifndef H5
height: calc(100vh - 400rpx);
// #endif
.index-head-navs {
display: inline-flex;
min-width: 100%;
}
}
.tab-content-h5 {
padding-bottom: 40rpx;
}
// #endif
.swiper-box {
flex: 1;
min-height: 0;
.scroll-v {
height: 100%;
@@ -355,3 +441,12 @@ page {
}
}
</style>
<style lang="scss">
/* #ifdef H5 */
page {
height: auto;
min-height: 100vh;
overflow-y: auto;
}
/* #endif */
</style>

1
pages/promotion/point/user.vue
View File

@@ -35,6 +35,7 @@ export default {
.user-point {
padding: 0 20rpx;
height: 300rpx;
flex-shrink: 0;
background: url("/static/point-bg.png") no-repeat;
background-size: 100%;
display: flex;