源文件

jeepay-ui-uapp-cashier/pageMember/payMember/components/Remarks.vue

@@ -0,0 +1,71 @@
+<template>
+  <uni-popup ref="popup" type="center">
+    <view class="c-wrapper" :style="{ '--v-primary': calcThemeColor() }">
+      <view class="c-title">添加支付备注</view>
+      <view class="remarks-content">
+        <textarea class="remarks-input" v-model="pageData.remarkText" placeholder="请输入备注信息" @input="inputChange" maxlength="120" />
+      </view>
+      <view class="conf-but" @tap="close">确认</view>
+    </view>
+  </uni-popup>
+</template>
+
+<script setup>
+import { ref,reactive } from "vue"
+import { calcThemeColor } from "@/util/member.js"
+const props = defineProps({
+  value: ''
+})
+const emits = defineEmits(['update:value'])
+const pageData = reactive({
+    remarkText: props.value
+})
+const popup = ref(null)
+const open = (amount) => {
+  popup.value.open()
+}
+const close = () => popup.value.close()
+const inputChange = (e) => {
+  emits('update:value', e.detail.value)
+}
+defineExpose({ open })
+</script>
+
+<style lang="scss" scoped>
+.c-wrapper {
+  width: calc(100vw - 60rpx);
+  padding: 30rpx;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 20rpx;
+
+  .c-title {
+    margin-bottom: 30rpx;
+    font-weight: bold;
+    text-align: center;
+
+  }
+
+  .remarks-content {
+    width: 100%;
+    min-height: 160rpx;
+
+    .remarks-input {
+      width: 100%;
+      height: 100rpx;
+    }
+  }
+
+  .conf-but {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 30rpx;
+    margin-top: 30rpx;
+    height: 90rpx;
+    background-color: var(--v-primary);
+    border-radius: 15rpx;
+    color: #fff;
+  }
+}
+</style>