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