2022.11.10

scr/food/pages/detail/detail.js

@@ -8,7 +8,7 @@ Page({
    */
   data: {
     detailObj: {},
-    index: null,
+    
     list:[],
     clockresult:[],
    
@@ -18,43 +18,23 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-    this.clockData()
-    let id =options.id
-        cont.doc(id).get()
-        .then(res => {
-            console.log('22')
-            console.log('食物详情页', res)
-            this.setData({
-              detailObj: res.data
-            })
-        })
+ 
+  let foodid =options.id
+  cont.doc(foodid).get({
+    success: res => {
+      console.log(res.data)
+      //这一步很重要，给ne赋值，没有这一步的话，前台就不会显示值      
+      this.setData({
+        detailObj: res.data
+      })
+    }
+   })
+      
   },
   // 渲染数据
-  clockData() {
-    var _this = this
-    wx.request({
-      url:'/pages/index/index'+ this.data.index, //url   this.data.index是id
-      method: 'GET', //请求方式
-      header: {
-        'content-type': 'application/json'
-      }, // 设置请求的 header 
-      success: function (res) {
-        let list = [];
-        let box = (res.data.obj.assignDates === null) ? [] : res.data.obj.assignDates.substring(0, res.data.obj.assignDates.length - 1).replace(/,/g, " ")  
- //这里的效果跟上面的是一样的效果，就是不用foeEach循环了，就是另一种方法，这个较麻烦一点
-          list.push((box.length <= 0) ? [] : box.split(' '))
-        _this.setData({
-          list,
-          clockresult: res.data.obj,
-        })
-      },
-      fail: function () {
-        app.consoleLog("请求数据失败");
-      },
-      complete: function () {
-      }
-    })
-  },
+  
+      
+
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

scr/food/pages/detail/detail.wxml

@@ -1,3 +1,19 @@
 <view class="container">
-<view>{{clockresult.food_name}}</view>
+
+<image src="{{detailObj.url}}"></image>
+<view class="detail">
+<text class="title">{{detailObj.food_name}}</text>
+<text>{{detailObj.food_shop}}</text>
+<text class="price">￥{{detailObj.price}}</text>
 </view>
+</view>
+<view class="separate"></view>
+  <!-- sku选择 -->
+  <text bindtap="toggleDialog">请选择购买数量</text>
+  <view class="separate"></view>
+  <text>商品评价</text>
+  <text class="text-remark">东西还可以，好评~</text>
+  <view class="separate"></view>
+  <view class="detail-nav">
+  <button class="button-green" bindtap="addCar" formType="submit">加入购物车</button>
+  <button class="button-red" bindtap="immeBuy" formType="submit">立即购买</button></view>

scr/food/pages/detail/detail.wxss

@@ -1 +1,23 @@
-/* pages/detail/detail.wxss */
+/* pages/detail/detail.wxss */
+page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.detail {
+  display: flex;
+  flex-direction: column;
+  margin-top: 15rpx;
+  margin-bottom: 0rpx;
+}
+.detail .title {
+  font-size: 40rpx;
+  margin: 10rpx;
+  color: black;
+  text-align: justify;
+}
+.detail .price {
+  color: red;
+  font-size: 40rpx;
+  margin: 10rpx;
+}

scr/food/pages/index/index.js

@@ -9,7 +9,8 @@ Page({
   data: {
     foodlist:[],
     tabs: ['主食', '甜品', '小吃','吃得快','辣','甜','清淡'],
-    cateList:[]
+    cateList:[],
+    index:null
   },
 
   
@@ -36,10 +37,9 @@ Page({
   //跳转详情页
   toDetail: function (event) {
     // 获取 event 事件对象
- 
     // 获取点击对应的下标
-    const index = event.currentTarget.dataset.id  
-     console.log(event)
+    var index = event.currentTarget.dataset.foodid; 
+     console.log(index);
  //抓取id进行赋
     //wx.navigateTo 会触发页面隐藏onHide
     console.log('11111')

scr/food/pages/index/index.wxml

@@ -23,7 +23,7 @@
 <view class="foodlist">
 <view class='a' wx:for="{{foodlist}}"><!--wx:for是微信数据绑定的一种方式，该数组有多少数据就显示多少个view-->
     <!--item就相当于数组名+下标的结合体，适用于调用数组所有数据-->
-    <view bindtap="toDetail"  id="{{item.id}}">
+    <view catchtap="toDetail"   data-foodid="{{item._id}}">
     <view class='img'>
     <image src="{{item.url}}" ></image>
     </view>