微信列表展示与详情页

列表展示效果图（图片来源于网络）

 

 

 

wxml代码部分：

<!-- 列表页面 -->
<view class="view">
    <view class="list">
        <block class="block" wx:for="{{data}}" wx:key="key">
            <view class="box">
                <!-- 点击携带参数页面跳转 -->
                <navigator url="/pages/demo3/demo3?id={{item.gid}}">
                    <view class="image">
                        <image src="{{item.image}}" />
                    </view>
                    <view class="text">
                        <text class="name">{{item.goodsname}}</text>
                        <text class="price">价格:{{item.price}}</text>
                    </view>
                </navigator>
            </view>
        </block>
    </view>
</view>

 

js代码部分

Page({

  /**
   * 页面的初始数据
   */
  data: {
    data:[]

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //页面初始 获取数据
    wx.request({
      url: 'http://www.xxxx.com/index.php/wxxcx/xxx/lists',
      data: {},
      header: {'content-type':'application/json'},
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: (result)=>{
        this.setData({
          data:result.data.data
        })
        console.log(result.data.data)   
      },
      fail: ()=>{},
      complete: ()=>{}
    });
   
  },

 

php代码部分

    //列表展示
    public function lists(){
        $data = \app\wxxcx\model\xxx::select();
        if ($data){
            return json(['code'=>200,'msg'=>'success','data'=>$data]);
        }else{
            return json(['code'=>500,'msg'=>'error','data'=>""]);
        }
    }

 

 

wxss代码部分 （样式）

 

.list{
    width: 100%;
    background-color: #eeeeee;
    /* 弹性盒子 */
    display: flex;
    justify-content: space-around;
    /* 可自动换行 */
    flex-wrap: wrap;
    text-align: center;

}
.box{
    width: 30%;
    height: 300rpx;
    /* background-color: aquamarine; */
    margin-top: 10rpx;
}
.image{
    width: 100%;
    height: 240rpx;
    /* background-color: bisque;    */
}
.image image{
    width: 100%;
    height: 240rpx;
}
.text{
    width: 100%;
    height: 50rpx;
    /* background-color: blue; */
}
.text .name{
    font-size: 20rpx;
}
.text .price{
    font-size: 20rpx;
    color: crimson;
}

 

 

 

二、详情页部分+留言

wxml代码部分

<view class="big">
    <!-- 商品展示部分 -->
    <view class="box">
        <view class="image">
            <!-- 图片 -->
            <image src="{{data.image}}" />
        </view>
        <view class="text">
            <view class="top">商品名称：{{data.goodsname}}</view>
            <view class="price">价格：{{data.price}}</view>
            <view>留言条数：{{datas.count}}</view>
        </view>
    </view>
    <!-- 留言板部分 -->
    <view class="message">
        <text class="text">留言板</text>
        <form catchsubmit="formSubmit">
            <input class="weui-input" auto-focus placeholder="请输入评价" name="message" />
            <button formType="submit" size="mini" class="butten">留言</button>
        </form>
    </view>
    <block wx:for="{{datas}}" wx:key="key">
        <view class="liuyan">{{item.message}}</view>
    </block>
</view>

 

js代码部分

Page({

  /**
   * 页面的初始数据
   */
  data: {
    data: [],
    datas:[]

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let gid = options.id
    //将商品id存入缓存中
    wx.setStorage({
      key: "gid",
      data: gid
    })
    console.log(options)
    wx.request({
      url: 'http://www.xxxxxx.com/index.php/wxxcx/xxx/one',
      data: {
        gid: gid
      },
      header: { 'content-type': 'application/json' },
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: (result) => {
        if (result.data.code == 200) {
          this.setData({
            data: result.data.data
          })
        }

        // console.log(result.data.data)

      },
      fail: () => { },
      complete: () => { }
    });

    // 页面加载出留言
    wx.request({
      url: 'http://www.xxxx.com/index.php/wxxcx/xxx/chuliuyan',
      data: {
        gid: gid
      },
      header: { 'content-type': 'application/json' },
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: (result) => {
        if (result.data.code == 200) {
          this.setData({
            datas: result.data.data
          })
        }

        // console.log(result.data.data)

      },
      fail: () => { },
      complete: () => { }
    });

  },


  //保存留言
  formSubmit(e) {
    // 获取留言内容
    let message = e.detail.value.message
    let that=this
    //从缓存中获取商品的id
    wx.getStorage({
      key: "gid",
      success(res) {
        // console.log(e.detail.value.message)

        let gid = res.data
        //发送请求保存留言
        wx.request({
          url: 'http://www.xxx.com/index.php/wxxcx/xxx/liuyan',  //接口地址
          data: {
            gid:gid,
            message:message
          },
          header: { 'content-type': 'application/json' },
          method: 'GET',
          dataType: 'json',
          responseType: 'text',
          success: (result) => {
           
            if(result.data.code==200){
              that.setData({
                datas:result.data.data
              })
               console.log(result.data.data)
            }
           
          },
          fail: () => { },
          complete: () => { }
        });

      }
    })

  },



})

 

 

php部分

 

    //详情页
    public function one(){
        $gid = input('gid');
        $data = \app\wxxcx\model\xxx::get($gid);
         if ($data){
                return json(['code'=>200,'msg'=>'success','data'=>$data]);
            }else{
                return json(['code'=>500,'msg'=>'error','data'=>""]);
        }
    }

    //页面一加载出留言
    public function chuliuyan(){
        $gid=input('gid');
        $data=liuyan::where('gid',$gid)->select();
        //统计留言条数
        $data['count']=liuyan::where('gid',$gid)->count();
        if ($data){
            return json(['code'=>200,'msg'=>'success','data'=>$data]);
        }else{
            return json(['code'=>500,'msg'=>'error','data'=>""]);
        }
    }


    //保存留言
    public function liuyan(){
        $data['gid']=input('gid');
        $gid=input('gid');
        $data['message']= input('message');
        liuyan::create($data,true)->toArray();
        $data=liuyan::where('gid',$data['gid'])->select();
        //统计留言数
        $data['count']=liuyan::where('gid',$gid)->count();
//        print_r($datas);
        if ($data){
            return json(['code'=>200,'msg'=>'success','data'=>$data]);
        }else{
            return json(['code'=>500,'msg'=>'error','data'=>""]);
        }
    }

 

 

 

wxss部分（样式）

.box{
    width: 100%;
    height: 400rpx;
    background-color: honeydew;
    display: flex;
    justify-content: space-around;
    padding-top: 30rpx;
  
}
.image{
    width: 35%;
    height: 350rpx;
    background-color: darkorange;
}
.image image{
    width: 100%;
    height: 350rpx;
}
.text{
    width: 50%;
    height: 350rpx;
    background-color: ghostwhite;
  
}
.text .top{

    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    margin-top: 60rpx;
}
.text .price{
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    color: rgb(240, 33, 43);
    margin-top: 10rpx;
}

/* 留言板块 */
.message{
    width: 100%;
    height: 300rpx;
    background-color: #cccccc;
    text-align: center;

}
.weui-input{
    margin-top: 20rpx;
    margin-left: 5%;
    width: 90%;
    height: 100rpx;
    border: 3rpx solid white;
}
.butten{
    margin-top: 20rpx;
    
}
.liuyan{
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background-color: white;
    border: 1rpx solid #eeeeee;
}