add

2024-06-22 11:31:01 +08:00 · 2024-06-22 11:31:01 +08:00 · 6b2ebb94ab
parent bbff5152a9 d49221bcb4
commit 6b2ebb94ab
18 changed files with 1176 additions and 178 deletions
--- a/api/address.js
+++ b/api/address.js
@ -22,3 +22,11 @@ export const villageListApi = (data) => {
 export const brigadeListApi = (data) => {
 	return request.get('/brigade', data);
 }
+
+export const getMassageCode = (data) => {
+	return request.get('/user/user/send_sms', data);
+}
+
+export const setPayPassword = (data) => {
+	return request.post('/user/user/set_payPassword', data);
+}
--- a/components/goodPopup.vue
+++ b/components/goodPopup.vue
@ -14,8 +14,13 @@
 			</view>
 			<view class="row">
 				<view>商品价格</view>
-                <view>¥ {{datas.price}}</view>
+				<view>¥ {{ datas.price }} / {{ datas.unit_name }}</view>
 			</view>
+			<view class="row" v-if="datas.batch > 0">
+				<view>起批量</view>
+				<view>{{ datas.batch }}{{ datas.unit_name }}起批 </view>
+			</view>
+
 			<view class="row">
 				<view>小计</view>
 				<view style="color: #F55726;" v-if="+datas.cart_num < +datas.batch">
@ -26,15 +31,15 @@
 			<view v-if="datas.is_bulk" class="row">
 				<view>购买重量<text style="color: #F55726;">*</text></view>
 				<view style="flex: 1;">
-                    <up-input v-model="datas.cart_num" :cursorSpacing='120' type="number" border="none"
-                        placeholder="请输入购买重量" inputAlign="right"></up-input>
+					<up-input v-model="datas.cart_num" :cursorSpacing='120' type="digit" border="none" placeholder="请输入购买重量"
+						inputAlign="right"></up-input>
 				</view>
 			</view>
 			<view v-else class="row">
 				<view>购买数量<text style="color: #F55726;">*</text></view>
 				<view style="flex: 1;">
-                    <up-input v-model="datas.cart_num" :cursorSpacing='120' type="number" border="none"
-                        placeholder="请输入购买数量" inputAlign="right">
+					<up-input v-model="datas.cart_num" :cursorSpacing='120' type="digit" border="none" placeholder="请输入购买数量"
+						inputAlign="right">
 						<template #suffix>
 							<span style="color: #20b128;">{{ datas.unit_name }}</span>
 						</template>
@ -74,8 +79,9 @@
 });
 const setData = (e) => {
 	datas.value = e;
-        if (Number(e.batch) > 0) datas.value.cart_num = Number(e.batch).toFixed(0);
+	if (Number(e.batch) > 0) datas.value.cart_num = e.batch;
 	else datas.value.cart_num = '';
+
 }

 const emit = defineEmits(['close', 'change']);
--- a/config/app.js
+++ b/config/app.js
@ -1,8 +1,8 @@
 let BASE_URL
 import store from "@/store/user.js"
 // 环境
-// let env = "dev"
-let env = "prod"
+let env = "dev"
+// let env = "prod"
 // let env = "liu";

 switch (env) {
--- a/pages.json
+++ b/pages.json
@ -161,6 +161,13 @@
 						"navigationBarTitleText": "确认订单",
 						"enablePullDownRefresh": false
 					}
+				},
+				{
+					"path": "setPayPassword/index",
+					"style": {
+						"navigationBarTitleText": "设置密码",
+						"enablePullDownRefresh": false
+					}
 				}
 			]
 		},
@ -228,6 +235,8 @@
 						"enablePullDownRefresh": true
 					}
 				}
+
+
 			]
 		}
 	],
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@ -144,12 +144,17 @@
 									<text>{{item.spec}}</text>
 								</view>
 							</view>
-							<view style="display: flex;" v-if='userStore?.userInfo?.user_ship==1'>
-								<view class="price" style="margin-right: 10rpx;">￥{{item.vip_price}}</view>
-								<text class='price'>会员价</text>
+							<view style="display: flex;" v-if='item.batch>0'>
+								<view>{{item.batch}}{{item.unit_name }}起卖</view>
+							</view>
+							<view style="display: flex;align-items: center;" v-if='userStore?.userInfo?.user_ship==1'>
+								<text class='price' style="font-size: 24rpx;">会员价￥</text>
+								<text class="price" style="margin-right: 10rpx;">{{item.vip_price}}
+								</text>
+								<text class='price' style="font-size: 24rpx;">/{{item.unit_name}}</text>
 							</view>
 							<view class="price-btn">
-								<view class="price" style="font-size: 24rpx;">￥{{item.price}}</view>
+								<view class="price" style="font-size: 24rpx;">￥{{item.price}}/{{item.unit_name}}</view>
 								<view class="btn">
 									<u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
 								</view>
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@ -16,10 +16,10 @@
 						<up-button @click="weixinLogin" color="#20B128" size="large"><up-icon name="weixin-fill"
 								color="#fff" size="28"></up-icon>微信快捷登录</up-button>
 					</view>
-					<!-- <view class="btn">
+					<view class="btn" v-if="config.ENV=='dev'">
 						<up-button @click="navgo('/pages/login/test')" color="#20B128" size="large"><up-icon
 								name="weixin-fill" color="#fff" size="28"></up-icon>账号登录</up-button>
-					</view> -->
+					</view>
 					<!-- <view class="btn">
            <up-button @click="officialCode" color="#20B128" size="large"><up-icon name="weixin-fill" color="#fff"
                size="28"></up-icon>公众号授权</up-button>
@ -96,6 +96,9 @@
 	import useUserStore from "@/store/user.js"
 	import bindPhone from "@/components/bindPhone.vue"
 	import modal from "@/components/modal.vue"
+	import {
+		config
+	} from "@/config/app.js"


 	const showOfficial = ref(false);
--- a/pages/my/my.vue
+++ b/pages/my/my.vue
@ -108,7 +108,7 @@
 		<view class="card">
 			<up-cell-group>
 				<up-cell title="我的地址" :isLink="true" url="/pagesOrder/addressList/addressList"></up-cell>
-				<!-- <up-cell title="支付密码" :isLink="true" url="/pagesOrder/setPayPassword/index"></up-cell> -->
+				<up-cell title="支付密码" :isLink="true" url="/pagesOrder/setPayPassword/index"></up-cell>
 			</up-cell-group>
 		</view>

--- a/pagesOrder/setPayPassword/index.vue
+++ b/pagesOrder/setPayPassword/index.vue
@ -1,38 +1,119 @@
 <template>
 	<view class='card'>
-		<up-input v-model="code" placeholder="手机号" border="none"></up-input>
-		<up-line color="#D3E3FD" style="margin: 30rpx 0;"></up-line>
+		<up-input v-model="form.phone" placeholder="手机号" border="none" readonly></up-input>
+		<view style="margin: 30rpx 0;">
+			<up-line color="#D3E3FD"></up-line>
+		</view>
 		<view style="display: flex;justify-content: space-between;align-items: center;">
-			<up-input v-model="code" placeholder="验证码" border="none"></up-input>
+			<up-input v-model="form.code" placeholder="验证码" border="none" type='number'></up-input>
 			<view class="code-btn">
-				<up-line color="grey" direction="col" length="30rpx" style="margin: 0 20rpx;"></up-line>
-				<text class='btn-text'>获取验证码</text>
+				<view style="margin: 0 20rpx;">
+					<up-line color="grey" direction="col" length="30rpx"></up-line>
+				</view>
+				<text class='btn-text' style="color: grey;" v-if='cutDown'>重新获取({{cutDown}})</text>
+				<text @click="getCode" class='btn-text' v-else> {{flag?'获取验证码':'重新获取' }} </text>
 			</view>
 		</view>
 	</view>
 	<view class='card'>
-		<up-input v-model="code" placeholder="请输入你的密码" border="none" type='password' readonly></up-input>
-		<up-line color="#D3E3FD" style="margin: 30rpx 0;"></up-line>
-		<up-input v-model="code" placeholder="请再次输入你的密码" border="none" type='password' readonly></up-input>
+		<view @click="showKeyBorad=true,type=1">
+			<up-input style="pointer-events: none;" type='password' v-model="form.password" placeholder="请输入你的密码"
+				border="none" readonly></up-input>
+		</view>
+		<view style="margin: 30rpx 0;">
+			<up-line color="#D3E3FD"></up-line>
+		</view>
+		<view @click="showKeyBorad=true,type=2">
+			<up-input style="pointer-events: none;" type='password' v-model="form.rePassword" placeholder="请再次输入你的密码"
+				border="none" readonly></up-input>
+		</view>
 	</view>

 	<view class='submit-btn'>
 		<up-button color="#20B128" shape="circle" @click="submit">确认</up-button>
 	</view>
-
+	<up-keyboard dotDisabled safeAreaInsetBottom ref="uKeyboard" @close="showKeyBorad=false" mode="number"
+		:tooltip="false" :show="showKeyBorad" @change='onKetDown' @backspace='backspaceFn' />
 </template>

 <script setup>
+	import useUserStore from "@/store/user";
 	import {
-		ref
+		getMassageCode,
+		setPayPassword
+	} from "@/api/address.js"
+	import {
+		ref,
+		reactive
 	} from "vue"

+	const userInfo = useUserStore().userInfo;
+	const form = reactive({
+		phone: userInfo.mobile, //手机号
+		code: "", //验证码
+		password: "", //6位数密码
+		rePassword: "" //确认密码
+	})

-
-
+	// 获取验证码
+	const cutDown = ref(0)
+	const flag = ref(true)
 	const code = ref('')
-	const submit = () => {
+	const checkPhone = (phone) => {
+		const regex = /^1[3-9]\d{9}$/;
+		return regex.test(phone) ? true : false
+	}

+	const getCode = async () => {
+		if (!checkPhone(form.phone)) return uni.$u.toast('请输入正确的手机号')
+		await getMassageCode()
+		flag.value = false
+		cutDown.value = 60
+		let timer = setInterval(() => {
+			cutDown.value--
+			if (cutDown.value <= 0) clearInterval(timer)
+		}, 1000)
+	}
+	// 获取验证码结束
+
+	// 键盘事件
+	const showKeyBorad = ref(false)
+	const type = ref(1) // 1 输入密码 2 再次输入密码
+
+	const onKetDown = (e) => {
+		if (type.value == 1) {
+			form.password.length < 6 ?
+				form.password += e :
+				showKeyBorad.value = false
+		} else {
+			form.rePassword.length < 6 ?
+				form.rePassword += e :
+				showKeyBorad.value = false
+		}
+	}
+
+	const backspaceFn = () => {
+		if (type.value == 1) {
+			form.password = form.password.slice(0, -1);
+		} else {
+			form.rePassword = form.rePassword.slice(0, -1);
+		}
+	}
+
+	// 键盘事件结束
+
+
+
+	const submit = async () => {
+		if (!form.code) return uni.$u.toast('请输入验证码');
+		if (form.password !== form.rePassword) return uni.$u.toast('两次密码不一致');
+		await setPayPassword({
+			...form
+		})
+		uni.$u.toast('设置成功')
+		setTimeout(() => {
+			uni.navigateBack()
+		}, 1000)
 	}
 </script>

--- a/pagesOrder/settle/settle.vue
+++ b/pagesOrder/settle/settle.vue
@ -67,7 +67,7 @@
 			<view class="row" v-if="[4,5,6].includes(userInfo.user_ship)" style="color: red;">
 				<view>优惠减免</view>
 				<view>
-					<text>-¥</text>{{ c_price(orderInfo.preferential_amount, 0) }}<text>.{{ c_price(orderInfo.preferential_amount, 1) }}</text>
+					<text>-¥</text>{{ c_price(orderInfo.activity_price, 0) }}<text>.{{ c_price(orderInfo.activity_price, 1) }}</text>
 				</view>
 			</view>
 			<view class="row" v-if="userInfo.user_ship==1 ">
@ -97,7 +97,8 @@
 				<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,8 +154,11 @@
 			@change="changeShop" @search="searchShop" />
 		<modal title="尚未设置收货地址" content="您还没有添加收货地址，请点击添加" cancleText="添加地址" confirmText="继续支付" :show="toastAddressShow"
 			@close="addAddress" @change="goPay" />
-		<!-- <modal title="是否要拨打电话" :content="`即将拨打电话${phone}`" cancleText="取消" confirmText="拨打" :show="callShow" @close="callShow = false"
-      @change="onCall" /> -->
+		<ZyPasswordboard v-if='passwordBoardVisible' v-model:visible="passwordBoardVisible" v-bind="passwordBoardProps"
+			@close='closeKeyBord' />
+		<up-modal :show="showModal" title="您还没设置密码" :closeOnClickOverlay="true" zoom confirmText='去设置' showCancelButton
+			@close='showModal=false' @cancel='showModal=false' @confirm="navgo('/pagesOrder/setPayPassword/index')"
+			confirmColor='#27B52F' cancelText='取消'></up-modal>
 	</view>
 </template>

@ -175,17 +180,16 @@
 		checkOrderApi
 	} from "@/api/cart.js";
 	import {
+		userInfoApi,
 		addressListsApi,
 		merchantListApi
 	} from "@/api/user.js";
 	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)
@ -297,14 +301,6 @@
 	const searchShop = (e) => {
 		getMerchantList(e)
 	}
-
-	// 拨打电话
-	// const callShow = ref(false)
-	// const phone = ref('');
-	// const callphone = (e) => {
-	//   callShow.value = true;
-	//   phone.value = e;
-	// }
 	const onCall = (e) => {
 		uni.makePhoneCall({
 			phoneNumber: e,
@ -357,10 +353,28 @@

 	const pay_type = ref('7');

-	const createOrder = () => {
-		if (!pay_type.value) return uni.$u.toast('请选择支付方式');
+
+	// 支付密码
+	const passwordBoardVisible = ref(false);
+
+	const passwordBoardProps = {
+		title: '输入支付密码',
+		onComplete(value) {
+			password.value = value
+			passwordBoardVisible.value = false
+			payFn()
+		}
+	};
+
+	const closeKeyBord = () => {
+		password.value = ''
+	}
+
+	const password = ref('')
+	const payFn = () => {
 		let shareInfo = uni.getStorageSync('SHARE_INFO');
 		createOrderApi({
+			password: password.value,
 			spread_uid: (shareInfo && shareInfo.uid) ? shareInfo.uid : '',
 			cart_id: cartStore.cartList,
 			address_id: addressInfo.value.address_id,
@ -423,6 +437,24 @@
 		})
 	}

+	const showModal = ref(false)
+	const navgo = (url) => {
+		showModal.value &&= false
+		uni.navigateTo({
+			url
+		})
+	}
+
+	const createOrder = async () => {
+		if (!pay_type.value) return uni.$u.toast('请选择支付方式');
+		if (pay_type.value == 3 || pay_type.value == 18) {
+			let res = await userInfoApi()
+			return res.data.pay_password ? passwordBoardVisible.value = true : showModal.value = true
+		}
+		payFn()
+	}
+
+
 	const c_price = (price, index = 0) => {
 		price = price + '';
 		return price.split('.')[index] || (index ? '00' : '0');
--- a/uni_modules/uni-transition/changelog.md
+++ b/uni_modules/uni-transition/changelog.md
@ -0,0 +1,24 @@
+## 1.3.3（2024-04-23）
+- 修复 当元素会受变量影响自动隐藏的bug
+## 1.3.2（2023-05-04）
+- 修复 NVUE 平台报错的问题
+## 1.3.1（2021-11-23）
+- 修复 init 方法初始化问题
+## 1.3.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
+## 1.2.1（2021-09-27）
+- 修复 init 方法不生效的 Bug
+## 1.2.0（2021-07-30）
+- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.1（2021-05-12）
+- 新增 示例地址
+- 修复 示例项目缺少组件的 Bug
+## 1.1.0（2021-04-22）
+- 新增 通过方法自定义动画
+- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
+- 优化 动画触发逻辑，使动画更流畅
+- 优化 支持单独的动画类型
+- 优化 文档示例
+## 1.0.2（2021-02-05）
+- 调整为 uni_modules 目录规范
--- a/uni_modules/uni-transition/components/uni-transition/createAnimation.js
+++ b/uni_modules/uni-transition/components/uni-transition/createAnimation.js
@ -0,0 +1,131 @@
+// const defaultOption = {
+// 	duration: 300,
+// 	timingFunction: 'linear',
+// 	delay: 0,
+// 	transformOrigin: '50% 50% 0'
+// }
+// #ifdef APP-NVUE
+const nvueAnimation = uni.requireNativePlugin('animation')
+// #endif
+class MPAnimation {
+	constructor(options, _this) {
+		this.options = options
+		// 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
+		this.animation = uni.createAnimation({
+			...options
+		})
+		this.currentStepAnimates = {}
+		this.next = 0
+		this.$ = _this
+
+	}
+
+	_nvuePushAnimates(type, args) {
+		let aniObj = this.currentStepAnimates[this.next]
+		let styles = {}
+		if (!aniObj) {
+			styles = {
+				styles: {},
+				config: {}
+			}
+		} else {
+			styles = aniObj
+		}
+		if (animateTypes1.includes(type)) {
+			if (!styles.styles.transform) {
+				styles.styles.transform = ''
+			}
+			let unit = ''
+			if(type === 'rotate'){
+				unit = 'deg'
+			}
+			styles.styles.transform += `${type}(${args+unit}) `
+		} else {
+			styles.styles[type] = `${args}`
+		}
+		this.currentStepAnimates[this.next] = styles
+	}
+	_animateRun(styles = {}, config = {}) {
+		let ref = this.$.$refs['ani'].ref
+		if (!ref) return
+		return new Promise((resolve, reject) => {
+			nvueAnimation.transition(ref, {
+				styles,
+				...config
+			}, res => {
+				resolve()
+			})
+		})
+	}
+
+	_nvueNextAnimate(animates, step = 0, fn) {
+		let obj = animates[step]
+		if (obj) {
+			let {
+				styles,
+				config
+			} = obj
+			this._animateRun(styles, config).then(() => {
+				step += 1
+				this._nvueNextAnimate(animates, step, fn)
+			})
+		} else {
+			this.currentStepAnimates = {}
+			typeof fn === 'function' && fn()
+			this.isEnd = true
+		}
+	}
+
+	step(config = {}) {
+		// #ifndef APP-NVUE
+		this.animation.step(config)
+		// #endif
+		// #ifdef APP-NVUE
+		this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
+		this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
+		this.next++
+		// #endif
+		return this
+	}
+
+	run(fn) {
+		// #ifndef APP-NVUE
+		this.$.animationData = this.animation.export()
+		this.$.timer = setTimeout(() => {
+			typeof fn === 'function' && fn()
+		}, this.$.durationTime)
+		// #endif
+		// #ifdef APP-NVUE
+		this.isEnd = false
+		let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
+		if(!ref) return
+		this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
+		this.next = 0
+		// #endif
+	}
+}
+
+
+const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
+	'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
+	'translateZ'
+]
+const animateTypes2 = ['opacity', 'backgroundColor']
+const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
+animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
+	MPAnimation.prototype[type] = function(...args) {
+		// #ifndef APP-NVUE
+		this.animation[type](...args)
+		// #endif
+		// #ifdef APP-NVUE
+		this._nvuePushAnimates(type, args)
+		// #endif
+		return this
+	}
+})
+
+export function createAnimation(option, _this) {
+	if(!_this) return
+	clearTimeout(_this.timer)
+	return new MPAnimation(option, _this)
+}
--- a/uni_modules/uni-transition/components/uni-transition/uni-transition.vue
+++ b/uni_modules/uni-transition/components/uni-transition/uni-transition.vue
@ -0,0 +1,286 @@
+<template>
+  <!-- #ifndef APP-NVUE -->
+  <view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
+  <!-- #endif -->
+  <!-- #ifdef APP-NVUE -->
+  <view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
+  <!-- #endif -->
+</template>
+
+<script>
+import { createAnimation } from './createAnimation'
+
+/**
+ * Transition 过渡动画
+ * @description 简单过渡动画组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=985
+ * @property {Boolean} show = [false|true] 控制组件显示或隐藏
+ * @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
+ *  @value fade 渐隐渐出过渡
+ *  @value slide-top 由上至下过渡
+ *  @value slide-right 由右至左过渡
+ *  @value slide-bottom 由下至上过渡
+ *  @value slide-left 由左至右过渡
+ *  @value zoom-in 由小到大过渡
+ *  @value zoom-out 由大到小过渡
+ * @property {Number} duration 过渡动画持续时间
+ * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
+ */
+export default {
+	name: 'uniTransition',
+	emits:['click','change'],
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		modeClass: {
+			type: [Array, String],
+			default() {
+				return 'fade'
+			}
+		},
+		duration: {
+			type: Number,
+			default: 300
+		},
+		styles: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		customClass:{
+			type: String,
+			default: ''
+		},
+		onceRender:{
+			type:Boolean,
+			default:false
+		},
+	},
+	data() {
+		return {
+			isShow: false,
+			transform: '',
+			opacity: 1,
+			animationData: {},
+			durationTime: 300,
+			config: {}
+		}
+	},
+	watch: {
+		show: {
+			handler(newVal) {
+				if (newVal) {
+					this.open()
+				} else {
+					// 避免上来就执行 close,导致动画错乱
+					if (this.isShow) {
+						this.close()
+					}
+				}
+			},
+			immediate: true
+		}
+	},
+	computed: {
+		// 生成样式数据
+		stylesObject() {
+			let styles = {
+				...this.styles,
+				'transition-duration': this.duration / 1000 + 's'
+			}
+			let transform = ''
+			for (let i in styles) {
+				let line = this.toLine(i)
+				transform += line + ':' + styles[i] + ';'
+			}
+			return transform
+		},
+		// 初始化动画条件
+		transformStyles() {
+			return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
+		}
+	},
+	created() {
+		// 动画默认配置
+		this.config = {
+			duration: this.duration,
+			timingFunction: 'ease',
+			transformOrigin: '50% 50%',
+			delay: 0
+		}
+		this.durationTime = this.duration
+	},
+	methods: {
+		/**
+		 *  ref 触发 初始化动画
+		 */
+		init(obj = {}) {
+			if (obj.duration) {
+				this.durationTime = obj.duration
+			}
+			this.animation = createAnimation(Object.assign(this.config, obj),this)
+		},
+		/**
+		 * 点击组件触发回调
+		 */
+		onClick() {
+			this.$emit('click', {
+				detail: this.isShow
+			})
+		},
+		/**
+		 * ref 触发 动画分组
+		 * @param {Object} obj
+		 */
+		step(obj, config = {}) {
+			if (!this.animation) return
+			for (let i in obj) {
+				try {
+					if(typeof obj[i] === 'object'){
+						this.animation[i](...obj[i])
+					}else{
+						this.animation[i](obj[i])
+					}
+				} catch (e) {
+					console.error(`方法 ${i} 不存在`)
+				}
+			}
+			this.animation.step(config)
+			return this
+		},
+		/**
+		 *  ref 触发 执行动画
+		 */
+		run(fn) {
+			if (!this.animation) return
+			this.animation.run(fn)
+		},
+		// 开始过度动画
+		open() {
+			clearTimeout(this.timer)
+			this.transform = ''
+			this.isShow = true
+			let { opacity, transform } = this.styleInit(false)
+			if (typeof opacity !== 'undefined') {
+				this.opacity = opacity
+			}
+			this.transform = transform
+			// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
+			this.$nextTick(() => {
+				// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
+				this.timer = setTimeout(() => {
+					this.animation = createAnimation(this.config, this)
+					this.tranfromInit(false).step()
+					this.animation.run()
+					this.$emit('change', {
+						detail: this.isShow
+					})
+				}, 20)
+			})
+		},
+		// 关闭过度动画
+		close(type) {
+			if (!this.animation) return
+			this.tranfromInit(true)
+				.step()
+				.run(() => {
+					this.isShow = false
+					this.animationData = null
+					this.animation = null
+					let { opacity, transform } = this.styleInit(false)
+					this.opacity = opacity || 1
+					this.transform = transform
+					this.$emit('change', {
+						detail: this.isShow
+					})
+				})
+		},
+		// 处理动画开始前的默认样式
+		styleInit(type) {
+			let styles = {
+				transform: ''
+			}
+			let buildStyle = (type, mode) => {
+				if (mode === 'fade') {
+					styles.opacity = this.animationType(type)[mode]
+				} else {
+					styles.transform += this.animationType(type)[mode] + ' '
+				}
+			}
+			if (typeof this.modeClass === 'string') {
+				buildStyle(type, this.modeClass)
+			} else {
+				this.modeClass.forEach(mode => {
+					buildStyle(type, mode)
+				})
+			}
+			return styles
+		},
+		// 处理内置组合动画
+		tranfromInit(type) {
+			let buildTranfrom = (type, mode) => {
+				let aniNum = null
+				if (mode === 'fade') {
+					aniNum = type ? 0 : 1
+				} else {
+					aniNum = type ? '-100%' : '0'
+					if (mode === 'zoom-in') {
+						aniNum = type ? 0.8 : 1
+					}
+					if (mode === 'zoom-out') {
+						aniNum = type ? 1.2 : 1
+					}
+					if (mode === 'slide-right') {
+						aniNum = type ? '100%' : '0'
+					}
+					if (mode === 'slide-bottom') {
+						aniNum = type ? '100%' : '0'
+					}
+				}
+				this.animation[this.animationMode()[mode]](aniNum)
+			}
+			if (typeof this.modeClass === 'string') {
+				buildTranfrom(type, this.modeClass)
+			} else {
+				this.modeClass.forEach(mode => {
+					buildTranfrom(type, mode)
+				})
+			}
+
+			return this.animation
+		},
+		animationType(type) {
+			return {
+				fade: type ? 0 : 1,
+				'slide-top': `translateY(${type ? '0' : '-100%'})`,
+				'slide-right': `translateX(${type ? '0' : '100%'})`,
+				'slide-bottom': `translateY(${type ? '0' : '100%'})`,
+				'slide-left': `translateX(${type ? '0' : '-100%'})`,
+				'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
+				'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
+			}
+		},
+		// 内置动画类型与实际动画对应字典
+		animationMode() {
+			return {
+				fade: 'opacity',
+				'slide-top': 'translateY',
+				'slide-right': 'translateX',
+				'slide-bottom': 'translateY',
+				'slide-left': 'translateX',
+				'zoom-in': 'scale',
+				'zoom-out': 'scale'
+			}
+		},
+		// 驼峰转中横线
+		toLine(name) {
+			return name.replace(/([A-Z])/g, '-$1').toLowerCase()
+		}
+	}
+}
+</script>
+
+<style></style>
--- a/uni_modules/uni-transition/package.json
+++ b/uni_modules/uni-transition/package.json
@ -0,0 +1,85 @@
+{
+  "id": "uni-transition",
+  "displayName": "uni-transition 过渡动画",
+  "version": "1.3.3",
+  "description": "元素的简单过渡动画",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "动画",
+    "过渡",
+    "过渡动画"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}
--- a/uni_modules/uni-transition/readme.md
+++ b/uni_modules/uni-transition/readme.md
@ -0,0 +1,11 @@
+
+
+## Transition 过渡动画
+> **组件名：uni-transition**
+> 代码块： `uTransition`
+
+
+元素过渡动画
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
--- a/uni_modules/zy-passwordboard/changelog.md
+++ b/uni_modules/zy-passwordboard/changelog.md
@ -0,0 +1,4 @@
+## 2022.0513.0001（2022-05-13）
+小程序样式不支持 *，调整样式配置
+## 2022.0513.0000（2022-05-13）
+初建
--- a/uni_modules/zy-passwordboard/components/zy-passwordboard/zy-passwordboard.vue
+++ b/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>
--- a/uni_modules/zy-passwordboard/package.json
+++ b/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"
+				}
+			}
+		}
+	}
+}
--- a/uni_modules/zy-passwordboard/readme.md
+++ b/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>
+```