H5_module/merchant/search.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" @click="searchClick()">搜索</view>
				</view>
			</view>
			<!-- <span>搜索</span> -->
		</view>
		<!-- <view class="nodata" v-if="ishow">
			<image src="/static/images/empty_dd.png" />
			<view>还没有订单哦</view>
		</view> -->
		<ul class="list" v-if="pageList && pageList.length > 0">
			<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 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>
		<view v-else class="nodata">
			<image src="../merchant/static/images/empty.png"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>
<script>
// import cache from '../datas/cache'
const req = require('../utils/request');
export default {
	data: () => ({
		pageList: [],
		searchTitle: '',
		ishow: false,
		params: {
			page: 0,
			limit: 10
		},
		merchant: {},
		userInfo: {},
		isLoad: true,
		merchantId: ''
	}),
	onLoad(opt) {
		this.userInfo = req.getStorage('userInfo');
		this.searchTitle = opt.searchValue;
		this.merchantId = opt.merchantId;
		this.isPrinting();
		this.confirm(true);
	},
	onShow() {},
	onReachBottom() {
		this.params.page++;
		this.confirm(false);
	},
	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;
			});
		},
		//是否为自己发货
		isMyDeliver(item) {
			return item.supplierId == this.userInfo.supplierId;
		},

		// 搜索订单 获取用户输入的内容
		onSearch(e) {
			this.searchTitle = e.detail.value;
			this.isLoad = true;
			console.log(this.searchTitle);
		},
		// 查看订单详情
		toOrederDel(id) {
			this.jumpUrl('show?id=' + id + '&merchantId=' + this.merchant.id);
		},

		searchClick() {
			this.isLoad = true;
			this.params.page = 0;
			this.confirm(true);
		},
		// 搜索订单
		confirm(isShowLoad) {
			let that = this;
			let value = this.searchTitle;
			let form = this.params;

			form.search = value;
			form.merchantId = this.merchantId;
			if (!this.isLoad) return false;
			this.isLoad = false;
			req.getRequest(
				'/api/order/merchant/list',
				form,
				data => {
					if (data && data.length == 10) {
						this.isLoad = true;
					}
					if (that.params.page > 0) {
						data = that.pageList.concat(data);
					}
					this.pageList = data;
				},
				isShowLoad
			);
		},
		//清除输入框
		clearInput() {
			this.searchTitle = '';
		},

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

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

		// 确认发货
		deliverGoods(id, merchantId, orderType) {
			req.postRequest(
				'/api/order/deliverExtend',
				{
					id: id
				},
				res => {
					if (res && res.length > 1) {
						this.jumpUrl('deliverExtend?id=' + id + '&merchantId=' + merchantId + '&orderType=' + orderType);
					}
					if (res && res.length <= 1) {
						this.jumpUrl('express?id=' + id + '&merchantId=' + merchantId + '&orderType=' + orderType);
					}
				},
				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 = 6;
					this.pageList[index].stateName = '已签收';
				},
				true
			);
		}
	}
};
</script>
<style scoped>
@import './static/css/main.css';
.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;
}

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

.list {
	padding: 0.2rem 0.2rem 0;
}
</style>