<template>
  <view class="edit-wrapper">
    <view class="edit-input" style="padding: 40rpx">
      <view class="edit-title">
        <view>固定金额</view>
        <JSwitch />
      </view>
      <view class="edit-tips">启用后，可自定义码牌固定收款金额</view>
    </view>
    <view class="edit-input flex-center" style="margin-top: 30rpx">
      <view class="input-title">自定义金额</view>
      <uni-easyinput
        :inputBorder="false"
        v-model="params.info"
        type="digit"
        :clearable="false"
        placeholderStyle=" font-size: 30rpx;color:#ADADAD"
        placeholder="请输入自定义金额"
        :styles="styles"
      />
      <view class="input-title unit">(元)</view>
    </view>
    <view class="confirm-button flex-center" hover-class="touch-button">确认修改</view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const styles = reactive({
  backgroundColor: 'transparent',
  color: '#000',
  fontSize: '32rpx',
})
const params = reactive({
  info: '',
})
</script>

<style lang="scss" scoped>
.edit-input {
  padding: 0 20rpx;
  margin: 0 35rpx;
  margin-top: 150rpx;
  min-height: 120rpx;
  border-radius: 32rpx;
  background-color: #f7f7f7;
}
.input-title {
  margin-left: 40rpx;
  font-size: 30rpx;
  color: #4d4d4d;
}
.unit {
  margin: 0 40rpx 0 0;
}
.confirm-button {
  margin: 0 auto;
  margin-top: 90rpx;
  width: 400rpx;
  height: 110rpx;
  border-radius: 20rpx;
  font-size: 33rpx;
  font-weight: 500;
  color: #fff;
  background: $jeepay-bg-primary;
}
.edit-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30rpx;
  color: #4d4d4d;
}
.edit-tips {
  margin-top: 12rpx;
  font-size: 25rpx;
  color: #808080;
}
</style>
