shuiguo/pages/admin/orderList/index.vue

<template>
	<view class="pos-order-list" ref="container">
		<view class="searchCon acea-row row-center-wrapper">
			<view class="search acea-row row-middle">
				<text class="iconfont icon-sousuo4"></text>
				<input class="inputs" placeholder='搜索订单号、收货人名称、手机号' placeholder-class='placeholder' confirm-type='search' name="search"
					v-model="where.keyword" @confirm="searchSubmit"></input>
			</view>
		</view>
		<view class="nav acea-row row-around row-middle">
			<view class="item" :class="where.status == 0 ? 'on' : ''" @click="changeStatus(0)">
				待付款
			</view>
			<view class="item" :class="where.status == 1 ? 'on' : ''" @click="changeStatus(1)">
				待发货
			</view>
			<view class="item" :class="where.status == 2 ? 'on' : ''" @click="changeStatus(2)">
				待收货
			</view>
			<view class="item" :class="where.status == 3 ? 'on' : ''" @click="changeStatus(3)">
				待评价
			</view>
			<view class="item" :class="where.status == 4 ? 'on' : ''" @click="changeStatus(4)">
				已完成
			</view>
			<view class="item" :class="where.status == -3 ? 'on' : ''" @click="changeStatus(-3)">
				退款
			</view>
		</view>
		<view class="list" v-if="list.length">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="order-num acea-row row-between-wrapper" @click="toDetail(item)">
					<view>
						<view>订单号：{{ item.order_id }}</view>
						<view class="time">下单时间：{{ item.add_time }}</view>
					</view>
					<view class="state" :class="(item.refund_status==0 && where.status != 0 && item.refund.length)?'on':''">
						{{item.refund_status==1?'退款中':item.refund_status==2?'已退款':item.refund_status==3?'拒绝退款':item.status_name.status_name}}
						<text v-if="item.refund_status==0 && where.status != 0 && item.refund.length" >{{item.is_all_refund?'，退款中':'，部分退款中'}}</text>
					</view>
				</view>
				<view class="pos-order-goods" v-for="(val, key) in item._info" :key="key">
					<view class="goods acea-row row-between row-top" @click="toDetail(item)">
						<view class="picTxt acea-row row-between-wrapper">
							<view class="pictrue">
								<image :src="val.cart_info.productInfo.attrInfo?val.cart_info.productInfo.attrInfo.image:val.cart_info.productInfo.image" />
							</view>
							<view class="text acea-row row-between row-column">
								<view class="info line2">
									<text v-if="val.cart_info.is_gift == 1" class="label">[赠品]</text>
									{{ val.cart_info.productInfo.store_name }}
								</view>
								<view class="attr" v-if="val.cart_info.productInfo.attrInfo">
									{{ val.cart_info.productInfo.attrInfo.suk }}
								</view>
							</view>
						</view>
						<view class="money">
							<view class="x-money">￥{{ val.cart_info.productInfo.attrInfo?val.cart_info.productInfo.attrInfo.price:val.cart_info.productInfo.price }}</view>
							<view class="num">x{{ val.cart_info.cart_num }}</view>
						<!-- 	<view class="y-money">
								￥{{ val.cart_info.productInfo.ot_price }}
							</view> -->
							<view class="info" v-if="val.cart_info.refund_num && item._status._type !=-2">{{val.cart_info.refund_num}}件退款中</view>
						</view>
					</view>
				</view>
				<view class="public-total">
					共{{ item.total_num }}件商品，实付款
					<span class="money">￥{{ item.pay_price }}</span> ( 邮费 ¥{{
	            item.pay_postage
	          }}
					)
				</view>
				<view class="operation acea-row row-between-wrapper">
					<view class="more">
						<!--            <view class="iconfont icon-gengduo" @click="more(index)"></view>-->
						<!--            <view class="order" v-show="current === index">-->
						<!--              <view class="items">-->
						<!--                {{ where.status > 0 ? "删除" : "取消" }}订单-->
						<!--              </view>-->
						<!--              <view class="arrow"></view>-->
						<!--            </view>-->
					</view>
					<view class="acea-row row-middle">
						<view class="bnt" :class="openErp?'on':''" @click="modify(item, 0)" v-if="where.status == 0">
							一键改价
						</view>
						<view class="bnt" @click="modify(item, 1)">订单备注</view>
<!-- 						<view class="bnt" @click="modify(item, 0)" v-if="where.status == -3 && item.refund_status === 1">
							立即退款
						</view> -->
						<view class="bnt" :class="openErp?'on':''" @click="modify(item, 2, 1)" v-if="(item.refund_type == 0 || item.refund_type == 1 || item.refund_type == 5 ) && where.status == -3 && parseFloat(item.pay_price) >= 0">
							立即退款
						</view>
						<view class="bnt" :class="openErp?'on':''" @click="modify(item, 2, 0)" v-if="where.status == -3 && item.refund_type == 2">同意退货</view>
						<view class="wait" :class="openErp?'on':''" v-if="where.status == -3 && item.refund_type == 4">待用户发货</view>
						<view class="bnt cancel" :class="openErp?'on':''" v-if="item.pay_type === 'offline' && item.paid === 0" @click="offlinePay(item)">
							确认付款
						</view>
						<view class="bnt" :class="openErp?'on':''" v-if="where.status == 1 && item.shipping_type === 1 && (item.pinkStatus === null || item.pinkStatus === 2)" @click="goDelivery(item)">去发货
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="nothing">
			<image v-if="!loading" :src="imgHost + '/statics/images/no-thing.png'" alt="">
			<view v-if="!loading">暂无订单</view>
		</view>
		<Loading :loaded="loaded" :loading="loading"></Loading>
		<PriceChange :change="change" :orderInfo="orderInfo" :isRefund="isRefund" v-on:statusChange="statusChange($event)" v-on:closechange="changeclose($event)" v-on:savePrice="savePrice"
		 :status="status"></PriceChange>
	</view>
</template>

<script>
	import {
		getAdminOrderList,
		setAdminOrderPrice,
		setAdminOrderRemark,
		setAdminRefundRemark,
		setOfflinePay,
		setOrderRefund,
		orderRefundAgree,
		adminRefundList
	} from "@/api/admin";
	import { erpConfig } from "@/api/esp.js";
	import Loading from '@/components/Loading/index'
	import PriceChange from '../components/PriceChange/index.vue'
	import { isMoney } from '@/utils/validate.js';
	import {HTTP_REQUEST_URL} from '@/config/app';
	export default {
		name: "AdminOrderList",
		components: {
			Loading,
			PriceChange
		},
		data() {
			return {
				openErp:false,
				current: "",
				change: false,
				types: 0,
				where: {
					page: 1,
					limit: 10,
					status: 0,
					keyword:''
				},
				list: [],
				loaded: false,
				loading: false,
				orderInfo: {},
				status: "",
				isRefund:0, //1是仅退款;0是退货退款
				imgHost:HTTP_REQUEST_URL
			};
		},
		onLoad(option) {
			let type = option.types;
			this.where.status = type;
			this.getErpConfig();
		},
		onShow(){
			this.init();
		},
		methods: {
			statusChange(e){
				this.status = e;
			},
			goDelivery(item){
				if(this.openErp) return
				uni.navigateTo({
					url:'/pages/admin/delivery/index?id='+item.order_id+'&listId='+item.id+'&totalNum='+item.total_num+'&orderStatus='+item._status+'&comeType=1&productType='+item.product_type
				})
			},
			getErpConfig(){
				erpConfig().then(res=>{
					this.openErp = res.data.open_erp;
				}).catch(err=>{
					this.$util.Tips({
						title: err
					})
				})
			},
			// 获取数据
			getIndex: function() {
				let that = this;
				if (that.loading || that.loaded) return;
				that.loading = true;
				let obj = '';
				if(this.where.status == -3){
					obj = adminRefundList(that.where);
				}else{
					obj = getAdminOrderList(that.where);
				}
				obj.then(
					res => {
						that.loading = false;
						that.loaded = res.data.length < that.where.limit;
						that.list.push.apply(that.list, res.data);
						that.where.page = that.where.page + 1;
					},
					err => {
						that.$util.Tips({
							title: err
						})
					}
				);
			},
			// 初始化
			init: function() {
				this.list = [];
				this.where.page = 1;
				this.loaded = false;
				this.loading = false;
				this.getIndex();
				this.current = "";
			},
			searchSubmit(){
				this.init();
			},
			// 导航切换
			changeStatus(val) {
				if (this.where.status != val) {
					this.where.status = val;
					this.init();
				}
			},
			// 商品操作
			modify: function(item, status,type) {
				if(this.openErp && status !=1) return
				this.change = true;
				this.status = status.toString();
				this.orderInfo = item;
				if(status==2){
					this.isRefund = type
				}
			},
			changeclose: function(msg) {
				this.change = msg;
			},
			objOrderRefund(data){
				let that = this;
				setOrderRefund(data).then(
					res => {
						that.change = false;
						that.$util.Tips({title: res.msg});
						that.init();
					},
					err => {
						that.change = false;
						that.$util.Tips({title: err});
					}
				);
			},
			async savePrice(opt) {
				let that = this,
					data = {},
					price = opt.price,
					refund_price = opt.refund_price,
					refund_status = that.orderInfo.refund_status,
					remark = opt.remark;
				  data.order_id = that.orderInfo.order_id;
				if (that.status == 0) {
					if(!isMoney(price)){
						return that.$util.Tips({title: '请输入正确的金额'});
					}
					data.price = price;
					setAdminOrderPrice(data).then(
						res => {
							that.change = false;
							that.$util.Tips({
								title:'改价成功',
								icon:'success'
							})
							that.init();
						},
						err => {
							that.change = false;
							that.$util.Tips({
								title:'改价失败',
								icon:'none'
							})
						}
					);
				} else if (that.status == 2) {
					if(this.isRefund){
						if(!isMoney(refund_price)){
							return that.$util.Tips({title: '请输入正确的金额'});
						}
						data.price = refund_price;
						data.type = opt.type;
						this.objOrderRefund(data);
						// setOrderRefund(data).then(
						// 	res => {
						// 		that.change = false;
						// 		that.$util.Tips({title: res.msg});
						// 		that.init();
						// 	},
						// 	err => {
						// 		that.change = false;
						// 		that.$util.Tips({title: err});
						// 	}
						// );
					}else{
						if(opt.type == 1){
							orderRefundAgree(this.orderInfo.id).then(res=>{
								that.change = false;
								that.$util.Tips({
									title: res.msg
								});
								that.init();
							}).catch(err=>{
								that.change = false;
								that.$util.Tips({
									title: err
								});
							})
						}
						// else{
						// 	data.type = opt.type;
						// 	data.refuse_reason = opt.refuse_reason;
						// 	this.objOrderRefund(data);
						// }
					}
				} else if(that.status == 8){
					data.type = opt.type;
					data.refuse_reason = opt.refuse_reason;
					this.objOrderRefund(data);
				} else {
					if(!remark){
						return this.$util.Tips({
							title:'请输入备注'
						})
					}
					data.remark = remark;
					let obj = '';
					if(that.where.status == -3){
						obj = setAdminRefundRemark(data);
					}else{
						obj = setAdminOrderRemark(data);
					}
					obj.then(
						res => {
							that.change = false;
							this.$util.Tips({
								title:res.msg,
								icon:'success'
							})
							that.init();
						},
						err => {
							that.change = false;
							that.$util.Tips({title: err});
						}
					);
				}
			},
			toDetail(item){
				uni.navigateTo({
					url:`/pages/admin/orderDetail/index?id=${item.order_id}&types=${this.where.status}`
				})
			},
			offlinePay: function(item) {
				    if(this.openErp) return
			      setOfflinePay({ order_id: item.order_id }).then(
			        res => {
			          this.$util.Tips({title:res.msg,icon:"success"});
			          this.init();
			        },
			        error => {
			          this.$util.Tips(error);
			        }
			      );
			    }
		},
		onReachBottom() {
			this.getIndex()
		}
	}
</script>

<style lang="scss">
	.pos-order-list{
		padding-bottom: calc(0rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(0rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}
	.searchCon{
		position: relative;
		z-index: 9;
		background-color: #fff;
		height: 88rpx;
		width: 100%;
		border-bottom: 1px solid #EBEEF5;
		.search{
			width: 690rpx;
			height: 64rpx;
			background: #F5F5F5;
			border-radius: 12rpx;
			padding: 0 24rpx;
			.iconfont{
				color: #999999;
				margin-right: 12rpx;
			}
			.inputs{
				width: 590rpx;
				font-size: 26rpx;
			}
			.placeholder{
				font-size: 26rpx;
				color: #ccc;
			}
		}
	}
	.pos-order-list .nav {
		width: 100%;
		height: 96upx;
		background-color: #fff;
		font-size: 30upx;
		color: #282828;
		position:sticky;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.pos-order-list .nav .item.on {
		color: #2291f8;
	}

	.pos-order-list .list {
		margin-top: 24upx;
	}
	
	.pos-order-list .nothing{
		margin-top: 120upx;
		text-align: center;
		color: #cfcfcf;
	}

	.pos-order-list .list .item {
		background-color: #fff;
		width: 100%;
	}

	.pos-order-list .list .item~.item {
		margin-top: 24upx;
	}

	.pos-order-list .list .item .order-num {
		height: 124upx;
		border-bottom: 1px solid #eee;
		font-size: 30upx;
		font-weight: bold;
		color: #282828;
		padding: 0 30upx;
	}
	
	.pos-order-list .list .item .order-num .state{
		color: #2291f8;
		font-weight: normal;
	}
	
	.pos-order-list .list .item .order-num .state.on{
		font-size: 24rpx;
		width: 150rpx;
		text-align: right;
	}

	.pos-order-list .list .item .order-num .time {
		font-size: 26upx;
		font-weight: normal;
		color: #999;
	}

	.pos-order-list .list .item .operation {
		padding: 20upx 30upx;
		margin-top: 3upx;
	}

	.pos-order-list .list .item .operation .more {
		position: relative;
	}

	.pos-order-list .list .item .operation .icon-gengduo {
		font-size: 50upx;
		color: #aaa;
	}

	.pos-order-list .list .item .operation .order .arrow {
		width: 0;
		height: 0;
		border-left: 11upx solid transparent;
		border-right: 11upx solid transparent;
		border-top: 20upx solid #e5e5e5;
		position: absolute;
		left: 15upx;
		bottom: -18upx;
	}

	.pos-order-list .list .item .operation .order .arrow:before {
		content: '';
		width: 0;
		height: 0;
		border-left: 7upx solid transparent;
		border-right: 7upx solid transparent;
		border-top: 20upx solid #fff;
		position: absolute;
		left: -7upx;
		bottom: 0;
	}

	.pos-order-list .list .item .operation .order {
		width: 200upx;
		background-color: #fff;
		border: 1px solid #eee;
		border-radius: 10upx;
		position: absolute;
		top: -100upx;
		z-index: 9;
	}

	.pos-order-list .list .item .operation .order .items {
		height: 77upx;
		line-height: 77upx;
		text-align: center;
	}

	.pos-order-list .list .item .operation .order .items~.items {
		border-top: 1px solid #f5f5f5;
	}

	.pos-order-list .list .item .operation .bnt {
		font-size: 28upx;
		color: #5c5c5c;
		width: 170upx;
		height: 60upx;
		border-radius: 30upx;
		border: 1px solid #bbb;
		text-align: center;
		line-height: 60upx;
		&.on{
			color: #c5c8ce!important;
			background-color: #f7f7f7!important;
			border-color: #dcdee2!important;
		}
	}

	.pos-order-list .list .item .operation .bnt~.bnt {
		margin-left: 14upx;
	}
	
	.pos-order-list .list .item .operation .wait{
		margin-left: 30rpx;
	}

	.pos-order-goods {
		padding: 0 30upx;
		background-color: #fff;
	}

	.pos-order-goods .goods {
		padding: 28rpx 0;
	}

	.pos-order-goods .goods~.goods {
		border-top: 1px dashed #e5e5e5;
	}

	.pos-order-goods .goods .picTxt {
		width: 515upx;
	}

	.pos-order-goods .goods .picTxt .pictrue {
		width: 130upx;
		height: 130upx;
	}

	.pos-order-goods .goods .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6upx;
	}

	.pos-order-goods .goods .picTxt .text {
		width: 365upx;
		height: 130upx;
	}

	.pos-order-goods .goods .picTxt .text .info {
		width: 100%;
		font-size: 28upx;
		color: #282828;
	}
	
	.pos-order-goods .goods .picTxt .text .info .label{
		color: #ff4c3c;
	}

	.pos-order-goods .goods .picTxt .text .attr {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 24upx;
		color: #999;
	}

	.pos-order-goods .goods .money {
		width: 164upx;
		text-align: right;
		font-size: 28upx;
	}
	
	.pos-order-goods .goods .money .info{
		margin-top: 18rpx;
		font-size: 24rpx;
	}

	.pos-order-goods .goods .money .x-money {
		color: #282828;
	}

	.pos-order-goods .goods .money .num {
		color: #ff9600;
		margin: 5upx 0;
	}

	.pos-order-goods .goods .money .y-money {
		color: #999;
		text-decoration: line-through;
	}

	.public-total {
		font-size: 28upx;
		color: #282828;
		border-top: 1px solid #eee;
		height: 92upx;
		line-height: 92upx;
		text-align: right;
		padding: 0 30upx;
		background-color: #fff;
	}

	.public-total .money {
		color: #ff4c3c;
	}
</style>