完成代码路径重构

pages/mall/admin/marketing/lottery/configuration/index.uvue

@@ -0,0 +1,203 @@
+<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 setup lang="uts">
+import { reactive } from 'vue'
+
+const form = reactive({
+  integralLotteryId: 87,
+  payLotteryId: 82,
+  replyLotteryId: 86
+})
+
+const lotteryOptions = reactive([
+  { id: 0, name: '请选择' },
+  { id: 87, name: '积分抽奖' },
+  { id: 86, name: '评价抽奖' },
+  { id: 82, name: '订单抽奖' },
+  { id: 75, name: '积分' }
+] as any[])
+
+const getLotteryName = (id: number): string => {
+  const found = lotteryOptions.find((item: any): boolean => item.id == id)
+  return found != null ? (found['name'] as string) : '请选择'
+}
+
+const onIntegralLotteryChange = (e: any) => {
+  form.integralLotteryId = lotteryOptions[e.detail.value].id
+}
+
+const onPayLotteryChange = (e: any) => {
+  form.payLotteryId = lotteryOptions[e.detail.value].id
+}
+
+const onReplyLotteryChange = (e: any) => {
+  form.replyLotteryId = lotteryOptions[e.detail.value].id
+}
+
+const handleSave = () => {
+  uni.showLoading({ title: '正在保存...' })
+  setTimeout(() => {
+    uni.hideLoading()
+    uni.showToast({ title: '保存成功', icon: 'success' })
+  }, 800)
+}
+</script>
+
+<style scoped>
+.admin-marketing-lottery-config {
+  padding: 0;
+  background-color: transparent;
+  min-height: auto;
+}
+
+.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>
+
+
+