Merge remote-tracking branch 'origin/master'

master
蔡军仁 3 months ago
commit 6fa0d7a33f

@ -1,7 +1,7 @@
// components/goods-list/goods-list.js // components/goods-list/goods-list.js
Component({ Component({
/** /**
* 组件的属性列表 * 212206213邓泽玉组件的属性列表
*/ */
properties: { properties: {
goodsData:{ goodsData:{
@ -11,15 +11,17 @@ Component({
}, },
/** /**
* 组件的初始数据 * 组件的初始数据212206213邓泽玉
*/ *
data: {
21212313/
data: {
}, },
/** /**
* 组件的方法列表 * 组件的方法列表212206213邓泽玉
*/ 132131*/
methods: { methods: {
} }

@ -3,6 +3,9 @@
padding: 5px; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
} }
/**
* 列表的样式212206213邓泽玉
*/
.list .item { .list .item {
width: 48%; width: 48%;
@ -12,11 +15,11 @@
background: #fff; background: #fff;
margin: 2px 1%; margin: 2px 1%;
} }
/**列表项目的样式**/
.list .item .goods_img image { .list .item .goods_img image {
width: 100%; width: 100%;
} }
/**货物信息名字**/
.list .item .goods_info .goods_name { .list .item .goods_info .goods_name {
font-size: 14px; font-size: 14px;
text-align: left; text-align: left;
@ -29,7 +32,7 @@
display: -webkit-box; display: -webkit-box;
word-break: break-all; word-break: break-all;
} }
/**货物价格**/
.list .item .goods_info .goods_price { .list .item .goods_info .goods_price {
font-style: normal; font-style: normal;
font-family: JDZH-Regular, sans-serif; font-family: JDZH-Regular, sans-serif;
@ -38,7 +41,7 @@
line-height: 1.5rem; line-height: 1.5rem;
color: #ff4142; color: #ff4142;
} }
/**新货物的信息**/
.list .item .goods_info .goods_price text{ .list .item .goods_info .goods_price text{
font-size: 1rem; font-size: 1rem;
} }

@ -1,45 +1,52 @@
const { getCart,delGoodsCart } = require("../../api/index.js") // 引入获取购物车和删除购物车商品的API方法
//111111 const { getCart, delGoodsCart } = require("../../api/index.js");
/** // 定义小程序页面对象
* 页面的初始数据 Page({
*/ // 页面数据对象初始时cartData为空数组
data: { data: {
cartData:[] cartData: []
}, },
/**
* 每次打开页面都会执行 // 页面显示时触发的方法调用http方法获取购物车数据
*/ onShow() {
onShow(){ this.http();
this.http() },
// 跳转到商品详情页的方法根据传入的商品ID进行跳转
goDetail(e) {
const id = e.currentTarget.dataset.id; // 获取当前点击元素的数据集中的id值
wx.navigateTo({
url: `/pages/goodsDetails/goodsDetails?id=${id}` // 跳转到商品详情页并传递商品ID参数
});
}, },
// 根源
delCartHandle(e){ // 删除购物车商品的方法根据传入的商品ID进行删除操作
console.log(e.currentTarget.dataset.id); delCartHandle(e) {
/** console.log("删除按钮被点击"); // 打印日志,表示删除按钮被点击
* 这里有两个ID console.log(e.currentTarget.dataset.id); // 打印当前点击元素的数据集中的id值
* 1. currentID:商品ID同一个商品加入购物车多次的时候会一次性全删除 // 调用删除购物车商品的API方法传入当前商品ID
* 2. id:每条数据的唯一索引(推荐)课程中选择的方式 delGoodsCart({ currentID: e.currentTarget.dataset.id }).then(res => {
*/ if (res.data.status === 200) { // 如果API返回的状态码为200表示删除成功
delGoodsCart({currentID:e.currentTarget.dataset.id}).then(res =>{ wx.showToast({ // 显示成功提示框
if(res.data.status === 200){ title: '删除成功',
wx.showToast({ });
title: '删除成功', this.http(); // 刷新购物车数据
}) } else { // 如果API返回的状态码不是200表示删除失败
this.http() wx.showToast({ // 显示失败提示框
}else{
wx.showToast({
title: '删除失败', title: '删除失败',
}) });
} }
}) });
}, },
http(){
getCart().then(res =>{ // 获取购物车数据的方法
console.log(res.data.data); http() {
this.setData({ getCart().then(res => { // 调用获取购物车数据的API方法
cartData:res.data.data console.log(res.data.data); // 打印API返回的购物车数据
}) this.setData({ // 更新页面数据对象中的cartData属性
}) cartData: res.data.data
});
});
} }
}) });

@ -1,75 +1,92 @@
const { getGoodsDetails,addGoodsCart } = require("../../api/index.js") const { getGoodsDetails, addGoodsCart } = require("../../api/index.js");
Page({ Page({
/** /**
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
goodsDetails:{} goodsDetails: {} // 存储商品详情数据
}, },
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
* @param {Object} options - 页面加载时传递的参数
*/ */
onLoad(options) { onLoad(options) {
// 提示用户在获取数据 // 显示加载提示
wx.showLoading({ wx.showLoading({
title: '等待数据加载...', title: '等待数据加载...',
}) });
getGoodsDetails({id:options.id}).then(res =>{
wx.hideLoading() // 获取商品详情数据
if(res.data.status === 200){ getGoodsDetails({ id: options.id }).then(res => {
wx.hideLoading(); // 隐藏加载提示
if (res.data.status === 200) {
// 设置商品详情数据
this.setData({ this.setData({
goodsDetails:res.data.data[0] goodsDetails: res.data.data[0]
}) });
}else{ } else {
// 显示数据获取失败的提示
wx.showToast({ wx.showToast({
title: '数据获取失败', title: '数据获取失败',
icon:"success" icon: "none" // 修改为 "none",因为 "success" 不适合表示错误
}) });
} }
}) });
}, },
/** /**
* 客服 * 客服点击事件
*/ */
onClickKF(){}, onClickKF() {
// 客服功能实现
},
/** /**
* 购物车 * 购物车点击事件
*/ */
onClickCart(){ onClickCart() {
// 跳转到购物车页面
wx.switchTab({ wx.switchTab({
url: '/pages/cart/cart', url: '/pages/cart/cart',
}) });
}, },
/** /**
* 加入购物车 * 加入购物车点击事件
*/ */
onClickAddCart(){ onClickAddCart() {
// 添加商品到购物车
addGoodsCart({ addGoodsCart({
title:this.data.goodsDetails.title, title: this.data.goodsDetails.title, // 商品标题
price:this.data.goodsDetails.price, price: this.data.goodsDetails.price, // 商品价格
image:this.data.goodsDetails.topimage, image: this.data.goodsDetails.topimage, // 商品图片
currentID:this.data.goodsDetails.id currentID: this.data.goodsDetails.id // 商品ID
}).then(res =>{ }).then(res => {
if(res.data.status === 200){ if (res.data.status === 200) {
// 显示添加成功提示
wx.showToast({ wx.showToast({
title: res.data.msg, title: res.data.msg,
}) });
}else{ } else {
// 显示添加失败提示
wx.showToast({ wx.showToast({
title: res.data.msg, title: res.data.msg,
}) });
} }
}) });
}, },
/** /**
* 立即购买 * 立即购买点击事件
* @param {Object} e - 事件对象
*/ */
onClickBuy(e){ onClickBuy(e) {
// 跳转到购买页面并传递商品ID
wx.navigateTo({ wx.navigateTo({
url: '/pages/buy/buy?id='+e.currentTarget.dataset.id, url: '/pages/buy/buy?id=' + e.currentTarget.dataset.id,
}) });
} }
}) });

@ -1,22 +1,41 @@
<!-- 商品详情页面的根容器 -->
<view class="details"> <view class="details">
<!-- 商品顶部图片,使用宽度自适应模式 -->
<image class="topimage" mode="widthFix" src="{{ goodsDetails.topimage }}"></image> <image class="topimage" mode="widthFix" src="{{ goodsDetails.topimage }}"></image>
<!-- 商品基本信息容器 -->
<view class="content"> <view class="content">
<!-- 商品价格显示 -->
<view class="price"> <view class="price">
¥<text>{{ goodsDetails.price }}</text>.00 ¥<text>{{ goodsDetails.price }}</text>.00
</view> </view>
<!-- 商品标题显示 -->
<view class="title"> <view class="title">
<text>{{ goodsDetails.title }}</text> <text>{{ goodsDetails.title }}</text>
</view> </view>
</view> </view>
<!-- 商品详细介绍图片,使用宽度自适应模式 -->
<view class="introduce"> <view class="introduce">
<image mode="widthFix" src="{{ goodsDetails.details }}"></image> <image mode="widthFix" src="{{ goodsDetails.details }}"></image>
</view> </view>
<!-- 商品操作栏容器 -->
<view class="cart"> <view class="cart">
<!-- Vant 商品操作栏组件 -->
<van-goods-action> <van-goods-action>
<!-- 客服图标按钮,点击时触发 onClickKF 事件 -->
<van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickKF" /> <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickKF" />
<!-- 购物车图标按钮,点击时触发 onClickCart 事件 -->
<van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickCart" /> <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickCart" />
<!-- 加入购物车按钮,点击时触发 onClickAddCart 事件 -->
<van-goods-action-button text="加入购物车" type="warning" bind:click="onClickAddCart" /> <van-goods-action-button text="加入购物车" type="warning" bind:click="onClickAddCart" />
<!-- 立即购买按钮,点击时触发 onClickBuy 事件,并传递商品 ID -->
<van-goods-action-button data-id="{{ goodsDetails.id }}" text="立即购买" bind:click="onClickBuy" /> <van-goods-action-button data-id="{{ goodsDetails.id }}" text="立即购买" bind:click="onClickBuy" />
</van-goods-action> </van-goods-action>
</view> </view>
</view> </view>

@ -1,32 +1,39 @@
.details{ /* 商品详情页面的整体样式 */
background: #fff; .details {
background: #fff; /* 设置背景颜色为白色 */
} }
.details .topimage{ /* 商品顶部图片的样式 */
width: 100%; .details .topimage {
width: 100%; /* 图片宽度占满父容器 */
} }
.details .content{ /* 商品基本信息容器的样式 */
margin: 10px; .details .content {
margin: 10px; /* 设置外边距为 10px */
} }
/* 商品价格的样式 */
.details .content .price { .details .content .price {
color: #f2270c; color: #f2270c; /* 设置价格文字颜色为红色 */
} }
.details .content .price text{ /* 商品价格中的文本样式 */
color: #f2270c; .details .content .price text {
display: inline-block; color: #f2270c; /* 设置价格文字颜色为红色 */
font-family: JDZH-Regular; display: inline-block; /* 使文本块级显示,方便设置其他样式 */
font-size: 20px; font-family: JDZH-Regular; /* 设置字体为 JDZH-Regular */
line-height: 30px; font-size: 20px; /* 设置字体大小为 20px */
line-height: 30px; /* 设置行高为 30px */
} }
.details .content .title{ /* 商品标题的样式 */
font-size: 15px; .details .content .title {
font-weight: 700; font-size: 15px; /* 设置字体大小为 15px */
font-weight: 700; /* 设置字体加粗 */
} }
.details .introduce image{ /* 商品详细介绍图片的样式 */
width: 100%; .details .introduce image {
} width: 100%; /* 图片宽度占满父容器 */
}

@ -1,5 +1,7 @@
const { getBanner,getGoods } = require("../../api/index.js") const { getBanner,getGoods } = require("../../api/index.js")
/**
邓泽玉212206213
**/
Page({ Page({
data: { data: {
value: "", value: "",

Loading…
Cancel
Save