medical-mall/pages/mall/admin/marketing/integral/config.uvue

<template>
  <view class="admin-marketing-integral-config">
    <view class="config-card box-shadow">
      <view class="tabs-container">
        <view class="tab-item" :class="{ active: activeTab == 0 }" @click="activeTab = 0">基础配置</view>
        <view class="tab-item" :class="{ active: activeTab == 1 }" @click="activeTab = 1">抵扣配置</view>
        <view class="tab-item" :class="{ active: activeTab == 2 }" @click="activeTab = 2">过期配置</view>
      </view>

      <view class="config-body">
        <!-- 基础配置 -->
        <view v-if="activeTab == 0" class="config-section">
          <view class="form-item">
            <view class="item-label">积分名称：</view>
            <view class="item-content">
              <input class="admin-input" v-model="form.integral_name" placeholder="积分" />
              <text class="desc">用户看到的积分名称，如：金豆、积分</text>
            </view>
          </view>
          <view class="form-item">
            <view class="item-label">积分赠送单位：</view>
            <view class="item-content">
              <input class="admin-input-long" type="number" v-model="form.integral_unit" />
              <text class="desc">下单消费1元赠送多少积分</text>
            </view>
          </view>
          <view class="form-item">
            <view class="item-label">积分冻结时间：</view>
            <view class="item-content">
              <view class="input-with-unit">
                <input class="admin-input-unit" type="number" v-model="form.freeze_time" />
                <text class="unit">天</text>
              </view>
              <text class="desc">订单确认收货后，赠送积分需要冻结多少天转为可用积分</text>
            </view>
          </view>
        </view>

        <!-- 抵扣配置 -->
        <view v-if="activeTab == 1" class="config-section">
          <view class="form-item">
            <view class="item-label">积分抵扣比例：</view>
            <view class="item-content">
              <view class="input-with-unit">
                <input class="admin-input-unit" v-model="form.integral_ratio" />
                <text class="unit">元</text>
              </view>
              <text class="desc">1积分可抵扣多少元</text>
            </view>
          </view>
          <view class="form-item">
            <view class="item-label">积分抵扣上限：</view>
            <view class="item-content">
              <view class="input-with-unit">
                <input class="admin-input-unit" type="number" v-model="form.integral_max" />
                <text class="unit">%</text>
              </view>
              <text class="desc">单笔订单最高可抵扣金额比例（0-100）</text>
            </view>
          </view>
        </view>

        <!-- 过期配置 -->
        <view v-if="activeTab == 2" class="config-section">
          <view class="form-item">
            <view class="item-label">积分有效期：</view>
            <view class="item-content">
              <radio-group class="radio-group" @change="validTypeChange">
                <label class="radio-label">
                  <radio value="0" :checked="form.valid_type == 0" /> 永久有效
                </label>
                <label class="radio-label">
                  <radio value="1" :checked="form.valid_type == 1" /> 固定时长
                </label>
              </radio-group>
            </view>
          </view>
          <view class="form-item" v-if="form.valid_type == 1">
            <view class="item-label">固定时长：</view>
            <view class="item-content">
              <view class="input-with-unit">
                <input class="admin-input-unit" type="number" v-model="form.valid_year" />
                <text class="unit">年</text>
              </view>
              <text class="desc">从积分获得日期起，多少年后过期</text>
            </view>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="form-ops">
          <button class="submit-btn" @click="handleSubmit">保存设置</button>
        </view>
      </view>
    </view>
  </view>
</template>

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

const activeTab = ref(0)
const form = reactive({
  integral_name: '积分',
  integral_unit: 10,
  integral_ratio: 0.1,
  integral_max: 50,
  freeze_time: 7,
  valid_type: 0,
  valid_year: 1
})

const validTypeChange = (e: any) => {
  form.valid_type = parseInt(e.detail.value as string)
}

const handleSubmit = () => {
  uni.showLoading({ title: '保存中...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '保存成功', icon: 'success' })
  }, 1000)
}
</script>

<style scoped>
.admin-marketing-integral-config {
  padding: 0px;
}

.box-shadow {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.config-card {
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

/* 顶部标签 */
.tabs-container {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e8eaec;
  padding: 0 20px;
}
.tab-item {
  padding: 15px 25px;
  font-size: 14px;
  color: #515a6e;
  cursor: pointer;
  position: relative;
}
.tab-item.active {
  color: #2d8cf0;
}
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #2d8cf0;
}

.config-body {
  padding: 40px 60px;
}

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

.item-label {
  width: 140px;
  font-size: 14px;
  color: #515a6e;
  text-align: right;
  padding-right: 20px;
  line-height: 32px;
}

.item-content {
  flex: 1;
}

.admin-input, .admin-input-long {
  width: 320px;
  height: 32px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 14px;
}

.input-with-unit {
  width: 320px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  overflow: hidden;
}
.admin-input-unit {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  font-size: 14px;
  border: none;
}
.unit {
  padding: 0 12px;
  background-color: #f8f8f9;
  border-left: 1px solid #dcdee2;
  font-size: 12px;
  color: #808695;
  height: 32px;
  line-height: 32px;
}

.desc {
  display: block;
  font-size: 12px;
  color: #c5c8ce;
  margin-top: 8px;
}

.radio-group {
  display: flex;
  flex-direction: row;
  height: 32px;
  align-items: center;
}
.radio-label {
  margin-right: 20px;
  font-size: 14px;
  color: #515a6e;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.form-ops {
  margin-top: 50px;
  padding-left: 140px;
}
.submit-btn {
  width: 120px;
  height: 36px;
  line-height: 36px;
  background-color: #2d8cf0;
  color: #fff;
  font-size: 14px;
  border: none;
  border-radius: 4px;
}
</style>