微信小程序 列表展示+详情

首先你需要去微信开发者官网注册一个小程序,每个邮箱只能申请一个,申请过程很简单我就不细说了。

申请成功之后你拿到你的AppID,并且去下载小程序开发者工具。

列表展示代码

//商品列表
    public function GoodsIndex(){
        $data=GoodBlog::all();
        if($data){
            return ['code'=>200,'msg'=>'查询成功','result'=>$data];
        }
    }
    //详情列表
    public function GoodsList(Request $request)
    {
        $id=$request['id'];
        $data=GoodBlog::where('id',$id)->first();
        if($data){
            return ['code'=>200,'msg'=>'查询成功','result'=>$data];
        }
    }

小程序端  js

//商品列表
    public function GoodsIndex(){
        $data=GoodBlog::all();
        if($data){
            return ['code'=>200,'msg'=>'查询成功','result'=>$data];
        }
    }
    //详情列表
    public function GoodsList(Request $request)
    {
        $id=$request['id'];
        $data=GoodBlog::where('id',$id)->first();
        if($data){
            return ['code'=>200,'msg'=>'查询成功','result'=>$data];
        }
    }

使用lin-ui插件

<block wx:for="{{ test}}" wx:key="unique">

<l-card type="primary" full="{{true}}" image="{{item.goods_image}}" title="{{ item.name}}">
   <view>
     价格:{{ item.price}}
   </view>
   <view>
   <navigator url="/pages/goods_detail/goods_detail?id={{ item.id }}">  <l-button type="error">立即抢购</l-button></navigator>
   </view>
</l-card>
</block>
{
  "usingComponents": {
    "l-card":"/miniprogram_npm/lin-ui/card",
    "l-button":"/miniprogram_npm/lin-ui/button"
  }
}

详情页面

<view>商品秒杀页面</view>
<l-countdown time-type="second" time="{{expire_time}}"  />
<l-card type="primary" full="{{true}}" image="" title="">
     <view>
       价格:
     </view>
     <view>
      <l-button disabled="{{ btn_disable }}" bind:lintap="buyGoods" type="error" data-id="{{ goods.id }}">点我秒杀</l-button>
     </view>
  </l-card>

js代码

 onLoad: function (options) {
      //商品id
        let id =options.id;
        // console.log(id)
        this.getGoodsDetail(id)
    },
    //商品详情获取
    getGoodsDetail(id){
        wx.request({
          url: 'http://www.zf.com/api/goods_list?id='+id,
          success: res => { 
            let now_time = Math.round(new Date().getTime() / 1000).toString();
            // console.log(now_time)
            let expire_time = res.data.result.start_time-now_time;
            // console.log(expire_time)
            // console.log(res.data.result)
            this.setData({
              goods:res.data.result,
              expire_time
            })
            if(expire_time > 0){
              this.setData({
                btn_disable:true
              })
            }
           
          }
        })
    },

页面的防抖   js中引入

import {
  debounce
} from "../../utils/util"

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值