99 lines
2.5 KiB
Vue
99 lines
2.5 KiB
Vue
<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>
|