<template>
  <view class="marketing-member-config">
    <view class="config-card border-shadow">
      <view class="config-header">
        <text class="config-title">会员基础配置</text>
      </view>
      <view class="config-body">
        <view class="config-item">
          <view class="item-label">
            <text class="label-txt">是否开启付费会员：</text>
            <text class="label-desc">关闭之后，商城将不再展示付费会员相关功能</text>
          </view>
          <view class="item-content">
            <view class="switch-mock" :class="{ active: config.is_open }" @click="config.is_open = !config.is_open">
              <view class="switch-dot"></view>
              <text class="switch-txt">{{ config.is_open ? '开启' : '关闭' }}</text>
            </view>
          </view>
        </view>

        <view class="config-item">
          <view class="item-label">
            <text class="label-txt">会员期内背景图：</text>
            <text class="label-desc">建议尺寸: 700*320px</text>
          </view>
          <view class="item-content">
            <view class="upload-box" @click="handleUpload('bg')">
              <image v-if="config.bg_img" :src="config.bg_img" class="preview-img"></image>
              <view v-else class="upload-placeholder">
                <text class="plus">+</text>
                <text class="upload-txt">选择图片</text>
              </view>
            </view>
          </view>
        </view>

        <view class="config-item">
          <view class="item-label">
            <text class="label-txt">会员到期背景图：</text>
            <text class="label-desc">建议尺寸: 700*320px</text>
          </view>
          <view class="item-content">
            <view class="upload-box" @click="handleUpload('expire_bg')">
              <image v-if="config.expire_bg_img" :src="config.expire_bg_img" class="preview-img"></image>
              <view v-else class="upload-placeholder">
                <text class="plus">+</text>
                <text class="upload-txt">选择图片</text>
              </view>
            </view>
          </view>
        </view>

        <view class="config-item">
          <view class="item-label">
            <text class="label-txt">会员规则说明：</text>
            <text class="label-desc">在会员中心页面展示的规则说明</text>
          </view>
          <view class="item-content flex-1">
            <textarea class="config-textarea" v-model="config.rules" placeholder="请输入会员规则说明"></textarea>
          </view>
        </view>

        <view class="config-footer">
          <button class="btn btn-primary" @click="handleSave">保存配置</button>
        </view>
      </view>
    </view>
  </view>
</template>

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

const config = reactive({
  is_open: true,
  bg_img: 'https://demo26.crmeb.net/uploads/attach/2021/11/20211115/a6f3b06e9d6d5a1b3c9d6d5a1b3c9d6d.png',
  expire_bg_img: '',
  rules: '1. 会员有效期自购买之日起计算\n2. 会员权益仅限本人使用\n3. 会员卡一经售出，概不退换'
})

const handleUpload = (type: string) => {
  uni.showToast({ title: '文件管理器暂未开启', icon: 'none' })
}

const handleSave = () => {
  uni.showToast({ title: '保存成功', icon: 'success' })
}
</script>

<style scoped lang="scss">
.marketing-member-config {
  padding: 16px;
  background: #f0f2f5;
  min-height: 100vh;
}

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

.config-card {
  padding: 24px;
}

.config-header {
  border-bottom: 1px solid #e8eaec;
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.config-title {
  font-size: 16px;
  font-weight: bold;
  color: #17233d;
}

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

.item-label {
  width: 200px;
  display: flex;
  flex-direction: column;
}

.label-txt {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.label-desc {
  font-size: 12px;
  color: #999;
}

.item-content {
  flex: 1;
}

.switch-mock {
  width: 44px;
  height: 22px;
  background-color: #bfbfbf;
  border-radius: 11px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 4px;
  position: relative;
  transition: background-color 0.3s;
  cursor: pointer;
}
.switch-mock.active { background-color: #1890ff; }
.switch-dot {
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  left: 4px;
  transition: left 0.3s;
}
.switch-mock.active .switch-dot { left: 26px; }
.switch-txt { font-size: 10px; color: #fff; margin-left: 18px; }
.switch-mock.active .switch-txt { margin-left: 4px; }

.upload-box {
  width: 120px;
  height: 80px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.plus { font-size: 24px; color: #999; }
.upload-txt { font-size: 12px; color: #999; }
.preview-img { width: 100%; height: 100%; object-fit: cover; }

.config-textarea {
  width: 100%;
  max-width: 600px;
  height: 120px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 12px;
  font-size: 14px;
}

.config-footer {
  margin-top: 40px;
  padding-left: 200px;
}

.btn-primary {
  width: 120px;
  height: 36px;
  line-height: 36px;
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.flex-1 { flex: 1; }
</style>



