文章目录
一、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}}">
密 码:
</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 () {
}
})