违约处理 详情展示 以及 发起申诉联调

pages/breakwords-handle-detail/breakwords-handle-detail.nvue

@@ -32,13 +32,34 @@
 							<text class="middle-date-des">{{item2.punishEndTime}}</text>
 						</view>
 					</view>
-					<view class="text-block text-block-last">
+					<view v-if="detail.status!=='CONFIRMED'" class="text-block text-block-last">
 						<text class="middle-date">有无异议</text>
 						<text class="middle-date-des">{{detail.appealNotes=='1'?'有异议':'无异议'}}</text>
 					</view>
+					<view v-else class="text-block picker-row">
+						<text class="middle-date">有无异议</text>
+						<view class="middle-date-des uni-list picker-year">
+							<view class="uni-list-cell">
+								<view class="uni-list-cell-db">
+									<picker class="picker-block" @change="appealNotesChange" mode="selector"
+										range-key='name' :value="condition.appealNotes" :range="appealNotesPicker">
+										<text
+											class="uni-input-text">{{ appealNotesPicker[appealNotesIndex].name}}</text>
+									</picker>
+								</view>
+							</view>
+							<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
+						</view>
+					</view>
 				</view>
 			</view>
 		</view>
+		<view class="bottom-area"></view>
+		<view class="bottom">
+			<button class="btn" type="default" @tap="submit">
+				<text class="btn-text">提交</text>
+			</button>
+		</view>
 	</view>
 </template>
 
@@ -48,7 +69,8 @@
 	} from 'vuex'
 
 	import {
-		apiGetProcessOrderDetail
+		apiGetProcessOrderDetail,
+		apiGetProcessOrderAppeal
 	} from '@/servers/breakwords.js'
 
 
@@ -57,9 +79,20 @@
 			return {
 				loadingText: '加载中...',
 				condition: {
-					id: ''
+					id: '',
+					appealNotes: '0',
 				},
-				detail: {}
+				detail: {},
+				appealNotesPicker: [{
+						'code': '0',
+						'name': '无异议'
+					},
+					{
+						'code': '1',
+						'name': '有异议'
+					}
+				],
+				appealNotesIndex: 0,
 			}
 		},
 		computed: {
@@ -74,11 +107,6 @@
 					'height': `${this.sysinfo.safeArea.height - 44 }px`,
 				}
 			},
-			scrollHeight() {
-				return {
-					'height': `${this.sysinfo.safeArea.height - 44 - 30 }px`
-				}
-			},
 		},
 		onLoad(option) {
 			console.log('breakwords-handle-detail', option)
@@ -99,7 +127,29 @@
 				uni.hideLoading();
 
 				this.detail = res.data
-			}
+			},
+			async submit() {
+				const params = {
+					'createUserId': this.userInfo.code,
+					'createUserName': this.userInfo.name,
+					'id': this.condition.id,
+					'appealNotes': this.condition.appealNotes,
+				}
+				uni.showLoading({
+					title: '加载中'
+				});
+				setTimeout(function() {
+					uni.hideLoading();
+				}, 2000);
+				const res = await apiGetProcessOrderAppeal(params)
+				uni.hideLoading();
+				uni.navigateBack()
+			},
+			appealNotesChange(e) {
+				console.log('picker发送选择改变，携带值为', e.detail.value)
+				this.appealNotesIndex = e.detail.value
+				this.condition.appealNotes = this.appealNotesPicker[e.detail.value].code
+			},
 		},
 	}
 </script>
@@ -209,7 +259,12 @@
 		margin-top: 60rpx;
 	}
 
+	.picker-row {
+		height: 96rpx;
+	}
+
 	.middle-date {
+		flex: 3;
 		font-size: 24rpx;
 		color: #999;
 		margin-right: 16rpx;
@@ -220,6 +275,40 @@
 		color: $text-base-color;
 	}
 
+	.picker-year {
+		flex: 5.5;
+		position: relative;
+		align-items: center;
+		height: 96rpx;
+		line-height: 96rpx;
+		text-align: center;
+	}
+
+	.uni-list-cell {
+		flex: 1;
+		height: 100%;
+		padding-right: 52rpx;
+	}
+
+	.uni-list-cell-db {
+		flex: 1;
+		height: 100%;
+	}
+
+	.picker-block {
+		flex: 1;
+		height: 100%;
+	}
+
+	.icon-arrow {
+		position: absolute;
+		right: 22rpx;
+		top: 40rpx;
+		width: 7px;
+		height: 10px;
+		z-index: 10;
+	}
+
 	.text-block-box {
 		display: flex;
 		flex-direction: column;
@@ -233,4 +322,35 @@
 		justify-content: flex-end;
 		text-align: right;
 	}
+
+	.bottom-area {
+		height: 140rpx;
+		margin-top: 12rpx;
+	}
+
+	.bottom {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		z-index: 10;
+		width: 750rpx;
+		height: 140rpx;
+		padding: 0 32rpx;
+		background-color: #fff;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.btn {
+		flex: 1;
+		height: 92rpx;
+		background: $wly-primary-color;
+		border-radius: 46rpx;
+	}
+
+	.btn-text {
+		color: #fff;
+		font-size: 34rpx;
+	}
 </style>

pages/breakwords-handle/breakwords-handle.nvue

@@ -67,6 +67,8 @@
 								</view>
 							</view>
 						</view>
+						<button v-if="item.status==='CONFIRMED'" class="item-btn item-btn-l" type="default"
+							@click="checkDetal(item)"><text class="item-btn-text">发起申诉</text></button>
 						<button class="item-btn" type="default" @click="checkDetal(item)"><text
 								class="item-btn-text">查看</text></button>
 					</view>
@@ -116,7 +118,7 @@
 				},
 				page: {
 					"currentPage": "1",
-					"pageSize": "10",
+					"pageSize": "30",
 				},
 				loadParams: {
 					total: 0,
@@ -490,6 +492,7 @@
 	.text-block-box {
 		display: flex;
 		flex-direction: column;
+		margin-bottom: 38rpx;
 	}
 
 	.middle-date-right {
@@ -501,7 +504,7 @@
 
 	.item-btn {
 		position: absolute;
-		right: 64rpx;
+		right: 44rpx;
 		bottom: 44rpx;
 		height: 32px;
 		line-height: 30px;
@@ -511,6 +514,10 @@
 		padding-bottom: 0;
 	}
 
+	.item-btn-l {
+		right: 168rpx;
+	}
+
 	.item-btn:after {
 		border: 0;
 	}

servers/breakwords.js

@@ -158,4 +158,14 @@ export async function apiGetProcessOrder(params) {
 export async function apiGetProcessOrderDetail(params) {
 	const res = await apiHelper.post('/wmdpwebservices/processOrder/info', params)
 	return res
+}
+
+/**
+ * 处理单详情发起申诉
+ * @param name 账户名
+ * @returns {Promise<AxiosResponse<T>>}
+ */
+export async function apiGetProcessOrderAppeal(params) {
+	const res = await apiHelper.post('/wmdpwebservices/processOrder/trigger/appeal', params)
+	return res
 }