O2O商城项目实战(客户端)

最新推荐文章于 2023-07-26 18:02:56 发布

伊泽先生丿瑞尔

最新推荐文章于 2023-07-26 18:02:56 发布

阅读量192

点赞数 1

文章标签： html5 html css3 css

本文链接：https://blog.csdn.net/xrs151/article/details/109613069

版权

个人中心页面（account）
(地址列表)address.js:

<view class="pq">
	<view class="address_list" wx:for="{{addressList}}">
		<view class="basic">
			<view class="name">{{item.name}}</view>
			<view class="phone">{{item.phone}}</view>
		</view>
		<view class="address">{{item.province}}-{{item.city}}-{{item.district}}-{{item.detail}}</view>
		<view class="operation">
			<radio checked="{{item.defaultFlag}}" wx:if="{{item.defaultFlag}}" style="color: #ffca28;">默认地址</radio>
			<radio checked="{{item.defaultFlag}}" wx:else bindtap="editDefault" data-addrID="{{item.addrId}}">设为默认地址</radio>
			<view class="operation_right">
				<view class="edit" bindtap="editAddress" data-index="{{index}}">
					<image src="../../../image/icon/edit.png"></image>
					<view>修改</view>
				</view>
				<view class="delete" bindtap="deleteAddress" data-index="{{index}}">
					<image src="../../../image/icon/delete.png"></image>
					<view>删除</view>
				</view>
			</view>
		</view>
	</view>
	<view class="add_address" bindtap="addAddress">添加新地址</view>
</view>

（地址列表）address.js:


Page({

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

	},

	// 添加收货地址
	addAddress:function()
	{
		wx.redirectTo({
		  url: '../addAddress/addAddress',
		})
	},

	// 修改地址
	editAddress:function(even)
	{
		var index = even.currentTarget.dataset.index;
		var addressData = this.data.addressList[index];
		addressData = JSON.stringify(addressData);
		wx.redirectTo({
		  url: '../modifyAddress/modifyAddress?addressData='+addressData,
		})
	},

	// 删除地址
	deleteAddress:function(even)
	{
		wx.showModal({
			title:"提示",
			content:"确定删除该地址？",
			success:(res) => {
				if (res.confirm)
				{
					var index = even.currentTarget.dataset.index;
					var addrID = this.data.addressList[index].addrId;
					wx.request({
						url:"http://116.62.201.243:8080/wxxcx/address/delete",
						data:{
							addrId:addrID
						},
						method:"POST",
						success:(res) => {
							this.handle();
						}
					})
				}
			}
		})
	},

	// 修改默认地址
	editDefault:function(even)
	{
		var addrID = even.currentTarget.dataset.addrid;
		wx.request({
			url:"http://116.62.201.243:8080/wxxcx/address/changeDefault",
			data:{
				addrId:addrID
			},
			method:"POST",
			success:(res) => {
				this.handle();
			}
		})
	},

	// 处理数据
	handle:function()
	{
		// 获取 userID
		wx.getStorage({
			key:"userID",
			success:(res) => {
				var userID = res.data;

				// 获取成功后，根据 userID 请求网络数据，获取收货地址列表。
				wx.request({
					url:"http://116.62.201.243:8080/wxxcx/address/all",
					data:{
						userId:userID
					},
					method:"POST",
					success:(res) => {
						var data = res.data.data;
						this.setData({
							addressList:data
						})
					}
				})
			}
		})
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		this.handle();
	},

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

（地址列表）address.wxss:

.pq
{
	width: 100vw;
	height: auto;
	padding: 10rpx;
	box-sizing: border-box;
}
.add_address
{
	width: 160rpx;
	line-height: 80rpx;
	padding: 0rpx 20rpx;
	margin: auto;
	margin-top: 50rpx;
	color: white;
	background-color: #1aad19;
	border-radius: 10rpx;
}
.address_list
{
	width: 100%;
	height: auto;
	margin-top: 20rpx;
	border-bottom: 20rpx solid #e6e6e6;
	padding-bottom: 20rpx;
}
.basic
{
	display: flex;
	justify-content: space-between;
}
.address
{
	margin: 30rpx 0rpx;
}
.operation
{
	display: flex;
	justify-content: space-between;
}
.operation_right,
.edit,
.delete
{
	display: flex;
}
.edit,
.delete
{
	margin: 0rpx 20rpx;
}
.edit view,
.delete view
{
	line-height: 50rpx;
	margin: 0rpx 10rpx;
}
.operation_right image
{
	width: 50rpx;
	height: 50rpx;
}

（添加地址）addAddress.wxml:

<view class="pq">
	<form bindsubmit="submit">
		<view class="addressee">
			<label for="">收件人：</label>
			<input type="text" name="name" placeholder="请输入收件人姓名" />
		</view>
		<view class="phone">
			<label for="">联系电话：</label>
			<input type="text" name="phone" placeholder="请输入联系电话" />
		</view>
		<picker mode="region" name="address" bindchange="pickerChange">
			<view class="region">
				<view class="region_title">所在地区</view>
				<view class="address">{{address}}</view>
				<view class="region_content">
					<view>请选择</view>
					<image src="../../../image/icon/right.png"></image>
				</view>
			</view>
		</picker>
		<textarea name="detailedAddress" cols="30" rows="10" placeholder="请输入详细地址" class="detailed"></textarea>
		<view class="default">
			<view>设置默认</view>
			<switch name="default"></switch>
		</view>
		<button type="primary" form-type="submit" class="submit">提交</button>
	</form>
</view>

（添加地址）addAddress.js:

// pages/accountPage/addAddress/addAddress.js
Page({

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

	},

	// 所在地区放生变化
	pickerChange:function(res)
	{
		var value = res.detail.value;
		var str = value[0] + "-" + value[1] + "-" + value[2];
		this.setData({
			address:str
		})
	},

	// 表单提交事件
	submit:function(even)
	{
		var value = even.detail.value;

		// 获取缓存数据 userID 
		wx.getStorage({
		  key: 'userID',
		  success:(res) => {
			  var userID = res.data;
			  wx.request({
				url:"http://116.62.201.243:8080/wxxcx/address/add",
				data:{
					userId:userID,
					name:value.name,
					province:value.address[0],
					city:value.address[1],
					district:value.address[2],
					detail:value.detailedAddress,
					phone:value.phone,
					defaultFlag:value.default
				},
				method:"POST",
				success:(res) => {
					wx.redirectTo({
					  url: '../address/address',
					})
				}
			})
		  }
		})
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {

	},
})

（添加地址）addAddress.wxss:

.pq
{
	width: 100vw;
	height: auto;
	padding: 20rpx;
	box-sizing: border-box;
}
.addressee,
.phone
{
	width: 100%;
	height: 80rpx;
	display: flex;
	line-height: 80rpx;
	border-bottom: 2rpx solid #e6e6e6;
}
.addressee label,
.phone label
{
	width: 160rpx;
}
.addressee input,
.phone input
{
	margin: 20rpx 0rpx;
}
.region,
.default
{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2rpx solid #e6e6e6;
}
.region_content
{
	display: flex;
}
.region_content image
{
	width: 60rpx;
	height: 60rpx;
	margin: 10rpx;
}
.detailed
{
	width: 100%;
	padding-top: 10rpx;
	border-bottom: 20rpx solid #e6e6e6;
}
.submit
{
	margin-top: 30rpx;
}
.address
{
	width: 400rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #ffca28;
	text-align: center;
}

（消费记录）consumption.wxml:

<view class="pq">
	<view class="nav">
		<view class="time {{navListStyle[0]?'nav_select':''}}" bindtap="time">时间排序</view>
		<view class="money {{navListStyle[1]?'nav_select':''}}" bindtap="money">金额排序</view>
	</view>
	<view class="list" wx:for="{{data}}">
		<view class="list_left">
			<view>订单号：<text>{{item.orderNum}}</text></view>
			<view class="list_time">{{item.createTime}}</view>
		</view>
		<view class="list_right">
			-￥{{item.money}}
		</view>
	</view>
</view>

（消费记录）consumption.js:

// pages/accountPage/consumption/consumption.js
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		navListStyle:[true,false]
	},

	// 时间排序
	time:function()
	{
		this.setData({
			navListStyle:[true,false]
		})
		this.orderShow("1","createTime")
	},

	// 金额排序
	money:function()
	{
		this.setData({
			navListStyle:[false,true]
		})
		this.orderShow("1","money")
	},

	// 封装网络请求函数。
	orderShow:function(orderBy,valueBy)
	{
		wx.getStorage({
			key:"userID",
			success:(res) => {
				var userID = res.data;

				// 请求网络接口，获取消费记录
				wx.request({
					url:"http://116.62.201.243:8080/wxxcx/order/show",
					data:{
						userId:userID,
						orderBy:orderBy,
						valueBy:valueBy
					},
					method:"POST",
					success:(res) => {
						this.setData({
							data:res.data.data
						})
					}
				})
			}
		})
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		this.orderShow("1","createTime")
	},
})

（消费记录）consumption.wxss:

.pq
{
	width: 100vw;
	height: auto;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
}
.nav
{
	width: 400rpx;
	height: 80rpx;
	margin: auto;
	display: flex;
}
.time,
.money
{
	width: 200rpx;
	height: 80rpx;
	color: #bbada0;
	text-align: center;
	line-height: 80rpx;
	border: 2rpx solid #bbada0;
}
.nav_select
{
	background-color: #bbada0;
	color: white;
}
.list
{
	width: 100%;
	height: 100rpx;
	margin: 10rpx 0rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2rpx solid #e6e6e6;
}
.list_left
{
	padding-top: 10rpx;
	box-sizing: border-box;
}
.list_right
{
	line-height: 100rpx;
	color: #00b26a;
}
.list_time
{
	font-size: 24rpx;
}

(充值记录)recharge.wxml:

<view class="pq">
	<view class="list" wx:for="{{data}}">
		<view class="time">{{item.rechargeTime}}</view>
		<view class="money">+￥{{item.money}}</view>
	</view>
</view>

(充值记录)recharge.js:

// pages/accountPage/recharge/recharge.js
Page({

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

	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		wx.getStorage({
			key:"userID",
			success:(res) => {
				var userID = res.data;
				wx.request({
					url:"http://116.62.201.243:8080/wxxcx/recharge/getRecord",
					data:{
						userId:userID
					},
					method:"POST",
					success:(res) => {
						this.setData({
							data:res.data.data
						})
					}
				})
			}
		})
	},
})

(充值记录)recharge.wxss:

.pq
{
	width: 100vw;
	height: auto;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
}
.list
{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2rpx solid #e6e6e6;
}
.money
{
	color: red;
	margin-right: 20rpx;
}

（预约列表）reserve.wxml:

<view class="pq">
	<view class="list" wx:for="{{data}}" bindtap="showDetails" data-bookID="{{item.bookId}}">
		<view class="list_left">
			<view>{{item.bookItem}}</view>
			<view>到店时间：{{item.comeTime}}</view>
		</view>
		<view class="list_right {{item.status == 1?'statusA':item.status == 2?'statusB':'statusC'}}"></view>
	</view>
	<view class="add_reserve" bindtap="addReserve">添加预约</view>
</view>

（预约列表）reserve.js:

// pages/reserve/reserve.js
Page({

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

	},

	// 添加预约
	addReserve:function()
	{
		wx.navigateTo({
		  url: '../reservePage/addReserve/addReserve',
		})
	},

	// 请求数据的封装函数
	reserveList:function()
	{
		wx.request({
			url: 'http://116.62.201.243:8080/wxxcx/book/getAllById',
			data:{
			  userId:"oBfDm5d6csfZSyZnplzYFgvqt_0o"
			},
			method:"POST",
			success:(res) => {
				this.setData({
					data:res.data.data
				})
			}
		  })
	},

	// 显示预约详情
	showDetails:function(even)
	{
		var bookID = even.currentTarget.dataset.bookid;
		wx.navigateTo({
		  url: '../reservePage/details/details?bookID='+bookID,
		})
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		this.reserveList();
	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function () {
		this.reserveList();
	},
})

（预约列表）reserve.wxss:

.pq
{
	width: 100vw;
	height: auto;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
}
.list
{
	width: 100%;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2rpx solid #e6e6e6;
}
.list_right
{
	width: 20rpx;
	height: 20rpx;
	margin: 40rpx;
	border-radius: 50rpx;
}
.statusA
{
	background-color: #2c08ad;
}
.statusB
{
	background-color: #0cf56d;
}
.statusC
{
	background-color: #b506eb;
}
.add_reserve
{
	width: 200rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	margin: auto;
	margin-top: 50rpx;
	color: white;
	background-color: #00b26a;
	border-radius: 10rpx;
}

(订单)order.wxml:

<view class="pq">
	<view class="nav">
		<view bindtap="receiving" class="receiving {{navSelect[0]?'nav_select':''}}">待发货</view>
		<view bindtap="deliver" class="deliver {{navSelect[1]?'nav_select':''}}">待收货</view>
		<view bindtap="complete" class="complete {{navSelect[2]?'nav_select':''}}">已完成</view>
	</view>
	<view class="order">
		<view class="order_list" wx:for="{{orderList}}" bindtap="listClick" data-orderNum="{{item.orderNum}}">
			<view class="order_list_left">
				<view>订单号：<text>{{item.orderNum}}</text></view>
				<view class="time">{{item.createTime}}</view>
			</view>
			<view class="order_list_right" wx:if="{{!navSelect[1]}}">￥{{item.money}}</view>
			<view class="order_list_select" wx:else >
				<view>￥{{item.money}}</view>
				<view class="select_btn" catchtap="determine" data-orderNum="{{item.orderNum}}">确定收货</view>
			</view>
		</view>
	</view>
</view>

(订单)order.js:

// pages/order/order.js
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		navSelect:[true,false,false]
	},

	// 待发货单击事件
	receiving:function()
	{
		this.setData({
			navSelect:[true,false,false]
		})
		this.shopList(1);
	},

	// 待收货单击事件
	deliver:function()
	{
		this.setData({
			navSelect:[false,true,false]
		})
		this.shopList(2);
	},

	// 已完成单击事件
	complete:function()
	{
		this.setData({
			navSelect:[false,false,true]
		})
		this.shopList(3);
	},

	// 跳转订单详情页
	listClick:function(even)
	{
		var orderNum = even.currentTarget.dataset.ordernum;
		wx.navigateTo({
		  url: '../orderDetails/orderDetails?orderNum='+orderNum,
		})
	},

	// 确定收货
	determine:function(even)
	{
		var orderNum = even.currentTarget.dataset.ordernum;
		wx.request({
			url:"http://116.62.201.243:8080/wxxcx/order/updateStatus",
			data:{
				orderNum:orderNum,
				status:"3",
				message:"确认收货"
			},
			method:"POST",
			success:(res) => {
				this.shopList(2);
			}
		})
	},

	// 封装获取商品列表函数(参数表示商品状态----1:待发货  2:待收货  3:已完成)
	shopList:function(status)
	{
		// 获取缓存数据 userID
		wx.getStorage({
			key:"userID",
			success:(res) => {
				var userID = res.data;

				// 请求网络接口，获取待发货状态的商品列表
				wx.request({
					url:"http://116.62.201.243:8080/wxxcx/order/showByStatus",
					data:{
						userId:userID,
						status:status
					},
					method:"POST",
					success:(res) => {
						// 将商品列表存入初始化 data 中。
						this.setData({
							orderList:res.data.data
						})
					}
				})
			}
		})
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		this.shopList(1);
	},
})

(订单)order.wxss:

.pq
{
	width: 100vw;
	height: auto;
	padding: 10rpx;
	box-sizing: border-box;
}
.nav
{
	width: 450rpx;
	height: 60rpx;
	margin: auto;
	display: flex;
}
.receiving,
.deliver,
.complete
{
	width: 150rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	color: #bbada0;
	border: 2rpx solid #bbada0;
}
.nav_select
{
	color: white;
	background-color: #bbada0;
}
.order
{
	width: 100%;
	height: auto;
	padding: 0rpx 30rpx;
	box-sizing: border-box;
}
.order_list
{
	width: 100%;
	height: 90rpx;
	margin: 30rpx 0rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2rpx solid #e6e6e6;
}
.order_list_left text
{
	color: blue;
}
.time
{
	font-size: 24rpx;
}
.order_list_right
{
	line-height: 80rpx;
	color: #00b26a;
}
.order_list_select
{
	line-height: 40rpx;
	color: #00b26a;
}
.select_btn
{
	font-size: 28rpx;
	padding: 0rpx 10rpx;
	color: white;
	border-radius: 10rpx;
	background-color: red;
}

(订单详情)orderDetails.wxml:

<view class="pq">
	<view class="order">
		<view class="num">订单号：{{orderDetails.order.orderNum}}</view>
		<view class="status">{{orderDetails.order.status == 1?'待发货':orderDetails.order.status == 2?'待收货':'已完成'}}</view>
	</view>
	<view class="time">创建时间：{{orderDetails.order.createTime}}</view>
	<view class="address">
		<view class="address_title">收货地址</view>
		<view class="address_content">
			<view class="address_content_admin">
				<view>收件人：{{orderDetails.address.name}}</view>
				<view>联系电话：{{orderDetails.address.phone}}</view>
			</view>
			<view class="address_content_addr">
				{{orderDetails.address.province}} - {{orderDetails.address.city}} - {{orderDetails.address.district}} - {{orderDetails.address.detail}}
			</view>
		</view>
	</view>
	<view class="shop_list">
		<view class="shop_list_title">商品列表</view>
		<view class="shop_list_content" wx:for="{{orderDetails.item_list}}">
			<image src="{{imageUrl+item.image}}"></image>
			<view class="goods_content">
				<view class="name">{{item.name}}</view>
				<view class="prick">￥{{item.price}}</view>
			</view>
			<view class="goods_num">*{{item.num}}</view>
		</view>
		<view class="total_money">总价钱：{{orderDetails.order.money}}</view>
	</view>
</view>

(订单详情)orderDetails.js:

// pages/orderDetails/orderDetails.js
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		imageUrl:"http://116.62.201.243:8080/wxxcx/"
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		var orderNum = options.orderNum;
		// console.log(orderNum);

		// 请求网络数据，获取订单详情
		wx.request({
			url:"http://116.62.201.243:8080/wxxcx/order/details",
			data:{
				orderNum:orderNum
			},
			method:"POST",
			success:(res) => {
				// console.log(res)
				this.setData({
					orderDetails:res.data.data
				})
			}
		})
	},

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

	},

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

	},

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

	},

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

	},

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

	},

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

	},

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

	}
})

(订单详情)orderDetails.wxss:

.pq
{
	width: 100vw;
	height: auto;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
}
.order
{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2rpx solid #e6e6e6;
}
.status
{
	color: blue;
}
.time,
.address
{
	border-bottom: 2rpx solid #e6e6e6;
}
.time,
.address_title
{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
}
.address,
.address_content
{
	width: 100%;
	height: auto;
}
.address_content_admin
{
	line-height: 80rpx;
	display: flex;
	justify-content: space-between;
}
.address_content_addr
{
	margin-bottom: 20rpx;
}
.shop_list_title
{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
}
.shop_list_content
{
	width: 100%;
	height: 120rpx;
	display: flex;
	border-bottom: 2rpx solid #e6e6e6;
}
.shop_list_content image
{
	width: 100rpx;
	height: 100rpx;
	margin: 10rpx 30rpx;
}
.goods_content
{
	width: 470rpx;
	height: 120rpx;
}
.name
{
	font-size: 36rpx;
	line-height: 60rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.prick
{
	color: #ffca28;
}
.goods_num
{
	text-align: center;
	line-height: 100rpx;
	font-size: 40rpx;
}
.total_money
{
	line-height: 60rpx;
	text-align: right;
	color: #1aad19;
	font-weight: bold;
}