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

<template>
	<view class="page-css">
		<u-navbar :is-back="false" title="售后订单">
		  <view slot="right" style="display: flex;align-items: center;">
		    <u-icon name="scan" size="60" color="#3a62d7" @click="scanCode" :is-center="true" style="padding-right: 20rpx;">
		    </u-icon>
			<u-icon name="../../static/images/home/out.png" size="60"  :is-center="true" style="padding-right: 20rpx;" @click="logout">
			</u-icon>
		  </view>
		</u-navbar>
		<view class="data_box">
			<view class="list_box">
				<view class="list_item" v-for="item in listData" :key="item.id" @click="handleDetail(item)">
					<view class="item_top">
						<view class="" style="margin-left: 10rpx;">{{item.feedbackTime}}</view>
						<span v-show="getStatusText(item.handleStatus) != ''">
							<u-tag  style="margin-right: 10rpx;" :text="getStatusText(item.handleStatus)" :type="item.handleStatus == 1 ? 'primary' : item.handleStatus == 2 ? 'warning' : item.handleStatus == 3 ? 'success' : 'primary'" shape="circle"></u-tag>
						</span>
					</view>
					<view class="item_bottom">
						<view class="type">售后类型：{{getProblemTypeText(item.problemType)}}</view>
						<view class="type">问题描述：{{item.problemDescription }}</view>
						<view class="type">处理结果：{{item.resule }}</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore margin-top="10" margin-bottom="40" :status="loadingState" />
		<betone-tabbar ref="tabbarRef" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				current:0,
				listData:[],
				isNomore:false,
				userInfo:{},
				page:{
					currentPage:1,
					pageSize:10,
				},
				loadingState: "loadmore",
				problemList:[],
				statusList:[],
			}
		},
		onShow(){
			this.$nextTick(() =>{
				 this.$refs.tabbarRef.getPermission();
			})
		},
		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 : ''
					}
				})
			},
		},
		mounted(){
			this.userInfo = uni.getStorageSync("userinfo")
			this.getProblemList()
			this.getStatusList()
			this.getList()
		},
		methods:{
			// 获取问题类型
			getProblemList(){
				this.$u.api.getProblemType().then(res =>{
					console.log('problem----------------',res)
					this.problemList = res.data
				}).catch(err =>{
					
				})
			},
			// 获取处理状态
			getStatusList(){
				this.$u.api.getHandleStatus().then(res =>{
					console.log('status----------------',res)
					this.statusList = res.data
				}).catch(err =>{
					
				})
			},
			// 跳转详情页面
			handleDetail(item){
				console.log('item--------------------',item)
				uni.navigateTo({
					url:'/pages/feedback/detail?id=' + item.id
				})
			},
			// 获取反馈列表
			getList(){
				this.loadingState = "loading";
				this.$u.api.getQualityList({
					current:this.page.currentPage,
					size:this.page.pageSize,
					userId:this.userInfo.user_id,
				}).then(res =>{
					console.log('res111------------------------',res)
					if(res.code == 200){
						console.log('res---------------------------------------------------------',res)
						var totalPage = res.data.total;
						var newOrders = res.data.records;
						if (this.page.currentPage == 1) {
							this.listData = [];
						}
						this.listData = [...this.listData, ...(res.data.records || [])];
						if (newOrders.length == 0) {
							this.loadingState = "nomore";
							this.isNomore = true;
						}
						if (totalPage == this.listData.length) {
							this.loadingState = "nomore";
							this.isNomore = true;
						}
						this.showSearch = false
					}
				})
			},
			// 扫一扫 方法
			scanCode(){
			  uni.scanCode({
			    success: (res) => {
			      console.log('扫码结果：' + res.result);
				  // this.getDetail(res.result)
				  // uni.navigateTo({
				  //   url: res.result,
				  // });
				  uni.navigateTo({
				    url: "/pages/feedback/feedback?soCode=" + res.result,
				  });
			    },
			    fail: (err) => {
			      console.error('扫码失败：' + err);
			    }
			  });
			},
			// 退出
			logout() {
			  uni.showModal({
			    title: "提示：",
			    content: "请确认是否要退出登录?",
			    success: (res) => {
			      if (res.confirm) {
			        this.$u.api.logout().then(res => {
						console.log('outres----------------',res)
			          //TODO
			          uni.removeStorageSync("token");
			          uni.removeStorageSync("userinfo");
			          uni.removeStorageSync("tabBarList");
			          uni.redirectTo({
			            url: "/pages/login/login",
			          });
			        })
			
			
			      } else if (res.cancel) {
			        //TODO
			      }
			    },
			  });
			},
		}
	}
</script>

<style lang="scss" scoped>
.page-css {
  width: 100%;
  padding: 0;
  background: rgba(239, 239, 239, 1);
  
  .search_box{
	  width: 95%;
	  height: 60rpx;
	  margin: 0 auto;
	  margin-top: 20rpx;
	  display: flex;
	  justify-content: flex-end;
	  
	  .button_box{
		  width: 20%;
		  height: 60rpx;
		  float: right;
	  }
  }
  
  .data_box{
	  .list_box{
		  width: 95%;
		  margin: 0 auto;
		  margin-top: 20rpx;
		  
		  .list_item{
			  padding: 20rpx;
			  width: 100%;
			  background: #fff;
			  border-radius: 10rpx;
			  margin-bottom: 20rpx;
			  
			  .item_top{
				  width: 100%;
				  height: 75rpx;
				  border-bottom: 1px solid rgba(239, 239, 239, 1);
				  display: flex;
				  align-items: center;
				  justify-content: space-between;
				  
				  .feedBtn{
					  
				  }
			  }
			  .item_bottom{
				  .type{
					  margin:10rpx 10rpx 0 10rpx;
				  }
				  
				  .btn_box{
					  text-align: right;
					  margin-right: 10rpx;
					  margin-top: 10rpx;
					  // display: flex;
					  // justify-content: flex-end;
				  }
			  }
		  }
	  }
  }
  .popup-content {
    position: relative;
    background: #fff;
    box-shadow: 0px, -2px rgba(0, 0, 0, 0.25);
    padding: 32rpx;
    position: relative;
    min-height: 320rpx;
	
	.title_box{
		font-size: 18px;
		width: 100%;
		text-align: center;
		margin-bottom: 20rpx;
	}
  }
}
</style>