front-end/hdApp/src/admin/useCase/list.vue

<template>
  <view class="page-container">
    <view class="list-container">
      <block v-if="!$util.isEmpty(list.data)">
        <view class="list-item" v-for="item in list.data" :key="item.id">
          <view class="item-content" @click="edit(item)">
            <view class="item-icon">场</view>
            <view class="item-info">
              <view class="info-main"><text class="use-case-name">{{ item.useCaseName }}</text></view>
              <view class="info-details">
                <text class="detail-text">序号: {{ item.inTurn }}</text>
                <text class="detail-text" :class="item.status == 1 ? 'active' : 'disabled'">{{ item.status == 1 ? '商城显示' : '商城隐藏' }}</text>
              </view>
            </view>
          </view>
          <view class="item-actions">
            <button class="action-btn edit-btn" @click="edit(item)">编辑</button>
            <button class="action-btn delete-btn" @click.stop="remove(item.id)">删除</button>
          </view>
        </view>
      </block>
      <app-wrapper-empty v-else title="暂无使用场景数据" :is-empty="$util.isEmpty(list.data)" />
    </view>

    <view class="bottom-toolbar"><button class="add-category-btn" @click="add"><text class="btn-icon">+</text><text>添加使用场景</text></button></view>

    <modal-module :show="modifyModal" :maskClosable="false" @cancel="modalCancel" @click="submit" width="96%" :title="modifyTitle + '使用场景'" padding="40rpx">
      <template v-slot:content>
        <view class="modal-form">
          <view class="form-group"><view class="form-label"><text class="label-text">场景名称</text><text class="required-mark">*</text></view><view class="form-input"><input v-model="modifyForm.useCaseName" :adjust-position="false" class="input-field" placeholder="请输入使用场景名称" maxlength="20" /></view></view>
          <view class="form-group"><view class="form-label"><text class="label-text">排序值</text></view><view class="form-input"><input v-model="modifyForm.inTurn" type="number" @focus="modifyForm.inTurn = ''" :adjust-position="false" class="input-field" placeholder="数值越大排序越靠前" /></view></view>
          <view class="form-group switch-group"><view class="form-label"><text class="label-text">显示状态</text></view><view class="form-switch"><switch :checked="modifyForm.status == 1" @change="switchChange" color="#007AFF" /><text class="switch-text">{{ modifyForm.status == 1 ? '商城显示' : '商城隐藏' }}</text></view></view>
        </view>
      </template>
    </modal-module>
  </view>
</template>

<script>
import ModalModule from '@/components/plugin/modal';
import AppWrapperEmpty from '@/components/app-wrapper-empty';
import { list } from '@/mixins';
import { useCaseList, useCaseAdd, useCaseUpdate, useCaseDelete } from '@/api/goods';
export default {
  name: 'useCaseList', components: { ModalModule, AppWrapperEmpty }, mixins: [list],
  data() { return { modifyModal: false, modifyTitle: '添加', modifyForm: { useCaseId: 0, useCaseName: '', inTurn: '', status: 1 } }; },
  onPullDownRefresh() { this.resetList(); this._list().then(() => uni.stopPullDownRefresh()); },
  onReachBottom() { uni.stopPullDownRefresh(); },
  methods: {
    init() { this._list(); },
    _list() { return useCaseList().then(res => this.completes({ code: res.code, msg: res.msg, data: { list: res.data || [] } })); },
    add() { this.modifyTitle = '新增'; this.modifyForm = { useCaseId: 0, useCaseName: '', inTurn: '', status: 1 }; this.modifyModal = true; },
    edit(item) { this.modifyTitle = '编辑'; this.modifyForm = { useCaseId: item.id, useCaseName: item.useCaseName, inTurn: item.inTurn, status: item.status }; this.modifyModal = true; },
    modalCancel() { this.modifyModal = false; },
    switchChange(e) { this.modifyForm.status = e.detail.value ? 1 : 0; },
    submit(e) {
      if (e.index === 0) return this.modalCancel();
      if (!this.modifyForm.useCaseName) return this.$msg('请输入使用场景名称');
      const api = this.modifyForm.useCaseId ? useCaseUpdate : useCaseAdd;
      api({ ...this.modifyForm }).then(res => { if (res.code == 1) { this.$msg('操作成功!'); this.modalCancel(); this.resetList(); this._list(); } });
    },
    remove(id) { uni.showModal({ title: '提示', content: '确认删除？', success: res => { if (res.confirm) useCaseDelete({ useCaseId: id }).then(ret => { if (ret.code == 1) { this.$msg('已删除'); this.resetList(); this._list(); } }); } }); }
  }
};
</script>

<style lang="scss" scoped>
.page-container { min-height: 100vh; background: #f5f5f5; padding: 20rpx 20rpx 120rpx; }
.list-container { background: #fff; border-radius: 12rpx; overflow: hidden; box-shadow: 0 2rpx 8rpx rgba(0,0,0,.06); margin-bottom: 60upx; }
.list-item { display:flex; align-items:center; padding:20rpx 30rpx; border-bottom:1rpx solid #f0f0f0; &:last-child{border-bottom:0;} &:active{background:#f8f8f8;} }
.item-content { display:flex; align-items:center; flex:1; min-width:0; }
.item-icon { width:80rpx; height:80rpx; margin-right:24rpx; border-radius:8rpx; background:#e8f7ee; color:#52c41a; display:flex; align-items:center; justify-content:center; font-size:30rpx; font-weight:600; }
.item-info { flex:1; }.info-main { margin-bottom:8rpx; }.use-case-name { font-size:30rpx; font-weight:600; color:#333; }.info-details { display:flex; }.detail-text { margin-right:24rpx; font-size:24rpx; color:#666; &.active{color:#383a39;} &.disabled{color:#FF3B30;} }
.item-actions { display:flex; flex-shrink:0; }.action-btn { margin-left:12rpx; padding:12rpx 20rpx; border:0; border-radius:6rpx; font-size:24rpx; min-width:80rpx; color:#fff; &.edit-btn{background:#52c41a;} &.delete-btn{background:#FF3B30;} }
.bottom-toolbar { position:fixed; bottom:0; left:0; right:0; z-index:2; padding:20rpx 30rpx; padding-bottom:calc(20rpx + env(safe-area-inset-bottom)); background:#fff; border-top:1rpx solid #e5e5e5; box-shadow:0 -2rpx 8rpx rgba(0,0,0,.06); }.add-category-btn { width:100%; padding:24rpx; background:#52c41a; color:#fff; border:0; border-radius:8rpx; font-size:30rpx; font-weight:600; .btn-icon{margin-right:12rpx;font-size:32rpx;} }
.form-group { margin-bottom:32rpx; &:last-child{margin-bottom:0;} }.form-label { display:flex; align-items:center; margin-bottom:16rpx; }.label-text{font-size:28rpx;color:#333;font-weight:500;}.required-mark{margin-left:6rpx;color:#FF3B30;}.input-field{width:100%;height:80rpx;padding:0 20rpx;border:1rpx solid #e5e5e5;border-radius:8rpx;font-size:28rpx;box-sizing:border-box;}.form-switch{display:flex;align-items:center;}.switch-text{margin-left:16rpx;color:#666;font-size:26rpx;}
</style>