×
微信咨询
微信二维码

长按图片识别添加或保存到相册

产品服务 帮助文档

后端修改传递到小程序前端的完整流程

后端修改会员价格后,通过模型计算、API响应、小程序请求接收、数据处理和页面展示,完整传递到前端。涵盖单规格与多规格商品,实现前后端分离架构下的价格同步。

来团智慧商业小程序零代码开发平台 多行业适用

来团智慧商业小程序零代码开发平台 多行业适用

来团智慧商业小程序零代码开发平台,多行业适配。无需代码,拖拽式设计,轻松打造订货商城、会员制商城、分销商城及小程序官网。不仅能满足通用需求,还支持定制化,从页面布局到功能模块,随心定制,助您快速搭建专属商业小程序,抢占市场先机。

1. 后端处理流程

数据修改路径 :

api/model/Goods.php:setGoodsGradeMoney() → 
setGoodsListDataFromApi() → getDetails() → api/
controller/Goods.php:detail() → 前端

详细步骤 :

  1. 会员价格计算 : setGoodsGradeMoney() 方法根据会员等级和商品设置计算会员价格
  2. 数据处理 : setGoodsListDataFromApi() 调用价格计算方法
  3. API响应 : detail() 控制器方法将计算后的商品数据返回给前端

2. 前端接收流程

数据接收路径 :

index.js:getGoodsDetail() → 
_initGoodsDetailData() → setData() → 页面展示

详细步骤 :

  1. API请求 : getGoodsDetail() 方法调用 App._get('goods/detail') 获取商品详情
  2. 数据初始化 : _initGoodsDetailData() 方法处理后端返回的数据
  3. 价格设置 :从返回的 detail 中提取价格信息并设置到页面数据
  4. 页面更新 :通过 setData() 将价格等信息更新到页面

3. 关键传递节点 后端修改点

  • Goods.php (model) :我们修改了 setGoodsGradeMoney() 方法,实现了三种会员价格设置方式
  • Goods.php (controller) : detail() 方法将计算后的商品数据返回给前端 前端接收点
  • index.js : getGoodsDetail() 方法接收后端数据
  • index.js : _initGoodsDetailData() 方法处理数据并设置价格

4. 价格数据传递示例

后端计算 :

  1. 后端根据会员等级和商品设置计算会员价格
  2. 将计算后的价格存储在 goods['sku'][0]['goods_price'] 等字段中
  3. 通过 API 返回完整的商品详情数据
    前端使用 :
// 初始化商品详情数据
_initGoodsDetailData(data) {
  let goodsDetail = data.detail;
  // 商品价格/划线价/库存
  data.goods_sku_id = goodsDetail.goods_sku.
  spec_sku_id;
  data.goods_price = goodsDetail.goods_sku.
  goods_price;  // 这里就是后端计算的会员价格
  data.line_price = goodsDetail.goods_sku.
  line_price;
  data.stock_num = goodsDetail.goods_sku.
  stock_num;
  return data;
},

5. 多规格商品的价格传递

对于多规格商品,价格传递流程:

  1. 后端计算所有 SKU 的会员价格
  2. 前端初始化多规格数据时,价格已包含在 spec_list 中
  3. 当用户切换规格时,前端从 spec_list 中获取对应 SKU 的价格
// 更新商品规格信息
_updateSpecGoods() {
  let specSkuId = goodsSpecArr.join('_');
  // 查找skuItem
  let spec_list = _this.data.goodsMultiSpec.
  spec_list,
    skuItem = spec_list.find((val) => {
      return val.spec_sku_id == specSkuId;
    });
  // 更新商品价格、划线价、库存
  if (typeof skuItem === 'object') {
    _this.setData({
      goods_price: skuItem.form.
      goods_price,  // 这里获取的是对应规格的会员价
      格
      line_price: skuItem.form.line_price,
      stock_num: skuItem.form.stock_num
    });
  }
},

总结

后端修改通过以下路径传递到前端:

  1. 数据计算 :后端模型计算会员价格
  2. API响应 :控制器将计算后的数据返回
  3. 前端接收 :小程序发起请求并接收数据
  4. 数据处理 :前端处理数据并设置页面状态
  5. 页面展示 :最终在小程序页面上显示计算后的会员价格
    整个流程是一个典型的前后端分离架构中的数据传递过程,后端负责业务逻辑计算,前端负责数据展示。
大纲

文章目录

    联系我们
    联系方式
    • 官方服务热线:17721141027
    • 邮箱:kf@ilaituan.com
    • QQ:20262336
    扫码添加客服
    微信
    联系我们