源文件
This commit is contained in:
37
jeepay-ui-uapp-face/components/JButton/JButton.vue
Normal file
37
jeepay-ui-uapp-face/components/JButton/JButton.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<view class="button-wrapper" hover-class="hover-button" hover-stay-time="50" :style="{
|
||||
backgroundColor: bgColor, color: color, borderColor: bdColor, fontSize: size +'rpx' }" @tap="emits('click')">
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
bgColor: { type: String, default: '' },
|
||||
color: { type: String, default: '' },
|
||||
bdColor: { type: String, default: '' },
|
||||
size: { type: Number }
|
||||
})
|
||||
const emits = defineEmits(['click'])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.button-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
height: 110rpx;
|
||||
background-color: $v-primary;
|
||||
color: #fff;
|
||||
border-radius: 14rpx;
|
||||
font-size: 32rpx;
|
||||
border: 1rpx solid transparent;
|
||||
// background-color: transparent;
|
||||
}
|
||||
|
||||
.hover-button {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
60
jeepay-ui-uapp-face/components/JeepayBanner/JeepayBanner.vue
Normal file
60
jeepay-ui-uapp-face/components/JeepayBanner/JeepayBanner.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<swiper class="swiper" :style="{ '--banner-height': height }" circular :indicator-dots="true" autoplay
|
||||
:interval="4000" :duration="500">
|
||||
<block v-for="(v, i) in list" :key="i">
|
||||
<swiper-item>
|
||||
<image :src="v.imgUrl" mode="aspectFill" />
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<!-- 等待商家付款 -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="wait-mch">
|
||||
<view class="wait-title">请等待商家发起收款</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
list: { type: Array, default: [] },
|
||||
// interval: { type: [String, Number] }, 暂时写死轮播时间
|
||||
height: { type: String, default: '88vh' }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-margin-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: var(--banner-height) !important;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: calc(100% - 150rpx)
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.wait-mch{
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
|
||||
border-radius: 32rpx 32rpx;
|
||||
.wait-title{
|
||||
font-size: 45rpx;
|
||||
font-weight: 700;
|
||||
color:$v-primary;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
jeepay-ui-uapp-face/components/LoginInput/LoginInput.vue
Normal file
66
jeepay-ui-uapp-face/components/LoginInput/LoginInput.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<view class="l-input-wrapper">
|
||||
<view class="l-input-title">{{ title }}</view>
|
||||
<input :type="type" :placeholder="place" :password="password" placeholder-class="l-input-place"
|
||||
v-model="vdata.inputValue" @input="inputChange" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
const props = defineProps({
|
||||
title: { type: String }, //标题
|
||||
require: { type: Boolean, default: false }, //是否必填 默认 否
|
||||
place: { type: String }, // placeholder
|
||||
type: { type: String, default: 'text' }, //input 类型
|
||||
value: { type: [String, Number], default: '' }, //双向绑定的值
|
||||
REG: {}, //正则表达式
|
||||
password: { type: Boolean, default: false },//是否密码模式 默认false
|
||||
})
|
||||
|
||||
const emits = defineEmits(['update:value'])
|
||||
const vdata = reactive({
|
||||
inputValue: props.value,
|
||||
})
|
||||
const inputChange = (e) => {
|
||||
emits('update:value', vdata.inputValue)
|
||||
}
|
||||
const check = () => {
|
||||
if (props.require && !vdata.inputValue) return errorTips('不能为空')
|
||||
if (props.REG && !props.REG.test(vdata.inputValue)) return errorTips('填写不正确')
|
||||
return true
|
||||
}
|
||||
const errorTips = (err) => {
|
||||
uni.showToast({
|
||||
title: props.title + err,
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
defineExpose({ check })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.l-input-wrapper {
|
||||
margin: 50rpx;
|
||||
height: 100rpx;
|
||||
|
||||
border-bottom: 1rpx solid #666;
|
||||
|
||||
input {
|
||||
font-size: 24rpx;
|
||||
height: 50%;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.l-input-title {
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .l-input-place {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<!-- 切换模式卡片 -->
|
||||
<uni-popup type="center" ref="refSwitchModel" @maskClick="emits('makClose')">
|
||||
<view class="switch-model">
|
||||
<view class="title">切换模式</view>
|
||||
<view class="sun-text">如需设置收银机兼容 请点击设置按钮设置</view>
|
||||
<view class="sub-title">独立收银模式：<view class="model-tag" v-if="!vdata.pos">当前正在使用</view>
|
||||
</view>
|
||||
<view class="tips">接入电源后即可使用，后屏输入收款金额，前屏支持刷脸支付和扫码支付。</view>
|
||||
<view class="sub-title">POS模式：<view class="model-tag" v-if="vdata.pos">当前正在使用</view>
|
||||
</view>
|
||||
<view class="tips">需要连接收银机或PC使用，即插即用，收款将会进入您的现有收银软件账户。</view>
|
||||
<view class="pay-model" hover-class="hover-model" hover-stay-time="50" @tap="switchFaceMdoel">
|
||||
<image src="/static/iconImg/switch-model-ali.svg" mode="scaleToFill" />
|
||||
切换至{{ !vdata.pos ? 'POS' : '独立收银' }}模式
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { ref, reactive } from "vue"
|
||||
import storageManage from '@/commons/utils/storageManage.js'
|
||||
const emits = defineEmits(['open', 'makClose', 'switch', 'update:value'])
|
||||
const refSwitchModel = ref(null)
|
||||
const vdata = reactive({
|
||||
pos: false
|
||||
})
|
||||
const open = () => {
|
||||
if (storageManage.faceModel() == 'pos') {
|
||||
vdata.pos = true
|
||||
} else {
|
||||
vdata.pos = false
|
||||
}
|
||||
refSwitchModel.value.open()
|
||||
}
|
||||
const switchFaceMdoel = () => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: `是否切换为${!vdata.pos ? 'POS' : '独立收银'}模式？`,
|
||||
showCancel: true,
|
||||
success: ({ confirm, cancel }) => {
|
||||
if (confirm) {
|
||||
if (!vdata.pos) {
|
||||
storageManage.faceModel('pos')
|
||||
emits('update:value', 'pos')
|
||||
} else {
|
||||
storageManage.faceModel('cashier')
|
||||
emits('update:value', 'cashier')
|
||||
}
|
||||
refSwitchModel.value.close()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.switch-model {
|
||||
padding: 0.1rpx 20rpx;
|
||||
padding-bottom: 30rpx;
|
||||
width: 75vw;
|
||||
min-height: 300rpx;
|
||||
border-radius: 14rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.title {
|
||||
margin: 30rpx 0;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.sun-text{
|
||||
margin: 15rpx 0;
|
||||
margin-bottom: 30rpx;
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
.sub-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
|
||||
.model-tag {
|
||||
float: right;
|
||||
background-color: $v-primary;
|
||||
color: #fff;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 5rpx;
|
||||
font-size: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: #595959;
|
||||
font-size: 15rpx;
|
||||
margin: 20rpx 0;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.pay-model {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
height: 60rpx;
|
||||
border: 1rpx solid $v-primary;
|
||||
border-radius: 5rpx;
|
||||
background-color: rgba(241, 255, 245, .3);
|
||||
;
|
||||
color: $v-primary;
|
||||
font-size: 18rpx;
|
||||
letter-spacing: 2rpx;
|
||||
|
||||
image {
|
||||
margin-right: 8rpx;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-model {
|
||||
background-color: #bebbbb;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user