ss002/RenyiXCX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui修改

Browse Source
This commit is contained in:
lym
2026-03-18 17:27:43 +08:00
parent 4a5d7353ed
commit c076cf32b0
34 changed files with 480 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
pages/shop/index.js
View File

@@ -1,4 +1,4 @@
var WxParse = null;
var WxParse = null;
//获取应用实例
var app = getApp()
var sopenFrame=null;
@@ -43,6 +43,71 @@ Page({
that=this;
WxParse = require('../../wxParse/wxParse.js');
// ============================================
// 【测试数据配置区域 - 开始】
// 用途：用于本地测试swiper组件渲染效果
// 使用方法：将 useTestData 设为 true 启用测试数据，设为 false 恢复正式数据
// 注意：测试完成后请将 useTestData 设为 false 或删除测试代码块
// ============================================
var useTestData = false; // 切换开关：true=使用测试数据，false=使用后端数据
if (useTestData) {
// 虚拟测试数据 - 用于验证swiper组件渲染效果
var testData = {
ifxn: 1, // 控制wx:if条件显示
indicatorDots0: true, // 显示指示点
vertical0: false, // 水平轮播
autoplay: true, // 自动播放
interval0: 3000, // 轮播间隔3秒
duration: 500, // 动画时长0.5秒
loadingHidden: true, // 隐藏loading
// images1数组：包含3个swiper-item，每个item包含4个cell
images1: [
{
datas: [
{ id: '1', label: '手机数码', img: 'https://picsum.photos/200/200?random=1' },
{ id: '2', label: '电脑办公', img: 'https://picsum.photos/200/200?random=2' },
{ id: '3', label: '家用电器', img: 'https://picsum.photos/200/200?random=3' },
{ id: '4', label: '服饰鞋包', img: 'https://picsum.photos/200/200?random=4' }
]
},
// {
// datas: [
// { id: '5', label: '美妆护肤', img: 'https://picsum.photos/200/200?random=5' },
// { id: '6', label: '食品生鲜', img: 'https://picsum.photos/200/200?random=6' },
// { id: '7', label: '家居家装', img: 'https://picsum.photos/200/200?random=7' },
// { id: '8', label: '运动户外', img: 'https://picsum.photos/200/200?random=8' }
// ]
// },
// {
// datas: [
// { id: '9', label: '图书音像', img: 'https://picsum.photos/200/200?random=9' },
// { id: '10', label: '母婴用品', img: 'https://picsum.photos/200/200?random=10' },
// { id: '11', label: '汽车用品', img: 'https://picsum.photos/200/200?random=11' },
// { id: '12', label: '玩具乐器', img: 'https://picsum.photos/200/200?random=12' }
// ]
// }
],
// 其他必要数据
images: [
{ url: '1', img: 'https://picsum.photos/750/300?random=101' },
{ url: '2', img: 'https://picsum.photos/750/300?random=102' },
{ url: '3', img: 'https://picsum.photos/750/300?random=103' }
],
Products: [],
Products0: []
};
that.setData(testData);
console.log('【测试模式】已加载虚拟测试数据');
// 测试数据模式下不调用后端接口，防止数据被覆盖
return;
}
// ============================================
// 【测试数据配置区域 - 结束】
// ============================================
/*var shopdata = wx.getStorageSync('shopdata')
if(shopdata){
var resshopdata=JSON.parse(shopdata);
@@ -124,21 +189,41 @@ clearCache:function(){
success (res) {
if(res.data.status==1){
wx.setStorageSync('shopdata', JSON.stringify(res.data))
wx.setStorageSync('shopdata', JSON.stringify(res.data))
// 转换 pic1 数据格式：将扁平数组包装为包含 datas 的嵌套结构
var pic1Data = res.data.pic1 || []
var formattedImages1 = []
if (pic1Data.length > 0) {
// 每8个一组进行分组（双行显示，每行4个分类）
var groupSize = 8
for (var i = 0; i < pic1Data.length; i += groupSize) {
formattedImages1.push({
datas: pic1Data.slice(i, i + groupSize)
})
}
}
that.setData({
images: res.data.pic,
images1: res.data.pic1,
Products:res.data.products,
Products0:res.data.products0,
images: res.data.pic || [],
images1: formattedImages1,
Products:res.data.products || [],
Products0:res.data.products0 || [],
loadingHidden:true
})
if(res.data.userInfo.ifxn==0){
if(res.data.ifxn==1){
that.setData({
ifxn:1
})
}
// if(res.data.userInfo && res.data.userInfo.ifxn==0){
// that.setData({
// ifxn:1
// })
// }
// that.setData({
// ifxn:1
// })
if(t==1){
//隐藏loading 提示框
wx.hideLoading();

31
pages/shop/index.wxml
View File

@@ -1,7 +1,7 @@
<!--index.wxml-->
<import src="../../wxParse/wxParse.wxml"/>
<view class="container">
<view>
<view>
<swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" circular="true"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
<block wx:for="{{images}}" wx:key="index">
@@ -10,24 +10,29 @@
</swiper-item>
</block>
</swiper>
</view>
</view>
<view class="mydata_box0" wx:if="{{ifxn==1}}">
<view>
<swiper class="swiper_box0" indicator-dots="{{indicatorDots0}}" vertical="{{vertical0}}" circular="true"
autoplay="{{autoplay}}" interval="{{interval0}}" duration="{{duration}}" bindchange="swiperchange0">
<swiper-item wx:for="{{images1}}">
<view wx:for="{{item.datas}}" wx:for-item="cell" wx:for-index="index0" bindtap="onnav" data-id='{{cell.id+"&title="+cell.label}}'>
<image src='{{cell.img}}'></image>
<text>{{cell.label}}</text>
</view>
</swiper-item>
</swiper>
<view class="category-grid">
<view class="category-group" wx:for="{{images1}}" wx:for-item="groupItem" wx:for-index="groupIndex">
<view class="category-row">
<view class="category-item" wx:for="{{groupItem.datas}}" wx:for-item="cell" wx:for-index="cellIndex" wx:if="{{cellIndex < 4}}" bindtap="onnav" data-id='{{cell.id+"&title="+cell.label}}'>
<image src='{{cell.img}}'></image>
<text>{{cell.label}}</text>
</view>
</view>
<view class="category-row" wx:if="{{groupItem.datas.length > 4}}">
<view class="category-item" wx:for="{{groupItem.datas}}" wx:for-item="cell" wx:for-index="cellIndex" wx:if="{{cellIndex >= 4}}" bindtap="onnav" data-id='{{cell.id+"&title="+cell.label}}'>
<image src='{{cell.img}}'></image>
<text>{{cell.label}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="choice_text">
<view class="line_flag"></view>
<text>热门商品</text>
<text>优选商品</text>
<view class="more"></view>
</view>
<view class="choice_box">

67
pages/shop/index.wxss
View File

@@ -164,47 +164,66 @@ swiper-item image {
box-sizing: border-box;
z-index: 10;
}
.mydata_box0 view{
display:block;
float:left;
.mydata_box0 .category-grid{
display: flex;
flex-direction: column;
width: 100%;
padding: 0.4em 0;
padding-bottom: 0.4em;
padding: 0.3em 0;
border-radius:0.5em;
background-color:#fff;
box-sizing: border-box;
}
.mydata_box0 view .swiper_box0 {
display:block;
float:left;
width: 100%;
height:11em;
}
.mydata_box0 .swiper_box0 .wx-swiper-dots{bottom: 0em;}
.mydata_box0 view view{
float: left;
.mydata_box0 .category-group {
display: flex;
flex-direction: column;
width: 100%;
}
.mydata_box0 .category-row {
display: flex;
flex-direction: row;
width: 100%;
justify-content: flex-start;
padding: 0.1em 0;
}
.mydata_box0 .category-group .category-row:first-child {
padding-top: 0.15em;
}
.mydata_box0 .category-group .category-row:last-child {
padding-bottom: 0.15em;
}
.mydata_box0 .category-item {
display: flex;
width: 25%;
height: 6em;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25%;
height: 5.5em;
box-sizing: border-box;
font-size:0.9em;
transition: transform 0.15s ease;
}
.mydata_box0 view view image{
width: 3em;
.mydata_box0 .category-item:active {
transform: scale(0.96);
}
.mydata_box0 .category-item image{
width: 3em;
height: 3em;
padding:0;
background-color: #f5f5f5;
border-radius:0.4em;
background-color: #f0f0f0;
border-radius:0.5em;
overflow: hidden;
box-sizing: border-box;
object-fit: cover;
}
.mydata_box0 view view text{
margin-top: 0.4em;
.mydata_box0 .category-item text{
margin-top: 0.35em;
font-size: 0.85em;
color: #444;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 92%;
}
.text{