H5_module/merchant/order.vue

<template>
	<view>
		<view class="search-box">
			<view class="ssbot dflex">
				<view class="searchbot dflex">
					<image src="../merchant/static/images/ssico.png"></image>
					<input placeholder="请输入订单号、客户手机号后4位" class="flex" :value="searchTitle" @input="onSearch" @confirm="confirm" confirm-type="search" />
					<!-- <image src="/static/images/clear.png" @tap="clearInput" v-if="searchTitle != ''"></image> -->
					<view class="sousuo" @tap="confirm">搜索</view>
				</view>
			</view>
			<!-- <span>搜索</span> -->
		</view>
		<view class="tab">
			<view v-for="(item, index) in TabList" :key="index" :class="'li ' + (item.active ? 'active' : '')" @click="switchTab(index)">{{ item.label }}</view>
		</view>
		<view class="tabcon">
			<block v-if="pageList && pageList.length > 0">
				<ul class="list" v-if="tabIndex == 3">
					<li v-for="(item, index) in pageList" :key="index" @click="jumpUrl('refundDetail?id=' + item.id)">
						<view class="ddbh dflex" @click="toOrederDel(item.id)">
							<view class="ordid">{{ item.orderId }}</view>
						</view>
						<view class="lis" v-for="(pro, ind) in item.productList" :key="ind">
							<image :src="pro.image" class="cimage" />
							<view class="zhinfo">
								<view class="zhtit" v-text="pro.title"></view>
								<view v-if="pro.specsList && pro.specsList.length > 0" class="guige">
									规格：
									<text v-for="(itemGuige, index) in pro.specsList" :key="index" class="guige" decode="true">{{ itemGuige.value }}&nbsp;</text>
								</view>
								<view class="jiage">
									<view class="price">
										<span>￥</span>
										{{ pro.money }}
									</view>
									<view class="num">×{{ pro.quantity }}</view>
								</view>
							</view>
						</view>
						<view class="total">
							<view>共{{ item.quantity }}件</view>
							<view>
								总计：
								<span>￥{{ item.refundMoney }}</span>
							</view>
						</view>
						<view class="status">
							<span class="ordidss flex">{{ item.refundStateName }}</span>
							<!-- <view class="sta-btn" v-if="item.refundState > 29 && item.refundState < 41 && item.refundState != 32">审核</view> -->
						</view>
					</li>
				</ul>
				<ul class="list" v-else>
					<li v-for="(item, index) in pageList" :key="index">
						<view class="ddbh dflex" @click="toOrederDel(item.id)">
							<view class="ordid">
								<image src="../merchant/static/images/ziti.png" class="ziti" v-if="item.mode == 1" />
								<image src="../merchant/static/images/youji.png" class="youji" v-if="item.mode == 2" />
								<image src="../merchant/static/images/jishida.png" class="jsd" v-if="item.mode == 3" />
								{{ item.id }}
							</view>
							<view class="flex dflex right ddddd">
								<!-- <block v-if="item.state == 4 && (item.orderType == 17 || item.orderType == 18)"></block>
								<block v-else>
									<view class="th-code red" v-if="item.mode === 1">
										提货码：
										<text>{{ item.code }}</text>
									</view>
								</block> -->
								<image src="../merchant/static/images/jishidaioc.png" class="type" v-if="item.orderType === 5" />
								<image src="../merchant/static/images/tuangou.png" class="type" v-if="item.orderType === 2" />
								<image src="../merchant/static/images/pingtuan.png" class="type" v-if="item.orderType == 4" />
								<image src="../merchant/static/images/seckill.png" class="type" v-if="item.orderType == 3" />
								<image src="../merchant/static/images/newbornZone.png" class="type" v-if="item.orderType == 6" />
								<image src="../merchant/static/images/kanjia.png" class="type" v-if="item.orderType == 7" />
							</view>
						</view>
						<view class="lis" v-for="(pro, ind) in item.products" :key="ind" @click="toOrederDel(item.id)">
							<image :src="pro.pic" class="cimage" />
							<view class="zhinfo">
								<view class="zhtit" v-text="pro.title"></view>
								<view v-if="pro.propertiesList && pro.propertiesList.length > 0" class="guige">
									规格：
									<text v-for="(itemGuige, index) in pro.propertiesList" :key="index" class="guige" decode="true">{{ itemGuige.value }}&nbsp;</text>
								</view>
								<view class="jiage">
									<view class="price">
										<span>￥</span>
										{{ pro.salePrice }}
									</view>
									<view class="num">×{{ pro.quantity }}</view>
								</view>
							</view>
						</view>
						<view class="total" @click="toOrederDel(item.id)">
							<view>共{{ item.count }}件</view>
							<view>
								总计：
								<span>￥{{ item.money }}</span>
							</view>
						</view>
						<view class="status">
							<block v-if="item.state == 4 && (item.orderType == 17 || item.orderType == 18)"><view class="flex">待核销</view></block>
							<span v-else class="ordidss flex">{{ item.stateName }}</span>
							<view class="sta-btn" v-if="merchant.printer != 0 && (item.state == 3 || item.state == 4)" @click="orderPrinting(item.id, index)">打印小票</view>
							<!-- <view class="sta-btn" v-if="item.state > 29 && item.state < 41 && item.state != 32" @click="jumpUrl('refund?id=' + item.id)">审核</view> -->
							<view class="sta-btn" v-if="item.state == 3" @click="deliverGoods(item.id, merchantId, item.orderType)">确认发货</view>
							<block v-if="item.orderType != 17 && item.orderType != 18">
							<view class="sta-btn" v-if="item.state === 4" @click="send(item.id)">通知取件</view>
							<view class="sta-btn" v-if="item.state === 4" @click="deliver(item.id, index)">提货</view>
							</block>
							<block v-else>
							<view class="sta-btn" v-if="item.state === 4" @click="deliver(item.id, index)">核销</view>
							</block>
						</view>
					</li>
				</ul>
			</block>
			<view v-else class="nodata">
				<image src="../merchant/static/images/empty.png"></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
const req = require('../utils/request');
export default {
	data() {
		return {
			TabList: [
				{
					label: '待发货',
					state: 2,
					active: false
				},
				{
					label: '待核销',
					state: 4,
					active: false
				},
				{
					label: '待提货',
					state: 3,
					active: false
				},
				{
					label: '售后',
					state: 7,
					active: false
				},
				{
					label: '全部',
					active: true
				}
			],
			merchant: {},
			tabIndex: '',
			active: 3,
			pageList: [],
			ishow: false,
			id: '',
			index: 0,
			searchTitle: '',
			form: {
				page: 0,
				limit: 10
			},
			isLoad: true,
			userInfo: {},
			type: 1,
			merchantId: ''
		};
	},
	onLoad(opt) {
		this.active = opt.tabIndex;
		this.merchantId = opt.merchantId;
		this.isPrinting();
		this.switchTab(this.active);
	},
	onReachBottom() {
		this.form.page++;
		this.getOrderlist();
	},
	methods: {
		jumpUrl(url) {
			uni.navigateTo({
				url: url
			});
		},
		// s是否开启云打印
		isPrinting() {
			let fromP = {};
			fromP.id = this.merchantId;
			req.getRequest('/api/merchant/detail', fromP, data => {
				this.merchant = data;
			});
		},

		// 查看订单详情
		toOrederDel(id) {
			this.jumpUrl('show?id=' + id + '&merchantId=' + this.merchant.id);
		},

		// 确认发货
		deliverGoods(id, merchantId, orderType) {
			this.jumpUrl('expressList/index?id=' + id + '&merchantId=' + merchantId + '&orderType=' + orderType);
		},

		// 打印
		orderPrinting(id, index) {
			req.getRequest(
				'/api/merchant/printOrderInfo',
				id,
				data => {
					req.msg(data.msg);
				},
				true
			);
		},

		// 通知取件
		send(id) {
			req.getRequest(
				'/api/wxmes/send',
				{
					orderId: id,
					bsusinessType: 11
				},
				data => {
					req.msg('通知成功');
				},
				true
			);
		},
		// 已提货
		deliver(id, index) {
			req.postRequest(
				'/api/order/confirm',
				{
					id: id,
					mode: '1'
				},
				data => {
					this.pageList[index].state = 7;
					this.pageList[index].stateName = '已核销';
				},
				true
			);
		},

		// 获取订单列表
		getOrderlist() {
			if (!this.isLoad) return false;
			this.isLoad = false;
			let fromP = {
				merchantId: this.merchantId,
				page: this.form.page,
				limit: this.form.limit
			};
			let that = this;
			if (this.tabIndex == 3) {
				//售后
				this.getRefundList(fromP);
			} else {
				fromP.typeState = this.TabList[this.tabIndex].state;
				//正常其它订单
				this.getOrderlists(fromP);
			}
		},
		getRefundList(fromP) {
			req.getRequest('/api/v3/store/refund/page', fromP, data => {
				if (data.list && data.list.length == 10) {
					this.isLoad = true;
				}
				if (this.form.page > 0) {
					data.list = this.pageList.concat(data.list);
				}
				this.pageList = data.list;
			});
		},
		getOrderlists(fromP) {
			req.getRequest('/api/order/merchant/list', fromP, data => {
				if (data && data.length == 10) {
					this.isLoad = true;
				}
				if (this.form.page > 0) {
					data = this.pageList.concat(data);
				}
				this.pageList = data;
			});
		},
		// tab栏切换
		switchTab(tabIndex) {
			this.tabIndex = tabIndex;
			let def = this.TabList.findIndex(it => it.active);
			this.TabList[def].active = false;
			this.TabList[this.tabIndex].active = true;
			this.isLoad = true;
			this.form.page = 1;
			this.pageList = [];
			this.form.state = this.TabList[this.tabIndex].state;
			this.getOrderlist();
		},
		// 搜索订单 获取用户输入的内容
		onSearch(e) {
			console.log(e.detail.value);
			this.searchTitle = e.detail.value;
		},
		//清除输入框
		clearInput() {
			this.searchTitle = '';
		},
		// 搜索订单
		confirm() {
			let value = this.searchTitle;
			uni.navigateTo({
				url: 'search?searchValue=' + value + '&merchantId=' + this.merchant.id
			});
		}
	}
};
</script>
<style scoped>
@import './static/css/main.css';
.noguige {
	height: 15px;
}

.ssbot {
	padding: 5px 10px 7px;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.ssbot .searchbot {
	background: #fff;
	height: 33px;
	border-radius: 15px;
	padding: 0 0 0 10px;
	font-size: 13px;
	color: #666;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
}
.searchbot input {
	font-size: 28rpx !important;
	color: #333;
}

.searchbot image {
	width: 15px;
	height: 15px;
	margin-right: 6px;
}

.expressinfo {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.pad20 {
	padding: 20px;
}

.refundFalseRes {
	text-align: right;
}

.van-button:not(:last-child) {
	margin-right: 5px;
}

.tab {
	padding: 0 17px;
	display: flex;
	display: -webkit-flex;
	height: 50px;
	background: #fff;
	line-height: 50px;
}

.tab .li {
	font-size: 14px;
	color: #999;
	width: 25%;
	text-align: center;
	position: relative;
}

.tab .li.active {
	color: #333;
}

.tab .li.active::after {
	content: '';
	display: block;
	width: 49rpx;
	height: 6rpx;
	background: #0065ac !important;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
}
</style>