pika_shangjia/pages/myStore/myStore.vue

<template>
	<view style="overflow: hidden;">
		<!-- 搜索 -->
		<view>
			<view class="search-box ddflex">
				<image class="search-icon" src="../../static/images/ssico.png"></image>
				<input v-model="searchValue" confirm-type="search" @confirm="searchFn" class="fflex" placeholder="请输入商家名称或电话"/>
				<view class="search-btn" @click="searchFn">搜索</view>
			</view>
		</view>
		
		<!-- 图表统计 -->
		<view class="echart-box">
			<view class="sssb-box ddflex">
				<view class="sssb-item">
					<view class="sssb-label">商家总数</view>
					<view class="sssb-data sssb-color">{{statisticData.merchantCount?statisticData.merchantCount:0}}</view>
				</view>
				<view class="sssb-line"></view>
				<view class="sssb-item">
					<view class="sssb-label">门店总数</view>
					<view class="sssb-data sssb-color">{{statisticData.storeCount?statisticData.storeCount:0}}</view>
				</view>
			</view>
		</view>
		
		<view>
			<view class="sjyy-item" v-for="item,index in groupList" :key="index" @click="toMerchant(item)">
				<view class="ddflex">
					<view class="sjyy-header">
						<image src="../../static/pages/images/wdsj.png"></image>
					</view>
					<view class="fflex">
						<view class="sjyy-name ddflex">
							<view>{{item.name}}</view>
							<view class="sjyy-name-label" v-if="item.isMy==1">我的商家</view>
						</view>
						<view class="sjyy-phone" v-if="item.phone">{{item.phone}}</view>
					</view>
					<view @click.stop="goPhone(item.phone)" v-if="item.phone">
						<image style="width: 48rpx;height: 48rpx;margin-left: 20rpx;" src="../../static/pages/images/call.png"></image>
					</view>
				</view>
				<view class="sjyy-data ddflex">
					<image style="width: 26rpx;height: 26rpx;margin-right: 10rpx;" src="../../static/pages/images/address-icon.png"></image>
					<view class="tover fflex" style="font-size: 24rpx;line-height: 36rpx;color: #A8A5A5;">{{item.address}}</view>
				</view>
				<!-- <view class="sjyy-data ddflex">
					<view class="sjyy-data-item fflex">
						<view class="sssb-data sssb-color">10242.00</view>
						<view class="sssb-label">累计收益</view>
					</view>
					<view class="sjyy-data-item fflex">
						<view class="sssb-data sssb-color">1915.00</view>
						<view class="sssb-label">今日收益</view>
					</view>
					<view class="sjyy-data-item fflex">
						<view class="sssb-data sssb-color">9154.00</view>
						<view class="sssb-label">本月收益</view>
					</view>
				</view> -->
				<view class="sjyy-data ddflex">
					<view class="sjyy-data-item fflex">
						<view class="sssb-data sssb-color">{{item.cabCount?item.cabCount:0}}</view>
						<view class="sssb-label">机柜数</view>
					</view>
					<view class="sjyy-data-item fflex">
						<view class="sssb-data sssb-color">{{item.proportion?item.proportion:0}}%</view>
						<view class="sssb-label">分润</view>
					</view>
					<view class="sjyy-data-item fflex">
						<view class="sssb-data sssb-color">{{item.storeCount?item.storeCount:0}}</view>
						<view class="sssb-label">门店数</view>
					</view>
				</view>
				<view class="ddflex" style="justify-content: space-between;margin-top: 30rpx;">
					<view class="sjyy-btn" style="border: 2rpx solid #EB5C20;color: #EB5C20;" @click="jumpUrl()">查看订单</view>
					<view class="sjyy-btn" @click="jumpUrl()">查看设备</view>
					<view class="sjyy-btn" @click="jumpUrl('/pages/operationDataPersonal/operationDataPersonal')">运营情况</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		components: {},
		props: {},
		data() {
			return {
				statisticData:{},
				groupList: [],
				page: 1,
				limit: 3,
				searchValue:'',
				isQuerying:false,//正在查询数据
			}
		},
		onLoad(options) {
			this.getDataList()
		},
		onShow() {
			this.getStatisticData()
		},
		onReachBottom() {
			this.getDataList(true)
		},
		methods: {
			jumpUrl(url){
				if(req.isLogins(true)){
					uni.navigateTo({
						url:url
					})
				}
			},
			getStatisticData() {
				return new Promise((r, j) => {
					req.getRequest('/admin/v2/statistic/top', {}, res => {
						console.log('statistic top', res)
						this.statisticData = res
						r(res)
					})
				})
			},
			getDataList(isPage) {
				if(this.isQuerying) return
				else this.isQuerying = true
				if (!isPage) {
					this.page = 1
				}
				let queryParams = {
					page: this.page,
					limit: this.limit,
				}
				if(this.searchValue){
					queryParams.name=this.searchValue
				}
				req.getRequest(
					'/admin/v2/merchant/page',
					queryParams,
					data => {
						if (data != null && data.list.length > 0) {
							if (!isPage) {
								this.groupList = data.list
							} else {
								this.groupList = this.groupList.concat(data.list)
							}
							this.page++
						} else {
							if (!isPage)
								this.groupList = data.list
							else {}
						}
						uni.hideLoading()
						this.isQuerying = false
					}
				)
			},
			searchFn(){
				this.getDataList()
			},
			goPhone(phone) {
				uni.makePhoneCall({ phoneNumber: phone }); // 传参带入号码即可
			},
			toMerchant(item){
				this.jumpUrl('/pages/myMerchant/myMerchant?merchantId='+item.id)
			}
		},
		mounted() {
		},
		onPageScroll: function(e) {
			
		}
	}
</script>

<style>
	@import "./myStore.css";
</style>