71 lines
1.5 KiB
Vue
71 lines
1.5 KiB
Vue
<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> |