charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat：app改造

Browse Source
This commit is contained in:
charles
2026-08-17 09:27:07 +08:00
parent aa20d121f7
commit 97d3e1cd36
11 changed files with 1923 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/rwa_package/insights/search-result.vue
+529
View File
@@ -0,0 +1,529 @@
<template>
<view class="page-container">
<!-- 顶部状态栏安全高度 -->
<TopSafe bgColor="#ffffff"></TopSafe>
<!-- 1. 自定义导航栏：左侧返回箭头，中间“商品列表”标题 -->
<view class="custom-navbar">
<view class="nav-back flex-c" @click="onBack">
<u-icon name="arrow-left" size="36rpx" color="#333333"></u-icon>
</view>
<view class="nav-title">商品列表</view>
<view class="nav-right"></view>
</view>
<!-- 2. 搜索框区域 -->
<view class="search-bar-box">
<view class="search-inner">
<u-icon name="search" size="36rpx" color="#999999" class="search-icon"></u-icon>
<input class="search-input" v-model="searchInput" placeholder="请输入商品关键字"
placeholder-style="color: #999999; font-size: 28rpx;" confirm-type="search"
@confirm="onSearchBtnClick" />
<view class="search-btn flex-c" @click="onSearchBtnClick">
<text class="search-btn-text">搜索</text>
</view>
</view>
</view>
<!-- 3. 排序/筛选栏（右对齐：综合 / 价格） -->
<view class="filter-bar">
<view class="filter-item" :class="{ active: sortBy === 'relevance' }" @click="switchSort('relevance')">
<text class="filter-text">综合</text>
<view class="sort-icon-box">
<u-icon name="arrow-up-fill" size="12rpx"
:color="sortBy === 'relevance' && sortOrder === 'asc' ? '#7934f6' : '#cccccc'"
class="icon-up"></u-icon>
<u-icon name="arrow-down-fill" size="12rpx"
:color="sortBy === 'relevance' && sortOrder === 'desc' ? '#7934f6' : '#cccccc'"
class="icon-down"></u-icon>
</view>
</view>
<view class="filter-item" :class="{ active: sortBy === 'price' }" @click="switchSort('price')">
<text class="filter-text">价格</text>
<view class="sort-icon-box">
<u-icon name="arrow-up-fill" size="12rpx"
:color="sortBy === 'price' && sortOrder === 'asc' ? '#7934f6' : '#cccccc'"
class="icon-up"></u-icon>
<u-icon name="arrow-down-fill" size="12rpx"
:color="sortBy === 'price' && sortOrder === 'desc' ? '#7934f6' : '#cccccc'"
class="icon-down"></u-icon>
</view>
</view>
</view>
<!-- 4. 商品双列网格列表区域 -->
<scroll-view scroll-y class="product-scroll-view" @scrolltolower="loadMore" refresher-enabled
:refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
<view class="product-grid" v-if="dataList && dataList.length > 0">
<view class="product-card" v-for="(item, index) in dataList" :key="item.id || index"
@click="onJumpDetail(item)">
<!-- 商品大图 + 可选标签 -->
<view class="img-wrapper">
<image class="product-img"
:src="item.url || item.image || item.pic || '/static/common/default-goods.png'"
mode="aspectFill"></image>
<!-- <view class="image-tag" v-if="item.tagName || item.tag">
{{ item.tagName || item.tag }}
</view> -->
</view>
<!-- 商品信息 -->
<view class="card-info">
<view class="product-title">
{{ item.title || item.name || item.goodsName }}
</view>
<view class="price-sales-row">
<view class="price-box">
<text class="currency">¥</text>
<text class="price-val">{{ formatPrice(item.price || item.adPrice) }}</text>
</view>
<text class="sales-val"
v-if="item.sales !== undefined && item.sales !== null && item.sales !== ''">
全网销量{{ formatSales(item.sales) }}件
</text>
</view>
</view>
</view>
</view>
<!-- 加载状态 / 无数据提示 -->
<view class="empty-box" v-else-if="!loading">
<u-icon name="empty-data" size="140rpx" color="#cccccc"></u-icon>
<text class="empty-text">暂无相关商品</text>
</view>
<view class="loading-more-box" v-if="loading && dataList.length > 0">
<text class="loading-text">加载中...</text>
</view>
</scroll-view>
</view>
</template>
<script>
import TopSafe from '@/components/common/top-safe.nvue';
import { searchList } from '@/api/product.js';
export default {
components: {
TopSafe
},
data() {
return {
searchInput: '',
dataList: [],
loading: false,
isRefreshing: false,
sortBy: 'relevance', // 'relevance' | 'price'
sortOrder: 'asc', // 'asc' | 'desc'
page: 1,
pageSize: 20,
hasMore: true
};
},
onLoad(options) {
if (options && options.keyword) {
this.searchInput = decodeURIComponent(options.keyword);
}
this.fetchData();
},
methods: {
onBack() {
uni.navigateBack();
},
onSearchBtnClick() {
if (!this.searchInput || !this.searchInput.trim()) return;
this.saveSearchHistory(this.searchInput.trim());
this.page = 1;
this.hasMore = true;
this.fetchData();
},
saveSearchHistory(val) {
let historyStr = uni.getStorageSync('history') || '';
let historyList = historyStr ? historyStr.split(',').filter(item => item.trim() !== '') : [];
let idx = historyList.indexOf(val);
if (idx > -1) {
historyList.splice(idx, 1);
}
historyList.unshift(val);
if (historyList.length > 15) {
historyList.pop();
}
uni.setStorageSync('history', historyList.join(','));
},
async fetchData(isLoadMore = false) {
if (this.loading) return;
this.loading = true;
let params = {
keyword: this.searchInput.trim(),
page: this.page,
pageSize: this.pageSize,
sortBy: this.sortBy,
sortOrder: this.sortOrder
};
try {
const res = await searchList(params);
let list = [];
if (res && res.data) {
list = res.data;
} else if (Array.isArray(res)) {
list = res;
}
if (isLoadMore) {
this.dataList = [...this.dataList, ...list];
} else {
this.dataList = list;
}
if (list.length < this.pageSize) {
this.hasMore = false;
}
} catch (err) {
console.error('searchList error:', err);
} finally {
this.loading = false;
this.isRefreshing = false;
}
},
switchSort(type) {
if (type === 'relevance') {
if (this.sortBy === 'relevance') {
this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
} else {
this.sortBy = 'relevance';
this.sortOrder = 'asc';
}
} else if (type === 'price') {
if (this.sortBy === 'price') {
this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
} else {
this.sortBy = 'price';
this.sortOrder = 'asc';
}
}
this.page = 1;
this.hasMore = true;
this.fetchData();
},
onRefresh() {
this.isRefreshing = true;
this.page = 1;
this.hasMore = true;
this.fetchData();
},
loadMore() {
if (!this.hasMore || this.loading) return;
this.page++;
this.fetchData(true);
},
onJumpDetail(item) {
if (item && item.id) {
uni.navigateTo({
url: '/pages/other_package/productInfo/productInfo?id=' + item.id
});
}
},
formatPrice(val) {
if (val === undefined || val === null || val === '') return '0.00';
let num = parseFloat(val);
if (isNaN(num)) return val;
return num.toFixed(2);
},
formatSales(n) {
if (n === undefined || n === null || n === '') return '0';
let num = Number(n);
if (isNaN(num)) return n;
if (num >= 10000) {
return (num / 10000).toFixed(1).replace(/\.0$/, '') + '万+';
}
return String(num);
}
}
};
</script>
<style lang="scss" scoped>
.page-container {
width: 100%;
height: 100vh;
background-color: #f5f5f7;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
/* 导航栏 */
.custom-navbar {
width: 100%;
height: 88rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
box-sizing: border-box;
background-color: #ffffff;
position: relative;
flex-shrink: 0;
.nav-back {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: flex-start;
}
.nav-title {
font-size: 34rpx;
font-weight: bold;
color: #1a1a1a;
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.nav-right {
width: 60rpx;
}
}
/* 搜索框区域 */
.search-bar-box {
width: 100%;
padding: 16rpx 32rpx;
box-sizing: border-box;
background-color: #ffffff;
flex-shrink: 0;
.search-inner {
width: 100%;
height: 80rpx;
background-color: #ffffff;
border-radius: 40rpx;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 8rpx 0 28rpx;
box-sizing: border-box;
border: 2rpx solid #efefef;
.search-icon {
margin-right: 12rpx;
}
.search-input {
flex: 1;
height: 100%;
font-size: 28rpx;
color: #333333;
background: transparent;
border: none;
}
.search-btn {
height: 64rpx;
padding: 0 32rpx;
background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
border-radius: 32rpx;
display: flex;
align-items: center;
justify-content: center;
.search-btn-text {
font-size: 28rpx;
color: #ffffff;
font-weight: 500;
}
}
}
}
/* 排序筛选栏 */
.filter-bar {
width: 100%;
padding: 20rpx 40rpx 16rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 48rpx;
background-color: #f5f5f7;
flex-shrink: 0;
.filter-item {
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
.filter-text {
font-size: 28rpx;
color: #666666;
font-weight: 400;
margin-right: 8rpx;
}
&.active {
.filter-text {
color: #7934f6;
font-weight: bold;
}
}
.sort-icon-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
.icon-up {
margin-bottom: 2rpx;
}
}
}
}
/* 商品列表 Grid */
.product-scroll-view {
flex: 1;
height: 0;
width: 100%;
box-sizing: border-box;
}
.product-grid {
width: 100%;
padding: 0 24rpx 30rpx;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
.product-card {
width: 342rpx;
margin-bottom: 20rpx;
background-color: #ffffff;
border-radius: 20rpx;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
.img-wrapper {
width: 100%;
height: 342rpx;
position: relative;
background-color: #f8f8f8;
.product-img {
width: 100%;
height: 100%;
border-radius: 20rpx 20rpx 0 0;
}
.image-tag {
position: absolute;
top: 12rpx;
right: 12rpx;
background: rgba(255, 192, 110, 0.9);
color: #8c4a00;
font-size: 20rpx;
padding: 4rpx 12rpx;
border-radius: 8rpx;
max-width: 80%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
.card-info {
padding: 16rpx 20rpx 20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
.product-title {
font-size: 28rpx;
color: #333333;
font-weight: bold;
line-height: 38rpx;
height: 76rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
margin-bottom: 16rpx;
}
.price-sales-row {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
width: 100%;
.price-box {
display: flex;
align-items: baseline;
color: #7934f6;
.currency {
font-size: 24rpx;
font-weight: bold;
margin-right: 2rpx;
}
.price-val {
font-size: 32rpx;
font-weight: bold;
}
}
.sales-val {
font-size: 22rpx;
color: #999999;
font-weight: normal;
}
}
}
}
}
.empty-box {
width: 100%;
padding: 120rpx 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.empty-text {
font-size: 28rpx;
color: #999999;
margin-top: 20rpx;
}
}
.loading-more-box {
width: 100%;
padding: 20rpx 0 40rpx;
text-align: center;
.loading-text {
font-size: 24rpx;
color: #999999;
}
}
</style>
pages/rwa_package/insights/search.vue
+31 -45
View File
@@ -16,14 +16,8 @@
<view class="search-bar-box">
<view class="search-inner">
<u-icon name="search" size="36rpx" color="#999999" class="search-icon"></u-icon>
<input
class="search-input"
v-model="searchInput"
placeholder="请输入商品关键字"
placeholder-style="color: #999999; font-size: 28rpx;"
confirm-type="search"
@confirm="onSearch"
/>
<input class="search-input" v-model="searchInput" placeholder="请输入商品关键字"
placeholder-style="color: #999999; font-size: 28rpx;" confirm-type="search" @confirm="onSearch" />
<view class="search-btn flex-c" @click="onSearch">
<text class="search-btn-text">搜索</text>
</view>
@@ -34,26 +28,16 @@
<view class="history-container">
<view class="history-header flex-r-lr">
<text class="section-title">历史搜索</text>
<u-icon name="trash" size="38rpx" color="#999999" @click="toggleDel"></u-icon>
<u-icon name="trash" size="42rpx" color="#999999" @click="toggleDel"></u-icon>
</view>
<!-- 历史记录标签列表 -->
<view class="history-tags flex-r" v-if="historyList.length">
<view
class="history-tag-item flex-r"
v-for="(item, index) in historyList"
:key="index"
@click="onText(item)"
>
<view class="history-tag-item flex-r" v-for="(item, index) in historyList" :key="index"
@click="onText(item)">
<text class="tag-text">{{ item }}</text>
<u-icon
name="close-circle-fill"
size="28rpx"
color="#999999"
class="del-icon"
v-if="isDel"
@click.stop="onDel(index)"
></u-icon>
<u-icon name="close-circle-fill" size="28rpx" color="#999999" class="del-icon" v-if="isDel"
@click.stop="onDel(index)"></u-icon>
</view>
</view>
@@ -68,19 +52,18 @@
<view class="recommend-header">
<text class="section-title">猜你喜欢</text>
</view>
<!-- 猜你喜欢下面的列表按要求空着 -->
<view class="recommend-list">
<view class="product-grid" v-if="dataList && dataList.length">
<ShopItem
:obj="item"
class="product-item"
@click="onJump(item)"
v-for="item in dataList"
:key="item.id"
></ShopItem>
</view>
<view class="recommend-content">
<choiceness :isTitle="false" />
</view>
<!-- <view class="recommend-list">
<view class="product-grid" v-if="dataList && dataList.length">
<ShopItem :obj="item" class="product-item" @click="onJump(item)" v-for="item in dataList"
:key="item.id"></ShopItem>
</view>
</view> -->
</view>
<!-- 为您精选 -->
<DownPopup></DownPopup>
</view>
@@ -93,10 +76,10 @@ import TopSafe from '@/components/common/top-safe.nvue';
import DownPopup from '@/components/common/down-popup.vue';
import { searchList } from '@/api/product.js';
import ShopItem from './components/shop-item.vue';
import func from '@/utils/func.js';
import choiceness from "@/components/choiceness/choiceness.vue";
export default {
components: { Header, TopSafe, DownPopup, ShopItem },
components: { Header, TopSafe, DownPopup, ShopItem, choiceness },
data() {
return {
searchInput: '',
@@ -130,11 +113,8 @@ export default {
return;
}
this.onAdd();
let params = {
keyword: this.searchInput.trim()
};
searchList(params).then((res) => {
this.dataList = res.data || [];
uni.navigateTo({
url: '/pages/rwa_package/insights/search-result?keyword=' + encodeURIComponent(this.searchInput.trim())
});
},
onDel(index) {
@@ -305,9 +285,9 @@ export default {
width: 100%;
.history-tag-item {
padding: 10rpx 28rpx;
padding: 6rpx 24rpx;
background-color: #f5f5f7;
border-radius: 30rpx;
border-radius: 24rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
display: flex;
@@ -339,7 +319,7 @@ export default {
/* 猜你喜欢 */
.recommend-container {
width: 100%;
padding: 32rpx 32rpx;
padding: 20rpx 32rpx 0;
box-sizing: border-box;
.recommend-header {
@@ -350,11 +330,17 @@ export default {
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
}
.recommend-content {
::v-deep(.choiceness_warp) {
margin-top: 15rpx;
}
}
.recommend-list {
width: 100%;
margin-top: 24rpx;