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

refactor: 移动端升级 Vue3 + uView Plus

Browse Source 
将 lilishop-uniapp 从 Vue2/uView 1.6 迁移到 Vue3/uview-plus，优先支持 H5/微商城与微信小程序；移除 vendored uview-ui，改用 npm 依赖、Vuex4 与迁移脚本/补丁，并补充 VUE3_MIGRATION.md 回归清单。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
pikachu1995@126.com
2026-06-30 18:50:38 +08:00
parent c290c7a329
commit dc2bef455a
299 changed files with 5507 additions and 43811 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
pages/mine/myCollect.vue
View File

@@ -1,60 +1,96 @@
<template>
<view class="content">
<u-navbar>
<u-tabs :active-color="lightColor" class="slot-wrap" :list="navList" count="count" :is-scroll="true" :current="tabCurrentIndex" @change="tabClick"></u-tabs>
<u-navbar
:fixed="true"
:placeholder="true"
:border="false"
left-icon=""
title=""
>
<template #center>
<view class="slot-wrap">
<u-tabs
:active-color="lightColor"
class="collect-tabs"
:list="navList"
:is-scroll="true"
:current="tabCurrentIndex"
@change="tabClick"
></u-tabs>
</view>
</template>
</u-navbar>
<view class="swiper-box">
<view class="collect-body">
<!-- 显示商品栏 -->
<view v-if="tabCurrentIndex == 0" class="tab-content">
<scroll-view class="list-scroll-content" scroll-y>
<!-- 空白页 -->
<u-empty style="margin-top: 40rpx" text="暂无收藏商品数据" mode="favor" v-if="goodsEmpty"></u-empty>
<!-- 商品展示数据 -->
<u-swipe-action @open="openLeftChange(item, index, 'goods')" :show="item.selected" btn-width="180"
:options="LeftOptions" v-else v-for="(item, index) in goodList"
@click="clickGoodsSwiperAction(item, index)" :index="index" :key="index">
<view class="goods" @click="goGoodsDetail(item)">
<u-image width="131rpx" height="131rpx" :src="item.image" mode="aspectFit">
<u-loading slot="loading"></u-loading>
</u-image>
<view class="goods-intro">
<view>{{ item.goodsName }}</view>
<view class="goods-sn">{{ item.goods_sn }}</view>
<view>￥{{ item.price | unitPrice }}</view>
</view>
</view>
</u-swipe-action>
<template v-else>
<u-swipe-action
v-for="(item, index) in goodList"
:key="index"
class="collect-swipe"
>
<u-swipe-action-item
@open="openLeftChange(item, 'goods')"
:show="item.selected"
:options="LeftOptions"
@click="clickGoodsSwiperAction(item, index)"
:name="index"
>
<view class="goods" @click="goGoodsDetail(item)">
<u-image width="131rpx" height="131rpx" :src="item.image" mode="aspectFit">
<template #loading><u-loading></u-loading></template>
</u-image>
<view class="goods-intro">
<view class="goods-name">{{ item.goodsName }}</view>
<view class="goods-sn">{{ item.goods_sn }}</view>
<view class="goods-price">￥{{ unitPrice(item.price) }}</view>
</view>
</view>
</u-swipe-action-item>
</u-swipe-action>
</template>
</scroll-view>
</view>
<!-- 显示收藏的店铺栏 -->
<view v-else class="tab-content">
<scroll-view class="list-scroll-content" scroll-y>
<!-- 空白页 -->
<u-empty style="margin-top: 40rpx" text="暂无收藏店铺数据" mode="favor" v-if="storeEmpty"></u-empty>
<!-- 店铺展示数据 -->
<u-swipe-action @open="openLeftChange(item, 'store')" :show="item.selected" btn-width="180"
:options="LeftOptions" v-else v-for="(item, index) in storeList" :key="index"
@click="clickStoreSwiperAction(item)">
<view class="store" @click="goStoreMainPage(item.id)">
<view class="intro">
<view class="store-logo">
<u-image width="102rpx" height="102rpx" :src="item.storeLogo" :alt="item.storeName"
mode="aspectFit">
<u-loading slot="loading"></u-loading>
</u-image>
<template v-else>
<u-swipe-action
v-for="(item, index) in storeList"
:key="index"
class="collect-swipe"
>
<u-swipe-action-item
@open="openLeftChange(item, 'store')"
:show="item.selected"
:options="LeftOptions"
@click="clickStoreSwiperAction(item)"
:name="index"
>
<view class="store" @click="goStoreMainPage(item.id)">
<view class="intro">
<view class="store-logo">
<u-image width="102rpx" height="102rpx" :src="item.storeLogo" :alt="item.storeName"
mode="aspectFit">
<template #loading><u-loading></u-loading></template>
</u-image>
</view>
<view class="store-name">
<view>{{ item.storeName }}</view>
<u-tag size="mini" type="error" :color="$mainColor" v-if="item.selfOperated"
text="自营" mode="plain" shape="circle" />
</view>
<view class="store-collect">
<view>进店逛逛</view>
</view>
</view>
</view>
<view class="store-name">
<view>{{ item.storeName }}</view>
<u-tag size="mini" type="error" :color="$mainColor" v-if="item.selfOperated"
text="自营" mode="plain" shape="circle" />
</view>
<view class="store-collect">
<view>进店逛逛</view>
</view>
</view>
</view>
</u-swipe-action>
</u-swipe-action-item>
</u-swipe-action>
</template>
</scroll-view>
</view>
</view>
@@ -138,16 +174,10 @@
* 打开商品左侧取消收藏
*/
openLeftChange(val, type) {
const {
goodList,
storeList
} = this;
let way;
type == "goods" ? (way = goodList) : (way = storeList);
const way = type === "goods" ? this.goodList : this.storeList;
way.forEach((item) => {
this.$set(item, "selected", false);
item.selected = false;
});
this.$set(val, "selected", false);
val.selected = true;
},
@@ -280,19 +310,30 @@
height: 100%;
}
.slot-wrap{
flex: 1;
display: flex;
justify-content: center;
padding-right: 72rpx;
}
.content {
width: 100%;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.slot-wrap {
width: 100%;
display: flex;
justify-content: center;
}
.collect-tabs {
width: 100%;
}
.swiper-box {
overflow-y: auto;
.collect-body {
flex: 1;
min-height: 0;
}
.tab-content {
height: 100%;
}
.list-scroll-content {
@@ -300,63 +341,52 @@
width: 100%;
}
::v-deep .u-swipe-content {
.collect-swipe,
:deep(.u-swipe-action),
:deep(.u-swipe-action-item),
:deep(.u-swipe-action-item__content) {
width: 100%;
}
:deep(.u-swipe-action-item__content) {
overflow: hidden;
}
.goods {
background-color: #fff;
border-bottom: 1px solid $border-color-light;
height: 190rpx;
min-height: 190rpx;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 30rpx 20rpx;
margin-top: 20rpx;
image {
width: 131rpx;
height: 131rpx;
border-radius: 10rpx;
}
width: 100%;
.goods-intro {
flex: 1;
min-width: 0;
font-size: $font-base;
line-height: 48rpx;
margin-left: 30rpx;
view:nth-child(1) {
.goods-name {
line-height: 1.4em;
font-size: 24rpx;
max-height: 2.8em; //height是line-height的整数倍，防止文字显示不全
max-height: 2.8em;
overflow: hidden;
color: #666;
}
view:nth-child(2) {
.goods-sn {
color: #cccccc;
font-size: 24rpx;
}
view:nth-child(3) {
.goods-price {
color: $light-color;
}
}
button {
color: $main-color;
height: 50rpx;
width: 120rpx;
font-size: $font-sm;
padding: 0;
line-height: 50rpx;
background-color: #ffffff;
margin-top: 80rpx;
&::after {
border-color: $main-color;
}
}
}
.store {
@@ -364,90 +394,42 @@
border: 1px solid $border-color-light;
border-radius: 16rpx;
margin: 20rpx 10rpx;
width: calc(100% - 20rpx);
box-sizing: border-box;
.intro {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx 0 40rpx;
height: 170rpx;
min-height: 170rpx;
.store-logo {
width: 102rpx;
height: 102rpx;
border-radius: 50%;
overflow: hidden;
image {
width: 100%;
height: 100%;
border-radius: 50%;
}
flex-shrink: 0;
}
.store-name {
flex: 1;
min-width: 0;
margin-left: 30rpx;
line-height: 2em;
:first-child {
font-size: $font-base;
}
:last-child {
font-size: $font-sm;
color: #999;
}
}
.store-collect {
flex-shrink: 0;
border-left: 1px solid $border-color-light;
padding-left: 20rpx;
text-align: center;
:last-child {
color: #999;
font-size: $font-sm;
}
}
}
}
.navbar {
display: flex;
height: 40px;
padding: 0 5px;
background: #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
position: relative;
z-index: 10;
.nav-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 26rpx;
text {
position: relative;
}
text.current {
color: $light-color;
font-weight: bold;
font-size: 28rpx;
&::after {
content: "";
position: absolute;
left: 20rpx;
bottom: -10rpx;
width: 30rpx;
height: 0;
border-bottom: 2px solid $light-color;
}
color: #999;
font-size: $font-sm;
}
}
}