10-6-onlineOrder

pages.json

@@ -665,6 +665,16 @@
 			    "enablePullDownRefresh": false
 			}
 		},
+		{
+			"path" : "pages/merchant/onlineOrder",
+			"style" :                                                                                    
+			{
+				"navigationBarBackgroundColor":"#ffffff",
+				"navigationBarTextStyle":"black",
+			    "navigationBarTitleText": "在线下单",
+			    "enablePullDownRefresh": false
+			}
+		},
 		{
 			"path" : "pages/wallet/openMember",
 			"style" :                                                                                    

pages/merchant/merchant.vue

@@ -51,7 +51,7 @@
 					</view>
 					商品管理
 				</view>
-				<view class="userInfoList-bottom">
+				<view class="userInfoList-bottom" @click="navTo('/pages/merchant/onlineOrder')">
 					<view class="bottom">
 						<image src="../../static/merchant/xiadan.png" mode=""></image>
 					</view>

pages/merchant/onlineOrder.vue

@@ -0,0 +1,787 @@
+<template>
+	<view class="container">
+		<!-- 空白页 -->
+		<view v-if="!hasLogin || empty === true" class="empty">
+			<image src="/static/error/emptyCart.png" class="emptyImg" mode="aspectFit"></image>
+			<view v-if="hasLogin" class="empty-tips">
+				空空如也
+				<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛>
+				</navigator>
+			</view>
+			<view v-else class="empty-tips">
+				空空如也
+				<view class="navigator" @click="navToLogin">去登陆></view>
+			</view>
+		</view>
+		<view v-else>
+			<!-- 购物车头部 -->
+			<view class="cart-hand flex">
+				<view class="hand-tit">
+					购物车共 <text>{{ ' '+cartList.length}} 件</text>商品
+				</view>
+				<view class="hand-btn" @click="clearCart()">
+					清空购物车
+				</view>
+			</view>
+			<!-- 列表 -->
+			<view class="cart-list">
+				<block v-for="(item, index) in cartList" :key="item.id">
+					<view class="cart-item" :class="{ 'b-b': index !== cartList.length - 1 }">
+						<view class="image-wrapper">
+							<image :src="item.productInfo.image" :class="[item.loaded]" mode="aspectFill" lazy-load
+								@load="onImageLoad('cartList', index)" @error="onImageError('cartList', index)"></image>
+							<view class="iconfont iconroundcheckfill checkbox" :class="{ checked: item.checked }"
+								@click="check('item', index)"></view>
+						</view>
+						<view class="item-right">
+							<text class="clamp title">{{ item.productInfo.store_name }}</text>
+							<!-- <text class="attr">{{ item.productInfo.attrInfo.suk }}</text> -->
+							<text class="price">¥{{ item.productInfo.price }}</text>
+							<!-- <uni-number-box
+								class="step"
+								:min="1"
+								:max="item.productInfo.stock"
+								:value="item.cart_num > item.productInfo.stock ? item.productInfo.stock : item.cart_num"
+								:isMax="item.cart_num >= item.productInfo.stock ? true : false"
+								:isMin="item.cart_num === 1"
+								:index="index"
+								@eventChange="numberChange"
+							></uni-number-box> -->
+							<view class="munbox flex">
+								<image src="../../static/icon/reduce.png" mode="" @click="reduce(item,index)"></image>
+								<input type="number" :value="item.cart_num" disabled />
+								<image src="../../static/icon/add.png" mode="" @click="add(item)"></image>
+							</view>
+						</view>
+						<!-- <text class="del-btn iconfont iconclose" @click="deleteCartItem(index)"></text> -->
+					</view>
+				</block>
+			</view>
+			<!-- 底部菜单栏 -->
+			<view class="action-section">
+				<view class="checkbox">
+					<view class="iconfont iconroundcheckfill icon-checked-box" @click="check('all')"
+						:class="{ 'icon-checked': allChecked }"></view>
+					<!-- <view class="clear-btn" @click="allChecked ? clearCart() : ''" :class="{ show: allChecked }"><text>清空</text></view> -->
+				</view>
+				<view class="total-box">
+					<text class="price">合计：¥{{ total }}</text>
+					<!-- <text class="coupon">
+						已优惠
+						<text>74.35</text>
+						元
+					</text> -->
+				</view>
+				<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
+			</view>
+		</view>
+		<view class="btm-btn">
+			<view class="btn-item" @click="openQr">
+				扫码添加
+			</view>
+			<view class="btn-item btn-item1" @click="entQr">
+				输入条码
+			</view>
+		</view>
+		<uni-popup ref="popuphx" class="agree-wrapper">
+			<view class="hx-wrapper">
+				<view class="hx-img">
+					<image src="../../static/img/hxbg.png" mode=""></image>
+				</view>
+				<view class="hx-body">
+					<view class="hx-title">
+						输入商品条码
+					</view>
+					<input type="text" v-model="code" placeholder="请输入条码" placeholder-class="hx-placeholder" />
+					<view class="hx-btn" @click="confirmAdd">
+						确认添加
+					</view>
+				</view>
+				<view class="hx-close" @click="close">
+					<image src="../../static/icon/close.png" mode=""></image>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import {
+		getCartList,
+		getCartNum,
+		cartDel
+	} from '@/api/cart.js';
+	import {
+		mapState
+	} from 'vuex';
+	import uniNumberBox from '@/components/uni-number-box.vue';
+	import uniPopup from '@/components/uni-popup/uni-popup.vue'
+	import {
+		saveUrl,
+		interceptor
+	} from '@/utils/loginUtils.js';
+	export default {
+		components: {
+			uniNumberBox,
+			uniPopup
+		},
+		data() {
+			return {
+				total: 0, //总价格
+				allChecked: false, //全选状态  true|false
+				empty: false, //空白页现实  true|false
+				cartList: [],
+				code: '', //商品条码
+			};
+		},
+		onShow() {
+			// 只有登录时才加载数据
+			if (this.hasLogin) {
+				this.loadData();
+			}
+		},
+		watch: {
+			//显示空白页
+			cartList(e) {
+				let empty = e.length === 0 ? true : false;
+				if (this.empty !== empty) {
+					this.empty = empty;
+				}
+			}
+		},
+		computed: {
+			...mapState(['weichatObj']),
+			...mapState('user', ['hasLogin'])
+		},
+		methods: {
+			reduce(item, index) {
+				if (item.cart_num == 1) {
+					uni.showModal({
+						content: '删除该商品？',
+						success: e => {
+							if (e.confirm) {
+								this.deleteCartItem(index)
+							}
+						}
+					});
+
+				} else {
+					item.cart_num--
+					this.newNumberChange(item)
+				}
+			},
+			add(item) {
+				console.log(item)
+				if (item.productInfo.stock > item.cart_num) {
+					item.cart_num++
+					this.newNumberChange(item)
+				} else {
+					return
+				}
+			},
+			//请求数据
+			async loadData() {
+				let obj = this;
+				getCartList({})
+					.then(function(e) {
+						// 获取当前购物车物品增加数量
+						let nub = obj.cartList.length;
+						// 获取之前对象数组
+						let aArray = obj.cartList.reverse();
+						// 获取返回数据对象数组
+						let bArray = e.data.valid.reverse();
+						obj.cartList = bArray
+							.map((item, ind) => {
+								// 设置返回数据默认为勾选状态
+								item.checked = true;
+								// 获取相同数组之前对象的数据
+								let carlist = aArray[ind];
+								// 判断之前是否已经加载完毕
+								if (carlist && carlist.loaded == 'loaded') {
+									item.loaded = 'loaded';
+								}
+								return item;
+							})
+							.reverse();
+						obj.calcTotal(); //计算总价
+					})
+					.catch(function(e) {
+						console.log(e);
+					});
+			},
+			//监听image加载完成
+			onImageLoad(key, index) {
+				// 修改载入完成后图片class样式
+				this.$set(this[key][index], 'loaded', 'loaded');
+			},
+			//监听image加载失败
+			onImageError(key, index) {
+				this[key][index].image = '/static/error/errorImage.jpg';
+			},
+			// 跳转到登录页
+			navToLogin() {
+				// 保存地址
+				saveUrl();
+				// 登录拦截
+				interceptor();
+			},
+			//选中状态处理
+			check(type, index) {
+				if (type === 'item') {
+					this.cartList[index].checked = !this.cartList[index].checked;
+				} else {
+					const checked = !this.allChecked;
+					const list = this.cartList;
+					list.forEach(item => {
+						item.checked = checked;
+					});
+					this.allChecked = checked;
+				}
+				this.calcTotal(type);
+			},
+			//数量
+			numberChange(data) {
+				let arr = this.cartList[data.index];
+				arr.cart_num = data.number;
+				getCartNum({
+						id: arr.id,
+						number: data.number
+					})
+					.then(e => {
+						console.log(e);
+					})
+					.catch(function(e) {
+						console.log(e);
+					});
+				this.calcTotal();
+			},
+			newNumberChange(item) {
+				getCartNum({
+						id: item.id,
+						number: item.cart_num
+					})
+					.then(e => {
+						console.log(e);
+					})
+					.catch(function(e) {
+						console.log(e);
+					});
+				this.calcTotal();
+			},
+			//删除
+			deleteCartItem(index) {
+				let list = this.cartList;
+				let row = list[index];
+				let id = row.id;
+				cartDel({
+					ids: id
+				});
+				this.cartList.splice(index, 1);
+				uni.hideLoading();
+				this.calcTotal();
+			},
+			//清空
+			clearCart() {
+				uni.showModal({
+					content: '清空购物车？',
+					success: e => {
+						if (e.confirm) {
+							let st = this.cartList.map(e => {
+								return e.id;
+							});
+							cartDel({
+								ids: st.join(',')
+							}).then(e => {
+								console.log(e);
+							});
+							this.cartList = [];
+						}
+					}
+				});
+			},
+			//计算总价
+			calcTotal() {
+				let list = this.cartList;
+				if (list.length === 0) {
+					this.empty = true;
+					return;
+				}
+				let total = 0;
+				let checked = true;
+				list.forEach(item => {
+					if (item.checked === true) {
+						total += item.productInfo.price * item.cart_num;
+					} else if (checked === true) {
+						checked = false;
+					}
+				});
+				this.allChecked = checked;
+				this.total = Number(total.toFixed(2));
+			},
+			//创建订单
+			createOrder() {
+				let list = this.cartList;
+				let goodsData = [];
+				list.forEach(item => {
+					if (item.checked) {
+						goodsData.push(item.id);
+					}
+				});
+
+				uni.navigateTo({
+					url: '/pages/order/createOrder?id=' + goodsData.join(',')
+				});
+			},
+			entQr() {
+				this.$refs.popuphx.open()
+			},
+			close() {
+				this.$refs.popuphx.close()
+				this.code = ''
+			},
+			confirmAdd() {
+				console.log('确认添加', this.code)
+				this.close()
+			},
+			openQr() {
+				let obj = this;
+				// #ifndef H5
+				uni.scanCode({
+					success(e) {
+						// obj.orderVerific(e.result);
+						console.log(e.result)
+					}
+				});
+				// #endif
+				// #ifdef H5
+				this.weichatObj.scanQRCode({
+					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
+					scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
+					success: function(res) {
+						// obj.orderVerific(res.resultStr); // 当needResult 为 1 时，扫码返回的结果
+						console.log(res.resultStr)
+					}
+				});
+				// #endif
+			},
+		}
+	};
+</script>
+
+<style lang="scss">
+	.container {
+		padding-bottom: 134rpx;
+		background-color: $page-color-base;
+
+		/* 空白页 */
+		.empty {
+			position: fixed;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100vh;
+			padding-bottom: 100rpx;
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+			align-items: center;
+			background: #fff;
+
+			.emptyImg {
+				width: 300rpx;
+				height: 250rpx;
+				margin-bottom: 30rpx;
+			}
+
+			.empty-tips {
+				display: flex;
+				font-size: $font-sm + 2rpx;
+				color: $font-color-disabled;
+
+				.navigator {
+					color: $uni-color-primary;
+					margin-left: 16rpx;
+				}
+			}
+		}
+	}
+
+	/* 购物车列表项 */
+	.cart-item {
+		width: 710rpx;
+		height: 210rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 0px 10rpx 0rpx rgba(0, 0, 0, 0.1);
+		border-radius: 10rpx;
+		margin: 20rpx auto;
+
+		display: flex;
+		position: relative;
+		padding: 30rpx 26rpx 30rpx 80rpx;
+
+		.image-wrapper {
+			width: 150rpx;
+			height: 150rpx;
+			flex-shrink: 0;
+			position: relative;
+
+			image {
+				border-radius: 8rpx;
+			}
+		}
+
+		.checkbox {
+			display: flex;
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: -65rpx;
+			margin: auto 0;
+			height: 50rpx;
+			z-index: 8;
+			font-size: 44rpx;
+			line-height: 1;
+			padding: 4rpx;
+			color: $font-color-disabled;
+			background: #fff;
+			border-radius: 50px;
+		}
+
+		.item-right {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			overflow: hidden;
+			position: relative;
+			padding-left: 30rpx;
+
+			.munbox {
+				width: 144rpx;
+				height: 44rpx;
+				position: absolute;
+				bottom: 0;
+				right: 0;
+
+				input {
+					display: inline-block;
+					text-align: center;
+				}
+
+				image {
+					flex-shrink: 0;
+					width: 44rpx;
+					height: 44rpx;
+				}
+			}
+
+			.title,
+			.price {
+				font-size: $font-base + 2rpx;
+				color: $font-color-dark;
+				height: 40rpx;
+				line-height: 40rpx;
+			}
+
+			.attr {
+				font-size: $font-sm + 2rpx;
+				color: $font-color-light;
+				height: 50rpx;
+				line-height: 50rpx;
+
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #999999;
+			}
+
+			.price {
+				// height: 50rpx;
+				// line-height: 50rpx;
+				padding-top: 20rpx;
+				font-size: 34rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #FF4C4C;
+			}
+
+			.step {
+				margin-top: 20rpx;
+			}
+
+			.title {
+				font-size: 34rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+			}
+		}
+
+		.del-btn {
+			padding: 4rpx 10rpx;
+			font-size: 34rpx;
+			height: 50rpx;
+			color: $font-color-light;
+		}
+	}
+
+	/* 底部栏 */
+	.action-section {
+		/* #ifdef H5 */
+		margin-bottom: 97rpx;
+		/* #endif */
+		position: fixed;
+		left: 0rpx;
+		bottom: 0rpx;
+		z-index: 95;
+		display: flex;
+		align-items: center;
+		width: 750rpx;
+		height: 100rpx;
+		padding: 0 30rpx;
+		// background: rgba(255, 255, 255, 0.9);
+		background: #fff;
+
+		// box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
+		// border-radius: 16rpx;
+		.checkbox {
+			height: 52rpx;
+			position: relative;
+
+			.icon-checked-box {
+				border-radius: 50rpx;
+				background-color: #ffffff;
+				width: 52rpx;
+				height: 100%;
+				position: relative;
+				z-index: 5;
+				font-size: 53rpx;
+				line-height: 1;
+				color: $font-color-light;
+
+				&::after {
+					content: '全选';
+					width: 100rpx;
+					position: absolute;
+					top: 0;
+					bottom: 0;
+					margin: auto;
+					line-height: 1.5;
+					padding-left: 10rpx;
+					font-size: 32rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #767477;
+				}
+			}
+
+			.icon-checked {
+				color: $base-color;
+			}
+		}
+
+		.clear-btn {
+			position: absolute;
+			left: 26rpx;
+			top: 0;
+			z-index: 4;
+			width: 0;
+			height: 52rpx;
+			line-height: 52rpx;
+			padding-left: 38rpx;
+			font-size: $font-base;
+			color: #fff;
+			background: $font-color-disabled;
+			border-radius: 0 50px 50px 0;
+			opacity: 0;
+			transition: 0.2s;
+
+			&.show {
+				opacity: 1;
+				width: 120rpx;
+			}
+		}
+
+		.total-box {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			text-align: right;
+			padding-right: 40rpx;
+			color: #FF6F0F;
+			font-weight: bold;
+
+			.price {
+				font-size: 32rpx;
+
+				// font-size: $font-lg;
+				// color: $font-color-dark;
+
+			}
+
+			.coupon {
+				font-size: $font-sm;
+
+				// color: $font-color-light;
+				text {
+					font-weight: bold;
+					color: $font-color-dark;
+				}
+			}
+		}
+
+		.confirm-btn {
+			padding: 0 38rpx;
+			margin: 0;
+			border-radius: 100px;
+			height: 76rpx;
+			line-height: 76rpx;
+			font-size: $font-base + 2rpx;
+			background: $base-color;
+			font-weight: bold;
+		}
+	}
+
+	/* 复选框选中状态 */
+	.action-section .checkbox.checked,
+	.cart-item .checkbox.checked {
+		color: $base-color;
+	}
+
+	.cart-hand {
+		width: 750rpx;
+		height: 88rpx;
+		background: #FFFFFF;
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
+		line-height: 88rpx;
+		padding-left: 28rpx;
+		padding-right: 26rpx;
+
+		.hand-tit {
+			text {
+				color: #FF4C4C;
+			}
+
+		}
+
+		.hand-btn {
+			width: 164rpx;
+			height: 62rpx;
+			border: 2rpx solid #FF4C4C;
+			border-radius: 31rpx;
+			font-size: 26rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #FF4C4C;
+			line-height: 62rpx;
+			text-align: center;
+		}
+	}
+
+	.btm-btn {
+		z-index: 95;
+		display: flex;
+		position: fixed;
+		bottom: 0;
+		text-align: center;
+		font-size: 32rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #FFFFFF;
+		line-height: 97rpx;
+		width: 750rpx;
+
+		.btn-item {
+			height: 100%;
+			width: 50%;
+			background-color: #31332d;
+		}
+
+		.btn-item1 {
+			background-color: #5DBC7C;
+		}
+	}
+
+	.cart-list {
+		padding-bottom: 97rpx;
+	}
+
+	.hx-wrapper {
+		width: 536rpx;
+		height: 630rpx;
+		position: relative;
+
+		// background-color: #fff;
+		.hx-img {
+			width: 536rpx;
+			height: 281rpx;
+
+			image {
+				width: 536rpx;
+				height: 281rpx;
+			}
+		}
+
+		.hx-close {
+			position: absolute;
+			left: 243rpx;
+			bottom: -80rpx;
+			width: 52rpx;
+			height: 52rpx;
+
+			image {
+				width: 52rpx;
+				height: 52rpx;
+			}
+		}
+
+		.hx-body {
+			width: 536rpx;
+			height: 349rpx;
+			background-color: #fff;
+			border-radius: 0 0 10rpx 10rpx;
+
+			.hx-title {
+				width: 536rpx;
+				font-size: 36rpx;
+				font-weight: 500;
+				color: #333333;
+				line-height: 1;
+				padding-top: 42rpx;
+				text-align: center;
+			}
+
+			input {
+				width: 439rpx;
+				height: 68rpx;
+				background: #DBF3E9;
+				border-radius: 10rpx;
+				margin: 39rpx auto 0;
+				padding-left: 26rpx;
+
+				.hx-placeholder {
+					font-size: 26rpx;
+					font-weight: 500;
+					color: #52C696;
+				}
+			}
+
+			.hx-btn {
+				margin: 44rpx auto 0;
+				width: 353rpx;
+				height: 71rpx;
+				background: #52C696;
+				border-radius: 34rpx;
+				font-size: 36rpx;
+				font-weight: 500;
+				color: #F8F9F9;
+				line-height: 71rpx;
+				text-align: center;
+			}
+
+
+		}
+	}
+</style>