This commit is contained in:
zmj 2024-06-21 11:40:32 +08:00
parent 05a69374ea
commit c5af02d7c0
5 changed files with 347 additions and 6 deletions

View File

@ -93,11 +93,12 @@
<view class="row"
v-if="userInfo.user_ship == 4 || userInfo.user_ship == 5 || userInfo.user_ship == 6 || userInfo.user_ship == 1">
<!-- <view class="row"> -->
<!-- <view class="row"> -->
<view class="icon-text">
<image src="@/static/icon/YEZF.png" style="width:40rpx;height: 40rpx;" />
<text style="margin-left: 20rpx;font-size: 26rpx;">余额支付</text>
<text style="margin-left: 20rpx;font-size: 22rpx;color: #FFB76D;">( 可用¥{{userInfo.now_money}} )</text>
<text style="margin-left: 20rpx;font-size: 22rpx;color: #FFB76D;">( 可用¥{{userInfo.now_money}}
)</text>
</view>
<view class="icon" @click="onChoosePaytype(3)">
<image v-if="pay_type == 3" src="@/static/icon/check.png" />
@ -110,7 +111,8 @@
<view class="icon-text">
<image src="@/static/icon/cgkzf.png" style="width:40rpx;height: 40rpx;" />
<text style="margin-left: 20rpx;font-size: 26rpx;">采购款支付</text>
<text style="margin-left: 20rpx;font-size: 22rpx;color: #1296DB;">( 可用¥{{userInfo.purchase_funds}} )</text>
<text style="margin-left: 20rpx;font-size: 22rpx;color: #1296DB;">( 可用¥{{userInfo.purchase_funds}}
)</text>
</view>
<view class="icon" @click="onChoosePaytype(18)">
<image v-if="pay_type == 18" src="@/static/icon/check.png" />
@ -152,6 +154,7 @@
@change="changeShop" @search="searchShop" />
<modal title="尚未设置收货地址" content="您还没有添加收货地址,请点击添加" cancleText="添加地址" confirmText="继续支付" :show="toastAddressShow"
@close="addAddress" @change="goPay" />
<ZyPasswordboard v-model:visible="passwordBoardVisible" v-bind="passwordBoardProps" />
<!-- <modal title="是否要拨打电话" :content="`即将拨打电话${phone}`" cancleText="取消" confirmText="拨打" :show="callShow" @close="callShow = false"
@change="onCall" /> -->
</view>
@ -181,11 +184,9 @@
import {
createOrderApi
} from "@/api/order.js";
import ZyPasswordboard from '@/uni_modules/zy-passwordboard/components/zy-passwordboard/zy-passwordboard.vue';
const userInfo = useUserStore().userInfo;
console.log(userInfo)
//
let STORE_INFO = uni.getStorageSync('STORE_INFO');
if (STORE_INFO)
@ -357,9 +358,32 @@
const pay_type = ref('7');
//
const passwordBoardVisible = ref(false);
const handleItemClick = () => {
passwordBoardVisible.value = true;
};
const passwordBoardProps = {
title: '输入支付密码',
onComplete(value) {
console.log(value);
}
};
const createOrder = () => {
if (!pay_type.value) return uni.$u.toast('请选择支付方式');
let shareInfo = uni.getStorageSync('SHARE_INFO');
if (pay_type.value == 3 || pay_type.value == 17) {
passwordBoardVisible.value = true
return
}
createOrderApi({
spread_uid: (shareInfo && shareInfo.uid) ? shareInfo.uid : '',
cart_id: cartStore.cartList,

View File

@ -0,0 +1,4 @@
## 2022.0513.00012022-05-13
小程序样式不支持 *,调整样式配置
## 2022.0513.00002022-05-13
初建

View File

@ -0,0 +1,179 @@
<script setup lang="ts">
import { defineProps, defineEmits, ref, watch, computed } from 'vue';
const props = defineProps({
visible: { type: Boolean, default: () => true },
random: { type: Boolean, default: () => true },
num: { type: Number, default: () => 6 },
title: { type: String }
});
const emits = defineEmits<{
(event : 'update:visible', value : boolean);
(event : 'complete', value : string);
(event : 'close');
}>();
const tplInputs = computed(() => {
return Array(props.num).fill(0);
});
const refKeys = ref([]);
const makeKeys = () => {
refKeys.value = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'].sort(() => (props.random ? 0.5 - Math.random() : 0)).concat('删除');
refKeys.value.splice(9, 0, '清空');
};
watch(
() => props.visible,
newValue => {
if (newValue) {
makeKeys();
}
},
{ immediate: true }
);
const refValue = ref([]);
const handleKeyClick = (key : string | number) => {
switch (key.toLowerCase()) {
case '清空':
refValue.value = [];
break;
case '删除':
refValue.value.pop();
break;
default:
if (refValue.value.length < props.num) {
refValue.value.push(key);
}
break;
}
if (refValue.value.length === props.num) {
emits('complete', refValue.value.join(''));
}
};
const handleClose = $event => {
handleKeyClick('c');
emits('update:visible', false);
emits('close');
};
</script>
<template>
<uni-transition :show="props.visible">
<view class="zy-passwordboard" @click="handleClose">
<uni-transition :show="props.visible">
<view class="zy-passwordboard__board" @click.stop>
<uni-transition :mode-class="['slide-bottom']" :show="props.visible">
<view class="title" v-if="props.title">{{ props.title }}</view>
<view class="inputs">
<view class="input" v-for="(input, inputi) in tplInputs" :key="inputi"><text class="text"
:class="{ filled: refValue[inputi] }"></text></view>
</view>
<view class="keys">
<view class="key" v-for="key in refKeys" :key="key">
<text class="text" :class="[`key-${key}`]" @click="handleKeyClick(key)">{{ key }}</text>
</view>
</view>
</uni-transition>
</view>
</uni-transition>
</view>
</uni-transition>
</template>
<style lang="scss">
view,
text {
box-sizing: border-box;
}
.zy-passwordboard {
box-sizing: border-box;
position: fixed;
z-index: 999;
top: 0;
bottom: 0;
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
left: 0;
right: 0;
background-color: var(--bg-color, rgba(0, 0, 0, 0.3));
&__board {
position: absolute;
left: 0;
right: 0;
bottom: 0;
// padding: 10rpx;
background-color: white;
backdrop-filter: blur(2rpx);
border-radius: 30rpx 30rpx 0 0;
.title {
padding: 20rpx;
text-align: center;
color: #000000;
font-size: 35rpx;
padding-bottom: 0;
}
.inputs {
display: flex;
justify-content: center;
padding-top: 40rpx;
margin-bottom: 40rpx;
.input {
padding: 10rpx;
.text {
display: flex;
align-items: center;
justify-content: center;
width: 80rpx;
height: 80rpx;
background-color: #ffffff;
border-radius: 20rpx;
background-color: #E6E6E6;
&.filled:before {
content: '';
width: 30%;
height: 30%;
border-radius: 50%;
background-color: #000000;
}
}
}
}
.keys {
width: 101vw;
display: flex;
flex-wrap: wrap;
background-color: white;
.key {
flex: 0 1 33%;
padding: 10rpx;
border: 1px solid #E6E6E6;
.text {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 20rpx 10rpx;
background-color: #ffffff;
border-radius: 20rpx;
font-size: 34rpx;
font-weight: bold;
&.key- {
opacity: 1;
}
}
}
}
}
}
</style>

View File

@ -0,0 +1,89 @@
{
"id": "zy-passwordboard",
"displayName": "zy-passwordboard",
"version": "2022.0513.0001",
"description": "密码弹框",
"keywords": [
"zy-passwordboard",
"密码弹框",
"支付密码"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uni-transition"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "u",
"vue3": "y"
},
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "y",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "y",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u",
"小红书": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

View File

@ -0,0 +1,45 @@
# zy-passwordboard
密码弹框
## 兼容说明
仅基于H5进行了开发未进行全面测试后续用到再补
## 属性
|属性名 |类型 |说明 | 默认值 |
|:-- |:-- |:-- |:-- |
|visible|Boolean|是否显示(支持 v-model:visible | `false` |
|random |Boolean|是否随机排位 | `true` |
|num |Number |密码位数,过多显示会有问题 | `6` |
|title |String |显示标题 | -- |
## 事件
|事件名 |说明 |
|:-- |:-- |
| complete | 输入完毕 |
| colse | 关闭 |
## 样式说明
未使用 `scoped`, 通过顶层样式名`.zy-passwordboard`就可以进行调整。
## 使用案例
``` vue
<script setup lang="ts">
import { ref } from 'vue';
import ZyPasswordboard from '@/uni_modules/zy-passwordboard/components/zy-passwordboard/zy-passwordboard.vue';
const passwordBoardVisible = ref(false);
const handleItemClick = () => {
passwordBoardVisible.value = true;
};
const passwordBoardProps = {
title: '输入支付密码',
onComplete(value) {
console.log(value);
}
};
</script>
<template>
<button @click="handleItemClick"></button>
<ZyPasswordboard v-model:visible="passwordBoardVisible" v-bind="passwordBoardProps" />
</template>
```