|
|
@@ -1,75 +1,130 @@
|
|
|
<template>
|
|
|
- <view class="app-content">
|
|
|
- <view class="list-wrap">
|
|
|
+ <view class="page-container">
|
|
|
+
|
|
|
+ <!-- 分类列表 -->
|
|
|
+ <view class="list-container">
|
|
|
<block v-if="!$util.isEmpty(list.data)">
|
|
|
- <block v-for="(item, index) in list.data" :key="index">
|
|
|
- <view class="list" @click="edit(item)">
|
|
|
- <view class="list-img">
|
|
|
- <image :src="item.img" mode="aspectFit"></image>
|
|
|
+ <view class="list-item" v-for="(item, index) in list.data" :key="index">
|
|
|
+ <!-- 列表项内容 -->
|
|
|
+ <view class="item-content" @click="edit(item)">
|
|
|
+ <view class="item-image">
|
|
|
+ <image :src="item.img" mode="aspectFit" class="image"></image>
|
|
|
</view>
|
|
|
- <view class="list-det">
|
|
|
- <view class="app-size-28 app-color-0" style="font-size: 30upx; font-weight: bold">{{ item.categoryName }}</view>
|
|
|
+
|
|
|
+ <view class="item-info">
|
|
|
+ <view class="info-main">
|
|
|
+ <text class="category-name">{{ item.categoryName }}</text>
|
|
|
+ <text v-if="item.default == 1" class="default-tag">默认</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-details">
|
|
|
+ <text class="detail-text">序号: {{ item.inTurn }}</text>
|
|
|
+ <text class="detail-text status-text" :class="{ 'active': item.status == 1 }">
|
|
|
+ {{ item.status == 1 ? '显示' : '隐藏' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
|
|
|
- <text style="position: absolute; bottom: 8upx; left: 150upx; color: #cccccc">序号 {{ item.inTurn }}</text>
|
|
|
- <!-- <text style="position:absolute;top:65upx;right:150upx;color:blue;" @click.stop="delCategory(item.id)">删除</text> -->
|
|
|
- <button v-if="item.default != 1" style="position: absolute; top: 6upx; right: 150upx" class="admin-button-com middle" @click.stop="delCategory(item.id)">
|
|
|
- 删除
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <view class="item-actions">
|
|
|
+ <button
|
|
|
+ v-if="item.default != 1"
|
|
|
+ class="action-btn edit-btn"
|
|
|
+ @click="edit(item)"
|
|
|
+ >
|
|
|
+ 编辑
|
|
|
</button>
|
|
|
- <button v-if="item.default != 1" style="position: absolute; top: 6upx; right: 30upx" class="admin-button-com middle blue" @click="edit(item)">修改</button>
|
|
|
- <button v-if="item.picTextId == 0" style="position: absolute; bottom: 6upx; right: 30upx" class="admin-button-com middle" @click.stop="selectPicText(item.id, item.picTextId)">
|
|
|
- 设置图文
|
|
|
+
|
|
|
+ <button
|
|
|
+ v-if="item.default != 1"
|
|
|
+ class="action-btn delete-btn"
|
|
|
+ @click.stop="delCategory(item.id)"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
</button>
|
|
|
- <button v-else style="position: absolute; bottom: 6upx; right: 30upx" class="admin-button-com middle blue" @click.stop="selectPicText(item.id, item.picTextId)">
|
|
|
- 图文-{{ item.picTextId }}
|
|
|
+
|
|
|
+ <button
|
|
|
+ class="action-btn pictext-btn"
|
|
|
+ :class="{ 'has-pictext': item.picTextId > 0 }"
|
|
|
+ @click.stop="selectPicText(item.id, item.picTextId)"
|
|
|
+ >
|
|
|
+ {{ item.picTextId == 0 ? '设图文' : `图文-${item.picTextId}` }}
|
|
|
</button>
|
|
|
</view>
|
|
|
- </block>
|
|
|
+ </view>
|
|
|
</block>
|
|
|
+
|
|
|
<block v-else>
|
|
|
- <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
+ <app-wrapper-empty title="暂无分类数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
</block>
|
|
|
</view>
|
|
|
|
|
|
- <view class="app-footer">
|
|
|
- <button class="admin-button-com big blue" @click="addCategoryFn">添加分类</button>
|
|
|
+ <!-- 底部添加按钮 -->
|
|
|
+ <view class="bottom-toolbar">
|
|
|
+ <button class="add-category-btn" @click="addCategoryFn">
|
|
|
+ <text class="btn-icon">+</text>
|
|
|
+ <text class="btn-text">添加分类</text>
|
|
|
+ </button>
|
|
|
</view>
|
|
|
|
|
|
+ <!-- 编辑分类模态框 -->
|
|
|
<modal-module
|
|
|
:show="modifyModal"
|
|
|
:maskClosable="false"
|
|
|
@cancel="modalCancel"
|
|
|
@click="modifyModalClick"
|
|
|
- width="92%"
|
|
|
- :title="modifyTitle"
|
|
|
- padding="30rpx 30rpx"
|
|
|
+ width="90%"
|
|
|
+ :title="modifyTitle + '分类'"
|
|
|
+ padding="40rpx"
|
|
|
>
|
|
|
<template v-slot:content>
|
|
|
- <view class="app-modal-input-wrap modify-modal">
|
|
|
- <view class="inp-list-line">
|
|
|
- <view class="line-label">名称</view>
|
|
|
- <view class="line-input">
|
|
|
- <input type="text" v-model="modifyForm.categoryName" :adjust-position="false" class="inp-input" placeholder="请填写" />
|
|
|
+ <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
|
|
|
+ type="text"
|
|
|
+ v-model="modifyForm.categoryName"
|
|
|
+ :adjust-position="false"
|
|
|
+ class="input-field"
|
|
|
+ placeholder="请输入分类名称"
|
|
|
+ maxlength="20"
|
|
|
+ />
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="inp-list-line">
|
|
|
- <view class="line-label">排序</view>
|
|
|
- <view class="line-input">
|
|
|
+
|
|
|
+ <view class="form-group">
|
|
|
+ <view class="form-label">
|
|
|
+ <text class="label-text">排序权重</text>
|
|
|
+ </view>
|
|
|
+ <view class="form-input">
|
|
|
<input
|
|
|
type="number"
|
|
|
v-model="modifyForm.inTurn"
|
|
|
@focus="modifyForm.inTurn = ''"
|
|
|
:adjust-position="false"
|
|
|
- class="inp-input"
|
|
|
- placeholder="值越大越靠前"
|
|
|
+ class="input-field"
|
|
|
+ placeholder="数值越大排序越靠前"
|
|
|
/>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="inp-list-line switch-wrap">
|
|
|
- <view class="line-label">商城上</view>
|
|
|
- <view class="line-input flex-strat">
|
|
|
- <switch :checked="modifyForm.status == '0' ? false : true" @change="switchChangeFn" /><text style="margin-left:10upx;">{{ modifyForm.status==0?'隐藏':'显示' }}</text>
|
|
|
+ <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="switchChangeFn"
|
|
|
+ color="#007AFF"
|
|
|
+ />
|
|
|
+ <text class="switch-text">
|
|
|
+ {{ modifyForm.status == 1 ? '商城显示' : '商城隐藏' }}
|
|
|
+ </text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -253,84 +308,323 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.app-content {
|
|
|
- min-height: calc(100vh - 100upx);
|
|
|
- padding-bottom: 100upx;
|
|
|
+// 页面容器
|
|
|
+.page-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f5f5f5;
|
|
|
+ padding: 20rpx 20rpx 120rpx 20rpx; // 底部留出空间给固定按钮
|
|
|
}
|
|
|
-.list-wrap {
|
|
|
- position: relative;
|
|
|
- background-color: #fff;
|
|
|
- .list {
|
|
|
- height: 160upx;
|
|
|
- @include disFlex(center, flex-start);
|
|
|
- padding: 30upx 0;
|
|
|
- margin: 0 30upx;
|
|
|
- color: $fontColor3;
|
|
|
- border-bottom: 1px solid $borderColor;
|
|
|
- position: relative;
|
|
|
- .list-index {
|
|
|
- width: 50upx;
|
|
|
- }
|
|
|
- .list-img {
|
|
|
- width: 130upx;
|
|
|
- height: 130upx;
|
|
|
- image {
|
|
|
- width: 130upx;
|
|
|
- height: 130upx;
|
|
|
- border-radius: 20upx;
|
|
|
+
|
|
|
+// 页面头部
|
|
|
+.page-header {
|
|
|
+ padding: 30rpx 40rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
|
|
+
|
|
|
+ .page-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 列表容器
|
|
|
+.list-container {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
|
|
+}
|
|
|
+
|
|
|
+// 列表项
|
|
|
+.list-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
+ transition: background-color 0.2s ease;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: #f8f8f8;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 列表项内容
|
|
|
+ .item-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .item-image {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #f5f5f5;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
- .list-det {
|
|
|
- margin-left: 20upx;
|
|
|
- & > div {
|
|
|
- margin-top: 14upx;
|
|
|
- &:first-child {
|
|
|
- margin-top: 0;
|
|
|
+
|
|
|
+ .item-info {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .info-main {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+
|
|
|
+ .category-name {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .default-tag {
|
|
|
+ background: #FF9500;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20rpx;
|
|
|
+ padding: 4rpx 12rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
- .list-operate {
|
|
|
- width: 480upx;
|
|
|
- margin-top: 10upx;
|
|
|
- @include disFlex(center, space-between);
|
|
|
- .operate-det {
|
|
|
- width: 490upx;
|
|
|
- padding-left: 120upx;
|
|
|
- & > span {
|
|
|
- border: 1px solid #ccc;
|
|
|
- border-radius: 25upx;
|
|
|
- padding: 5upx 20upx 5upx 20upx;
|
|
|
- font-size: 25upx;
|
|
|
- margin-left: 35upx;
|
|
|
- &:first-child {
|
|
|
- margin-left: 0;
|
|
|
+
|
|
|
+ .info-details {
|
|
|
+ display: flex;
|
|
|
+ gap: 24rpx;
|
|
|
+
|
|
|
+ .detail-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
+
|
|
|
+ &.status-text {
|
|
|
+ font-weight: 500;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: #34C759;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:not(.active) {
|
|
|
+ color: #FF3B30;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ // 操作按钮区域
|
|
|
+ .item-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 12rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .action-btn {
|
|
|
+ padding: 12rpx 20rpx;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ min-width: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &.edit-btn {
|
|
|
+ background: #52c41a;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.delete-btn {
|
|
|
+ background: #FF3B30;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.pictext-btn {
|
|
|
+ background: #8E8E93;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ &.has-pictext {
|
|
|
+ background: #FF9500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-.app-footer {
|
|
|
- justify-content: flex-end;
|
|
|
- .admin-button-com {
|
|
|
- width: 200upx;
|
|
|
- margin-right: 30upx;
|
|
|
+
|
|
|
+// 底部工具栏
|
|
|
+.bottom-toolbar {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background: #fff;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); // 适配刘海屏
|
|
|
+ border-top: 1rpx solid #e5e5e5;
|
|
|
+ box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.06);
|
|
|
+ z-index: 1000;
|
|
|
+
|
|
|
+ .add-category-btn {
|
|
|
+ width: 100%;
|
|
|
+ background: #52c41a;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .btn-icon {
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-right: 12rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-text {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: #389e0d;
|
|
|
+ transform: scale(0.98);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-.modify-modal {
|
|
|
- .prompt-text {
|
|
|
- color: red;
|
|
|
- position: relative;
|
|
|
- right: 52upx;
|
|
|
- bottom: 24upx;
|
|
|
- // margin-bottom: 10upx;
|
|
|
+
|
|
|
+// 模态框表单样式
|
|
|
+.modal-form {
|
|
|
+ .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 {
|
|
|
+ color: #FF3B30;
|
|
|
+ margin-left: 6rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-input {
|
|
|
+ .input-field {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ border: 1rpx solid #e0e0e0;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ border-color: #007AFF;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::placeholder {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.switch-group {
|
|
|
+ .form-switch {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx 0;
|
|
|
+
|
|
|
+ .switch-text {
|
|
|
+ margin-left: 16rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .line-label {
|
|
|
- width: 140upx;
|
|
|
- flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+// 响应式优化
|
|
|
+@media screen and (max-width: 750rpx) {
|
|
|
+ .list-item {
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: stretch;
|
|
|
+
|
|
|
+ .item-content {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .item-image {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-info {
|
|
|
+ .info-main {
|
|
|
+ .category-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-details {
|
|
|
+ .detail-text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-actions {
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .action-btn {
|
|
|
+ flex: 1;
|
|
|
+ max-width: 100rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ padding: 10rpx 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .switch-wrap {
|
|
|
- margin-top: 30upx;
|
|
|
+
|
|
|
+ .bottom-toolbar {
|
|
|
+ padding: 16rpx 20rpx;
|
|
|
+ padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
|
|
+
|
|
|
+ .add-category-btn {
|
|
|
+ padding: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
