DeXun/cashier
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
砂糖
2026-02-07 18:01:13 +08:00
commit 8015759c65
2110 changed files with 269866 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

397
fuintUniapp/components/prestore-popup/index.vue Normal file
View File

@@ -0,0 +1,397 @@
<template>
<view class="pre-store-popup popup" catchtouchmove="true" :class="(value && complete) ? 'show' : 'none'"
@touchmove.stop.prevent="moveHandle">
<!-- 页面内容开始 -->
<view class="mask" @click="close('mask')"></view>
<!-- 页面开始 -->
<view class="layer attr-content" :style="'border-radius: 10rpx 10rpx 0 0;'">
<view class="specification-wrapper">
<scroll-view class="specification-wrapper-content" scroll-y="true">
<view class="specification-header">
<view class="specification-name">{{couponInfo.name}}</view>
</view>
<view class="specification-content">
<view v-for="(item, index) in storeRule" :key="index" class="store-item">
<view style="flex: 4;">
<view class="item-rule">预存￥{{ item.store }} 到账 ￥{{ item.upStore }}</view>
</view>
<view style="flex: 1;text-align: right;">
<number-box :min="minBuyNum" :max="maxBuyNum" :step="stepBuyNum" v-model="selectNum[index]"
:positive-integer="true">
</number-box>
</view>
</view>
</view>
</scroll-view>
<view class="close" @click="close('close')" v-if="showClose">
<image class="close-item" :src="closeImage"></image>
</view>
</view>
<view v-if="noStock" class="btn-wrapper">
<view class="sure" style="color:#ffffff;background-color:#cccccc">库存没有了</view>
</view>
<view class="btn-wrapper">
<view class="sure" @click="buyNow">立即预存</view>
</view>
<!-- 页面结束 -->
</view>
<!-- 页面内容结束 -->
</view>
</template>
<script>
import NumberBox from './number-box'
var that; // 当前页面对象
var vk; // 自定义函数集
export default {
name: 'CouponPopup',
components: {
NumberBox
},
props: {
// true 组件显示 false 组件隐藏
value: {
Type: Boolean,
default: false
},
// vk云函数路由模式参数开始-----------------------------------------------------------
// 卡券信息
couponInfo: {
Type: Object,
default: {}
},
// 预存规则
storeRule: {
type: Array,
default: []
},
// vk云函数路由模式参数结束-----------------------------------------------------------
// 点击遮罩是否关闭组件 true 关闭 false 不关闭 默认true
maskCloseAble: {
Type: Boolean,
default: true
},
// 最小购买数量
minBuyNum: {
Type: Number,
default: 0
},
// 最大购买数量
maxBuyNum: {
Type: Number,
default: 1000
},
// 每次点击后的数量
stepBuyNum: {
Type: Number,
default: 1
},
// 是否显示右上角关闭按钮
showClose: {
Type: Boolean,
default: true
},
// 关闭按钮的图片地址
closeImage: {
Type: String,
default: "https://img.alicdn.com/imgextra/i1/121022687/O1CN01ImN0O11VigqwzpLiK_!!121022687.png"
}
},
data() {
return {
complete: false, // 组件是否加载完成
isShow: false, // true 显示 false 隐藏
noStock: false,
selectNum: [], // 选中数量
};
},
mounted() {
that = this;
},
created() {
const app = this
this.storeRule.forEach(function(){
app.selectNum.push(0)
})
},
methods: {
// 初始化
init() {
//empty
},
async open() {
that.complete = true;
that.$emit("open", true);
that.$emit("input", true);
},
// 监听 - 弹出层收起
close(s) {
if (s == "close") {
that.$emit("input", false);
that.$emit("close", "close");
} else if (s == "mask") {
if (that.maskCloseAble) {
that.$emit("input", false);
that.$emit("close", "mask");
}
}
},
moveHandle() {
//禁止父元素滑动
},
// 立即预存
buyNow() {
let selected = "";
let allZero = true;
this.selectNum.forEach(function(num) {
if (num > 0) {
allZero = false;
}
if (selected.length === 0) {
selected = num
} else {
selected = selected + "," + num;
}
})
if (allZero) {
this.$error("预存数量必须大于1");
return false
}
this.$navTo('pages/settlement/index', { couponId: this.couponInfo.id, selectNum: selected })
},
// 弹窗
toast(title, icon) {
uni.showToast({
title: title,
icon: icon
});
}
},
// 计算属性
computed: {
// empty
},
watch: {
value: function(val) {
if (val) {
that.open();
}
},
}
};
</script>
<style lang="scss" scoped>
.pre-store-popup {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 21;
overflow: hidden;
&.show {
display: block;
.mask {
animation: showPopup 0.2s linear both;
}
.layer {
animation: showLayer 0.2s linear both;
padding-bottom: 50rpx;
}
}
&.hide {
.mask {
animation: hidePopup 0.2s linear both;
}
.layer {
animation: hideLayer 0.2s linear both;
}
}
&.none {
display: none;
}
.mask {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.65);
}
.layer {
display: flex;
width: 100%;
flex-direction: column;
position: fixed;
z-index: 99;
bottom: 0;
border-radius: 10rpx 10rpx 0 0;
background-color: #fff;
.specification-wrapper {
width: 100%;
padding: 30rpx 25rpx;
box-sizing: border-box;
background: #ffffff;
.specification-wrapper-content {
width: 100%;
max-height: 900rpx;
min-height: 300rpx;
&::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}
.specification-header {
width: 100%;
display: flex;
flex-direction: row;
position: relative;
margin-bottom: 40rpx;
.specification-name{
font-weight: bold;
}
}
.specification-content {
font-weight: 500;
font-size: 26rpx;
.store-item {
display: flex;
height: 100rpx;
padding-top:30rpx;
cursor:pointer;
.item-rule {
padding: 10rpx;
border: solid 1px #f03c3c;
border-radius: 10rpx;
width: 400rpx;
text-align: center;
background: #f9211c;
color: #ffffff;
}
}
}
}
.close {
position: absolute;
top: 30rpx;
right: 25rpx;
width: 50rpx;
height: 50rpx;
text-align: center;
line-height: 50rpx;
.close-item {
width: 40rpx;
height: 40rpx;
}
}
}
.btn-wrapper {
display: flex;
width: 100%;
height: 120rpx;
flex: 0 0 120rpx;
align-items: center;
justify-content: space-between;
padding: 0 26rpx;
box-sizing: border-box;
.layer-btn {
width: 335rpx;
height: 76rpx;
border-radius: 38rpx;
color: #fff;
line-height: 76rpx;
text-align: center;
font-weight: 500;
font-size: 28rpx;
&.add-cart {
background: #ffbe46;
}
&.buy {
background: #fe560a;
}
}
.sure {
width: 698rpx;
height: 80rpx;
border-radius: 40rpx;
color: #fff;
line-height: 80rpx;
text-align: center;
font-weight: 500;
font-size: 28rpx;
background:linear-gradient(to right, #f9211c, #ff6335)
}
.sure.add-cart {
background: $fuint-theme;
}
}
}
@keyframes showPopup {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes hidePopup {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes showLayer {
0% {
transform: translateY(120%);
}
100% {
transform: translateY(0%);
}
}
@keyframes hideLayer {
0% {
transform: translateY(0);
}
100% {
transform: translateY(120%);
}
}
}
</style>

394
fuintUniapp/components/prestore-popup/number-box/index.vue Normal file
View File

@@ -0,0 +1,394 @@
<template>
<view class="number-box">
<view class="u-icon-minus" @touchstart.prevent="btnTouchStart('minus')" @touchend.stop.prevent="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal <= min }"
:style="{
background: bgColor,
height: inputHeight + 'rpx',
color: color,
fontSize: size + 'rpx',
minHeight: '1.4em'
}">
<view :style="'font-size:'+(Number(size)+10)+'rpx'" class="num-btn">-</view>
</view>
<input :disabled="disabledInput || disabled" :cursor-spacing="getCursorSpacing" :class="{ 'u-input-disabled': disabled }"
v-model="inputVal" class="u-number-input" @blur="onBlur"
type="number" :style="{
color: color,
fontSize: size + 'rpx',
background: bgColor,
height: inputHeight + 'rpx',
width: inputWidth + 'rpx',
}" />
<view class="u-icon-plus" @touchstart.prevent="btnTouchStart('plus')" @touchend.stop.prevent="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal >= max }"
:style="{
background: bgColor,
height: inputHeight + 'rpx',
color: color,
fontSize: size + 'rpx',
minHeight: '1.4em',
}">
<view :style="'font-size:'+(Number(size)+10)+'rpx'" class="num-btn">＋</view>
</view>
</view>
</template>
<script>
/**
* numberBox 步进器
* @description 该组件一般用于商城购物选择物品数量的场景。注意：该输入框只能输入大于或等于0的整数，不支持小数输入
* @tutorial https://www.uviewui.com/components/numberBox.html
* @property {Number} value 输入框初始值（默认1）
* @property {String} bg-color 输入框和按钮的背景颜色（默认#F2F3F5）
* @property {Number} min 用户可输入的最小值（默认0）
* @property {Number} max 用户可输入的最大值（默认99999）
* @property {Number} step 步长，每次加或减的值（默认1）
* @property {Number} stepFirst 步进值，首次增加或最后减的值(默认step值和一致）
* @property {Boolean} disabled 是否禁用操作，禁用后无法加减或手动修改输入框的值（默认false）
* @property {Boolean} disabled-input 是否禁止输入框手动输入值（默认false）
* @property {Boolean} positive-integer 是否只能输入正整数（默认true）
* @property {String | Number} size 输入框文字和按钮字体大小，单位rpx（默认26）
* @property {String} color 输入框文字和加减按钮图标的颜色（默认#323233）
* @property {String | Number} input-width 输入框宽度，单位rpx（默认80）
* @property {String | Number} input-height 输入框和按钮的高度，单位rpx（默认50）
* @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框
* @property {Boolean} long-press 是否开启长按连续递增或递减(默认true)
* @property {String | Number} press-time 开启长按触发后，每触发一次需要多久，单位ms(默认250)
* @property {String | Number} cursor-spacing 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认200）
* @event {Function} change 输入框内容发生变化时触发，对象形式
* @event {Function} blur 输入框失去焦点时触发，对象形式
* @event {Function} minus 点击减少按钮时触发(按钮可点击情况下)，对象形式
* @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)，对象形式
* @example <number-box :min="1" :max="100"></number-box>
*/
export default {
name: "NumberBox",
props: {
// 预显示的数字
value: {
type: Number,
default: 0
},
// 背景颜色
bgColor: {
type: String,
default: '#F2F3F5'
},
// 最小值
min: {
type: Number,
default: 0
},
// 最大值
max: {
type: Number,
default: 99999
},
// 步进值，每次加或减的值
step: {
type: Number,
default: 1
},
// 步进值，首次增加或最后减的值
stepFirst: {
type: Number,
default: 0
},
// 是否禁用加减操作
disabled: {
type: Boolean,
default: false
},
// input的字体大小，单位rpx
size: {
type: [Number, String],
default: 26
},
// 加减图标的颜色
color: {
type: String,
default: '#323233'
},
// input宽度，单位rpx
inputWidth: {
type: [Number, String],
default: 80
},
// input高度，单位rpx
inputHeight: {
type: [Number, String],
default: 50
},
// index索引，用于列表中使用，让用户知道是哪个numberbox发生了变化，一般使用for循环出来的index值即可
index: {
type: [Number, String],
default: ''
},
// 是否禁用输入框，与disabled作用于输入框时，为OR的关系，即想要禁用输入框，又可以加减的话
// 设置disabled为false，disabledInput为true即可
disabledInput: {
type: Boolean,
default: false
},
// 输入框于键盘之间的距离
cursorSpacing: {
type: [Number, String],
default: 100
},
// 是否开启长按连续递增或递减
longPress: {
type: Boolean,
default: true
},
// 开启长按触发后，每触发一次需要多久
pressTime: {
type: [Number, String],
default: 250
},
// 是否只能输入大于或等于0的整数(正整数)
positiveInteger: {
type: Boolean,
default: true
}
},
watch: {
value(v1, v2) {
// 只有value的改变是来自外部的时候，才去同步inputVal的值，否则会造成循环错误
if(!this.changeFromInner) {
this.inputVal = v1;
// 因为inputVal变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
// 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
// 将changeFromInner设置为false
this.$nextTick(function(){
this.changeFromInner = false;
})
}
},
inputVal(v1, v2) {
// 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
if (v1 == '') return;
let value = 0;
// 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
let tmp = this.isNumber(v1);
if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
else value = v2;
// 判断是否只能输入大于等于0的整数
if(this.positiveInteger) {
// 小于0，或者带有小数点，
if(v1 < 0 || String(v1).indexOf('.') !== -1) {
value = v2;
// 双向绑定input的值，必须要使用$nextTick修改显示的值
this.$nextTick(() => {
this.inputVal = v2;
})
}
}
// 发出change事件
this.handleChange(value, 'change');
}
},
data() {
return {
inputVal: 0, // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
timer: null, // 用作长按的定时器
changeFromInner: false, // 值发生变化，是来自内部还是外部
innerChangeTimer: null, // 内部定时器
};
},
created() {
this.inputVal = Number(this.value);
},
computed: {
getCursorSpacing() {
// 先将值转为px单位，再转为数值
return Number(uni.upx2px(this.cursorSpacing));
}
},
methods: {
// 点击退格键
btnTouchStart(callback) {
// 先执行一遍方法，否则会造成松开手时，就执行了clearTimer，导致无法实现功能
this[callback]();
// 如果没开启长按功能，直接返回
if (!this.longPress) return;
clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
this.timer = null;
this.timer = setInterval(() => {
// 执行加或减函数
this[callback]();
}, this.pressTime);
},
clearTimer() {
this.$nextTick(() => {
clearInterval(this.timer);
this.timer = null;
})
},
minus() {
this.computeVal('minus');
},
plus() {
this.computeVal('plus');
},
// 为了保证小数相加减出现精度溢出的问题
calcPlus(num1, num2) {
let baseNum, baseNum1, baseNum2;
try {
baseNum1 = num1.toString().split('.')[1].length;
} catch (e) {
baseNum1 = 0;
}
try {
baseNum2 = num2.toString().split('.')[1].length;
} catch (e) {
baseNum2 = 0;
}
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; //精度
return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision);
},
// 为了保证小数相加减出现精度溢出的问题
calcMinus(num1, num2) {
let baseNum, baseNum1, baseNum2;
try {
baseNum1 = num1.toString().split('.')[1].length;
} catch (e) {
baseNum1 = 0;
}
try {
baseNum2 = num2.toString().split('.')[1].length;
} catch (e) {
baseNum2 = 0;
}
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
},
computeVal(type) {
uni.hideKeyboard();
if (this.disabled) return;
let value = 0;
// 新增stepFirst开始
// 减
if (type === 'minus') {
if(this.stepFirst > 0 && this.inputVal == this.stepFirst){
value = this.min;
}else{
value = this.calcMinus(this.inputVal, this.step);
}
} else if (type === 'plus') {
if(this.stepFirst > 0 && this.inputVal < this.stepFirst){
value = this.stepFirst;
}else{
value = this.calcPlus(this.inputVal, this.step);
}
}
if (value > this.max ) {
value = this.max;
}else if (value < this.min) {
value = this.min;
}
// 新增stepFirst结束
this.inputVal = value;
this.handleChange(value, type);
},
// 处理用户手动输入的情况
onBlur(event) {
let val = 0;
let value = event.detail.value;
// 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
// 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
val = +value;
if (val > this.max) {
val = this.max;
} else if (val < this.min) {
val = this.min;
}
// 新增stepFirst开始
if(this.stepFirst > 0 && this.inputVal < this.stepFirst && this.inputVal>0){
val = this.stepFirst;
}
// 新增stepFirst结束
this.$nextTick(() => {
this.inputVal = val;
})
this.handleChange(val, 'blur');
},
handleChange(value, type) {
if (this.disabled) return;
// 清除定时器，避免造成混乱
if(this.innerChangeTimer) {
clearTimeout(this.innerChangeTimer);
this.innerChangeTimer = null;
}
// 发出input事件，修改通过v-model绑定的值，达到双向绑定的效果
this.changeFromInner = true;
// 一定时间内，清除changeFromInner标记，否则内部值改变后
// 外部通过程序修改value值，将会无效
this.innerChangeTimer = setTimeout(() => {
this.changeFromInner = false;
}, 150);
this.$emit('input', Number(value));
this.$emit(type, {
// 转为Number类型
value: Number(value),
index: this.index
})
},
/**
* 验证十进制数字
*/
isNumber(value) {
return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)
}
}
};
</script>
<style lang="scss" scoped>
.number-box {
display: inline-flex;
align-items: center;
}
.u-number-input {
position: relative;
text-align: center;
padding: 0;
margin: 0 6rpx;
display: flex;
align-items: center;
justify-content: center;
}
.u-icon-plus,
.u-icon-minus {
width: 60rpx;
display: flex;
justify-content: center;
align-items: center;
}
.u-icon-plus {
border-radius: 0 8rpx 8rpx 0;
}
.u-icon-minus {
border-radius: 8rpx 0 0 8rpx;
}
.u-icon-disabled {
color: #c8c9cc !important;
background: #f7f8fa !important;
}
.u-input-disabled {
color: #c8c9cc !important;
background-color: #f2f3f5 !important;
}
.num-btn{
font-weight:550;
position: relative;
top:-4rpx;
}
</style>