">
devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp实现拖拽排序+滑动删除功能

作者：笔触狂放9 | 2024-05-15 15:42:26

赞

踩

uniapp实现拖拽排序+滑动删除功能

此篇代码在原插件基础进行了bug修改与滑动功能的新增
原插件地址

HM-dragSorts.vue

<template>
	<view class="">

		<view class="HM-drag-sort" :style="{'height': ListHeight+'rpx','background-color': listBackgroundColor}">
			<!-- 拖拽中显示的行 -->
			<view class="rowBox-shadow" id="shadowRowBox">
				<view class="hm-row-shadow move" id="shadowRow">
					<view class="modules">
						<!-- 内容  -->
						<view class="row-content">
							<view class="row" :style="{'height': rowHeight+'rpx'}">
								<slot :hobby="shadowRow"></slot>
							</view>
						</view>
						<!-- 拖拽图标 -->
						<view class="drag-content">
							<view class="drag-icon" :style="{'height': rowHeight+'rpx'}">
								
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 拖拽列表 -->
			<scroll-view class="color scroll-view" :id="'scrollView_'+guid" :scroll-y="true"
				:style="{'height': ListHeight+'px'}" :scroll-top="scrollViewTop" @scroll="drag.scroll"
				:scroll-with-animation="scrollAnimation">
				<view class="list">
					<view v-for="(row,index) in dragList" :key="row.HMDrag_id" class="rowBox ani" @click="goDetails(row)">
						<uni-swipe-action>

							<!-- 注意,这里的style只有在行首次渲染出来才有效,后面拖动列表,style会被wxs修改,这里的style就不会再生效了 -->
							<view class="hm-row"
								:style="{'transform': 'translate3d(0,' + (row.HMDrag_sort-index)*100 + '%,-1px)'}"
								:data-sort="row.HMDrag_sort" :data-id="row.HMDrag_id" :id="row.HMDrag_id">
								<uni-swipe-action-item>
									<view class="modules">
										<!-- 内容  -->
										<view class="row-content" >
											<view class="row" @tap="triggerClick(row.HMDrag_sort, row)"
												:style="{'height': rowHeight+'rpx'}">
												<slot :hobby="row"></slot>
											</view>
										</view>

										<view class="drag-content" :data-id="row.HMDrag_id"
											@touchstart="drag.touchstart" @touchmove="drag.touchmove"
											@touchend="drag.touchend">
											<view class="drag-icon" :style="{'height': rowHeight+'rpx'}">
												<!-- <text class="iconfont icon-drag"></text> -->
											</view>
										</view>
									</view>
									<template v-slot:right class="rgBox">
										<view class="rightBtn" >
											<view class="" @click.stop="editBtn(row)">
												<image src="@/static/index/edit.png" mode=""></image>
											</view>
											<view class="" @click.stop="delBtn(row)">
												<image src="@/static/index/delete.png" mode=""></image>
											</view>
										</view>
									</template>
								</uni-swipe-action-item>
							</view>


						</uni-swipe-action>
					</view>
				</view>
			</scroll-view>

			<!-- 数据跳板 -->
			<view id="dataView" style="display: none !important;" :data-guid="guid" :prop="wxsDataStr"
				:change:prop="drag.receiveData">触发wxs跳板,请勿删除</view>
			<!-- #ifdef APP-VUE || H5 -->
			<view style="display: none !important;" :prop="scrollCommand" :change:prop="renderjs.runCommand">
				触发renderjs跳板,请勿删除</view>
				<!-- #endif -->

		</view>
	</view>
</template>
<script src="./drag.wxs" module="drag" lang="wxs"></script>
<script module="renderjs" lang="renderjs">
	// APP or H5端 renderjs 实现拖拽中的自动滚动列表
	export default {
		data() {
			return {
				e: null,
				ScrollView: null,
			}
		},
		methods: {
			runCommand(e) {
				if (e == null) {
					return
				}
				this.e = e;
				this.getScrollView(document.getElementById('scrollView_' + this.e.guid))
				window.cancelAnimationFrame(this.AnimationFrameID);
				this.AnimationFrameID = window.requestAnimationFrame(this.Animation);
				if (e.command == "stop") {
					window.cancelAnimationFrame(this.AnimationFrameID);
					return;
				}
			},
			Animation() {
				if (this.e.command == "stop") {
					window.cancelAnimationFrame(this.AnimationFrameID);
					return;
				}
				// 计算最大滚动高度
				let maxScrollTop = this.e.rowLength * this.e.rowHeight - this.e.ListHeight;
				if (this.e.command == "up") {
					this.ScrollView.scrollTop -= 3
				} else if (this.e.command == "down") {
					this.ScrollView.scrollTop += 3;
				}
				if (this.ScrollView.scrollTop < 0) {
					this.ScrollView.scrollTop = 0;
					window.cancelAnimationFrame(this.AnimationFrameID);
				}
				if (this.ScrollView.scrollTop > maxScrollTop) {
					this.ScrollView.scrollTop = maxScrollTop;
					window.cancelAnimationFrame(this.AnimationFrameID);
				}
				this.AnimationFrameID = window.requestAnimationFrame(this.Animation);
			},
			getScrollView(DOM) {

				if (this.ScrollView != null) {
					return this.ScrollView;
				}
				let styleStr = DOM.getAttribute('style');

				if (DOM.className == 'uni-scroll-view' && styleStr != null && styleStr.indexOf('overflow') > -1 && styleStr
					.indexOf(
						'auto') > -1) {
					this.ScrollView = DOM;
					return DOM;
				} else {
					this.getScrollView(DOM.firstChild);
				}
			}
		}
	}
</script>
<script>
	/**  
	 * 拖拽排序组件 HM-dragSort
	 * @description 拖拽排序组件 HM-dragSort
	 * @property {ObjectArray} list = [] 列表数据,数据格式[{"name": "花呗","icon": "/static/img/1.png",}]
	 * @property {Boolean} feedbackGenerator = [true|false] 是否拖动触感反馈  
	 * @property {Boolean} longTouch = [true|false] 是否长按拖动  
	 * @property {Boolean} autoScroll = [true|false] 是否拖拽至边缘自动滚动列表  
	 * @property {Number} longTouchTime = [] 选填,触发长按时长,单位:ms,默认350ms,不支持微信小程序 
	 * @property {Number} listHeight = 0 选填,可拖动列表整体的高度,单位:px,默认等于窗口高度 
	 * @property {Number} rowHeight = 44 选填,行高,单位:px,默认44px
	 * @property {String} listBackgroundColor  选填,列表底色,注意是列表的底色,不是行的底色,默认#FFFFFF
	 * @event {Function} change 行位置发生改变时触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据'}   
	 * @event {Function} confirm 拖拽结束且行位置发生了改变触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据',list:'整个列表拖动后的数据'}  
	 */
	export default {
		name: 'HM-dragSort',
		data() {
			return {
				guid: "",
				isAppH5: true, //是否APPH5 无需手动配置
				shadowRow: {}, // 存放被拖拽行数据
				// 列表数据
				dragList: [],
				ListHeight: this.listHeight, // scroll-view列表高度

				// 控制滑动
				scrollViewTop: 0, // 滚动条位置
				scrollCommand: null, //传递renderjs数据
				isHoldTouch: false, //是否正在拖拽
				isScrolling: false, //是否正在滚动视图
				scrollAnimation: false, //滚动动画 在微信端开启
				scrollTimer: null, //定时器-控制滚动 微信小程序端使用 实现类似requestAnimationFrame效果
				wxsDataObj: [],
				wxsDataStr: "[]"
			}
		},
		// #ifdef VUE3
		emits: ['change', 'confirm'],
		// #endif
		props: {
			//是否开启拖动震动反馈
			feedbackGenerator: {
				value: Boolean,
				default: true
			},
			// 是否开启长按拖动
			longTouch: {
				value: Boolean,
				default: false
			},
			autoScroll: {
				value: Boolean,
				default: true
			},
			longTouchTime: {
				value: Number,
				default: 300
			},
			// 列表数据
			list: {
				value: Array,
				default: []
			},
			// 行高度 默认44行高
			rowHeight: {
				value: Number,
				default: 44
			},
			// 组件高度 默认windowHeight满屏
			listHeight: {
				value: Number,
				default: 0
			},
			listBackgroundColor: {
				value: String,
				default: "#fff"
			}
		},
		watch: {
			longTouch(val) {
				// #ifdef VUE3
				if (!val) {
					console.error('vue3目前仅支持长按拖拽!');
				}
				// #endif

				this.pushWxsData('longTouch', val);
			},
			longTouchTime(val) {
				this.pushWxsData('longTouchTime', val);
			},
			feedbackGenerator(val) {
				this.pushWxsData('feedbackGenerator', val);
			},
			autoScroll(val) {
				this.pushWxsData('autoScroll', val);
			},
			list: {
				handler(val) {
					this.initList(val); //数据变化重新初始化list
				},
				immediate: true,
				deep: true
			},
			listHeight: {
				handler(val) {

					this.ListHeight = val;
					this.pushWxsData('ListHeight', this.ListHeight);
				},
				immediate: true
			}
		},
		mounted() {
			this.guid = this.getGuid();

			const res = uni.getSystemInfoSync();
			// #ifdef MP-WEIXIN
			let state = this.compareVersion(res.hostVersion, '2.14.2');
			if (state < 0) {
				console.error('当前微信基础库:' + res.hostVersion + ',HM-dragSorts组件仅支持微信基础库2.14.2+,请切换基础库!');
			}
			this.scrollAnimation = true;
			this.isAppH5 = false;
			// #endif
			if (this.listHeight == 0) {
				this.ListHeight = res.windowHeight;
				// #ifdef VUE3
				// vue3 要减去导航栏和状态栏高度
				if (res.windowHeight == res.screenHeight) {
					this.ListHeight = res.windowHeight - 45 - res.statusBarHeight;
				}
				// #endif
			}
			this.pushWxsData('isAppH5', this.isAppH5);
			this.pushWxsData('ListHeight', this.ListHeight);
			this.pushWxsData('longTouch', this.longTouch);
		},
		methods: {
			getGuid() {
				function S4() {
					return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
				}
				return (S4() + S4() + "_" + S4() + "_" + S4() + "_" + S4() + "_" + S4() + S4() + S4());
			},

			initList() {
				let tmpList = JSON.parse(JSON.stringify(this.list));
				for (let i = 0, len = tmpList.length; i < len; i++) {
					// 组件内赋予临时id和sort
					if (!tmpList[i].hasOwnProperty('HMDrag_id')) {
						tmpList[i].HMDrag_id = 'HMDragId_' + this.getGuid();
					}
					tmpList[i].HMDrag_sort = i;
				}
				if (this.dragList.length > 0) {
					setTimeout(() => {
						this.dragList.splice(0, this.dragList.length, ...tmpList);
					}, 50)
				} else {
					this.dragList = JSON.parse(JSON.stringify(tmpList));
				}
				this.pushWxsData('lastInitTime', (new Date()).valueOf());
			},
			loadShadowRow(e) {

				this.shadowRow = this.getMoveRow(e.rowSort);
			},

			//兼容微信小程序震动
			vibrate() {
				uni.vibrateShort()
			},
			// 控制自动滚动视图
			pageScroll(e) {
				// 滚动 up-上滚动 down-下滚动
				if (e.command == "up" || e.command == "down") {
					if (!this.isHoldTouch) {
						this.isHoldTouch = true;
						this.scrollViewTop = e.scrollTop;
					}
					if (this.isScrolling) {
						return;
					};
					this.isScrolling = true;

					if (this.isAppH5) {
						// APP端和H5端 执行renderjs的滚动
						e.ListHeight = this.ListHeight;
						e.rowHeight = this.rowHeight;
						e.rowLength = this.dragList.length;
						this.scrollCommand = e;
						return;
					}

					// 微信小程序执行以下逻辑
					this.scrollTimer != null && clearInterval(this.scrollTimer);
					let maxHeight = this.rowHeight * this.dragList.length + 1 - this.ListHeight;
					let runTick = true;
					// 逻辑层传递到视图层需要时间，可能会出现滚动不流畅现象
					this.scrollTimer = setInterval(() => {
						if (!runTick) {
							return;
						}
						this.runScroll(e.command, maxHeight);
						runTick = false;
						this.$nextTick(function() {
							runTick = true;
						})
					}, 16.6)
				}
				// 停止滚动
				if (e.command == "stop") {
					// #ifdef APP-PLUS || H5
					// 停止指定传递到renderjs
					this.scrollCommand = e;
					// #endif
					this.isScrolling && this.stopScroll();
				}
			},
			// 微信端的滚动
			runScroll(command, maxHeight) {
				if (command == "up") {
					this.scrollViewTop -= 5
				}
				if (command == "down") {
					this.scrollViewTop += 5;
				}
				if (this.scrollViewTop < 0) {
					this.scrollViewTop = 0;
					clearInterval(this.scrollTimer);
				}
				if (this.scrollViewTop > maxHeight) {
					this.scrollViewTop = maxHeight;
					clearInterval(this.scrollTimer);
				}
			},
			//停止滚动
			stopScroll() {
				this.scrollTimer != null && clearInterval(this.scrollTimer);
				this.isScrolling = false;
				this.scrollingtop = 0;
			},
			// 
			getMoveRow(HMDrag_sort) {
				for (let i = 0, len = this.dragList.length; i < len; i++) {
					if (this.dragList[i].HMDrag_sort == HMDrag_sort) {
						return JSON.parse(JSON.stringify(this.dragList[i]));
					}
				}
			},
			// 
			triggerClick(index, row) {
				let tmpRow = JSON.parse(JSON.stringify(row));
				// 清除临时id和sort
				delete tmpRow.HMDrag_id;
				delete tmpRow.HMDrag_sort;
				this.$emit('onclick', {
					index: index,
					row: JSON.parse(JSON.stringify(tmpRow))
				});
			},
			change(e) {
				e.moveRow = this.getMoveRow(e.index);
				// 清除组件临时赋予的id
				delete e.moveRow.HMDrag_id;
				delete e.moveRow.HMDrag_sort;
				this.$emit('change', e);
			},
			sort(e) {
				this.stopScroll();
				this.isHoldTouch = false;
				let moveRow = this.getMoveRow(e.index);
				// 检测清除临时id和sort
				delete moveRow.HMDrag_id;
				delete moveRow.HMDrag_sort;

				let list = JSON.parse(JSON.stringify(this.dragList));
				let tmpList = [];
				for (let i = 0, len = list.length; i < len; i++) {
					// 检测清除临时id和sort
					delete list[i].HMDrag_id;
					delete list[i].HMDrag_sort;
					let index = e.sortArray[i];
					this.dragList[i].HMDrag_sort = index;
					tmpList[index] = list[i];
				}
				// 触发组件confirm 并传递数据
				this.$emit('confirm', {
					list: tmpList,
					index: e.index,
					moveTo: e.offset,
					moveRow: moveRow
				});

			},
			getNowList() {
				let list = JSON.parse(JSON.stringify(this.dragList));
				let tmpList = [];
				for (let i = 0, len = list.length; i < len; i++) {
					let tmpSotr = list[i].HMDrag_sort;
					tmpList[tmpSotr] = list[i];
					// 检测清除临时id和sort
					delete tmpList[tmpSotr].HMDrag_id;
					delete tmpList[tmpSotr].HMDrag_sort;
				}
				return tmpList;
			},
			splice() {
				let deleteIndex = arguments[0];
				let deleteLength = arguments[1];
				let len = arguments.length;
				let waitPushList = [];
				for (let i = 2; i < len; i++) {
					let newRow = arguments[i]
					newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
					newRow.HMDrag_sort = deleteIndex + i - 2;
					waitPushList.push(newRow);
				}
				let minDeleteSort = deleteIndex;
				let maxDeleteSort = deleteLength > 0 ? deleteIndex + deleteLength - 1 : deleteIndex;
				let offsetSort = waitPushList.length - deleteLength;
				let deleteIndexArray = [];

				for (let i = this.dragList.length - 1; i >= 0; i--) {
					let row = this.dragList[i];
					let rowSort = row.HMDrag_sort;
					// 跳过
					if (rowSort < minDeleteSort) {
						continue;
					}
					// 删除
					if (deleteLength > 0 && rowSort >= minDeleteSort && rowSort <= maxDeleteSort) {
						this.dragList.splice(i, 1);
						continue;
					}
					if (offsetSort != 0 && rowSort >= maxDeleteSort) {
						let newSort = rowSort + offsetSort;
						this.dragList[i].HMDrag_sort = newSort;

					}
				}
				this.dragList.push(...waitPushList);
				this.pushNewSort();

				let list = JSON.parse(JSON.stringify(this.dragList));
				let tmpList = this.getNowList();
				return tmpList;
			},
			push() {
				let len = arguments.length;
				let waitPushList = [];
				let startSotr = this.dragList.length;
				for (let i = 0; i < len; i++) {
					let newRow = arguments[i]
					newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
					newRow.HMDrag_sort = startSotr + i;
					waitPushList.push(newRow);
				}
				this.dragList.push(...waitPushList);
				this.pushNewSort();
				let tmpList = this.getNowList();
				return tmpList;
			},
			unshift() {
				let len = arguments.length;
				let waitPushList = [];
				for (let i = 0; i < len; i++) {
					let newRow = arguments[i]
					newRow.HMDrag_id = 'HMDragId_' + this.getGuid();
					newRow.HMDrag_sort = i;
					waitPushList.push(newRow);
				}
				for (let i = this.dragList.length - 1; i >= 0; i--) {
					let row = this.dragList[i];
					let rowSort = row.HMDrag_sort;
					let newSort = rowSort + len;
					this.dragList[i].HMDrag_sort = newSort;
				}
				this.dragList.push(...waitPushList);
				this.pushNewSort();
				let tmpList = this.getNowList();
				return tmpList;
			},
			pushNewSort() {
				let sortArray = [];
				for (let i = 0, len = this.dragList.length; i < len; i++) {
					sortArray.push(this.dragList[i].HMDrag_sort);
				}
				this.pushWxsData('sortArray', sortArray);
				this.pushWxsData('lastInitTime', (new Date()).valueOf());
			},
			pushWxsData(key = null, val = null) {
				this.wxsDataObj.splice(0, 8, ['guid', this.guid],
					['listLength', this.dragList.length],
					['ListHeight', this.ListHeight],
					['isAppH5', this.isAppH5],
					['longTouch', this.longTouch],
					['longTouchTime', this.longTouchTime],
					['feedbackGenerator', this.feedbackGenerator],
					['autoScroll', this.autoScroll]);
				let index = -1;
				let sotrArrayIndex = -1;
				for (let i = 0; i < this.wxsDataObj.length; i++) {
					if (this.wxsDataObj[i][0] == key) {
						index = i;
						break;
					}
				}
				if (index > -1) {
					this.wxsDataObj[index][1] = val;
					if (key == 'sortArray') {
						sotrArrayIndex = index;
					}
				} else {
					this.wxsDataObj.push([key, val]);
					if (key == 'sortArray') {
						sotrArrayIndex = this.wxsDataObj.length - 1;
					}
				}

				if (this.guid == "") {
					return;
				}
				this.wxsDataStr = JSON.stringify(this.wxsDataObj);
			},
			compareVersion(v1, v2) {
				v1 = v1.split('.')
				v2 = v2.split('.')
				const len = Math.max(v1.length, v2.length)

				while (v1.length < len) {
					v1.push('0')
				}
				while (v2.length < len) {
					v2.push('0')
				}
				for (let i = 0; i < len; i++) {
					const num1 = parseInt(v1[i])
					const num2 = parseInt(v2[i])

					if (num1 > num2) {
						return 1
					} else if (num1 < num2) {
						return -1
					}
				}
				return 0
			},

			//编辑按钮
			editBtn(row) {
				this.$emit('editBtn', row)

			},



			//删除按钮
			delBtn(row) {
				this.$emit('delBtn', row)
			},
			
			//获取详情
			goDetails(row){
				console.log(row);
				this.$emit('goDetails',row)
			}





		}
	}
</script>

<style lang="scss" scoped>
	//默认
	$row-background-color: #fff;
	$border-color :#c8c7cb;
	$shadow-color-moveing :rgba(0, 0, 0, 0.5);
	$drag-icon-color: #c7c7cb;
	$drag-icon-color-disabled: #e7e7eb;
	//Dark模式
	$Dark-row-background-color: #000;
	$Dark-border-color :#3d3d40;
	$Dark-shadow-color-moveing :rgba(0, 0, 0, 0.5);
	$Dark-drag-icon-color: #c7c7cb;
	$Dark-drag-icon-color-disabled: #e7e7eb;

	//字体图标 拖拽图标
	@font-face {
		font-family: "HM-DS-font";
		src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
	}

	.iconfont {
		font-family: "HM-DS-font" !important;
		font-style: normal;

		&.icon-drag {
			&:before {
				content: "\e6e4";
			}
		}

	}

	// 定义颜色 start
	//默认颜色
	.color,
	.rowBox-shadow {

		.hm-row-shadow,
		.hm-row {
			.modules {
				.row-content {
					.row {
						border-bottom: solid 1rpx $border-color;
						background-color: $row-background-color;
					}
				}

				.drag-content {
					.drag-icon {
						border-bottom: solid 1rpx $border-color;
						background-color: $row-background-color;

						.iconfont {
							color: $drag-icon-color;
						}

						.disabled {
							color: $drag-icon-color-disabled;
						}
					}
				}
			}

			&.move {
				box-shadow: 0 1px 5px $shadow-color-moveing;
			}
		}

	}

	// 暗黑模式
	@media (prefers-color-scheme: dark) {

		//Dark模式
		.color .rowBox-shadow {
			&.scroll-view {
				border-bottom: 1rpx $Dark-border-color solid;
				border-top: 1rpx $Dark-border-color solid;
			}

			.hm-row-shadow,
			.hm-row {
				.modules {
					.row-content {
						.row {
							border-bottom: solid 1rpx $Dark-border-color;
							background-color: $Dark-row-background-color;
						}
					}

					.drag-content {
						.drag-icon {
							border-bottom: solid 1rpx $Dark-border-color;
							background-color: $Dark-row-background-color;

							.iconfont {
								color: $Dark-drag-icon-color;
							}

							.disabled {
								color: $Dark-drag-icon-color-disabled;
							}
						}
					}
				}

				&.move {
					box-shadow: 0 1px 5px $Dark-shadow-color-moveing;
				}
			}
		}
	}

	// 定义颜色 end 
	.HM-drag-sort {
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;

		.scroll-view {
			box-sizing: border-box;
		}

		.rowBox,
		.rowBox-shadow {
			width: 100%;

			.hm-row-shadow,
			.hm-row {
				// display: flex;
				// flex-direction: row;
				width: 100%;

				.modules {
					position: relative;
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					box-sizing: border-box;

					.row-content {
						width: 100%;
						flex-shrink: 1;
						position: relative;

						.row {
							display: flex;
							align-items: center;
							padding-left: 0px;

							box-sizing: border-box;

							.icon {
								width: 30px;
								height: 30px;
								border-radius: 6px;
								margin-right: 13px;
							}

							.text {
								font-size: 13px;
							}
						}
					}

					.drag-content {
						flex-shrink: 0;
						position: absolute;
						width: 100%;

						.drag-icon {
							width: 0px;
							display: flex;
							justify-content: center;
							align-items: center;
							box-sizing: border-box;

							.iconfont {
								font-size: 22px;
								color: #c7c7cb;
							}
						}
					}
				}
			}

			.hm-row-shadow {

				&.move {
					opacity: 0.8;

					view {
						border-bottom-width: 0;
					}
				}
			}

			.hm-row {
				opacity: 1;

				&.hide {
					opacity: 0;
				}

				&.ani {
					transition: transform 0.2s;
					-webkit-transition: transform 0.2s;
				}
			}

			&:last-child {
				.hm-row {
					view {
						border-bottom-width: 0;
					}
				}
			}
		}

		.rowBox-shadow {
			position: absolute;
			z-index: 100;
			display: none;

			&.show {
				display: flex !important;
			}

			&.hide {
				display: none !important;
			}
		}

		.list {
			display: flex;
			flex-direction: column;
			// transform-style:preserve-3d;
		}

	}

	/deep/ .uni-swipe {
		overflow: visible;
	}
	
	.rightBtn {
		width: 280rpx;
		padding: 0 32rpx 0 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #F2F7FA;
	
		view {
			width: 100rpx;
			height: 100rpx;
			background: #DDE6F2;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
	
	/deep/ .uni-scroll-view{
		overflow: visible!important;
	}
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403
  • 404
  • 405
  • 406
  • 407
  • 408
  • 409
  • 410
  • 411
  • 412
  • 413
  • 414
  • 415
  • 416
  • 417
  • 418
  • 419
  • 420
  • 421
  • 422
  • 423
  • 424
  • 425
  • 426
  • 427
  • 428
  • 429
  • 430
  • 431
  • 432
  • 433
  • 434
  • 435
  • 436
  • 437
  • 438
  • 439
  • 440
  • 441
  • 442
  • 443
  • 444
  • 445
  • 446
  • 447
  • 448
  • 449
  • 450
  • 451
  • 452
  • 453
  • 454
  • 455
  • 456
  • 457
  • 458
  • 459
  • 460
  • 461
  • 462
  • 463
  • 464
  • 465
  • 466
  • 467
  • 468
  • 469
  • 470
  • 471
  • 472
  • 473
  • 474
  • 475
  • 476
  • 477
  • 478
  • 479
  • 480
  • 481
  • 482
  • 483
  • 484
  • 485
  • 486
  • 487
  • 488
  • 489
  • 490
  • 491
  • 492
  • 493
  • 494
  • 495
  • 496
  • 497
  • 498
  • 499
  • 500
  • 501
  • 502
  • 503
  • 504
  • 505
  • 506
  • 507
  • 508
  • 509
  • 510
  • 511
  • 512
  • 513
  • 514
  • 515
  • 516
  • 517
  • 518
  • 519
  • 520
  • 521
  • 522
  • 523
  • 524
  • 525
  • 526
  • 527
  • 528
  • 529
  • 530
  • 531
  • 532
  • 533
  • 534
  • 535
  • 536
  • 537
  • 538
  • 539
  • 540
  • 541
  • 542
  • 543
  • 544
  • 545
  • 546
  • 547
  • 548
  • 549
  • 550
  • 551
  • 552
  • 553
  • 554
  • 555
  • 556
  • 557
  • 558
  • 559
  • 560
  • 561
  • 562
  • 563
  • 564
  • 565
  • 566
  • 567
  • 568
  • 569
  • 570
  • 571
  • 572
  • 573
  • 574
  • 575
  • 576
  • 577
  • 578
  • 579
  • 580
  • 581
  • 582
  • 583
  • 584
  • 585
  • 586
  • 587
  • 588
  • 589
  • 590
  • 591
  • 592
  • 593
  • 594
  • 595
  • 596
  • 597
  • 598
  • 599
  • 600
  • 601
  • 602
  • 603
  • 604
  • 605
  • 606
  • 607
  • 608
  • 609
  • 610
  • 611
  • 612
  • 613
  • 614
  • 615
  • 616
  • 617
  • 618
  • 619
  • 620
  • 621
  • 622
  • 623
  • 624
  • 625
  • 626
  • 627
  • 628
  • 629
  • 630
  • 631
  • 632
  • 633
  • 634
  • 635
  • 636
  • 637
  • 638
  • 639
  • 640
  • 641
  • 642
  • 643
  • 644
  • 645
  • 646
  • 647
  • 648
  • 649
  • 650
  • 651
  • 652
  • 653
  • 654
  • 655
  • 656
  • 657
  • 658
  • 659
  • 660
  • 661
  • 662
  • 663
  • 664
  • 665
  • 666
  • 667
  • 668
  • 669
  • 670
  • 671
  • 672
  • 673
  • 674
  • 675
  • 676
  • 677
  • 678
  • 679
  • 680
  • 681
  • 682
  • 683
  • 684
  • 685
  • 686
  • 687
  • 688
  • 689
  • 690
  • 691
  • 692
  • 693
  • 694
  • 695
  • 696
  • 697
  • 698
  • 699
  • 700
  • 701
  • 702
  • 703
  • 704
  • 705
  • 706
  • 707
  • 708
  • 709
  • 710
  • 711
  • 712
  • 713
  • 714
  • 715
  • 716
  • 717
  • 718
  • 719
  • 720
  • 721
  • 722
  • 723
  • 724
  • 725
  • 726
  • 727
  • 728
  • 729
  • 730
  • 731
  • 732
  • 733
  • 734
  • 735
  • 736
  • 737
  • 738
  • 739
  • 740
  • 741
  • 742
  • 743
  • 744
  • 745
  • 746
  • 747
  • 748
  • 749
  • 750
  • 751
  • 752
  • 753
  • 754
  • 755
  • 756
  • 757
  • 758
  • 759
  • 760
  • 761
  • 762
  • 763
  • 764
  • 765
  • 766
  • 767
  • 768
  • 769
  • 770
  • 771
  • 772
  • 773
  • 774
  • 775
  • 776
  • 777
  • 778
  • 779
  • 780
  • 781
  • 782
  • 783
  • 784
  • 785
  • 786
  • 787
  • 788
  • 789
  • 790
  • 791
  • 792
  • 793
  • 794
  • 795
  • 796
  • 797
  • 798
  • 799
  • 800
  • 801
  • 802
  • 803
  • 804
  • 805
  • 806
  • 807
  • 808
  • 809
  • 810
  • 811
  • 812
  • 813
  • 814
  • 815
  • 816
  • 817
  • 818
  • 819
  • 820
  • 821
  • 822
  • 823
  • 824
  • 825
  • 826
  • 827
  • 828
  • 829
  • 830
  • 831
  • 832
  • 833
  • 834
  • 835
  • 836
  • 837
  • 838
  • 839
  • 840
  • 841
  • 842
  • 843
  • 844
  • 845
  • 846
  • 847
  • 848
  • 849
  • 850
  • 851
  • 852
  • 853
  • 854
  • 855
  • 856
  • 857
  • 858
  • 859
  • 860
  • 861
  • 862
  • 863
  • 864
  • 865
  • 866
  • 867
  • 868
  • 869
  • 870
  • 871
  • 872
  • 873
  • 874
  • 875
  • 876
  • 877
  • 878
  • 879
  • 880
  • 881
  • 882
  • 883
  • 884
  • 885
  • 886
  • 887
  • 888
  • 889
  • 890
  • 891
  • 892
  • 893
  • 894
  • 895
  • 896
  • 897
  • 898
  • 899
  • 900
  • 901

组件使用

<template>
	<view class="view">
		<u-navbar leftText="录入最小维修单元" :fixed="true" :placeholder="true" @leftClick="backClick">
		</u-navbar>
		<view class="head-border">
		</view>
		<view class="content-box">
			<view class="item">
				<text class="left">
					设备名称
				</text>
				<text class="right">
					{{info.name}}
				</text>
			</view>
			<view class="item">
				<text class="left">
					专业
				</text>
				<text class="right" v-if="info.major">
					{{info.major.name}}
				</text>
			</view>
			<view class="item">
				<text class="left">
					站点
				</text>
				<text class="right" v-if="info.station">
					{{info.station.name}}
				</text>
			</view>
			<view class="item">
				<text class="left">
					安装位置
				</text>
				<text class="right">
					{{info.location}}
				</text>
			</view>
			<view class="item">
				<text class="left">
					地图点位
				</text>
				<view class="marker" @click="getLocation">
					<image src="../../static/index/map-marker.png" mode=""></image>
					<view class="jwd" v-if="info.map_point">
						{{info.map_point.point.x | capitalize}},{{info.map_point.point.y | capitalize}}
					</view>
					<view v-else>获取位置</view>
				</view>
			</view>
			<view class="item">
				<text class="left">
					二维码
				</text>
				<image class="right" :src="info.qrcode" mode="" @click="openImg"></image>
			</view>
		</view>
		<view class="miniunit">
			<view class="mini-title">
				<text>最小维修单元列表</text>
				<view class="allBtn">
					<view class="title-btn" v-if="list.length>0" @click="jxAdd">
						继续添加
					</view>
					<view class="title-btn" v-if="list.length>0" @click="imports">
						导入相似
					</view>
				</view>

			</view>
			<view class="enter" v-if="list.length==0">
				<text>这里空空如也</text>
				<view class="btns">
					<view class="lf" @click="imports">
						导入相似
					</view>
					<view class="rg" @click="jxAdd">
						立即录入
					</view>
				</view>

			</view>
			<view class="mini-list" v-else>
				<HM-dragSorts :key="keyNumber" ref="dragSorts" :list="list" :autoScroll="true" :feedbackGenerator="true"
					:listHeight="380*(list.length)" :longTouch="true" :rowHeight="380" @confirm="confirm"
					@editBtn="edit" @delBtn="deleteItem">
					<template slot-scope="hobby">
						<view class="card" @click="goDetails(hobby.hobby)">
							<view class="card-item nmBox">
								<text>
									<text>编码：</text>
									<text>{{hobby.hobby.unit_code}}</text>
								</text>
								<text class="number">× {{hobby.hobby.quantity}}</text>
							</view>
							<view class="card-item">
								<text>名称：</text>
								<text v-if="hobby.hobby.repair_unit">{{hobby.hobby.repair_unit.name}}</text>
							</view>
							<view class="card-item">
								<text>产品规格：</text>
								<text
									v-if="hobby.hobby.repair_unit">{{hobby.hobby.repair_unit.specification_model}}</text>
							</view>
							<view class="card-item">
								<text>品牌：</text>
								<text v-if="hobby.hobby.repair_unit">{{hobby.hobby.repair_unit.reference_brand}}</text>
							</view>
						</view>
					</template>
				</HM-dragSorts>
			</view>
		</view>

		<!-- 确认删除 -->
		<uni-popup ref="popup" type="center">
			<view class="dialogBox">
				<image src="../../static/index/close.png" class="close" @click="off()" mode=""></image>
				<view class="title">
					<text>确认删除</text>
				</view>
				<view class="contents">
					<text>确认删除吗？</text>

				</view>
				<view class="btnBox">
					<view class="off" @click="off">
						取消
					</view>
					<view class="bd">

					</view>
					<view class="queren" @click="confirmBtn">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<PrintCode ref="PrintCode" :imgUrl="info.qrcode" :info="info" codeType="qr"></PrintCode>
	</view>
</template>

<script>
	import {
		equipmentInfo,
		deviceQrcode,
		qrcodeInfo,
		unitList,
		unitDelete,
		orderUnit
	} from "@/api/material.js"
	export default {
		data() {
			return {
				id: '',
				info: {

				},
				list: [], //列表
				minId: "", //点击的最小维修单元id
				isShow:false,
				keyNumber:0
			};
		},
		filters: {
			capitalize(value) {
				if (!value) return '';
				value = Number(value).toFixed(2);
				return value
			}
		},
		onLoad(options) {
			if (options.code) {
				console.log(options.code);
				this.getDeviceQrcode(options.code)
			};
			if (options.id) {
				this.id = options.id
				this.getDeviceInfo()

			}
			uni.$on('update', (data) => {
				console.log(data.id);
				this.getList(data.id)
				if (data.obj) {
					console.log(data.obj);
					this.$set(this.info, 'map_point', {
						point: {}
					});
					this.$set(this.info.map_point.point, 'x', data.obj.x);
					this.$set(this.info.map_point.point, 'y', data.obj.y);
					this.$set(this.info.map_point, 'fl_id', data.obj.flId);
				}
			})





		},


		methods: {

			confirm(e) {
			 //排序后的序列
				console.log('=== confirm end ===', e.list);
			},


			openImg() {
				this.$refs.PrintCode.open()
			},

			//导入相似
			imports() {
				//存入当前设备
				uni.setStorageSync('current_equipment_id', this.info.id);

				uni.navigateTo({
					url: `/pages/importList/importList?major=${encodeURIComponent(JSON.stringify(this.info.major))}`
				})
			},



			off() {
				this.$refs.popup.close()
			},
			//确认
			confirmBtn() {
				unitDelete({
					id: this.minId
				}).then(res => {
					plus.nativeUI.toast("删除成功", {
						verticalAlign: 'top',
					});
					this.off()
					this.getList(this.info.id)
				})
			},





			getLocation() {
				let x = this.info.map_point?.point ? this.info.map_point.point.x : '';
				let y = this.info.map_point?.point ? this.info.map_point.point.y : '';
				let fl_id = this.info.map_point?.fl_id ? this.info.map_point.fl_id : ''; //楼层名称 

				uni.navigateTo({
					url: `/pages/map/map?x=${x}&y=${y}&fl_id=${fl_id}`
				})

			},


			async getDeviceInfo() {
				let res = await equipmentInfo({
					id: this.id
				});
				this.info = res.data;
				uni.setStorageSync('equipment_id', res.data.id)
				let res2 = await qrcodeInfo({
					id: res.data.id
				});
				this.$set(this.info, 'qrcode', res2.data.qrcode)
				this.getList(res.data.id)

			},

			//扫码过来
			async getDeviceQrcode(code) {
				let res = await deviceQrcode({
					encrypt: code
				});
				console.log(res.data);
				this.info = res.data;
				uni.setStorageSync('equipment_id', res.data.id)
				let res2 = await qrcodeInfo({
					id: res.data.id
				});
				this.$set(this.info, 'qrcode', res2.data.qrcode)
				this.getList(res.data.id)
				// let res3=await unitList({equipment_id:res.data.id})
				// console.log(res3);
				// this.list=res3.data;
			},


			//获取设备二维码
			getQrcodeInfo() {
				qrcodeInfo().then(res => {
					console.log(res);
				})
			},


			//获取列表 
			getList(id) {
				unitList({
					equipment_id: id
				}).then(res => {
					console.log(res);
					// this.isShow=false;
					setTimeout(()=>{
						this.keyNumber++;
						this.list = res.data;
					},100)
					
				})
			},



			//继续添加
			jxAdd() {
				// uni.setStorageSync('infoId',this.info.id);
				uni.navigateTo({
					url: `/pages/enteringMin/enteringMin?id=${this.info.id}`
				})
			},

			//跳转最小维修单元详情
			goDetails(item) {
				console.log(item);
				uni.navigateTo({
					url: `/pages/unitDetails/unitDetails?item=${encodeURIComponent(JSON.stringify(item))}&id=${this.info.id}`
				})
			},

			backClick() {
				uni.navigateBack(1)
			},

			//修改
			edit(item) {
				uni.navigateTo({
					url: `/pages/editUnitDetails/editUnitDetails?item=${encodeURIComponent(JSON.stringify(item))}&delta=${1}`
				})
			},

			//删除
			deleteItem(item) {
				console.log(item);
				this.minId = item.id;
				this.$refs.popup.open('center')
			}






		}
	}
</script>

<style lang="scss" scoped>
	.view {
		width: 100%;
		background: #fff;
	}

	.head-border {
		width: 100%;
		height: 24rpx;
		background: #F2F7FA;
	}

	.content-box {
		padding: 0 32rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 0;

		.left {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
		}

		.right {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
		}

		image {
			width: 222rpx;
			height: 222rpx;
		}
	}

	.mini-title {
		padding: 40rpx 32rpx;
		background: #F2F7FA;
		display: flex;
		justify-content: space-between;

		text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
		}

		.title-btn {
			width: 168rpx;
			height: 58rpx;
			line-height: 58rpx;
			text-align: center;
			border-radius: 58rpx 58rpx 58rpx 58rpx;
			border: 2rpx solid #224BAE;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #224BAE;

		}
	}

	.enter {
		padding-top: 122rpx;
		padding-bottom: 60px;
		text-align: center;
	}

	// .enter-btn {
	// 	width: 300rpx;
	// 	margin-top: 56rpx;
	// }
	.btns {
		padding: 84rpx 70rpx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		view {
			width: 288rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
		}

		.lf {
			background: #5D96F5;
			color: #FFFFFF;
		}

		.rg {
			border: 2rpx solid #224BAE;
			color: #224BAE;
		}
	}







	.marker {
		max-width: 350rpx;
		display: flex;
		align-items: center;
		word-wrap: break-word;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}

		.jwd {
			width: 228rpx;

		}

		view {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #3263D9;

		}
	}

	.card {
		width: 100%;
		border-bottom: 20rpx solid #F2F7FA;
		padding: 0 32rpx 40rpx 32rpx;

		.card-item {
			margin-top: 40rpx;

			text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
			}
		}

		.nmBox {
			display: flex;
			justify-content: space-between;

			.number {
				color: #3263D9;
			}
		}
	}

	.mini-list {
		// padding-bottom: 154rpx;

		// .bottomBox {
		// 	position: fixed;
		// 	bottom: 0;
		// 	width: 100%;
		// 	background: #fff;
		// }

		.rightBtn {
			width: 280rpx;
			padding: 0 32rpx 0 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #F2F7FA;

			view {
				width: 100rpx;
				height: 100rpx;
				background: #DDE6F2;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		// .saveBtn {
		// 	width: 686rpx;
		// 	height: 88rpx;
		// 	line-height: 88rpx;
		// 	text-align: center;
		// 	background: linear-gradient(180deg, #649DF6 0%, #3068EE 100%);
		// 	border-radius: 10rpx 10rpx 10rpx 10rpx;
		// 	font-family: PingFang HK, PingFang HK;
		// 	font-weight: 500;
		// 	font-size: 30rpx;
		// 	color: #FFFFFF;
		// 	margin: 0 auto;

		// }

		.bord {
			width: 270rpx;
			height: 10rpx;
			background: #000000;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 auto;
			margin-top: 16rpx;
			margin-bottom: 16rpx;
		}
	}

	// 弹窗样式
	.dialogBox {
		width: 630rpx;
		height: 374rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: relative;

		.close {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 32rpx;
			top: 32rpx;
		}

		.title {
			padding-top: 44rpx;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			text-align: center;
		}

		.contents {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			margin-top: 60rpx;
			text-align: center;
			letter-spacing: 2rpx;
		}

		.btnBox {
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0px;
			display: flex;
			border-top: 2rpx solid #F2F2F2;

			.bd {
				width: 2rpx;
				height: 98rpx;
				background-color: #F2F2F2;
			}

			.off,
			.queren {
				flex: 1;
				text-align: center;
				line-height: 98rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
			}

			.off {
				color: #000000;
			}

			.queren {
				color: #0F3389;
			}
		}
	}

	.allBtn {
		display: flex;

		view:first-child {
			margin-right: 20rpx;
		}
	}
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403
  • 404
  • 405
  • 406
  • 407
  • 408
  • 409
  • 410
  • 411
  • 412
  • 413
  • 414
  • 415
  • 416
  • 417
  • 418
  • 419
  • 420
  • 421
  • 422
  • 423
  • 424
  • 425
  • 426
  • 427
  • 428
  • 429
  • 430
  • 431
  • 432
  • 433
  • 434
  • 435
  • 436
  • 437
  • 438
  • 439
  • 440
  • 441
  • 442
  • 443
  • 444
  • 445
  • 446
  • 447
  • 448
  • 449
  • 450
  • 451
  • 452
  • 453
  • 454
  • 455
  • 456
  • 457
  • 458
  • 459
  • 460
  • 461
  • 462
  • 463
  • 464
  • 465
  • 466
  • 467
  • 468
  • 469
  • 470
  • 471
  • 472
  • 473
  • 474
  • 475
  • 476
  • 477
  • 478
  • 479
  • 480
  • 481
  • 482
  • 483
  • 484
  • 485
  • 486
  • 487
  • 488
  • 489
  • 490
  • 491
  • 492
  • 493
  • 494
  • 495
  • 496
  • 497
  • 498
  • 499
  • 500
  • 501
  • 502
  • 503
  • 504
  • 505
  • 506
  • 507
  • 508
  • 509
  • 510
  • 511
  • 512
  • 513
  • 514
  • 515
  • 516
  • 517
  • 518
  • 519
  • 520
  • 521
  • 522
  • 523
  • 524
  • 525
  • 526
  • 527
  • 528
  • 529
  • 530
  • 531
  • 532
  • 533
  • 534
  • 535
  • 536
  • 537
  • 538
  • 539
  • 540
  • 541
  • 542
  • 543
  • 544
  • 545
  • 546
  • 547
  • 548
  • 549
  • 550
  • 551
  • 552
  • 553
  • 554
  • 555
  • 556
  • 557
  • 558
  • 559
  • 560
  • 561
  • 562
  • 563
  • 564
  • 565
  • 566
  • 567
  • 568
  • 569
  • 570
  • 571
  • 572
  • 573
  • 574
  • 575
  • 576
  • 577
  • 578
  • 579
  • 580
  • 581
  • 582
  • 583
  • 584
  • 585
  • 586
  • 587
  • 588
  • 589
  • 590
  • 591
  • 592
  • 593
  • 594
  • 595
  • 596
  • 597
  • 598
  • 599
  • 600
  • 601
  • 602
  • 603
  • 604
  • 605
  • 606
  • 607
  • 608
  • 609
  • 610
  • 611
  • 612
  • 613
  • 614
  • 615
  • 616
  • 617
  • 618
  • 619
  • 620
  • 621
  • 622
  • 623
  • 624
  • 625
  • 626
  • 627
  • 628
  • 629
  • 630
  • 631
  • 632
  • 633
  • 634
  • 635
  • 636
  • 637
  • 638
  • 639
  • 640
  • 641
  • 642
  • 643
  • 644
  • 645
  • 646
  • 647
  • 648
  • 649
  • 650
  • 651
  • 652
  • 653
  • 654
  • 655
  • 656
  • 657
  • 658
  • 659
  • 660
  • 661
  • 662
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/573624
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。