commodity-manage-app/pages/feedback/detail.vue

<template>
	<view class="page-css">
		<view class="order-box">
			<view class="order-title">售后详情</view>
			<view class="order-item" v-show="getStatusText(detailObj.handleStatus) != ''">
				<text class="item_left_txt">订单状态：</text>
				<view class="item_right_txt">
					<u-tag  style="margin-right: 10rpx;" :text="getStatusText(detailObj.handleStatus)" :type="detailObj.handleStatus == 1 ? 'primary' : detailObj.handleStatus == 2 ? 'warning' : detailObj.handleStatus == 3 ? 'success' : 'primary'" shape="circle"></u-tag>
				</view>
			</view>
			<view class="order-item">
				<text class="item_left_txt">订单编号：</text>
				<text class="item_right_txt">{{detailObj.soCode}}</text>
			</view>
			<view class="order-item">
				<text class="item_left_txt">客户名称：</text>
				<text class="item_right_txt">{{detailObj.customerName}}</text>
			</view>
			<view class="order-item">
				<text class="item_left_txt">联系方式：</text>
				<text class="item_right_txt">{{detailObj.contactPhone}}</text>
			</view>
			<view class="order-item">
				<text class="item_left_txt">反馈时间：</text>
				<text class="item_right_txt">{{detailObj.feedbackTime}}</text>
			</view>
			<view class="order-item">
				<text class="item_left_txt">问题分类：</text>
				<text class="item_right_txt">{{getProblemTypeText(detailObj.problemType)}}</text>
			</view>
			<view class="order-item">
				<text class="item_left_txt">问题描述：</text>
				<text class="item_right_txt">{{detailObj.problemDescription}}</text>
			</view>
			<view class="order-item">
				<text class="item_left_txt">问题图片：</text>
				<view class="item_right_txt video ">
					<image style="width: 140rpx;height: 140rpx;margin-bottom: 10rpx;"
					v-for="item in detailObj.attachList" :key="item.id" :src="item.link"  mode=""></image>
				</view>
				<!-- <text class="item_right_txt">{{detailObj.contactPhone}}</text> -->
			</view>
			<view class="order-item">
				<text class="item_left_txt">备注：</text>
				<text class="item_right_txt">{{detailObj.remark}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				id:'',
				detailObj:{}
			}
		},
		onLoad(option) {
			console.log('option--------------------',option)
			this.id = option.id ? option.id : ''
		},
		computed:{
			getStatusText(val){
				return(val =>{
					if(val && val != ''){
						return this.statusList.find(item => item.dictKey == val) ? this.statusList.find(item => item.dictKey == val).dictValue : ''
					}else{
						return ''
					}
				})
			},
			getProblemTypeText(val){
				return(val =>{
					if(val){
						return this.problemList.find(item => item.dictKey == val) ? this.problemList.find(item => item.dictKey == val).dictValue : ''
					}
				})
			},
		},
		onShow() {
			this.getStatusList()
			this.getProblemList()
			this.getDetail()
		},
		mounted() {
			this.getStatusList()
			this.getProblemList()
			this.getDetail()
		},
		methods:{
			// 获取处理状态
			getStatusList(){
				this.$u.api.getHandleStatus().then(res =>{
					console.log('status----------------',res)
					this.statusList = res.data
				}).catch(err =>{
					
				})
			},
			// 获取问题类型
			getProblemList(){
				this.$u.api.getProblemType().then(res =>{
					console.log('problem----------------',res)
					this.problemList = res.data
				}).catch(err =>{
					
				})
			},
			getDetail(){
				this.$u.api.getFeekbackDetail({id:this.id}).then(res =>{
					console.log('res------------------------',res)
					this.detailObj = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-css{
		padding: 20rpx 0;
		
		.order-box{
			width: 95%;
			background: #fff;
			border-radius: 10rpx;
			margin: 0 auto;
			padding: 6rpx;
			padding-bottom: 30rpx;
			
			.order-title{
				line-height: 60rpx;
				color: rgba(0, 0, 0, 1);
				font-size: 32rpx;
				text-align: left;
				font-family: SourceHanSansSC-bold;
				margin: 18rpx 0 0rpx 20rpx;
				font-weight: bold;
			}
			
			.order-item{
				padding: 4rpx 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.item_left_txt {
				    color: rgba(108, 108, 108, 1);
				    font-size: 28rpx;
				    text-align: left;
				    font-family: SourceHanSansSC-regular;
				    width: 210rpx;
				    margin-right: 20rpx;
				    line-height: 60rpx;
				}
				
				.item_right_txt {
				    max-width: calc(100% - 200rpx);
				    color: rgba(0, 0, 0, 1);
				    font-size: 28rpx;
				    // text-align: left;
				    text-align: justify;
				    font-family: SourceHanSansSC-regular;
				    image{
				        width: 100rpx;
				        height: 100rpx;
				    }
				}
				
				.video {
					margin-top: 10rpx;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: space-between;
				}
				
				.item_right_table {
				    width: calc(100% - 220rpx);
				    margin-top: 10rpx;
				
				    .table_box {
				        width: 100%;
				        height: 60rpx;
				        background-color: #e8e8e8;
				        border: 1px solid #bbbbbb;
				        font-size: 14px;
				        color: #101010;
				        line-height: 60rpx;
				        display: flex;
				
				        .left {
				            width: 72%;
				            height: 100%;
				            text-align: center;
				            border-right: 2rpx solid #bbbbbb;
				        }
				
				        .right {
				            width: 28%;
				            height: 100%;
				            text-align: center;
				        }
				    }
				
				    .table_item {
				        background-color: #fff;
				        border-top: none;
				    }
				
				    .table_sub {
				        border-top: none;
				        background-color: #fff;
				    }
				}
			}
		}
	}
</style>