front/pages/sales/home.vue

<template>
	<view class="user-area" v-if="fetch && fetch.info">
		<use-tabbar :tarbar="false"></use-tabbar>
		<view class="header-area padding-lr-sm" style="padding-top: 12px;">
			<view class="dflex-b">
				<view class="member-area padding-top-sm margin-bottom dflex pos-r flex1"
					@click="Dever.location('sales/setting')">
					<view>
						<image class="headimg border-radius-c" :src="fetch.user.avatar" mode="aspectFill"></image>
					</view>
					<view class="margin-left-sm">
						<view class="info-box">
							<text class="fs-lg line-height-1">{{fetch.info.name}}</text>
						</view>
						<view>
							<text class="fs-xxs">{{info}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="border-radius">
				<u-grid :border="false" class="stats-area dflex-c bg-main">
					<u-grid-item>
						<view class="item dflex dflex-flow-c" @click="go('sales/user')">
							<text class="num">{{fetch.member}}</text>
							<text>用户</text>
						</view>
						<view class="vertical-line"></view>
					</u-grid-item>
					<u-grid-item v-for="(item, index) in fetch.role" :key="index">
						<view class="item dflex dflex-flow-c" @click="go('sales/role?role_id=' + item.id)">
							<text class="num">{{item.num}}</text>
							<text>{{item.name}}</text>
						</view>
						<view class="vertical-line"></view>
					</u-grid-item>

					<u-grid-item>
						<view class="item dflex dflex-flow-c" @click="go('sales/order/list')">
							<text class="num">{{fetch.order}}</text>
							<text>订单</text>
						</view>
						<view class="vertical-line"></view>
					</u-grid-item>

					<u-grid-item>
						<view class="item dflex dflex-flow-c" @click="go('sales/order/list')">
							<text class="num">{{fetch.cash}}</text>
							<text>流水</text>
						</view>
						<view class="vertical-line"></view>
					</u-grid-item>

					<u-grid-item>
						<view class="item dflex dflex-flow-c" @click="go('sales/profit')">
							<text class="num">{{fetch.profit}}</text>
							<text>收益</text>
						</view>
						<view class="vertical-line"></view>
					</u-grid-item>

				</u-grid>

			</view>
		</view>

		<view class="container-area padding-lr-sm padding-bottom-sm">

			<view class="border-radius margin-top-sm bg-main">
				<view class="use-list-title dflex-b padding-lr w-full bg-main" @click="go('sales/order/list')">
					<view class="dflex">
						<view class="iconfont __left margin-right-sm icondingdan" style="color: rgb(255, 106, 108);">
						</view>
						<text class="flex1 ws-np" style="font-size: 13px; font-weight: 600;">订单管理</text>
					</view>
					<view class="dflex margin-left-xl">
						<u-tag @click="go('sales/order/list')" class="tip line-height-1 margin-right-xs" text="有2单退款申请"
							plain plainFill shape="circle" size="mini" type="error" v-if="fetch.order_5 > 0"
							style="margin-left:10rpx;"></u-tag>
						<text v-else class="tip line-height-1 margin-right-xs">查看全部订单</text>
						<view class="iconfont fs-sm iconjiantou-01" style="color: rgb(192, 192, 192);"></view>
					</view>
				</view>

				<view class="order-area padding-bottom-sm padding-lr dflex-c">
					<view class="item dflex dflex-flow-c" @click="go('sales/order/list?status=1')">
						<view class="iconfont"><view class="badge badge-small" v-if="fetch.order_1 > 0">
								{{fetch.order_1}}
							</view>
						</view>
						<text>待付款</text>
					</view>

					<view class="item dflex dflex-flow-c" @click="go('sales/order/list?status=2')">
						<view class="iconfont"><view class="badge badge-small" v-if="fetch.order_2 > 0">
								{{fetch.order_2}}
							</view>
						</view>
						<text>待发货</text>
					</view>
					<view class="item dflex dflex-flow-c" @click="go('sales/order/list?status=3')">
						<view class="iconfont"><view class="badge badge-small" v-if="fetch.order_3 > 0">
								{{fetch.order_3}}
							</view>
						</view>
						<text>待收货</text>
					</view>
					<view class="item dflex dflex-flow-c" @click="go('sales/order/list?status=5')">
						<view class="iconfont"><view class="badge badge-small" v-if="fetch.order_4 > 0">
								{{fetch.order_4}}
							</view>
						</view>
						<text>已完成</text>
					</view>

				</view>
			</view>

			<view class="border-radius margin-top-sm bg-main">
				<view class="use-list-title dflex-b padding-lr w-full bg-main">
					<view class="dflex">
						<view class="iconfont __left margin-right-sm iconhaibao1" style="color: rgb(85, 170, 255);">
						</view>
						<text class="flex1 ws-np" style="font-size: 13px; font-weight: 600;">功能列表</text>
					</view>

					<view class="dflex margin-left-xl">
						<text class="tip line-height-1 margin-right-xs">
							店铺管理，便携操作
						</text>
					</view>
				</view>

				<view class="header-area padding-lr-sm">
					<view class="border-radius">
						<u-grid :border="false" class="stats-area dflex-c bg-main" v-if="fetch.user">
							<u-grid-item @click="openPoster">
								<view class="item dflex dflex-flow-c">
									<text class="num">邀请</text>
									<text>店铺拉新</text>
								</view>
								<view class="vertical-line"></view>
							</u-grid-item>

							<u-grid-item @click="showBenefit" v-if="fetch.benefit">
								<view class="item dflex dflex-flow-c">
									<text class="num">权益</text>
									<text>店铺权益</text>
								</view>
								<view class="vertical-line"></view>
							</u-grid-item>

							<u-grid-item @click="go('sales/setting')">
								<view class="item dflex dflex-flow-c">
									<text class="num">设置</text>
									<text>店铺设置</text>
								</view>
								<view class="vertical-line"></view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>

			<view class="border-radius margin-top-sm padding-sm dflex-c bg-main log-out-btn" @click="Dever.goUser()">
				<view class="cell-tit">返回个人中心</view>
			</view>
		</view>
		<use-copyright :title="title" :desc="info"></use-copyright>

		<u-modal :show="benefit.show" :title="benefit.title" :closeOnClickOverlay="true" @close="closeBenefit"
			@confirm="closeBenefit">
			<view class="slot-content">
				<rich-text :nodes="fetch.benefit"></rich-text>
			</view>
		</u-modal>
		
		<use-poster ref="poster" @setShare="setShare"></use-poster>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				id: 0,
				fetch: {},
				logo: '',
				title: '',
				info: '',
				poster: {
					show: false,
					title: '长按保存分享好友',
					width: 255,
					value: {}
				},
				benefit: {
					show: false,
					title: '店铺权益说明',
				}
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.id = options.id;
			if (!this.type || !this.id) {
				return Dever.goUser()
			}
			//#ifdef MP-WEIXIN
			wx.hideShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			//#endif
		},
		onShow() {
			this.load();
			this.loadData();
		},
		// 小程序分享
		onShareAppMessage(res) {
			if (res.from === 'button' && this.share && this.share.name && this.share.path) {
				return {
					title: this.share.name,
					path: this.share.path,
					imageUrl: this.share.pic || '',
				}
			}
			return null
		},
		methods: {
			setShare(value) {
				this.share = value;
			},
			load() {
				this.Dever.config().then(config => {
					this.logo = config.l;
					this.title = config.n;
					this.info = config.i;
				});
			},
			loadData() {
				this.DeverApi.get(this, 'sales.info', {
					sales_type: this.type,
					sales_id: this.id
				});
			},
			go(url) {
				var param = 'type=' + this.type + '&id=' + this.id;
				if (url.indexOf('?') == -1) {
					url = url + '?' + param
				} else {
					url = url + '&' + param
				}
				this.Dever.location(url)
			},
			showBenefit() {
				if (this.fetch.benefit) {
					this.benefit.show = true;
				}
			},
			closeBenefit() {
				this.benefit.show = false;
			},
			openPoster() {
				this.$refs.poster.open(this.fetch.info.name, this.title, this.fetch.desc, this.logo, this.fetch.user.avatar, '', {
					sales_type: this.type,
					sales_id: this.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.member-area {
		image {
			width: 124rpx;
			height: 124rpx;
			border: 4rpx solid #fff;
		}
	}

	.vip-card-area {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		font-size: 22rpx;
		color: #c6b181;
		background-color: #000;
		background-image: linear-gradient(90deg, #3a3a3a, #000);

		.iconfont {
			font-size: 62rpx;
		}
	}

	.border-radius {
		border-radius: 18rpx;
	}

	.item {
		padding: 28rpx 0;
		position: relative;
		font-size: 22rpx;
		color: #75787d;
		flex: 1;
	}

	.num {
		font-size: 30rpx;
		color: #303133;
		margin-bottom: 4rpx;
	}

	.order-area {
		.item {
			position: relative;
			font-size: 22rpx;
			color: #75787d;
			flex: 1;
		}

		.num {
			font-size: 30rpx;
			color: #303133;
			margin-bottom: 4rpx;
		}
	}

	.browsing-area {
		image {
			width: 152rpx;
			height: 152rpx;
		}
	}

	.log-out-btn {
		color: #75787d;
	}

	.badge {
		margin-right: 20rpx;
	}
</style>