|
|
@@ -1,654 +1,140 @@
|
|
|
<template>
|
|
|
<view class="app-content">
|
|
|
<view v-if="!$util.isEmpty(list.data)" style="padding-bottom:120upx;">
|
|
|
- <view class="sort-list-wrap">
|
|
|
- <block v-for="(item, index) in list.data" :key="item.id">
|
|
|
- <view
|
|
|
- class="sort-item"
|
|
|
- :class="{
|
|
|
- dragging: draggedIndex === index,
|
|
|
- 'target-position': targetIndex === index && isDragging && targetIndex !== draggedIndex
|
|
|
- }"
|
|
|
- :style="{
|
|
|
- transform: transformStyle(index),
|
|
|
- transition: isDragging ? 'none' : 'transform 0.3s ease',
|
|
|
- zIndex: draggedIndex === index ? 999 : targetIndex === index && isDragging ? 888 : 1
|
|
|
- }"
|
|
|
- >
|
|
|
- <!-- 可拖拽的内容区域 -->
|
|
|
- <view
|
|
|
- class="item-content"
|
|
|
- :data-index="index"
|
|
|
- :data-id="item.id"
|
|
|
- @touchstart="dragStart"
|
|
|
- @touchmove="dragMove"
|
|
|
- @touchend="dragEnd"
|
|
|
- style="width: fit-content;"
|
|
|
- >
|
|
|
- <view class="item-name">{{ item.name }}</view>
|
|
|
- <view class="item-index">第{{ index + 1 }}位,按名字可以拖拽</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 操作按钮区域 -->
|
|
|
- <view class="buttons-area">
|
|
|
- <!-- 置顶 -->
|
|
|
- <view
|
|
|
- v-if="index > 0"
|
|
|
- class="move-btn move-btn-top"
|
|
|
- :class="{ disabled: isOperating }"
|
|
|
- @click.stop="topFn(item.id)"
|
|
|
- title="置顶"
|
|
|
- >
|
|
|
- <zui-svg-icon icon="general-top-line" color="#fff" :width="20" :height="20" />
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 置底 -->
|
|
|
- <view
|
|
|
- v-if="index < list.data.length - 1"
|
|
|
- class="move-btn move-btn-bottom"
|
|
|
- :class="{ disabled: isOperating }"
|
|
|
- @click.stop="bottomFn(item.id)"
|
|
|
- title="置底"
|
|
|
- >
|
|
|
- <zui-svg-icon icon="general-bottom-line" color="#fff" :width="20" :height="20" />
|
|
|
+ <t-table :headerBackgroundColor="'#F0F2F6'">
|
|
|
+ <t-tr header>
|
|
|
+ <t-th><view style="color:black;">名称</view></t-th>
|
|
|
+ <t-th><view style="color:black;">排序</view></t-th>
|
|
|
+ </t-tr>
|
|
|
+ <view v-for="(item, index) in list.data" :key="index">
|
|
|
+ <t-tr>
|
|
|
+ <t-td align="center" color="info">
|
|
|
+ <view style="color:black;font-weight:bold;">{{item.name}}</view>
|
|
|
+ </t-td>
|
|
|
+ <t-td align="center" color="info">
|
|
|
+ <view>
|
|
|
+ <input v-model="item.inTurn" name="inTurn" @focus="clear(item)"
|
|
|
+ type="number" style="border:1upx solid #cccccc;color:#333333;" />
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- 上移 -->
|
|
|
- <text
|
|
|
- v-if="index > 0"
|
|
|
- class="move-btn move-btn-up"
|
|
|
- :class="{ disabled: isOperating }"
|
|
|
- @click.stop="upFn(item.id)"
|
|
|
- title="上移一位"
|
|
|
- >↑</text>
|
|
|
-
|
|
|
- <!-- 下移 -->
|
|
|
- <text
|
|
|
- v-if="index < list.data.length - 1"
|
|
|
- class="move-btn move-btn-down"
|
|
|
- :class="{ disabled: isOperating }"
|
|
|
- @click.stop="downFn(item.id)"
|
|
|
- title="下移一位"
|
|
|
- >↓</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
+ </t-td>
|
|
|
+ </t-tr>
|
|
|
+ </view>
|
|
|
+ </t-table>
|
|
|
</view>
|
|
|
<view v-else>
|
|
|
<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
</view>
|
|
|
+ <view class="app-footer">
|
|
|
+ <view class="admin-button-com big blue" @click="goBack()">返回上级</view>
|
|
|
+ <view style="margin-left:50upx;" class="admin-button-com big blue" @click="savePrice">保存修改</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <modal-module :show="batchModel" @click="affirmBatch" title="批量操作" color="#333" :size="32" padding="30rpx 30rpx" >
|
|
|
+ <template slot="customContent">
|
|
|
+ <view class="select-cmd_bx">
|
|
|
+ <view class="num_bx" style="margin:60upx 0 60upx 0;font-size:35upx;">
|
|
|
+ <view class="flex">
|
|
|
+ <input v-model="batchNum" placeholder="填写数值"
|
|
|
+ type="digit" style="border:1upx solid #CCCCCC;height:60upx;margin:0 auto;text-align:center;" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </modal-module>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
-import { productList, batchChangeMore } from '@/api/product'
|
|
|
+import { productList,batchChangeMore } from '@/api/product'
|
|
|
import list from '@/mixins/list'
|
|
|
-
|
|
|
+import ModalModule from "@/components/plugin/modal";
|
|
|
export default {
|
|
|
name: "more",
|
|
|
components: {
|
|
|
- AppWrapperEmpty
|
|
|
+ AppWrapperEmpty,ModalModule
|
|
|
},
|
|
|
- mixins: [list],
|
|
|
+ mixins:[list],
|
|
|
data() {
|
|
|
return {
|
|
|
- // 拖拽相关状态
|
|
|
- draggedIndex: -1,
|
|
|
- draggedItem: null,
|
|
|
- dragOffsetY: 0,
|
|
|
- isDragging: false,
|
|
|
- itemHeight: 160, // 列表项高度,单位upx(实际高度=160upx)
|
|
|
- startY: 0,
|
|
|
- scrollTop: 0, // 页面滚动高度
|
|
|
- originalOrder: [], // 原始顺序,用于拖拽失败时恢复
|
|
|
- targetIndex: -1, // 目标交换位置的索引
|
|
|
- isOperating: false, // 防止快速点击操作按钮
|
|
|
- totalNum: 0 // 总数量
|
|
|
+ batchModel:false,
|
|
|
+ batchNum:''
|
|
|
};
|
|
|
},
|
|
|
- onPageScroll(e) {
|
|
|
- // 拖拽期间禁止更新滚动高度
|
|
|
- if (!this.isDragging) {
|
|
|
- this.scrollTop = e.scrollTop;
|
|
|
- }
|
|
|
- },
|
|
|
methods: {
|
|
|
- goBack() {
|
|
|
+ goBack(){
|
|
|
uni.navigateBack()
|
|
|
},
|
|
|
-
|
|
|
- // 响应 transform 样式变化
|
|
|
- transformStyle(index) {
|
|
|
- if (index === this.draggedIndex) {
|
|
|
- return 'translateY(0upx)';
|
|
|
- }
|
|
|
- return 'translateY(0upx)';
|
|
|
- },
|
|
|
-
|
|
|
- // 拖拽开始
|
|
|
- dragStart(e) {
|
|
|
- if (this.isDragging) return;
|
|
|
-
|
|
|
- this.isDragging = true;
|
|
|
-
|
|
|
- const index = parseInt(e.currentTarget.dataset.index);
|
|
|
- if (isNaN(index) || index < 0 || index >= this.list.data.length) {
|
|
|
- this.isDragging = false;
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- this.draggedIndex = index;
|
|
|
- this.draggedItem = this.list.data[index];
|
|
|
- this.startY = e.touches[0].clientY;
|
|
|
- this.targetIndex = index;
|
|
|
-
|
|
|
- // 保存原始顺序
|
|
|
- this.originalOrder = [...this.list.data];
|
|
|
-
|
|
|
- // 添加拖拽模式样式
|
|
|
- this.toggleDragMode(true);
|
|
|
-
|
|
|
- if (e.preventDefault) {
|
|
|
- e.preventDefault();
|
|
|
- }
|
|
|
- if (e.stopPropagation) {
|
|
|
- e.stopPropagation();
|
|
|
- }
|
|
|
- return false;
|
|
|
- },
|
|
|
-
|
|
|
- // 拖拽移动
|
|
|
- dragMove(e) {
|
|
|
- if (!this.isDragging || this.draggedIndex === -1) return;
|
|
|
-
|
|
|
- if (!e.touches || !e.touches[0]) return;
|
|
|
-
|
|
|
- if (e.preventDefault) {
|
|
|
- e.preventDefault();
|
|
|
- }
|
|
|
- if (e.stopPropagation) {
|
|
|
- e.stopPropagation();
|
|
|
- }
|
|
|
-
|
|
|
- const currentY = e.touches[0].clientY;
|
|
|
- const deltaY = currentY - this.startY;
|
|
|
-
|
|
|
- // 根据设备像素比例转换为upx单位
|
|
|
- const systemInfo = uni.getSystemInfoSync();
|
|
|
- const pixelRatio = 750 / systemInfo.windowWidth;
|
|
|
- const deltaYupx = deltaY * pixelRatio;
|
|
|
-
|
|
|
- // 限制拖拽范围
|
|
|
- const maxOffset = (this.list.data.length - 1 - this.draggedIndex) * this.itemHeight;
|
|
|
- const minOffset = -this.draggedIndex * this.itemHeight;
|
|
|
- const limitedOffset = Math.max(minOffset, Math.min(maxOffset, deltaYupx));
|
|
|
-
|
|
|
- this.dragOffsetY = limitedOffset;
|
|
|
-
|
|
|
- // 实时计算目标位置
|
|
|
- const moveItems = Math.round(limitedOffset / this.itemHeight);
|
|
|
- this.targetIndex = Math.max(0, Math.min(this.list.data.length - 1, this.draggedIndex + moveItems));
|
|
|
- },
|
|
|
-
|
|
|
- // 拖拽结束
|
|
|
- dragEnd() {
|
|
|
- if (!this.isDragging) return;
|
|
|
-
|
|
|
- // 计算最终位置
|
|
|
- const moveItems = Math.round(this.dragOffsetY / this.itemHeight);
|
|
|
- const targetIndex = Math.max(0, Math.min(this.list.data.length - 1, this.draggedIndex + moveItems));
|
|
|
-
|
|
|
- // 如果位置有变化,则更新数组
|
|
|
- if (targetIndex !== this.draggedIndex) {
|
|
|
- const newData = [...this.list.data];
|
|
|
- const draggedItem = newData[this.draggedIndex];
|
|
|
-
|
|
|
- newData.splice(this.draggedIndex, 1);
|
|
|
- newData.splice(targetIndex, 0, draggedItem);
|
|
|
-
|
|
|
- this.list.data = newData;
|
|
|
- // 拖拽结束后立即保存
|
|
|
- this.saveOrder();
|
|
|
- }
|
|
|
-
|
|
|
- // 移除拖拽模式样式
|
|
|
- this.toggleDragMode(false);
|
|
|
-
|
|
|
- // 重置拖拽状态
|
|
|
- this.draggedIndex = -1;
|
|
|
- this.draggedItem = null;
|
|
|
- this.dragOffsetY = 0;
|
|
|
- this.isDragging = false;
|
|
|
- this.startY = 0;
|
|
|
- this.originalOrder = [];
|
|
|
- this.targetIndex = -1;
|
|
|
+ clear(item){
|
|
|
+ item.inTurn=''
|
|
|
+ this.$forceUpdate()
|
|
|
},
|
|
|
-
|
|
|
- // 切换拖拽模式
|
|
|
- toggleDragMode(isDragging) {
|
|
|
- // #ifdef H5
|
|
|
- if (isDragging) {
|
|
|
- document.body.classList.add('dragging-mode');
|
|
|
- } else {
|
|
|
- document.body.classList.remove('dragging-mode');
|
|
|
- }
|
|
|
- // #endif
|
|
|
-
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- if (typeof uni.setPageStyle !== 'function') {
|
|
|
- console.warn('uni.setPageStyle is not available on this platform.');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- if (isDragging) {
|
|
|
- uni.setPageStyle({
|
|
|
- style: {
|
|
|
- overflow: 'hidden',
|
|
|
- position: 'fixed',
|
|
|
- width: '100%',
|
|
|
- top: `-${this.scrollTop}px`,
|
|
|
- left: '0',
|
|
|
- right: '0'
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.setPageStyle({
|
|
|
- style: {
|
|
|
- overflow: '',
|
|
|
- position: '',
|
|
|
- width: '',
|
|
|
- top: '',
|
|
|
- left: '',
|
|
|
- right: ''
|
|
|
- }
|
|
|
- });
|
|
|
- uni.pageScrollTo({
|
|
|
- scrollTop: this.scrollTop,
|
|
|
- duration: 0
|
|
|
- });
|
|
|
- }
|
|
|
- // #endif
|
|
|
-
|
|
|
- // #ifdef APP-PLUS
|
|
|
- const webview = this.$scope.$getAppWebview();
|
|
|
- if (!webview) {
|
|
|
- console.warn('无法获取 webview。');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- if (isDragging) {
|
|
|
- webview.evalJS(`
|
|
|
- var body = document.body;
|
|
|
- body.style.overflow = 'hidden';
|
|
|
- body.style.position = 'fixed';
|
|
|
- body.style.width = '100%';
|
|
|
- body.style.left = '0';
|
|
|
- body.style.right = '0';
|
|
|
- body.style.top = '-${this.scrollTop}px';
|
|
|
- `);
|
|
|
+ affirmBatch(val) {
|
|
|
+ let that = this
|
|
|
+ if (val.index === 0) {
|
|
|
+ this.batchNum = ''
|
|
|
+ this.batchModel = false;
|
|
|
} else {
|
|
|
- webview.evalJS(`
|
|
|
- var body = document.body;
|
|
|
- body.style.overflow = '';
|
|
|
- body.style.position = '';
|
|
|
- body.style.width = '';
|
|
|
- body.style.left = '';
|
|
|
- body.style.right = '';
|
|
|
- body.style.top = '';
|
|
|
- `);
|
|
|
- uni.pageScrollTo({
|
|
|
- scrollTop: this.scrollTop,
|
|
|
- duration: 0
|
|
|
+ if(this.$util.isMoney(this.batchNum) == false){
|
|
|
+ this.$msg('请填写数值')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let currentNum = Number(this.batchNum)
|
|
|
+ this.list.data.forEach(function(value,index,array){
|
|
|
+ array[index].inTurn = parseFloat((currentNum).toFixed(2))
|
|
|
});
|
|
|
+ this.batchNum = ''
|
|
|
+ this.batchModel = false;
|
|
|
}
|
|
|
- // #endif
|
|
|
},
|
|
|
-
|
|
|
- // 上移
|
|
|
- upFn(id) {
|
|
|
- if (this.isOperating) return;
|
|
|
- this.isOperating = true;
|
|
|
-
|
|
|
- const index = this.list.data.findIndex((item) => item.id === id);
|
|
|
- if (index > 0) {
|
|
|
- const newData = [...this.list.data];
|
|
|
- const temp = newData[index];
|
|
|
- newData[index] = newData[index - 1];
|
|
|
- newData[index - 1] = temp;
|
|
|
- this.list.data = newData;
|
|
|
- // 操作后立即保存
|
|
|
- this.saveOrder();
|
|
|
- }
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- this.isOperating = false;
|
|
|
- }, 300);
|
|
|
- },
|
|
|
-
|
|
|
- // 下移
|
|
|
- downFn(id) {
|
|
|
- if (this.isOperating) return;
|
|
|
- this.isOperating = true;
|
|
|
-
|
|
|
- const index = this.list.data.findIndex((item) => item.id === id);
|
|
|
- if (index < this.list.data.length - 1) {
|
|
|
- const newData = [...this.list.data];
|
|
|
- const temp = newData[index];
|
|
|
- newData[index] = newData[index + 1];
|
|
|
- newData[index + 1] = temp;
|
|
|
- this.list.data = newData;
|
|
|
- // 操作后立即保存
|
|
|
- this.saveOrder();
|
|
|
- }
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- this.isOperating = false;
|
|
|
- }, 300);
|
|
|
- },
|
|
|
-
|
|
|
- // 置顶
|
|
|
- topFn(id) {
|
|
|
- if (this.isOperating) return;
|
|
|
- this.isOperating = true;
|
|
|
-
|
|
|
- const index = this.list.data.findIndex((item) => item.id === id);
|
|
|
- if (index > 0) {
|
|
|
- const newData = [...this.list.data];
|
|
|
- const targetItem = newData[index];
|
|
|
-
|
|
|
- newData.splice(index, 1);
|
|
|
- newData.unshift(targetItem);
|
|
|
-
|
|
|
- this.list.data = newData;
|
|
|
- // 操作后立即保存
|
|
|
- this.saveOrder();
|
|
|
- }
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- this.isOperating = false;
|
|
|
- }, 300);
|
|
|
- },
|
|
|
-
|
|
|
- // 置底
|
|
|
- bottomFn(id) {
|
|
|
- if (this.isOperating) return;
|
|
|
- this.isOperating = true;
|
|
|
-
|
|
|
- const index = this.list.data.findIndex((item) => item.id === id);
|
|
|
- if (index < this.list.data.length - 1) {
|
|
|
- const newData = [...this.list.data];
|
|
|
- const targetItem = newData[index];
|
|
|
-
|
|
|
- newData.splice(index, 1);
|
|
|
- newData.push(targetItem);
|
|
|
-
|
|
|
- this.list.data = newData;
|
|
|
- // 操作后立即保存
|
|
|
- this.saveOrder();
|
|
|
- }
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- this.isOperating = false;
|
|
|
- }, 300);
|
|
|
- },
|
|
|
-
|
|
|
- // 保存排序
|
|
|
- saveOrder() {
|
|
|
- let that = this;
|
|
|
- const sortData = this.list.data.map((item, index) => ({
|
|
|
- id: item.id,
|
|
|
- inTurn: this.list.data.length - index // 反向索引,第一个有最大值
|
|
|
- }));
|
|
|
- batchChangeMore({ addData: JSON.stringify(sortData) }).then(res => {
|
|
|
- if (res.code == 1) {
|
|
|
- //that.$msg('已保存')
|
|
|
+ savePrice(){
|
|
|
+ let that = this
|
|
|
+ let addData = [];
|
|
|
+ uni.showLoading({mask:true})
|
|
|
+ let mayStop = false
|
|
|
+ this.list.data.forEach(function(value,index,array){
|
|
|
+ if(that.$util.isMoney(value.inTurn) == false){
|
|
|
+ that.$msg('请填写 '+value.name+' 顺序值')
|
|
|
+ mayStop = true
|
|
|
+ return false
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- async init() {
|
|
|
+ addData.push({id:value.id,inTurn:value.inTurn})
|
|
|
+ })
|
|
|
+ if(mayStop == true){
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let addString = JSON.stringify(addData)
|
|
|
+ batchChangeMore({addData:addString}).then(res=>{
|
|
|
+ uni.hideLoading()
|
|
|
+ if(res.code == 1){
|
|
|
+ that.$msg(res.msg)
|
|
|
+ that.resetList();
|
|
|
+ that.init()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async init(){
|
|
|
const res = await productList({
|
|
|
- page: this.list.page,
|
|
|
- showPage: 1,
|
|
|
- pageSize: 2000,
|
|
|
- classId: this.option.classId
|
|
|
- });
|
|
|
- this.completes(res);
|
|
|
- this.totalNum = res.data && res.data.total ? Number(res.data.total) : this.list.data.length;
|
|
|
+ page:this.list.page,showPage:1,pageSize:2000,classId:this.option.classId
|
|
|
+ })
|
|
|
+ this.completes(res)
|
|
|
}
|
|
|
},
|
|
|
async onPullDownRefresh() {
|
|
|
this.resetList();
|
|
|
- await this.init();
|
|
|
+ await this.init()
|
|
|
uni.stopPullDownRefresh();
|
|
|
},
|
|
|
async onReachBottom() {
|
|
|
if (!this.list.finished) {
|
|
|
- await this.init();
|
|
|
- uni.stopPullDownRefresh();
|
|
|
+ await this.init()
|
|
|
+ uni.stopPullDownRefresh();;
|
|
|
} else {
|
|
|
uni.stopPullDownRefresh();
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.app-content {
|
|
|
- min-height: 100vh;
|
|
|
- padding-bottom: 20upx;
|
|
|
-}
|
|
|
-
|
|
|
-.sort-list-wrap {
|
|
|
- position: relative;
|
|
|
- background-color: #fff;
|
|
|
-
|
|
|
- .sort-item {
|
|
|
- height: 100upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 12upx 0;
|
|
|
- margin: 0 30upx;
|
|
|
- color: #333;
|
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
- position: relative;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- .item-content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- width: auto;
|
|
|
- user-select: none;
|
|
|
- -webkit-user-select: none;
|
|
|
- touch-action: none;
|
|
|
- -webkit-touch-callout: none;
|
|
|
-
|
|
|
- .item-name {
|
|
|
- font-size: 28upx;
|
|
|
- font-weight: bold;
|
|
|
- color: #000;
|
|
|
- margin-bottom: 4upx;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-
|
|
|
- .item-index {
|
|
|
- font-size: 22upx;
|
|
|
- color: #999;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .buttons-area {
|
|
|
- display: flex;
|
|
|
- gap: 24upx;
|
|
|
- align-items: center;
|
|
|
- padding-left: 20upx;
|
|
|
- pointer-events: auto;
|
|
|
- margin-left: auto;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.move-btn {
|
|
|
- position: relative;
|
|
|
- display: inline-flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 50upx;
|
|
|
- height: 50upx;
|
|
|
- color: #fff;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border: 2px solid rgba(255, 255, 255, 0.3);
|
|
|
- border-radius: 50%;
|
|
|
- font-size: 24upx;
|
|
|
- font-weight: bold;
|
|
|
- box-shadow: 0 3upx 10upx rgba(102, 126, 234, 0.25);
|
|
|
- transition: all 0.2s ease;
|
|
|
- z-index: 10;
|
|
|
- cursor: pointer;
|
|
|
- flex-shrink: 0;
|
|
|
- /* #ifdef MP-WEIXIN || APP-PLUS || MP-ALIPAY */
|
|
|
- user-select: none;
|
|
|
- -webkit-user-select: none;
|
|
|
- -webkit-touch-callout: none;
|
|
|
- /* #endif */
|
|
|
-
|
|
|
- /* 触摸反馈 */
|
|
|
- &:active {
|
|
|
- transform: scale(0.92);
|
|
|
- box-shadow: 0 2upx 6upx rgba(102, 126, 234, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- /* 悬停效果 - 仅在 H5 显示 */
|
|
|
- /* #ifdef H5 */
|
|
|
- &:hover:not(.disabled) {
|
|
|
- transform: translateY(-2upx);
|
|
|
- box-shadow: 0 4upx 15upx rgba(102, 126, 234, 0.35);
|
|
|
- }
|
|
|
- /* #endif */
|
|
|
-}
|
|
|
-
|
|
|
-/* 置顶按钮 - 黄色渐变 */
|
|
|
-.move-btn-top {
|
|
|
- background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
|
|
|
- box-shadow: 0 3upx 10upx rgba(254, 202, 87, 0.25);
|
|
|
-
|
|
|
- &:active {
|
|
|
- box-shadow: 0 2upx 6upx rgba(254, 202, 87, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- /* #ifdef H5 */
|
|
|
- &:hover:not(.disabled) {
|
|
|
- box-shadow: 0 4upx 15upx rgba(254, 202, 87, 0.35);
|
|
|
- }
|
|
|
- /* #endif */
|
|
|
-}
|
|
|
-
|
|
|
-/* 置底按钮 - 黄色渐变 */
|
|
|
-.move-btn-bottom {
|
|
|
- background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
|
|
|
- box-shadow: 0 3upx 10upx rgba(254, 202, 87, 0.25);
|
|
|
-
|
|
|
- &:active {
|
|
|
- box-shadow: 0 2upx 6upx rgba(254, 202, 87, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- /* #ifdef H5 */
|
|
|
- &:hover:not(.disabled) {
|
|
|
- box-shadow: 0 4upx 15upx rgba(254, 202, 87, 0.35);
|
|
|
- }
|
|
|
- /* #endif */
|
|
|
-}
|
|
|
-
|
|
|
-/* 上移按钮 - 青色渐变 */
|
|
|
-.move-btn-up {
|
|
|
- background: linear-gradient(135deg, #48dbfb 0%, #0abde3 100%);
|
|
|
- box-shadow: 0 3upx 10upx rgba(72, 219, 251, 0.25);
|
|
|
-
|
|
|
- &:active {
|
|
|
- box-shadow: 0 2upx 6upx rgba(72, 219, 251, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- /* #ifdef H5 */
|
|
|
- &:hover:not(.disabled) {
|
|
|
- box-shadow: 0 4upx 15upx rgba(72, 219, 251, 0.35);
|
|
|
- }
|
|
|
- /* #endif */
|
|
|
-}
|
|
|
-
|
|
|
-/* 下移按钮 - 青色渐变 */
|
|
|
-.move-btn-down {
|
|
|
- background: linear-gradient(135deg, #48dbfb 0%, #0abde3 100%);
|
|
|
- box-shadow: 0 3upx 10upx rgba(72, 219, 251, 0.25);
|
|
|
-
|
|
|
- &:active {
|
|
|
- box-shadow: 0 2upx 6upx rgba(72, 219, 251, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- /* #ifdef H5 */
|
|
|
- &:hover:not(.disabled) {
|
|
|
- box-shadow: 0 4upx 15upx rgba(72, 219, 251, 0.35);
|
|
|
- }
|
|
|
- /* #endif */
|
|
|
-}
|
|
|
-
|
|
|
-/* 按钮禁用状态 */
|
|
|
-.move-btn.disabled {
|
|
|
- opacity: 0.5;
|
|
|
- transform: none !important;
|
|
|
- box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.08) !important;
|
|
|
- pointer-events: none;
|
|
|
- cursor: not-allowed;
|
|
|
- &:hover,
|
|
|
- &:active {
|
|
|
- transform: none !important;
|
|
|
- box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.08) !important;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 拖拽相关样式
|
|
|
-.sort-list-wrap .sort-item.dragging {
|
|
|
- border: 2px dashed #007aff !important;
|
|
|
- box-shadow: 0 8upx 40upx rgba(0, 122, 255, 0.25) !important;
|
|
|
- background-color: rgba(0, 122, 255, 0.08) !important;
|
|
|
- opacity: 0.9;
|
|
|
- border-radius: 16upx;
|
|
|
- transform: scale(1.02);
|
|
|
- transition: none !important; /* 拖拽时禁用过渡动画 */
|
|
|
-}
|
|
|
-
|
|
|
-.sort-list-wrap .sort-item.target-position {
|
|
|
- border: 3px solid #52c41a !important; /* 使用绿色边框区别于拖拽元素 */
|
|
|
- box-shadow: 0 6upx 30upx rgba(82, 196, 26, 0.3) !important;
|
|
|
- background-color: rgba(82, 196, 26, 0.1) !important;
|
|
|
- opacity: 0.95;
|
|
|
- border-radius: 16upx;
|
|
|
- transform: scale(1.01);
|
|
|
- transition: all 0.2s ease !important; /* 目标位置保持平滑过渡 */
|
|
|
-
|
|
|
- /* 添加一个内部指示器 */
|
|
|
- &::before {
|
|
|
- content: '移动到这儿';
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- padding: 8upx 22upx;
|
|
|
- background: linear-gradient(90deg, #52c41a, #73d13d);
|
|
|
- border-radius: 8upx;
|
|
|
- color: #fff;
|
|
|
- font-size: 26upx;
|
|
|
- font-weight: bold;
|
|
|
- opacity: 0.9;
|
|
|
- z-index: 99990;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 防止拖拽时页面滚动 */
|
|
|
-.dragging-mode {
|
|
|
- overflow: hidden !important;
|
|
|
- touch-action: none !important;
|
|
|
- -webkit-overflow-scrolling: auto !important;
|
|
|
-}
|
|
|
</style>
|