goods-list.js
Component({
/**
* 组件的属性列表
*/
properties: {
goodsList: {
type: Array,
value: [],
observer: function(newVal) {
if (newVal && newVal.length) {
// 初始化商品列表，添加订阅状态
const initList = newVal.map(item => ({
...item,
isSubscribed: item.isSubscribed || false
}));
this.setData({
internalGoodsList: initList
});
}
}
},
title: {
type: String,
value: ''
}
},
/**
* 组件的初始数据
*/
data: {
internalGoodsList: []
},
/**
* 组件的方法列表
*/
methods: {
// 点击商品项
onGoodsTap: function(e) {
const item = e.currentTarget.dataset.item;
this.triggerEvent('goodstap', { item });
},
// 处理订阅/阅读事件
handleSubscribe: function(e) {
const goodsId = e.currentTarget.dataset.goodsId;
const { internalGoodsList } = this.data;
// 找到当前商品索引
const index = internalGoodsList.findIndex(item => item.id === goodsId);
if (index === -1) return;
const isSubscribed = internalGoodsList[index].isSubscribed;
if (!isSubscribed) {
// 未订阅，执行订阅付款流程
this.handlePayment(goodsId, index);
} else {
// 已订阅，跳转到阅读页面
this.navigateToReadPage(goodsId);
}
},
// 处理支付流程
handlePayment: function(goodsId, index) {
const goods = this.data.internalGoodsList[index];
// 显示支付确认对话框
wx.showModal({
title: '订阅确认',
content: `您将订阅《${goods.title}》，价格：¥${goods.price}`,
confirmText: '确认支付',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
// 模拟支付过程
wx.showLoading({
title: '支付中...',
mask: true
});
// 模拟支付延迟
setTimeout(() => {
wx.hideLoading();
// 模拟支付成功
wx.showToast({
title: '订阅成功',
icon: 'success',
duration: 2000
});
// 更新商品订阅状态
this.setData({
[`internalGoodsList[${index}].isSubscribed`]: true
});
// 触发订阅成功事件，供父组件处理
this.triggerEvent('subscribesuccess', { goodsId });
}, 1500);
}
}
});
},
// 跳转到阅读页面
navigateToReadPage: function(goodsId) {
try {
wx.navigateTo({
url: `/pages/book-detail/book-detail?id=${goodsId}`,
fail: (err) => {
wx.showToast({
title: '跳转失败',
icon: 'none',
duration: 2000
});
console.error('跳转失败:', err);
}
});
} catch (err) {
console.error('导航错误:', err);
wx.showToast({
title: '发生错误',
icon: 'none',
duration: 2000
});
}
}
}
});
goods-list.wxml
<view class="goods-container">
<view class="goods-list">
<block wx:for="{{goodsList}}" wx:key="id">
<view class="goods-item">
<image class="goods-image" src="{{item.image}}"></image>
<view class="goods-title">{{item.title}}</view>
<view class="buy">
<view class="goods-price">¥{{item.price}}</view>
<button class="buy-btn" bindtap="handleBuy" data-goods-id="{{item.id}}">订阅</button>
</view>
</view>
</block>
</view>
</view>
goods-list.wxss
/* 列表样式 */
.goods-container {
/* width: 730rpx; */
height: 380rpx;
margin: 0rpx auto;
display: flex;
flex-wrap: wrap;
padding: 0rpx 10rpx;
}
.goods-list {
width: 730rpx;
margin: 0rpx auto;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
height: 380rpx;
}
.goods-item {
width: 50%;
height: 380rpx;
box-sizing: border-box;
align-items: center;
padding: 0rpx 10rpx;
align-items: center;
overflow: hidden;
/* 最大宽度不超过容器 */
max-width: 100%;
/* 最大高度不超过容器 */
max-height: 100%;
/* 保持宽高比 */
object-fit: contain;
}
.goods-image {
width: 100%;
height: 195rpx;
margin-top: 5rpx;
border-radius: 15px;
}
.goods-title {
height: 110rpx;
font-size: 14px;
line-height: 1.4;
}
.buy{
display: flex;
height: 55rpx;
}
.goods-price {
display: flex;
font-size: 18px;
width: 240rpx;
height: 55rpx;
color: #f60;
margin-top: 0px;
background-color: rgba(187, 187, 187, 0.1);
border-radius: 5px;
text-align: center;
justify-content: center;
align-items: center;
}
.buy-btn {
display: flex;
margin-top: 0px;
width: 120rpx;
height: 55rpx;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
text-align: center;
background-color: #ff9900;
color: #fff;
font-size: 32rpx;
padding: 0px 0px;
border-radius: 4px;
}
index.js
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
'https://img.alicdn.com/imgextra/i1/799383305/O1CN017L0jzJ1aHk4vxCoFg_!!799383305.png',
'https://img.alicdn.com/imgextra/i4/799383305/O1CN01Z4V4t51aHk4uj1KYo_!!799383305.png'
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
circular: true,
keyword: "", // 用于存储搜索输入框的内容
// 宫格1数据，可根据实际情况从接口获取或直接定义
gridList: [
{
icon: "/images/icon1.png", // 替换成实际图标路径
text: "开通分站", // 这项不显示，只是好区分
path: "/pages/category/index" // 目标页面路径
},
{
icon: "/images/icon2.png", // 替换成实际图标路径
text: "赚钱模式",
path: "/pages/openSubstation/openSubstation" // 目标页面路径
},
{
icon: "/images/icon3.png", // 替换成实际图标路径
text: "每日更新"
// path: "/pages/substation/substation" // 目标页面路径
},
{
icon: "/images/icon4.png", // 替换成实际图标路径
text: "APP 下载"
// path: "/pages/substation/substation" // 目标页面路径
}
],
// 宫格2数据（新增，限时秒杀、引流推广等）
blueGridList: [
{
icon: "/images/icon5.png",
path: "/pages/my/index"
},
{
icon: "/images/icon6.png",
path: "/pages/service/index"
}
// 可继续添加更多蓝色框宫格数据
],
redGridList: [
{
icon: "/images/TB.png", // 替换为实际图标路径
text: "淘宝省钱",
path: "/pages/openSubstation/openSubstation" // 若需跳转，填对应页面路径
},
{
icon: "/images/JD.png", // 替换为实际图标路径
text: "京东折扣",
// path: "/pages/qianchuan/qianchuan" // 若需跳转，填对应页面路径
},
{
icon: "/images/PDD.png", // 替换为实际图标路径
text: "多多返现",
// path: "/pages/weishang/weishang" // 若需跳转，填对应页面路径
},
{
icon: "/images/WPH.png", // 替换为实际图标路径
text: "唯品会好省",
// path: "/pages/quanyi/quanyi" // 若需跳转，填对应页面路径
},
{
icon: "/images/MT.png", // 替换为实际图标路径
text: "美团免单",
// path: "/pages/redPacket/redPacket" // 若需跳转，填对应页面路径
}
],
// 合并重复的goodsList定义
goodsList: [
{
id: 1,
image: "/images/goods.png",
title: "【高端精品】最新多功能视频提取宝，包含AI创作",
price: "27.88",
btnText: "立即购买"
},
{
id: 2,
image: "/images/goods.png",
title: "【高端精品】最新多功能视频提取宝，包含AI创作",
price: "27.88",
btnText: "立即购买"
}
],
},
// 宫格点击跳转方法
navigateToPage(e) {
const path = e.currentTarget.dataset.path;
if (!path) return;
// 手动列出所有 tabBar 页面路径（最稳妥的方式）
const tabBarPages = [
'/pages/index/index', // 替换为你的 tabBar 页面1
'/pages/category/index', // 替换为你的 tabBar 页面2
'/pages/order/index', // 替换为你的 tabBar 页面3
'/pages/service/index', // 替换为你的 tabBar 页面4
'/pages/my/index' // 替换为你的 tabBar 页面5
];
// 判断当前路径是否在 tabBar 列表中
const isTabBarPage = tabBarPages.some(tabPath => {
// 兼容带参数的路径，如 "/pages/home/home?id=1" 也能匹配
return path.startsWith(tabPath);
});
if (isTabBarPage) {
// 跳 tabBar 页面必须用 switchTab
wx.switchTab({
url: path.split('?')[0], // 移除参数，switchTab 不支持带参数
fail: (err) => {
console.error('tabBar 跳转失败失败:', err);
wx.showToast({ title: '跳转失败', icon: 'none' });
}
});
} else {
// 普通页面用 navigateTo
wx.navigateTo({
url: path,
fail: (err) => {
console.error('普通页面失败:', err);
wx.showToast({ title: '页面不存在', icon: 'none' });
}
});
}
},
// 点击搜索框获取焦点
clicksearch() {
wx.navigateTo({
url: '/pages/search/index',
})
},
onLoad: function () {
// 页面加载时的初始化操作
this.imgUrls()
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
index.wxml
电商平台唯品会投资1.2亿元改造老旧建筑为员工公寓，提供300元/月的租金，远低于市场价格。这一举措旨在解决员工，尤其是年轻毕业生的住房问题，提高员工幸福感。其他大厂如华为、格力、OPPO、腾讯和京东等也有类似举措，以福利吸引和留住人才。
扫一扫
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
