提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、app.js
二、app.json
三、index（登录页）
- 1.index.wxml
- 2.index.wxss
- 2.index.js
四、shoopList（商品列表）
- 商品列表主页
- 1.details（商品详情页）
- 2.settlement（结算页）
五、appointment（预约页）
- 预约主页
- 1.appointmentAdd（添加预约）
- 2.appointmentDetails（预约详情）
六、orderForm（订单页）
- 订单主页
- 1.detailsoforders（订单详情）
七、information（个人中心页）
- 个人中心主页
- 1.addreceiptaddress（收货地址）
- 2.consume（余额）
- 3.Consumption（消费记录）
- 4.receivingaddress（添加收货地址）
- 5.receivingGoods（余额充值）

一、app.js

//app.js
App({backstageUrl:'http://116.62.201.243:8080/wxxcx/'
})

二、app.json

{"pages": ["pages/index/index","pages/shoopList/shoopList","pages/information/information","pages/information/receivingGoods/receivingGoods","pages/information/consume/consume","pages/information/Consumption/Consumption","pages/shoopList/details/details","pages/orderForm/orderForm","pages/information/receivingaddress/receivingaddress","pages/information/addreceiptaddress/addreceiptaddress","pages/appointment/appointment","pages/appointment/appointmentDetails/appointmentDetails","pages/appointment/appointmentAdd/appointmentAdd","pages/shoopList/settlement/settlement","pages/orderForm/detailsoforders/detailsoforders"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"tabBar": {"selectedColor":"#FF6699","color": "#000000","backgroundColor": "#ffffff","borderStyle": "black","position": "bottom","list": [{"pagePath": "pages/shoopList/shoopList","iconPath": "img/shoopList.png","selectedIconPath": "img/shoopLists.png.png","text": "商店"},{"pagePath": "pages/appointment/appointment","iconPath": "img/orderForm.png","selectedIconPath": "img/orderForms.png.png","text": "预约"},{"pagePath": "pages/orderForm/orderForm","iconPath": "img/appointment.png","selectedIconPath": "img/appointments.png.png","text": "订单"},{"pagePath": "pages/information/information","iconPath": "img/information.png","selectedIconPath": "img/information.png.png","text": "账户"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

三、index（登录页）

1.index.wxml

<!--index.wxml-->
<!-- 背景图 -->
<image src="../../img/background.png" class="img" mode='scaleToFill'></image>
<!-- 授权按钮 -->
<button class="button" open-type='getUserInfo' bindgetuserinfo="authoriZations" style="width: 300rpx;height: 100rpx;">立即体验</button>

2.index.wxss

/**index.wxss**/
.img{padding: 0;width: 100vw;height: 100vh;display: block;
}
.button{position: fixed;bottom: 400rpx;left: 220rpx;background: linear-gradient(to right,#f9957f, #f2f5d0, #aebaf8, #c973ff );width: 80%;  border-radius: 50rpx;
padding-top: 25rpx;
}

2.index.js

// pages/index/index.js
// 后台地址
var backstageUrl;
Page({data: {},// 授权按钮事件authoriZations:function(event){// 获取用户信息姓名var nickName=event.detail.userInfo.nickName// console.log(nickName)// 获取用户头像var avatarUrl=event.detail.userInfo.avatarUrl// console.log(avatarUrl)// 获取登录凭证// var code;wx.login({timeout: 2000,success:(res)=>{// console.log(res)// 登录凭证var code=res.codeconsole.log(code)wx.request({url: backstageUrl+'user/login',data:{code:code,name:nickName,headImage:avatarUrl},method:'POST',success:(res)=>{console.log('success',res)var userInfo=res.data.data.userIdconsole.log(userInfo)wx.setStorageSync('userInfo', userInfo)wx.switchTab({url: '../../pages/shoopList/shoopList',})}})}})},onLoad: function () { // 从app.js获取backstageUrl地址backstageUrl=getApp().backstageUrlconsole.log(wx.getStorageInfoSync('userInfo'))if(wx.getStorageInfoSync('userInfo').keys.length!=0){var id=setTimeout(function(){wx.switchTab({url: '../shoopList/shoopList',})},2000)}},
})

四、shoopList（商品列表）

商品列表主页

shoopList.wxml

<!--pages/shoopList/shoopList.wxml-->
<view class="zt"><swiper autoplay="true"><view wx:for="{{list}}"><swiper-item><image src="{{item.img}}" class="ll"></image></swiper-item></view></swiper><view class="pp"><view class="p1">书是人类进步的阶梯。</view><view class="p2"> ——高尔基</view></view><view class="box" wx:for="{{data}}"><image class="img" src="http://116.62.201.243:8080/wxxcx/{{item.image}}" bindtap="clikHandler"></image><view class="box3"><view class="box1" bindtap="tz" data-index="{{index}}"><view class="text1">{{item.name}}</view><view class="text2">￥{{item.price}}</view></view><view class="box2" bindtap="buy" data-indexs='{{index}}'>购买</view></view></view><view class="null"></view>
</view>
<view class="shopingcart"><image src="../../img/shopcar.png" class="img1"></image><text style="width:70px">{{sp}}件商品</text><text>总价:{{mumer}}</text><view class="bt"><button size="mini" class="qk" bindtap="empty">清空</button><button size="mini" class="js" bindtap="accounts">结算</button></view>
</view>

shoopList.wxss

/* pages/shoopList/shoopList.wxss */
/* pages/reina/reina.wxss */
.ll{width: 100vw;height: 200px;
}
.pp{width: 100vw;height: 40px;color: white;background-color: black;
}
.p1{padding-left: 40px;
}
.p2{padding-left: 250px;
}
.zt {width: 100vw;height: 93vh;
}.null {width: 100vw;height: 5vh;
}.box {display: flex;flex-direction: row;align-items: center;justify-content: space-around;height: 160rpx;width: 100vw;border-width: 0 0 1px 0;border-color: gainsboro;border-style: solid;
}.img {width: 120rpx;height: 120rpx;border:2px solid black;border-radius: 10px;}.box1 {width: 50vw;height: 140rpx;display: flex;flex-direction: column;justify-content: space-around;margin-right: 0px;}.text1 {font-size: 34rpx;font-weight: 500;display: -webkit-box;overflow:hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;white-space: normal;
}.text2 {font-size: 30rpx;color: green;
}
.box2 {background-color: mediumpurple;width: 110rpx;height: 70rpx;border-radius: 10%;text-align: center;line-height: 60rpx;color: mintcream;
}.box3 {width: 520rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;}.shopingcart {width: 100vw;height: 90rpx;position: absolute;bottom: 50rpx;background-color: white;border-width: 1px 0 1px 0;border-color: gainsboro;border-style: solid;display: flex;flex-direction: row;justify-content: space-between;align-items: center;position: fixed;bottom: 0;
}.shopingcart image {width: 50rpx;height: 50rpx;animation: rotate 2s infinite linear;margin-top: 15rpx;margin-left: 5rpx;
}.shopingcart text {width: 200rpx;height: 50rpx;margin-top: 15rpx;margin-left: 5rpx;
}@keyframes rotate {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}.bt {width: 250rpx;height: 7vh;display: flex;flex-direction: row;align-items: center;
}.qk {color: white;background-color: red;display: flex;justify-content: center;align-items: center;
}.js {color: white;background-color: green;
}

shoopList.js

// pages/reina/reina.js
var a = 0;
var pages = 1;
var backstageUrl = getApp().backstageUrl
var userId
Page({// 请求后台商品列表re: function () {console.log(pages)wx.request({url: backstageUrl + 'goods/getGoodsByPage',data: {page: pages,pageSize:8},method: 'POST',success: (res) => {console.log("res",res)var data = this.data.dataconsole.log("data",data)var dataH = res.data.dataconsole.log("dataH",dataH)if (dataH === undefined) {wx.showToast({title: '没有数据了',icon: 'none'})}else if(pages===1){data=dataHconsole.log("data",data)}else{ for (var i = 0; i < dataH.length; i++){data.push(dataH[i])}}this.setData({data:data})}})},// 跳转到商品详情页tz:function(event){var index=event.currentTarget.dataset.indexvar data=this.data.datavar goodsId=data[index].goodsIdwx.navigateTo({url: '../shoopList/details/details?goodsId='+goodsId})},// 购买buy:function(event){var index=event.currentTarget.dataset.indexs  var goodsId=this.data.data[index].goodsIdconsole.log(goodsId)console.log(userId)wx.showToast({title: '添加成功',icon:'none',success:(res)=>{wx.request({url: backstageUrl+'/cart/add',data:{userId:userId,goodsId:goodsId},method:'POST',success:(res)=>{this.add()}})}})},// 添加商品add:function(){var userId=wx.getStorageSync('userInfo')console.log(userId)wx.request({url: backstageUrl+'cart/getAll',data:{userId:userId},method:'POST',success:(res)=>{console.log(res)var total_num=res.data.data.total_numvar total_money=res.data.data.total_moneythis.setData({sp:total_num,mumer:total_money})}})},// 清空购物车empty:function(){wx.showModal({title:'是否清空购物车',cancelColor: '是否删除',success:(res)=>{if(res.confirm){wx.request({url: backstageUrl+'cart/delete',data:{userId:userId},method:'POST',success:(res)=>{console.log(res)this.setData({sp:0,mumer:'0.00'})}})}}})},// 结算accounts:function(){wx.navigateTo({url: '../shoopList/settlement/settlement',})},/*** 页面的初始数据*/data: {sp:0,mumer:'0.00',data: [],list:[{img:'/img/lun1.jpg'},{img:'/img/lun2.jpg'},{img:'/img/lun3.jpg'}]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {userId=wx.getStorageSync('userInfo')},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {pages=1this.re(),this.add()},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {wx.showToast({title: '刷新中',icon: 'loading',success: (res) => {pages = 1this.re()var id = setTimeout(() => {wx.stopPullDownRefresh()clearTimeout(id)}, 1000)}})},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {pages++var id = setTimeout(() => {wx.showToast({title: '加载数据中',icon: 'loading',mask: true,success: (res) => {clearInterval(id)this.re()}})}, 1000)},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

shoopList.json

{"usingComponents": {},"enablePullDownRefresh":true,"navigationBarTitleText":"斗学商城"
}

1.details（商品详情页）

details.wxml

<!-- 商品详情 -->
<view class="top">
<view>商品名称：</view>
<view class="name">{{data.name}}</view>
</view>
<!-- 封面图片 -->
<view class="fmtp">封面图片:</view>
<view class="tp">
<image src="{{url+data.image}}" class="img" mode="scaleToFill"></image>
</view>
<view class="top1">
<view>商品简介：</view>
<view class="jj">{{data.detail}}</view>
</view><view class="buttom"><view>
<text class="dj">单件:</text>
<text class="money">￥{{data.price}}</text>
</view>
<view class="bt"><button size="mini" class="qk" bindtap="qk">加入购物车</button><button size="mini" class="js" bindtap="js">购买</button>
</view>
</view>

details.wxss

/* pages/shoopList/details/details.wxss */
/* top */
.top{width: 100vw;border-bottom: 1px solid #ededed;padding-bottom: 20rpx;
}
.top1{width: 100vw;border-bottom: 1px solid #ededed;padding-bottom: 40rpx;margin-top: 30rpx;
}
.tp{width: 90vw;height: 650rpx;border-bottom: 1px solid #ededed;padding-left: 5vw;
}
.img{width: 90vw;height: 600rpx;text-align: center;
}
.buttom{width: 100vw;height: 100rpx;position: fixed;bottom: 0;display: flex;flex-direction: row;justify-content: space-between;align-items: center;border-top: 1px solid #d84040;
}
.qk{margin-right: 50rpx;
}
.js{background-color: red;color: white;
}
.money{margin-left: 10rpx;color: yellow;
}
.bt{margin-right: 25rpx;
}
.dj{margin-left: 25rpx;
}
.name{font-size: 50rpx;padding: 0 15rpx;
}
.jj{width: 100vw;
}
.fmtp{margin-top: 40rpx;
}

details.js

// pages/shoopList/details/details.js
var backstageUrl=getApp().backstageUrl
var userId=wx.getStorageSync('userInfo')
var goodsId
Page({add:function(){wx.request({url: backstageUrl+'cart/add',data:{userId:userId,goodsId:goodsId},method:'POST',success:(res)=>{console.log(res)}})},qk:function(){wx.showToast({title: '添加成功',icon:'none',success:(res)=>{var id=setTimeout(()=>{this.add()wx.switchTab({url: '../../shoopList/shoopList',})},1000)}})},js:function(){var list=JSON.stringify(this.data.data)wx.navigateTo({url: '../../shoopList/settlement/settlement?list='+list,})},/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log("options",options)goodsId=options.goodsIdwx.request({url: backstageUrl+'goods/goodsDetails',data:{goodsId:goodsId},method:'POST',success:(res)=>{console.log(res)var data=res.data.datathis.setData({data:data,url:backstageUrl})}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

details.json

{"usingComponents": {},"navigationBarTitleText":"商品详情"
}

2.settlement（结算页）

settlement.wxml

<!--pages/shoopList/settlement/settlement.wxml-->
<view class="box"><view class="box1"><image src="/img/address.png" style="width:50rpx;height:50rpx;"></image><view class="box11"><view>用户名：{{address.name}}</view><view>电话号：{{address.phone}}</view></view><view class="box12" bindtap="shdz">></view><view style="padding-top:20px">{{address.province}}{{address.city}}{{address.district}}</view></view><view class="box3"><view class="list" wx:for="{{goods_list}}"><image src="http://116.62.201.243:8080/wxxcx/{{item.goods.image}}" class="box31"></image><view style="margin-left:20rpx"><view class="box32">{{item.goods.name}}</view><view class="box33">￥{{item.goods.price}}</view></view><view><view class="box34">*{{item.number}}</view></view></view>
</view>
<!-- <view class="box3"><view class="list"><image src="http://116.62.201.243:8080/wxxcx/{{list.image}}" class="box31"></image><view style="margin-left:20rpx"><view class="box32">{{list.name}}</view><view class="box33">￥{{list.price}}</view></view><view><view class="box34">*{{item.number==undefined ? '1':item.number}}</view></view></view>
</view> --><view class="box332"><view>备注</view><textarea placeholder="请填写备注" ></textarea></view><view class="footer"><view class="box331">合计：<p>{{money==undefined ? list.price : money}}</p></view><view class="box35" bindtap="js">结算</view>
</view>
</view>
<view wx:for="{{lsit1}}">{{item}}
</view>

settlement.wxss

/* pages/shoopList/settlement/settlement.wxss */
page{background-color: gainsboro;
}
textarea{height: 150rpx;scroll-behavior: auto;
}
.box1{height: 240rpx;
display: flex;
flex-direction:column;
margin-bottom: 25rpx;
background-color: white;
border-radius: 20rpx;
padding-left: 15rpx;
}
.box11{display: flex;flex-direction: row;justify-content: space-between;padding-right: 60px;padding-top: 10px;
}
.box12{position: absolute;right: 20rpx;top: 100rpx;
}
.sp{border-bottom: 10px solid gray;
}
.box2{display: flex;flex-direction:row;justify-content: space-between;padding: 10px;}
.box21{display: flex;flex-direction: row;
}
.box211{display: flex;flex-direction: row;
}
.img{width:20px;height:20px;padding-top: -10px;padding-right: 3px;
}
.box3{background-color: white;
border-radius: 20rpx;
}
.list{display: flex;flex-direction: row;margin-bottom: 25rpx;padding:10px;
border-bottom: 1px gray solid;}
.list image{border-radius: 15rpx;
}
.box31{width: 60px;height: 60px;position: relative;
}
.box32{padding-top: 3px;
}
.box33{padding-top: 10px;
}
.box34{position: absolute;right: 10px;
}
.box331{font-weight: bolder;
font-size: 35rpx;
}
.box331 p{color: orange;}
.box332{background-color: white;border-radius: 20rpx;padding-left: 15rpx;
}
.box35{width: 180rpx;height: 50rpx;padding-bottom: 6rpx;text-align: center;padding-top: 8px;border-radius: 50rpx;background-color: orangered;color: white;
}
.footer{width: 100vw;height: 80rpx;position: fixed;bottom: 0rpx;background-color: white;display: flex;flex-direction: row;justify-content: space-between;align-items: center;
}

settlement.js

// pages/shoopList/settlement/settlement.js
var userId = wx.getStorageSync('userInfo')
var backstageUrl = getApp().backstageUrl
var address
var money1
var list;
var de=false;
Page({// 结算js: function () {var money = JSON.stringify(this.data.money)var addrId = this.data.address.addrIdconsole.log(this.data.lsit1)var goods_list = this.data.lsit1var name = this.data.user.namevar headImage = this.data.user.headImagevar balance = this.data.user.balancevar phoneNum = this.data.user.phoneNumconsole.log(userId)console.log(money)console.log(addrId)console.log(goods_list)wx.request({url: backstageUrl + 'order/create',data: {userId: userId,money: money,addrId: addrId,goods_list: goods_list},method: 'POST',success: (res) => {console.log(res)console.log(list)console.log(address)if(de){var y = balance - moneywx.request({url: backstageUrl + 'user/update',data: {userId: userId,name: name,headImage: headImage,balance: y},method: 'POST',success: (res) => {wx.switchTab({url: '../../shoopList/shoopList',})}})}else{wx.request({url: backstageUrl + 'cart/delete',data: {userId: userId},method: 'POST',success: (res) => {var y = balance - moneyconsole.log(userId)console.log(name)console.log(headImage)console.log(y)console.log(phoneNum)wx.request({url: backstageUrl + 'user/update',data: {userId: userId,name: name,headImage: headImage,balance: y,phoneNum: phoneNum},method: 'POST',success: (res) => {wx.switchTab({url: '../../shoopList/shoopList',})}})}})}}})},// 收货地址shdz: function () {console.log(this.data.goods_list)var list=JSON.stringify(this.data.goods_list)wx.redirectTo({url: '../../information/addreceiptaddress/addreceiptaddress?list='+list,})},/*** 页面的初始数据*/data: {},sj: function (goods_list) {// 获取结算页面信息wx.request({url: backstageUrl + 'order/settle',data: {userId: userId,goods_list: goods_list},method: 'POST',success: (res) => {console.log(res)if (res.data.data.good_list != undefined) {var goods_list1 = res.data.data.good_listconsole.log(address)if(address==undefined){address=res.data.data.address}// var address = res.data.data.addressvar money = res.data.data.total_moneythis.setData({goods_list: goods_list1,address: address,money: money})}}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log('optiond',options)if(options.list!=undefined && options.address==undefined){de=true}else{de=false}console.log(de)// 获取goodisif (options.list != undefined) {list = JSON.parse(options.list)console.log(list)if(list.goodsId==undefined){var list2=[]for(var i=0;i<list.length;i++){console.log(list[i])var list1={userId:userId,goodsId:list[i].goods.goodsId,num:list[i].number}console.log(list1)list2.push(list1)console.log(list2)}this.sj(list2)console.log(list2)this.setData({lsit1:list2})}else{var list2 = {userId: userId,goodsId: list.goodsId,num: 1}var list1 = []list1.push(list2)this.sj(list1)console.log(list1)this.setData({lsit1:list1})}} else {wx.request({url: backstageUrl + 'cart/getAll ',data: {userId: userId},method: 'POST',success: (res) => {console.log(res)var goods_list = res.data.data.goods_listthis.sj(goods_list)this.setData({lsit1:goods_list})// 获取地址if (options.addrId != undefined) {var adz=options.addrIdconsole.log()}}})}// 判断地址if(options.address!=undefined){address=JSON.parse(options.address)console.log(address)this.setData({address:address})console.log(this.data.address)}// 请求用户信息wx.request({url: backstageUrl + 'user/userInfo',data: {userId: userId},method: 'POST',success: (res) => {console.log(res)var user = res.data.datathis.setData({user: user})}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

settlement.json

{"usingComponents": {},"navigationBarTitleText":"结算"
}

五、appointment（预约页）

预约主页

appointment.wxml

<!--pages/appointment/appointment.wxml-->
<!-- 预约列表 -->
<view class="yy">●●●●预约馆●●●●</view>
<view class="ointmentList" wx:for="{{list}}" bindtap="tz" data-index="{{index}}"><!-- 内容 --><view class="content"><view class="title">{{item.bookItem}}</view><view class="time">到店时间：{{item.comeTime}}</view></view><!-- 状态原点 --><view class="statusDots"><view class="{{item.status==='1' ? 'acceptDots' : item.status==='2' ? 'refuseDots':item.status==='3' ? 'handledDots' : 'ExpiredDots'}}"></view></view>
</view>
<view bindtap="appointment" class="yy1">添加预约</view>

appointment.wxss

/* pages/appointment/appointment.wxss */
.yy{width: 100vw;height: 100px;background-color: black;color: wheat;text-align: center;line-height: 100px;
}
.yy1{margin-top: 12px;padding-top: 30px;padding-left: 15px;margin-left: 140px;width: 80px;height: 60px;border-radius: 50px;background-color: gray;color: white;margin-bottom: 20rpx;
}
/* 列表整体设置 */
.ointmentList{width: 100vw;height: 150rpx;display: flex;flex-direction: row;justify-content: space-between;border: 1px solid #ededed;
}
/* 左侧内容设置 */
.content{width: 90vw;height: 150rpx;display: flex;flex-direction: column;justify-content: center;margin-left: 25rpx;
}
/* 标题设置 */
.title{font-size: 40rpx;
}
/* 到店时间设置 */
.time{font-size: 30rpx;
}
/* 右侧状态原点设置 */
.statusDots{width: 10vw;height: 150rpx;display: flex;align-items: center;
}
/* 接受原点 */
.acceptDots{width: 20rpx;height: 20rpx;background-color: #2c08ad;border-radius: 50%;
}
/* 拒绝原点 */
.refuseDots{width: 20rpx;height: 20rpx;background-color: #0cf56d;border-radius: 50%;
}
/* 未处理原点 */
.handledDots{width: 20rpx;height: 20rpx;background-color: #b506eb;border-radius: 50%;
}
.ExpiredDots{width: 20rpx;height: 20rpx;background-color: red;border-radius: 50%;
}

appointment.js

// pages/appointment/appointment.js
var backstageUrl=getApp().backstageUrl
Page({appointment:function(){wx.navigateTo({url: '../appointment/appointmentAdd/appointmentAdd'})},tz:function(event){var list=this.data.listconsole.log(list)var index=event.currentTarget.dataset.indexconsole.log(index)var bookId=list[index].bookIdconsole.log(bookId)wx.navigateTo({url:'../appointment/appointmentDetails/appointmentDetails?bookId='+bookId})},/*** 页面的初始数据*/data: {list:[]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {// 从本地缓存获取userInfo
var userId=wx.getStorageSync('userInfo')
// console.log(userId)
wx.request({url: backstageUrl+'book/getAllById',data:{userId:userId},method:'POST',success:(res)=>{console.log(res)var list1=res.data.datavar list=this.data.listconsole.log(list1)this.setData({list:list1})}
})},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

appointment.json

{"usingComponents": {},"navigationBarTitleText":"预约列表"
}

1.appointmentAdd（添加预约）

appointmentAdd.wxml

<!--pages/appointment/appointmentAdd/appointmentAdd.wxml-->
<form bindsubmit='formSbumit' ><!-- 服务项目 --><view class="content"><view>服务项目：</view><input type="text" placeholder='请输入服务项目的名称' name='name' style="width:90vw"/></view><!-- 预约时间 --><view class="content"><view>预约日期：</view><view class="data">当前选择：<picker mode="date" value='{{data}}' bindchange='dataChange' class="dataPicker" name='data' start='{{saveData}}'>{{data}}</picker></view></view><!-- 预约时间 --><view class="content"><view>预约时间：</view><view class="data">当前选择：<picker mode="time" value='{{time}}' bindchange='timeChange' class="dataPicker" name='time' start='{{saveTime}}'>{{time}}</picker></view></view><!-- 留言 --><view class="content"><view>留言：</view><textarea name="message" placeholder='请输入留言'></textarea></view><button class="submit" form-type="submit">确定</button>
</form>

appointmentAdd.wxss

/* pages/appointment/appointmentAdd/appointmentAdd.wxss */
.content{width: 100vw;height: 120rpx;border-bottom: 1px solid #ededed;display: flex;flex-direction: column;justify-content: center;padding-left: 25rpx;
}
.data{display: flex;flex-direction: row;
}
.submit{position: absolute;bottom: 70rpx;left: 25vw;background-color: chocolate;color: white;
}

appointmentAdd.js

// pages/appointment/appointmentAdd/appointmentAdd.js
var backstageUrl=getApp().backstageUrl
Page({formSbumit:function(event){console.log(event)// 获取项目名字var name=event.detail.value.name// 获取预约日期var data=event.detail.value.data// 获取预约时间var time=event.detail.value.time// 获取留言var message=event.detail.value.messageif(name=='' || data=='' || time=='' || message==''){wx.showToast({title: '请填写完整信息',icon:'none'})}else{// 设置弹窗wx.showModal({content:'确定预约',success:(res)=>{// console.log(res)// 获取用户点击确定var confirm=res.confirm// 获取本地缓存的userIdvar userId=wx.getStorageSync('userInfo')if(confirm===true){// 请求后台wx.request({url: backstageUrl+'book/add',data:{userId:userId,comeTime:data+'-'+time,bookItem:name,message:message},method:'POST',success:(res)=>{console.log(res)wx.showToast({title: '添加成功',icon:'none',})}}),wx.switchTab({url: '../../appointment/appointment',})}}})}},dataChange:function(event){// 获取预约日期// console.log(event)var data=event.detail.value// 设置预约日期this.setData({data:data})},timeChange:function(event){// 获取预约时间// console.log(event)var time=event.detail.value// 设置预约时间this.setData({time:time})},/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {var timestamp = Date.parse(new Date());var date = new Date(timestamp);//获取年份  var Y = date.getFullYear();//获取月份  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);//获取当日日期 var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();// 获取当前小时var H = date.getHours()// 获取当前分钟var S = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();this.setData({// 存组件开始的日期saveData:Y+'-'+M+'-'+D,// 设置页面最开始显示的日期data:Y+'-'+M+'-'+D,// 存组件开始的时间saveTime:H+':'+S,// 设置页面最开始显示的时间time:H+':'+S})},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

appointmentAdd.json

{"usingComponents": {},"navigationBarTitleText":"添加预约"
}

2.appointmentDetails（预约详情）

appointmentDetails.wxml

<!--pages/appointment/appointmentDetails/appointmentDetails.wxml-->
<!-- 预约申请 -->
<view class="booking"><view class="bookIng">预约申请：</view><view class="yes">{{data.status=='0' ? '已过期':data.status=='1' ? '已接受':data.status=='2' ? '已拒绝':'未处理'}}</view>
</view>
<!-- 服务项目 -->
<view class="booking1"><view class="bookIng">服务项目：</view><view class="yes1">{{data.bookItem}}</view>
</view>
<!-- 预约时间 -->
<view class="booking2"><view class="bookIng">预约时间：</view><view class="yes">{{data.bookTime}}</view>
</view>
<!-- 到店时间 -->
<view class="booking2"><view class="bookIng">到店时间：</view><view class="yes">{{data.comeTime}}</view>
</view>
<!-- 留言 -->
<view class="booking1"><view class="bookIng">留言</view><view class="yes1">{{data.message}}</view>
</view>

appointmentDetails.wxss

/* pages/appointment/appointmentDetails/appointmentDetails.wxss */
.booking{width: 100vw;height: 80rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;border-bottom: 1px solid #ededed;
}
.bookIng{margin-left: 20rpx;
}
.yes{margin-right: 20rpx;
}
.booking1{width: 100vw;height: 100rpx;display: flex;flex-direction: column;justify-content: center;border-bottom: 1px solid #ededed;
}
.yes1{margin-left: 20rpx;
}
.booking2{width: 100vw;height: 100rpx;display: flex;flex-direction: row;align-items: center;border-bottom: 1px solid #ededed;
}

appointmentDetails.js

// pages/appointment/appointmentDetails/appointmentDetails.js
var backstageUrl=getApp().backstageUrl
var bookId
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log("options",options)bookId=options.bookId},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {var id=bookIdwx.request({url: backstageUrl+'book/details',data:{bookId:bookId},method:'POST',success:(res)=>{console.log(res)var data=res.data.datathis.setData({data:data})}})},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

appointmentDetails.json

{"usingComponents": {},"navigationBarTitleText":"预约详情"
}

六、orderForm（订单页）

订单主页

orderForm.wxml

<!--pages/orderForm/orderForm.wxml-->
<view class="bigbox"><view class="box"><view class="{{click? 'btn2':'btn1'}}" bindtap="btn1click">待发货</view><view class="{{click1? 'btn2':'btn1'}}" bindtap="btn2click">待收货</view><view class="{{click2? 'btn2':'btn1'}}" bindtap="btn3click">已完成</view></view>
</view>
<view class="item1" wx:for="{{list}}" data-index="{{list[index].orderNum}}" bindtap="itemclick"><view class="box1"><view class="t1">订单号：{{list[index].orderNum}}</view><view class="t2">{{list[index].createTime}}</view></view><view class="box2"><view class="price">￥{{list[index].money}}</view><view class="{{click1? 'btnn':'btnn1'}}" data-odernum="{{item.orderNum}}" data-message="{{item.message}}" catchtap="confirm">确认收货</view></view>
</view>

orderForm.wxss

/* pages/orderForm/orderForm.wxss */
.box{width: 100vw;height: 200rpx;display: flex;flex-direction: row;justify-content: center;align-items: center;
}
.btn1{width: 180rpx;height: 60rpx;background-color:white;text-align: center;line-height: 60rpx;border: 2rpx solid   #DEB887;color: #DEB887;
}
.btn2{width: 180rpx;height: 60rpx;background-color:#DEB887;text-align: center;line-height: 60rpx;border: 2rpx solid #DEB887;color: white;
}
.item1{width: 100vw;height:140rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;border-bottom: 2rpx solid #DCDCDC;
}
.box1{display: flex;flex-direction:column;justify-content:center;align-items: flex-start;margin-left: 20rpx;
}
.t1{font-size:34rpx;
}
.t2{font-size:24rpx;
}
.box2{width:200rpx;display: flex;flex-direction:column;justify-content: center;align-items: center;margin-right: 20rpx;
}
.price{font-size:40rpx;color:#32CD32;
}
.btnn{width:150rpx;height: 50rpx;background-color:#00FF7F;font-size: 26rpx;border-radius: 10rpx;text-align: center;line-height:50rpx;
}
.btnn1{visibility: hidden;width:150rpx;height: 50rpx;background-color:#00FF7F;font-size: 26rpx;border-radius: 10rpx;text-align: center;line-height:50rpx;
}

orderForm.js

// pages/orderForm/orderForm.js
var click = true
var click1 = false
var click2 = false
var list
var backstageUrl = getApp().backstageUrl
var statu
var orderNum
Page({/*** 页面的初始数据*/data: {click: true},//待发货点击事件btn1click: function () {//取反值显示css样式click = !click//判断此选项选中后其他选项为不选中if (click) {click1 = falseclick2 = falsethis.setData({click: click,click1: click1,click2: click2})}//请求状态为1的订单this.getmess(1)},//待收货点击事件btn2click: function () {//取反值显示css样式click1 = !click1//判断此选项选中后其他选项为不选中if (click1) {click = falseclick2 = falsethis.setData({click: click,click1: click1,click2: click2})}//请求状态为2的订单this.getmess(2)},//已完成点击事件btn3click: function () {//取反值显示css样式click2 = !click2//判断此选项选中后其他选项为不选中if (click2) {click1 = falseclick = falsethis.setData({click: click,click1: click1,click2: click2})}//请求状态为3的订单this.getmess(3)},//条目点击事件itemclick: function (event) {console.log(event)orderNum=event.currentTarget.dataset.indexwx.navigateTo({url: '/pages/orderForm/detailsoforders/detailsoforders?orderNum='+orderNum,})},onLoad: function (options) {},getmess:function(statu){console.log("M",statu)//获取缓存中用户IDvar userId = wx.getStorageSync('userInfo')//网络请求wx.request({url: backstageUrl + '/order/showByStatus',method: "POST",data: {userId: userId,status:statu},//成功回调函数success: (res) => {console.log(res)//获取返回值列表list = res.data.data//返回值设置至datathis.setData({list: list})}})},confirm:function(d){var that=thisvar ordernum=d.target.dataset.odernumvar message=d.target.dataset.messagewx.request({url: backstageUrl+'/order/updateStatus',method: "POST",data: {orderNum:ordernum,status:"3",message:message},success:(res)=>{wx.showModal({title:'确认收货吗',cancelColor: 'cancelColor',success:(res)=>{if(res.confirm){that.getmess("2")}else{console.log("用户取消",res.cancel)}}})}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {this.getmess(1)},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

orderForm.json

{"usingComponents": {},"navigationBarTitleText": "订单列表"
}

1.detailsoforders（订单详情）

detailsoforders.wxml

<!--pages/orderForm/detailsoforders/detailsoforders.wxml-->
<view class="box1"><view class="t1">订单编号：{{order.orderNum}}</view>
</view>
<view class="box1"><view class="t1">创建时间：{{order.createTime}}</view>
</view>
<view class="box2"><view class="t1">收货地址：</view><view class="address"><view class="namephone"><view class="t1">用户名：{{address.name}}</view><view class="t2">电话：{{address.phone}}</view></view><view class="t3">地址：{{address.city}}-{{address.province}}-{{address.district}}</view></view>
</view>
<view class="box2" wx:for="{{item_list}}"><view class="t1">商品列表：</view><view class="commodities"><view class="sp"><image class="img" src="http://116.62.201.243:8080/wxxcx/{{item.image}}"/><view><view>{{item.name}}</view><view>{{item.price}}</view></view></view><view class="t2">*{{item.num}}</view></view>
</view>
<view><view class="t1">备注:</view><textarea name="" id="" cols="30" rows="10" class="t1">{{}}</textarea>
</view>

detailsoforders.wxss

/* pages/orderForm/detailsoforders/detailsoforders.wxss */
.box1{width: 100vw;height: 90rpx;line-height: 90rpx;font-size: 36rpx;border-bottom: 2rpx solid #dcdcdc;
}
.t1{margin-left: 20rpx;
}
.t2{margin-right:40rpx;
}
.t3{margin-left: 20rpx;margin-top: 20rpx;
}
.box2{width: 100vw;height: 200rpx;font-size: 36rpx;display: flex;flex-direction:column;justify-content:center;border-bottom: 2rpx solid #dcdcdc;
}
.namephone{display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 20rpx;
}
.commodities{display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 20rpx;
}
.img{width:140rpx;height:140rpx;
}
.sp{display: flex;flex-direction: row;justify-content:start;margin-left: 20rpx;
}

detailsoforders.js

// pages/orderForm/detailsoforders/detailsoforders.js
var backstageUrl = getApp().backstageUrl
var orderd
var list
var orders
var addresss
var item_lists
Page({/*** 页面的初始数据*/data: {},dd:function(order){//获取缓存中用户IDvar userId = wx.getStorageSync('userInfo')console.log('dd',order)//网络请求wx.request({url: backstageUrl + '/order/details',method: "POST",data: {orderNum:orderd},//成功回调函数success: (res) => {console.log(res)//获取返回值列表orders = res.data.data.orderaddresss=res.data.data.addressitem_lists=res.data.data.item_list//返回值设置至datathis.setData({order:orders,address:addresss,item_list:item_lists})}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {orderd=options.orderNumconsole.log(orderd)this.dd(orderd)},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

detailsoforders.json

{"usingComponents": {},"navigationBarTitleText": "订单详情"
}

七、information（个人中心页）

个人中心主页

information.wxml

<!--pages/information/information.wxml-->
<view class="box"><view class="box1"><image src="/img/bj.jpg" class="g1"><image src="{{tx}}" class="tx"></image><view class="yhm">{{xm}}</view></image></view><view class="box2"><view class="box21"><image src="/img/ye.png" class="a"></image><view>余额</view></view><view class="box22"><view data-ind="ind">￥{{qq}}</view><view class="modalDlg" wx:if="{{showModal}}" ><view class='close_mask' bindtap="close_mask">X</view><input class='recharge_amount' type='number' placeholder='输入金额:' maxlength="8" value='{{q}}'bindinput='formNum'></input><view class="box221"><view class="je" wx:for="{{je}}" bindtap="jq" data-index="{{index}}"> {{item.ed}}</view></view><button class='save_money' type='submit' bindtap="qr">确定</button></view><view class="cz" bindtap="submit">充值</view><view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view></view></view><view class="box2" bindtap="Consumption"><view class="box21"><image src="/img/xfjl.png" class="a"></image>消费记录</view><image src="/img/more.png" class="more"></image></view><view class="box2" bindtap="consume"><view class="box21"><image src="/img/recharge.png" class="a"></image>充值记录</view><image src="/img/more.png" class="more"></image></view><view class="box2"  bindtap="receivingGoods"><view class="box21"><image src="/img/address1.png" class="a"></image>收货地址</view><image src="/img/more.png" class="more"></image></view>
</view>

information.wxss

/* pages/information/information.wxss */
.g1 {width: 100vw;height: 100px;
}
.tx {position: fixed;width: 60px;height: 60px;border-radius: 50%;top: 20px;left: 30px;
}
.more{width: 40rpx;height: 40rpx;
}
.yhm {position: fixed;color: aliceblue;top: 40px;left: 100px;
}
.box2 {display: flex;flex-direction: row;justify-content: space-between;padding: 20px;border-bottom: 1px solid bisque;
}.mask {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;z-index: 9000;opacity: 0.7;
}
.modalDlg {width: 580rpx;height: 450rpx;position: fixed;top: 50%;left: 0;z-index: 9999;margin: -370rpx 85rpx;background-color: #fff;border-radius: 36rpx;display: flex;flex-direction: column;align-items: center;
}.recharge_amount {color: #aaa;width: 450rpx;height: 80rpx;background: #f1f1f1;text-align: center;border-radius: 12rpx;margin-top: 20rpx;margin-bottom: 10px;text-indent: 0;
}.save_money {color: black;width: 270rpx;height: 80rpx;background: gainsboro;text-align: center;border-radius: 12rpx;padding-top: 12px;margin-top: 15rpx;font-size: 28rpx;text-indent: 0em;
}
.close_mask {color: #000;position: relative;padding-top: 5px;left: 42%;font-size: 32rpx;
}
.box221{display: flex;flex-direction: row;flex-wrap:wrap;padding-left: 35px;background-color: gainsboro;
}
.je{background-color: blanchedalmond;width: 60px;height: 30px;text-align: center;padding-top: 6px;margin-top: 5px;margin-bottom: 5px;margin-right: 10px;
}.box21 {display: flex;flex-direction: row;
}.box22 {display: flex;flex-direction: row;
}.cz {text-align: center;width: 40px;border: 3px solid red;color: red;margin-top: -5px;
}.a {width: 25px;height: 25px;padding-right: 10px;
}

information.js

// pages/information/information.js
var q;
var qq;
var backstageUrl=getApp().backstageUrl
var userId=wx.getStorageSync('userInfo')
Page({/*** 页面的初始数据*/data: {qq:'0.00',je:[{ed:'50'},{ed:'100'},{ed:'200'},{ed:'500'},{ed:'800'},{ed:'1000'}]},//点击充值弹窗
submit:function(event){console.log("event",event)this.setData({showModal:true})
},//点开时
preventTouchMove: function () {},
close_mask: function () {this.setData({showModal: false})
},//关闭时
//充值金钱
jq:function(event){console.log("金钱",event)var index=event.target.dataset.indexq=this.data.je[index].edconsole.log("q",q)this.setData({q:q})
},
// 余额
ye:function(){//获取用户信息wx.request({url:backstageUrl+'user/userInfo',data:{userId: userId,},method:'POST',success:(res)=>{console.log(res)var xm=res.data.data.name//console.log("xm",xm)var tx=res.data.data.headImage// console.log("tx",tx)var qy=res.data.data.balanceconsole.log("qy",qy)this.setData({xm:xm,tx:tx,qq:qy})},fail:(err)=> {console.log("失败")}})
},
//获取充值金额
qr:function(qr){console.log("确认",qr)qq=this.data.qconsole.log("qq",qq)wx.request({url: backstageUrl+'recharge/record',data:{userId:userId,money:qq},method:'POST',success:(res)=>{this.ye()this.setData({showModal: false})}})},
//获取输入金钱
formNum:function(e){console.log(e)var q=e.detail.valueconsole.log("q",q)this.setData({q:q})},
//获取消费记录
Consumption:function(event){wx.navigateTo({url: '/pages/information/Consumption/Consumption',
})
},
//获取充值记录
consume:function(){wx.navigateTo({url: '/pages/information/consume/consume',})
},
//获取收货地点
receivingGoods:function(){wx.navigateTo({url: '/pages/information/addreceiptaddress/addreceiptaddress',})
},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function (event) {this.ye()},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

information.json

{"usingComponents": {},"navigationBarTitleText": "个人中心"
}

1.addreceiptaddress（收货地址）

addreceiptaddress.wxml

<!--pages/information/addreceiptaddress/addreceiptaddress.wxml-->
<view class="bigbox" wx:for="{{data}}"><view class="box1" bindtap="cz"  data-index="{{index}}"><view class="t1">{{item.name}}</view><view class="t2">{{item.phone}}</view></view><view class="box2" bindtap="cz" data-index="{{index}}">{{item.province}}{{item.city}}{{item.district}}</view><view class="box3"><radio-group catchchange='submit' data-index="{{index}}"><radio class="radio1" checked="{{item.defaultFlag}}" value="{{item.defaultFlag}}">{{item.defaultFlag ? '默认地址':'设为默认地址'}}</radio></radio-group><view class="smallbox"><view class="smallbox"><image class="img1" src="/img/edit.png" /><view class="handle" catchtap="editor" data-index="{{index}}" >编辑</view></view><view class="smallbox"><image class="img1" src="/img/delete.png" /><view class="handle" catchtap="delete" data-index="{{index}}" >删除</view></view></view></view>
</view>
<view class="box"><view class="btn1" bindtap="clickaddress">添加新地址</view>
</view>

addreceiptaddress.wxss

/* pages/information/addreceiptaddress/addreceiptaddress.wxss */
.bigbox{width: 100vw;height: 20vh;display:block;
}
.bigbox1{display: none;
}
.box1{width: 100vw;height: 80rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;
}
.t1{font-size:36rpx;margin-left: 20rpx;
}
.t2{font-size:36rpx;margin-right: 20rpx;}
.box2{width: 100vw;height: 80rpx;font-size:40rpx;margin-left: 20rpx;border-bottom: 1px solid #DCDCDC;
}
.box3{width: 100vw;height: 80rpx;display: flex;flex-direction:row;justify-content: space-between;align-items: center;border-bottom: 20rpx solid #DCDCDC;
}
.radio1{margin-left: 20rpx;
}
.smallbox{display: flex;flex-direction:row;}
.img1{width: 40rpx;height: 40rpx;
}
.box{width: 100vw;height: 200rpx;display: flex;flex-direction:column;justify-content:center;align-items: center;
}
.btn1{width: 400rpx;height: 80rpx;text-align: center;line-height: 80rpx;background-color:#32CD32;border-radius: 10rpx;color: white;
}
.handle{width: 100rpx;}

addreceiptaddress.js

// pages/information/addreceiptaddress/addreceiptaddress.js
var backstageUrl=getApp().backstageUrl
var userId=wx.getStorageSync('userInfo')
var list;
Page({cz:function(event){var index=event.currentTarget.dataset.indexconsole.log(index)var data=this.data.dataconsole.log(data)var address=JSON.stringify(data[index])console.log(address)// var list1=JSON.stringify(list)// console.log(list1)wx.redirectTo({url: '../../shoopList/settlement/settlement?address=' + address + '&list='+list})},dz:function(){wx.request({url: backstageUrl+'address/all',data:{userId:userId},method:'POST',success:(res)=>{console.log(res)var data=res.data.datathis.setData({data:data})}})},submit:function(event){console.log(event)var t=event.detail.valuevar data=this.data.dataconsole.log(data)var index=event.currentTarget.dataset.indexwx.request({url: backstageUrl+'address/changeDefault  ',data:{addrId:data[index].addrId,},method:'POST',success:(res)=>{console.log(res)this.dz()}})},delete:function(event){var data=this.data.datavar index=event.currentTarget.dataset.indexwx.request({url: backstageUrl+'address/delete',data:{addrId:data[index].addrId},method:'POST',success:(res)=>{console.log(res)wx.showToast({title: '删除成功',icon:'none',success:(res)=>{this.dz()}})}})},editor:function(event){var data=this.data.datavar index=event.currentTarget.dataset.indexvar addrId=data[index].addrIdwx.redirectTo({url: '../receivingGoods/receivingGoods?addrId='+addrId,})},/*** 页面的初始数据*/data: {},//按钮点击事件clickaddress: function () {//跳转至添加地址页面wx.redirectTo({url: '/pages/information/receivingaddress/receivingaddress',})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(options)list=options.listconsole.log(list)},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {this.dz()},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

addreceiptaddress.json

{"usingComponents": {},"navigationBarTitleText": "收货地址"}

2.consume（余额）

consume.wxml

<!--pages/information/consume/consume.wxml-->
<view class="cz" wx:for="{{data}}"><view class="cz1"><view>{{item.rechargeTime}}</view></view><view style="color:red">✙￥{{item.money}}</view>
</view>

consume.wxss

/* pages/information/consume/consume.wxss */
.cz{
display:flex;
flex-direction:row;
justify-content: space-between;
padding:15px;
background-color:gainsboro;
border-bottom: 1px solid gray;
}
.cz1{
display: flex;
flex-direction: row;
}

consume.js

// pages/information/consume/consume.js
var backstageUrl=getApp().backstageUrl
var userId=wx.getStorageSync('userInfo')
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {//获取消费记录wx.request({url: backstageUrl+'recharge/getRecord ',data:{userId:userId},method:'POST',success:(res)=>{var records=res.data.dataconsole.log("records",records)this.setData({data:records})}})},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

consume.json

{"usingComponents": {},"navigationBarTitleText": "充值记录"
}

3.Consumption（消费记录）

Consumption.wxml

<!--pages/information/Consumption/Consumption.wxml-->
<view class="px"><view class="{{times?'px1':'px2'}}" bindtap="time">时间排序</view><view class="{{jqs?'px1':'px2'}}" bindtap="jq">金额排序</view>
</view>
<view class="box" wx:for="{{list}}"><view><view>订单号：<text style="color:blue">{{item.orderNum}}</text></view><view style="font-size:12px">{{item.createTime}}</view></view><view><view style="color:green">￥-{{item.money}}</view></view>
</view>

Consumption.wxss

/* pages/information/Consumption/Consumption.wxss */
.px{  display: flex;flex-direction: row;justify-content: center;  }
.px1{background-color: burlywood;border: 1px solid burlywood;width: 100px;height: 30px;text-align: center;line-height: 30px;font-size: 13px;
}
.px2{border:1px solid burlywood;width: 100px;height: 30px;text-align: center;line-height: 30px;font-size: 13px;
}.box{
display: flex;
flex-direction: row;  justify-content: space-between;  padding: 15px;  border-bottom: 1px solid gainsboro;
}

Consumption.js

// pages/information/Consumption/Consumption.js
var backstageUrl=getApp().backstageUrl;
var userId=wx.getStorageSync('userInfo');
var orderBy;
var valueBy;
var times=true
var jqs=false
Page({/*** 页面的初始数据*/data: {times:true},
//按时间排序
time:function(event){this.getme("createTime")times=!timesif(times){jqs=falsethis.setData({times:times,jqs:jqs})}
},
jq:function(event){this.getme("money")jqs=!jqsif(jqs){times=falsethis.setData({times:times,jqs:jqs})}
},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//获取消费记录
this.getme("createTime")},getme:function(a){wx.request({url: backstageUrl+'order/show',data:{userId:userId,orderBy:1,valueBy:a,},method:'POST',success:(res)=>{console.log(res)var list=res.data.dataconsole.log("list",list)this.setData({list:list})}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

Consumption.json

{"usingComponents": {},"navigationBarTitleText": "消费记录"
}

4.receivingaddress（添加收货地址）

receivingaddress.wxml

<!--pages/information/receivingaddress/receivingaddress.wxml-->
<form class="bigbox"  bindsubmit="formSubmit"><view class="box1"><view class="t1">收货人</view><input type="text" placeholder="请输入收货人姓名" maxlength="6" name="username" /></view><view class="box1"><view class="t1">联系电话</view><input type="number" maxlength="11" placeholder="请输入联系电话" name="telephone" /></view><view class="box2"><view class="t1">所在地区</view><picker class="t2" mode="region" bindchange="bindRegionChange" name="region">{{choce}}{{address}}</picker></view><textarea class="ta1" name="messgae" id="t1" cols="30" rows="3" placeholder="请填写详细地址"></textarea><view class="box2"><view class="t1">设为默认</view><switch class="swich1" name="swich"></switch></view><view class="box3"><button class="btn1" form-type="submit">提交</button></view>
</form>

receivingaddress.wxss

/* pages/receivingaddress/receivingaddress.wxss */
.bigbox{width: 100vw;height: 100vh;display: flex;flex-direction:column;
}
.box1{width: 100vw;height: 8vh;display: flex;flex-direction:row;justify-content:start;align-items: center;font-size: 40rpx;border-bottom: 1px solid #C0C0C0;
}
.box2{width: 100vw;height: 8vh;display: flex;flex-direction:row;justify-content:space-between;align-items: center;font-size: 40rpx;border-bottom: 1px solid #C0C0C0;
}
.box3{width:100vw;height: 300rpx;display: flex;flex-direction:column;justify-content:center;align-items: center;
}
.t1{width:200rpx;margin-left: 20rpx;
}
.t2{margin-right: 30rpx;
}
.ta1{width: 100vw;height: 200rpx;padding: 20rpx;font-size: 40rpx;border-bottom: 15rpx solid#F5F5F5;
}
.btn1{width: 500rpx;/* height: 100rpx; */background-color:#32CD32;border-radius: 10rpx;text-align: center;/* line-height: 100rpx; */color: white;
}

receivingaddress.js

// pages/receivingaddress/receivingaddress.js
var backstageUrl = getApp().backstageUrl
var userId = wx.getStorageSync('userInfo')
Page({/*** 页面的初始数据*/data: {//所在地区显示数据choce: '请选择'},//表单submit提交事件formSubmit: function (res) {//将from表单数据转换为JSON格式var form = res.detail.valuevar name = form.usernamevar telephone = form.telephonevar region = form.regionvar message = form.messageif (name == "" || telephone == "" || region == "" || message == "") {wx.showToast({title: '请填写完整地址信息',icon:"none"})} else {//用户添加地址成功后提示弹窗wx.showToast({title: '添加成功',icon: 'success',success: () => {//参数回调成功后跳转至选择地址页面并带入JSON数据wx.request({url: backstageUrl + 'address/add',data: {userId: userId,name: form.username,province: form.region[0],city: form.region[1],district: form.region[2],detail: form.messgae,phone: form.telephone,defaultFlag: form.swich},method: 'POST',success: (res) => {console.log(res)}})var id = setTimeout(() => {wx.redirectTo({url: '/pages/information/addreceiptaddress/addreceiptaddress?form=' + form,success: () => {clearTimeout(id)}})}, 2000)}})}console.log(res)console.log(form.name)console.log(form.region)},//地区选择器点击事件bindRegionChange: function (e) {console.log(e)//将‘请选择’显示至界面this.data.chocevar choce = e.detail.value//将用户选择地区参数显示至界面this.setData({choce: choce})// console.log(event)var goodsId=event.currentTarget.dataset.indexconsole.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.dataconsole.log(list)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// })},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(options)},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

receivingaddress.json

{"usingComponents": {},"navigationBarTitleText": "添加收货地址"
}

5.receivingGoods（余额充值）

receivingGoods.wxml

<!--pages/information/receivingaddress/receivingaddress.wxml-->
<form class="bigbox"  bindsubmit="formSubmit"><view class="box1"><view class="t1">收货人</view><input type="text" placeholder="请输入收货人姓名" name="username" value="{{data.name}}"/></view><view class="box1"><view class="t1">联系电话</view><input type="text" placeholder="请输入联系电话" name="telephone" value="{{data.phone}}"/></view><view class="box2"><view class="t1">所在地区</view><picker class="t2" mode="region" bindchange="bindRegionChange" name="region">{{data.province}}{{data.city}}{{data.district}}</picker></view><textarea class="ta1" name="messgae" id="t1" cols="30" rows="3" placeholder="请填写详细地址" value="{{data.detail}}"></textarea><view class="box2"><view class="t1">设为默认</view><switch class="swich1" name="swich" checked="{{data.defaultFlag}}"></switch></view><view class="box3"><button class="btn1" form-type="submit">提交</button></view>
</form>

receivingGoods.wxss

/* pages/receivingaddress/receivingaddress.wxss */
.bigbox{width: 100vw;height: 100vh;display: flex;flex-direction:column;
}
.box1{width: 100vw;height: 8vh;display: flex;flex-direction:row;justify-content:start;align-items: center;font-size: 40rpx;border-bottom: 1px solid #C0C0C0;
}
.box2{width: 100vw;height: 8vh;display: flex;flex-direction:row;justify-content:space-between;align-items: center;font-size: 40rpx;border-bottom: 1px solid #C0C0C0;
}
.box3{width:100vw;height: 300rpx;display: flex;flex-direction:column;justify-content:center;align-items: center;
}
.t1{width:200rpx;margin-left: 20rpx;
}
.t2{margin-right: 30rpx;
}
.ta1{width: 100vw;height: 200rpx;padding: 20rpx;font-size: 40rpx;border-bottom: 15rpx solid#F5F5F5;
}
.btn1{width: 500rpx;/* height: 100rpx; */background-color:#32CD32;border-radius: 10rpx;text-align: center;/* line-height: 100rpx; */color: white;
}

receivingGoods.js

// pages/information/receivingGoods/receivingGoods.js
var addrId
var backstageUrl=getApp().backstageUrl
var userId=wx.getStorageSync('userInfo')
Page({formSubmit:function(res){//将from表单数据转换为JSON格式var form=res.detail.valueconsole.log(res)console.log(form.name)console.log(form.region)//用户添加地址成功后提示弹窗wx.showToast({title: '修改成功',icon:'success',success:()=>{//参数回调成功后跳转至选择地址页面并带入JSON数据wx.request({url: backstageUrl+'address/updateAddr ',data:{addrId:addrId,userId:userId,name:form.username,province:form.region[0],city:form.region[1],district:form.region[2],detail:form.messgae,phone:form.telephone,defaultFlag:form.swich},method:'POST',success:(res)=>{console.log(res)}})var id=setTimeout(()=>{wx.navigateTo({url: '/pages/information/addreceiptaddress/addreceiptaddress?form='+form,success:()=>{clearTimeout(id)}})},2000)}})},/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {addrId=options.addrId},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {wx.request({url: backstageUrl+'address/all',data:{userId:userId},method:'POST',success:(res)=>{console.log(res)var data=res.data.datafor(var i=0;i<data.length;i++){if(addrId===data[i].addrId){console.log(data[i]) this.setData({data:data[i]})}}}})},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

微信小程序OTO商城（客户端）相关推荐

微信小程序OTO商城（商务端）
文章目录一.app.js 二.app.json 三.utils.js 四.index 1.index.wxml 2.index.wxss 3.index.js 五.logs 1.logs.wxml ...
基于微信小程序网上商城、小程序商城毕业设计论文课题题目参考（1）前台功能和界面
基于微信小程序的网上商城的前端即面向消费者的客户端模块,这个模块主要是通过借助微信小程序的微信开发者工具所提供的"MINA"框架即WXML.WXSS.JS以及微信开发者工具所提供的 ...
微信小程序购物商城系统开发系列-工具篇
微信小程序购物商城系统开发系列-工具篇微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操 ...
[转]微信小程序之购物车 —— 微信小程序实战商城系列（5）
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...
微信小程序分析送积分功能如何实现_微信小程序积分商城解决方案（一）
概念微信小程序积分商城的"积分商城"概念,是指的用户访问微信小程序经过授权用户信息或是验证注册的用户加入会员,基于微信APP环境使用微信支付等工具进行交易,推出的一种会员奖励计划 ...
微信小程序分析送积分功能如何实现_微信小程序积分商城该怎么进行操作？
共享经济是我们这个时代特有的产物,但是现在已经出现下滑的趋势,作为线上营销的卖家,想要实现线上经济共享,还需要一定的手段才能实现,这种手段就是微信小程序积分商城,今天来带大家了解一下. 1.小程序积分 ...
想开发微信小程序分销商城需要做好哪些地方？
想要把微信小程序分销商城做好,有很多细节的地方要注意,这里给大家分析下第一:系统的逻辑性,好的分销商城,一定是需要强大的后台系统逻辑来实现,商业逻辑不出问题,才能保证我们使用的时候不会出错第二:后 ...
[宝塔版] 如何搭建一个微信小程序开源商城？
如果你想做一个微信小程序商城,或者H5网页商城以及开源APP商城,你可以参考这篇文章希望能帮到你,文章主要的内容是关于云服务器安装宝塔的相关资料和来客推电商开源系统的相关配置,有相关基础的小伙伴那阅读 ...
微信小程序积分商城接入兑吧
微信小程序积分商城接入兑吧用户获取积分后,可进入积分通兑商城消耗用户企业积分进行兑换:提高用户满意度及用户黏性. 积分商城说明 1.兑吧的积分商城为HTML5页面,需要通过小程序的<web-v ...

微信小程序OTO商城（客户端）