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

<template>
  <view class="admin-marketing-lottery-config">
    <view class="config-card box-shadow">
      <view class="config-header">
        <text class="title">抽奖配置</text>
      </view>
      
      <view class="config-body">
        <!-- 积分抽奖 -->
        <view class="form-item">
          <view class="item-label">
            <text class="label-text">积分抽奖：</text>
          </view>
          <view class="item-content">
            <picker :range="lotteryOptions" range-key="name" @change="onIntegralLotteryChange">
              <view class="picker-value">
                <text :class="form.integralLotteryId > 0 ? '' : 'placeholder'">
                  {{ getLotteryName(form.integralLotteryId) }}
                </text>
                <text class="iconfont icon-arrow-down"></text>
              </view>
            </picker>
          </view>
        </view>

        <!-- 支付抽奖 -->
        <view class="form-item">
          <view class="item-label">
            <text class="label-text">支付抽奖：</text>
          </view>
          <view class="item-content">
            <picker :range="lotteryOptions" range-key="name" @change="onPayLotteryChange">
              <view class="picker-value">
                <text :class="form.payLotteryId > 0 ? '' : 'placeholder'">
                  {{ getLotteryName(form.payLotteryId) }}
                </text>
                <text class="iconfont icon-arrow-down"></text>
              </view>
            </picker>
          </view>
        </view>

        <!-- 评价抽奖 -->
        <view class="form-item">
          <view class="item-label">
            <text class="label-text">评价抽奖：</text>
          </view>
          <view class="item-content">
            <picker :range="lotteryOptions" range-key="name" @change="onReplyLotteryChange">
              <view class="picker-value">
                <text :class="form.replyLotteryId > 0 ? '' : 'placeholder'">
                  {{ getLotteryName(form.replyLotteryId) }}
                </text>
                <text class="iconfont icon-arrow-down"></text>
              </view>
            </picker>
          </view>
        </view>

        <!-- 保存按钮 -->
        <view class="form-ops">
          <button class="admin-btn admin-btn-primary save-btn" @click="handleSave">保存</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script uts>
export default {
  data() {
    return {
      form: {
        integralLotteryId: 87,
        payLotteryId: 82,
        replyLotteryId: 86
      },
      lotteryOptions: [
        { id: 0, name: '请选择' },
        { id: 87, name: '积分抽奖' },
        { id: 86, name: '评价抽奖' },
        { id: 82, name: '订单抽奖' },
        { id: 75, name: '积分' }
      ] as any[]
    }
  },
  methods: {
    getLotteryName(id: number): string {
      const found = this.lotteryOptions.find((item: any): boolean => item.id == id)
      return found != null ? (found['name'] as string) : '请选择'
    },
    onIntegralLotteryChange(e: any) {
      this.form.integralLotteryId = this.lotteryOptions[e.detail.value].id
    },
    onPayLotteryChange(e: any) {
      this.form.payLotteryId = this.lotteryOptions[e.detail.value].id
    },
    onReplyLotteryChange(e: any) {
      this.form.replyLotteryId = this.lotteryOptions[e.detail.value].id
    },
    handleSave() {
      uni.showLoading({ title: '正在保存...' })
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({ title: '保存成功', icon: 'success' })
      }, 800)
    }
  }
}
</script>

<style scoped>
.admin-marketing-lottery-config {
  padding: 16px;
  background-color: #f5f7f9;
  min-height: 100vh;
}

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

.config-card {
  max-width: 800px;
  margin: 0 auto;
}

.config-header {
  padding: 20px;
  border-bottom: 1px solid #e8eaec;
}
.title {
  font-size: 16px;
  font-weight: bold;
  color: #17233d;
}

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

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

.item-label {
  width: 120px;
  text-align: right;
  margin-right: 20px;
}
.label-text {
  font-size: 14px;
  color: #515a6e;
}

.item-content {
  flex: 1;
}

.picker-value {
  width: 320px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  transition: border-color 0.2s;
}
.picker-value:active {
  border-color: #2d8cf0;
}

.placeholder {
  color: #c5c8ce;
}

.form-ops {
  padding-left: 140px;
  margin-top: 40px;
}
.save-btn {
  width: 100px;
  height: 36px;
  line-height: 36px;
}

.iconfont {
  font-size: 12px;
  color: #808695;
}
</style>