mobile_uniapp_mmhy/pageA/orderList/orderList.vue

<template>
	<view class="orderList">
		<!-- #ifdef H5 -->
		<u-navbar  back-text="" :custom-back='goBack' title="订单查询" :border-bottom="false" :background="{backgroundColor: '#d52e4c'}" back-icon-color="#fff" title-color="#fff"></u-navbar>
		<!-- #endif -->
		
		<view class="query">
			<u-input v-model="mobile" placeholder-style="font-size:26rpx;" :border="false" :clearable="false" placeholder="请输入您下单时联系人手机号"/>
			<view class="btn" @tap="phoneList()">
				查询
			</view>
		</view>
		<u-tabs :list="listArr" :is-scroll="true" active-color="#d52e4c" :current="current" @change="change"></u-tabs>
		<view class="box" v-for="(item,index) in boxList" :key="index" @tap="payment(item)">
			<view class="no">
				订购商品：{{item.no}}
				<view class="status" v-if="item.status==0">待付款</view>
				<view class="status" v-else-if="item.status==10">已付款</view>
				<view class="status" v-else-if="item.status==15">待发货</view>
				<view class="status" v-else-if="item.status==17">有号码未发货</view>
				<view class="status" v-else-if="item.status==20">待激活</view>
				<view class="status" v-else-if="item.status==25">已完成</view>
				<view class="status" v-else-if="item.status==30">待退款</view>
				<view class="status" v-else-if="item.status==50">已关闭</view>
				<view class="status" v-else-if="item.status==60">无号码</view>
				<view class="status" v-else-if="item.status==70">换卡</view>
				<view class="status" v-else-if="item.status==80">争议单</view>
				<view class="status" v-else-if="item.status==90">已退款</view>
				<view class="status" v-else>退款驳回</view>
			</view>
			<view class="boxCon">
				<view class="money">
					<view class="item" >原价:<text style="text-decoration:line-through;">¥{{item.amount_original}}</text>元</view>
					<view class="item">获得价:¥{{item.amount_hd}}元</view>
					<view class="item">预充:¥{{item.amount_charge}}元</view>
				</view>
				<view class="li">
					<text class="name">收货人:</text>
					<text class="text">{{item.name}}</text>
				</view>
				<view class="li">
					<text class="name">联系电话:</text>
					<text class="text">{{item.phone}}</text>
				</view>
				<view class="li">
					<text class="name">收货地址:</text>
					<text class="text">{{item.address}}</text>
				</view>
				<view class="li">
					<text class="name">订单编号:</text>
					<text class="text">{{item.order_no}}</text>
				</view>
				<view class="li">
					<text class="name">创建时间:</text>
					<text class="text">{{item.create_time}}</text>
				</view>
				<view class="li" v-if="item.trans_name">
					<text class="name">快递名称:</text>
					<text class="text">{{item.trans_name}}</text>
				</view>
				<view class="li" v-if="item.trans_no">
					<text class="name">快递单号:</text>
					<text class="text">{{item.trans_no}}</text>
				</view>
				<view class="li" v-if="item.remark">
					<text class="name">备注信息:</text>
					<text class="text">{{item.remar}}</text>
				</view>
			</view>
			<view class="actual">
				实付金额:{{item.amount}}元
			</view>
			<view class="btns">
				<!-- <text class="btn_view red" v-if="item.open_uploaded == 1" @tap.stop="identity(item.id,item.phone)">上传开卡资料</text> -->
				<text class="btn_view red" @tap.stop="identity(item.id,item.phone)">上传开卡资料</text>
				<view class="buttonType btn_view">
					<!-- <button open-type="contact" @click.stop="buttonType" style="box-shadow: none;">
							<text>联系客服</text>
						</button> -->
					<button open-type="byteHi" data-im-id='28040772090' @click.stop="buttonType" style="box-shadow: none;">
						<text>联系客服</text>
					</button>
				</view>
				<text class="btn_view" @tap.stop="logisticsMet(item.id)">查看物流</text>
				<text class="btn_view red" v-if="item.status==0" >去支付</text>
				<text class="btn_view" v-if="item.status==10||item.status==15" @tap.stop="payment(item,'alert')">申请退款</text>
			</view>
		</view>
		
		<u-loadmore :status="status" />
		<u-popup v-model="logistics" mode="center" border-radius="14">
			<view class="logistics">
				<image @tap="logistics=false" src="../../static/img/up.png"></image>
				<view class="list" v-if="logisticsList.length==0">
					暂无物流信息
				</view>
				<view class="list" v-for="(item,index) in logisticsList" :key="index" style="margin-bottom: 10rpx;">
					<view class="text" style="color: #868686; font-size:26rpx;margin-bottom:10rpx">{{item.AcceptStation}}</view>
					<view class="text" style="color: #868686; font-size:26rpx;margin-bottom:10rpx">{{item.AcceptTime}}</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 联系客服 -->
		<w-Load :wx="wx" margin-top="20" v-on:childByValue="childByValue"></w-Load>
		<u-popup v-model="copeHide" border-radius="20" mode="center">
			<view class="agreement copeHide">
				<image src="/static/img/up.png" class="label2" @tap="copeHide = false"></image>
					<view class="title">
						温馨提示
					</view>
						<view class="copyText">客服电话:{{configAll.service_mobile}}</view>
					<view class="btn" @tap="buttonTypePhone()">
						一键拨打
					</view>
			</view>
		</u-popup> 
	</view>
</template>

<script>
	import wLoad from "@/components/w-load/w-load.vue"
	export default {
		data() {
			return {
				chanId:'',
				mobile:'',
				wx:false,
				logistics:false,
				copeHide:false,//客服手机号
				phone:'',
				type:1, // 1:靓号  2:流量卡
				status: 'loadmore',
				list: 15,
				page: 1,
				boxList:[],
				logisticsList:[], //物流
				listArr: [
					{ name: '全部' ,status:''},
					{ name: '未付款' ,status: 0},
					{ name: '已付款' ,status: 10},
					{ name: '待发货' ,status: 15},
					{ name: '待激活' ,status: 20},
					{ name: '已完成' ,status: 25},
					{ name: '待退款' ,status: 30},
					{ name: '已退款' ,status: 90},
					// { name: '有号码未发货' ,status: 17},
					// { name: '已关闭' ,status: 50},
					// { name: '退款驳回' ,status: 100},
					// { name: '无号码' ,status: 60},
					// { name: '换卡' ,status: 70},
					// { name: '争议单' ,status: 80},
				],
				current: 0
			}
		},
		components:{
			wLoad : wLoad
		},
		filters: {
			formatDate(value) {
				if(value == undefined){
					return;
				}
				// let date = new Date(value * 1000);
				let date = new Date(value * 1000);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				// return y + '-' + MM + '-' + d; //年月日
				return MM + '-' + d + ' ' + h + ':' + m; //年月日时分秒
			}
		 
		},
		onBackPress(e){
		  console.log("监听返回按钮事件",e);
		  uni.navigateTo({
		    url:"/pages/index/index"
		  }) 
		  // 此处一定姚要return为true，否则页面不会返回到指定路径
		  return true;
		},
		onReachBottom() {
			// 下拉加载
					this.status = 'loading';
					this.page = ++ this.page;
					let obj={
						page:this.page,
						phone:this.phone,
						type:1
					}
					this.$http.order_list(obj).then(res=>{
						// console.log(res)
						if(res.data.code==1){
							if(obj.page<res.data.data.per_page || obj.page == res.data.data.per_page){
								let arr=this.boxList.concat(res.data.data.data)
								this.boxList=arr;
								console.log(this.boxList)
							}
							this.status = 'nomore'								
						}else{
							this.status = 'nomore'
						}
					})
				},
		onLoad(option) {
			if(option.chanId){
				uni.setStorageSync('chanId', option.chanId);
				this.chanId=option.chanId
			}else{
				uni.removeStorageSync('chanId');
			}
			if(option.mobile){
				this.mobile = option.mobile
			}
			this.phoneList()
		},
		onShow() {
			let that = this
			uni.$on('updateData',function(data){
				this.phone=data.mobile
				this.phoneList()
			})
		},
		methods: {
			goBack(){
			if(getCurrentPages().length==1){
				return
			}else{
				uni.redirectTo({
					url:'/pages/index/index?chanId='+this.chanId
				})
			}
				
			},
			buttonType(){
				if(this.mixin_type!='TOUTIAO' && this.mixin_type!='H5'){
					this.copeHide=true;				
				}else if(this.mixin_type=='H5'){
					this.wx=true;
				}
			},
			buttonTypePhone(){
				ks.makePhoneCall({
					phoneNumber: this.configAll.service_mobile, // 仅为示例，并非真实的电话号码
				});	
			},
			change(index) {
				console.log(index)
				this.current = index;
				this.phoneList()
			},
			childByValue: function (childValue) {
				this.wx = childValue
			},
			// 初始化列表
			phoneList(){
				// 初始化页数
				let obj
				this.page = 1
				if(this.mobile==''){
					obj={
						page:this.page,
						status:this.listArr[this.current].status,
						type:1
					}
				}else{
					obj={
						page:this.page,
						phone:this.mobile,
						status:this.listArr[this.current].status,
						type:1
					}
				}
				this.$http.order_list(obj).then(res=>{
					console.log(res)
					if(res.data.code==1){
						this.boxList=res.data.data.data
						if(this.list>res.data.data.total){
							this.status = 'nomore'
						}
					}
				})
			},
			logisticsMet(id){
				this.logistics=true;
				this.$http.logistics({id: id})
				.then(res=>{
					if(res.data.code==1){
						console.log(res.data.data)
						this.logisticsList=res.data.data
					}
				})
			},
			identity(id,phone){
				uni.navigateTo({
				  url: '/pageA/identity/identity?id=' + id +'&phone='+phone
				})
			},
			payment(item,val){
				// val有值时候 是申请退款
				if(val){
					uni.navigateTo({
					  url: '/pages/payment/payment?id='+item.id+'&type=alert',
					})
				}else{
					uni.navigateTo({
					  url: '/pages/payment/payment?id='+item.id,
					})
				}
				
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F0F0F0;
	}
	.orderList{
		.query{
			box-sizing: border-box;
			overflow: hidden;
			position: relative;
			width: 679rpx;
			margin: 20rpx auto;
			border: 1px solid $uni-color-BGC;
			border-radius: 20rpx;
			/deep/ input{
				padding-left: 20rpx;
			}
			.btn{
				position: absolute;
				right: 0;
				top:0;
				width: 120rpx;
				height: 100%;
				background-color: $uni-color-BGC;
				text-align: center;
				line-height: 70rpx;
				border-radius: 18rpx;
				font-size: 24rpx;
				color: #fff;
				z-index: 10;
			}
		}
		/deep/ .u-load-more-wrap{
			margin-top: 20rpx!important;
		}
		.box{
			overflow: hidden;
			background-color: #fff;
			padding:0 30rpx;
			font-size: 26rpx;
			color:#868686;
			margin-top: 16rpx;
			.no{
				margin: 24rpx 0;
				box-sizing: border-box;
				padding-left: 24rpx;
				font-size: 28rpx;
				color: #333333;
				border-left: 7rpx solid $uni-color-BGC;
				.status{
					float: right;
					color: $uni-color-BGC;
				}
			}
			.boxCon{
				padding-top: 30rpx;
				border-top:1rpx solid #f1f1f1;
				.money{
					display: flex;
					margin-bottom:20rpx;
					.item{
						align-items: center;
						margin-right: 30rpx;
					}
				}	
				.li{
					margin-bottom: 20rpx;
					.name{
						margin-right: 20rpx;
					}
				}
			}
			.actual{
				text-align: right;
			}
			.btns{
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
					justify-content: flex-end;
				.btn_view{
					padding: 10rpx;
					border: 1rpx solid #868686;
					border-radius: 8rpx;
					margin-left: 8rpx;
					line-height: 26rpx;
					button{
						color: #868686;
						font-size: 26rpx;
						
					}
				}
				.red{
					border-color: $uni-color-BGC;
					color: $uni-color-BGC;
				}
			}
		}
		
		.logistics{
			padding: 30rpx;
			width:580rpx ;
			image{
				float: right;
				width: 21rpx;
				height: 21rpx;
			}
			.list{
				margin-top: 30rpx;
				padding-bottom: 6rpx;
				border-bottom: 1rpx solid #868686;
			}
		}

		.agreement{
			width: 600rpx;
			max-height: 930rpx;
			padding:0 30rpx;
			// box-sizing: border-box;
			.copyText{
				margin: 60rpx 0;
				text-align: center;
				font-size: 36rpx;
				// font-weight: 700;
			}
			.label2{
				float: right;
				width: 21rpx;
				height: 21rpx;
				margin-top:28rpx;
			}
			.title{
				font-size: 30rpx;
				font-weight: 700;
				margin:20rpx 0;
				text-align: center;
			}
			/deep/ .u-drawer__scroll-view{
				position: relative;
			}
			.btn{
				padding: 20rpx;
				border-radius: 10rpx;
				text-align: center;
				border:1rpx solid #d8d8d8;
				font-size: 28rpx;
				width: 100%;
				margin-bottom: 10rpx;
				background-color: $uni-color-BGC;
				color: #fff;
			}
		}
	}
</style>