mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 02:47:25 +08:00
refactor: 重构多个组件以支持 Vue 3 语法和功能
- 将多个组件转换为 `<script setup>` 语法,提升可读性和性能 - 优化状态管理和事件处理逻辑,简化代码结构 - 更新样式和布局以适应新组件结构 - 添加新功能和修复已知问题,提升用户体验
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<div class="flex goods-col">
|
||||
<div class="goods-img">
|
||||
<u-image width="230rpx" mode="aspectFit" border-radius='16' height="230rpx" :src="item.goodsImage || item.thumbnail">
|
||||
<template #loading><u-loading></u-loading></template>
|
||||
<template #loading><u-loading-icon></u-loading-icon></template>
|
||||
</u-image>
|
||||
</div>
|
||||
<div class="goods-detail">
|
||||
@@ -43,43 +43,33 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import commonTpl from '@/components/m-goods-list/common'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lightColor: this.$mainColor,
|
||||
}
|
||||
},
|
||||
mixins: [commonTpl],
|
||||
props: {
|
||||
// 遍历的数据
|
||||
res: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
type:{
|
||||
type:null,
|
||||
default:""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 跳转到商品详情
|
||||
navigateToDetailPage(item) {
|
||||
if(this.type == 'kanJia'){
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/bargain/detail?id=${item.id}`,
|
||||
});
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
|
||||
});
|
||||
},
|
||||
}
|
||||
<script setup lang="ts">
|
||||
import { useGoodsListCommon } from './common'
|
||||
import { goodsFormatPrice } from '@/utils/filters.js'
|
||||
|
||||
const { navigateToDetailPage } = useGoodsListCommon()
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
res?: any[]
|
||||
type?: string | null
|
||||
}>(), {
|
||||
res: () => [],
|
||||
type: ''
|
||||
})
|
||||
|
||||
// 跳转到商品详情(覆盖公共方法,增加砍价跳转)
|
||||
const navigateToDetailPageOverride = (item: any) => {
|
||||
if(props.type == 'kanJia'){
|
||||
uni.navigateTo({
|
||||
url: `/pages/promotion/bargain/detail?id=${item.id}`,
|
||||
})
|
||||
return
|
||||
}
|
||||
navigateToDetailPage({
|
||||
id: item.skuId,
|
||||
goodsId: item.goodsId,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@@ -87,72 +77,72 @@
|
||||
width: 152rpx;
|
||||
height: 108rpx;
|
||||
}
|
||||
.flex-j-sb {
|
||||
.flex-j-sb {
|
||||
width: 100%;
|
||||
}
|
||||
.goods-row {
|
||||
background: #fff;
|
||||
padding: 16rpx;
|
||||
>.goods-col {
|
||||
display: flex;
|
||||
>.goods-img {
|
||||
overflow: hidden;
|
||||
flex: 4;
|
||||
}
|
||||
>.goods-detail {
|
||||
flex: 7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-detail {
|
||||
margin: 0 20rpx;
|
||||
>.title {
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
line-height: 1.5;
|
||||
height: 86rpx;
|
||||
padding: 10rpx 0 0;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.count-config {
|
||||
padding: 5rpx 0;
|
||||
color: #666;
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
letter-spacing:2rpx;
|
||||
padding-left: 10rpx;
|
||||
|
||||
.count-config-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.price-box {
|
||||
margin-top: 10rpx;
|
||||
.goods-row {
|
||||
background: #fff;
|
||||
padding: 16rpx;
|
||||
>.goods-col {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: $font-color-light;
|
||||
|
||||
>.price {
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
color: $main-color;
|
||||
font-weight: bold;
|
||||
|
||||
.price-int {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
>.goods-img {
|
||||
overflow: hidden;
|
||||
flex: 4;
|
||||
}
|
||||
>.goods-detail {
|
||||
flex: 7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-detail {
|
||||
margin: 0 20rpx;
|
||||
>.title {
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
line-height: 1.5;
|
||||
height: 86rpx;
|
||||
padding: 10rpx 0 0;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.count-config {
|
||||
padding: 5rpx 0;
|
||||
color: #666;
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
letter-spacing:2rpx;
|
||||
padding-left: 10rpx;
|
||||
|
||||
.count-config-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.price-box {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: $font-color-light;
|
||||
|
||||
>.price {
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
color: $main-color;
|
||||
font-weight: bold;
|
||||
|
||||
.price-int {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user