lilei 7 months ago
parent
commit
661a67cb64

+ 8 - 1
pages.json

@@ -463,7 +463,14 @@
 			"path" : "procureOrder/creatOrder",
 			"style" : 
 			{
-				"navigationBarTitleText" : "确定采购订单"
+				"navigationBarTitleText" : "确定采购订单",
+				"navigationStyle": "custom",
+				"disableScroll": true,
+				"app-plus":{
+					"bounce":"none"
+				},
+				"renderer":"skyline",
+				"componentFramework": "glass-easel"
 			}
 		},
 		{

+ 9 - 109
pagesB/cart/index.vue

@@ -105,7 +105,6 @@
 	import productItem from '@/pagesB/cart/productitem.vue'
 	import sklineHeader from '../../components/skline/sklineHeader.vue'
 	import { getCartList, updateCart, deleteCart } from '@/api/cart.js'
-	import { purchaseSave, purchaseCheck } from '@/api/purchase.js'
 	export default {
 		components:{
 			productItem,
@@ -119,6 +118,15 @@
 			this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
 			// 获取列表数据
 			this.pageInit()
+			
+			// 刷新列表
+			uni.$on('refashCartList',()=>{
+				this.pageInit()
+			})
+			// 删除商品
+			uni.$on('removeCatGood',(snList,a,b)=>{
+				this.removeCart(snList,a,b)
+			})
 		},
 		data() {
 			return {
@@ -451,7 +459,6 @@
 			// 去结算
 			settlement(){
 				if(this.totalAmount>0){
-					 // this.submitOrder()
 					 const list = []
 					 this.list.forEach(key => {
 					 	 const c = key.filter(item => item.checked)
@@ -468,113 +475,6 @@
 					})
 				}
 			},
-			// 去结算
-			submitOrder(){
-				const _this = this
-				// 获取已选商品
-				const detailList = []
-				const cartSn = []
-				_this.list.forEach(key => {
-					key.filter(item=>item.checked).forEach(item => {
-						 detailList.push({
-						 	productSn:item.productSn,
-						 	productCode:item.productCode,
-						 	qty: item.qty,
-						 	price:item.orginPrice,
-							promoSn: item.promoSn
-						 })
-						 cartSn.push({
-							 cartSn: item.cartSn,
-							 productSn:item.productSn
-						 })
-					})
-				})
-				
-				// 校验并提示信息
-				purchaseCheck({detailList:detailList}).then(res => {
-					if(res.status == 200){
-						const promoChangeFlag = res.data.promoChangeFlag
-						// 活动变更
-						if(promoChangeFlag){
-							uni.showModal({
-								title: '提示',
-								content: '促销活动已变更,请刷新?',
-								confirmText:'确定刷新',
-								success(ret) {
-									if(ret.confirm){
-										_this.pageInit()
-									}
-								}
-							})
-							return
-						}
-						const successList = res.data.successList.map(item => {
-							return {
-								productSn:item.productSn,
-								productCode: item.productCode,
-								qty: item.qty,
-								price:item.price,
-								promoSn: item.promoSn
-							}
-						})
-						const delSn = cartSn.filter(item => successList.find(k => k.productSn == item.productSn)).map(item => item.cartSn)
-						const removeList = res.data.removeList.map(item => item.productCode)
-						const selloutList = res.data.selloutList.map(item => item.productCode)
-						console.log(successList,delSn)
-						console.log(removeList,selloutList)
-						// 有已下架或已售罄产品提示
-						if(removeList.length || selloutList.length){
-							uni.showModal({
-								title: '提示',
-								content: (removeList.length ? `产品${removeList.join(',')}已下架,`:'')+(selloutList.length?`产品${selloutList.join(',')}已售罄,`:'')+`不可采购。`+(successList.length?'是否继续采购其他产品?':''),
-								showCancel: successList.length,
-								confirmText: successList.length?'确定':'知道了',
-								success(ret) {
-									if(ret.confirm && successList.length){
-										_this.submitForm(successList,delSn)
-									}
-								}
-							})
-						}else{
-							// 提交
-							_this.submitForm(successList,delSn)
-						}
-					}else{
-						uni.showToast({
-							title: res.message,
-							icon: 'none'
-						})
-					}
-				})
-			},
-			// 确认提交
-			submitForm(detailList,cartSn){
-				uni.showLoading({
-					title: '提交中...',
-					mask: true
-				})
-				this.loading = true
-				purchaseSave({
-					detailList: detailList
-				}).then(res => {
-					this.loading = false
-					uni.hideLoading()
-					if(res.status == 200){
-						// 删除已提交产品
-						this.removeCart(cartSn,true,false)
-						res.data.detailList = []
-						this.$store.state.vuex_tempData = res.data
-						uni.navigateTo({
-							url: "/pagesB/procureOrder/orderDetail"
-						})
-					}else{
-						uni.showToast({
-							title: res.message,
-							icon: 'none'
-						})
-					}
-				})
-			},
 			// 计算总款数、合计、数量
 			getChooseHeji(){
 				this.totalAmount = 0

+ 11 - 2
pagesB/cart/productitem.vue

@@ -4,7 +4,7 @@
 		v-for="(item, dix) in list"
 		:key="item.id" 
 		>
-			<view class="choose-product-item-check" @click="checkItem(item)">
+			<view class="choose-product-item-check" v-if="type=='edit'" @click="checkItem(item)">
 				<uni-icons v-if="!item.edit && (!item.status||item.status==0||item.dealerScopeFlag==0)" type="circle-filled" size="24" color="#ccc"></uni-icons>
 				<uni-icons v-else :type="item.checked?'checkbox-filled':'circle'" size="24" :color="item.checked?'#dd0000':'#666'"></uni-icons>
 			</view>
@@ -37,7 +37,7 @@
 								</view>
 							</view>
 							<view v-else></view>
-							<view>
+							<view v-if="type=='edit'">
 								<view v-if="item.status==1&&item.dealerScopeFlag==1" :style="{opacity:!item.edit?1:0,width:!item.edit?'auto':0}">
 									<view class="flex align_center qty-box">
 										<view class="qty-btn" @click="changeQty(item.qty-1,item,1)" :class="(item.qty <= 1)?'qty-disabled':''">-</view>
@@ -56,6 +56,11 @@
 									<uni-icons type="minus-filled" size="24" color="#dd0000" @click="remove(item.cartSn)"></uni-icons>
 								</view>
 							</view>
+							<view v-else>
+								<view class="edit-qty">
+									X <text>{{item.qty}}</text>
+								</view>
+							</view>
 						</view>
 					 </view>
 				 </view>
@@ -98,6 +103,10 @@
 				type: Array,
 				default: () => []
 			},
+			type: {
+				type: String,
+				default: 'edit'
+			}
 		},
 		data() {
 			return {

+ 207 - 0
pagesB/components/payModal.vue

@@ -0,0 +1,207 @@
+<template>
+	<page-container
+	:show="showModal" 
+	:round="true"
+	:z-index="100"
+	position="bottom" 
+	customStyle="border-radius:15px 15px 0 0;"
+	@beforeleave="beforeClose"
+	@afterleave="closePopu">
+		<view class="popu-content" v-if="payInfo">
+			<view class="popu-close" @click="cancelPay">
+				<uni-icons size="26" type="closeempty"></uni-icons>
+			</view>
+			<view class="pupu-box-pay-item">
+				<view class="popu-content-amount flex align_center justify_center">
+					<view>¥{{payInfo.totalAmount}}</view>
+				</view>
+				<view class="flex align_center justify_between" v-if="payInfo.totalSpecialGiveAmount>0">
+					<text>总优惠</text>
+					<view class="popu-content-price">¥{{payInfo.totalSpecialGiveAmount}}</view>
+				</view>
+				<view class="flex align_center justify_between" v-if="payInfo.totalTicketGiveAmount>0">
+					<text>代金券</text>
+					<view class="popu-content-price">¥{{payInfo.totalTicketGiveAmount}}</view>
+				</view>
+				<view style="height: 5px;"></view>
+				<view class="popu-content-title flex align_center justify_between">
+					<text>付款方式</text>
+					<view></view>
+				</view>
+				<view class="popu-content-pay flex align_center justify_between">
+					<view class="flex align_center"><uni-icons size="20" type="weixin" color="#4CAF50"></uni-icons> <text style="margin-left: 5px;">微信支付</text></view>
+					<view><uni-icons size="22" type="checkbox-filled" color="red"></uni-icons></view>
+				</view>
+			</view>
+			<view class="popu-content-btn">
+				<view class="popu-content-btn-item okbtn" @click="confirmPay">确定付款</view>
+			</view>
+		</view>
+	</page-container>
+</template>
+
+<script>
+	export default {
+		props: {
+			showPopu: {
+				type: Boolean,
+				default: false
+			},
+			payInfo: {
+				type: Object,
+				default: ()=>{
+					return null
+				}
+			},
+			cancelPayMessage: {
+				type: String,
+				default: '您的订单在30分钟内未支付将被取消,请尽快完成支付。'
+			},
+			closeCurPage:{
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				submitOk: false,
+				showModal: this.showPopu
+			}
+		},
+		watch: {
+			showPopu(val){
+				this.showModal = val
+				if(val){
+					this.submitOk = false
+				}
+			},
+			showModal(val){
+				if(!val){
+					this.$emit('close', val)
+				}
+			}
+		},
+		methods: {
+			beforeClose(){
+				if(this.showModal){
+					this.cancelPay()
+				}
+			},
+			// 关闭确定订单弹窗后
+			closePopu(){
+				if(!this.showModal){
+					if(this.closeCurPage){
+						uni.navigateBack()
+					}
+					// 确认付款,去订单详情页
+					if(this.submitOk){
+						this.$emit('payComplete',this.payInfo, true)
+					}else{
+						this.$emit('payComplete',this.payInfo, false)
+					}
+				}
+				this.showModal = false
+			},
+			// 确认取消付款弹框
+			cancelPay(){
+				const _this = this
+				uni.showModal({
+					title: '确定取消支付吗?',
+					content: _this.cancelPayMessage,
+					confirmText: '继续支付',
+					cancelText: '取消支付',
+					success(ret) {
+						// 确定取消,跳转到订单详情页
+						if(ret.cancel){
+							if(_this.showModal){
+								_this.showModal = false
+								_this.submitOk = false
+							}else{
+								if(_this.closeCurPage){
+									uni.navigateBack()
+								}
+								_this.$emit('payComplete',_this.payInfo, false)
+							}
+						}
+						// 继续支付
+						if(ret.confirm){
+							// 继续支付
+							if(!_this.showModal){
+								_this.showModal = true
+								_this.submitOk = false
+							}
+						}
+					}
+				})
+			},
+			// 确认付款
+			confirmPay(){
+				this.showModal = false
+				this.submitOk = true
+			},
+		}
+	}
+</script>
+
+<style lang="less">
+	.popu-content{
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding: 10px 15px;
+			.popu-close{
+				padding: 10px;
+				position: absolute;
+				right: 0;
+				top: 0;
+				z-index: 1000;
+			}
+			.pupu-box-item,.pupu-box-pay-item{
+				width: 100%;
+				> view{
+					padding: 10px 0;
+				}
+			}
+			.pupu-box-pay-item{
+				> view{
+					padding: 6px 0;
+				}
+				.popu-content-amount{
+					font-size: 24px;
+					color: red;
+					padding-top: 30px;
+				}
+				.popu-content-title{
+					font-weight: bold;
+				}
+			}
+			.popu-content-btn{
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: space-around;
+				margin: 20px 0 10px;
+				.popu-content-btn-item{
+					width: 30%;
+					height: 34px;
+					font-size: 14px;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					border-radius: 100px;
+				}
+				.cancelBtn{
+					background-color: #f8f8f8;
+					color: #666;
+				}
+				.okbtn{
+					background-color: #f70000;
+					color: #FFFFFF;
+					width: 65%;
+					.payAmount{
+						margin-left: 5px;
+					}
+				}
+			}
+	}
+</style>

+ 1 - 1
pagesB/coupon.vue

@@ -90,7 +90,7 @@
 			let _this = this
 			_this.pageInit()
 			_this.theme = getApp().globalData.theme
-			uni.$on('refreshOrder',function(data){
+			uni.$on('refreshCoupon',function(data){
 				 _this.list = []
 				 _this.status = "loading"
 			     _this.pageInit()

+ 429 - 8
pagesB/procureOrder/creatOrder.vue

@@ -1,25 +1,446 @@
 <template>
-	<view>
-		
+	<view class="pages">
+		<!-- head -->
+		<sklineHeader title="确认采购订单"></sklineHeader>
+		<view class="cart-body">
+				<!-- 内容 -->
+				<scroll-view 
+				scroll-y 
+				class="cart-list" 
+				type="custom" 
+				:bounces="false"
+				>
+					<sticky-header>
+						 <!-- 头部 -->
+						 <view class="cart-head" v-if="total>0">
+						 	<view class="cart-head-left">商品列表</view>
+						 	<view class="cart-head-right">
+								共<text>{{total}}</text>款<text>{{totalNum}}</text>件商品
+							</view>
+						 </view>
+					</sticky-header>
+					<productItem
+					v-for="(item, index) in list"
+					:key="index"  
+					:list="item" 
+					type="views"
+					>
+					</productItem>
+					<!-- loading -->
+					<view class="loading-bar" v-if="total>0 && status!='loading'">{{noDataText}}</view>
+					<view class="empty-bar" v-if="total==0 && status!='loading'" @click="goBack">
+						<view>{{empty.tip}}</view>
+					</view>
+					<!-- 商品总计 -->
+					<view class="product-price">
+						<view>
+							<view class="product-price-item">
+								<text>商品金额</text>
+								<text class="price">¥{{Number(totalAmount).toFixed(2)}}</text>
+							</view>
+							<view class="product-price-item">
+								<text>优惠金额</text>
+								<text class="price">¥{{Number(totalDiscount).toFixed(2)}}</text>
+							</view>
+							<view class="product-price-item">
+								<text>代金券</text>
+								<text class="price">¥{{Number(totalCoupon).toFixed(2)}}</text>
+							</view>
+							<view class="product-price-item">
+								<text></text>
+								<view class="flex align_center">
+									合计:<text class="price">¥{{settleAmount.join('.')}}</text>
+								</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+				<!-- 底部 -->
+				<view class="cart-footer" v-if="total>0">
+					<view class="cart-footer-box">
+						<view class="cart-footer-left">
+							结算金额:
+							<view class="cart-footer-left-price-num">
+								¥<text>{{settleAmount[0]}}</text>.{{settleAmount[1]}}
+							</view>
+						</view>
+						<view class="cart-footer-right">
+							<view></view>
+							<view class="cart-footer-right-button">
+								<button class="btns" :loading="loading" type="warn" size="mini" @click="settlement">提交订单</button>
+							</view>
+						</view>
+					</view>
+					<view :style="{height:safeAreaBottom+'px'}"></view>
+				</view>
+		</view>
+		<!-- 付款弹框 -->
+		<payModal :showPopu="showPopu" :closeCurPage="true" :payInfo="payInfo" @close="showPopu=false" @payComplete="toOrderDetial"></payModal> 
 	</view>
 </template>
 
 <script>
+	import {
+	    mapState,
+	    mapMutations,
+	} from 'vuex'
+	import productItem from '@/pagesB/cart/productitem.vue'
+	import sklineHeader from '../../components/skline/sklineHeader.vue'
+	import payModal from '../components/payModal.vue'
+	import { purchaseSave, purchaseCheck } from '@/api/purchase.js'
 	export default {
+		components:{
+			productItem,
+			sklineHeader,
+			payModal
+		},
+		onLoad() {
+			// 计算区域高度
+			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+			this.screenWidth = uni.getSystemInfoSync().windowWidth
+			this.screenHeight = uni.getSystemInfoSync().windowHeight
+			this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
+			// 列表原始数据
+			this.list = this.$store.state.vuex_tempData||[]
+			this.getChooseHeji()
+		},
+		onUnload() {
+			this.$store.state.vuex_tempData = null
+		},
 		data() {
 			return {
-				
+				loading: false,
+				status: 'loading',
+				noDataText: '暂无产品',
+				empty: {
+					tip: '暂无产品',
+				},
+				// 查询条件
+				list: [], // 列表数据
+				total: 0, // 总款数
+				totalAmount: 0, // 总金额
+				totalDiscount:0, // 总优惠
+				totalCoupon: 0, // 总代金券
+				totalNum: 0, // 总数量
+				screenWidth: 325, // 屏幕宽度
+				screenHeight: 0, // 屏幕高度
+				statusBarHeight: 44, // 状态栏高度
+				safeAreaBottom: 0, // 底部安全区域高度
+				showPopu: false, // 弹框
+				hasPay: true ,// 是否开通支付
 			}
 		},
-		onLoad(){
-			console.log(this.$store.state.vuex_tempData)
+		computed: {
+			...mapState(['hasLogin']),
+			userInfo(){
+				return this.$store.state.vuex_userInfo
+			},
+			// 结算金额
+			settleAmount(){
+				return Number(this.totalAmount-this.totalDiscount-this.totalCoupon).toFixed(2).toString().split('.')
+			},
+			// 付款信息
+			payInfo(){
+				return this.$store.state.vuex_tempOrderData
+			}
 		},
 		methods: {
-			
+			goBack(){
+				uni.navigateBack()
+			},
+			// 去结算
+			settlement(){
+				if(this.totalAmount>0){
+					 this.submitOrder()
+				}else{
+					uni.showToast({
+						title: '请选择产品',
+						icon: 'none'
+					})
+				}
+			},
+			// 去结算
+			submitOrder(){
+				const _this = this
+				// 获取已选商品
+				const detailList = []
+				const cartSn = []
+				_this.list.forEach(key => {
+					key.filter(item=>item.checked).forEach(item => {
+						 detailList.push({
+						 	productSn:item.productSn,
+						 	productCode:item.productCode,
+						 	qty: item.qty,
+						 	price:item.orginPrice,
+							promoSn: item.promoSn
+						 })
+						 cartSn.push({
+							 cartSn: item.cartSn,
+							 productSn:item.productSn
+						 })
+					})
+				})
+				
+				// 校验并提示信息
+				purchaseCheck({detailList:detailList}).then(res => {
+					if(res.status == 200){
+						const promoChangeFlag = res.data.promoChangeFlag
+						// 活动变更
+						if(promoChangeFlag){
+							uni.showModal({
+								title: '提示',
+								content: '促销活动已变更,请返回购物车重新选择?',
+								confirmText:'确定刷新',
+								success(ret) {
+									if(ret.confirm){
+										_this.goBack()
+										uni.$emit('refashCartList')
+									}
+								}
+							})
+							return
+						}
+						const successList = res.data.successList.map(item => {
+							return {
+								productSn:item.productSn,
+								productCode: item.productCode,
+								qty: item.qty,
+								price:item.price,
+								promoSn: item.promoSn
+							}
+						})
+						const delSn = cartSn.filter(item => successList.find(k => k.productSn == item.productSn)).map(item => item.cartSn)
+						const removeList = res.data.removeList.map(item => item.productCode)
+						const selloutList = res.data.selloutList.map(item => item.productCode)
+						console.log(successList,delSn)
+						console.log(removeList,selloutList)
+						// 有已下架或已售罄产品提示
+						if(removeList.length || selloutList.length){
+							uni.showModal({
+								title: '提示',
+								content: (removeList.length ? `产品${removeList.join(',')}已下架,`:'')+(selloutList.length?`产品${selloutList.join(',')}已售罄,`:'')+`不可采购。`+(successList.length?'是否继续采购其他产品?':''),
+								showCancel: successList.length,
+								confirmText: successList.length?'确定':'知道了',
+								success(ret) {
+									if(ret.confirm && successList.length){
+										_this.submitForm(successList,delSn)
+									}
+								}
+							})
+						}else{
+							// 提交
+							_this.submitForm(successList,delSn)
+						}
+					}else{
+						uni.showToast({
+							title: res.message,
+							icon: 'none'
+						})
+					}
+				})
+			},
+			// 确认提交
+			submitForm(detailList,cartSn){
+				uni.showLoading({
+					title: '提交中...',
+					mask: true
+				})
+				this.loading = true
+				purchaseSave({
+					detailList: detailList
+				}).then(res => {
+					this.loading = false
+					uni.hideLoading()
+					if(res.status == 200){
+						// 删除已提交产品
+						uni.$emit('removeCatGood',cartSn,true,false)
+						res.data.detailList = []
+						this.$store.state.vuex_tempOrderData = res.data
+						// 这里判断是否开通支付,如果开通打开确认付款弹框
+						if(this.hasPay){
+							this.showPopu = true
+						}else{
+							// 创建成功,跳转到订单详情页
+							this.toOrderDetial()
+						}
+					}else{
+						uni.showToast({
+							title: res.message,
+							icon: 'none'
+						})
+					}
+				})
+			},
+			// 订单详情页
+			toOrderDetial(){
+				this.showPopu = false
+				uni.navigateTo({
+					url: "/pagesB/procureOrder/orderDetail"
+				})
+			},
+			// 计算总款数、合计、数量
+			getChooseHeji(){
+				this.totalAmount = 0
+				this.totalDiscount = 0
+				this.totalCoupon = 0
+				this.total = 0
+				this.totalNum = 0
+				this.list.forEach(key => {
+					key.filter(item=>item.checked).forEach(item => {
+						this.totalAmount += item.orginPrice * item.qty // 总金额
+						this.totalNum += item.qty // 总数量
+						this.total += 1 // 总款数
+						// 如果是返券类型
+						if(item.promoType=='BUY_PROD_GIVE_VALID'){
+							this.totalCoupon += item.resultValue * item.qty
+						}
+						// 特价
+						if(item.promoType=='PROMO_PROD'){
+							this.totalDiscount += (item.orginPrice - item.conditionValue) * item.qty
+						}
+						// 满赠
+						item.giftQty = item.promoType=='BUY_PROD_GIVE_PROD' ? Math.floor(item.qty / item.conditionValue)*item.resultValue : 0
+					})
+				})
+			},
 		}
 	}
 </script>
 
-<style>
-
+<style lang="less">
+.pages{
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	.cart-body{
+		position: relative;
+		flex-grow: 1;
+		display: flex;
+		flex-direction: column;
+		.cart-head{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0 20rpx;
+			background-color: #FFFFFF;
+			height: 40px;
+			.cart-head-left{
+				display: flex;
+				align-items: center;
+				font-size: 28rpx;
+				color: #333333;
+				height: 100%;
+			}
+			.cart-head-right{
+				display: flex;
+				align-items: center;
+				font-size: 24rpx;
+				color: #666;
+				height: 100%;
+				text{
+					color: #d81e06;
+					margin: 0 10rpx;
+				}
+			}
+		}
+		.cart-list{
+			flex-grow: 1;
+			background-color: #F5F5F5;
+			width: 100%;
+			.loading-bar{
+				text-align: center;
+				padding: 10px 0;
+				color: #999999;
+			}
+			.empty-bar{
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				padding: 20px 0;
+				margin-top: 20vh;
+				image{
+					width: 100px;
+					height: 100px;
+				}
+				view{
+					font-size: 14px;
+					color: #999999;
+					margin-top: 10px;
+				}
+			}
+			.product-price{
+				padding:0 6px;
+				margin-top: 6px;
+				> view{
+					background: #fff;
+					padding: 10px;
+					border-radius: 10px;
+					.product-price-item{
+						display:flex;
+						align-items: center;
+						justify-content: space-between;
+						padding: 6px 0;
+						.price{
+							color: #333;
+							font-weight: bold;
+						}
+						&:last-child{
+							border-top: 1px solid #eee;
+							padding: 10px 0 0;
+							.price{
+								color: #d81e06;
+							}
+						}
+					}
+				}
+			}
+		}
+		.cart-footer{
+			width: 100%;
+			background-color: #FFFFFF;
+			.cart-footer-box{
+				width: 100%;
+				height: 100rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			}
+			.cart-footer-left{
+				display: flex;
+				align-items: baseline;
+				padding: 0 20rpx 0 36rpx;
+				font-size: 24rpx;
+			}
+			.cart-footer-left-price-num{
+				display: flex;
+				align-items: baseline;
+				font-size: 24rpx;
+				color: #d81e06;
+				text{
+					font-size: 36rpx;
+				}
+			} 
+			.cart-footer-right{
+				padding: 0 20rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				flex-grow:1;
+				.cart-footer-right-button{
+					display: flex;
+					align-items: center;
+					margin-left: 20rpx;
+					text-align: right;
+					.btns{
+						border-radius: 100rpx;
+						height: 36px;
+						padding: 0 10px;
+						min-width: 80px;
+					}
+				}
+			}
+		}
+	}
+}
 </style>

+ 62 - 44
pagesB/procureOrder/orderDetail.vue

@@ -108,7 +108,7 @@
 					<view class="statu"></view>
 				</view>
 				<view class="infoList dju">
-					<text>订单号</text>
+					<text>订单号</text>
 					<text>{{info.purchaseNo||'--'}}</text>
 				</view>
 				<view class="infoList">
@@ -119,19 +119,34 @@
 					<text>下单人员</text>
 					<text>{{info.purchaserName || '--'}}</text>
 				</view>
+				<view class="infoList">
+					<text>付款时间</text>
+					<text>{{info.purchaseDate||'--'}}</text>
+				</view>
 			</view>
 		</view>
-		<view class="footer flex align_center justify_center" v-if="info">
-			<u-button v-if="info.billStatus == 'WAIT_AUDIT'" shape="circle" type="error" plain @click="cancelOrder(info)">取消订单</u-button>
-			<u-button v-if="info.billStatus == 'WAIT_RECEIVE'" shape="circle" type="primary" @click="receiveOrder(info)">确认收货</u-button>
+		<view class="footer" v-if="info">
+			<view class="flex align_center justify_center">
+				<u-button style="margin-left: 10px;" v-if="info.billStatus == 'WAIT_AUDIT'" size="mini" shape="round" type="default" plain @click="cancelOrder(info)">取消订单</u-button>
+				<u-button style="margin-left: 10px;" v-if="info.billStatus == 'WAIT_AUDIT'" size="mini" shape="round" type="error" plain @click="payOrder(info)">立即支付</u-button>
+				<!-- <u-button style="margin-left: 10px;" v-if="info.billStatus == 'CANCEL'" size="mini" shape="round" type="error" plain @click="buyAgain(info)">再次购买</u-button> -->
+				<u-button style="margin-left: 10px;" v-if="info.billStatus == 'WAIT_RECEIVE'" size="mini" shape="round" type="error" plain @click="receiveOrder(info)">确认收货</u-button>
+			</view>
+			<view :style="{height:safeAreaBottom+'px'}"></view>
 		</view>
+		<!-- 付款弹框 -->
+		<payModal :showPopu="showPopu" :payInfo="payInfo" @close="showPopu=false" @payComplete="payComplete"></payModal> 
 	</view>
 </template>
 
 <script>
+	import payModal from '../components/payModal.vue'
 	import { purchaseQueryDetailPage,purchaseCancel,purchaseReceive } from '@/api/purchase.js'
 	export default {
 	   name: 'procureDetailOrder',
+	   components:{
+	   	payModal
+	   },
 	   data() {
 		   return {
 			   loading: false,
@@ -144,49 +159,44 @@
 			   pageNo:1,
 			   pageSize: 30,
 			   total: 0,
-			   purchaseSn: null
+			   purchaseSn: null,
+			   showPopu: false,
+			   safeAreaBottom: 0, // 底部安全区域高度
 		   }
 	   },
 	   onLoad(option) { 
+		   this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
 		   uni.setNavigationBarTitle({
 		   	title: '采购订单详情'
 		   })
-		   // 从采购单列表来
-		  if(option.purchaseSn){
-			  this.state = option.state
-			  this.purchaseSn = option.purchaseSn
-			  const stateText = {'WAIT_AUDIT':'待审核','AUDIT_REJECT':'审核不通过','WAIT_OUT_WAREHOUSE':'待收货','FINISH':'已完结','CANCEL':'已取消'}
-			  this.statusText = stateText[option.state]
-			  this.statusIcon = option.state == 'FINISH' ? 'checkmark-circle' : 'hourglass'
-			  this.info = this.$store.state.vuex_tempData
-			  this.statusMessage = option.state == 'FINISH' || option.state == 'AUDIT_REJECT' || option.state == 'CANCEL' ? '' : '请耐心等待汽配经销商进行配送'
+		  const data = this.$store.state.vuex_tempOrderData
+		  if(data){
+			  this.info = data
+			  this.state = data.billStatus
+			  this.purchaseSn = data.purchaseSn
+			  const stateText = {'WAIT_AUDIT':'待审核','WAIT_PAY':'待付款','AUDIT_REJECT':'审核不通过','WAIT_OUT_WAREHOUSE':'待收货','FINISH':'已完结','CANCEL':'已取消'}
+			  this.statusText = stateText[this.state]
+			  this.statusIcon = this.state == 'FINISH' ? 'checkmark-circle' : (this.state == 'AUDIT_REJECT'?'close':'hourglass')
+			  this.statusMessage = this.state == 'WAIT_OUT_WAREHOUSE' ? '请耐心等待汽配经销商进行配送' : ''
 			  // 获取明细
 			  this.getDetailList()
-		  }else{
-			  const data = this.$store.state.vuex_tempData
-			  if(data){
-				  this.info = data
-				  this.state = data.billStatus
-				  this.purchaseSn = data.purchaseSn
-				  // 获取明细
-				  this.getDetailList()
-			  }
-			  this.statusText = '提交成功'
-			  this.statusIcon = 'checkmark-circle'
-		  } 
-		  
-		  // 更改标题栏背景色
-		  uni.setNavigationBarColor({
-		  	frontColor: '#ffffff',
-		  	backgroundColor: this.state!= 'error'&&this.state!= 'AUDIT_REJECT'&&this.state!= 'CANCEL' ? '#066cff':'#f34503',
-		  })
+			  // 更改标题栏背景色
+			  uni.setNavigationBarColor({
+			  	frontColor: '#ffffff',
+			  	backgroundColor: this.state!= 'error'&&this.state!= 'AUDIT_REJECT'&&this.state!= 'CANCEL' ? '#066cff':'#f34503',
+			  })
+		  }
 	   },
 	   onUnload() {
-			this.$store.state.vuex_tempData = null
+			this.$store.state.vuex_tempOrderData = null
 	   },
 	   computed: {
 		   totalPages(){
 			   return Math.ceil(this.total / this.pageSize)
+		   },
+		   // 付款信息
+		   payInfo(){
+				return this.$store.state.vuex_tempOrderData
 		   }
 	   },
 	   methods: {
@@ -239,7 +249,7 @@
 		 				purchaseCancel({purchaseSn:_this.purchaseSn}).then(res => {
 		 					if (res.status == 200) {
 		 						_this.message('取消成功')
-								uni.$emit('refreshOrder')
+								uni.$emit('refreshPurcaOrder')
 								uni.navigateBack()
 		 					} else {
 		 						_this.message(res.message)
@@ -248,6 +258,22 @@
 		 			}
 		 		}
 		 	});
+		 },
+		 // 立即支付
+		 payOrder(item){
+		 	this.showPopu = true
+		 },
+		 // 付款成功,isOk: false 取消支付或支付失败,true 支付完成
+		 payComplete(item,isOk){
+		 	this.showPopu = false
+		 	if(isOk){
+		 		uni.$emit('refreshPurcaOrder')
+				uni.navigateBack()
+		 	}
+		 },
+		 // 再次购买
+		 buyAgain(item){
+		 	 
 		 },
 		 // 确认收货
 		 receiveOrder(item){
@@ -260,7 +286,7 @@
 		 				purchaseReceive({purchaseSn:_this.purchaseSn}).then(res => {
 		 					if (res.status == 200) {
 		 						_this.message('收货成功')
-								uni.$emit('refreshOrder')
+								uni.$emit('refreshPurcaOrder')
 		 						uni.navigateBack()
 		 					} else {
 		 						_this.message(res.message)
@@ -452,16 +478,8 @@
 			}
 		}
 		.footer{
-			padding: 20upx 60upx;
+			padding: 20upx 20upx 0;
 			background: #FFFFFF;
-			button{
-				&:after{
-					border: 0;
-				}
-				color: #585858;
-				font-size: 32rpx;
-				margin: 0 20rpx;
-			}
 		}
 	}
 	

+ 188 - 40
pagesB/procureOrder/orderList.vue

@@ -14,26 +14,51 @@
 							:key="item.id" 
 							 @click="viewRow(item)"
 							>
-								<view class="check-row align-center justify_between">
+								<view class="check-row align_center justify_between">
 									<view class="orderNo">{{item.purchaseNo}}</view>
-									<view class="times">{{item.createDate}}</view>
+									<view class="times">
+										<span v-if="item.billStatus == 'WAIT_AUDIT'">待审核</span>
+										<view v-if="item.billStatus == 'WAIT_AUDIT'" class="waitPay">
+											<text>待付款</text>
+											<text>22小时11分钟</text>
+										</view>
+										<span v-if="item.billStatus == 'AUDIT_REJECT'">审核不通过</span>
+										<span v-if="item.billStatus == 'WAIT_OUT_WAREHOUSE' || item.billStatus == 'WAIT_RECEIVE'">待收货</span>
+										<span v-if="item.billStatus == 'FINISH'">已完结</span>
+										<span v-if="item.billStatus == 'CANCEL'">已取消</span>
+									</view>
 								</view>
-								 <view class="check-row flex align-center justify_between">
-									 <view>总款数:{{item.totalCategory}}</view>
-									 <view>总金额:<text class="price">¥{{item.totalAmount}}</text></view>
+								 <view class="check-row">
+									 <view v-if="item.totalCategory>1" class="check-row-left">
+										 <scroll-view style="width: 100%;white-space: nowrap;" scroll-x="true">
+											 <view class="img-item" v-for="item in item.totalCategory" :key="item">
+											 	 <image src="/static/def_imgs.png" style="width: 100%;height: 100%;"></image>
+											 </view>
+										 </scroll-view>
+									 </view>
+									 <view v-else class="check-row-left">
+										 <view class="img-item">
+										 	 <image src="/static/def_imgs.png" style="width: 100%;height: 100%;"></image>
+										 </view>
+										 <view class="product-info">
+											<text class="ellipsis-two">布瑞斯免维护蓄电池 五菱之光,五菱荣光</text>
+											<text class="ellipsis-one">58-500MF</text>
+										 </view>
+									 </view>
+									 <view :class="item.totalCategory>1?'check-row-right check-row-right-fixed':'check-row-right'">
+										 <view>¥<text class="price">{{priceStr(item.totalAmount)[0]}}</text>.{{priceStr(item.totalAmount)[1]}}</view>
+										 <view><text class="nums">共{{item.totalQty}}件</text></view>
+									 </view>
 								 </view>
 								 <view class="check-row">
-									 <view class="nums">
-										 共{{item.totalQty}}件商品
+									 <view class="times">
+										 {{item.createDate}}
 									 </view>
 									 <view style="text-align: right;color: #999;">
-										 <span v-if="item.billStatus == 'WAIT_AUDIT'">待审核</span>
-										 <span v-if="item.billStatus == 'AUDIT_REJECT'">审核不通过</span>
-										 <span v-if="item.billStatus == 'WAIT_OUT_WAREHOUSE' || item.billStatus == 'WAIT_RECEIVE'">待收货</span>
-										 <span v-if="item.billStatus == 'FINISH'">已完结</span>
-										 <span v-if="item.billStatus == 'CANCEL'">已取消</span>
-										 <u-button style="margin-left: 10px;" v-if="item.billStatus == 'WAIT_AUDIT'" size="mini" shape="circle" type="error" plain @click="cancelOrder(item)">取消订单</u-button>
-										 <u-button style="margin-left: 10px;" v-if="item.billStatus == 'WAIT_RECEIVE'" size="mini" shape="circle" type="primary" @click="receiveOrder(item)">确认收货</u-button>
+										 <u-button style="margin-left: 10px;" v-if="item.billStatus == 'WAIT_AUDIT'" size="mini" shape="round" type="default" plain @click="cancelOrder(item)">取消订单</u-button>
+										 <u-button style="margin-left: 10px;" v-if="item.billStatus == 'WAIT_AUDIT'" size="mini" shape="round" type="error" plain @click="payOrder(item)">立即支付</u-button>
+										 <!-- <u-button style="margin-left: 10px;" v-if="item.billStatus == 'CANCEL'" size="mini" shape="round" type="error" plain @click="buyAgain(item)">再次购买</u-button> -->
+										 <u-button style="margin-left: 10px;" v-if="item.billStatus == 'WAIT_RECEIVE'" size="mini" shape="round" type="error" plain @click="receiveOrder(item)">确认收货</u-button>
 									 </view>
 								 </view>
 							 </view>
@@ -45,35 +70,52 @@
 					</swiper-item>
 				</swiper>
 		</view>
+		<!-- 付款弹框 -->
+		<payModal :showPopu="showPopu" :payInfo="payInfo" @close="showPopu=false" @payComplete="payComplete"></payModal> 
 	</view>
 </template>
 
 <script>
 	import { purchaseQueryPage,purchaseCancel,purchaseReceive } from '@/api/purchase.js'
+	import payModal from '../components/payModal.vue'
 	export default {
+		components:{
+			payModal
+		},
 		data() {
 			return {
 				status: 'loading',
 				noDataText: '暂无数据',
+				showPopu: false,
 				tabList: [
 					  {
 						  dispName: '全部',
 						  typeId: 1,
 						  count: 0
 					   },
+					   {
+					     dispName: '待付款',
+					   	typeId: 2,
+					   	count: 0
+					   },
 					  {
 					    dispName: '待收货',
-					  	typeId: 2,
+					  	typeId: 3,
 						count: 0
 					  },
 					  {
 					    dispName: '已完结',
-					  	typeId: 3,
+					  	typeId: 4,
 						count: 0
 					  },
 					  {
 					    dispName: '已取消',
-					  	typeId: 4,
+					  	typeId: 5,
+					  	count: 0
+					  },
+					  {
+					    dispName: '审核不通过',
+					  	typeId: 6,
 					  	count: 0
 					  },
 				  ],
@@ -86,14 +128,17 @@
 				total: 0,
 			}
 		},
+		computed: {
+			// 付款信息
+			payInfo(){
+				return this.$store.state.vuex_tempOrderData
+			}
+		},
 		onLoad() {
-			this.$store.state.vuex_tempData = null
 			let _this = this
 			_this.pageInit()
-			uni.$on('refreshOrder',function(data){
-				 _this.list = []
-				 _this.status = "loading"
-			     _this.pageInit()
+			uni.$on('refreshPurcaOrder',function(data){
+				 _this.resetList()
 			})
 		},
 		methods:{
@@ -103,6 +148,15 @@
 					title: title
 				})
 			},
+			priceStr: function(value) {
+				const str = Number(value).toFixed(2).split('.')
+				return str;
+			},
+			resetList(){
+				this.list = []
+				this.status = "loading"
+				this.pageInit()
+			},
 			pageInit(){
 				this.total = 0
 				this.pageNo = 1
@@ -165,6 +219,25 @@
 						}
 					}
 				});
+			},
+			// 立即支付
+			payOrder(item){
+				this.$store.state.vuex_tempOrderData = item
+				this.showPopu = true
+			},
+			// 付款成功,isOk: false 取消支付或支付失败,true 支付完成
+			payComplete(item,isOk){
+				this.showPopu = false
+				if(isOk){
+					this.viewRow(item)
+					setTimeout(()=>{
+						this.resetList()
+					},150)
+				}
+			},
+			// 再次购买
+			buyAgain(item){
+				 
 			},
 			// 确认收货
 			receiveOrder(item){
@@ -197,15 +270,26 @@
 			    pageSize: this.pageSize,
 			  }
 			  // 状态条件
+			  // 待付款
 			  if(this.swiperCurrent == 1){
-				  params.billStatusList = ['WAIT_AUDIT','AUDIT_REJECT','WAIT_OUT_WAREHOUSE','WAIT_RECEIVE']
+			  	  params.billStatusList = ['WAIT_PAY']
 			  }
+			  // 待收货
 			  if(this.swiperCurrent == 2){
-				  params.billStatusList = ['FINISH']
+				  params.billStatusList = ['WAIT_AUDIT','WAIT_OUT_WAREHOUSE','WAIT_RECEIVE']
 			  }
+			  // 已完成
 			  if(this.swiperCurrent == 3){
+				  params.billStatusList = ['FINISH']
+			  }
+			  // 已取消
+			  if(this.swiperCurrent == 4){
 			  	  params.billStatusList = ['CANCEL']
 			  }
+			  // 未审核通过
+			  if(this.swiperCurrent == 5){
+			  	  params.billStatusList = ['AUDIT_REJECT']
+			  }
 			  this.status = "loading"
 			  purchaseQueryPage(params).then(res => {
 				if (res.code == 200 || res.status == 204 || res.status == 200) {
@@ -229,7 +313,7 @@
 			},
 			// 详细页
 			viewRow(item){
-				this.$store.state.vuex_tempData = item
+				this.$store.state.vuex_tempOrderData = item
 				uni.navigateTo({
 					url: "/pagesB/procureOrder/orderDetail?purchaseSn="+item.purchaseSn+"&state="+item.billStatus
 				})
@@ -253,43 +337,107 @@
 			.check-order-list{
 				background: #ffffff;
 				padding: 10upx 20upx;
-				margin: 25upx;
-				border-radius: 30upx;
+				margin: 20upx;
+				border-radius: 20upx;
 				box-shadow: 1px 1px 3px #EEEEEE;
 				.check-row{
 					display: flex;
-					padding: 20upx 10upx;
 					font-size: 28upx;
+					position: relative;
 					&:first-child{
 						color: #666E75;
 						font-size: 24upx;
-						padding-bottom: 10upx;
+						padding: 20upx 0;
 						.orderNo{
-							font-size: 30upx;
+							font-size: 28upx;
 							color: #222222;
 							margin-top: -6upx;
 							flex-grow: 1;
 						}
-						.times{
-							text-align: right;
-						}
-						border-bottom: 2upx solid #f5f5f5;
 					}
 					&:last-child{
 						align-items: center;
 						justify-content: space-between;
-						.nums{
-							font-size: 28upx;
-							color: #033692;
-						}
+						padding: 20upx 0;
+					}
+					.times{
+						text-align: right;
+						font-size: 24upx;
 					}
 					> view{
 						 .price{
-							 color: red;
+							 color: #666;
 							 font-size: 28upx;
+							 font-weight: bold;
+						 }
+						 .nums{
+						 	font-size: 24upx;
+						 	color: #666;
+						 }
+						 .waitPay{
+						 	background: #f9e4e4;
+						 	border-radius: 30px;
+							display: flex;
+							align-items: center;
+						 	text{
+						 		color: #fff;
+								padding: 3px 5px;
+						 		&:first-child{
+						 			background: #ff0000;
+									border-radius: 30rpx 0 20rpx 30rpx;
+									font-size: 24rpx;
+						 		}
+						 		&:last-child{
+						 			font-size: 20rpx;
+									color: #ff0000;
+						 		}
+						 	}
 						 }
 					}
-					 
+					.check-row-left{
+						display: flex;
+						align-items: center;
+						flex-grow:1;
+						width: 50%;
+					}
+					.img-item{
+						display: inline-block;
+						width: 200rpx;
+						height: 200rpx;
+						background: #f8f8f8;
+						border-radius: 5px;
+						margin-right: 10px;
+					}
+					.product-info{
+						flex-grow: 1;
+						width: 60%;
+						padding-right: 10px;
+						> text{
+							&:last-child{
+								margin-top: 5px;
+								display: inline-block;
+								color: #2196F3;
+								width: 100%;
+							}
+						}
+					}
+					.check-row-right-fixed{
+						position: absolute;
+						top: 0;
+						right:0;
+					}
+					.check-row-right{
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+						align-items: flex-end;
+						padding:0 5px;
+						height: 200rpx;
+						min-width: 100rpx;
+						text-align: right;
+						font-size: 10px;
+						background: rgba(255,255,255,0.9);
+					}
 					.finish{
 						background-color: #2d8cf0;
 					}

+ 28 - 9
pagesB/shopiing/productDetail.vue

@@ -98,6 +98,7 @@
 		:z-index="100"
 		position="bottom" 
 		customStyle="border-radius:15px 15px 0 0;"
+		@beforeleave="beforeClosePopu"
 		@afterleave="closePopu">
 			<!-- 确认订单 -->
 			<view class="popu-content" v-if="detail&&!showPay">
@@ -194,13 +195,13 @@
 						<text>代金券</text>
 						<view class="popu-content-price">¥{{payInfo.totalTicketGiveAmount}}</view>
 					</view>
-					<view style="height: 10px;background: #f8f8f8;"></view>
+					<view style="height: 5px;"></view>
 					<view class="popu-content-title flex align_center justify_between">
 						<text>付款方式</text>
 						<view></view>
 					</view>
 					<view class="popu-content-pay flex align_center justify_between">
-						<view><uni-icons size="20" type="weixin" color="#4CAF50"></uni-icons> <text style="margin-left: 5px;">微信支付</text></view>
+						<view class="flex align_center"><uni-icons size="20" type="weixin" color="#4CAF50"></uni-icons> <text style="margin-left: 5px;">微信支付</text></view>
 						<view><uni-icons size="22" type="checkbox-filled" color="red"></uni-icons></view>
 					</view>
 				</view>
@@ -307,7 +308,7 @@
 			},
 			// 付款信息
 			payInfo(){
-				return this.$store.state.vuex_tempData
+				return this.$store.state.vuex_tempOrderData
 			}
 		},
 		methods: {
@@ -550,7 +551,7 @@
 				}).then(res => {
 					if(res.status == 200){
 						res.data.detailList = []
-						this.$store.state.vuex_tempData = res.data
+						this.$store.state.vuex_tempOrderData = res.data
 						// 打开确认付款弹框,这里判断是否开通支付,如果开通
 						if(this.hasPay){
 							this.showPay = true
@@ -569,6 +570,14 @@
 					}
 				})
 			},
+			// 关闭之前
+			beforeClosePopu(){
+				// 正在支付
+				if(this.showPay){
+					this.showPay = false
+					this.cancelPay()
+				}
+			},
 			// 关闭确定订单弹窗后
 			closePopu(){
 				this.showPopu = false
@@ -624,8 +633,19 @@
 					success(ret) {
 						// 确定取消,跳转到订单详情页
 						if(!ret.confirm){
-							_this.showPopu = false
-							_this.cacelOk = true
+							// 支付弹框打开中
+							if(_this.showPopu){
+								_this.showPopu = false
+								_this.cacelOk = true
+							}else{
+								// 未打开直接跳转
+								_this.toOrderDetial()
+							}
+						}else{
+							// 继续支付
+							_this.showPopu = true
+							_this.showPay = true
+							_this.cacelOk = false
 						}
 					}
 				})
@@ -885,6 +905,7 @@
 				position: absolute;
 				right: 0;
 				top: 0;
+				z-index: 1000;
 			}
 			.popu-content-title{
 				padding: 10px;
@@ -934,6 +955,7 @@
 					position: absolute;
 					right: 0;
 					top: 0;
+					z-index: 1000;
 				}
 				.qty-box{
 					display: flex;
@@ -1056,9 +1078,6 @@
 					.popu-content-title{
 						font-weight: bold;
 					}
-					.popu-content-pay{
-						padding: 10px 0;
-					}
 				}
 				.popu-content-num{
 					> text{

+ 1 - 0
store/index.js

@@ -64,6 +64,7 @@ const store = new Vuex.Store({
 		vuex_cartTotal: 0, // 购物车总数
 		vuex_storeAuthInfo: null ,// 门店认证状态信息
 		vuex_tempData: null, // 临时数据
+		vuex_tempOrderData: null, // 临时订单数据
 		vuex_configPrice: null, // 价格显示配置
 		vuex_hasShopiing: false, // 是否有商城
 		vuex_showShopAuth: false, // 是否显示商城设置