完善页面
This commit is contained in:
@@ -1,27 +1,203 @@
|
||||
<template>
|
||||
<AdminLayout :currentPage="currentPage">
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">页面占位 (自动生成)</text>
|
||||
<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>
|
||||
</AdminLayout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
|
||||
const currentPage = ref<string>('lottery-config')
|
||||
const title = ref<string>('config')
|
||||
<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 lang="scss">
|
||||
@import '@/uni.scss';
|
||||
.page { padding: $space-lg; }
|
||||
.header { padding: $space-lg; border-radius: $radius; background: $background-primary; box-shadow: $shadow-xs; }
|
||||
.title { font-size: $font-size-lg; font-weight: $font-weight-bold; color: $text-primary; }
|
||||
.sub-title { margin-top: $space-xs; font-size: $font-size-md; color: $text-secondary; }
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user