first

pages/statPage/components/statCell.vue

@@ -0,0 +1,98 @@
+<template>
+	<view class="pay-wrapper">
+		<view class="pay-left">
+			<template v-if="imgNone">
+				<image v-if="devImage" :src="imgObj[devImage]" mode="scaleToFill" />
+				<image v-else :src="imgUrl" mode="scaleToFill" />
+			</template>
+			<view>{{ imgUrl }}</view>
+			<view class="pay-title single-text-beyond">{{ title }}</view>
+		</view>
+		<view class="pro-bar" :style="{ '--bar-width': reality + '%' }" v-if="round"></view>
+		<view class="pay-right">
+			<text v-show="iconPre">￥</text>
+			{{ money }}
+			<text v-show="iconNext">%</text>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+
+const props = defineProps({
+	reality: [String, Number], //实际进度
+	imgUrl: { type: String }, //左侧图片
+	title: { type: String }, //左侧标题
+	money: [String, Number], //右侧金额
+	round: { type: Boolean, default: false }, //是否展示进度条
+	iconPre: { type: Boolean, default: false }, //金钱
+	iconNext: { type: Boolean, default: false }, // 百分比
+	devImage: { type: String }, //如果设备
+	imgNone: { type: Boolean, default: true } //不需要图片
+});
+const imgObj = reactive({
+	store: '/static/indexImg/icon-store.svg', //门店
+	qr_code: '/static/devIconImg/icon-code.svg',
+	scan_pos: '/static/devIconImg/icon-pos.svg',
+	auto_pos: '/static/devIconImg/icon-scanPos.svg',
+	cash_plugin: '/static/devIconImg/icon-horn.svg',
+	face_app: '/static/devIconImg/icon-face-1.svg', //刷脸设备
+	ALIPAY: '/static/payImg/icon-zfb.svg', //支付宝
+	OTHER: '/static/payImg/icon-qt.svg', //其他
+	DCEPPAY: '/static/payImg/icon-qt.svg', //数字人民币
+	UNIONPAY: '/static/payImg/icon-yl.svg', //银联
+	WECHAT: '/static/payImg/icon-wx.svg', //微信
+	YSFPAY: '/static/payImg/icon-ysf.svg' //云闪付
+});
+</script>
+
+<style lang="scss" scoped>
+.pay-wrapper {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 30rpx;
+	height: 100rpx;
+	.pay-left {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		font-size: 26rpx;
+		color: #666;
+		image {
+			margin-right: 10rpx;
+			width: 40rpx;
+			height: 40rpx;
+		}
+		.pay-title {
+			width: 178rpx;
+		}
+	}
+	.pro-bar {
+		flex-grow: 0;
+		flex-shrink: 0;
+		position: relative;
+		width: 100rpx;
+		height: 6rpx;
+		background-color: rgba(0, 0, 0, 0.1);
+		border-radius: 6rpx;
+		&::after {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: var(--bar-width);
+			height: 100%;
+			border-radius: 6rpx;
+			background: $jeepay-bg-primary;
+		}
+	}
+	.pay-right {
+		flex: 1;
+		text-align: right;
+		font-size: 30rpx;
+		font-weight: 500;
+	}
+}
+</style>