medical-mall/pages/mall/admin/setting/interface/payment.uvue

<template>
  <view class="admin-page-container">
    <view class="page-header">
      <view class="breadcrumb">
        <text class="bc-item">设置</text>
        <text class="bc-sep">/</text>
        <text class="bc-item">接口配置</text>
        <text class="bc-sep">/</text>
        <text class="bc-item active">商城支付配置</text>
      </view>
    </view>

    <view class="content-card">
      <view class="tabs-header">
        <view class="tab-item active"><text class="tab-text">基础配置</text></view>
        <view class="tab-item"><text class="tab-text">微信支付配置</text></view>
      </view>

      <view class="config-view">
        <view class="form-content">
          <view class="form-row">
            <view class="form-label">余额支付:</view>
            <view class="form-input-box">
              <radio-group class="form-radio-group" @change="onBalancePayChange">
                <label class="radio-label">
                  <radio value="1" :checked="form.balancePay == '1'" color="#2d8cf0" />
                  <text class="radio-text">开启</text>
                </label>
                <label class="radio-label">
                  <radio value="0" :checked="form.balancePay == '0'" color="#2d8cf0" />
                  <text class="radio-text">关闭</text>
                </label>
              </radio-group>
              <text class="form-tips">余额支付请选择开启或关闭</text>
            </view>
          </view>

          <view class="form-row">
            <view class="form-label">好友代付:</view>
            <view class="form-input-box">
              <radio-group class="form-radio-group" @change="onFriendPayChange">
                <label class="radio-label">
                  <radio value="1" :checked="form.friendPay == '1'" color="#2d8cf0" />
                  <text class="radio-text">开启</text>
                </label>
                <label class="radio-label">
                  <radio value="0" :checked="form.friendPay == '0'" color="#2d8cf0" />
                  <text class="radio-text">关闭</text>
                </label>
              </radio-group>
              <text class="form-tips">好友代付开关，关闭后付款类型不显示好友代付</text>
            </view>
          </view>

          <view class="form-actions">
            <button class="submit-btn" type="primary" @click="handleSubmit">提交</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, reactive } from 'vue'

const form = reactive({
  balancePay: '1',
  friendPay: '1'
})

const onBalancePayChange = (e: any) => {
  form.balancePay = e.detail.value
}

const onFriendPayChange = (e: any) => {
  form.friendPay = e.detail.value
}

const handleSubmit = () => {
  uni.showToast({ title: '提交成功' })
}
</script>

<style scoped>
.admin-page-container {
  min-height: 100vh;
  background-color: #f5f7f9;
  padding: 20px;
}

.breadcrumb {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}

.bc-item { font-size: 14px; color: #999; }
.bc-item.active { color: #333; }
.bc-sep { margin: 0 8px; color: #ccc; }

.content-card {
  background-color: #fff;
  border-radius: 4px;
}

.tabs-header {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 20px;
}

.tab-item {
  padding: 15px 20px;
  cursor: pointer;
}

.tab-text {
  font-size: 14px;
  color: #666;
}

.tab-item.active {
  border-bottom: 2px solid #2d8cf0;
}

.tab-item.active .tab-text {
  color: #2d8cf0;
  font-weight: bold;
}

.config-view {
  padding: 24px;
}

.form-content {
  padding-left: 20px;
}

.form-row {
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
  align-items: flex-start;
}

.form-label {
  width: 100px;
  font-size: 14px;
  color: #333;
  text-align: right;
  margin-right: 20px;
  padding-top: 8px;
}

.form-input-box {
  flex: 1;
}

.form-radio-group {
  display: flex;
  flex-direction: row;
  height: 36px;
  align-items: center;
}

.radio-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 24px;
}

.radio-text {
  font-size: 14px;
  margin-left: 8px;
}

.form-tips {
  display: block;
  font-size: 12px;
  color: #bfbfbf;
  margin-top: 12px;
  line-height: 1.6;
}

.form-actions {
  margin-top: 40px;
  padding-left: 120px;
}

.submit-btn {
  width: 80px;
  height: 36px;
  background-color: #2d8cf0;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
}
</style>