jiangchengfeiyi-Web/src/views/Home.vue

<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="优惠券名称">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="兑换积分">
      <el-input v-model="form.requirePoints" />
    </el-form-item>
    <el-form-item label="满减金额">
      <el-input v-model="form.conditionAmount" />
<!--      <el-select v-model="form.conditionAmount" placeholder="">-->
<!--        <el-option label="Zone one" value="shanghai" />-->
<!--        <el-option label="Zone two" value="beijing" />-->
<!--      </el-select>-->
    </el-form-item>
    <el-form-item label="发放数量">
      <el-input v-model="form.totalNum" />
    </el-form-item>
    <el-form-item label="限量领取">
      <el-input v-model="form.limitNum" />
    </el-form-item>
    <el-form-item label="使用范围">
      <el-input v-model="form.useScope" />
    </el-form-item>
    <el-form-item label="开始日期">
      <el-col :span="11">
        <el-date-picker
            v-model="form.startTime"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">--------</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker
            v-model="form.date1"
            placeholder="Pick a time"
            style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="截至日期">
      <el-col :span="11">
        <el-date-picker
            v-model="form.endTime"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">--------</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker
            v-model="form.date2"
            placeholder="Pick a time"
            style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="使用说明">
            <el-input v-model="form.description" type="textarea" />
    </el-form-item>
<!--    <el-form-item label="Instant delivery">-->
<!--      <el-switch v-model="form.delivery" />-->
<!--    </el-form-item>-->
<!--    <el-form-item label="Activity type">-->
<!--      <el-checkbox-group v-model="form.type">-->
<!--        <el-checkbox value="Online activities" name="type">-->
<!--          Online activities-->
<!--        </el-checkbox>-->
<!--        <el-checkbox value="Promotion activities" name="type">-->
<!--          Promotion activities-->
<!--        </el-checkbox>-->
<!--        <el-checkbox value="Offline activities" name="type">-->
<!--          Offline activities-->
<!--        </el-checkbox>-->
<!--        <el-checkbox value="Simple brand exposure" name="type">-->
<!--          Simple brand exposure-->
<!--        </el-checkbox>-->
<!--      </el-checkbox-group>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="Resources">-->
<!--      <el-radio-group v-model="form.resource">-->
<!--        <el-radio value="Sponsor">Sponsor</el-radio>-->
<!--        <el-radio value="Venue">Venue</el-radio>-->
<!--      </el-radio-group>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="Activity form">-->
<!--      <el-input v-model="form.desc" type="textarea" />-->
<!--    </el-form-item>-->
<!--    <el-form-item>-->
<!--      <el-button type="primary" @click="onSubmit">Create</el-button>-->
<!--      <el-button>Cancel</el-button>-->
<!--    </el-form-item>-->
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
  name: '',
  conditionAmount:'',//满减金额
  totalNum:'',
  requirePoints:'',//兑换积分
  limitNum:'',//限量领取
  useScope:'',//使用范围
  startTime:'',
  endTime:'',
  date1: '',
  date2: '',
  description:'',//使用说明
})
const AddCoupon = async () => {

}
const onSubmit = () => {
  console.log('submit!')
}
</script>