微信小程序OTO商城(商务端)


一、app.js

代码如下(示例):

//app.js
App({
  backstageUrls:'http://116.62.201.243:8080/wxxcx/',
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

二、app.json

{
  "pages": [
    "pages/index/index",




    "pages/shoopLists/shoopLists",
    "pages/shoopLists/edit/edit",
    "pages/shoopLists/add/add",
    "pages/shoopLists/details/details",
    "pages/logs/logs",


    "pages/orderForms/orderForms",
    "pages/orderForms/orderFormsDetails/orderFormsDetails",
    "pages/appointments/appointments",
    "pages/appointments/appointmentsDetails/appointmentsDetails"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#000000",
    "list": [
      {
        "pagePath": "pages/shoopLists/shoopLists",
        "iconPath": "imgs/shoopList.png",
        "text": "商品"
      },
      {
        "pagePath": "pages/appointments/appointments",
        "iconPath": "imgs/orderForm.png",
        "text": "预约"
      },
      {
        "pagePath": "pages/orderForms/orderForms",
        "iconPath": "imgs/appointment.png",
        "text": "订单"
      }
    ]
  },

  "sitemapLocation": "sitemap58.json"
,
  "sitemapLocation": "sitemap39.json"

}

三、utils.js

代码如下(示例):

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

四、index

1.index.wxml

代码如下(示例):

<!--index.wxml-->
<view>
<image src="/imgs/background.png" class="box"></image>
<view class="box1" bindtap="log">欢迎您</view>
</view>

2.index.wxss

代码如下(示例):

/**index.wxss**/
.box{
  width: 100vw;
  height: 100vh;
}
.box1{
  position: fixed;
  top: 350px;
  left: 140px;
 background-color: lavenderblush;
 width: 100px;
height: 40px;
border-radius: 50%;
text-align: center;
padding-top: 20px;
}

3.index.js

代码如下(示例):

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  log:function(){
    wx.navigateTo({
      url: '/pages/logs/logs',
    })
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

五、logs

1.logs.wxml

代码如下(示例):

<!--logs.wxml-->
<view>
	<view>
		<image src="/imgs/logs.jpg" class="box"></image>
		<view class="box01">o2o商城</view>
	</view>
	<view class="box1">
		<form bindsubmit="denglu">
			<view class="box11">
				用户名:
			</view>
			<view class="box12">
			<input type="text" placeholder="请输入用户名" name='username'></input>
			</view>
      	<text class="box13" decode="{{true}}">&nbsp;&nbsp;&nbsp;码:
			</text>
			<view class="box14">
				<input type="password" placeholder="请输入密码" name='password'></input>
			</view>
      <button class="box15" form-type ='submit' open-type="getUserInfo">登录</button>
		</form>
	</view>
</view>

2.logs.wxss

代码如下(示例):

.box{
  width: 100vw;
  height: 100vh;
}
.box01{
  position: fixed;
  top: 52px;
  left: 115px;
  font-size: 25px;
}
.box1{
  direction: flex;
  flex-direction: row;
  border:1px solid red;

}
.box11{
  position: fixed;
  top: 250px;
  left: 95px;
  font-size: 18px;
}
.box12{
  position: fixed;
  top:252px;
  left: 155px;
  width: 120px;
  border:1px solid black;
}
.box13{
  position: fixed;
  top: 265px;
  left: 95px;
  font-size: 18px;
  
}
.box14{
  position: fixed;
  top: 290px;
  left: 155px;
  width: 120px;
  border:1px solid black;
}
.box15{
  position: fixed;
  top: 340px;
  left: 150px;
}

2.logs.js

代码如下(示例):

//logs.js
// const util = require('../../utils/util.js')
var backstageUrls=getApp().backstageUrls;
var name;
var headImage;
Page({
  //页面初始化内容
  data: {

  },
  denglu:function(event){
    console.log("event",event)
    var username=event.detail.value.username;
    var password=event.detail.value.password;
    if(password=='123456' && username=='111'){
    wx.login({
      success(res){
        var code=res.code
        wx.getUserInfo({
          success:(res)=>{
            console.log(res)
            name=res.userInfo.nickName
            headImage=res.userInfo.avatarUrl
            wx.request({
              url:backstageUrls+'user/login',
              data:{
                code:code,
                name:name,
                headImage:headImage
              },
              method:"POST",
              success(res){
              console.log("获取数据",res.data)
              var userId=res.data.data.userId
                //存放在数据缓存中
                wx.setStorage({
                  key:'nickName',
                  data:userId 
                 })
                 wx.switchTab({
                url: '/pages/shoopLists/shoopLists',
              })
              },
              fail(err){
                console.log("失败",err)
              }
            })
          }
        })
       
      }
    })
  
  }else{
    if(password=='' && username==''){
      wx.showToast({
        title: '请输入用户名或密码',
        icon:'none'
      })
    }else{
      wx.showToast({
        title: '用户名或密码错误',
        icon:'none'
      })
    }
  }
  },
  onLoad: function () {
  }
})

六、appointments

appointments主页

appointments.wxml:

<!--pages/appointments/appointments.wxml-->
<view class="list" wx:for="{{list}}" bindtap="tz" data-index="{{index}}">
  <view class="left">
    <view>{{item.bookItem}}</view>
    <view>到店时间:{{item.comeTime}}</view>
  </view>
  <view class="{{item.status=='0' ?  'dota': item.status=='2' ? 'dota2':'dota1'}}"></view>
</view>

appointments.wxss:

/* pages/appointments/appointments.wxss */
.list{
  width: 100vw;
  height: 130rpx;
  border-bottom: 1px solid #ededed;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.left{
  width: 80vw;
  height: 130rpx;
  margin-left: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dota{
  width: 20rpx;
  height: 20rpx;
  background-color: #ff0000;
  border-radius: 50%;
  margin-right: 30rpx;
}
.dota1{
  width: 20rpx;
  height: 20rpx;
  background-color: #2c08ad;
  border-radius: 50%;
  margin-right: 30rpx;
}
.dota2{
  width: 20rpx;
  height: 20rpx;
  background-color: #0cf56d;
  border-radius: 50%;
  margin-right: 30rpx;
}

appointments.js:

// pages/appointments/appointments.js
var backstageUrls=getApp().backstageUrls
Page({
  tz:function(event){
    console.log(event)
    var index=event.currentTarget.dataset.index
    var bookId=this.data.list[index].bookId
    wx.navigateTo({
      url: '../appointments/appointmentsDetails/appointmentsDetails?bookId='+bookId,
    })
  },
  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var userId=wx.getStorageSync('nickName')
    wx.request({
      url: backstageUrls+'book/getAllById',
      data:{
        userId:userId
      },
      method:'POST',
      success:(res)=>{
        // console.log(res)
        var list=res.data.data
        this.setData({
          list:list
        })
      }
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

2.appointmentsDetails

appointmentsDetails.wxml:

<!--pages/appointments/appointmentsDetails/appointmentsDetails.wxml-->
<view class="top">
  <view class="left">预约申请:</view>
  <view class="right {{data.status=='0' ? 'color' : data.status=='1' ? 'color1' : data.status=='2' ? 'color2' : 'color3'}}">{{data.status=='0' ? '已过期' : data.status=='1' ? '已接受' : data.status=='2' ? '已拒绝' : '未处理'}}</view>
</view>

<view class="top1">
  <view>服务项目:</view>
  <view>{{data.bookItem}}</view>
</view>

<view class="top2">
  <view>预约时间:</view>
  <view>{{data.bookTime}}</view>
</view>

<view class="top1">
  <view>到店时间:</view>
  <view>{{data.comeTime}}</view>
</view>

<view class="top1">
  <view>留言:</view>
  <view>{{data.message}}</view>
</view>

<view class="{{data.status=='3' ? 'cl' : 'cln'}}">
  <view class="dcl">预约待处理</view>
  <view class="an">
  <button size="mini" bindtap="js" class="js">接受</button>
  <button size="mini" bindtap="jj" class="jj">拒绝</button>
</view>
</view>

appointmentsDetails.wxss:

/* pages/appointments/appointmentsDetails/appointmentsDetails.wxss */
.top{
  width: 100vw;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ededed;
}
.left{
  margin-left: 30rpx;
}
.right{
  margin-right: 30rpx;
}
.color{
  color: #ff0000;
}
.color1{
  color: #2c08ad;
}
.color2{
  color: #0cf56d;
}
.color3{
  color: #b506eb;
}
.top1{
  width: 100vw;
  height: 100rpx;
  padding-left: 30rpx;
  border-bottom: 1px solid #ededed;
}
.top2{
  width: 100vw;
  height: 100rpx;
  padding-left: 30rpx;
  border-bottom: 1px solid #ededed;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.cln{
  width: 100vw;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  visibility: hidden;
}
.cl{
  width: 100vw;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ededed;
}
.js{
  margin: 0 20rpx;
  background-color: red;
  color: white;
}
.jj{
  margin: 0 20rpx;
  background-color: green;
  color: white;
}

appointmentsDetails.js:

// pages/appointments/appointmentsDetails/appointmentsDetails.js
var backstageUrls=getApp().backstageUrls
var bookId
Page({
  js:function(){
    wx.request({
      url: backstageUrls+'book/update',
      data:{
        bookId:bookId,
        status:'1'
      },
      method:'POST',
      success:(res)=>{
        wx.switchTab({
          url: '../appointments',
        })
      }
    })
  },
  jj:function(){
    wx.request({
      url: backstageUrls+'book/update',
      data:{
        bookId:bookId,
        status:'2'
      },
      method:'POST',
      success:(res)=>{
        wx.switchTab({
          url: '../appointments',
        })
      }
    })
  },
  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    bookId=options.bookId
    // console.log(bookId)
    wx.request({
      url: backstageUrls+'book/details',
      data:{
        bookId:bookId
      },
      method:'POST',
      success:(res)=>{
        console.log(res)
        var data=res.data.data
        this.setData({
          data:data
        })
      }
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

七、orderForms

orderForms主页

orderFormsDetails.wxml:


<!--pages/orderForms/orderForms.wxml-->
<view class="top">
  <view class="{{choose ? 'color' : 'color1'}}" bindtap="a" data-index="1">待发货</view>
  <view class="{{choose1 ? 'color' : 'color1'}}" bindtap="a1" data-index="2">待收货</view>
  <view class="{{choose2 ? 'color' : 'color1'}}" bindtap="a2" data-index="3">已完成</view>
</view>

<view class="body" wx:for="{{list}}" bindtap="tz" data-index="{{index}}">
  <view class="left">
    <view style="font-size: 30rpx;">订单号:<text style="color: blue;">{{item.orderNum}}</text></view>
    <view style="font-size: 20rpx;">{{item.createTime}}</view>
  </view>
  <view class="right">
    <view style="color:red;text-align: right;">{{item.money}}</view>
    <view class="{{item.status=='1' ? 'fh' : 'fh1'}}" catchtap="fh" data-index="{{index}}">确认发货</view>
  </view>
</view>

orderFormsDetails.wxss:


/* pages/orderForms/orderForms.wxss */
.top{
  width: 100vw;
  height: 150rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.color{
  width: 150rpx;
  height: 60rpx;
  background-color: palevioletred;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid palevioletred;
}
.color1{
  width: 150rpx;
  height: 60rpx;
  background-color: white;
  color: palevioletred;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid palevioletred;
}
.body{
  width: 100vw;
  height: 130rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ededed;
}
.left{
  margin-left: 30rpx;
}
.right{
  margin-right: 20rpx;
}
.fh{
  width: 160rpx;
  height: 60rpx;
  border-radius: 16rpx;
  background-color: red;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fh1{
  width: 160rpx;
  height: 60rpx;
  border-radius: 16rpx;
  background-color: red;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

orderFormsDetails.js:


// pages/orderForms/orderForms.js
var backstageUrls=getApp().backstageUrls
Page({
  a:function(event){
    // console.log(event)
    this.setData({
      choose:true,
      choose1:false,
      choose2:false
    })
    var status=event.currentTarget.dataset.index
    wx.request({
      url: backstageUrls+'order/showAllByStatus',
      data:{
        status:status
      },
      method:'POST',
      success:(res)=>{
        console.log(res)
        var list=res.data.data
        this.setData({
          list:list
        })
      }
    })
  },
  a1:function(event){
    // console.log(event)
    this.setData({
      choose:false,
      choose1:true,
      choose2:false
    })
    var status=event.currentTarget.dataset.index
    wx.request({
      url: backstageUrls+'order/showAllByStatus',
      data:{
        status:status
      },
      method:'POST',
      success:(res)=>{
        console.log(res)
        var list=res.data.data
        this.setData({
          list:list
        })
      }
    })
  },
  a2:function(event){
    // console.log(event)
    this.setData({
      choose:false,
      choose1:false,
      choose2:true
    })
    var status=event.currentTarget.dataset.index
    wx.request({
      url: backstageUrls+'order/showAllByStatus',
      data:{
        status:status
      },
      method:'POST',
      success:(res)=>{
        console.log(res)
        var list=res.data.data
        this.setData({
          list:list
        })
      }
    })
  },
  fh:function(event){
    var index=event.currentTarget.dataset.index
    var list=this.data.list
    var orderNum=list[index].orderNum
    var message=list[index].message
    wx.request({
      url: backstageUrls+'order/updateStatus',
      data:{
        orderNum:orderNum,
        status:'2',
        message:message
      },
      method:'POST',
      success:(res)=>{
        console.log(res)
        wx.showToast({
          title: '已发货',
          icon:'none',
          success:(res)=>{
            wx.request({
              url: backstageUrls+'order/showAllByStatus',
              data:{
                status:'1'
              },
              method:'POST',
              success:(res)=>{
                console.log(res)
                var list=res.data.data
                this.setData({
                  list:list
                })
              }
            })
          }
        })
      }
    })
  },
  tz:function(event){
    var index=event.currentTarget.dataset.index
    var list=this.data.list
    var orderNum=list[index].orderNum
    wx.navigateTo({
      url: '../orderForms/orderFormsDetails/orderFormsDetails?orderNum='+orderNum,
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    choose:true,
    choose1:false,
    choose2:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.request({
      url: backstageUrls+'order/showAllByStatus',
      data:{
        status:'1'
      },
      method:'POST',
      success:(res)=>{
        console.log(res)
        var list=res.data.data
        this.setData({
          list:list
        })
      }
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

1.orderFormsDetails

orderFormsDetails.wxml:

<!--pages/orderForms/orderFormsDetails/orderFormsDetails.wxml-->
<view class="top">
  <view>订单编号:{{order.orderNum}}</view>
  <view class="{{order.status=='0' ? 'color' : order.status=='1' ? 'color1' :  'color2'}}">{{data.status=='0' ? '已完成' : data.status=='1' ? '待发货' : '待收货'}}</view>
</view>
<view class="top">
  <view>创建时间:{{order.createTime}}</view>
</view>

<view class="top1">
  <view>收货地址:</view>
  <view class="a">
    <view>{{address.name}}</view>
    <view style="margin-right: 20rpx;">{{address.phone}}</view>
  </view>
  <view>{{address.province}}{{address.city}}{{address.disfaultFlag}}</view>
</view>


  <view>商品列表:</view>
  <view class="top2" wx:for="{{item_list}}">
  <image src="http://116.62.201.243:8080/wxxcx/{{item.image}}"></image>
  <view class="sx">
    <view>{{item.name}}</view>
    <view class="rl">
      <view style="color : yellow;">{{item.price}}</view>
      <view>*{{item.num}}</view>
    </view>
  </view>
</view>

<view class="zj">{{order.money}}</view>
<view>备注:</view>
<view>{{order.message=='' ? '暂无备注':order.message}}</view>

orderFormsDetails.wxss:

/* pages/orderForms/orderFormsDetails/orderFormsDetails.wxss */
.top{
  width: 100vw;
  height: 100rpx;
  border-bottom: 1px solid #ededed;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.color{
  color: #ff0000;
}
.color1{
  color: #2c08ad;
}
.color2{
  color: #0cf56d;
}
.top1{
  width: 100vw;
  height: 160rpx;
  border-bottom: 1px solid #ededed;

}
.a{
  width: 100vw;
  height: 30rpx;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  align-items: center;
  margin-right: 20rpx;
  
}
image{
  width: 100rpx;
  height: 100rpx;
}
.top2{
  width: 100vw;
  height: 130rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.sx{
  width: 80vw;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rl{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.zj{
  width: 100vw;
  height: 50rpx;
  text-align: right;
  color: #0cf56d;
}

orderFormsDetails.js:

// pages/orderForms/orderFormsDetails/orderFormsDetails.js
var backstageUrls=getApp().backstageUrls
Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var orderNum=options.orderNum
    console.log(orderNum)
    wx.request({
      url: backstageUrls+'order/details ',
      data:{
        orderNum:orderNum
      },
      method:'POST',
      success:(res)=>{
        console.log(res)
        var order=res.data.data.order
        var address=res.data.data.address
        var item_list=res.data.data.item_list
        this.setData({
          order:order,
          address:address,
          item_list:item_list
        })
      }
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

八、shoopLists

shoopLists主页

shoopLists.wxml:


<!--pages/shoopLists/shoopLists.wxml-->
<movable-area class='h' wx:for="{{data}}">
	<movable-view class="hh" direction='horizontal'>
		<view class="box1"  x='130'>
			<image src="http://116.62.201.243:8080/wxxcx/{{item.image}}" class="img1"></image>
			<view class="box11"  bindtap="details" data-index="{{index}}">
				<view>{{item.name}}</view>
				<view>{{item.price}}</view>
			</view>
				<view class="sc" bindtap="sc" data-index="{{item.goodsId}}">删除</view>
		</view>
	</movable-view>
</movable-area>
<button class="bt" bindtap="tianjia">添加商品</button>
 <!-- <view>
	<view class="box1" wx:for="{{data}}" bindtap="details" data-index="{{index}}">
		<image src="http://116.62.201.243:8080/wxxcx/{{item.image}}" class="img1"></image>
		<view class="box11">
			<view>{{item.name}}</view>
			<view>{{item.price}}</view>
		</view>
	</view>
	<button class="bt" bindtap="tianjia">添加商品</button>
</view>  -->

shoopLists.wxss:


/* pages/shoopLists/shoopLists.wxss */
.ma{
  width: 80vw;
  height: 200px;
  background-color: red;
}
.mv{
  width: 100vw;
  height: 200px;
  background-color: green;
}
.a{
  position: fixed;
  right: 0;
  z-index: -10;
}
.box1{
  width: 100vw;
  height: 150rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid gainsboro;
}
.img1{
    width: 120rpx;
    height: 120rpx;
}
.box11{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 15px;
  padding-bottom: 15px;

  margin-left: 30rpx;


}
.bt{
  width: 50vw;
  background-color: green;
}
.h{
  width: 80vw;
  height: 150rpx;
  display: block;
}
.hh{
  width: 100vw;
  height: 150rpx;
  margin-top: 150rpx;
  display: block;
}

.sc{
  position: fixed;
  font-family: Monaco;
  background-color: red;
    width: 230rpx;
    height: 108rpx;
    padding-top: 20px;
    padding-left: 20px;
    z-index: 4;
    right: -140px;
    color: #fff
}

shoopLists.js:


// pages/shoopLists/shoopLists.js
var  backstageUrls=getApp().backstageUrls
var userId=wx.getStorageSync('userInfo')
var page=1;

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

  },
  //删除商品
  sc:function(event){
      console.log(event)
      var goodsId=event.currentTarget.dataset.index
        console.log(goodsId)
    wx.request({
      url: backstageUrls+'/goods/deleteById ',
      data:{
        goodsId:goodsId
      },
      method:'POST',
      success:(res)=>{
        console.log(res.data)
        console.log(page)
        var list=this.data.data
        console.log(list)
        console.log(tt)
        list.splice(((page-1))*8,8)
        console.log(list)
        this.sp()
      }
    })
 
    // var index=event.currentTarget.dataset.index
    // console.log("index",index)
    // var data=this.data.data
    // console.log("data",data)
    // data.splice(index,1)
    // this.setData({
    //   data:data
    // })

  },
  //添加商品
  tianjia:function(){
    wx.navigateTo({
      url: '/pages/shoopLists/add/add',
    })
  },
  //跳转到详情
  details:function(event){
    console.log(event)
    var index=event.currentTarget.dataset.index
    console.log("index",index)
    var data=this.data.data
    console.log("data",data)
    var gooodsId=data[index].goodsId
    console.log(gooodsId)
    wx.navigateTo({
      url: '/pages/shoopLists/details/details?goodsId='+gooodsId,
    })
  },
  //商品列表页
  sp:function(event){
    console.log("数据",event)
    console.log("page",page)
    wx.request({
      url: backstageUrls+'goods/getGoodsByPage',
      data:{
        page:page,
	    	pageSize:8   
      },
      method:'POST',
      success:(res)=>{
        console.log(res.data)
        var lists=this.data.data
        console.log("lists",lists)
        var list=res.data.data
        console.log("listaaaa",list)
        if(list === undefined){
          page--
          wx.showToast({
            title: '已加载完数据',
            icon:'none'
          })
        }else if(page === 1){
          lists=list
          console.log("lists",lists)
        }else{
        for(var i=0;i<list.length;i++){
        lists.push(list[i])
        console.log("lists1",lists)
        }
        }
        console.log(lists)
        this.setData({
          data:lists
        })
      }
    })
  },
   /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.showToast({
      title: '刷新中',
      icon: 'loading',
      success:(res)=>{
        console.log("刷新成功",res)
        page=1
        this.sp()
        var l=setTimeout(()=> {
        wx.stopPullDownRefresh()
        clearTimeout(l)
       }, 2000)
    }
  })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    page++
    var l = setTimeout(() => {
      wx.showToast({
        title: '加载数据中',
        icon: 'loading',
        mask: true,
        success: (res) => {
          clearInterval(l)
          this.sp()
        }
      })
    }, 1000)
   },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function (event) {
  
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    page=1
    this.sp()
  },

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

  },

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

  },

 

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

  }
})

1.add

add.wxml:

<!--pages/shoopLists/add/add.wxml-->
<form bindsubmit="formSubmit">
	<view class="box1" >
		<view>商品名称:</view>
    <input placeholder="请输入商品名称" name="commodityname"></input>
	</view>
	<view class="box2" bindtap="chooseimage">
		<view>封面照片:</view>
		<image src="{{img}}" class="box21"></image>
	</view>
	<view class="box3">
		<view>商品简介:</view>
<input placeholder="请输入商品简介" name="commodityjj"></input>
	</view>
	<view class="box5"> 
		<text class="title">单价:¥</text>
    <input placeholder="请输入商品价格" class="box51"name="commodityprice" ></input>
		<button class="box52" bindtap="queding" form-type="submit">确定</button>
	</view>
	</form>



add.wxss:


/* pages/shoopLists/add/add.wxss */
/* pages/shoopLists/edit/edit.wxss */
.box1{
  border-bottom: 1px solid gainsboro;
  padding:5px;
}
.box2{
  border-bottom: 1px solid gainsboro;
  padding:5px;
}
.box21{
  padding-left: 20px;
}
.box3{
  padding:5px;
}
.box4{
  padding:5px;
}
.box5{
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: fixed;
  bottom: 10px;
}
.box51{
  width: 200px;
  height: 40px;
  padding-left: 5px;
}
.box52{
  width: 80px;
  height: 40px;
  right: 0px;
  background-color: green;
  color: aliceblue;
}
.title{
  padding-top: 10px;
}

add.js:


// pages/shoopLists/add/add.js
var backstageUrls = getApp().backstageUrls
var img
var backstageUrls = getApp().backstageUrls
var name
var price
var image
var detail
Page({

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

  },
  //点击确定添加
  queding: function () {
    wx.switchTab({
      url: '../../shoopLists/shoopLists',
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
  },
  //添加图片
  chooseimage: function () {
    wx.chooseImage({
      count: 1,
      sourceType: ['album'],
      success: (res) => {
        img = res.tempFilePaths[0]
        if(img==undefined){
          img=this.data.img
        }
        console.log(img)
        wx.uploadFile({
          filePath: img,
          name: 'multFile',
          url: backstageUrls + '/goods/uploadImage',
          success: (res) => {
            console.log(res)
            img = JSON.parse(res.data).data
          }
        })
        this.setData({
          img: img
        })
      }
    })
  },
  formSubmit: function (e) {
    console.log(e)
    var sname = e.detail.value.commodityname
    var sjj = e.detail.value.commodityjj
    var price = e.detail.value.commodityprice
    if (sname == "" || sjj == "" || price == "" || img == "") {
      wx.showToast({
        title: '请填写完整商品信息',
        icon: "none"
      })
    } else {
      wx.request({
        url: backstageUrls + '/goods/add',
        data: {
          name: sname,
          price: price,
          detail: sjj,
          image: img
        },
        method: 'POST',
        success: (res) => {
          console.log(res)
          wx.switchTab({
            url: '/pages/shoopLists/shoopLists',
          })
        }
      })
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

2.detail

detail.wxml:


<!--pages/shoopLists/details/details.wxml-->
<view>
	<view class="box1" >
		<view>商品名称:</view>
		<view>{{list.name}}</view>
	</view>
	<view class="box2">
		<view>封面照片:</view>
		<image src="http://116.62.201.243:8080/wxxcx/{{list.image}}" class="box21"></image>
	</view>
	<view class="box3">
		<view>商品简介:</view>
		<view>{{list.detail}}</view>
	</view>
	<view class="box4">上架时间:{{list.upTime}}</view>
	<view class="box5"> 
		<view class="box51">单价:¥{{list.price}}</view>
		<button class="box52" bindtap="bianji" data-index="index">编辑</button>
	</view>
</view>

detail.wxss:


/* pages/shoopLists/details/details.wxss */
.box1{
  border-bottom: 1px solid gainsboro;
  padding:5px;
}
.box2{
  border-bottom: 1px solid gainsboro;
  padding:5px;
}
.box21{
  padding-left: 20px;
}
.box3{
  border-bottom: 1px solid gainsboro;
  padding:5px;
}
.box4{
  padding:5px;
}
.box5{
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
}
.box51{
  width: 200px;
  height: 40px;
  padding-left: 5px;
  padding-top: 15px;
}
.box52{
  width: 80px;
  height: 40px;
  right: -40px;
  margin-top: 5px;
  background-color: green;
  color: aliceblue;
  padding-bottom: 10px;
}

detail.js:

// pages/shoopLists/details/details.js
var  backstageUrls=getApp().backstageUrls
var userId=wx.getStorageSync('userInfo')
Page({

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

  },
//跳转在编辑页面
bianji:function(event){
  var list=JSON.stringify(this.data.list)
  console.log(list)
    wx.navigateTo({
      url: '/pages/shoopLists/edit/edit?list='+list,
    })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("options",options)
    var goodsId=options.goodsId
    console.log("goodsId",goodsId)
    wx.request({
      url: backstageUrls+'/goods/goodsDetails',
      data:{
        goodsId:goodsId
      },
      method:'POST',
      success:(res)=>{
        console.log("res",res)
        var list=res.data.data
        console.log("list",list)
        this.setData({
          list:list,
        })
      }
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})


3.edit

edit.wxml:


<!--pages/shoopLists/edit/edit.wxml-->
<view>
  <form bindsubmit='tj'>
	<view class="box1">
		<view>商品名称:</view>
		<input value="{{list.name}}" name='name'></input>
	</view>
	<view class="box2">
		<view>封面照片:</view>
		<image src="http://116.62.201.243:8080/wxxcx/{{image}}" class="box21" name='img' bindtap="moneychane"></image>
	</view>
	<view class="box3">
		<view>商品简介:</view>
			<input value="{{list.name}}" name='xq'></input>
	</view>
	<view class="box5"> 
		<view class="box51">单价:¥	<input value="{{list.price}}" name='dj'></input></view>
		<button class="box52" bindtap="queding" form-type='submit'>确定</button>
	</view>
	</form>
</view>


edit.wxss:

/* pages/shoopLists/edit/edit.wxss */
.box1{
  border-bottom: 1px solid gainsboro;
  padding:5px;
}
.box2{
  border-bottom: 1px solid gainsboro;
  padding:5px;
}
.box21{
  padding-left: 20px;
}
.box3{
  padding:5px;
}
.box4{
  padding:5px;
}
.box5{
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
}
.box51{
  width: 200px;
  height: 40px;
  padding-left: 5px;
  padding-top: 15px;
}
.box52{
  width: 80px;
  height: 40px;
  right: -40px;
  margin-top: 5px;
  background-color: green;
  color: aliceblue;
  padding-bottom: 15px;
}


edit.js:


// pages/shoopLists/edit/edit.js
var  backstageUrls=getApp().backstageUrls
var path
Page({
  tj:function(event){
    console.log(event)
    var list=this.data.list
    console.log(list)
    var image=this.data.image
    console.log(image)
    var dj=event.detail.value.dj
    var name=event.detail.value.name
    var xq=event.detail.value.xq
        wx.request({
          url: backstageUrls+'goods/update',
          data:{
            goodsId:list.goodsId,
            name:name,
            price:dj,
            image:image,
            detail:xq
          },
          method:'POST',
          success:(res)=>{
            console.log(res)
          }    
    })
  },
  moneychane:function(){
    wx.chooseImage({
      count:1,
      sourceType:['album'],
      success:(res)=>{
        console.log(res)
        wx.uploadFile({
          url: backstageUrls+'goods/uploadImage',
          filePath:res.tempFilePaths[0],
          name:"multFile",
          method:'POST',
          success:(res)=>{
            var data=JSON.parse(res.data).data
            console.log(data)
            this.setData({
              image:data
            })
          }
        })
      }
    })
  },
  queding:function(){
    wx.switchTab({
      url: '../../shoopLists/shoopLists',
    })
  },
  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var list=JSON.parse(options.list) 
    var image=list.image
    this.setData({
      list:list,
      image:image
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值