JiangNingUmale-h5/subEnterprise/activity/add.vue

<template>
  <view class="app-container">
    <u-navbar
      leftText="返回"
      title="新增店铺活动"
      :autoBack="true"
      :placeholder="true"
    />
    <view class="form-item">
      <view class="form-title">
        活动名称
        <text></text>
      </view>
      <view class="item-input view-global">
        <u--input
          placeholder="请输入名称"
          border="none"
          :customStyle="{ height: '45rpx' }"
          v-model="form.activeName"
        ></u--input>
      </view>
    </view>
    <view class="form-item">
      <view class="form-title">
        活动时间
        <text></text>
      </view>
      <view
        class="item-input view-global"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
        @click="isCalendar = true"
      >
        <text :style="'color:' + fColor(calendarRang)">{{
          calendarRang || "请选择日期"
        }}</text>
        <u-icon name="arrow-right" color="#D5D5D5"></u-icon>
      </view>
    </view>
    <view class="form-item">
      <view class="form-title">
        活动内容
        <text></text>
      </view>
      <view class="item-input view-global">
        <u--textarea
          v-model="form.activeContent"
          placeholder="请输入内容"
          border="none"
        ></u--textarea>
      </view>
    </view>
    <view class="form-item">
      <view class="form-title">
        活动地点
        <text></text>
      </view>
      <view class="item-input view-global">
        <u--input
          placeholder="请输入活动地点"
          border="none"
          :customStyle="{ height: '45rpx' }"
          v-model="form.activePoint"
        ></u--input>
      </view>
    </view>
    <view class="form-item">
      <view class="form-title">
        参与条件
        <text></text>
      </view>
      <view class="item-input view-global">
        <u--textarea
          v-model="form.joinRequire"
          placeholder="请输入内容"
          border="none"
        ></u--textarea>
      </view>
    </view>
    <fixed-buttom title="提交" @click="handleAdd"></fixed-buttom>

    <!-- 日历 -->
    <u-calendar
      :show="isCalendar"
      :mode="mode"
      @confirm="onCalendar"
      @close="onCloseCalendar"
    ></u-calendar>
  </view>
</template>

<script>
import { addActivity } from "../../api/jn/apply";

export default {
  data() {
    return {
      form: {},
      isCalendar: false,
      calendarRang: "",
      mode: "range",
    };
  },
  onLoad() {
    this.reset();
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: null,
        activeName: null,
        activeStart: null,
        activeEnd: null,
        activeContent: null,
        activePoint: null,
        joinRequire: null,
        activeState: 1,
        createId: null,
        createBy: null,
        createTime: null,
        updateId: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        gridId: null,
        gridName: null,
        partId: null,
        partName: null,
      };
    },
    onCloseCalendar() {
      this.isCalendar = false;
    },
    onCalendar(e) {
      console.log(e);
      this.calendarRang = `${e[0]}——${e[e.length - 1]}`;
      this.form.activeStart = e[0];
      this.form.activeEnd = e[e.length - 1];
      this.isCalendar = false;
    },
    handleAdd() {
      console.log(this.form);
      addActivity(this.form).then((response) => {
        uni.navigateBack({
          delta: 1,
        });
      });
    },
    fColor(calendarRang) {
      return calendarRang ? "#2e2f31" : "#c0c4cc";
    },
  },
};
</script>

<style lang="scss" scoped>
.form-item {
  .form-title {
    position: relative;
    font-size: 30rpx;
    font-weight: bold;
    color: #2e2f31;
    margin-bottom: 20rpx;
  }

  .form-title text {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 12rpx;
    width: 140rpx;
    background: url("/static/images/juxing.png");
    background-size: cover;
    max-width: 300rpx;
    z-index: 0;
  }

  .item-input {
    margin-bottom: 30rpx;
    border-radius: 16rpx;
    background-color: #fff;
    box-sizing: border-box;
    padding: 25rpx;
  }
}
</style>