high-mini/pages/user/minePromotion/minePromotion.vue

<template>
	<view>
		<view class="promotion_bg backcorf06 width100 height90 fcorfff fotct font24 fontspec10">我的推广</view>
		<view class="promotion_dt width90 height100p backcorfff">
			<view class="width100 mart10 fcor333 font14 fontwig6 height22">
				<view class="promotion_xg flleft"></view>
				<view class="promotion_mixg flleft" style="margin-left: -6px;"></view>
				<view class="flleft promotoin_text font16" style="margin-top: -2px;">今日数据</view>
				<view class="promotion_mixg flleft"></view>
				<view class="promotion_xg flleft" style="margin-left: -6px;"></view>
			</view>
			<view class="width90 mart5 height22">
				<view class="width50 flleft font18 fcor333 fontwig6 fotlt">7</view>
				<view class="width50 flright font18 fcor333 fontwig6 fotrt">5300.00</view>
			</view>
			<view class="width90 mart10">
				<view class="width50 flleft font15 fcor666 fontwig6 fotlt">今日订单</view>
				<view class="width50 flright font15 fcor666 fontwig6 fotrt">今日流水</view>
			</view>
		</view>
		<!-- //库存管理 -->
		<view class="width100 mart80">
			<view class="width90 mart10 fcor333 font14 fontwig6 height22">
				<view class="promotion_xg flleft"></view>
				<view class="promotion_mixg flleft" style="margin-left: -6px;"></view>
				<view class="flleft promotoin_text font16" style="margin-top: -2px;">库存管理</view>
				<view class="promotion_mixg flleft"></view>
				<view class="promotion_xg flleft" style="margin-left: -6px;"></view>
			</view>
		</view>
		<view class="promotion_kc width90 mart10">
			<image class="flleft pro_img mart15 margle" src="../../../static/img/wenj.png">
			</image>
			<view class="pro_cont paddtop15">
				<view class="flleft font16 fcor333 fontwig6  pro_title">
					剩余库存(24)
				</view>
				<view class="pro_price fotrt  fcor333 font15 fontwig6">
					总计 9500.00
				</view>
			</view>
			<!-- //循环:class="[index==0?'colorfe':'']" -->
			<view v-for="(mers,index) in minepros" :key="mers.id" class="pro_mok marb10 colore7" @click="jumpAgent">
				<view class="width100 font14 fcor333 fontwig6 fotct paddtop10">
					面额100
				</view>
				<view class="width100 font14 fcor999 fotct mart10">
					13张
				</view>
				<view class="width100 font15 fcor333 fontwig6 fotct mart10">
					1300
				</view>
			</view>
		</view>
		<!-- //销售统计 -->
		<view class="width100 mart20">
			<view class="width90 mart10 fcor333 font14 fontwig6 height22">
				<view class="promotion_xg flleft"></view>
				<view class="promotion_mixg flleft" style="margin-left: -6px;"></view>
				<view class="flleft promotoin_text font16" style="margin-top: -2px;">销售统计</view>
				<view class="promotion_mixg flleft"></view>
				<view class="promotion_xg flleft" style="margin-left: -6px;"></view>
			</view>
		</view>
		<view class="promotion_kc width90 mart10">
			<image class="flleft pro_img mart15 margle" src="../../../static/img/wenj.png">
			</image>
			<view class="pro_cont paddtop15">
				<view class="flleft font16 fcor333 fontwig6  pro_title">
					已销售(24)
				</view>
				<view class="pro_price fotrt  fcor333 font15 fontwig6">
					总计 1129500.00
				</view>
			</view>
			<!-- //循环 -->
			<view v-for="(mers,index) in minepros" :key="mers.id" class="pro_mok marb10 colore9" @click="jumpAgent">
				<view class="width100 font14 fcor333 fontwig6 fotct paddtop10">
					面额100
				</view>
				<view class="width100 font14 fcor999 fotct mart10">
					13张
				</view>
				<view class="width100 font15 fcor333 fontwig6 fotct mart10">
					1300
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAgentCount
	} from "../../../Utils/Api.js";
	export default {
		data() {
			return {
				minepros: [{
						id: 1
					},
					{
						id: 1
					},
					{
						id: 1
					}
				]
			}
		},
		onLoad() {
			this.getAgentCount();
		},
		methods: {
			//查询代理商信息
			getAgentCount() {
				getAgentCount().then(res => {
					if (res.return_code == '000000') {} else {
						uni.showToast({
							title: res.return_msg,
							icon: "none"
						})
					}
				})
			},
			//跳转代理商卡券
			jumpAgent() {
				uni.navigateTo({
					url: '../agentCoupons/agentCoupons'
				})
			}
		}
	}
</script>

<style lang="scss">
	.promotion_bg {
		position: relative;
	}

	.promotion_dt {
		position: absolute;
		top: 50px;
		border-radius: 5px;
		box-shadow: 0px 2px 6px 2px #999999;
	}

	.promotion_xg {
		width: 15px;
		height: 2px;
		margin-top: 8px;
		background-color: #f06c7a;
		transform: rotate(100deg);
	}

	.promotoin_text {
		margin-left: 5px;
		margin-right: 5px;
	}

	.promotion_mixg {
		width: 10px;
		margin-top: 8px;
		height: 2px;
		background-color: #f06c7a;
		transform: rotate(100deg);
	}

	.promotion_kc {
		padding-bottom: 10px;
		border-radius: 5px;
		box-shadow: 0px 2px 4px 2px #999999;
	}

	.pro_img {
		width: 25px;
		height: 25px;
	}

	.pro_cont {
		height: 35px;
		margin-left: 40px;
	}

	.pro_title {
		width: 110px;
	}

	.pro_price {
		margin-right: 10px;
		margin-left: 110px;
	}

	.pro_mok {
		height: 95px;
		margin-left: 2.5%;
		width: 30%;
		display: inline-block;
	}

	.colorfe {
		background-color: #fef7e5;
	}

	.colore9 {
		background-color: #e9f3ff;
	}

	.colore7 {
		background-color: #e7fcf3;
	}
</style>