对接优惠券弹窗

common/api/member.js

@@ -113,3 +113,30 @@ export const APIshopUsercode = (data) => {
 		data: data
 	})
 }
+
+// 获取当前店铺会员信息
+export const getCouponShops = (data) => {
+	return request({
+		url: urlMarket + '/user/coupon/shops',
+		method: 'get',
+		data: data
+	})
+}
+
+// 优惠券弹窗
+export const getCouponPopup = (data) => {
+	return request({
+		url: urlMarket + '/user/coupon/popUp',
+		method: 'get',
+		data: data
+	})
+}
+
+// 优惠券弹窗领取
+export const receivePopUp = (data) => {
+	return request({
+		url: urlMarket + '/user/coupon/receivePopUp',
+		method: 'get',
+		data: data
+	})
+}

components/coupon-modal.vue

@@ -0,0 +1,318 @@
+<!-- 首页优惠券弹窗 -->
+<template>
+	<up-popup :show="show" bgColor="transparent">
+		<view class="container">
+			<view class="content">
+				<image class="bg" src="https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/6520f3cfae594480aa2e612ff4ad121c.png" mode="widthFix"></image>
+				<view class="swiper-wrap">
+					<swiper class="swiper" @change="swiperChange">
+						<swiper-item class="swiper-item" v-for="(item, index) in couponList" :key="index">
+							<view class="item" v-for="val in item" :key="val.id">
+								<image
+									class="item-bg"
+									src="https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/105b29907c274f9e84e14b9ddb867356.png"
+									mode="aspectFill"
+								></image>
+								<view class="info-wrap">
+									<view class="info">
+										<view class="name name1" v-if="val.couponType == 1">
+											<text class="t1">￥{{ val.discountAmount }}</text>
+											<text class="t2">满{{ val.fullAmount }}可用</text>
+										</view>
+										<view class="name name2" v-if="val.couponType == 2">
+											<text class="t1">商品兑换{{ val.discountNum }}件</text>
+											<text class="t2">满{{ val.fullAmount }}可用</text>
+										</view>
+										<view class="name name2" v-if="val.couponType == 3">
+											<text class="t1">{{ val.discountRate }}折券</text>
+											<text class="t2">满{{ val.fullAmount }}可用</text>
+										</view>
+										<view class="name name2" v-if="val.couponType == 4">
+											<text class="t1">第二件半价券</text>
+											<text class="t2">满{{ val.fullAmount }}可用</text>
+										</view>
+										<view class="name name2" v-if="val.couponType == 6">
+											<text class="t1">买一送一券</text>
+											<text class="t2">满{{ val.fullAmount }}可用</text>
+										</view>
+										<view class="title">
+											{{ val.title }}
+										</view>
+										<view class="time">
+											<view class="row">
+												<text class="t">
+													有效期至：{{ dayjs(item.validStartTime || new Date()).format('YYYY.M.D') }} -
+													{{ dayjs(item.validEndTime || new Date()).format('YYYY.M.D') }}
+												</text>
+											</view>
+										</view>
+									</view>
+									<view class="lq-btn">
+										<view class="lb" @click="getHandle">
+											<text class="t">立即</text>
+											<text class="t">领取</text>
+										</view>
+									</view>
+								</view>
+							</view>
+						</swiper-item>
+					</swiper>
+					<view class="dot-wrap">
+						<view class="page-btn">
+							<up-icon name="arrow-left" :color="swiperIndex == 0 ? '#fa746a' : '#f6171b'" size="16"></up-icon>
+						</view>
+						<view class="page-wrap">
+							<text class="t" :class="{ active: swiperIndex == index }" v-for="(item, index) in couponList.length" :key="index">{{ item }}</text>
+						</view>
+						<view class="page-btn">
+							<up-icon name="arrow-right" :color="swiperIndex == couponList.length - 1 ? '#fa746a' : '#f6171b'" size="16"></up-icon>
+						</view>
+					</view>
+				</view>
+				<view class="btn-wrap" @click="getHandle">
+					<image class="btn-img" src="https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/a7ea3211baf84cc8b77171d4f88c7f9e.png" mode="widthFix"></image>
+					<text class="t">全部领取（{{ couponCount }}张）</text>
+				</view>
+				<view class="close" @click="getHandle">
+					<up-icon name="close-circle" size="34" color="#fff"></up-icon>
+				</view>
+			</view>
+		</view>
+	</up-popup>
+</template>
+
+<script setup>
+import _ from 'lodash';
+import dayjs from 'dayjs';
+import { onMounted, ref } from 'vue';
+import { getCouponPopup, receivePopUp } from '@/common/api/member.js';
+
+const couponCount = ref(0);
+const swiperIndex = ref(0);
+const couponList = ref([]);
+const show = ref(false);
+
+const props = defineProps({
+	getMode: {
+		type: String,
+		default: 'eat'
+	}
+});
+
+// 轮播图滑动
+function swiperChange(e) {
+	swiperIndex.value = e.detail.current;
+}
+
+// 优惠券弹窗
+async function getCouponPopupAjax() {
+	try {
+		const res = await getCouponPopup({ getMode: props.getMode });
+		if (res.length) {
+			show.value = true;
+			couponCount.value = res.length;
+			couponList.value = _.chunk(res, 3);
+		}
+	} catch (error) {
+		console.log(error);
+	}
+}
+
+// 领取
+async function getHandle() {
+	try {
+		uni.showLoading({
+			title: '领取中...',
+			mask: true
+		});
+		const res = await receivePopUp({
+			getMode: props.getMode
+		});
+		show.value = false;
+		uni.showToast({
+			title: '已领取，请在我的优惠券中查看',
+			icon: 'none'
+		});
+	} catch (err) {
+		console.log(err);
+	}
+	uni.hideLoading();
+}
+
+onMounted(() => {
+	getCouponPopupAjax();
+});
+</script>
+
+<style scoped lang="scss">
+.container {
+	width: 100vw;
+	height: 100vh;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding-top: 10vh;
+	.content {
+		width: 94vw;
+		position: relative;
+		padding-left: 24upx;
+		.close {
+			position: absolute;
+			left: 50%;
+			bottom: -100upx;
+			transform: translateX(-50%);
+		}
+		.bg {
+			width: 100%;
+			height: 100%;
+		}
+		.swiper-wrap {
+			width: 64%;
+			height: 70%;
+			position: absolute;
+			left: 18%;
+			top: 96upx;
+			.swiper {
+				width: 100%;
+				height: 90%;
+				background-color: #fff;
+				.swiper-item {
+					width: 100%;
+					height: 100%;
+					display: grid;
+					grid-template-columns: 1fr;
+					grid-template-rows: repeat(3, 1fr);
+					grid-column-gap: 0;
+					grid-row-gap: 12upx;
+					.item {
+						background-color: #e20410;
+						border-radius: 12upx;
+						padding: 12upx;
+						position: relative;
+						.item-bg {
+							width: 100%;
+							height: 100%;
+						}
+						.info-wrap {
+							width: 100%;
+							height: 100%;
+							padding: 20upx;
+							position: absolute;
+							top: 0;
+							left: 0;
+							display: flex;
+							align-items: center;
+							.info {
+								flex: 1;
+								display: flex;
+								flex-direction: column;
+								justify-content: space-between;
+								gap: 8upx;
+								.name {
+									font-size: 32upx;
+									font-weight: bold;
+									color: #fff;
+									.t1 {
+										font-size: 32upx;
+										font-weight: bold;
+										color: #fff;
+										margin-right: 8upx;
+									}
+									.t2 {
+										font-size: 20upx;
+										color: #fff;
+									}
+								}
+								.title {
+									font-size: 28upx;
+									color: #fff;
+									font-weight: bold;
+								}
+								.time {
+									display: flex;
+									.row {
+										height: 30upx;
+										padding: 0 8upx;
+										background-color: #fff;
+										border-radius: 8upx;
+										display: flex;
+										align-items: center;
+										.t {
+											font-size: 10px;
+											color: #c50914;
+										}
+									}
+								}
+							}
+							.lq-btn {
+								.lb {
+									$size: 80upx;
+									width: $size;
+									height: $size;
+									display: flex;
+									flex-direction: column;
+									align-items: center;
+									justify-content: center;
+									border-radius: 50%;
+									background-color: #fe413d;
+									.t {
+										color: #fff;
+										font-size: 20upx;
+										font-weight: bold;
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+			.dot-wrap {
+				width: 100%;
+				height: 10%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 20upx;
+				.page-wrap {
+					display: flex;
+					align-items: center;
+					gap: 20upx;
+					&.disabled {
+						.t {
+							color: #fa746a;
+						}
+					}
+					.t {
+						font-size: 28upx;
+						color: #fa746a;
+						&.active {
+							color: #f6171b;
+							font-weight: bold;
+						}
+					}
+				}
+			}
+		}
+		.btn-wrap {
+			width: 60%;
+			position: absolute;
+			left: 20%;
+			bottom: 38upx;
+			.btn-img {
+				width: 100%;
+			}
+			.t {
+				font-size: 42upx;
+				font-weight: bold;
+				color: #b43a14;
+				position: absolute;
+				top: 44%;
+				left: 54%;
+				white-space: nowrap;
+				transform: translate(-50%, -50%);
+			}
+		}
+	}
+}
+</style>

framework/0-conf.js

@@ -5,16 +5,16 @@ const proxyApi = "/api"
 // #endif
 
 // #ifdef MP-WEIXIN || APP || MP-ALIPAY
-const proxyApi = 'http://192.168.0.71' // 调试地址
+const proxyApi = 'http://192.168.1.42' // 调试地址
-const proxyApiwws = 'ws://192.168.0.71:2348' // 调试地址 
+const proxyApiwws = 'ws://192.168.1.42:2348' // 调试地址 
 // 测试
 // const proxyApi = "https://fv901fw8033.vicp.fun"
 // const proxyApiwws = 'wss://sockets.sxczgkj.com/wss'
 // #endif
 
 // #ifdef H5
-const baseUrl = debug ? proxyApi : "http://192.168.0.71"
+const baseUrl = debug ? proxyApi : "http://192.168.1.42"
-const baseUrlwws = 'ws://192.168.0.71:2348'
+const baseUrlwws = 'ws://192.168.1.42:2348'
 // #endif
 
 // #ifdef APP || MP-WEIXIN || MP-ALIPAY

package.json

@@ -3,6 +3,7 @@
     "@dcloudio/uni-app": "^2.0.2-4040520250103001",
     "dayjs": "^1.11.13",
     "jsbarcode": "^3.11.6",
+    "lodash": "^4.17.21",
     "pinia": "^2.3.1",
     "pinia-plugin-unistorage": "^0.1.2"
   }

pages/user/components/coupon-icon.vue

@@ -0,0 +1,127 @@
+<!-- 优惠券图标 -->
+<template>
+	<view class="container">
+		<view class="icon icon1" v-if="props.item.type == 1">
+			<view class="top">
+				<text class="i">￥</text>
+				<text class="num">{{ props.item.discountAmount }}</text>
+			</view>
+			<view class="intro">
+				<text class="t">满{{ props.item.fullAmount }}可用</text>
+			</view>
+		</view>
+		<view class="icon icon2" v-if="props.item.type == 2">
+			<view class="top">
+				<text class="i">{{ props.item.discountNum }}件</text>
+				<text class="num">商品兑换</text>
+			</view>
+			<view class="intro">
+				<text class="t">满{{ props.item.fullAmount }}可用</text>
+			</view>
+		</view>
+		<view class="icon icon3" v-if="props.item.type == 3">
+			<view class="top">
+				<text class="num">{{ props.item.discountRate }}折</text>
+			</view>
+			<view class="intro">
+				<text class="t">满{{ props.item.fullAmount }}可用</text>
+			</view>
+		</view>
+		<view class="icon icon2" v-if="props.item.type == 4">
+			<view class="top">
+				<text class="i">第二件</text>
+				<text class="num">半价券</text>
+			</view>
+		</view>
+		<view class="icon icon2" v-if="props.item.type == 6">
+			<view class="top">
+				<text class="i">买一送</text>
+				<text class="num">一券</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+const props = defineProps({
+	item: {
+		type: Object,
+		default: {}
+	}
+});
+</script>
+
+<style scoped lang="scss">
+$color: #ff1c1c;
+.container {
+	width: 100%;
+	height: 100%;
+	.icon {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		&.icon1 {
+			.top {
+				.i {
+					color: $color;
+					font-size: 24upx;
+					font-weight: bold;
+				}
+				.num {
+					color: $color;
+					font-size: 72upx;
+					font-weight: bold;
+				}
+			}
+		}
+		&.icon2 {
+			.top {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				.i {
+					color: $color;
+					font-size: 34upx;
+					font-weight: bold;
+				}
+				.num {
+					color: $color;
+					font-size: 34upx;
+					font-weight: bold;
+				}
+			}
+		}
+		&.icon3 {
+			.top {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				.i {
+					color: $color;
+					font-size: 34upx;
+					font-weight: bold;
+				}
+				.num {
+					color: $color;
+					font-size: 52upx;
+					font-weight: bold;
+				}
+			}
+		}
+
+		.intro {
+			display: flex;
+			justify-content: center;
+			.t {
+				font-size: 22upx;
+				color: #999;
+			}
+		}
+	}
+}
+</style>

pages/user/coupon.vue

@@ -12,7 +12,7 @@
 					<view class="icon right">
 						<u-icon name="arrow-right" size="16"></u-icon>
 					</view>
-					<input v-model="querForm.shopId" class="ipt right" type="text" placeholder="请选择" disabled />
+					<input v-model="querForm.shopName" class="ipt right" type="text" placeholder="请选择" disabled />
 				</view>
 			</view>
 			<view class="status-wrap">
@@ -30,23 +30,26 @@
 		<view class="list-wrap">
 			<view class="item" v-for="item in list.data" :key="item.id">
 				<view class="top">
-					<view class="icon"></view>
+					<view class="icon">
+						<couponIcon :item="item" />
+					</view>
 					<view class="info">
 						<view class="view name">
 							<text class="t">{{ item.name }}</text>
 						</view>
 						<view class="view time">
-							<text class="t">{{ dayjs(item.effectStartTime).format('YYYY.MM.DD') }} - {{ dayjs(item.effectEndTime).format('YYYY.MM.DD') }}</text>
+							<text class="t">{{ dayjs(item.effectStartTime).format('YYYY.M.D') }} - {{ dayjs(item.effectEndTime).format('YYYY.M.D') }}</text>
 						</view>
 					</view>
-					<view class="btn">
+					<view class="btn" v-if="item.status == 0" @click="toUseHandle(item)">
 						<text class="t">去使用</text>
 					</view>
+					<view class="btn disabled" v-else>
+						<text class="t">{{ statusList.find((val) => val.value == item.status).label }}</text>
+					</view>
 				</view>
 				<view class="btm">
-					<view class="left">
+					<view class="left">1、可适用门店：{{ item.useShops }} 2、可适用商品：{{ item.foods }}3、可使用类型：{{ convertValuesToLabels(item.useType) }}</view>
-						<text class="t">1、可适用门店：{{ item.useShops }} 2、可适用商品：{{ item.foods }}3、可使用类型：{{ convertValuesToLabels(item.useType) }}</text>
-					</view>
 					<view class="right" @click="showDetailHandle(item)">
 						<text class="t">查看详情</text>
 					</view>
@@ -59,18 +62,10 @@
 				<view class="title">
 					<text class="t">店铺列表</text>
 				</view>
-				<scroll-view class="popup-list" direction="vertical">
+				<scroll-view class="popup-list" direction="vertical" @scrollend="scrollBottom">
-					<view class="item">
+					<view class="item" v-for="item in shopList" :key="item.shopId" @click="selectShopHandle(item)">
-						<text class="t">我是店铺1111</text>
+						<text class="t">{{ item.shopName }}</text>
-					</view>
+						<text class="intro">地址：{{ item.shopAddress }}</text>
-					<view class="item">
-						<text class="t">我是店铺2222</text>
-					</view>
-					<view class="item">
-						<text class="t">我是店铺3333</text>
-					</view>
-					<view class="item">
-						<text class="t">我是店铺4444</text>
 					</view>
 					<u-loadmore status="nomore"></u-loadmore>
 				</scroll-view>
@@ -83,19 +78,7 @@
 				</view>
 				<scroll-view class="popup-list" direction="vertical">
 					<view class="ul">
-						<view class="li">1、可适用门店：{{ selectListItem.useShops }}</view>
+						<view class="li" v-for="(item, index) in selectListItemDetails" :key="index">{{ index + 1 }}、{{ item }}</view>
-						<view class="li">2、可适用商品：{{ selectListItem.foods }}</view>
-						<view class="li" v-if="selectListItem.useType">3、可使用类型：{{ convertValuesToLabels(selectListItem.useType) }}</view>
-						<view class="li">
-							4、可用时间段：
-							<text class="t" v-if="selectListItem.useTimeType == 'all'">全段时间可用</text>
-							<text class="t" v-else>
-								{{ selectListItem.useStartTime - selectListItem.useEndTime }}
-							</text>
-						</view>
-						<view class="li">5、限量规则：{{ selectListItem.getLimit == -10086 ? '无限' : `${selectListItem.getLimit}张` }}</view>
-						<view class="li">6、同享规则：{{ selectListItem.vipPriceShare ? '与限时折扣同享、与会员价同享' : '不与限时折扣同享、与会员价同享' }}</view>
-						<view class="li">7、其它说明：{{ selectListItem.ruleDetails || '无' }}</view>
 					</view>
 				</scroll-view>
 			</view>
@@ -107,13 +90,15 @@
 import dayjs from 'dayjs';
 import { ref, reactive, onMounted } from 'vue';
 import { onLoad, onReady, onShow, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
-import { APIcouponfindByUserId, APIfindCoupon } from '@/common/api/member.js';
+import { APIcouponfindByUserId, APIfindCoupon, getCouponShops } from '@/common/api/member.js';
+import couponIcon from './components/coupon-icon.vue';
 
 const show = ref(false);
 
 const querForm = ref({
 	searchValue: '',
 	shopId: '',
+	shopName: '',
 	statusActiveIndex: 0
 });
 
@@ -142,26 +127,41 @@ const statusList = ref([
 const list = reactive({
 	page: 1,
 	size: 10,
-	status: 'nomore',
+	status: 'loading',
 	data: []
 });
 
 onReachBottom(() => {
-	console.log('到底了');
+	if (list.status != 'nomore') {
-	list.page++;
+		list.page++;
-	getCouponList();
+		getCouponList();
+	}
 });
 
 const showDetail = ref(false);
 const selectListItem = ref('');
+const selectListItemDetails = ref([]);
 function showDetailHandle(item) {
 	showDetail.value = true;
-	selectListItem.value = item;
+	selectListItemDetails.value = [
+		`可适用门店：${item.useShops}`,
+		`可适用商品：${item.foods}`,
+		`可使用类型：${convertValuesToLabels(item.useType)}`,
+		`可用时间段：${item.useTimeType == 'all' ? '全段时间可用' : `${item.useStartTime} - ${item.useEndTime}`}`,
+		`限量规则：${item.getLimit == -10086 ? '无限' : `${item.getLimit}张`}`,
+		`同享规则：${item.vipPriceShare ? '与限时折扣同享、与会员价同享' : '不与限时折扣同享、与会员价同享'}`,
+		`其它说明：${item.ruleDetails || '无'}`
+	];
+
+	if (item.type == 3) {
+		selectListItemDetails.value.unshift(`最高抵扣${item.discountAmount}元`);
+	}
 }
 
 // 搜索
 function searchHandle() {
 	list.page = 1;
+	list.status = 'loading';
 	getCouponList();
 }
 
@@ -169,9 +169,19 @@ function searchHandle() {
 function tabChange(index) {
 	querForm.value.statusActiveIndex = index;
 	list.page = 1;
+	list.status = 'loading';
 	getCouponList();
 }
 
+// 去使用
+function toUseHandle(item) {
+	console.log(item);
+	uni.cache.set('shopId', item.shopId);
+	uni.switchTab({
+		url: '/pages/index/index'
+	});
+}
+
 // 获取优惠券列表
 async function getCouponList() {
 	try {
@@ -192,12 +202,21 @@ async function getCouponList() {
 		} else {
 			list.data.push(...res.records);
 		}
+
+		if (res.pageNumber == res.totalPage || res.records.length == 0) {
+			list.status = 'nomore';
+		}
 	} catch (error) {
 		console.log(error);
 	}
 	uni.hideLoading();
 }
 
+// 店铺列表滚动到底部了
+function scrollBottom() {
+	console.log('店铺列表滚动到底部了');
+}
+
 /**
  * 将value数组字符串转换为对应的label拼接字符串
  * @param {Array} options - 包含value和label的选项数组，格式如[{value: 'xxx', label: 'xxx'}, ...]
@@ -258,9 +277,32 @@ function convertValuesToLabels(valueStr, options, separator = '、') {
 	}
 }
 
+// 选择店铺
+function selectShopHandle(item) {
+	querForm.value.shopId = item.shopId;
+	querForm.value.shopName = item.shopName;
+	list.page = 1;
+	show.value = false;
+	getCouponList();
+}
+// 获取当前店铺会员信息
+const shopList = ref([]);
+async function getCouponShopsAjax() {
+	try {
+		const res = await getCouponShops();
+		shopList.value = res;
+	} catch (error) {
+		console.log(error);
+	}
+}
+
 onShow(() => {
 	getCouponList();
 });
+
+onLoad(() => {
+	getCouponShopsAjax();
+});
 </script>
 
 <style>
@@ -367,18 +409,29 @@ page {
 			align-items: center;
 			padding-bottom: 28upx;
 			.icon {
-				$size: 120upx;
+				$size: 140upx;
 				width: $size;
 				height: $size;
-				background-color: #f7f7f7;
+				margin-right: 28upx;
-				border-radius: 12upx;
 			}
 			.info {
 				flex: 1;
 				display: flex;
+				justify-content: center;
 				flex-direction: column;
 				gap: 8upx;
 				padding-left: 28upx;
+				position: relative;
+				&::after {
+					$height: 100upx;
+					content: '';
+					height: $height;
+					border-left: 1upx solid #f7f7f7;
+					position: absolute;
+					top: 50%;
+					margin-top: $height * 0.5 * -1;
+					left: 0;
+				}
 				.view {
 					flex: 1;
 					&.name {
@@ -405,6 +458,12 @@ page {
 					font-size: 24upx;
 					color: #fff;
 				}
+				&.disabled {
+					background-color: #f8f8f8;
+					.t {
+						color: #999999;
+					}
+				}
 			}
 		}
 		.btm {
@@ -418,15 +477,15 @@ page {
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
-				.t {
+				font-size: 24upx;
-					font-size: 24upx;
+				color: #999;
-					color: #999;
-				}
 			}
 			.right {
+				flex: 1;
 				display: flex;
 				align-items: center;
 				padding-left: 28upx;
+				justify-content: flex-end;
 				.t {
 					font-size: 24upx;
 					color: #333;
@@ -451,16 +510,53 @@ page {
 	.popup-list {
 		max-height: 50vh;
 		.item {
-			height: 100upx;
+			padding: 28upx;
 			border-radius: 12upx;
 			background-color: #f7f7f7;
 			margin-bottom: 28upx;
 			display: flex;
-			align-items: center;
+			flex-direction: column;
 			padding: 28upx;
 			.t {
 				font-size: 28upx;
-				color: #555;
+				font-weight: bold;
+				color: #333;
+				/* 必须设置宽度 */
+				width: 600upx; /* 或具体像素值 */
+
+				/* 关键属性 */
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 1; /* 显示2行 */
+				overflow: hidden;
+
+				/* 文本溢出省略号 */
+				text-overflow: ellipsis;
+
+				/* 可选：防止行高度，确保计算准确 */
+				line-height: 1.5;
+				word-break: break-all; /* 允许在单词内换行 */
+				word-wrap: break-word; /* 允许长单词或URL换行 */
+			}
+			.intro {
+				font-size: 28upx;
+				color: #999;
+				/* 必须设置宽度 */
+				width: 600upx; /* 或具体像素值 */
+
+				/* 关键属性 */
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 2; /* 显示2行 */
+				overflow: hidden;
+
+				/* 文本溢出省略号 */
+				text-overflow: ellipsis;
+
+				/* 可选：防止行高度，确保计算准确 */
+				line-height: 1.5;
+				word-break: break-all; /* 允许在单词内换行 */
+				word-wrap: break-word; /* 允许长单词或URL换行 */
 			}
 		}
 		.ul {

pnpm-lock.yaml

@@ -14,6 +14,9 @@ dependencies:
   jsbarcode:
     specifier: ^3.11.6
     version: 3.12.1
+  lodash:
+    specifier: ^4.17.21
+    version: 4.17.21
   pinia:
     specifier: ^2.3.1
     version: 2.3.1(@vue/composition-api@1.7.2)(vue@3.5.21)
@@ -174,6 +177,10 @@ packages:
     resolution: {integrity: sha512-QZQSqIknC2Rr/YOUyOkCBqsoiBAOTYK+7yNN3JsqfoUtJtkazxNw1dmPpxuv7VVvqW13kA3/mKiLq+s/e3o9hQ==}
     dev: false
 
+  /lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: false
+
   /magic-string@0.30.19:
     resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
     dependencies: