SwtTt29
/
Mini-Program
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完成高级筛选功能开发，包括自定义下拉菜单和高级筛选侧边栏

pull/12/head
徐飞洋 2 months ago
parent
0dac095d74
commit
7dc91ab035
4 changed files with 687 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 255
      pages/index/index.js
  2. 134
      pages/index/index.wxml
  3. 190
      pages/index/index.wxss
  4. 121
      utils/api.js

255
pages/index/index.js
View File

@ -121,6 +121,127 @@ Page({
previewImageUrls: [],
previewImageIndex: 0,
showImagePreview: false,
// 高级筛选相关状态
showAdvancedFilter: false,
advancedFilters: {
shellColor: 'all', // 蛋壳颜色
yolkType: 'all', // 蛋黄类型
specification: 'all', // 规格
productName: 'all', // 商品名称
priceRange: [0, 100], // 价格范围
sortBy: 'default' // 排序方式
},
// 自定义下拉菜单显示状态
showShellColorPicker: false,
showYolkTypePicker: false,
showSpecificationPicker: false,
showProductNamePicker: false,
// 蛋壳颜色选项
shellColorOptions: [
{ label: '全部颜色', value: 'all' },
{ label: '绿壳', value: '绿壳' },
{ label: '粉壳', value: '粉壳' },
{ label: '褐壳', value: '褐壳' },
{ label: '白壳', value: '白壳' }
],
// 蛋黄类型选项
yolkTypeOptions: [
{ label: '全部蛋黄', value: 'all' },
{ label: '红心', value: '红心' },
{ label: '黄心', value: '黄心' },
{ label: '双色', value: '双色' }
],
// 规格选项
specificationOptions: [
{ label: '全部规格', value: 'all' },
{ label: '格子装', value: '格子装' },
{ label: '散托', value: '散托' },
{ label: '不限规格', value: '不限规格' },
{ label: '净重47+', value: '净重47+' },
{ label: '净重46-47', value: '净重46-47' },
{ label: '净重45-46', value: '净重45-46' },
{ label: '净重44-45', value: '净重44-45' },
{ label: '净重43-44', value: '净重43-44' },
{ label: '净重42-43', value: '净重42-43' },
{ label: '净重41-42', value: '净重41-42' },
{ label: '净重40-41', value: '净重40-41' },
{ label: '净重39-40', value: '净重39-40' },
{ label: '净重38-39', value: '净重38-39' },
{ label: '净重37-39', value: '净重37-39' },
{ label: '净重37-38', value: '净重37-38' },
{ label: '净重36-38', value: '净重36-38' },
{ label: '净重36-37', value: '净重36-37' },
{ label: '净重35-36', value: '净重35-36' },
{ label: '净重34-35', value: '净重34-35' },
{ label: '净重33-34', value: '净重33-34' },
{ label: '净重32-33', value: '净重32-33' },
{ label: '净重32-34', value: '净重32-34' },
{ label: '净重31-32', value: '净重31-32' },
{ label: '净重30-35', value: '净重30-35' },
{ label: '净重30-34', value: '净重30-34' },
{ label: '净重30-32', value: '净重30-32' },
{ label: '净重30-31', value: '净重30-31' },
{ label: '净重29-31', value: '净重29-31' },
{ label: '净重29-30', value: '净重29-30' },
{ label: '净重28-29', value: '净重28-29' },
{ label: '净重28以下', value: '净重28以下' },
{ label: '毛重52以上', value: '毛重52以上' },
{ label: '毛重50-51', value: '毛重50-51' },
{ label: '毛重48-49', value: '毛重48-49' },
{ label: '毛重47-48', value: '毛重47-48' },
{ label: '毛重46-47', value: '毛重46-47' },
{ label: '毛重45-47', value: '毛重45-47' },
{ label: '毛重45-46', value: '毛重45-46' },
{ label: '毛重44-45', value: '毛重44-45' },
{ label: '毛重43-44', value: '毛重43-44' },
{ label: '毛重42-43', value: '毛重42-43' },
{ label: '毛重41-42', value: '毛重41-42' },
{ label: '毛重40-41', value: '毛重40-41' },
{ label: '毛重38-39', value: '毛重38-39' },
{ label: '毛重36-37', value: '毛重36-37' },
{ label: '毛重34-35', value: '毛重34-35' },
{ label: '毛重32-33', value: '毛重32-33' },
{ label: '毛重30-31', value: '毛重30-31' },
{ label: '毛重30以下', value: '毛重30以下' }
],
// 商品名称选项
productNameOptions: [
{ label: '全部商品', value: 'all' },
{ label: '罗曼粉', value: '罗曼粉' },
{ label: '伊莎粉', value: '伊莎粉' },
{ label: '罗曼灰', value: '罗曼灰' },
{ label: '海蓝灰', value: '海蓝灰' },
{ label: '海蓝褐', value: '海蓝褐' },
{ label: '绿壳', value: '绿壳' },
{ label: '粉一', value: '粉一' },
{ label: '粉二', value: '粉二' },
{ label: '粉八', value: '粉八' },
{ label: '京粉1号', value: '京粉1号' },
{ label: '京红', value: '京红' },
{ label: '京粉6号', value: '京粉6号' },
{ label: '京粉3号', value: '京粉3号' },
{ label: '农大系列', value: '农大系列' },
{ label: '黑鸡土蛋', value: '黑鸡土蛋' },
{ label: '双黄蛋', value: '双黄蛋' },
{ label: '大午金凤', value: '大午金凤' },
{ label: '黑凤', value: '黑凤' }
],
// 价格范围选项
priceOptions: [
{ label: '全部价格', value: [0, 100] },
{ label: '0-20元', value: [0, 20] },
{ label: '20-50元', value: [20, 50] },
{ label: '50-100元', value: [50, 100] },
{ label: '100元以上', value: [100, 9999] }
],
// 排序方式选项
sortOptions: [
{ label: '默认排序', value: 'default' },
{ label: '价格从低到高', value: 'price_asc' },
{ label: '价格从高到低', value: 'price_desc' },
{ label: '最新发布', value: 'newest' }
],
},
// 跳转到聊天页面
@ -1777,6 +1898,140 @@ Page({
}, 500);
},
// 打开高级筛选
openAdvancedFilter: function () {
this.setData({
showAdvancedFilter: true
});
},
// 关闭高级筛选
closeAdvancedFilter: function () {
this.setData({
showAdvancedFilter: false
});
},
// 应用高级筛选
applyAdvancedFilter: function () {
// 这里可以实现应用筛选条件的逻辑
console.log('应用高级筛选条件:', this.data.advancedFilters);
// 关闭侧边栏
this.setData({
showAdvancedFilter: false
});
// 刷新商品列表
this.onRefresh();
},
// 重置高级筛选
resetAdvancedFilter: function () {
this.setData({
advancedFilters: {
shellColor: 'all',
yolkType: 'all',
specification: 'all',
productName: 'all',
priceRange: [0, 100],
sortBy: 'default'
}
});
},
// 选择蛋壳颜色并关闭下拉菜单
selectShellColor: function (e) {
const shellColor = e.currentTarget.dataset.color;
this.setData({
'advancedFilters.shellColor': shellColor,
showShellColorPicker: false
});
},
// 选择蛋黄类型并关闭下拉菜单
selectYolkType: function (e) {
const yolkType = e.currentTarget.dataset.yolk;
this.setData({
'advancedFilters.yolkType': yolkType,
showYolkTypePicker: false
});
},
// 选择规格并关闭下拉菜单
selectSpecification: function (e) {
const specification = e.currentTarget.dataset.spec;
this.setData({
'advancedFilters.specification': specification,
showSpecificationPicker: false
});
},
// 选择商品名称并关闭下拉菜单
selectProductName: function (e) {
const productName = e.currentTarget.dataset.name;
this.setData({
'advancedFilters.productName': productName,
showProductNamePicker: false
});
},
// 选择价格范围
selectPriceRange: function (e) {
const priceRange = e.currentTarget.dataset.price;
this.setData({
'advancedFilters.priceRange': priceRange
});
},
// 选择排序方式
selectSortBy: function (e) {
const sortBy = e.currentTarget.dataset.sort;
this.setData({
'advancedFilters.sortBy': sortBy
});
},
// 切换蛋壳颜色下拉菜单
toggleShellColorPicker: function () {
this.setData({
showShellColorPicker: !this.data.showShellColorPicker,
showYolkTypePicker: false,
showSpecificationPicker: false,
showProductNamePicker: false
});
},
// 切换蛋黄类型下拉菜单
toggleYolkTypePicker: function () {
this.setData({
showYolkTypePicker: !this.data.showYolkTypePicker,
showShellColorPicker: false,
showSpecificationPicker: false,
showProductNamePicker: false
});
},
// 切换规格下拉菜单
toggleSpecificationPicker: function () {
this.setData({
showSpecificationPicker: !this.data.showSpecificationPicker,
showShellColorPicker: false,
showYolkTypePicker: false,
showProductNamePicker: false
});
},
// 切换商品名称下拉菜单
toggleProductNamePicker: function () {
this.setData({
showProductNamePicker: !this.data.showProductNamePicker,
showShellColorPicker: false,
showYolkTypePicker: false,
showSpecificationPicker: false
});
},
// 查看商品详情
viewGoodsDetail: function (e) {
const item = e.currentTarget.dataset.item

134
pages/index/index.wxml
View File

@ -56,6 +56,12 @@
>
<view class="egg-inner">{{item}}</view>
</view>
<view
class="egg-item advanced-filter-item"
bindtap="openAdvancedFilter"
>
<view class="egg-inner">高级</view>
</view>
</view>
</view>
@ -82,6 +88,9 @@
<!-- 侧边栏弹出层 -->
<view wx:if="{{showSidebar}}" class="sidebar-overlay" bindtap="toggleSidebar"></view>
<!-- 高级筛选弹出层 -->
<view wx:if="{{showAdvancedFilter}}" class="sidebar-overlay" bindtap="closeAdvancedFilter"></view>
<!-- 回到顶部按钮 -->
<view
class="back-to-top-btn {{showBackToTop ? 'visible' : ''}}"
@ -107,6 +116,131 @@
</view>
</view>
<!-- 高级筛选侧边栏 -->
<view wx:if="{{showAdvancedFilter}}" class="sidebar advanced-filter-sidebar">
<view class="sidebar-title">高级筛选</view>
<!-- 蛋壳颜色筛选 - 自定义下拉菜单 -->
<view class="filter-section">
<view class="filter-title">蛋壳颜色</view>
<view class="custom-picker">
<view
class="custom-picker-trigger"
bindtap="toggleShellColorPicker"
>
{{advancedFilters.shellColor === 'all' ? '全部颜色' : advancedFilters.shellColor}}
<text class="custom-picker-arrow {{showShellColorPicker ? 'rotate' : ''}}">▼</text>
</view>
<view
wx:if="{{showShellColorPicker}}"
class="custom-picker-options"
>
<view
wx:for="{{shellColorOptions}}"
wx:key="index"
class="custom-picker-option {{advancedFilters.shellColor === item.value ? 'active' : ''}}"
bindtap="selectShellColor"
data-color="{{item.value}}"
>
{{item.label}}
</view>
</view>
</view>
</view>
<!-- 商品名称筛选 - 自定义下拉菜单 -->
<view class="filter-section">
<view class="filter-title">商品名称</view>
<view class="custom-picker">
<view
class="custom-picker-trigger"
bindtap="toggleProductNamePicker"
>
{{advancedFilters.productName === 'all' ? '全部商品' : advancedFilters.productName}}
<text class="custom-picker-arrow {{showProductNamePicker ? 'rotate' : ''}}">▼</text>
</view>
<view
wx:if="{{showProductNamePicker}}"
class="custom-picker-options"
>
<view
wx:for="{{productNameOptions}}"
wx:key="index"
class="custom-picker-option {{advancedFilters.productName === item.value ? 'active' : ''}}"
bindtap="selectProductName"
data-name="{{item.value}}"
>
{{item.label}}
</view>
</view>
</view>
</view>
<!-- 规格筛选 - 自定义下拉菜单 -->
<view class="filter-section">
<view class="filter-title">规格</view>
<view class="custom-picker">
<view
class="custom-picker-trigger"
bindtap="toggleSpecificationPicker"
>
{{advancedFilters.specification === 'all' ? '全部规格' : advancedFilters.specification}}
<text class="custom-picker-arrow {{showSpecificationPicker ? 'rotate' : ''}}">▼</text>
</view>
<view
wx:if="{{showSpecificationPicker}}"
class="custom-picker-options"
>
<view
wx:for="{{specificationOptions}}"
wx:key="index"
class="custom-picker-option {{advancedFilters.specification === item.value ? 'active' : ''}}"
bindtap="selectSpecification"
data-spec="{{item.value}}"
>
{{item.label}}
</view>
</view>
</view>
</view>
<!-- 蛋黄类型筛选 - 自定义下拉菜单 -->
<view class="filter-section">
<view class="filter-title">蛋黄类型</view>
<view class="custom-picker">
<view
class="custom-picker-trigger"
bindtap="toggleYolkTypePicker"
>
{{advancedFilters.yolkType === 'all' ? '全部蛋黄' : advancedFilters.yolkType}}
<text class="custom-picker-arrow {{showYolkTypePicker ? 'rotate' : ''}}">▼</text>
</view>
<view
wx:if="{{showYolkTypePicker}}"
class="custom-picker-options"
>
<view
wx:for="{{yolkTypeOptions}}"
wx:key="index"
class="custom-picker-option {{advancedFilters.yolkType === item.value ? 'active' : ''}}"
bindtap="selectYolkType"
data-yolk="{{item.value}}"
>
{{item.label}}
</view>
</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="filter-actions">
<view class="filter-action-btn reset" bindtap="resetAdvancedFilter">重置</view>
<view class="filter-action-btn apply" bindtap="applyAdvancedFilter">应用</view>
</view>
</view>
<!-- 骨架屏加载 - 只在初始加载时显示，筛选时不显示 -->
<view wx:if="{{isLoading && goods.length === 0}}" class="skeleton-container">
<view class="skeleton-grid">

190
pages/index/index.wxss
View File

@ -143,7 +143,8 @@ page {
z-index: 1001;
background: transparent;
padding: 6rpx 0;
height: 50rpx;
height: auto;
min-height: 70rpx;
box-sizing: border-box;
box-shadow: none;
margin: 0;
@ -347,14 +348,7 @@ wx-button:not([size=mini]) {
box-shadow: 0 2rpx 8rpx rgba(22, 119, 255, 0.3);
}
/* 品种筛选区域样式 */
.category-section {
width: 100%;
margin: 0 0 20rpx 0;
flex: 0 1 auto;
box-sizing: border-box;
background: transparent;
}
/* 品种筛选区域样式 - 已合并到上方固定定位样式 */
.category-scroll {
display: flex;
@ -365,8 +359,8 @@ wx-button:not([size=mini]) {
background: transparent;
border-radius: 0;
border: none;
justify-content: center;
align-items: center;
/* 移除justify-content: center，确保滚动时内容从左侧开始 */
}
.egg-item {
@ -595,6 +589,182 @@ wx-button:not([size=mini]) {
padding-left: 50rpx;
}
/* 高级筛选侧边栏样式 */
.advanced-filter-sidebar {
left: auto;
right: 0;
width: 75%;
animation: slideInRight 0.3s ease;
}
/* 右侧滑入动画 */
@keyframes slideInRight {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
/* 筛选区域样式 */
.filter-section {
padding: 20rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.filter-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
padding-left: 10rpx;
}
.filter-options {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
padding: 0 10rpx;
}
.filter-option {
padding: 12rpx 24rpx;
border-radius: 20rpx;
border: 2rpx solid #e0e0e0;
font-size: 26rpx;
color: #666;
background-color: white;
transition: all 0.3s ease;
white-space: nowrap;
}
.filter-option.active {
background-color: #1677ff;
color: white;
border-color: #1677ff;
}
.filter-option:hover {
border-color: #1677ff;
color: #1677ff;
}
/* 操作按钮样式 */
.filter-actions {
display: flex;
padding: 20rpx;
gap: 20rpx;
border-top: 2rpx solid #eee;
}
.filter-action-btn {
flex: 1;
padding: 20rpx;
border-radius: 40rpx;
font-size: 28rpx;
font-weight: bold;
text-align: center;
transition: all 0.3s ease;
}
.filter-action-btn.reset {
background-color: white;
color: #666;
border: 2rpx solid #e0e0e0;
}
.filter-action-btn.apply {
background-color: #1677ff;
color: white;
border: none;
box-shadow: 0 4rpx 12rpx rgba(22, 119, 255, 0.3);
}
.filter-action-btn.reset:hover {
background-color: #f5f5f5;
border-color: #1677ff;
color: #1677ff;
}
.filter-action-btn.apply:hover {
background-color: #4096ff;
box-shadow: 0 6rpx 16rpx rgba(22, 119, 255, 0.4);
}
/* 自定义下拉菜单样式 */
.custom-picker {
width: 100%;
padding: 0 10rpx;
position: relative;
}
.custom-picker-trigger {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 24rpx;
border: 2rpx solid #e0e0e0;
border-radius: 20rpx;
font-size: 26rpx;
color: #666;
background-color: white;
transition: all 0.3s ease;
}
.custom-picker-trigger:hover {
border-color: #1677ff;
}
.custom-picker-arrow {
font-size: 20rpx;
color: #999;
margin-left: 10rpx;
transition: transform 0.3s ease;
}
.custom-picker-arrow.rotate {
transform: rotate(180deg);
}
.custom-picker-options {
position: absolute;
top: 100%;
left: 10rpx;
right: 10rpx;
margin-top: 8rpx;
max-height: 400rpx;
overflow-y: auto;
border: 2rpx solid #e0e0e0;
border-radius: 16rpx;
background-color: white;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
z-index: 1002;
}
.custom-picker-option {
padding: 16rpx 24rpx;
font-size: 26rpx;
color: #666;
transition: all 0.3s ease;
border-bottom: 1rpx solid #f0f0f0;
}
.custom-picker-option:last-child {
border-bottom: none;
border-radius: 0 0 16rpx 16rpx;
}
.custom-picker-option:first-child {
border-radius: 16rpx 16rpx 0 0;
}
.custom-picker-option:hover {
background-color: #f5f5f5;
color: #1677ff;
}
.custom-picker-option.active {
background-color: #1677ff;
color: white;
}
.sidebar-item-icon {
font-size: 36rpx;
margin-right: 20rpx;

121
utils/api.js
View File

@ -189,13 +189,29 @@ function request(url, method, data, requestContext = {}) {
data: data || {}
});
// 构建请求头
const header = {
'content-type': 'application/json',
'Accept': 'application/json'
};
// 生成Authorization签名认证信息
// 注意：实际项目中需要根据微信支付文档要求的签名算法生成
// 这里仅作为示例，实际应实现完整的签名逻辑
if (url.includes('/pay/')) {
// 支付相关接口需要Authorization
const timestamp = Date.now().toString();
const nonceStr = Math.random().toString(36).substr(2, 15);
const signature = 'TODO: 根据微信支付文档生成签名';
header['Authorization'] = `WECHATPAY2-SHA256-RSA2048 mchid="1234567890",nonce_str="${nonceStr}",signature="${signature}",timestamp="${timestamp}",serial_no="TODO: 商户API证书序列号"`;
}
const requestTask = wx.request({
url: BASE_URL + url,
method: method || 'GET',
data: data || {},
header: {
'content-type': 'application/json'
},
header: header,
success: function (res) {
console.log('请求成功响应:', {
url: BASE_URL + url,
@ -777,6 +793,105 @@ module.exports = {
});
},
/**
* JSAPI支付下单接口
* 参考文档：https://pay.weixin.qq.com/doc/v3/merchant/4012791856
* @param {Object} orderData 订单数据
* @param {string} orderData.productId 商品ID
* @param {string} orderData.productName 商品名称
* @param {string} orderData.productPrice 商品价格
* @param {string} orderData.productImage 商品图片URL
* @param {string} orderData.description 商品描述（必填，用户微信账单可见，不超过127字符）
* @param {number} orderData.quantity 购买数量
* @param {string} orderData.outTradeNo 商户订单号（必填，6-32字符，唯一）
* @param {string} orderData.timeExpire 支付结束时间（选填，rfc3339格式）
* @param {string} orderData.attach 商户数据包（选填，不超过128字符）
* @param {string} orderData.goodsTag 订单优惠标记（选填）
* @returns {Promise<Object>} 支付请求结果
*/
jsapiPay: function (orderData) {
console.log('API.jsapiPay - 订单数据:', orderData);
// 获取用户登录信息
const openid = wx.getStorageSync('openid');
const userId = wx.getStorageSync('userId');
const userPhone = wx.getStorageSync('userInfo')?.phoneNumber || '';
// 用户登录状态检查
if (!openid || !userId || !userPhone) {
return Promise.reject(new Error('用户未登录'));
}
// 生成唯一商户订单号（如果未提供）
const outTradeNo = orderData.outTradeNo || `ORD${Date.now()}${Math.random().toString(36).substr(2, 9)}`;
// 计算订单金额（单位：分）
const price = parseFloat(orderData.productPrice || '0');
const totalAmount = Math.round(price * 100); // 转换为分
// 构建JSAPI支付请求数据
// 根据微信支付文档要求的参数格式
const requestData = {
// 用户信息
openid: openid,
userId: userId,
userPhone: userPhone,
// JSAPI支付必填参数
appid: wx.getAccountInfoSync().miniProgram.appId, // 小程序appId
mchid: '1234567890', // 商户号，实际应从配置或后端获取
description: orderData.description, // 商品描述（必填）
out_trade_no: outTradeNo, // 商户订单号（必填）
notify_url: 'https://yourdomain.com/api/pay/notify', // 回调地址，实际应从配置获取
amount: {
total: totalAmount, // 订单总金额（单位：分）
currency: 'CNY' // 货币类型
},
payer: {
openid: openid // 支付者openid
},
// 选填参数
time_expire: orderData.timeExpire || '', // 支付结束时间
attach: orderData.attach || '', // 商户数据包
goods_tag: orderData.goodsTag || '', // 订单优惠标记
// 商品详情
detail: {
goods_details: [
{
merchant_goods_id: orderData.productId,
wechatpay_goods_id: orderData.productId, // 可选，微信支付商品编码
goods_name: orderData.productName,
quantity: orderData.quantity || 1,
unit_price: totalAmount // 商品单价（单位：分）
}
]
},
// 场景信息（可选）
scene_info: {
payer_client_ip: '', // 调用微信支付API的机器IP
device_id: '', // 商户端设备号
store_info: {
id: '1', // 门店编号
name: '门店名称', // 门店名称
area_code: '440100', // 门店行政区划码
address: '门店详细地址' // 门店详细地址
}
}
};
console.log('JSAPI支付请求数据:', requestData);
// 设置HTTP头参数（在request函数内部处理）
// Content-Type: application/json
// Accept: application/json
// Authorization: 签名认证信息
return request('/api/pay/jsapi', 'POST', requestData);
},
// 从购物车移除商品
removeFromCart: function (goodsId) {
var openid = wx.getStorageSync('openid');

Write Preview
Loading…
Cancel
Save