pika_shangjia/merchant/index.vue

<template>
	<view v-if="isShowView">
		<view class="top">
			<!-- 背景 -->
			<image src="../merchant/static/images/bg.png" alt class="bg" />
			<!-- 用戶信息 -->
			<view class="minec">
				<image :src="merchant.logo" v-if="merchant.logo" mode="aspectFill" class="user" />
				<image v-else src="../merchant/static/images/user.png" mode="aspectFill" class="user" />
				<view class="mines">
					<view class="mines_top">
						<view class="title">{{ merchant.title }}</view>
					</view>
					<view class="edu">编号：{{ merchant.id }}</view>
				</view>
			</view>
			<!-- 搜索 -->
			<!-- <view class="ssbox">
        <view class="search">
          <image src="../../static/images/shousuo.png" class="shousuo" />
          <input placeholder="搜索您想要找的门店" placeholder-class="placeholder" class="flex" />
          <image src="../../static/images/saoma.png" class="saoma" @click="Scan" />
        </view>
      </view>-->
			<!-- right-icon="/static/images/saoma.png" -->
			<view class="ssbox dflex">
				<view class="search 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="../merchant/static/images/clear.png" @tap="clearInput" v-if="searchTitle != ''"></image>
				</view>
				<!-- <view class="sousuo" @tap="confirmSearch">搜索</view> -->
			</view>
		</view>
		<view class="data">
			<!-- 订单 -->
			<view class="order">
				<!-- <view url="/mine/order/order" hover-class="none" class="tits dflex"> -->
				<view @click="toOrderList(3)" class="tits dflex">
					<view class="flex">我的订单</view>
					查看全部
					<image src="../merchant/static/images/drop-right.png" class="rico"></image>
				</view>
				<!-- </view> -->
				<view class="list1">
					<view class="li" @click="toOrderList(0)">
						<view class="cont">
							<!-- <view class="shuliang" v-text="statistics.t3"></view> -->
							<!-- <van-badge :content="statistics.t3"> -->
							<image src="../merchant/static/images/deliveredOrder.png" class="orderimage" />
							<!-- </van-badge> -->
							<text class="dots" v-if="statistics && statistics.t4 > 0">{{ statistics.t4 }}</text>
							<view class="start">待自提</view>
						</view>
					</view>
					<view class="li" @click="toOrderList(1)">
						<view class="cont">
							<!-- <van-badge :content="statistics.t12"> -->
							<image src="../merchant/static/images/activityOrder.png" class="orderimage" />
							<!-- </van-badge> -->
							<text class="dots" v-if="statistics && statistics.t3 > 0">{{ statistics.t3 }}</text>
							<view class="start">待发货</view>
						</view>
					</view>
					<view class="li" @click="toOrderList(2)">
						<view class="">
							<!-- <van-badge :content="statistics.t12"> -->
							<image src="../merchant/static/images/ddico0.png" class="orderimage" />
							<!-- </van-badge> -->
							<text class="dots" v-if="statistics && statistics.t12 > 0">{{ statistics.t12 }}</text>
							<view class="start">退款/售后</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="lists">
			<ul class="list">
				<li v-for="(item, index) in pageLists" :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">
							<view class="th-code red" v-if="item.mode === 1">
								提货码：
								<text>{{ item.code }}</text>
							</view>
							<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">
						<span 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('refundDetail?id=' + item.id)">审核</view> -->
						<view class="sta-btn" v-if="item.state == 3" @click="deliverGoods(item.id, merchant.id, item.orderType)">确认发货</view>
						<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>
					</view>
				</li>
			</ul>
		</view>
		<div class="datas">
			<h3 class="tit">经营简报</h3>
			<div class="dflex">
				<ul>
					<li>
						<span>{{ statistics.dTotal ? statistics.dTotal : '0' }}/{{ statistics.yTotal ? statistics.yTotal : '0' }}</span>
						今日订单/昨日订单
					</li>
					<li>
						<span>{{ statistics.wTotal ? statistics.wTotal : '0' }}</span>
						本周订单
					</li>
					<li>
						<span>{{ statistics.mTotal ? statistics.mTotal : '0' }}</span>
						本月订单
					</li>
				</ul>
				<ul>
					<li>
						<span>{{ statistics.dMoney ? statistics.dMoney : '0' }}/{{ statistics.yMoney ? statistics.yMoney : '0' }}</span>
						今日营业额/昨日营业额
					</li>
					<li>
						<span>{{ statistics.wMoney ? statistics.wMoney : '0' }}</span>
						本周营业额
					</li>
					<li>
						<span>{{ statistics.mMoney ? statistics.mMoney : '0' }}</span>
						本月营业额
					</li>
				</ul>
			</div>
		</div>
	</view>
</template>

<script>
const req = require('../utils/request');
export default {
	// inject: ['getMerchant', 'getToken'],
	data() {
		return {
			searchTitle: '',
			appId: '',
			token: '',
			isShowView: false,
			statistics: {},
			merchant: '',
			form: {
				page: 1,
				limit: 100,
				merchantId: null,
				isToDay: false
			},
			isLoad: true,
			isFrist: true,
			pageLists: ''
		};
	},
	onLoad(opt) {
		this.getMy();
	},
	onShow() {
		if (!this.isFrist) {
			this.form.page = 1;
			this.isLoad = true;
			this.getOrderList();
		}
	},

	methods: {
		jumpUrl(url) {
			uni.navigateTo({
				url: url
			});
		},
		getMy() {
			req.getRequest('/api/user/my', {}, resp => {
				if (resp.listShopBase && resp.listShopBase.length > 0) {
					this.form.merchantId = resp.listShopBase[0].id;
				} else if (resp.listMerchant && resp.listMerchant.length > 0) {
					this.form.merchantId = resp.listMerchant[0].id;
				} else if (resp.merchantId) {
					this.form.merchantId = resp.merchantId;
				}
				this.merchantDetail();
				this.getstatistics(resp);
				this.getOrderList();
			});
		},

		// 店铺详情
		merchantDetail() {
			let fromP = {};
			fromP.id = this.form.merchantId;
			req.getRequest('/api/merchant/detail', fromP, data => {
				this.merchant = data;
			});
		},

		// 门店统计
		getstatistics(data) {
			let from = {};
			if (data.listShopBase && data.listShopBase != null && data.listShopBase.length > 0) {
				from.shopId = data.listShopBase[0].id;
			}

			if (data.listMerchant && data.listMerchant != null && data.listMerchant.length > 0 && data.listShopBase.length < 1) {
				from.merchantId = data.listMerchant[0].id;
			}

			req.getRequest(
				'/api/order/statistics',
				from,
				data => {
					this.statistics = data;
					this.isShowView = true;
				},
				this.isFrist
			);
		},

		// 获取订单列表
		getOrderList() {
			if (!this.isLoad) {
				return false;
			}
			this.isLoad = false;
			let form = this.form;
			req.getRequest(
				'/api/order/merchant/list',
				form,
				data => {
					if (this.form.page == 1) {
						this.pageLists = [];
					}
					data = data.filter(
						ele => ele.state == 3 || ele.state == 4 || ele.state == 30 || ele.state == 31 || ele.state == 36 || ele.state == 39 || ele.state == 40 || ele.state == 36
					);
					this.isLoad = true;
					if (data && data.length > 0) {
						this.pageLists = data.slice(0, 3);
					}
					this.isShowView = true;
					this.isFrist = false;
				},
				this.isFrist
			);
		},
		// 搜索订单 获取用户输入的内容
		onSearch(e) {
			this.searchTitle = e.detail.value;
		},
		//清除输入框
		clearInput() {
			this.searchTitle = '';
		},

		// 搜索订单
		confirm() {
			let value = this.searchTitle;
			uni.navigateTo({
				url: 'search?searchValue=' + value + '&merchantId=' + this.merchant.id
			});
		},
		// 查看订单详情
		toOrederDel(id) {
			this.jumpUrl('show?id=' + id + '&merchantId=' + this.merchant.id);
		},
		// 跳转订单列表
		toOrderList(index) {
			uni.navigateTo({
				url: 'order?merchantId=' + this.merchant.id + '&tabIndex=' + index
			});
		},
		// 打印
		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';
.expressinfo {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

/* #main {
		padding: 15px
	} */

.histogram {
	margin: 0.2rem;
	background: #fff;
	border-radius: 7px;
	position: relative;
}

.histogramDay {
	position: absolute;
	right: 15px;
	top: 14px;
	z-index: 1;
}

.histogramDay image {
	width: 9px;
	height: 6px;
	margin: 0 0 2px 0;
}

.orderimage {
	width: 25px;
	height: 26px;
	margin-bottom: 10px;
}

.rico {
	width: 6px;
	height: 9px;
	margin-left: 5px;
	margin-bottom: 2px;
}

.tits {
	font-size: 12px;
	color: #999;
	align-items: center;
	height: 40px;
	line-height: 40px;
	position: relative;
	z-index: 2;
}

.tits view {
	font-size: 14px;
	color: #333;
	font-weight: bold;
}

.pad20 {
	padding: 20px;
}

.refundFalseRes {
	text-align: right;
}

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

.code {
	width: 16px;
	margin: 0 0 0 5px;
}

.tips {
	position: fixed;
	background: rgba(0, 0, 0, 0.6);
	left: 0;
	right: 0;
	height: 40px;
	line-height: 40px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	z-index: 50;
	justify-content: center;
}

.wxtips {
	flex: 0.8;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.towx {
	flex: 0.2;
}

.van-search {
	background-color: rgba(255, 255, 255, 0) !important;
}
</style>
<style>
.loginout {
	background: #fff;
	width: 140rpx;
	font-size: 24rpx;
	height: 60rpx;
	line-height: 60rpx;
	border-radius: 30rpx;
	text-align: center;
	color: #1678ff;
}
.dots {
	display: block;
	height: 15px;
	border-radius: 15px;
	padding: 0 4px;
	font-size: 12px;
	color: #fff;
	line-height: 15px;
	background: #f51a1a;
	min-width: 15px;
	box-sizing: border-box;
	text-align: center;
	position: absolute;
	top: 12px;
	right: 36%;
}

.van-popover__action {
	width: 100% !important;
	height: 100% !important;
	padding: 10px 16px !important;
}

.list1 .li .start {
	color: #2f3440 !important;
}

.red {
	color: #f51a1a;
}

.van-popover {
	z-index: 1 !important;
}

.van-tabbar {
	z-index: 2 !important;
}
.search input {
	font-size: 28rpx !important;
	color: #333;
}
</style>