ccy_DIB/pages/everdayRenven/serviceDetail.vue

<template>
	<div class="page-body" v-if="showPage">

		<div class="service-brand-box">
			<div class="uni-flex align-center">

				<image v-if="pageMsg.Brand_ICO" :src="pageMsg.Brand_ICO" mode="aspectFit"></image>
				<image v-else src="/static/images/revenue/home.png" mode="aspectFit"></image>


				<div class="band-name">{{ pageMsg.Brand_Name }}</div>
			</div>
			<div class="price-num">{{ pageMsg.Revenue_Amount ? $util.fmoney(pageMsg.Revenue_Amount, 2) : '0.00' }}</div>
		</div>
		<!--服务区门店分析-->
		<div style="margin-top: 0 20rpx;padding: 0 16rpx">
			<shopCell v-for="(item, i) in pageMsg.ShopEndaccountList" :key="i" :item='item' @toggleShow="toggleShow"
				:i='i'></shopCell>

		</div>
	</div>
</template>

<script>
import shopCell from './components/listUnit.vue'
export default {
	data() {
		return {
			showPage: false,

			pageMsg: {},
			keyJson: {
				SHOWMORE_SIGN: { 1: '【长款】', 2: '【异常长款】' }, // 长款
				SHOWLESS_SIGN: { 1: '【短款】', 2: '【异常短款】' }, // 短款
				SHOWABNORMAL_SIGN: { 1: '【异常校验】' },  // 异常日结
				SHOWSCAN_SIGN: { 1: '【扫】' },  // 扫码上传
				SHOWSSUPPLY_SIGN: { 1: '【补】' }, // 账期补录
				SHOWCHECK_SIGN: { 1: '【稽核检查】' }, // 稽核检查
				INTERFACE_SIGN: { 1: '【接口传输】' }, // 接口传输
			}
		}
	},
	components: {
		shopCell
	},
	methods: {
		toggleShow(i) {

			let item = this.pageMsg.ShopEndaccountList[i]
			item.show = !item.show
			this.$forceUpdate()
		},


		getDetail(data) {
			let arr = []
			let keyJson = this.keyJson
			var keyCode = ['SHOWABNORMAL_SIGN', 'SHOWCHECK_SIGN', 'SHOWMORE_SIGN', 'SHOWLESS_SIGN', 'SHOWSCAN_SIGN', 'SHOWSSUPPLY_SIGN', 'INTERFACE_SIGN']
			keyCode.map(n => {

				if (keyJson[n][data[n]]) arr.push(keyJson[n][data[n]])

			})
			return arr
		},
		getBrandRevenue(obj) {
			let _this = this
			this.$request.$webGet('CommercialApi/Revenue/GetShopEndAccountList', {
				Serverpart_Id: obj.id,
				pushProvinceCode: obj.provinceId,
				Statistics_Date: obj.time,
				ServerpartShop_Ids: obj.shopid,
			}).then(res => {
				uni.hideLoading()
				if (res.Result_Code != 100) return
				res.Result_Data.ShopEndaccountList.map(n => {
					n.show = true
					n.detail = this.getDetail(n)
				})
				_this.pageMsg = res.Result_Data
				console.log('_this.pageMsg_this.pageMsg_this.pageMsg', _this.pageMsg);

				_this.showPage = true
			})
		},
		zgetBrandRevenue(obj) {
			let _this = this
			this.$request.$webGet('/WeChat/GetServerpartBrandShop', {
				Serverpart_Id: obj.id,
				business_Brand: obj.bid,
				pushProvinceCode: obj.provinceId,
				statictics_Time: obj.time,
				bussiness_Trade: obj.btid,
			}).then(res => {
				uni.hideLoading()
				if (res.Result_Code != 100) return
				res.Result_Data.listBrandShopModel.map(n => {
					n.show = true
					n.detail = this.getDetail(n)
				})
				res.Result_Data.ShopEndaccountList = res.Result_Data.listBrandShopModel
				_this.pageMsg = res.Result_Data
				console.log('_this.pageMsg_this.pageMsg_this.pageMsg', _this.pageMsg);
				_this.showPage = true
			})
		},
	},
	onUnload() {
		this.$util.addUserBehavior()
	},
	onLoad(option) {
		uni.showLoading({
			title: '正在加载...'
		})
		if (option.provinceId === '330000') {
			this.zgetBrandRevenue(option)
		} else {

			this.getBrandRevenue(option)
		}
	}
}
</script>

<style lang="scss" scoped>
.page-body {
	background-color: #f8f9fa;
	padding: 32rpx 24rpx;
	min-height: 100vh;
}

/* 服务区品牌详情 */
.service-brand-box {
	width: 100%;
	box-sizing: border-box;
	padding: 24rpx;
	margin-bottom: 32rpx;
	background: linear-gradient(135deg, #27B25F 0%, #4CCC7F 100%);
	border-radius: 24rpx;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: -50%;
		right: -20%;
		width: 200rpx;
		height: 200rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		z-index: 1;
	}

	&::after {
		content: '';
		position: absolute;
		bottom: -30%;
		left: -10%;
		width: 120rpx;
		height: 120rpx;
		background: rgba(255, 255, 255, 0.08);
		border-radius: 50%;
		z-index: 1;
	}
}

.service-brand-box image {
	width: 72rpx;
	height: 72rpx;
	border: 3rpx solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	margin-right: 24rpx;
	position: relative;
	z-index: 2;
}

.band-name {
	color: #fff;
	font-size: 28rpx;
	font-weight: 600;
	position: relative;
	z-index: 2;
}

.price-num {
	color: #fff;
	font-size: 32rpx;
	font-weight: 700;
	font-family: 'PingFang SC', sans-serif;
	position: relative;
	z-index: 2;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
</style>