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

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

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

小程序端

JS

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

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.request({url: '.php/api/goodsdata',method:'POST',header: {'token':wx.getStorageSync('token')}, // 设置请求的 headerdata:{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>商品名称：{{ds_name}}</view>
<view>商品价格：{{ds_price}}</view>
<view bindtap="details" id="{{item.gid}}" >查看详情
</view>
</view>

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

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

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

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//接收传递来的idlet gid = options.id// console.log(gid);wx.request({url: '.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 $table = 'goods';protected $primaryKey = 'gid';public function spec(){//关联模型名+外键id+当前表主键idreturn $this->hasMany('AppModelsSpec','g_id','gid');}}

规格表关联规格值表

class Spec extends Model
{use HasFactory;protected $table = 'specs';protected $primaryKey = 'sid';public function specsValues(){//关联模型名+外键id+当前表主键idreturn $this->hasMany('AppModelsSpecsValues','s_id','sid');}
}

7.规格值选择 详情请看 .htm

以下为本人代码

首先data里有我们待会需要的数据提前定义

data: {goodsData:'',arr: [],val:[],//商品规格值str:[],//商品idgid:[],indexArr: [],//商品数量number:1,//总价格money:''},

然后JS规格选择代码（小程序js）

choice(e) {const fid = e.currentTarget.dataset.fid;const id = e.currentTarget.dataset.id;const arr = this.data.arr,arr2 = this.data.indexArr;//定义一个字符串变量 储存规格 以及规格值idlet str = '';//商品idlet gid = dsData.gid//规格 规格值idarr[fid] = dsData.spec[fid].specs_values[id].vid;arr2[fid] = id;//循环把 arr 数组里的规格以及规格值id 转变为字符串for (let i = 0; i < arr.length; i++) {if (arr[i] != undefined) {str += '_'+arr[i]}}str = str.substr(1)this.setData({arr: arr,indexArr: arr2,//商品规格值id（前面拼接后的规格值）str:str,//商品idgid:dsData.gid})if (arr.length >= 2) {wx.request({url: '.php/api/goodspec',method:'POST',header:{StorageSync('token')},data:{gid:gid,str:str},success:res=>{let goodsData = ds_price = res.data.data.pricethis.setData({goodsData:goodsData,money:(res.data.data.price) * this.data.number})//   console.log(dsData);}})}},

HTML

<view>{{ds_name}}</view>
<view>{{ds_price}}</view><view wx:for="{{goodsData.spec}}" wx:key="index" wx:key="index" wx:for-index="childIndex" style="margin: 40px 0"><view>{{item.spec_name}}</view><view class="s" wx:for="{{item.specs_values}}" wx:key="index" ><text class="{{indexArr[childIndex] == index ? 'active':''}}" bindtap="choice" data-fid="{{childIndex}}" data-id="{{index}}">{{item.value_name}}</text>
</view>
</view>
<view>
<button class="mini-btn" type="default" size="mini" bindtap="minus">-</button>
<text>{{number}}</text>
<button class="mini-btn" type="default" size="mini"  bindtap="plus">+</button>
<text>总价格：{{money}}</text>
</view>
<view>
<button type="primary" plain="true" bindtap="buy">立即支付</button>
</view>

页面选中的规格值改变颜色CSS

CSS里给一个颜色

.active{color: red;
}

商品数量加减（注意数量加减总价格也要随之改变 这里只写了数量加的价格变动 数量减也同理）

 //数量加1plus(){let number = this.data.number + 1;let goodsData = dsData;let price = ds_pricelet money =  money = price * numberthis.setData({number:number,money:money})},//数量-1minus(){let number = this.data.number-1;if (this.data.number >1) {this.setData({number:number})}else{wx.showToast({title: '数量不能小于1',})}},

8.点击立即支付生成订单并跳转展示订单页面 传递返回的订单号 用于查询订单

//立即支付生成订单表buy(){//订单表需要添加的数据//用户idlet uid = wx.getStorageSync('token');let gid = this.data.gid;let spec_value = this.data.str;let num = this.data.number;let price = if (spec_value == '') {wx.showToast({title: '请选择规格',icon:'none'})return false;}wx.request({url: '.php/api/orderfrom',method:'POST',header:{'token':wx.getStorageSync('token')},data:{uid,gid,spec_value,num,price},dataType:'json',success:res=>{console.log(res.data);if (de == 200) {// console.log(res.data.data);wx.navigateTo({url: '/pages/order/order'+'?osn='+res.data.data,})}else{wx.showToast({title: res.data.msg,icon:'none'})return false;}}})},

 9.后端php 生成订单 修改商品规格表数据

//支付订单表生成public function orderFrom(Request $request){$data = $request->post();$id = $request->post('uid');$uid = BaseController::verifyToken($id);//订单号$osn = date('Ymd') . str_pad(mt_rand(1, 99999), 5, '0', STR_PAD_LEFT);$data['uid'] = $uid;$data['order_number'] = $osn;//总库存$num = GoodsSpec::where(['gid' => $data['gid'], 'value' => $data['spec_value']])->first('num')->toArray();$num = $num['num'];//购买数量$goodsNumber = $data['num'];//剩余库存$residue = $num - $goodsNumber;if ($residue <= 0 ){return json_encode(['code' => 500, 'msg' => '库存不足', 'data' => '']);}DB::beginTransaction();try {Order::orderCreate($data);//修改商品规格表库存GoodsSpec::where(['gid' => $data['gid'], 'value' => $data['spec_value']])->update(['num' =>$residue]);DB::commit();return json_encode(['code' => 200, 'msg' => 'success', 'data' => $osn]);} catch (Exception $e) {DB::rollBack();return json_encode(['code' => 500, 'msg' => $e->getMessage(), 'data' => '']);}}

10.订单页面 展示 正常应显示商品规格以及规格值

HTML

<view>
<view>订单号：{{der_number}}</view>
<view>数量：{{orderData.num}}</view>
<view>总价格：{{orderData.price}}</view>
<button bindtap="buy">去支付</button>
</view>

JS

 onLoad: function (options) {//订单号let osn = options.quest({url: '.php/api/orderlist',method:'POST',header:{'token':wx.getStorageSync('token')},data:{osn},success:res=>{this.setData({orderData:res.data.data})//   console.log(derData.num);}})},

后端查询订单（注释部分需自己查询商品规格以及规格值）

//查询订单展示public function orderList(Request $request){$osn = $request->post('osn');$orderData = Order::where('order_number',$osn)->first()->toArray();//商品名称$goodsName = Goods::where('gid',$orderData['gid'])->first('goods_name')->toArray();
//        $Goods = new Goods();
//        $Goods->where('gid',$orderData['gid'])->with(['spec','spec.specsValues'])->first()->toArray();//商品规格
//        $spec = Spec::get('spec_name');//商品规格值return json_encode(['code'=>200,'msg'=>'success','data'=>$orderData]);}

11.点击支付立即支付订单 先要判断用户余额是否足够 之后 修改用户余额 以及订单状态

js（小程序）

buy(){//只需传递订单号到后台再进行查询处理即可console.log(der_number);wx.request({url: '.php/api/buy',method:'POST',header:{'token':wx.getStorageSync('token')},data:{order_number:der_number},success:res=>{console.log(res);}})},

后端 PHP

public function buy(Request $request){$orderNumber = $request->post('order_number');//查询订单信息$orderData = Order::where('order_number',$orderNumber)->first()->toArray();//取出总价格$price = $orderData['price'];//查询用户余额//取出用户id$id = $orderData['uid'];$userData = Rentings::where('id',$id)->first()->toArray();//取出用户余额$userMoney = $userData['money'];$money = $userMoney - $price;if ($userMoney - $price < 0){return json_encode(['code'=>500,'mag'=>'余额不足','data'=>'']);}//开启事务DB::beginTransaction();try {Rentings::where('id',$id)->update(['money'=>$money]);Order::where('order_number',$orderNumber)->update(['state'=>1]);DB::commit();return json_encode(['code'=>200,'mag'=>'支付成功','data'=>'']);}catch (Exception $e){DB::rollBack();return json_encode(['code'=>500,'mag'=>$e->getMessage(),'data'=>'']);}}