first

pages/order/components/confirmRefundPopup.vue

@@ -0,0 +1,77 @@
+<template>
+  <uni-popup ref="popup" type="top" mask-background-color="rgba(0,0,0,.5)" :safe-area="false">
+    <view class="card-wrapper">
+      <image class="icon-close" src="/static/iconImg/icon-x.svg" mode="scaleToFill" @tap="close" />
+      <view class="title">请输入支付密码</view>
+      <view class="sub-title">退款</view>
+      <view class="refund-money">￥{{ vdata.refundAmount }}</view>
+      <JPasswordInput v-if="vdata.isShowPwdInput" margin="0 50rpx" :focus="true" ref="pwdInput" @inputChange="inputChange" />
+    </view>
+  </uni-popup>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref, nextTick } from 'vue'
+const vdata = reactive({
+  refundAmount: 0,
+  isShowPwdInput: false,
+})
+const proms = {}
+const popup = ref(null)
+const pwdInput = ref(null)
+const open = (money, callBack) => {
+  vdata.refundAmount = money
+  vdata.callBack = callBack
+  popup.value.open()
+  
+   vdata.isShowPwdInput = false
+  nextTick(() => {
+	   vdata.isShowPwdInput = true
+  })
+  
+ 
+}
+const close = () => {
+  popup.value.close()
+  vdata.isShowPwdInput = false
+}
+// 输入框 e 输入的数字
+const inputChange = (e) => {
+  if (e.length >= 6) return vdata.callBack(e)
+}
+const clearInput = () => pwdInput.value.clearInput()
+defineExpose({ open, clearInput, close })
+</script>
+
+<style lang="scss" scoped>
+.card-wrapper {
+  margin: 0 50rpx;
+  padding-bottom: 50rpx;
+  margin-top: 162rpx;
+  background-color: $J-bg-ff;
+  border-radius: $J-b-r32;
+  .icon-close {
+    padding: 30rpx;
+    width: 60rpx;
+    height: 60rpx;
+  }
+  .title {
+    text-align: center;
+    font-size: 30rpx;
+    font-weight: 500;
+  }
+  .sub-title {
+    margin-top: 40rpx;
+    margin-bottom: 20rpx;
+    text-align: center;
+    font-size: 30rpx;
+    color: #808080;
+  }
+  .refund-money {
+    margin-bottom: 70rpx;
+    text-align: center;
+    font-size: 50rpx;
+    font-weight: 500;
+  }
+}
+</style>