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 19:07:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 更新多个页面的样式和结构

Browse Source
This commit is contained in:
pikachu1995@126.com
2026-07-01 16:05:08 +08:00
parent 6654c1de51
commit 5f293d929d
50 changed files with 3337 additions and 1837 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
pages/promotion/joinGroup.vue
View File

@@ -1,24 +1,34 @@
<template>
<view class="wrapper">
<u-navbar :border="false" :title="title">
<!-- 中间 -->
<view class="slot-wrap container-wrap">
<view v-if="search">
<u-search @search="searchFun()" @custom="searchFun()" v-model="params.goodsName"></u-search>
<u-navbar
:border="false"
:fixed="true"
:placeholder="true"
left-icon="arrow-left"
:auto-back="false"
@left-click="back"
>
<template #center>
<view v-if="search" class="search-wrap">
<u-search
@search="searchFun()"
@custom="searchFun()"
v-model="params.goodsName"
></u-search>
</view>
</view>
<!-- 右侧 -->
<text v-else class="nav-title">{{ title }}</text>
</template>
<template #right>
<view style="margin-right: 24rpx;" @click="searchFlag()">
<view v-if="search">取消</view>
<u-icon v-if="!search" size="44rpx" name="search"></u-icon>
<view class="nav-right" @click="searchFlag()">
<text v-if="search">取消</text>
<u-icon v-else size="22" name="search"></u-icon>
</view>
</template>
</u-navbar>
<!-- 顶部栏 -->
<div class='header-wraper'>
<image src="/static/join-buy.png"></image>
</div>
<view class="header-wraper">
<image class="header-banner" mode="aspectFit" src="/static/join-buy.png"></image>
</view>
<!-- 商品栏 -->
<div class="swiper">
<goodsTemplate v-if="goodsList.length" :res="goodsList" />
@@ -56,7 +66,9 @@
mounted() {},
watch: {
search(val) {
val ? (this.title = "") : (this.title = "拼团活动");
if (!val && !this.title) {
this.title = "拼团活动";
}
},
},
onReachBottom() {
@@ -71,6 +83,24 @@
},
methods: {
back() {
if (this.search) {
this.search = false;
this.params.goodsName = "";
this.goodsList = [];
this.params.pageNumber = 1;
this.GET_AssembleGoods();
return;
}
const pages = getCurrentPages();
if (pages.length > 1) {
uni.navigateBack();
} else {
uni.switchTab({
url: "/pages/tabbar/home/index",
});
}
},
loadMore() {
this.params.pageNumber++;
this.GET_AssembleGoods();
@@ -118,16 +148,37 @@
</script>
<style lang="scss" scoped>
.search-wrap {
width: 100%;
padding: 0 20rpx;
box-sizing: border-box;
}
.nav-title {
font-size: 32rpx;
color: #303133;
}
.nav-right {
margin-right: 24rpx;
display: flex;
align-items: center;
font-size: 28rpx;
color: #303133;
}
.header-wraper {
background: url('/static/bg.png');
background: url('/static/bg.png') no-repeat center center;
background-size: cover;
height: 200rpx;
display: flex;
align-items: center;
justify-content: center;
>image{
.header-banner {
width: 188rpx;
height: 60rpx;
display: block;
}
}
</style>

26
pages/promotion/lives.vue
View File

@@ -1,9 +1,19 @@
<template>
<div class="box">
<u-navbar class="navbar">
<view class="slot-wrap">
<u-search placeholder="搜索直播间" @custom="searchLive" @clear="clear" @search="searchLive" v-model="keyword"></u-search>
</view>
<u-navbar
class="navbar"
:border="false"
:fixed="true"
:placeholder="true"
left-icon="arrow-left"
:auto-back="false"
@left-click="back"
>
<template #center>
<view class="slot-wrap">
<u-search placeholder="搜索直播间" @custom="searchLive" @clear="clear" @search="searchLive" v-model="keyword"></u-search>
</view>
</template>
</u-navbar>
<!-- 轮播图 -->
<u-swiper @click="clickSwiper" class="swiper" keyName="image" :list="swiperImg">
@@ -120,6 +130,14 @@ export default {
this.getLives();
},
methods: {
back() {
uni.navigateBack({
delta: 1,
fail: () => {
uni.switchTab({ url: "/pages/tabbar/home/index" });
},
});
},
/**
* 点击标签栏切换
*/

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

@@ -1,6 +1,12 @@
<template>
<div class="page">
<u-navbar :border="false" title="积分商品"></u-navbar>
<u-navbar
:border="false"
title="积分商品"
:fixed="true"
:placeholder="true"
:auto-back="true"
></u-navbar>
<div class="wrapper">
<!-- 积分商品列表 -->

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

@@ -17,15 +17,23 @@
<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="key" @click="toGoods(item)">
<view class="index-item" v-for="(item, key) in nav.goods" :key="item.id || key" @click="toGoods(item)">
<view class="index-item-img">
<u-image :src="item.thumbnail" mode="aspectFit">
<template #loading><u-loading></u-loading></template>
</u-image>
<view class="index-item-title">{{ item.goodsName }}</view>
<view class="index-item-price flex flex-a-c flex-j-sb">
<div class="point"><span>{{ item.points }}</span>积分</div>
<span class="tipsMkt">¥{{unitPrice(item.originalPrice) }}</span>
<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>
@@ -194,10 +202,11 @@ page {
height: 100%;
}
.tipsMkt {
flex-shrink: 0;
color: #c0c4cc;
font-size: 24rpx !important;
text-decoration: line-through;
margin-right: 20rpx !important;
margin-left: 12rpx;
}
@@ -265,61 +274,84 @@ page {
}
.index-items {
padding-top: 10rpx;
margin-top: 20rpx;
padding-left: 20rpx;
padding: 20rpx 20rpx 0;
background-color: #f7f7f7;
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: center;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
box-sizing: border-box;
}
.index-item {
width: 346rpx;
// height: 2100rpx;
width: calc(50% - 9rpx);
background-color: #fff;
margin: 0 18rpx 20rpx 0;
margin-bottom: 20rpx;
border-radius: 16rpx;
box-sizing: border-box;
overflow: hidden;
height: auto;
padding-bottom: 20rpx;
display: flex;
flex-direction: column;
}
.index-item-img {
::v-deep .u-image {
width: 346rpx !important;
height: 320rpx !important;
border-radius: 10rpx !important;
}
width: 100%;
height: 320rpx;
overflow: hidden;
flex-shrink: 0;
}
.index-item-image {
width: 100%;
height: 320rpx;
display: block;
}
.index-item-info {
position: relative;
z-index: 1;
flex: 1;
background-color: #fff;
}
.index-item-title {
font-size: 26rpx;
color: #333333;
padding: 0 20rpx;
height: 80rpx;
box-sizing: border-box;
max-height: 3em;
color: #333;
padding: 16rpx 20rpx 0;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.index-item-price {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 28rpx;
overflow: hidden;
color: $main-color;
padding: 20rpx 0 0 20rpx;
>.point{
>span{
font-size: 42rpx;
font-weight: bold;
margin-right:10rpx;
}
color: #ff3c2a;
padding: 12rpx 20rpx 20rpx;
.point {
flex: 1;
min-width: 0;
display: flex;
align-items: baseline;
overflow: hidden;
}
.point-num {
font-size: 42rpx;
font-weight: bold;
color: #ff3c2a;
line-height: 1;
}
.point-unit {
margin-left: 6rpx;
font-size: 24rpx;
color: #ff3c2a;
flex-shrink: 0;
}
}
</style>

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

@@ -37,6 +37,9 @@ export default {
height: 300rpx;
background: url("/static/point-bg.png") no-repeat;
background-size: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.point {
font-size: 40rpx;
@@ -48,13 +51,17 @@ export default {
padding: 20rpx 0;
}
.point-wrapper {
padding-top: 80rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.whether-point {
color: #fff;
margin-left: 30rpx;
margin-top: 20rpx;
font-size: 36rpx;
font-weight: bold;
text-align: center;
}
</style>

28
pages/promotion/seckill.vue
View File

@@ -1,8 +1,15 @@
<template>
<view class="sale">
<u-navbar title='限时抢购'></u-navbar>
<u-navbar
title="限时抢购"
:fixed="true"
:placeholder="true"
left-icon="arrow-left"
:auto-back="false"
@left-click="back"
></u-navbar>
<view class="header-wraper">
<image mode="widthFix" src="/static/seckill.png"></image>
<image class="header-banner" mode="aspectFit" src="/static/seckill.png"></image>
</view>
<scroll-view scroll-x>
<view class="index-navs">
@@ -86,6 +93,16 @@
this._setTimeInterval && clearInterval(this._setTimeInterval);
},
methods: {
back() {
uni.navigateBack({
delta: 1,
fail: () => {
uni.switchTab({
url: "/pages/tabbar/home/index",
});
},
});
},
/**
* 获取时间线商品
*/
@@ -168,14 +185,17 @@
}
.header-wraper {
background: url('/static/bg.png');
background: url('/static/bg.png') no-repeat center center;
background-size: cover;
height: 200rpx;
display: flex;
align-items: center;
justify-content: center;
>image{
.header-banner {
width: 300rpx;
height: 100rpx;
display: block;
}
}