m0_69233734 2024-06-23 01:47 采纳率: 61.9%
浏览 4

这个接口获取的信息用于图中的红框标题部分改如何解决

我想把从http://123.57.4.50:8086/admin/get_cart_list这个接口获取的信息用于图中的红框标题部分改如何解决

img


```javascript
// pages/shopcar/shopcar.js
Page({

  data: {
    cartList: [],
    carts:// 购物车内商品数据
    [
     
      { id: 1, title: '华为 HUAWEI P10 全网通 4GB+64G 曜石黑 移动联通电信4GB手机', num: 1, price: 4500, selected: true ,url:"//img13.360buyimg.com/n7/jfs/t1/230981/8/20635/66984/666c35b2F95ad1b68/8d6934082a2560b7.jpg"},
      { id: 2, title: 'Apple苹果 全网通 4GB+64G 曜石黑 移动联通电信4GB手机', num: 1, price: 6800, selected: true ,url:"//img10.360buyimg.com/n7/jfs/t1/234248/16/5432/64755/656ec63eF2e9ab3e9/780764de97d4c7be.jpg"},
      { id: 3, title: '小米 全网通 4GB+64G 曜石黑 移动联通电信4GB手机', num: 1, price: 4800, selected: true ,url:"//img12.360buyimg.com/n7/jfs/t1/235244/16/20663/77823/6671432bF61e47f63/af43ca9d8856f310.jpg"},
      { id: 4, title: '小米 全网通 4GB+64G 曜石黑 移动联通电信4GB手机', num: 1, price: 4800, selected: true ,url:"//img12.360buyimg.com/n7/jfs/t1/235244/16/20663/77823/6671432bF61e47f63/af43ca9d8856f310.jpg"},
      { id: 5, title: '小米 全网通 4GB+64G 曜石黑 移动联通电信4GB手机', num: 1, price: 4800, selected: true ,url:"//img12.360buyimg.com/n7/jfs/t1/235244/16/20663/77823/6671432bF61e47f63/af43ca9d8856f310.jpg"},
      { id: 6, title: '小米 全网通 4GB+64G 曜石黑 移动联通电信4GB手机', num: 1, price: 4800, selected: true ,url:"//img12.360buyimg.com/n7/jfs/t1/235244/16/20663/77823/6671432bF61e47f63/af43ca9d8856f310.jpg"},
      
    ],
    //  hasList: tue,          // 列表是否有数据
    totalPrice: 0,           // 总价,初始为0
    selectAll: true,    // 全选状态,默认不全选
    selectNum: 0         //选中的件数

  },
  //计算总价格
   totlePrice: function () {
    let carts = this.data.carts;
    let total = 0;
    let num = 0;
    for (let i = 0; i < carts.length; i++) {         // 循环列表得到每个数据
      if (carts[i].selected) {                   // 判断选中才会计算价格
        total += carts[i].num * carts[i].price;
        num += carts[i].num;
      }
    }
    this.setData({
      selectNum: num,
      totalPrice: total.toFixed(2)
    });
  },
  /**
   * 生命周期函数--监听页面显示
   */
   onShow: function () {
    
    this.totlePrice()
    
  },
  //选中反选
   selected: function (e) {
    const index = e.currentTarget.dataset.num;
    let carts = this.data.carts;
    let selectAll = this.data.selectAll;
    let count = 0;
    carts[index].selected = !carts[index].selected;
    //判断全选状态
    for (let i = 0; i < carts.length; i++) {
      if (carts[i].selected == true) {
        count++;
      }
    }
    if (count == 3) {
      selectAll = true;
    } else {
      selectAll = false;
    }
    this.setData({
      carts: carts,
      selectAll: selectAll
    });
    this.totlePrice();
  },
  //全选
  selectedAll: function () {
    let selectAll = this.data.selectAll;   // 是否全选状态
    selectAll = !selectAll;
    let carts = this.data.carts;

    for (let i = 0; i < carts.length; i++) {
      carts[i].selected = selectAll;    // 改变所有商品状态
    }
    this.setData({
      selectAll: selectAll,
      carts: carts
    });
    this.totlePrice();     // 获取总价
  },
  //增加
  addNum : function(e){
    const index = e.currentTarget.dataset.num;
    let carts = this.data.carts;
    let num = carts[index].num;
    num = num + 1;
    carts[index].num = num;
    this.setData({
      carts: carts
    });
    this.totlePrice();
  },
  //减少
  subNum : function(e){
    const index = e.currentTarget.dataset.num;
    let carts = this.data.carts;
    let num = carts[index].num;
    if (num <= 1) {
      return false;
    }
    num = num - 1;
    carts[index].num = num;
    this.setData({
      carts: carts
    });
    this.totlePrice();
  },

  gotoOrders(){
    // 存储到全局数据时使用 totalPrice 作为键
    getApp().globalData.totalPrice = this.data.totalPrice;
    wx.switchTab({
      url: `/pages/orders/orders`,
    })
  },

  //
  onLoad: function() {
    this.getCartList();
  },
  getCartList: function() {
    wx.request({
      url: 'http://123.57.4.50:8086/admin/get_cart_list', // 更新请求的URL
      method: 'GET',
      success: (res) => {
        if(res.statusCode === 200 && res.data) {
          // 假设接口直接返回了购物车列表,我们将直接用它来更新数据
          this.setData({
            carts: res.data.title // 直接将接口返回的数据赋值给carts
          });
        } else {
          console.error('请求购物车列表数据失败');
        }
      },
      fail: (err) => {
        console.error('请求失败', err);
      }
    });
  },


  
 
})

<!--pages/shopcar/shopcar.wxml-->
<view class="list" wx:for="{{carts}}" wx:key="*this">
  <view class="choose">
    <view class="option {{item.selected == true?'selected':'selected1'}}" data-num="{{index}}" bindtap="selected" ></view>
  </view>
  <view class="imgages">
    <image class="navimg" src="{{item.url}}"></image>
  </view>
  <view class="info">
    <text class="title" >{{item.title}}</text>
    <text class="specify">重量:0.506kg; 规格:曜石黑,64GB</text>
    <text class="charge"><text>{{item.price}}</text></text>
    <view class="buy-num">
      <text class="add" bindtap="addNum" data-num="{{index}}">+</text>
      <text class="goodsNum">{{item.num}}</text>
      <text class="sub" bindtap="subNum" data-num="{{index}}">-</text>
    </view>
  </view>
</view>
<!--底部-->
<view class="footer">
  <view class="allchoice choose">
    <view class="option {{selectAll == true?'selectedall':'selected1'}}" bindtap="selectedAll"></view>全选
  </view>
  

  <view class="gotonext" bind:tap="gotoOrders">结算({{selectNum}}件)</view>
  
  <view class="total">总计:
    <text class="money">¥{{totalPrice}}</text>
     <text class="other">不含运费,已优惠50.00</text>
  </view>
  
</view>


```

  • 写回答

2条回答 默认 最新

  • 阿里嘎多学长 2024-06-23 01:48
    关注

    以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳:


    要解决你的问题,我们需要确保从指定接口获取的数据能够正确地解析并更新到微信小程序的购物车页面。以下是你需要做的步骤:

    1. 确保接口返回的数据格式正确:首先,你需要确认接口返回的数据格式是否符合你的预期。通常,接口会返回JSON格式的数据。例如,接口返回的数据可能如下所示:

      {
        "items": [
          {
            "id": 1,
            "title": "华为 HUAWEI P10 ...",
            "num": 1,
            "price": 4500,
            "selected": true,
            "url": "image_url.jpg"
          },
          ...
        ]
      }
      
    2. 更新getCartList函数:你需要确保getCartList函数能够正确处理接口返回的数据。根据你提供的代码,getCartList函数中的success回调应该更新carts数组。这里有一个示例:

      getCartList: function() {
        wx.request({
          url: 'http://123.57.4.50:8086/admin/get_cart_list',
          method: 'GET',
          success: (res) => {
            if(res.statusCode === 200 && res.data) {
              // 假设接口返回的数据包含一个items数组
              this.setData({
                carts: res.data.items // 更新carts数组
              });
            } else {
              console.error('请求购物车列表数据失败');
            }
          },
          fail: (err) => {
            console.error('请求失败', err);
          }
        });
      },
      
    3. 更新页面数据:确保setData方法被调用,以更新页面上的数据。这已经在getCartList函数中通过this.setData实现。

    4. 更新红框标题部分:红框标题部分应该显示选中商品的总数和总价。这可以通过调用totlePrice函数来实现,该函数已经在你的代码中定义。确保在更新carts数据后调用这个函数:

      // 在getCartList函数中调用totlePrice
      this.getCartList();
      
    5. 确保数据绑定正确:在你的WXML文件中,确保使用的数据绑定是正确的。例如,如果你要显示选中商品的数量,你应该绑定到selectNum,如果要显示总价,应该绑定到totalPrice

    6. 测试:在完成上述步骤后,确保在微信开发者工具中测试你的小程序,以验证数据是否正确显示。

    如果你需要进一步的帮助或者有特定的问题,随时告诉我,我会尽力提供帮助。记住,没有过于基础的问题,随时欢迎你的询问。

    注意:我没有提供具体的参考链接,因为解决方案主要基于你提供的代码和常见的开发实践。如果你需要查找更多资源,可以搜索微信小程序开发文档或相关的开发社区。

    评论 编辑记录

报告相同问题?

问题事件

  • 创建了问题 6月23日

悬赏问题

  • ¥15 vika文档如何与obsidian同步
  • ¥15 华为手机相册里面的照片能够替换成自己想要的照片吗?
  • ¥15 陆空双模式无人机飞控设置
  • ¥15 sentaurus lithography
  • ¥100 求抖音ck号 或者提ck教程
  • ¥15 关于#linux#的问题:子进程1等待子进程A、B退出后退出(语言-c语言)
  • ¥20 web页面如何打开Outlook 365的全球离线通讯簿功能
  • ¥15 io.jsonwebtoken.security.Keys
  • ¥15 急,ubuntu安装后no caching mode page found等
  • ¥15 联想交换机NE2580O/NE1064TO安装SONIC