CarRental_back/page_Merchant/StoreManagement.vue

<template>
	<view class="page">
		<u-navbar title="店铺管理" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='45'></u-navbar>
		<view class="searc_box">
			<view class="search">
				<view class="input">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/u9UrXmvCyDk2IGqEWGvw" mode=""
						style="width: 44rpx;height: 44rpx;margin-right: 22rpx;"></image>

					<input type="text" v-model="searchKeyword" placeholder="请输入内容" placeholder-style="color:#C7CDD3">
				</view>
				<!-- <view class="add">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/u6j7tAtxUJDlpMDvXXLb" mode=""></image>
				</view> -->
				<view class="btn">
					搜索
				</view>
			</view>
		</view>
		<view class="btns" @click="add">
			新建店铺
		</view>
		<view class="shop_card_box" style="padding-bottom: 180rpx;">
			<view class="shop_card" v-for="(item,index) in list" :key="index" @click="todetal(item)">
				<view class="tit_top">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/ul4vFWK5YXorGiQTej8I" mode=""></image>
					<view class="tit">
						{{item.name}}
					</view>
					<view class="btn">
						添加设备
					</view>
				</view>
				<view class="line">

				</view>
				<view class="price_box">
					<view class="price_li">
						<view class="li_top">
							日收
						</view>
						<view class="li_bot">
							{{item.dailyRevenue}} <span>￥ </span>
						</view>
					</view>
					<view class="price_li">
						<view class="li_top">
							月收
						</view>
						<view class="li_bot">
							{{item.monthlyRevenue}}<span>￥ </span>
						</view>
					</view>
					<view class="price_li">
						<view class="li_top">
							上月收
						</view>
						<view class="li_bot">
							{{item.lastMonthlyRevenue}}<span>￥ </span>
						</view>
					</view>
					<view class="price_li">
						<view class="li_top">
							设备数
						</view>
						<view class="li_bot">
							{{item.deviceCount}}<span>台</span>
						</view>
					</view>

				</view>
				<view class="txt1">
					营业时间： <span style="color: #3D3D3D;">{{item.businessTimeStart}}-{{item.businessTimeEnd}}</span>
				</view>
				<view class="txt1">
					详细地址： <span style="color: #3D3D3D;">{{item.address}}</span>
				</view>
				<view class="line"></view>
				<view class="txt_box">
					<view class="txt1">
						<!-- 2024-02-03 15:22:52 -->
					</view>
					<view class="txt1">
						分成比例： {{item.dividendProportion*100}}%
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				bgc: {
					backgroundColor: "#fff",
				},
				list: []
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			todetal(item){
				uni.navigateTo({
					url: '/page_Merchant/addStore?id='+item.storeId
				})
			},
			add() {
				uni.navigateTo({
					url: '/page_Merchant/addStore'
				})
			},
			getList() {
				this.$u.get(`appAdmin/getStoreListByToken`).then((res) => {
					if (res.code == 200) {

						this.list = res.data

					} else {


						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7FAFE;
	}

	.page {

		.btns {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 680rpx;
			height: 90rpx;
			background: #4C97E7;
			border-radius: 49rpx 49rpx 49rpx 49rpx;
			position: fixed;
			left: 36rpx;
			bottom: 56rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
		}

		.shop_card_box {
			.shop_card {
				margin: 0 auto;
				margin-top: 30rpx;
				width: 680rpx;
				// height: 438rpx;
				padding: 30rpx 32rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.txt_box {
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
				}

				.txt1 {
					margin-top: 16rpx;

					font-weight: 400;
					font-size: 24rpx;
					color: #808080;
				}

				.price_box {
					margin-top: 28rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: space-around;

					.price_li {
						margin-top: 10rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						width: 120rpx;

						.li_top {
							text-align: center;
							font-weight: 400;
							font-size: 24rpx;
							color: #808080;
						}

						.li_bot {
							text-align: center;
							width: 120rpx;
							font-weight: 600;
							font-size: 32rpx;
							color: #3D3D3D;

							span {
								font-weight: 400;
								font-size: 24rpx;
								color: #808080;
							}
						}
					}

				}

				.line {
					margin-top: 26rpx;
					width: 100%;
					height: 1rpx;
					background: #D8D8D8;
				}

				.tit_top {
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;


					image {
						margin-right: 20rpx;
						width: 28rpx;
						height: 28rpx;
					}

					.tit {
						font-weight: 500;
						font-size: 30rpx;
						color: #3D3D3D;
					}

					.btn {
						margin-left: auto;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 104rpx;
						height: 34rpx;
						background: #4297F3;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}
			}
		}

		.searc_box {
			padding: 36rpx;
			width: 750rpx;
			background: #fff;

			.search {
				width: 100%;
				height: 68rpx;
				border: 2rpx solid #4297F3;
				border-radius: 20rpx;
				display: flex;
				flex-wrap: nowrap;

				.input {
					padding-left: 30rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

					image {}

					width: 533rpx;
					height: 100%;
					// border-right: 2rpx solid #4297F3;
				}

				// .add{
				// 	width: 88rpx;
				// 	height: 100%;
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: center;
				// 	image{
				// 		width: 44rpx;
				// 		height: 44rpx;
				// 	}
				// }
				.btn {
					margin-left: auto;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 142rpx;
					background: #4297F3;
					// border: 2rpx solid #4297F3;
					border-radius: 0 20rpx 20rpx 0;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}
	
	
	}
</style>