拒单页面

src/components/popView/index.vue

@@ -6,7 +6,10 @@
 			<view class="order-pop-title">
 				<text>{{title}}</text>
 			</view>
-			<view class="line-view" />
+			<view class="line-view" />
+			<view v-if="count" class="order-content">
+				你本月还有<text class="order-content-count">{{count}}</text>次拒单机会
+				</view>
 			<view class="order-pop-text">
 				<text>{{message}}</text>
 			</view>
@@ -16,7 +19,7 @@
 					取消
 				</u-button>
 				<u-button :custom-style="customStyleSave" shape="circle" type="primary" @click="handleClickSure">
-					查看
+					{{buttonText}}
 				</u-button>
 			</view>
 		</view>
@@ -29,7 +32,12 @@
 		props: {
 			visible: Boolean,
 			title: String,
-			message: String,
+			message: String,
+			count: Number, // 剩余次数
+			buttonText: {  // 确定按钮
+				type: String,
+				default: '查看'
+			},
 		},
 		data() {
 			return {}
@@ -76,21 +84,31 @@
 <style lang="scss" scoped>
 	.order-pop-view {
 		padding: 30rpx;
-
+		min-height: 520rpx;
 		.order-pop-title {
 			font-size: 40rpx;
-			margin-top: 40rpx;
-			margin-bottom: 40rpx;
+			margin-top: 30rpx;
+			margin-bottom: 34rpx;
 			text-align: center;
 			color: #333333;
+		}
+		
+		.order-content {
+			text-align: center;
+			color: #333333;
+			font-size: 32rpx;
+			margin-top: 26rpx;
+			.order-content-count {
+				color: #FA5A49;
+			}
 		}
 
 		.order-pop-text {
 			color: #999999;
 			text-align: center;
-			margin-top: 40rpx;
+			margin-top: 30rpx;
 			font-size: 28rpx;
-			margin-bottom: 260rpx;
+			// margin-bottom: 180rpx;
 		}
 
 		.line-view {

src/pages/order/refuse.vue

 <!-- 过程反馈 -->
 <template>
 	<view class="refuse-box bg">
-		<u-navbar back-icon-color="#FFFFFF" :background="background" title="拒单" title-color="#fff" :border-bottom="false"></u-navbar>
+		<u-navbar back-icon-color="#FFFFFF" :background="background" title-color="#fff" :border-bottom="false"></u-navbar>
 		<view class="title">拒单说明</view>
 		<view class="content">
 			<view class="con-box">
@@ -17,22 +17,26 @@
 					</view>
 				</view>
 			</view>
-			<view class="con-box">
-				<view class="tit  u-m-b-40">补充说明</view>
+			<view class="con-box" style="padding-top: 10rpx;">
+				<view class="tit  u-m-b-20">补充说明</view>
 				<u-input v-model="formData.remark" class="textarea" height="156" type="textarea" placeholder="请补充详细说明，以便于记录您的接单信用分"></u-input>
 			</view>
 			
 		</view>
-		<view class="u-m-60">
-			<button :loading="submiting" :disabled="disabledSubmit" class="btn" @click="submitForm">确定</button>
+		<view class="bottm-btn-view">
+			<button :loading="submiting" :disabled="disabledSubmit" class="btn" @click="handleClickSubmit">确定</button>
 		</view>
+		<PopView title="拒单提示" message="确定“拒单”操作，将影响对您的派单频率，\n甚至进入黑名单，请谨慎操作"
+		 :visible.sync="visibale" :count="count" @click="handleClick" buttonText="确定"/>
 	</view>
 </template>
 
 <script>
+	import PopView from "@/components/popView/index.vue"
 	export default {
 		data() {
 			return {
+				visibale: false,
 				orderId: '',
 				submiting: false,
 				background: {
@@ -46,6 +50,7 @@
 					rejectReason: '',
 					remark: ''
 				},
+				count: 0, // 剩余次数
 			};
 		},
 		computed: {
@@ -53,7 +58,9 @@
 				return !this.formData.rejectReason
 			}
 		},
-		components:{},
+		components:{
+			PopView
+		},
 		onLoad(e) {
 			this.orderId = 111
 			if(e && e.orderId) {
@@ -64,6 +71,22 @@
 			changeReason(reason) {
 				this.formData.rejectReason = reason
 			},
+				
+			handleClickSubmit() {
+				if (this.count > 0) {
+					this.visibale = true
+				} else {
+					let message = '本月无拒单机会，请联系客服'
+					uni.showToast({
+						icon: 'none',
+						title: message,
+					})
+				}
+			},
+			handleClick() {
+				this.visibale = false
+				this.submitForm()
+			},
 			async submitForm() {
 				let self = this
 				self.submiting = true
@@ -88,13 +111,13 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	.bg {
 		width: 750rpx;
 		height: 100vh;
 		overflow: auto;
 		background-color: #F4F5F7;
-		background-image: linear-gradient(to top, #F4F5F7 0%, #2272FF 100%);
+		background-image: linear-gradient(to top, #F4F5F7 0%, #2272FF 50%);
 		background-size: 750rpx 600rpx;
 		background-repeat: no-repeat;
 	}
@@ -107,6 +130,7 @@
 		border-radius: 12rpx;
 		padding-bottom: 60rpx;
 		background-color: #fff;
+		min-height: 800rpx;
 	}
 	.con-box{
 		padding: 30rpx;
@@ -123,10 +147,11 @@
 			margin-right:-20rpx;
 			.txt-item{
 				border-radius: 12rpx;
-				padding:24rpx 38rpx;
-				min-width: 196rpx;
+				padding-top:24rpx;
+				padding-bottom: 24rpx;
+				width: 196rpx;
 				text-align: center;
-				margin-right: 20rpx;
+				margin-right: 22rpx;
 				margin-bottom: 20rpx;
 				background-color: #F4F5F7;
 				&.active{
@@ -193,4 +218,10 @@
 		margin-right: 10rpx;
 		color:#FA5A49
 	}
+	.bottm-btn-view {
+		width: 100%;
+		padding: 0 80rpx;
+		position: absolute;
+		bottom: 40rpx;
+	}
 </style>