add:早起打卡设置

src/router/routers.js

@@ -151,6 +151,15 @@ export default [
         component: () => import("@/view/clockEarly/clockInList.vue")
       },
       {
+        path: "/clockEarly/setTabs",
+        name: "clockSetTabs",
+        meta: {
+          icon: "md-grid",
+          title: "早起打卡设置"
+        },
+        component: () => import("@/view/clockEarly/setTabs.vue")
+      },
+      {
         path: "/clockEarly/detail",
         meta: {
           title: "详情",

src/view/clockEarly/setTabs.vue

+<template>
+  <div class="detail">
+    <div class="pc-main">
+      <Tabs v-model="tab">
+        <TabPane label="活动缴费设置" name="1"></TabPane>
+        <TabPane label="连续早起奖励" name="3"></TabPane>
+        <TabPane label="周六早起奖励" name="4"></TabPane>
+        <TabPane label="规则设置" name="6"></TabPane>
+      </Tabs>
+      <Table
+        v-if="tab === '1'"
+        :loading="$store.state.app.isLoading"
+        border
+        ref="selection"
+        :columns="daycolumns"
+        :data="data"
+      >
+        <template slot-scope="{ row }" slot="created_at">
+          <span>{{ row.created_at | format }}</span>
+        </template>
+        <template slot-scope="{ row }" slot="enable">
+          <i-switch
+            :value="row.is_enable === 1 ? true : false"
+            @on-change="
+              value => {
+                change(value, row);
+              }
+            "
+          />
+        </template>
+        <template slot-scope="{ row }" slot="action">
+          <a @click="edit(row)">编辑</a>
+        </template>
+        <template slot-scope="{ row }" slot="edit">
+          <a @click="goTheme(row)">编辑</a>
+        </template>
+      </Table>
+      <Button style="margin-bottom:20px" v-if="tab === '2'" type="primary"
+        >新建活动</Button
+      >
+      <Table
+        v-if="tab === '2'"
+        :loading="$store.state.app.isLoading"
+        border
+        ref="selection"
+        :columns="spcolumns"
+        :data="data"
+      >
+        <template slot-scope="{ row }" slot="action">
+          <a @click="edit(row)">编辑</a>
+        </template>
+      </Table>
+      <div
+        class="topSearch"
+        style="margin-bottom: 20px;"
+        v-if="tab === '4' || tab === '3'"
+      >
+        <div class="left">
+          <Button type="primary" @click="goDetail">新增奖品</Button>
+          <Button type="primary" style="margin-right: 20px;"
+            >开启新用户奖励</Button
+          >
+          当前状态：<span style="color:red">关闭</span>
+        </div>
+      </div>
+      <Table
+        v-if="tab === '3'"
+        :loading="$store.state.app.isLoading"
+        border
+        ref="selection"
+        :columns="newoldcolumns"
+        :data="data"
+      >
+        <template slot-scope="{ row }" slot="action">
+          <a @click="edit(row)">编辑</a>
+        </template>
+      </Table>
+      <Table
+        v-if="tab === '4'"
+        :loading="$store.state.app.isLoading"
+        border
+        ref="selection"
+        :columns="newoldcolumns"
+        :data="data"
+      >
+        <template slot-scope="{ row }" slot="action">
+          <a @click="edit(row)">编辑</a>
+        </template>
+      </Table>
+      <div class="editor" v-if="tab === '6'">
+        <editor />
+        <div class="topSearch" style="margin-top: 20px;">
+          <div class="left">
+            <Button type="primary" @click="goDetail">取消</Button>
+            <Button type="primary">保存</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 编辑表单 -->
+    <Drawer
+      title="新增/编辑"
+      v-model="modalVisible"
+      width="600"
+      :mask-closable="false"
+      :styles="styles"
+      @on-close="close"
+    >
+      <Form
+        ref="formValidate"
+        :model="formValidate"
+        :rules="ruleValidate"
+        :label-width="90"
+      >
+        <FormItem label="日期" prop="name">
+          <DatePicker
+            :value="value2"
+            format="yyyy/MM/dd"
+            type="daterange"
+            placement="bottom-end"
+            placeholder="Select date"
+            style="width: 200px"
+          ></DatePicker>
+        </FormItem>
+        <FormItem label="倍数" prop="name">
+          <Input v-model="formValidate.mail" placeholder="请输入"></Input>
+        </FormItem>
+        <span>
+          <FormItem label="奖励名称" prop="name">
+            <Input v-model="formValidate.mail" placeholder="请输入"></Input>
+          </FormItem>
+          <FormItem label="奖励类型" prop="name">
+            <Select v-model="formValidate.city" placeholder="请选择">
+                <Option value="beijing">真我币</Option>
+                <Option value="shanghai">优惠券</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="优惠卷类型" prop="name">
+            <Input v-model="formValidate.mail" placeholder="请输入"></Input>
+          </FormItem>
+          <FormItem label="模版编号" prop="name">
+            <Input v-model="formValidate.mail" placeholder="请输入"></Input>
+          </FormItem>
+          <FormItem label="获奖概率" prop="name">
+            <Input v-model="formValidate.mail" placeholder="请输入"></Input>
+          </FormItem>
+        </span>
+          <span>
+          <FormItem label="奖励名称" prop="name">
+            <Input v-model="formValidate.mail" placeholder="请输入"></Input>
+          </FormItem>
+          <FormItem label="奖励类型" prop="name">
+            <Select v-model="formValidate.city" placeholder="请选择">
+                <Option value="beijing">真我币</Option>
+                <Option value="shanghai">优惠券</Option>
+            </Select>
+          </FormItem>
+          <FormItem label="真我币数量" prop="name">
+            <Input v-model="formValidate.mail" placeholder="请输入"></Input>
+          </FormItem>
+          <FormItem label="获奖概率" prop="name">
+            <Input v-model="formValidate.mail" placeholder="请输入"></Input>
+          </FormItem>
+        </span>
+        <FormItem>
+          <Button type="primary" @click="submit">保存</Button>
+        </FormItem>
+      </Form>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { getScenes, delScenes, editScenes } from "@/api/scenes";
+import Editor from "_c/editor";
+export default {
+  name: "categories",
+  components: {
+    Editor
+  },
+  data() {
+    return {
+      modalVisible: true,
+      formValidate: {
+        name: ""
+      },
+      ruleValidate: {
+        name: [
+          {
+            required: true,
+            message: "The name cannot be empty",
+            trigger: "blur"
+          }
+        ]
+      },
+      tab: "1",
+      data: [],
+      daycolumns: [
+        {
+          title: "休息时间",
+          key: "created_at"
+        },
+        {
+          title: "打卡时间",
+          slot: "name"
+        },
+         {
+          title: "结算时间",
+          slot: "name"
+        },
+         {
+          title: "缴费数值",
+          slot: "name"
+        },
+        {
+          title: "操作",
+          slot: "name"
+        }
+      ],
+      spcolumns: [
+        {
+          title: "签到日期",
+          key: "created_at"
+        },
+        {
+          title: "倍数",
+          slot: "name"
+        },
+        {
+          title: "操作",
+          slot: "name"
+        }
+      ],
+      newoldcolumns: [
+        {
+          title: "奖励名称",
+          key: "created_at"
+        },
+        {
+          title: "奖励类型",
+          slot: "name"
+        },
+        {
+          title: "奖励",
+          slot: "title"
+        },
+        {
+          title: "获奖概率",
+          key: "created_at"
+        },
+        {
+          title: "操作",
+          slot: "action"
+        }
+      ],
+    };
+  },
+  methods: {},
+  mounted() {}
+};
+</script>
+
+<style lang="less" scoped>
+.pc-main {
+  padding: 20px;
+  //margin-top: 20px;
+  background-color: #fff;
+}
+.btn {
+  text-align: right;
+  width: 80%;
+  position: fixed;
+  background-color: #fff;
+  bottom: 10px;
+  padding: 10px 30px;
+}
+</style>