基于php微信小程序购物商城校园二手商品图书鲜花商城毕业设计（1）首页

最新推荐文章于 2024-01-29 09:09:11 发布

黄菊华老师

最新推荐文章于 2024-01-29 09:09:11 发布

阅读量1.1k

点赞数 2

分类专栏：毕业设计文章标签：基于php微信小程序购物商城

本文链接：https://blog.csdn.net/u013818205/article/details/109195006

版权

毕业设计专栏收录该内容

2536 篇文章 527 订阅

订阅专栏

效果图

在这里插入图片描述

wxml代码

<!--轮播：远程数据（图片地址+连接地址）【对象数组，数组中的每个元素包含图片地址+链接地址】-->
<view ><!--swiper属性里面的设置相比上面，多了个if判断是否显示，jieguo=true; jieguo2=false-->
<!--远程数据地址：http://phpshop.yaoyiwangluo.com/wx_lunbo.php-->
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" 
        interval="{{interval}}" duration="{{duration}}" > 
  <block wx:for="{{images2}}" wx:key="a002" style='height:120px;'>
    <!--给每个swiper-item外围添加了链接-->
    <navigator url='{{item.dizhi}}'>
      <swiper-item>
        <image src="{{item.tupian}}" class="slide-image2" />
      </swiper-item>
    </navigator>
  </block>
</swiper>
</view>

<!--快捷菜单-->
<view class='menu'>

  <navigator url='/pages/gongyong/chanpin_list' class='menu-item'>
    <image src='/img/menu01.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>所有产品</text>
  </navigator>

  <navigator url='/pages/fenlei/index'  open-type="switchTab" class='menu-item'>
    <image src='/img/menu02.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>产品分类</text>
  </navigator>

  <!--
    navigator的open-type属性 可选值 'navigate'、'redirect'、'switchTab'，对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能
    open-type="navigate"等价于API的　wx.navigateTo　而wx.navigateTo的url是需要跳转的应用内非 tabBar 的页面的路径
    open-type="redirect"等价于API的　wx.redirectTo　而wx.redirectTo的url是需要跳转的应用内非 tabBar 的页面的路径
    open-type="switchTab"等价于API的　wx.switchTab而wx.switchTab的url是需要跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    最后一个switchTab事件触发以后　把前面的页面都关闭了  
  -->
  <!--
    原理：判断用户是否登录，登录则链接到用户中心的首页；没有登录则链接到用户登录页面（tabBar页面）
    逻辑：user_id（用户登录的数字id）初始为0；读取缓存中的u_id的值；如果有则赋值给user_id（大于0的数字）
  -->
  <navigator wx:if="{{user_id > 0}}" url='/pages/huiyuan/index2' class='menu-item'>
    <image src='/img/menu03.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>用户中心</text>
  </navigator>
  <!--会员登录页面/pages/huiyuan/index是tabBar页面，所以需要添加 open-type="switchTab"-->
  <navigator  wx:else url='/pages/huiyuan/index' open-type="switchTab" class='menu-item'>
    <image src='/img/menu03.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>用户中心</text>
  </navigator>

  <!--订单列表的链接 处理同上 用户中心-->
  <navigator wx:if="{{user_id > 0}}" url='/pages/huiyuan/dingdan/dingdan_list' class='menu-item'>
    <image src='/img/menu04.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>订单列表</text>
  </navigator>
  <navigator  wx:else url='/pages/huiyuan/index' open-type="switchTab" class='menu-item'>
    <image src='/img/menu04.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>订单列表</text>
  </navigator>

  <navigator url='/pages/guanyu/fangkui' class='menu-item'>
    <image src='/img/menu05.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>留言反馈</text>
  </navigator>
  
  <!---php版本下面id对应为 236，237，236-->
  <navigator url='/pages/gongyong/xinxi_list?cs_lxid=236&mc=帮助中心' class='menu-item'>
    <image src='/img/menu06.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>帮助中心</text>
  </navigator>

  <navigator url='/pages/gongyong/xinxi_list?cs_lxid=237&mc=平台介绍' class='menu-item'>
    <image src='/img/menu07.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>平台介绍</text>
  </navigator>

  <navigator url='/pages/gongyong/xinxi_list?cs_lxid=241&mc=活动列表' class='menu-item'>
    <image src='/img/menu08.png' mode='widthFix' class='menu-img'></image>
    <text class='menu-mc'>活动列表</text>
  </navigator>

</view> 

<!--获取web网站后台发布的最新3条信息-->
<!--远程地址：http://phpshop.yaoyiwangluo.com/wx_news_list.php 【对象数组】-->
<block wx:for="{{xinxis}}" wx:key="myid">
  <navigator url='/pages/gongyong/xinxi_info?cs_xxid={{item.myid}}' class='xinxi'>
    <image class='xinxi-icon' src='/img/news.png'></image>
    <text class='xinxi-text'>{{item.myshijian}} {{item.mybiaoti}}</text>
    <image class='xinxi-arrow' src='/img/right.png'></image>
  </navigator>
</block>

<!--区块标题-最新上架产品; 更多链接到所有产品页面-->
<view class='qukuai'>
  <view class='y01'></view>
  <text class='t01'>最新产品</text>
  <navigator url="/pages/gongyong/chanpin_list"  class='m01'>更多></navigator>
</view>

<!--最新上架商品-->
<view class='zuixin'>
  <!--远程数据（对象数组）：http://www.yaoyiwangluo.com/wx_CpList_top4.asp-->
  <!--获取的远程数据赋值给数组变量：zuixins；然后循环显示该数组的内容-->
  <block wx:for="{{zuixins}}" wx:key="cp_id">
    <!--每个产品会链接到详细页面，需要的参数：产品id+产品名称-->
    <navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='zuixin-item'>
      <image src='{{item.cp_tupian}}' mode='widthFix' class='zuixin-img'></image>
      <text class='zuixin-mc'>{{item.cp_mingcheng}}</text>
      <view>
        <text class='zuixin-jiage0'>价格：¥</text>
        <text class='zuixin-jiage1'>{{item.jiage}}</text>
        <text class='zuixin-jiage2'></text>
      </view>
    </navigator>
  </block>
</view>

<!--销售排行-标题区块-->
<view class='qukuai'>
  <view class='y01'></view>
  <text class='t01'>推荐商品</text>
  <navigator url="/pages/gongyong/chanpin_list"  class='m01'>更多></navigator>
</view>
<!--销售排行-商品列表-->
<block wx:for="{{tuijians}}" wx:key="cp_id">
<navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='paihang-item'>
  <view class='paihang-tupian'>
    <image class='paihang-img' src='{{item.cp_tupian}}' mode='widthFix'></image>
  </view>
  <view class='paihang-xinxi'>
    <text class='paihang-mingcheng'>{{item.cp_mingcheng}}</text>
    <text class='paihang-jianjie'>产品简介</text>
    <view>
      <text class='paihang-xuhao'>No.{{index+1}}</text>
      <text class='paihang-xiaoshou'> | 456人付款 | </text>
      <text class='paihang-jiage0'> ¥</text>
      <text class='paihang-jiage1'> {{item.jiage}}</text>
    </view>
  </view>
</navigator>
</block>

wxss代码

/*广告图样式*/

.ad01 {
  box-shadow: 0px 2px 2px gainsboro; /*阴影*/
  margin: 2px; /*外边距*/
}

.ad01-img {
  width: 100%;
}

/*轮播图样式*/
.slide-image {
  height: 120px;
  width: 100%;
  display: inline-block;
  overflow: hidden;
}

.slide-image2 {
  height: 100%;
  width: 100%;
  display: inline-block;
  overflow: hidden;
}

/*快捷菜单*/

.menu {
  display: flex;
  flex-wrap: wrap; /*换行*/
  border-bottom: 1px solid gainsboro; /*菜单最下面线条*/
}

.menu-item {
  width: 25%; /*1行4个菜单*/
  padding: 5px; /*内边距*/
  box-sizing: border-box;
  display: flex;
  justify-content: center; /*左右居中*/
  flex-direction: column; /*从上到下*/
}

.menu-img {
  width: 66%;
  align-self: center;
}

.menu-mc {
  font-size: 14px;
  align-self: center;
}

.xinxi {
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid #f2f2f2;
}

.xinxi-icon {
  width: 22px;
  height: 22px;
}

.xinxi-text {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.xinxi-arrow {
  width: 13px;
  height: 13px;
}

/*区块标题*/

.qukuai {
  display: flex;
  background-color: aliceblue;
  align-items: center;
}

.y01 {
  width: 3px;
  height: 18px;
  background-color: green;
  margin: 5px;
  box-shadow: 2px 2px 2px gainsboro;
}

.t01 {
  color: gray;
  flex-grow: 1;
  text-shadow: 1px 1px 1px gainsboro;
}

.m01 {
  color: gray;
  margin-right: 5px;
  text-shadow: 2px 2px 2px gainsboro;
}

.zuixin {
  display: flex;
  flex-wrap: wrap;
}

.zuixin-item {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 5px;
  box-sizing: border-box;
  border-bottom: 1px dotted gainsboro;
}

.zuixin-img {
  width: 100%;
  border: 1px solid #fcfafa;
  border-radius: 5px;
  box-shadow: 0px 2px 2px gainsboro;
  padding: 5px;
  box-sizing: border-box;
}

.zuixin-mc {
  font-size: 12px;
  padding: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zuixin-jiage0 {
  font-size: 10px;
  padding: 3px;
  color: red;
}

.zuixin-jiage1 {
  font-size: 14px;
  padding: 3px;
  color: red;
}

.zuixin-jiage2 {
  font-size: 11px;
  padding: 3px;
  color: gray;
}

/*销售排行*/

.paihang-item {
  display: flex;
  padding: 5px;
  width: 100%;
}

.paihang-tupian {
  width: 25%;
}

.paihang-img {
  width: 100%;
  border: 1px solid gainsboro;
  border-radius: 5px;
  box-shadow: 0px 2px 2px gainsboro;
}

.paihang-xinxi {
  width: 75%;
  margin-left: 5px;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
}

.paihang-mingcheng {
  font-size: 13px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.paihang-jianjie {
  font-size: 11px;
  color: gray;
  margin: 3px 0;
}

.paihang-xuhao {
  color: green;
  font-size: 13px;
}

.paihang-xiaoshou {
  font-size: 11px;
  color: gray;
}

.paihang-jiage0 {
  font-size: 10px;
  color: red;
}

.paihang-jiage1 {
  font-size: 13px;
  color: red;
}

js代码

//获取应用实例
var app = getApp()

Page({
  /**
   * 页面的初始数据
   */
  data: {
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 3000,
    duration: 1200,
    images2:[], //用于存放远程服务器的广告图片和链接数据，对象数组
    xinxis:[],  //存放最新资讯
    zuixins:[], //最新商品
    tuijians:[],//推荐商品
    user_id:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //console.log(app.myapp.php); //输出当前php版本的接口网址（调试使用）
    var that = this
    
    //读取用户id的缓存，如果存在则赋值
    wx.getStorage({
      key: 'u_id',
      success: function(res) {
        that.setData({ user_id:res.data})
      },
    })

    //读取远程服务器轮播图片的数据，带连接（php后台数据）
    wx.request({
      //url: 'http://phpshop.yaoyiwangluo.com/wx_lunbo.php',
      url: app.myapp.php + '/wx_lunbo.php',  //php版
      //url: app.myapp.jsp + '/wx_lunbo.jsp',  //jsp版
      success: function (res) {
        that.setData({
          images2: res.data
        })
      }
    })

    //获取最新的信息（3）条
    //php版本地址：http://phpshop.yaoyiwangluo.com/wx_news_list.php
    wx.request({
      //url: app.myapp.asp + '/wx_news_list.asp',  //asp版
      url: app.myapp.php + '/wx_news_list.php',  //php版
      //url: app.myapp.jsp + '/wx_news_list.jsp',  //jsp版
      success:function(res){
        that.setData({
          xinxis:res.data
        })
      }
    })
   
    //最新上架产品（5）条
    //asp版本地址：http://www.yaoyiwangluo.com/wx_CpList_top4.asp
    //php版本地址：wx_CpList_top4.php
    wx.request({
      //url: app.myapp.asp + 'wx_CpList_top4.asp', //asp版
      url: app.myapp.php + '/wx_CpList_top4.php',  //php版
      //url: app.myapp.jsp + 'wx_CpList_top4.jsp', //jsp版
      success:function(res){
        that.setData({
          zuixins:res.data
        })
      }
    })

    //最新上架产品（5）条
    //asp版本地址：http://www.yaoyiwangluo.com/wx_CpList_top4.asp
    //php版本地址：wx_CpList_tuijian6.php
    wx.request({
      //url: app.myapp.asp + 'wx_CpList_top4.asp', //asp版
      url: app.myapp.php + '/wx_CpList_tuijian6.php',  //php版
      //url: app.myapp.jsp + 'wx_CpList_top4.jsp', //jsp版
      success:function(res){
        that.setData({
          tuijians:res.data
        })
      }
    })    

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

黄菊华老师

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
基于php微信小程序购物商城校园二手商品图书鲜花商城毕业设计（1）首页

效果图wxml代码<view ><swiper indicator-dots="{{indicato
复制链接

扫一扫