add

pagesOrder/settle/settle.vue

@@ -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,

uni_modules/zy-passwordboard/changelog.md

@@ -0,0 +1,4 @@
+## 2022.0513.0001（2022-05-13）
+小程序样式不支持 *，调整样式配置
+## 2022.0513.0000（2022-05-13）
+初建

uni_modules/zy-passwordboard/components/zy-passwordboard/zy-passwordboard.vue

@@ -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>

uni_modules/zy-passwordboard/package.json

@@ -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"
+				}
+			}
+		}
+	}
+}

uni_modules/zy-passwordboard/readme.md

@@ -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>
+```