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

最新推荐文章于 2022-11-29 16:43:25 发布
最新推荐文章于 2022-11-29 16:43:25 发布
阅读量344 收藏
点赞数
文章标签： html html5 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xrs151/article/details/109615962
版权

登陆模块(login)

login.wxml:

<view class="pq">
	<image src="../../image/imageData/indexBack.png" class="background"></image>
	<view class="login">
		<view class="login_form" animation="{{animationData}}">
			<form bindsubmit="submit">
				<view class="admin">
					<label>用户名：</label>
					<input type="text" name="admin" value="{{admin}}" />
				</view>
				<view class="password">
					<label>密码：</label>
					<input type="text" name="password" value="{{password}}" />
				</view>
				<button form-type="submit" type="primary" class="btn">提交</button>
			</form>
		</view>
	</view>
</view>

login.js:

// pages/login/login.js
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		animationData:{},
		admin:"",
		password:""
	},

	// 表单提交
	submit:function(even)
	{
		var admin = even.detail.value.admin;
		var password = even.detail.value.password;
		console.log(admin,password)
		var adminData = getApp().adminData;
		var adminIf;
		if(admin == "" || password == "")
		{
			wx.showToast({
				title:"请输入完整的用户信息",
				icon:"none",
				duration:2000,
				success:() => {
					this.setData({
						admin:"",
						password:""
					})
				}
			})
			return;
		}
		for(var i=0;i<adminData.length;i++)
		{
			if(adminData[i].admin == admin)
			{
				adminIf = adminData[i];
			}
		}
		if(adminIf.password === password)
		{
			wx.showToast({
				title:"登陆成功",
				success:(res) => {
					setTimeout(() => {
						wx.switchTab({
						  url: '../shop/shop',
						})
					},1500)
				}
			})
		}
		else
		{
			wx.showToast({
				title:"账号密码不匹配",
				image:"../../image/icon/fail.png"
			})
		}
	},

	// 动画
	animation:function()
	{
		var animation = wx.createAnimation({
			duration:1000,
			timingFunction:"linear"
		  })
		  animation.translateY(-390).step();
		  this.setData({
			  animationData:animation.export()
		  })
	},

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

login.wxss:

.pq
{
	width: 100vw;
	height: 100vh;
	position: relative;
}
.background
{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 0;
}
.login
{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	animation: myfirst 2s;
	animation-fill-mode: forwards;
}
@keyframes myfirst
{
	from {background: rgba(0,0,0,0);}
	to {background: rgba(0,0,0,0.7);}
}
.login_form
{
	width: 550rpx;
	height: 400rpx;
	margin: auto;
	position: absolute;
	bottom: -400rpx;
	left: 100rpx;
}
.admin
{
	border-radius: 20rpx 20rpx 0rpx 0rpx;
}
.password
{
	border-radius: 0rpx 0rpx 20rpx 20rpx;
	margin-bottom: 50rpx;
}
.admin,
.password
{
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	padding: 0rpx 20rpx;
	box-sizing: border-box;
	display: flex;
	border: 2rpx solid #e6e6e6;
	background-color: white;
}
.admin input,
.password input
{
	height: 60rpx;
	margin: 20rpx 0rpx;
	background-color: white;
}

商城首页模块(shop)

shop.wxml:

<view class="pq">
	<view class="list" wx:for="{{shopList}}" bindtap="listClick" data-goodsId="{{item.goodsId}}">
		<scroll-view scroll-x="{{true}}" scroll-with-animation="true" class="scrollX" bindscrolltolower="scroll" data-index="{{index}}" scroll-left="{{scrollLeft[index]}}">
			<view class="scroll-view_a">
				<view class="a_view">
					<image src="{{imageUrl+item.image}}"></image>
					<view class="info">
						<view class="name">{{item.name}}</view>
						<view class="price">￥{{item.price}}</view>
					</view>
				</view>
			</view>
			<view class="scroll-view_b" catchtap="delete" data-goodsID="{{item.goodsId}}">删除</view>
		</scroll-view>	
	</view>
	<view class="add_shop" bindtap="addShop">添加商品</view>
</view>

shop.js:

var page = 1;
var scrollLeft = [];
Page({

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

	// 跳转商品详情页
	listClick:function(even)
	{
		var goodsID = even.currentTarget.dataset.goodsid;
		wx.navigateTo({
		  url: '../shopPage/details/details?goodsID='+goodsID,
		})
	},

	// 添加商品
	addShop:function()
	{
		wx.navigateTo({
		  url: '../shopPage/addShop/addShop',
		})
	},

	// 删除商品
	delete:function(even)
	{
		// 隐藏删除滑块
		this.hideDelete();

		var goodsID = even.currentTarget.dataset.goodsid;
		wx.showModal({
			title:"提示",
			content:"确定要删除吗？",
			success:(res) => {
				if(res.confirm)
				{
					wx.request({
						url: 'http://116.62.201.243:8080/wxxcx/goods/deleteById',
						data:{
							goodsId:goodsID
						},
						method:"POST",
						success:(res) =>{
							var pageSize = page*10;
							pageSize = pageSize.toString();
							this.shopList("1",pageSize);
						}
					})
					wx.showToast({
						title:"删除成功！"
					})
				}
			}
		})
	},

	// 滚动条滚动事件
	scroll:function(even)
	{
		var index = even.currentTarget.dataset.index;
		var showList = this.data.shopList;
		for(var i=0;i<showList.length;i++)
		{
			scrollLeft[i] = 0
		}
		scrollLeft[index] = 180;
		this.setData({
			scrollLeft:scrollLeft
		})
	},

	// 封装函数，隐藏删除滑块
	hideDelete:function()
	{
		var showList = this.data.shopList;
		for(var i=0;i<showList.length;i++)
		{
			scrollLeft[i] = 0
		}
		this.setData({
			scrollLeft:scrollLeft
		})
	},

	// 封装函数，请求接口获取商品列表数据(参数表示页码和每页商品数量)
	shopList:function(page,pageSize)
	{
		wx.request({
			url:"http://116.62.201.243:8080/wxxcx/goods/getGoodsByPage",
			data:{
				page:page,
				pageSize:pageSize
			},
			method:"POST",
			success:(res) => {
				var showList = res.data.data;
				this.setData({
					shopList:showList
				})
			}
		})
	},

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

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function()
	{
		var pageSize = page*10;
		pageSize = pageSize.toString();
		this.shopList("1",pageSize);
	},

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide:function()
	{
		// 页面隐藏的同时隐藏删除滑块
		this.hideDelete();
	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () {
		page++;
		var pageSize = page*10;
		pageSize = pageSize.toString();
		this.shopList("1",pageSize);
	},
})

shop.wxss:

.pq
{
	width: 100vw;
	height: auto;
}
.list
{
	width: 750rpx;
	height: 160rpx;
}
.scrollX
{
	width: 100%;
	height: 160rpx;
	white-space: nowrap;
	border-bottom: 2rpx solid #e6e6e6;
}
.scroll-view_a
{
	width: 100%;
	height: 160rpx;
	display: inline-block;
}
.a_view
{
	width: 100%;
	height: 160rpx;
	display: flex;
}
.a_view image
{
	width: 120rpx;
	height: 120rpx;
	margin: 20rpx;
	border-radius: 10rpx;
}
.info
{
	margin-top: 20rpx;
}
.name
{
	font-size: 40rpx;
}
.price
{
	color: #ffca28;
	margin-top: 20rpx;
}
.scroll-view_b
{
	width: 160rpx;
	height: 160rpx;
	display: inline-block;
	position: absolute;
	top: 0;
	text-align: center;
	line-height: 160rpx;
	color: white;
	background-color: red;
}
.add_shop
{
	width: 160rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	color: white;
	background-color: #00b26a;
	margin: 30rpx auto;
	border-radius: 10rpx;
}

商品详情(details)

details.wxml:

<view class="pq">
	<view class="name">
		<view class="title">商品名称</view>
		<view>{{data.name}}</view>
	</view>
	<view class="image">
		<view class="title">封面图片</view>
		<image src="{{imageUrl}}"></image>
	</view>
	<view class="detail">
		<view class="title">商品介绍</view>
		<view>{{data.detail}}</view>
	</view>
	<view class="time">
		<view class="title">上架时间：</view>
		<view>{{data.upTime}}</view>
	</view>
	<view class="shopping_cart">
		<view class="car_left">
			<view>单价：</view>
			<view class="car_left_color">￥{{data.price}}</view>
		</view>
		<view class="car_right">
			<view class="purchase" bindtap="edit">编辑</view>
		</view>
	</view>
</view>

details.js:

// pages/shopPage/details/details.js
Page({

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

	// 编辑商品
	edit:function()
	{
		var data = this.data;
		data = JSON.stringify(data);
		wx.navigateTo({
		  url: '../editShop/editShop?data='+data,
		})
	},

	// 封装网络请求函数，获取商品详情（参数为 商品ID）
	shopDetails:function(goodsID)
	{
		wx.request({
			url: 'http://116.62.201.243:8080/wxxcx/goods/goodsDetails',
			data:{
				goodsId:goodsID
			},
			method:"POST",
			success:(res) => {
				var data = res.data.data;
				this.setData({
					data:data,
					imageUrl:"http://116.62.201.243:8080/wxxcx/"+data.image
				})
			}
		})
	},

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

details.wxss:

.pq
{
	width: 100vw;
	height: auto;
	padding: 20rpx;
	box-sizing: border-box;
}
.name,
.image,
.detail
{
	width: 100%;
	padding: 10rpx 0rpx;
	margin-bottom: 20rpx;
	color: #ffa929;
	border-bottom: 2rpx solid #e6e6e6;
}
.title
{
	font-size: 40rpx;
	color: black;
	margin-bottom: 10rpx;
}
.detail
{
	border-bottom: none;
}
.image image
{
	width: 100%;
	height: 640rpx;
}
.time
{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	margin-bottom: 100rpx;
}
.shopping_cart
{
	width: 100%;
	height: 100rpx;
	padding: 0rpx 10rpx;
	box-sizing: border-box;
	position: fixed;
	bottom: 0rpx;
	display: flex;
	justify-content: space-between;
	background-color: white;
	border-top: 2rpx solid #e6e6e6;
	border-bottom: 2rpx solid #e6e6e6;
}
.car_left,
.car_right
{
	display: flex;
}
.car_left
{
	line-height: 100rpx;
}
.car_left_color
{
	color: #ffa929;
}
.car_right view
{
	width: auto;
	height: 60rpx;
	margin: 20rpx;
	padding: 0rpx 20rpx;
	line-height: 60rpx;
	text-align: center;
	border-radius: 10rpx;
}
.purchase
{
	background-color: #ff0000;
	color: white;
}

商品修改(editShop)

editShop.wxml:

<view class="pq">
	<form bindsubmit="submit">
		<view class="name">
			<view class="title">商品名称：</view>
			<input type="text" name="name" value="{{data.name}}" placeholder="请输入商品名称" />
		</view>
		<view class="image">
			<view class="title">封面图片</view>
			<image src="{{image}}" bindtap="upImage"></image>
		</view>
		<view class="introduce">
			<view class="title">商品介绍</view>
			<textarea name="introduce" value="{{data.detail}}" cols="30" rows="10" placeholder="请输入商品简介"></textarea>
		</view>
		<view class="foot">
			<view class="Company">
				<view class="foot_title">价钱：</view>
				<input type="text" name="Company" value="{{data.price}}" placeholder="请输入单位" />
			</view>
			<button form-type="submit" size="mini" type="primary">确定</button>
		</view>
	</form>
</view>

editShop.js:

var picImage;
Page({

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

	// 选择本地图片
	upImage:function()
	{
		wx.chooseImage({
			count:1,
			sourceType:["album"],
			success:(res) => {
				this.setData({
					image:res.tempFilePaths[0]
				})
				wx.uploadFile({
					url:"http://116.62.201.243:8080/wxxcx/goods/uploadImage",
					filePath:res.tempFilePaths[0],
					name:"multFile",
					success:(res) => {
						picImage = JSON.parse(res.data).data;
					}
				})
			}
		})
	},

	// 表单提交
	submit:function(even)
	{
		var data = {
			goodsId:this.data.data.goodsId,
			name:even.detail.value.name,
			price:even.detail.value.Company,
			image:picImage,
			detail:even.detail.value.introduce
		}

		// 请求网络接口
		wx.request({
			url: 'http://116.62.201.243:8080/wxxcx/goods/update',
			data:data,
			method:"POST",
			success:(res) => {
				wx.showToast({
					title:"修改成功"
				})
				setTimeout(function(){
					wx.switchTab({
						url: '../../shop/shop',
					})
				},1500)
			}
		})
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		// 获取详情页传过来的商品对象
		var data = JSON.parse(options.data).data;
		this.setData({
			data:data,
			image:"http://116.62.201.243:8080/wxxcx/"+data.image
		})
	}
})

editShop.wxss:

.pq
{
	width: 100vw;
	height: auto;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
}
.name,
.introduce
{
	width: 100%;
	height: 140rpx;
	border-bottom: 2rpx solid #e6e6e6;
}
.title
{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
}
.image
{
	width: 100%;
	height: auto;
}
.image image
{
	width: 500rpx;
	height: 500rpx;
	margin: 0rpx 95rpx;
}
.introduce
{
	border: none;
}
.foot
{
	width: 100%;
	height: 80rpx;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	border-top: 2rpx solid #e6e6e6;
}
.Company
{
	width: 500rpx;
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	justify-content: flex-start;
}
.Company input
{
	margin: 18rpx 0rpx;
}
.foot_title
{
	width: 180rpx;
}
.foot button
{
	display: block;
	line-height: 80rpx;
}

添加商品(addShop)

addShop.wxml:

<view class="pq">
	<form bindsubmit="submit">
		<view class="name">
			<view class="title">商品名称：</view>
			<input type="text" name="name" placeholder="请输入商品名称" />
		</view>
		<view class="image">
			<view class="title">封面图片</view>
			<image src="{{imageUrl}}" bindtap="upImage"></image>
		</view>
		<view class="introduce">
			<view class="title">商品介绍</view>
			<textarea name="introduce" cols="30" rows="10" placeholder="请输入商品简介"></textarea>
		</view>
		<view class="foot">
			<view class="Company">
				<view class="foot_title">价钱：</view>
				<input type="text" name="Company" placeholder="请输入单位" />
			</view>
			<button form-type="submit" size="mini" type="primary">确定</button>
		</view>
	</form>
</view>

addShop.js:

var picImage;
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		imageUrl:"../../../image/icon/add.png"
	},

	// 选择本地图片
	upImage:function()
	{
		wx.chooseImage({
			count:1,
			sourceType:["album"],
			success:(res) => {
				this.setData({
					imageUrl:res.tempFilePaths[0]
				})
				wx.uploadFile({
					url:"http://116.62.201.243:8080/wxxcx/goods/uploadImage",
					filePath:res.tempFilePaths[0],
					name:"multFile",
					success:(res) => {
						picImage = JSON.parse(res.data).data;
					}
				})
			}
		})
	},

	// 表单提交
	submit:function(even)
	{
		var data = {
			name:even.detail.value.name,
			price:even.detail.value.Company,
			image:picImage,
			detail:even.detail.value.introduce
		}

		// 发起网络请求
		wx.request({
		  url: 'http://116.62.201.243:8080/wxxcx/goods/add',
		  data:data,
		  method:"POST",
		  success:(res) => {
			wx.showToast({
				title:"添加成功"
			})
			setTimeout(function(){
				wx.switchTab({
				  url: '../../shop/shop',
				})
			},1500)
		  }
		})
	},

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

	},
})

addShop.wxss:

.pq
{
	width: 100vw;
	height: auto;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
}
.name,
.introduce
{
	width: 100%;
	height: 140rpx;
	border-bottom: 2rpx solid #e6e6e6;
}
.title
{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
}
.image
{
	width: 100%;
	height: auto;
}
.image image
{
	width: 500rpx;
	height: 500rpx;
	margin: 0rpx 95rpx;
}
.introduce
{
	border: none;
}
.foot
{
	width: 100%;
	height: 80rpx;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	border-top: 2rpx solid #e6e6e6;
}
.Company
{
	width: 500rpx;
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	justify-content: flex-start;
}
.Company input
{
	margin: 18rpx 0rpx;
}
.foot_title
{
	width: 180rpx;
}
.foot button
{
	display: block;
	line-height: 80rpx;
}

预定列表(reserve)

reserve.wxml:

<view class="pq">
	<view class="list" wx:for="{{data}}" bindtap="listClick" data-bookID="{{item.bookId}}">
		<view class="list_left">
			<view class="title">{{item.bookItem}}</view>
			<view class="time">到店时间：{{item.comeTime}}</view>
		</view>
		<view class="list_right {{item.status == 1?'statusA':item.status == 2?'statusB':'statusC'}}"></view>
	</view>
</view>

reserve.js:

var count = 1;
Page({

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

	},

	// 跳转详情页
	listClick:function(even)
	{
		var bookID = even.currentTarget.dataset.bookid;
		wx.navigateTo({
			url: '../reserveDetails/reserveDetails?bookID='+bookID,
		})
	},

	// 封装函数，请求网络预约数据
	reserve:function(page,pageSize)
	{
		wx.request({
			url: 'http://116.62.201.243:8080/wxxcx/book/getAllBooks',
			data:{
			  page:page,
			  pageSize:pageSize,
			  flag:true
			},
			method:"POST",
			success:(res) => {
				this.setData({
					data:res.data.data
				})
			}
		})
	},

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

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () {
		count++;
		var pageSize = count*10;
		pageSize += '';
		this.reserve("1",pageSize)
	},
})

reserve.wxss:

.pq
{
	width: 100vw;
	height: auto;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
}
.list
{
	width: 100%;
	height: 100rpx;
	padding-top: 20rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2rpx solid #e6e6e6;
}
.title
{
	font-weight: bold;
}
.time
{
	font-size: 26rpx;
	margin-top: 10rpx;
}
.list_right
{
	width: 20rpx;
	height: 20rpx;
	border-radius: 50rpx;
	margin: 30rpx;
}
.statusA
{
	background-color: #2c08ad;
}
.statusB
{
	background-color: #0cf56d;
}
.statusC
{
	background-color: #b506eb;
}

预约详情(reserveDetails)

reserveDetails.wxml:

<view class="pq">
	<view class="state">
		<view class="title">预约申请</view>
		<view class="content {{data.status == 1?'statusA':data.status == 2?'statusB':'statusC'}}">{{data.status == 1?'已接受':data.status == 2?'拒绝':'未处理'}}</view>
	</view>
	<view class="service">
		<view class="title">服务项目</view>
		<view>{{data.bookItem}}</view>
	</view>
	<view class="bookTime">
		<view class="title">预约时间：</view>
		<view>{{data.bookTime}}</view>
	</view>
	<view class="comeTime">
		<view class="title">到店时间：</view>
		<view>{{data.comeTime}}</view>
	</view>
	<view class="message">
		<view class="title">留言：</view>
		<view>{{data.message}}</view>
	</view>
	<view class="handle" wx:if="{{data.status == 3}}">
		<view class="title">预处理状态</view>
		<view class="handle_content">
			<view class="yes" bindtap="yes" data-bookID="{{data.bookId}}">接受</view>
			<view class="no" bindtap="no" data-bookID="{{data.bookId}}">拒绝</view>
		</view>
	</view>
</view>

reserveDetails.jsl:

// pages/reserveDetails/reserveDetails.js
Page({

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

	},

	// 接受预约
	yes:function(even)
	{
		var bookID = even.currentTarget.dataset.bookid;
		this.edit(bookID,"1")
	},

	// 接受预约
	no:function(even)
	{
		var bookID = even.currentTarget.dataset.bookid;
		this.edit(bookID,"2")
	},

	// 封装函数，修改预约状态
	edit:function(bookID,status)
	{
		wx.request({
			url: 'http://116.62.201.243:8080/wxxcx/book/update',
			data:{
				bookId:bookID,
				status:status
			},
			method:"POST",
			success:(res) => {
				wx.showToast({
					title:"操作成功"
				})
				setTimeout(function(){
					wx.reLaunch({
						url:"../reserve/reserve"
					})
				},1500)
			}
		})
	},

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

		// 请求网络接口获取预约详情数据
		wx.request({
		  url: 'http://116.62.201.243:8080/wxxcx/book/details',
		  data:{
			  bookId:bookID
		  },
		  method:"POST",
		  success:(res) => {
			  this.setData({
				  data:res.data.data
			  })
		  }
		})
	},
})

reserveDetails.wxss:

.pq
{
	width: 100vw;
	height: auto;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
}
.state,
.handle
{
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2rpx solid #e6e6e6;
}
.statusA
{
	color: #2c08ad;
}
.statusB
{
	color: #0cf56d;
}
.statusC
{
	color: #b506eb;
}
.service,
.message
{
	width: 100%;
	height: 140rpx;
	padding: 20rpx 0rpx;
	box-sizing: border-box;
	line-height: 50rpx;
	border-bottom: 2rpx solid #e6e6e6;
}
.bookTime,
.comeTime
{
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	display: flex;
	border-bottom: 2rpx solid #e6e6e6;
}
.message
{
	height: auto;
}
.handle
{
	position: fixed;
	bottom: 0rpx;
	border-top: 2rpx solid #e6e6e6;
}
.handle_content
{
	display: flex;
}
.handle_content view
{
	width: 120rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	color: white;
	border-radius: 10rpx;
	margin: 20rpx;
}
.yes
{
	background-color: #008000;
}
.no
{
	background-color: #ff0000;
}

订单列表(order)

order.wxml:

<view class="pq">
	<view class="nav">
		<view class="deliver {{nav[0]?'select':''}}" bindtap="deliver">待发货</view>
		<view class="receiving {{nav[1]?'select':''}}" bindtap="receiving">待收货</view>
		<view class="complete {{nav[2]?'select':''}}" bindtap="complete">已收货</view>
	</view>
	<view class="list" wx:for="{{data}}" bindtap="listClick" data-orderNum="{{item.orderNum}}">
		<view class="left">
			<view class="number">订单号：{{item.orderNum}}</view>
			<view class="time">{{item.createTime}}</view>
		</view>
		<view class="right" wx:if="{{!nav[0]}}">￥{{item.money}}</view>
		<view class="right_btn" wx:else>
			<view class="money">￥{{item.money}}</view>
			<view class="btn" catchtap="confirm" data-orderNum="{{item.orderNum}}">确认发货</view>
		</view>
	</view>
</view>

order.js:

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

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

	// 待发货
	deliver:function()
	{
		this.setData({
			nav:[true,false,false]
		})
		this.order("1")
	},

	// 待收货
	receiving:function()
	{
		this.setData({
			nav:[false,true,false]
		})
		this.order("2")
	},

	// 已完成
	complete:function()
	{
		this.setData({
			nav:[false,false,true]
		})
		this.order("3")
	},

	// 确认收货
	confirm:function(even)
	{
		var that = this;
		var orderNum = even.currentTarget.dataset.ordernum;
		wx.showModal({
			title: '提示',
			content: '是否确认收货',
			success (res) {
				if (res.confirm)
				{
					wx.request({
						url: 'http://116.62.201.243:8080/wxxcx/order/updateStatus',
						data:{
							orderNum:orderNum,
							status:"2",
							message:""
						},
						method:"POST",
						success:(res) => {
							that.order("1");
						}
					})
				}
			}
		})
	},

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

	// 封装函数，请求网络订单数据
	order:function(status)
	{
		wx.request({
			url: "http://116.62.201.243:8080/wxxcx/order/showAllByStatus",
			data:{
				status:status
			},
			method:"POST",
			success:(res) => {
				this.setData({
					data:res.data.data
				})
			}
		})
	},

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

order.wxss:

.pq
{
	width: 100vw;
	height: auto;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
}
.nav
{
	margin: auto;
	width: 600rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	display: flex;
}
.deliver,
.receiving,
.complete
{
	width: 200rpx;
	height: 60rpx;
	color: #bbada0;
	border: 2rpx solid #bbada0;
}
.select
{
	background-color: #bbada0;
	color: white;
}
.list
{
	width: 100%;
	height: 120rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 2rpx solid #e6e6e6;
}
.left,
.right_btn
{
	margin-top: 20rpx;
}
.right
{
	line-height: 120rpx;
	color: #00b26a;
	text-align: center;
}
.time
{
	font-size: 24rpx;
	margin-top: 10rpx;
}
.money
{
	color: #00b26a;
	text-align: center;
}
.btn
{
	background-color: red;
	color: white;
	font-size: 26rpx;
	padding: 8rpx;
	border-radius: 10rpx;
}

订单详情(orderDetails)

orderDetails.wxml:

<view class="pq">
	<view class="number">
		<view class="title">订单编号：</view>
		<view class="content">{{data.order.orderNum}}</view>
		<view class="status">{{data.order.status == 1?'待发货':data.order.status == 2?'待收货':'已完成'}}</view>
	</view>
	<view class="time">
		<view class="title">创建时间：</view>
		<view class="content">{{data.order.createTime}}</view>
	</view>
	<view class="address">
		<view class="title">收货地址</view>
		<view class="content">
			<view class="admin">
				<view class="name">收件人：{{data.address.name}}</view>
				<view class="phone">联系电话：{{data.address.phone}}</view>
			</view>
			<view class="address_data">{{data.address.province}}——{{data.address.city}}——{{data.address.district}}——{{data.address.detail}}</view>
		</view>
	</view>
	<view class="shop">
		<view class="title">商品列表</view>
		<view class="shop_list" wx:for="{{data.item_list}}">
			<image src="{{'http://116.62.201.243:8080/wxxcx/'+item.image}}"></image>
			<view class="data">
				<view class="name">{{item.name}}</view>
				<view class="price">￥{{item.price}}</view>
			</view>
			<view class="num">*{{item.num}}</view>
		</view>
	</view>
	<view class="message">
		<view class="title">备注：</view>
		<view>{{data.order.message}}</view>
	</view>
</view>

orderDetails.js:

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

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

	},

	// 封装函数，请求网络数据
	orderList:function(orderNum)
	{
		wx.request({
			url: 'http://116.62.201.243:8080/wxxcx/order/details',
			data:{
				orderNum:orderNum
			},
			method:"POST",
			success:(res) => {
				this.setData({
					data:res.data.data
				})
			}
		})
	},

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

orderDetails.wxss:

.pq
{
	width: 100vw;
	height: auto;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
}
.number,
.time
{
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	border-bottom: 2rpx solid #e6e6e6;
}
.status
{
	margin-left: 90rpx;
	color: blue;
}
.address
{
	width: 100%;
	height: auto;
	padding: 20rpx 0rpx;
	border-bottom: 2rpx solid #e6e6e6;
}
.admin
{
	margin: 20rpx 0rpx;
	display: flex;
	justify-content: space-between;
}
.shop_list
{
	width: 100%;
	height: 120rpx;
	border-bottom: 2rpx solid #e6e6e6;
	display: flex;
}
.shop_list image
{
	width: 80rpx;
	height: 80rpx;
	margin: 20rpx;
}
.data
{
	margin-top: 20rpx;
	width: 500rpx;
}
.name
{
	font-size: 40rpx;
}
.price
{
	color: #ffb128;
}
.num
{
	line-height: 140rpx;
}
.message
{
	margin-top: 20rpx;
}

app,js:

//app.js
App({
  adminData:[
    {
      admin:"SevenOne",
      password:"123456"
    },
    {
      admin:"MaXinpeng",
      password:"123456"
    },
    {
      admin:"YuHong",
      password:"123456"
    },
    {
      admin:"ZhangZe",
      password:"123456"
    }
  ]
})
伊泽先生丿瑞尔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
高性能零售IT系统的建设08-9年来在互联网零售O2O行业抗黑产、薅羊毛实战记录及打法
lifetragedy的专栏
12-11 1998
本篇以全景式黑产对抗把本人完整对抗亿级黑产、羊毛党的实战经验进行传授。对抗每秒万级并发很难，而对抗黑产是难上难。有时仅仅一个黑客的技术能力、智商是全面碾压一个企业甚至一个集团公司内所有IT人员的智慧累加的。但是我们只要记住：求“减损”不要“止损”，更谈不上“防损”！不要求打败，而是增加“黑产”的攻击成本！着眼于全局战役，而不要打“阵地战”！流量我要，权益你木有！这几句心法就能和黑产打得有来有去，游刃有余。
手机端店铺原型
08-18
因项目搁置，为了避免造成资源浪费，上传给大家分享，纯属原创，绝密高保真原型。
O2O商城系统的特点
why654的博客
08-18 1038
一，O2O商城系统的特点   O2O不在是一个网站。而是一个新的销售模式。无论什么模式他是不同于类似阿里巴巴，慧聪，京东的。   O2O最大的特点在于他的经销商的真实性。不是虚拟的网络店面。O2O是在线上进行前台销售。但是必须和实体的商家进行绑定。消除消费者的信誉危机。   O２O要依托于一个强大的软件。和一个强大的物流系统。一个强大的网络搜索。我们说的软件是不限于运输流程的。而是一整套的体
商户终端APP产品原型图（axure）
06-20
商户终端APP产品原型图,使用的是axure设计，网页版。
电商系统管理后台设计原型RP文件完整版
03-01
完整的电商系统后台设计原型，从系统登录到商品分类管理、商品管理、订单管理、运营管理、售后管理等设计电商系统架构
android实现的仿O2O类app的功能的应用
jiafei_cheer的专栏
03-01 238
一份基于android的涵盖app通用功能的源码。包含登录、列表、详情、图片轮播、tab切换、模拟支付步骤、支持支付宝和微信支付等功能。参见：https://github.com/DoTalkLily/AppStarter  求star~ This is an o2o app sample,which covers a lot features you may wann...
基于ThinkPHP5.1打造的o2o商户系统（项目实战）.zip
最新发布
07-23
本项目“基于ThinkPHP5.1打造的O2O商户系统”正是这样一个结合了PHP与ThinkPHP5.1的实战项目，适用于学习、课程设计或毕业设计任务。 一、ThinkPHP5.1框架简介 ThinkPHP5.1是ThinkPHP框架的第五个主要版本，它在5.0...
thinkphp-ecommerce-o2o:基于ThinkPHP5.1打造的o2o商户系统（项目实战）
04-08
基于ThinkPHP5.1打造的o2o商户系统（项目实战） ThinkPHP5.1对底层架构做了进一步的改进，减少依赖，其主要特性包括： 采用容器统一管理对象 支持Facade 注解路由支持 路由跨域请求支持 配置和路由目录独立 取消系统...
O2O业务深耕与设计实战.pdf
09-12
《O2O业务深耕与设计实战》探讨了在线到线下（O2O）业务的深度挖掘和设计策略，旨在帮助从业者更好地理解和优化这一领域的运营。本文将深入解析O2O业务的核心元素，包括视觉风格定位、品牌运营、业务细分以及产品...
用SQL和tableau做数据分析实战--O2O优惠券线下使用数据分析阿里天池数据集
BiLiBa123的博客
11-29 1503
用SQL和Tableau做一次数据分析
网站后台管理系统原型
12-28
网站后台全套模板，下载就可以使用！纯静态页面。欢迎下载
web电商基础后台原型图.rp
04-20
web电商基础后台原型图，各模块非常全面
商户管理后台/消费统计管理/云平台商户端管理后台原型/PaaS金融服务平台商户端管理后台原型/企业管理系统后台/账户管理/工单管理/充值管理/汇款单管理/余额管_商户管理
01-11
商户管理后台/消费统计管理/云平台商户端管理后台原型/PaaS金融服务平台商户端管理后台原型/企业管理系统后台/账户管理/工单管理/充值管理/汇款单管理/余额管理/用户管理/认证管理/web后台原型 Axure原型演示地址：https://www.pmdaniu.com/storages/124062/d9e93d19d520ddafce6eca3fe1e28eab-30328/start.html#g=1&p=%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2
简单版商城原型 电商APP 后台 Axure RP 8源文件
04-27
简单版商城原型 电商APP 后台 Axure RP 8源文件，APP包括首页、分类、购物车、我的，后台包括商品管理、订单管理、会员管理
商家版本原型
03-05
本原型是提供商家版的pc版本管理平台，包括了 商品管理，订单管理，临期商品，库存管理，商品分类管理，促销管理等商家管理平台。
web电商系统、电商平台WEB端交互原型模板、用户中心、会员中心、优惠券、积分、互动社区、运营推广、内容推荐、商品展示、订单流程、订单管理、售后及服务、Axure原型、rp原型、电商原型、商城系统原型
rp原型聚集地
01-26 1747
web电商系统、电商平台WEB端交互原型模板、用户中心、会员中心、优惠券、积分、互动社区、运营推广、内容推荐、商品展示、订单流程、订单管理、售后及服务等完整的电商体系功能架构和业务流程
计算机毕业设计JAVA基地信息可视化mybatis+源码+调试部署+系统+数据库+lw
m0_71489934的博客
07-10 372
计算机毕业设计JAVA基地信息可视化mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：idea eclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、...
Axure外卖订餐商家端APP原型，我要开店/商品财务订单管理/营销活动/在线开发票，RP成品
默林工作室
01-06 5815
该原型作品为外卖订餐APP商家手机端，定位偏向美团外卖或饿了么一类，是以人民币CNY结算的国内版，已覆盖外卖商家端APP主流功能。该作品原型采用去线留白的设计，全部由线框图制作而成，高保真高交互，并运用了大量的母版与动态面板，大幅度缩减文件大小与时间成本。
电商后台原型 rp_电商管理系统原型分享- E-Market
weixin_39880328的博客
12-10 1502
电商管理系统概述随着电商行业的发展，传统的管理方法正逐步被信息化管理所取代，电商信息管理系统地作用也越来越大。针对商家开发的电商管理系统，实现了对客户、商品、交易的管理和信息统计功能，从而提升了线上商城维护的工作效率和质量。电商管理系统原型设计在项目开始之初，可以通过原型设计快速呈现电商管理系统的结构、功能与交互方式。同时，原型设计也可以帮助系统开发团队快速清理系统逻辑。通过原型设计可以在项目规划...
V购O2O商城电子商务平台供应商合作协议
"V购O2O商城电子商务平台供应商合作运营协议" V购O2O商城电子商务平台是一个由上海微购网络科技有限公司运营的O2O（Online To Offline）平台，致力于构建一个低成本、高效率的微电商环境，帮助品牌企业进行品牌建设...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值