qgh

# Conflicts:
#	yuan ma/mp-shop/pages/buy/buy.js

yuan ma/mp-shop-server/database/mpshop.sql

@@ -11,7 +11,7 @@
  Target Server Version : 50560
  File Encoding         : 65001
 
- Date: 08/08/2022 15:36:53
+ Date: 10/30/2024 10:33:35
 */
 
 SET NAMES utf8mb4;
@@ -27,7 +27,7 @@ CREATE TABLE `banner` (
   `descs` text NOT NULL,
   PRIMARY KEY (`id`)
 ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4;
-
+-- 指定自增列从 5 开始。，默认字符编码方式为utf-8字符集
 -- ----------------------------
 -- Records of banner
 -- ----------------------------
@@ -49,7 +49,7 @@ CREATE TABLE `cart` (
   `price` text,
   `currentID` int(11) DEFAULT NULL,
   PRIMARY KEY (`id`)
-) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8 COMMENT='newTable';
+) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8 COMMENT='cart';
 
 -- ----------------------------
 -- Records of cart
@@ -70,7 +70,7 @@ CREATE TABLE `category` (
   `image` text,
   `cate` text,
   PRIMARY KEY (`id`)
-) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8 COMMENT='newTable';
+) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8 COMMENT='category';
 
 -- ----------------------------
 -- Records of category
@@ -130,7 +130,7 @@ CREATE TABLE `goodsdetails` (
   `price` text,
   `topimage` text,
   PRIMARY KEY (`id`)
-) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=utf8 COMMENT='newTable';
+) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=utf8 COMMENT='goodsdetails';
 
 -- ----------------------------
 -- Records of goodsdetails
@@ -160,7 +160,7 @@ CREATE TABLE `keywords` (
   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
   `content` varchar(255) DEFAULT NULL COMMENT 'content',
   PRIMARY KEY (`id`)
-) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8 COMMENT='newTable';
+) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8 COMMENT='keywords';
 
 -- ----------------------------
 -- Records of keywords
@@ -182,10 +182,11 @@ COMMIT;
 DROP TABLE IF EXISTS `user`;
 CREATE TABLE `user` (
   `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
-  `openid` text,
-  `session_key` text,
+  `openid` text,     
+  `session_key` text,  
+  --openid 和 session_key 用于标识特定用户的唯一性或者保存临时的认证信息。
   PRIMARY KEY (`id`)
-) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8 COMMENT='newTable';
+) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8 COMMENT='user';
 
 -- ----------------------------
 -- Records of user

yuan ma/mp-shop-server/index.js

@@ -15,4 +15,4 @@ app.use("/api",router);
 
 app.listen(3001,() =>{
     console.log("服务器运行在3001端口上");
-})
+})//123

yuan ma/mp-shop/api/base.js

@@ -1,5 +1,5 @@
 /**
- * 存储接口地址
+ * 定义存储接口地址
  */
 module.exports = {
     baseUrl:"http://iwenwiki.com:3001",   // 公共地址
@@ -12,6 +12,6 @@ module.exports = {
     addCart:"/api/cart/add",              // 添加购物车
     delCart:"/api/cart/del",              // 删除购物车
     category:"/api/category",             // 分类
-    buy:"/api/buy",                       // 购买
+    buy:"/api/buy",                       // 购买商品
     login:"/api/login",                   // 登录
 }

yuan ma/mp-shop/api/index.js

@@ -5,14 +5,14 @@ const { login,baseUrl,banner,goods,hotSearch,search,goodsDetails,cart,addCart,de
  */
 
 /**
- * get banner data
+ *轮播图
  */
 function getBanner(data){
     return request(baseUrl + banner,"GET",data)
 }
 
 /**
- * get goods list data
+ * 轮播图
  */
 
 function getGoods(data){
@@ -20,63 +20,63 @@ function getGoods(data){
 }
 
 /**
- * hot search keywords
+ * 热门搜索
  */
 function getHotSearch(data){
     return request(baseUrl + hotSearch,"GET",data)
 }
 
 /**
- * search 
+ * 搜索 
  */
 function getSearch(data){
     return request(baseUrl + search,"GET",data)
 }
 
 /**
- * goods details
+ * 商品详情
  */
 function getGoodsDetails(data){
     return request(baseUrl + goodsDetails,"GET",data) 
 }
 
 /**
- * cart select
+ * 购物车查询
  */
 function getCart(data){
     return request(baseUrl + cart,"GET",data) 
 }
 
 /**
- * cart add
+ * 添加购物车
  */
 function addGoodsCart(data){
     return request(baseUrl + addCart,"GET",data) 
 }
 
 /**
- * cart del
+ * 删除购物车
  */
 function delGoodsCart(data){
     return request(baseUrl + delCart,"GET",data) 
 }
 
 /**
- * category
+ * 分类
  */
 function getCategory(data){
     return request(baseUrl + category,"GET",data) 
 }
 
 /**
- * buy
+ * 购买
  */
 function getBuy(data){
     return request(baseUrl + buy,"GET",data) 
 }
 
 function getLogin(data){
-    return request(baseUrl + login,"POST",data) 
+    return request(baseUrl + login,"POST",data)  
 }
 
 module.exports = {

yuan ma/mp-shop/app.js

@@ -1,12 +1,12 @@
 // app.js
 App({
   onLaunch() {
-    // 展示本地存储能力 6
+    // 展示本地存储能力
     const logs = wx.getStorageSync('logs') || []
     logs.unshift(Date.now())
     wx.setStorageSync('logs', logs)
 
-    // 登录
+    // 定义登录
     wx.login({
       success: res => {
         // 发送 res.code 到后台换取 openId, sessionKey, unionId

yuan ma/mp-shop/components/goods-list/goods-list.js

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

yuan ma/mp-shop/components/goods-list/goods-list.wxss

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

yuan ma/mp-shop/components/swiper/swiper.js

@@ -1,41 +1,50 @@
+// 定义一个自定义组件
 Component({
     /**
      * 组件的属性列表
+     * 这些属性可以在父组件中传递给子组件，用于配置子组件的行为和显示
      */
     properties: {
-        indicatorDots:{
-            type:Boolean,
-            value:false
+        // 是否显示面板指示点
+        indicatorDots: {
+            type: Boolean, // 属性类型为布尔值
+            value: false   // 默认值为false，即不显示指示点
         },
-        autoplay:{
-            type:Boolean,
-            value:false
+        // 是否自动切换
+        autoplay: {
+            type: Boolean, // 属性类型为布尔值
+            value: false   // 默认值为false，即不自动切换
         },
-        interval:{
-            type:Number,
-            value:5000
+        // 自动切换时间间隔，单位为毫秒
+        interval: {
+            type: Number,  // 属性类型为数字
+            value: 5000    // 默认值为5000毫秒，即5秒
         },
-        duration:{
-            type:Number,
-            value:500
+        // 滑动动画时长，单位为毫秒
+        duration: {
+            type: Number,  // 属性类型为数字
+            value: 500     // 默认值为500毫秒
         },
-        swiperData:{
-            type:Array,
-            value:[]
+        // 轮播图的数据源，数组形式
+        swiperData: {
+            type: Array,   // 属性类型为数组
+            value: []      // 默认值为空数组
         }
     },
 
     /**
      * 组件的初始数据
+     * 这些数据是组件内部使用的，不会从外部传递
      */
     data: {
-
+        // 可以在这里定义组件内部的数据，例如当前激活的滑块索引等
     },
 
     /**
      * 组件的方法列表
+     * 这些方法可以被组件内部调用，也可以暴露给父组件调用
      */
     methods: {
-
+        // 可以在这里定义组件的各种方法，例如处理滑动事件、更新数据等
     }
 })

yuan ma/mp-shop/components/swiper/swiper.json

@@ -1,4 +1,4 @@
 {
     "component": true,
     "usingComponents": {}
-}
+}

yuan ma/mp-shop/components/swiper/swiper.wxml

@@ -1,9 +1,22 @@
+<!-- 外层视图容器，类名为swiper -->
 <view class="swiper">
-    <swiper class="myswiper" indicator-dots="{{ indicatorDots }}" autoplay="{{ autoplay }}" interval="{{ interval }}" duration="{{ duration }}" indicator-color="#fff" indicator-active-color="#fa2c19">
+    <!-- 使用swiper组件，设置相关属性 -->
+    <swiper
+        class="myswiper"                          <!-- 设置swiper组件的类名为myswiper -->
+        indicator-dots="{{ indicatorDots }}"       <!-- 是否显示面板指示点，绑定到组件属性indicatorDots -->
+        autoplay="{{ autoplay }}"                  <!-- 是否自动切换，绑定到组件属性autoplay -->
+        interval="{{ interval }}"                  <!-- 自动切换时间间隔，绑定到组件属性interval -->
+        duration="{{ duration }}"                  <!-- 滑动动画时长，绑定到组件属性duration -->
+        indicator-color="#fff"                   <!-- 指示点颜色 -->
+        indicator-active-color="#fa2c19">         <!-- 当前选中的指示点颜色 -->
+
+        <!-- 使用block组件循环渲染swiper-item -->
         <block wx:for="{{ swiperData }}" wx:key="index">
+            <!-- 每个swiper-item组件 -->
             <swiper-item>
+                <!-- 图片组件，mode设置为宽度自适应，src绑定到当前项的url -->
                 <image mode="widthFix" src="{{ item.url }}"></image>
             </swiper-item>
         </block>
     </swiper>
-</view>
+</view>

yuan ma/mp-shop/components/swiper/swiper.wxss

@@ -1,6 +1,9 @@
-.swiper{
-    padding: 0 10px;
+/* 定义类名为swiper的样式 */
+.swiper {
+    padding: 0 10px; /* 设置左右内边距为10px，顶部和底部内边距为0 */
+}
+
+/* 定义image元素的样式 */
+image {
+    width: 100%; /* 设置图片宽度为100%，使其宽度自适应其父容器 */
 }
-image{
-    width: 100%;
-}

yuan ma/mp-shop/pages/buy/buy.js

@@ -1,21 +1,30 @@
+// 引入一个模块，该模块导出了一个名为getBuy的函数
 const { getBuy } = require("../../api/index.js")
 
+// 定义一个页面对象，这是微信小程序页面的标准结构
 Page({
     data: {
-        goodsData:{}
+        goodsData:{}// 用于存储商品数据的对象，初始化为空对象
     },
+    // 页面的初始数据
     onLoad(options) {
+        // 调用getBuy函数，传入一个对象作为参数，该对象包含一个id属性，其值来自页面加载时的选项参数
         getBuy({ id:options.id }).then(res =>{
+            // 在Promise的then回调中处理异步请求的响应
             console.log(res.data);
+            // 使用setData方法更新页面数据
+            // 这里将响应数据中的第一个商品数据赋值给goodsData
             this.setData({
                 goodsData:res.data.data[0]
             })
         })
     },
+    // 页面上的提交按钮点击时触发的事件处理函数
     onSubmit(){
         wx.showToast({
-          title: '购买完成',
-          icon:"success"
+            // 显示一个提示框，告知用户购买完成
+          title: '购买完成',// 提示框的标题
+          icon:"success"// 提示框的图标，这里使用成功图标
         })
     }
 })

yuan ma/mp-shop/pages/cart/cart.js

@@ -1,46 +1,125 @@
-const { getCart,delGoodsCart } = require("../../api/index.js")
+// 引入获取购物车和删除购物车商品的API方法
+const { getCart, delGoodsCart, submitOrder } = require("../../api/index.js");
 
+// 定义小程序页面对象
 Page({
-
-    /**
-     * 页面的初始数据
-     */
+    // 页面数据对象，初始时cartData为空数组，totalPrice为0
     data: {
-        cartData:[]
+        cartData: [],
+        totalPrice: 0 // 初始化 totalPrice 为 0
+    },
+
+    // 页面显示时触发的方法，调用http方法获取购物车数据
+    onShow() {
+        this.http();
     },
-    /**
-     * 每次打开页面，都会执行
-     */
-    onShow(){
-        this.http()
+
+    // 跳转到商品详情页的方法，根据传入的商品ID进行跳转
+    goDetail(e) {
+        const id = e.currentTarget.dataset.id; // 获取当前点击元素的数据集中的id值
+        wx.navigateTo({
+            url: `/pages/goodsDetails/goodsDetails?id=${id}` // 跳转到商品详情页，并传递商品ID参数
+        });
     },
-    // 根源
-    delCartHandle(e){
-        console.log(e.currentTarget.dataset.id);
-        /**
-         * 这里有两个ID
-         *  1. currentID:商品ID（同一个商品，加入购物车多次的时候，会一次性全删除）
-         *  2. id:每条数据的唯一索引(推荐)课程中选择的方式
-         */
-        delGoodsCart({currentID:e.currentTarget.dataset.id}).then(res =>{
-            if(res.data.status === 200){
-                wx.showToast({
-                  title: '删除成功',
-                })
-                this.http()
-            }else{
-                wx.showToast({
+
+    // 删除购物车商品的方法，根据传入的商品ID进行删除操作
+    delCartHandle(e) {
+        console.log("删除按钮被点击"); // 打印日志，表示删除按钮被点击
+        console.log(e.currentTarget.dataset.id); // 打印当前点击元素的数据集中的id值
+        // 调用删除购物车商品的API方法，传入当前商品ID
+        delGoodsCart({ currentID: e.currentTarget.dataset.id }).then(res => {
+            if (res.data.status === 200) { // 如果API返回的状态码为200，表示删除成功
+                wx.showToast({ // 显示成功提示框
+                    title: '删除成功',
+                });
+                this.http(); // 刷新购物车数据
+            } else { // 如果API返回的状态码不是200，表示删除失败
+                wx.showToast({ // 显示失败提示框
                     title: '删除失败',
-                  })
+                });
             }
-        })
+        });
     },
-    http(){
-        getCart().then(res =>{
-            console.log(res.data.data);
-            this.setData({
-                cartData:res.data.data
-            })
-        })
+   
+    // 获取购物车数据的方法
+    http() {
+        getCart().then(res => { // 调用获取购物车数据的API方法
+            console.log(res.data.data); // 打印API返回的购物车数据
+            const cartData = res.data.data;
+            let totalPrice = 0;
+
+            cartData.forEach(item => {
+                const price = parseFloat(item.price); // 将 price 字段从字符串转换为数字
+
+                if (!isNaN(price)) { // 确保 price 是有效的数字
+                    totalPrice += price; // 计算总价格，每个商品默认数量为 1
+                } else {
+                    console.warn(`Invalid price for item:`, item); // 调试信息：警告无效的 price
+                }
+            });
+
+            console.log("Calculated Total Price:", totalPrice); // 调试信息：打印计算出的总价格
+
+            this.setData({ // 更新页面数据对象中的cartData属性和totalPrice
+                cartData: cartData,
+                totalPrice: totalPrice * 100 // van-submit-bar 的 price 单位是分
+            });
+        }).catch(err => {
+            console.error("Error during getCart operation:", err); // 调试信息：捕获并打印错误
+            wx.showToast({ // 显示失败提示框
+                title: '获取购物车数据失败',
+                icon: 'none'
+            });
+        });
+    },
+    onSubmit(){
+      wx.showToast({
+          // 显示一个提示框，告知用户购买完成
+        title: '购买完成',// 提示框的标题
+        icon:"success"// 提示框的图标，这里使用成功图标
+      })
+  },
+  //无法实现
+    // 提交订单的方法
+    /*
+    onSubmit() {
+        // 调用提交订单的API方法
+        submitOrder().then(res => {
+            if (res.data.status === 200) { // 如果API返回的状态码为200，表示订单提交成功
+                wx.showToast({ // 显示成功提示框
+                    title: '购买成功',
+                });
+
+                // 清空购物车数据
+                this.setData({
+                    cartData: [],
+                    totalPrice: 0
+                });
+
+                // 调用删除购物车商品的API方法，传入所有商品ID
+                const cartIDs = this.data.cartData.map(item => item.id);
+                delGoodsCart({ currentIDs: cartIDs }).then(delRes => {
+                    if (delRes.data.status === 200) { // 如果API返回的状态码为200，表示删除成功
+                        console.log('购物车商品删除成功');
+                    } else { // 如果API返回的状态码不是200，表示删除失败
+                        console.error('购物车商品删除失败', delRes);
+                    }
+                }).catch(delErr => {
+                    console.error('删除购物车商品时发生错误', delErr);
+                });
+            } else { // 如果API返回的状态码不是200，表示订单提交失败
+                wx.showToast({ // 显示失败提示框
+                    title: '购买失败',
+                    icon: 'none'
+                });
+            }
+        }).catch(err => {
+            console.error("Error during submitOrder operation:", err); // 调试信息：捕获并打印错误
+            wx.showToast({ // 显示失败提示框
+                title: '提交订单失败',
+                icon: 'none'
+            });
+        });
     }
-})
+    */
+});

yuan ma/mp-shop/pages/cart/cart.json

@@ -2,6 +2,7 @@
     "usingComponents": {
         "van-swipe-cell": "@vant/weapp/swipe-cell/index",
         "van-cell": "@vant/weapp/cell/index",
-        "van-card": "@vant/weapp/card/index"
+        "van-card": "@vant/weapp/card/index",
+        "van-submit-bar": "@vant/weapp/submit-bar/index"
     }
 }

yuan ma/mp-shop/pages/cart/cart.wxml

@@ -5,4 +5,9 @@
             <view data-id="{{ item.id }}" bindtap="delCartHandle" slot="right" class="van-swipe-cell-right">删除</view>
         </van-swipe-cell>
     </view>
-</view>
+    <van-submit-bar
+        price="{{ totalPrice }}"
+        button-text="提交订单"
+        bind:submit="onSubmit"
+    />
+</view>

yuan ma/mp-shop/pages/details/details.js

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

yuan ma/mp-shop/pages/details/details.wxml

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

yuan ma/mp-shop/pages/details/details.wxss

@@ -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 {
-    color: #f2270c;
+    color: #f2270c; /* 设置价格文字颜色为红色 */
 }
 
-.details .content .price text{
-    color: #f2270c;
-    display: inline-block;
-    font-family: JDZH-Regular;
-    font-size: 20px;
-    line-height: 30px;
+/* 商品价格中的文本样式 */
+.details .content .price text {
+    color: #f2270c; /* 设置价格文字颜色为红色 */
+    display: inline-block; /* 使文本块级显示，方便设置其他样式 */
+    font-family: JDZH-Regular; /* 设置字体为 JDZH-Regular */
+    font-size: 20px; /* 设置字体大小为 20px */
+    line-height: 30px; /* 设置行高为 30px */
 }
 
-.details .content .title{
-    font-size: 15px;
-    font-weight: 700;
+/* 商品标题的样式 */
+.details .content .title {
+    font-size: 15px; /* 设置字体大小为 15px */
+    font-weight: 700; /* 设置字体加粗 */
 }
 
-.details .introduce image{
-    width: 100%;
-}
+/* 商品详细介绍图片的样式 */
+.details .introduce image {
+    width: 100%; /* 图片宽度占满父容器 */
+}

yuan ma/mp-shop/pages/index/index.js

@@ -1,102 +1,117 @@
-const { getBanner,getGoods } = require("../../api/index.js")
+// 引入api模块中的getBanner和getGoods函数
+const { getBanner, getGoods } = require("../../api/index.js")
 
+// 定义页面对象
 Page({
+    // 页面数据
     data: {
-        value: "",
-        swiperOptions:{
-            indicatorDots:true,
-            autoplay:true,
-            interval:3000,
-            duration:1000,
-            swiperData:[]
+        value: "", // 搜索框的值，初始为空字符串
+        swiperOptions: {
+            indicatorDots: true, // 是否显示面板指示点
+            autoplay: true,      // 是否自动切换
+            interval: 3000,      // 自动切换时间间隔，单位为毫秒
+            duration: 1000,      // 滑动动画时长，单位为毫秒
+            swiperData: []       // 轮播图的数据源，初始为空数组
         },
-        navData:[
+        navData: [
+            // 导航栏数据
             {
-                text:"数码",
-                icon:"like",
-                color:"#ff0000"
+                text: "数码",    // 文本内容
+                icon: "like",    // 图标名称
+                color: "#ff0000" // 图标颜色
             },
             {
-                text:"生鲜",
-                icon:"star",
-                color:"#ff0000"
+                text: "生鲜",
+                icon: "star",
+                color: "#ff0000"
             },
             {
-                text:"会员",
-                icon:"fire",
-                color:"#ff0000"
+                text: "会员",
+                icon: "fire",
+                color: "#ff0000"
             },
             {
-                text:"优惠",
-                icon:"gift",
-                color:"#ff0000"
+                text: "优惠",
+                icon: "gift",
+                color: "#ff0000"
             },
             {
-                text:"充值",
-                icon:"phone",
-                color:"#ff0000"
+                text: "充值",
+                icon: "phone",
+                color: "#ff0000"
             },
             {
-                text:"领券",
-                icon:"gem",
-                color:"#ff0000"
+                text: "领券",
+                icon: "gem",
+                color: "#ff0000"
             },
             {
-                text:"外卖",
-                icon:"gift-card",
-                color:"#ff0000"
+                text: "外卖",
+                icon: "gift-card",
+                color: "#ff0000"
             },
             {
-                text:"美食",
-                icon:"smile",
-                color:"#ff0000"
+                text: "美食",
+                icon: "smile",
+                color: "#ff0000"
             }
         ],
-        page:1,
-        goodsData:[]
+        page: 1, // 当前页码，初始为1
+        goodsData: [] // 商品数据，初始为空数组
     },
+
+    // 页面加载时执行的函数
     onLoad() {
-        getBanner().then(res =>{
+        // 获取轮播图数据
+        getBanner().then(res => {
             this.setData({
-                indicatorDots:true,
-                autoplay:true,
-                interval:3000,
-                duration:1000,
-                swiperData:res.data.data.result
+                indicatorDots: true, // 设置是否显示面板指示点
+                autoplay: true,      // 设置是否自动切换
+                interval: 3000,      // 设置自动切换时间间隔
+                duration: 1000,      // 设置滑动动画时长
+                swiperData: res.data.data.result // 设置轮播图数据
             })
         })
+        // 加载第一页商品数据
         this.http(this.data.page)
     },
-    http(page){
-        getGoods({page}).then(res =>{
-            if(!res.data.msg){
+
+    // 获取商品数据的函数
+    http(page) {
+        getGoods({ page }).then(res => {
+            if (!res.data.msg) {
+                // 如果没有错误消息，合并新数据到现有商品数据中
                 this.setData({
-                    // 老数据合并新数据，做累加操作
-                    goodsData:this.data.goodsData.concat(res.data.data.result)
+                    goodsData: this.data.goodsData.concat(res.data.data.result) // 累加新数据
                 })
-            }else{
-                // 给出用户提示
+            } else {
+                // 如果有错误消息，显示提示信息
                 wx.showToast({
-                  title: res.data.msg,
-                  icon:"success",
-                  duration:2000
+                    title: res.data.msg, // 提示信息内容
+                    icon: "success",     // 提示图标类型
+                    duration: 2000       // 提示显示时长，单位为毫秒
                 })
             }
         })
     },
-    onReachBottom(){
-        // 更改页码
+
+    // 页面滚动到底部时触发的函数
+    onReachBottom() {
+        // 更新页码
         this.setData({
-            page:this.data.page += 1
+            page: this.data.page + 1 // 页码加1
         })
+        // 加载下一页商品数据
         this.http(this.data.page)
     },
+
     /**
-     * 点击搜索框获取焦点
+     * 点击搜索框获取焦点时触发的函数
      */
-    clickSearch(){
+    clickSearch() {
+        // 跳转到搜索页面
         wx.navigateTo({
-          url: '/pages/search/search',
+            url: '/pages/search/search',
         })
     }
-})
+})

yuan ma/mp-shop/pages/index/index.wxml

@@ -1,19 +1,31 @@
-<view class="index-container">
-    <view class="header">
-        <van-search bindtap="clickSearch" disabled bind:focus="clickSearch" value="{{ value }}" shape="round" background="#fa2c19" placeholder="请输入搜索关键词" />
+<view class="index-container"> <!-- 整个页面的容器 -->
+    <view class="header"> <!-- 头部区域 -->
+        <van-search
+            bindtap="clickSearch" <!-- 点击搜索框时触发 clickSearch 方法 -->
+            disabled <!-- 搜索框禁用 -->
+            bind:focus="clickSearch" <!-- 搜索框获得焦点时触发 clickSearch 方法 -->
+            value="{{ value }}" <!-- 搜索框的值绑定到 value 变量 -->
+            shape="round" <!-- 搜索框形状为圆角 -->
+            background="#fa2c19" <!-- 搜索框背景颜色 -->
+            placeholder="请输入搜索关键词" /> <!-- 搜索框占位符文本 -->
         <!-- 轮播图 -->
-        <swiper swiperData="{{ swiperData }}" indicatorDots="{{ swiperOptions.indicatorDots }}" autoplay="{{ swiperOptions.autoplay }}" interval="{{ swiperOptions.interval }}" duration="{{ swiperOptions.duration }}"></swiper>
+        <swiper
+            swiperData="{{ swiperData }}" <!-- 轮播图数据绑定到 swiperData 变量 -->
+            indicatorDots="{{ swiperOptions.indicatorDots }}" <!-- 是否显示面板指示点 -->
+            autoplay="{{ swiperOptions.autoplay }}" <!-- 是否自动切换 -->
+            interval="{{ swiperOptions.interval }}" <!-- 自动切换时间间隔 -->
+            duration="{{ swiperOptions.duration }}"> <!-- 滑动动画时长 -->
+        </swiper>
     </view>
-    <view class="nav">
-        <van-grid column-num="4">
-            <van-grid-item 
-                wx:key="index"
-                icon-color="{{ item.color }}" 
-                icon="{{ item.icon }}" 
-                text="{{ item.text }}" 
-                wx:for="{{ navData }}" />
+    <view class="nav"> <!-- 导航区域 -->
+        <van-grid column-num="4"> <!-- 4列的网格布局 -->
+            <van-grid-item
+                wx:key="index" <!-- 每个网格项的唯一标识 -->
+                icon-color="{{ item.color }}" <!-- 图标颜色 -->
+                icon="{{ item.icon }}" <!-- 图标名称 -->
+                text="{{ item.text }}" <!-- 文本内容 -->
+                wx:for="{{ navData }}" /> <!-- 循环渲染 navData 中的数据 -->
         </van-grid>
     </view>
-    <goods-list goodsData="{{ goodsData }}"></goods-list>
-
-</view>
+    <goods-list goodsData="{{ goodsData }}"></goods-list> <!-- 商品列表组件，数据绑定到 goodsData 变量 -->
+</view> <!-- 整个页面的容器结束 -->

yuan ma/mp-shop/pages/index/index.wxss

@@ -1,13 +1,13 @@
-.header{
-    background-image: -webkit-gradient(linear, left bottom, left top, from(#f1503b), color-stop(50%, #c82519));
-    background-image: -webkit-linear-gradient(bottom, #f1503b, #c82519 50%);
-    background-image: linear-gradient(0deg, #f1503b, #c82519 50%);
-    width: 100%;
-    height: 190px;
-    border-bottom-left-radius: 100%;
-    border-bottom-right-radius: 100%;
+.header { /* 定义头部区域的样式 */
+    background-image: -webkit-gradient(linear, left bottom, left top, from(#f1503b), color-stop(50%, #c82519)); /* 使用 WebKit 渐变从底部到顶部，颜色从 #f1503b 到 #c82519 */
+    background-image: -webkit-linear-gradient(bottom, #f1503b, #c82519 50%); /* 使用 WebKit 线性渐变从底部到顶部，颜色从 #f1503b 到 #c82519 */
+    background-image: linear-gradient(0deg, #f1503b, #c82519 50%); /* 使用标准线性渐变从底部到顶部，颜色从 #f1503b 到 #c82519 */
+    width: 100%; /* 宽度占满父容器 */
+    height: 190px; /* 高度为 190 像素 */
+    border-bottom-left-radius: 100%; /* 左下角圆角半径为 100%，形成圆形效果 */
+    border-bottom-right-radius: 100%; /* 右下角圆角半径为 100%，形成圆形效果 */
 }
 
-.nav{
-    margin-top: 10px;
-}
+.nav { /* 定义导航区域的样式 */
+    margin-top: 10px; /* 上外边距为 10 像素 */
+}

yuan ma/mp-shop/pages/search/search.js

@@ -9,21 +9,37 @@ Page({
         hotSearch:[],
         value:"",
         goodsData:[]
+
     },
     /**
      * 生命周期函数--监听页面加载
+     *.list-keywords {
+         *margin: 10px;
+         *padding: 10px;
+         *background: #fff;
+     *}1
+     *.list-keywords .item{
+         *display: inline-block;
+         *padding: 5px 10px;
+         *background: #f1f1f1;
+         *margin: 5px;
+         *font-size: 12px;
+         *color: #666;
+     *}
      */
     onLoad(options) {
-        getHotSearch().then(res =>{
+        getHotSearch().then(res =>{//获取热点搜索函数
             this.setData({
-                hotSearch:res.data.data.result
+                hotSearch:res.data.data.result//搜索数据结果
             })
+
         })
     },
     // 内容改变
-    onChange(e){
-        this.setData({
-            value:e.detail
+    onChange(e){//内容展示函数
+        this.setData({//放置数据
+            value:e.detail//获取值
+
         })
     },
 
@@ -34,31 +50,37 @@ Page({
      */
 
     // 实现搜索
-    onSearch(){
-        this.http(this.data.value)
+    onSearch(){//搜索函数
+        this.http(this.data.value)//1
     },
-    onSearchCliclk(){
-        this.http(this.data.value)
+    onSearchCliclk(){//搜索点击函数
+        this.http(this.data.value)//1
     },
     /**
      * 获取热门关键字
      */
     clickGetKeyWords(e){
-        this.http(e.currentTarget.dataset.hotkey)
+        this.http(e.currentTarget.dataset.hotkey)//使用this
     },
     http(search){
         getSearch({search}).then(res =>{
             if(!res.data.msg){
                 // 序列化
-                let goods = JSON.stringify(res.data.data)
+                let goods = JSON.stringify(res.data.data)//数据
                 wx.navigateTo({
-                    url: '/pages/goods/goods?goodsData=' + goods,
+                    url: '/pages/goods/goods?goodsData=' + goods,//给出跳转网址0
                 })
             }else{
                 wx.showToast({
-                  title: res.data.msg,
+                  title: res.data.msg,//获取记录搜索结果总数0
                 })
             }
         })
     }
-})
+})    /**
+       *  展示搜索数据，在goods页面展示
+       *      1. 在搜索页面通过网络请求获取数据，传递到goods页面显示
+       *      2. 在搜索页面将搜索的关键字传递到goods页面，在goods页面做网络请求
+       */
+
+      // 实现搜索7

yuan ma/mp-shop/pages/search/search.json

@@ -3,4 +3,4 @@
         "van-search": "@vant/weapp/search/index",
         "van-button": "@vant/weapp/button/index"
     }
-}
+}

yuan ma/mp-shop/pages/search/search.wxml

@@ -1,6 +1,6 @@
 <view>
     <van-search value="{{ value }}" placeholder="请输入搜索关键词" use-action-slot bind:change="onChange" bind:search="onSearch">
-        <van-button type="primary" size="small" slot="action" bind:tap="onSearchCliclk">搜索</van-button>
+        <van-button type="primary" size="small" slot="action" bind:tap="onSearchCliclk">搜索</van-button>//搜索提示11
     </van-search>
     <view class="list-keywords">
         <text data-hotkey="{{ item.content }}" bindtap="clickGetKeyWords" class="item" wx:for="{{ hotSearch }}" wx:key="index">{{ item.content }}</text>

yuan ma/mp-shop/pages/search/search.wxss

@@ -10,4 +10,4 @@
     margin: 5px;
     font-size: 12px;
     color: #666;
-}
+}

yuan ma/mp-shop/pages/user/user.js

@@ -1,5 +1,5 @@
 const { getLogin } = require("../../api/index.js")
-
+//1231344
 Page({
     data: {
         userInfo: {},

yuan ma/mp-shop/project.config.json

@@ -49,8 +49,8 @@
         "useCompilerPlugins": false
     },
     "compileType": "miniprogram",
-    "libVersion": "2.19.4",
-    "appid": "wx4ce6ca2eb67b5bf7",
+    "libVersion": "2.25.3",
+    "appid": "touristappid",
     "projectname": "miniprogram-92",
     "condition": {},
     "editorSetting": {