xytSk-App/pages/orderFeedback/fk.vue

<template>
	<view :style="{height:'99%',position:'relative'}">
		<u-toast ref="uToast"></u-toast>
		<div class="row" v-if="!record.isDisabled">
			<text class="lf">指令内容:</text>
			<div class="rf">
				<u--textarea 
					v-model="value" 
					height=100
				></u--textarea>
			</div>
		</div>
		<div :style="{margin:'0 10px'}"><u-divider></u-divider></div>
		<div class="mybody">
			<div class="row2" v-for="(item,index) in list">
				<text>{{item.tm+' '+item.content}}</text>
			</div>
		</div>
		<div :style="{width:'100%',position:'absolute',bottom:'40px'}" v-if="!record.isDisabled">
			<u-button
				type="primary"
				text="反馈"
				customStyle="margin-top: 20px"
				@click="show1 = true"
			></u-button>
			<u-button
				type="primary"
				text="反馈并结束"
				customStyle="margin-top: 10px"
				@click="show2 = true"
			></u-button>
		</div>
		
		<u-modal
			width="250"
			:show="show1"
			showCancelButton
			closeOnClickOverlay
			@confirm="submit1"
			@cancel="() => show1 = false"
			@close="() => show1 = false"
		>
			<view class="slot-content">
				<rich-text :nodes="'确认反馈?'" :style="{fontSize:'16px'}"></rich-text>
			</view>
		</u-modal>
		<u-modal
			width="250"
			:show="show2"
			showCancelButton
			closeOnClickOverlay
			@confirm="submit2"
			@cancel="() => show2 = false"
			@close="() => show2 = false"
		>
			<view class="slot-content">
				<rich-text :nodes="'确认反馈并结束?'" :style="{fontSize:'16px'}"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>	
	import moment from 'moment'

	export default {
		props:{
			record:{
			  type: Object,
			  required: true,
			},
		},
		data() {
			return {
				value:'',
				list:[],
				show1:false,
				show2:false
			};
		},
		created() {
			this.getData()
		},
		methods: {
			tabsChange(item) {
			},
			async getData() {
				try{
					const res = await uni.$http.get('/gunshiApp/xfflood/xfEmerDispatchR/getFeedbackById/'+this.record.id)
					console.log('res',res)
					this.list = res.data.data					
				}catch(e){
					uni.$showMsg()
				}
			},
			async submit1() {
				this.show1 = false
				try{
					if(!this.value){
						this.$refs.uToast.show({
							type: 'error',
							title: '失败主题',
							message: "请输入指令内容",
						})
						return
					}
					const params = {
						dispatchId:this.record.id,
						content:this.value,
					}
					console.log('params',params)
					const res = await uni.$http.post('/gunshiApp/xfflood/xfEmerDispatchR/feedback',params)
					console.log('res',res)
					this.value = ''
					this.getData()
				}catch(e){
					uni.$showMsg()
				}
			},
			async submit2() {
				this.show2 = false
				try{
					if(!this.value){
						this.$refs.uToast.show({
							type: 'error',
							title: '失败主题',
							message: "请输入指令内容",
						})
						return
					}
					const params = {
						dispatchId:this.record.id,
						content:this.value,
					}
					const res = await uni.$http.post('/gunshiApp/xfflood/xfEmerDispatchR/feedbackAndEnd',params)
					uni.navigateBack()
				}catch(e){
					uni.$showMsg()
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.row{
		display: flex;
		margin-top: 5px;
	}
	.lf{
		width: 25%;
		min-height: 40px;
		text-align: right;
		line-height: 38px;
		padding-right: 10px;
	}
	.rf{
		width: 75%;
		min-height: 40px;
		padding-right: 20px;
		padding-top: 1px;
	}
	.mybody{
		background-color: #ffffff;
		margin: 5px 5px;
		padding: 5px 10px;
		height: calc( 100vh - 410px );
		overflow: scroll;
	}
	.row2{
		background-color: rgba(217, 217, 217, 1);
		margin: 10px 0;
		padding: 10px;
	}
</style>