liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix：2463 【商城小程序】康养生活—养生食材，商品名称过长，最多显示2行，超出部分用省略号

Browse Source
This commit is contained in:
modendeveloper
2024-10-10 19:40:28 +08:00
parent 1aab9ee691
commit 12f2e42a16
1 changed files with 225 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg_product/views/healthFoods.vue
+225 -132
View File
@@ -1,8 +1,15 @@
<template>
<view class="health-foods">
<view class="v12-justify-center">
<view class="ys-btn v12-mr-3 v12-radius-100 v12-dark-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold" @click="toSanctun">养生圣地</view>
<view class="v12-radius-100 v12-primary v12-white-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold" >养生食材</view>
<view
class="ys-btn v12-mr-3 v12-radius-100 v12-dark-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold"
@click="toSanctun"
>养生圣地</view
>
<view
class="v12-radius-100 v12-primary v12-white-text v12-px-5 v12-py-2 v12-font-28 v12-font-bold"
>养生食材</view
>
</view>
<view class="v12-justify-between v12-align-center v12-mt-5">
<image
@@ -10,64 +17,117 @@
mode="widthFix"
class="icon"
/>
<view class="v12-font-28 v12-secondary-dark-text v12-mr-3">{{ cityName }}</view>
<view class="v12-font-28 v12-secondary-dark-text v12-mr-3">{{
cityName
}}</view>
<view class="flex-1">
<u-search
:showAction="false"
v-model="keyword"
bgColor="#fff"
searchIconColor="#C52733"
@search="search"></u-search>
:showAction="false"
v-model="keyword"
bgColor="#fff"
searchIconColor="#C52733"
@search="search"
></u-search>
</view>
</view>
<swiper class="v12-justify-between swap" autoplay circular next-margin="300rpx" duration="10000" interval="3000" >
<swiper-item v-for="(item, index) in foodItems" :key="index" >
<swiper
class="v12-justify-between swap"
autoplay
circular
next-margin="300rpx"
duration="10000"
interval="3000"
>
<swiper-item v-for="(item, index) in foodItems" :key="index">
<view class="trave-item-wrap v12-mr-3 v12-mt-3">
<view class="trave-item">
<image class="trave-item" mode="widthFix" :src="item.indexImage"></image>
<image
class="trave-item"
mode="widthFix"
:src="item.indexImage"
></image>
</view>
<view class="trave-btn" @click="toDetails(item.id)">
<text>{{ item.name }}</text>
<image :src="webUrl + '/orderIcon/arrow.png'" class="arrow-icon v12-ml-1"></image>
<image
:src="webUrl + '/orderIcon/arrow.png'"
class="arrow-icon v12-ml-1"
></image>
</view>
</view>
</swiper-item>
</swiper>
<view class="v12-justify-center v12-mt-3" v-if="rank.length > 0">
<image class="title-img" :src="webUrl + '/orderIcon/rankTitle.png'" mode="widthFix"></image>
<image
class="title-img"
:src="webUrl + '/orderIcon/rankTitle.png'"
mode="widthFix"
></image>
</view>
<view class="rank-wrap v12-mt-3" v-if="rank.length > 0">
<view class="rank-items-wrap">
<view class="bee-rank" v-for="(k, i) in rank" :key="i">
<image :src="k.backgroundImage" class="bg-img"></image>
<view class="rank-title-wrap">
<view class="rank-title v12-font-34 v12-font-bold">{{ k.title }}</view>
<view class="rank-title v12-font-34 v12-font-bold">{{
k.title
}}</view>
</view>
<view class="v12-px-2">
<view
class="rank-item v12-justify-start v12-align-center v12-mb-4"
v-for="(item, index) in k.products"
<view
class="rank-item v12-justify-start v12-align-center v12-mb-4"
v-for="(item, index) in k.products"
@click="toGoods(item.productId)"
:key="index">
<view class="rank-tag" :class="{'rank2-bg' : index === 1, 'rank3-bg' : index === 2 }">
<view class="rank-2" :class="{'rank2-2-bg' : index === 1, 'rank3-3-bg' : index === 2 }">
<view class="rank-3" :class="{'rank2-4-bg' : index === 1, 'rank3-4-bg' : index === 2 }">
<view class="rank-4" :class="{'rank2-bg' : index === 1, 'rank3-bg' : index === 2 }">{{ index + 1 }}</view>
:key="index"
>
<view
class="rank-tag"
:class="{ 'rank2-bg': index === 1, 'rank3-bg': index === 2 }"
>
<view
class="rank-2"
:class="{
'rank2-2-bg': index === 1,
'rank3-3-bg': index === 2,
}"
>
<view
class="rank-3"
:class="{
'rank2-4-bg': index === 1,
'rank3-4-bg': index === 2,
}"
>
<view
class="rank-4"
:class="{
'rank2-bg': index === 1,
'rank3-bg': index === 2,
}"
>{{ index + 1 }}</view
>
</view>
</view>
</view>
<view class="rank-img">
<image :src="item.productImage" mode="widthFix" class="rank-img"></image>
<image
:src="item.productImage"
mode="widthFix"
class="rank-img"
></image>
</view>
<view class="v12-ml-2">
<view class="v12-font-bold v12-font-24 one-t" style="width: 160rpx">{{ item.productTitle }}</view>
<view
class="v12-font-bold v12-font-24 one-t"
style="width: 160rpx"
>{{ item.productTitle }}</view
>
<view class="v12-font-22 more-t">{{ item.productDesc }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="recommend-wrap v12-mt-3">
<view class="recommend-title v12-px-3">
@@ -75,134 +135,156 @@
<view class="slider"></view>
</view>
<view class="recommends v12-mt-3">
<view class="recommend-item" v-for="(item, index) in recommendItems" :key="index" @click="toGoods(item.productId)">
<view class="recommend-img">
<image :src="item.image"></image>
<view class="name-wrap v12-white-text v12-text-center">{{ item.title }}</view>
<view
class="recommend-item"
v-for="(item, index) in recommendItems"
:key="index"
@click="toGoods(item.productId)"
>
<view>
<view class="recommend-img">
<image :src="item.image"></image>
<view class="name-wrap v12-white-text v12-text-center">{{
item.title
}}</view>
</view>
<view class="v12-px-2 v12-font-bold v12-font-28 more-t">{{
item.productName
}}</view>
</view>
<view class="v12-pa-2 v12-font-bold v12-font-28 more-t">{{ item.productName }}</view>
<view class="v12-justify-between v12-primary-text v12-font-bold v12-px-2 v12-pb-2">
<view
class="v12-justify-between v12-primary-text v12-font-bold v12-px-2 v12-pb-2"
>
<view class="">
<text class="v12-font-32">￥</text>
<text class="v12-font-36 ">{{ item.price }}</text>
<text class="v12-font-36">{{ item.price }}</text>
</view>
<view class="cart-img">
<image class="cart-img" :src="webUrl+'/orderIcon/组 355.png'"></image>
<image
class="cart-img"
:src="webUrl + '/orderIcon/组 355.png'"
></image>
</view>
</view>
</view>
</view>
<view v-if="recommendItems.length === 0">
<view v-if="recommendItems.length === 0">
<view class="no-data-wrap v12-justify-center v12-mt-6">
<image :src="webUrl + '/orderIcon/微信图片_20241009220552.png'" mode="widthFix"></image>
<image
:src="webUrl + '/orderIcon/微信图片_20241009220552.png'"
mode="widthFix"
></image>
</view>
</view>
</view>
</view>
</template>
<script>
import { getRank,getFoods,getRecipe } from '@/api/health'
export default{
import { getRank, getFoods, getRecipe } from "@/api/health";
export default {
data() {
return {
webUrl: this.$VUE_APP_RESOURCES_URL,
foodItems: [],
recommendItems: [],
cityId: '',
cityName: '',
keyword: '',
rank: []
}
cityId: "",
cityName: "",
keyword: "",
rank: [],
};
},
onLoad(opts) {
this.cityId = opts.city
this.cityName = decodeURIComponent(opts.cityName)
this.getRank()
this.getList()
this.getRecipeList()
this.cityId = opts.city;
this.cityName = decodeURIComponent(opts.cityName);
this.getRank();
this.getList();
this.getRecipeList();
},
methods: {
toGoods(id) {
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
path: "/pages/shop/GoodsCon/index",
query: {
id: id
}
})
id: id,
},
});
},
toSanctun() {
uni.navigateTo({
url: '/pkg_product/views/healthSanctum?city=' + this.cityId + '&cityName=' + this.cityName
})
url:
"/pkg_product/views/healthSanctum?city=" +
this.cityId +
"&cityName=" +
this.cityName,
});
},
getRecipeList() {
getRecipe().then(res => {
getRecipe().then((res) => {
// console.log(res);
this.foodItems = res.data.records
})
this.foodItems = res.data.records;
});
},
toDetails(id) {
uni.navigateTo({
url: '/pkg_product/views/healthFoodDetails?id=' + id
})
url: "/pkg_product/views/healthFoodDetails?id=" + id,
});
},
getRank() {
let params = {
goodCityId: this.cityId
}
getRank(params).then(res => {
this.rank = res.data
})
goodCityId: this.cityId,
};
getRank(params).then((res) => {
this.rank = res.data;
});
},
getList() {
const params = {
goodCityId: this.cityId,
keyword: this.keyword,
page: 1,
limit: 9999
}
getFoods(params).then(res => {
this.recommendItems = res.data.records
})
limit: 9999,
};
getFoods(params).then((res) => {
this.recommendItems = res.data.records;
});
},
search() {
this.getList()
}
}
}
this.getList();
},
},
};
</script>
<style lang="less" scoped>
.arrow-icon{
.arrow-icon {
width: 25rpx;
height: 25rpx;
}
.icon{
.icon {
width: 30rpx;
height: 30rpx;
}
.rank2-bg{
background-color: #ECDAD6 !important;
.rank2-bg {
background-color: #ecdad6 !important;
}
.rank3-bg{
background-color: #DAE3F3 !important;
.rank3-bg {
background-color: #dae3f3 !important;
}
.rank3-3-bg{
background-color: #C8C8C8 !important;
.rank3-3-bg {
background-color: #c8c8c8 !important;
}
.rank2-2-bg{
background-color: #D3B9B2 !important;
.rank2-2-bg {
background-color: #d3b9b2 !important;
}
.rank2-4-bg{
background-color: #AD8578 !important;
.rank2-4-bg {
background-color: #ad8578 !important;
}
.rank3-4-bg{
background-color: #A5A5A5 !important;
.rank3-4-bg {
background-color: #a5a5a5 !important;
}
.rank-2{
.rank-2 {
width: 40rpx; /* 宽度 */
height: 45rpx; /* 高度，根据正六边形的几何特性计算 */
background-color: #DDC76F; /* 背景颜色 */
background-color: #ddc76f; /* 背景颜色 */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
@@ -211,7 +293,7 @@ export default{
.rank-3 {
width: 30rpx; /* 宽度 */
height: 35rpx; /* 高度，根据正六边形的几何特性计算 */
background-color: #AD9161; /* 背景颜色 */
background-color: #ad9161; /* 背景颜色 */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
@@ -219,10 +301,10 @@ export default{
font-weight: bold;
color: #333;
}
.rank-4{
.rank-4 {
width: 25rpx; /* 宽度 */
height: 28rpx; /* 高度，根据正六边形的几何特性计算 */
background-color: #FFF3C2; /* 背景颜色 */
background-color: #fff3c2; /* 背景颜色 */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
@@ -230,25 +312,25 @@ export default{
font-weight: bold;
color: #333;
}
.ys-btn{
background: #E2D7C3;
.ys-btn {
background: #e2d7c3;
}
.cart-img{
.cart-img {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
}
.bg-img{
.bg-img {
position: absolute;
height: 100%;
}
.recommends{
.recommends {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 20rpx;
grid-row-gap: 20rpx;
}
.recommend-img{
.recommend-img {
width: 344rpx;
height: 344rpx;
background: #333;
@@ -256,41 +338,48 @@ export default{
position: relative;
overflow: hidden;
}
.name-wrap{
.name-wrap {
position: absolute;
background: rgba(0,0,0,0.2);
background: rgba(0, 0, 0, 0.2);
width: 100%;
padding: 8px 0;
bottom: 0;
}
.recommend-item{
background: #FFFFFF;
.recommend-item {
background: #ffffff;
border-radius: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.recommend-title{
.recommend-title {
position: relative;
width: fit-content;
}
.slider{
.slider {
position: absolute;
width: 100%;
height: 6rpx;
background: linear-gradient(to right, #C52733 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(
to right,
#c52733 0%,
rgba(255, 255, 255, 0) 100%
);
border-radius: 6rpx;
bottom: 5rpx;
}
.rank-wrap{
background: #E2BC8D;
.rank-wrap {
background: #e2bc8d;
border-radius: 20rpx;
}
.rank-tag{
.rank-tag {
width: 50rpx; /* 宽度 */
height: 55rpx; /* 高度，根据正六边形的几何特性计算 */
background-color: #FBEEB7; /* 背景颜色 */
background-color: #fbeeb7; /* 背景颜色 */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
position: absolute;
text-align: center;
color: #FFFFFF;
color: #ffffff;
font-size: 20rpx;
line-height: 55rpx;
top: -22.5rpx;
@@ -298,14 +387,15 @@ export default{
align-items: center;
justify-content: center;
}
.rank-img{
.rank-img {
min-width: 104rpx;
width: 104rpx;
height: 104rpx;
background: #666;
border-radius: 20rpx;
}
.bee-rank, .drug-rank{
.bee-rank,
.drug-rank {
width: 100%;
background: #999;
border-radius: 20rpx;
@@ -313,53 +403,56 @@ export default{
box-sizing: border-box;
position: relative;
}
.rank-title-wrap{
.rank-title-wrap {
height: 140rpx;
display: flex;
align-items: center;
}
.rank-title{
.rank-title {
width: 200rpx;
padding: 10rpx 5rpx;
background: linear-gradient(to right, #FFFFFF 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(
to right,
#ffffff 0%,
rgba(255, 255, 255, 0) 100%
);
z-index: 999;
}
.rank-items-wrap{
.rank-items-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 20rpx;
padding: 20rpx;
box-sizing: border-box;
}
.rank-item{
.rank-item {
width: 100%;
height: 116rpx;
background: #FFFFFF;
background: #ffffff;
border-radius: 20rpx;
padding: 0 10rpx;
box-sizing: border-box;
position: relative;
}
.title-img{
.title-img {
width: 404rpx;
}
.health-foods{
.health-foods {
min-height: 100vh;
background-color: #FAEED8;
background-color: #faeed8;
padding: 20rpx;
box-sizing: border-box ;
box-sizing: border-box;
}
.flex-1{
.flex-1 {
flex: 1;
}
.swap{
.swap {
overflow: auto;
}
.trave-item-wrap{
.trave-item-wrap {
position: relative;
}
.trave-btn{
.trave-btn {
position: absolute;
left: 0;
right: 0;
@@ -367,20 +460,20 @@ export default{
bottom: 30rpx;
text-align: center;
width: 212rpx;
background: rgba(255,255,255,0.9);
background: rgba(255, 255, 255, 0.9);
border-radius: 60rpx;
font-size: 28rpx;
font-weight: bold;
padding: 10rpx 20rpx;
display: flex;
align-items: center;
justify-content:center;
justify-content: center;
}
.trave-item{
.trave-item {
width: 382rpx;
height: 272rpx;
background: rgba(230,178,178,0.39);
background: rgba(230, 178, 178, 0.39);
border-radius: 20rpx;
overflow: hidden;
}
</style>
</style>