微信小程序 商品详情内 对商品sku选择价格跟随变化 变换后进行余额支付 并修改订单状态

1.商品列表 本片需自己补充CSS样式

小程序端

JS

页面加载事件 请求接口 赋值给data

/**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        wx.request({
          url: 'http://www.essou.com/index.php/api/goodsdata',
          method:'POST',
          header: {
            'token':wx.getStorageSync('token')
        }, // 设置请求的 header
          data:{page:this.data.page},
          dataType:'json',
          success:res =>{
              this.setData({
                  data:res.data.data
              })
          }
        })
    },

2.后端php查询商品数据

 //商品列表
    public function goodsData()
    {
        //查询商品数据 
        $goodsData = Goods::get();
        return json_encode(['code'=>200,'msg'=>'成功','data'=>$goodsData]);
    }

3.小程序端页面HTML渲染数据

HTML

<view wx:for="{
  {data}}" class="zzz" > 
<view>{
  {item.gid}}</view>
<view>商品名称：{
  {item.goods_name}}</view>
<view>商品价格：{
  {item.goods_price}}</view>
<view bindtap="details" id="{
  {item.gid}}" >
    查看详情
</view>
</view>

4.点击查看详情进入详情页面

details(e){
        // 给查看详情按钮自定义一个id属性如：id="{
  {item.gid}}" 
        let id = e.target.id
        wx.navigateTo({
          url: '/pages/detail/detail?id='+id,
        })
    },

5.在详情页的js文件中的页面加载生命周期函数中查询商品信息

/**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        //接收传递来的id
        let gid = options.id
        // console.log(gid);
        wx.request({
          url: 'http://www.essou.com/index.php/api/goodsDetail',
          data:{id:gid},
          header:{
              'token':wx.getStorageSync('token')
          },
          success:res=>{
              this.setData({
                goodsData:res.data.data,
              })
          }
        
        })
    },

6.后端php 接口请求

Controller 控制器 查询一条商品详情数据返回小程序端（前端）

//商品详情
    public function goodsDetail(Request $request)
    {
        //接收商品id
        $gid = $request->get('id');

        $Goods = new Goods();
        //查询返回商品数据 商品规格 商品规格值 （模型关联）
        $data = $Goods->where('gid',$gid)->with(['spec','spec.specsValues'])->first()->toArray();
        return json_encode(['code'=>200,'msg'=>'success','data'=>$data]);
    }

 Model 模型层（模型关联）

商品表关联规格表

class Goods extends Model
{
    use HasFactory;
    protected $tabl