JiangNingUmale-h5/subEnterprise/activity/activity.vue

<template>
  <view class="app-container">
    <u-navbar
      leftText="返回"
      title="店铺活动管理"
      :autoBack="true"
      :placeholder="true"
    />
    <view
      class="list-item active view-global"
      v-for="(item, index) in applyList"
      :key="index"
    >
      <view class="item-cell">
        <view class="cell-lable">活动名称：</view>
        <view class="cell-value">{{ item.activeName }}</view>
      </view>
      <view class="item-cell">
        <view class="cell-lable">活动时间：</view>
        <view class="cell-value"
          >{{ item.activeStart }}—{{ item.activeEnd }}</view
        >
      </view>
      <view class="item-cell">
        <view class="cell-lable">活动内容：</view>
        <view class="cell-value">{{ item.activeContent }}</view>
      </view>
      <view class="item-cell" style="align-items: flex-start">
        <view class="cell-lable">活动地点：</view>
        <view class="cell-value">{{ item.activePoint }}</view>
      </view>
      <view class="item-cell" style="align-items: flex-start">
        <view class="cell-lable">参与条件：</view>
        <view class="cell-value">{{ item.joinRequire }}</view>
      </view>
      <view class="item-cell" style="align-items: flex-start">
        <view class="cell-lable">活动状态：</view>
        <view
          class="cell-value"
          :style="{ color: activeStateColor(item.activeState) }"
        >
          {{ item.activeState | activeState }}
        </view>
      </view>
      <view class="cell-btn">
        <u-button
          v-show="item.activeState == 2"
          text="终止活动"
          size="small"
          color="linear-gradient(90deg, #FF4B4B 0%, #FA4D4D 100%)"
          :custom-style="{
            width: '130rpx',
            height: '65rpx',
            margin: '0',
          }"
          @click="handleUpdate(item)"
        ></u-button>
        <u-button
          v-show="item.activeState == 1"
          text="取消活动"
          size="small"
          color="linear-gradient(90deg, #F18939 0%, #F6A53C 100%)"
          :custom-style="{
            width: '130rpx',
            height: '65rpx',
            margin: '0',
          }"
          @click="handleUpdate(item)"
        ></u-button>
      </view>
    </view>
    <fixed-buttom title="新增活动" @click="handleAdd()"></fixed-buttom>
  </view>
</template>

<script>
import { listActivity, updateActivity } from "../../api/jn/apply";

export default {
  data() {
    return {
      // 表单参数
      form: {},
      applyList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        activeName: null,
        activeStart: null,
        activeEnd: null,
        activeContent: null,
        activePoint: null,
        joinRequire: null,
        activeState: null,
        createId: null,
        updateId: null,
        gridId: null,
        gridName: null,
        partId: null,
        partName: null,
      },
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    getList() {
      listActivity(this.queryParams).then((res) => {
        console.log(res);
        this.applyList = res.rows;
      });
    },
    //新增
    handleAdd() {
      uni.$u.route({
        url: "/subEnterprise/activity/add",
      });
    },
    //更新
    handleUpdate(item) {
      this.reset();
      item["activeState"] =
        item.activeState == 1
          ? 3
          : item.activeState == 2
          ? 4
          : item.activeState;
      this.form = item;
      console.log(this.form);
      updateActivity(this.form).then((response) => {
        this.$modal.msgSuccess("修改成功");
      });
    },
    activeStateColor: function (value) {
      switch (value) {
        case 1:
          return "#F75D23";
        case 2:
          return "#32B78B";
        case 3:
          return "#000000";
        case 4:
          return "#000000";
        case 5:
          return "#32B78B";
        default:
          return "#000000";
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        activeName: null,
        activeStart: null,
        activeEnd: null,
        activeContent: null,
        activePoint: null,
        joinRequire: null,
        activeState: null,
        createId: null,
        createBy: null,
        createTime: null,
        updateId: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        gridId: null,
        gridName: null,
        partId: null,
        partName: null,
      };
    },
  },
  filters: {
    activeState: function (value) {
      // console.log(value);
      switch (value) {
        case 1:
          return "审核中";
        case 2:
          return "进行中";
        case 3:
          return "已取消";
        case 4:
          return "已终止";
        case 5:
          return "已结束";
        default:
          return "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .list-item {
    background-color: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 25rpx;
    margin-bottom: 30rpx;

    .item-cell {
      display: flex;
      align-items: center;

      .cell-lable {
        width: 200rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #9da2ab;
      }

      .cell-value {
        flex: 1;
        font-size: 28rpx;
        font-weight: 400;
        color: #2e2f31;
      }
    }

    .cell-btn {
      display: flex;
      flex-direction: row-reverse;
    }

    & > view:not(.cell-btn) {
      margin-bottom: 20rpx;
    }
  }

  & > .list-item:last-child {
    margin-bottom: 0;
  }
}
</style>