chart

components/chartClassifyItem/drag.wxs

@@ -0,0 +1,267 @@
+var row_Height = 0;			//行高
+var scrollOffsetTop = 0;	//滚动条位置
+var isAppH5 = false;		//是否APPH5端
+var isLongTouch = false;	//是否开启长按
+var longTouchTime = 350;	//触发长安事件事件
+var isMove = false;			//是否可拖动
+var touchTimer=false;		//长按事件定时器
+function scroll(event,instance){
+	scrollOffsetTop = event.detail.scrollTop;
+}
+function touchstart(event, instance) {
+	isMove = false;
+	if(row_Height==0){
+		var rowStyle = event.instance.getComputedStyle(['height']);
+		row_Height = parseInt(rowStyle.height);//获取行高
+	}
+	var rowData = event.instance.getDataset();
+	var rowtype = rowData.type == "A" ? "B" : "A";
+	//重置样式
+	resetRowStyle(state, instance, rowtype);
+	var state = instance.getState();
+	if (event.touches.length == 1) {
+		state.point = event.touches[0];
+		state.initscrollOffsetTop = scrollOffsetTop;
+		state.islongTap = true;
+		state.rowData = rowData;
+		//读取数据
+		var dataViewDOM = instance.selectComponent('#dataView');
+		var viewData = dataViewDOM.getDataset();
+		isAppH5 = viewData.isapph5&&JSON.parse(viewData.isapph5);
+		isLongTouch = viewData.islongtouch&&JSON.parse(viewData.islongtouch);
+		longTouchTime = parseInt(viewData.longtouchtime);
+		state.rowData.rownum = viewData.rownum;
+		state.rowData.listheight = viewData.listheight;
+	}
+	
+	// 计算shadowRow.style.top
+	var rowIndex = parseInt(rowData.index);
+	var shadowRowTop = rowIndex*row_Height;
+	shadowRowTop = shadowRowTop - scrollOffsetTop;
+	// 加载shadowRow数据
+	instance.callMethod("loadShadowRow", {rowIndex : rowIndex,shadowRowTop:shadowRowTop});
+	state.shadowRowTop = shadowRowTop;
+	var shadowBoxComponent = instance.selectComponent('#shadowRowBox');
+	shadowBoxComponent.setStyle({'top': shadowRowTop + 'px'})
+	//长按事件
+	if(isLongTouch){
+		if(typeof setTimeout !== "undefined"){
+			touchTimer && clearTimeout(touchTimer);
+			touchTimer = setTimeout(function(){
+				longpress(event,instance);
+			},longTouchTime)
+		}
+	}
+}
+function longpress(event,instance){
+	if(isLongTouch){
+		isMove = true;
+		moveRow(instance, 0)
+	}
+}
+function touchmove(event, instance) {
+	
+	var state = instance.getState();
+	var rowData = event.instance.getDataset(); 
+	var movePoint = event.touches[0];
+	var initPoint = state.point;
+	var moveY = movePoint.pageY - initPoint.pageY;	
+	if(isLongTouch){
+		if(typeof setTimeout !== "undefined" && Math.abs(moveY)>10){
+			clearTimeout(touchTimer);
+		}
+		if (!isMove) {
+			return ;
+		}
+	}
+	moveRow(instance, moveY);
+	//阻止滚动页面
+	if(event.preventDefault){
+		event.preventDefault();
+	}
+	return false;
+}
+
+function touchend(event, instance) {
+	if(isLongTouch && typeof setTimeout !== "undefined"){
+		clearTimeout(touchTimer);
+	}
+	
+	if(lastCommand!="stop"){
+		lastCommand = "stop";
+		instance.callMethod("pageScroll", {'command':"stop"});
+	}
+	var state = instance.getState();
+	var rowtype = state.rowData.type;
+	
+	if (typeof state.offset !== "undefined" && state.rowData.index != state.offset && state.offset != null) {
+		instance.callMethod("sort", {
+			index: state.rowData.index,
+			offset: state.offset
+		});
+	} else {
+		resetRowStyle(state, instance, rowtype);
+		resetShadowRowStyle(instance)
+		feedbackGenerator(instance); //震动反馈
+		return false;
+	}
+	resetShadowRowStyle(instance)
+	typeof setTimeout !== "undefined" && setTimeout(function() {
+		resetRowStyle(state, instance, rowtype);
+	}, 500);
+	state.offset = null;
+	oldOffset = null;
+	feedbackGenerator(instance); //震动反馈
+	return false;
+}
+
+function resetRowStyle(state, instance, rowtype) {
+	var blockList = instance.selectAllComponents('.row'+rowtype);
+	for (var i = 0; i < blockList.length; i++) {
+		blockList[i].setStyle({
+			'height': row_Height+'px',
+			'transform': 'none',
+			'-webkit-transform': 'none'
+			});
+		blockList[i].removeClass('ani');
+		blockList[i].removeClass('hide');
+	}
+}
+function resetShadowRowStyle(instance) {
+	var shadowBoxComponent = instance.selectComponent('#shadowRowBox');
+	shadowBoxComponent.removeClass('show');
+	shadowBoxComponent.setStyle({});
+	shadowBoxComponent.removeClass('move');
+}
+var lastCommand = '';
+// move Row 
+function moveRow(instance, moveY) {
+	var state = instance.getState();
+	var initIndex = parseInt(state.rowData.index);
+	var rowtype = state.rowData.type;
+	//显示拖拽行Box
+	var shadowBoxComponent = instance.selectComponent('#shadowRowBox');
+	shadowBoxComponent.hasClass('show') || shadowBoxComponent.addClass('show');
+	//隐藏列表对应行
+	var rowDom = instance.selectComponent('#row' + rowtype + state.rowData.index);
+	rowDom.hasClass('hide') || rowDom.addClass('hide');
+	//拖动shadowRow
+	var shadowRowDom = instance.selectComponent('#shadowRow');
+	shadowRowDom.hasClass('move') || shadowRowDom.addClass('move');
+	shadowRowDom.removeClass('ani');
+	var style = {
+		'transform': 'translateY(' + moveY + 'px) translateZ(10px)',
+		'-webkit-transform': 'translateY(' + moveY + 'px) translateZ(10px)'
+	}
+	shadowRowDom.setStyle(style); 
+	
+	var listheight = state.rowData.listheight
+	var listClientY = state.shadowRowTop + moveY;
+	var tmpscrollListTop = scrollOffsetTop;
+	// 拖拽至边缘滚动视图 距离顶部距离1.5行高触发上滚动 下滚动同理
+	var callMethodData = {
+		command:listClientY<row_Height*1.5?"up":listClientY>listheight-(row_Height*1.5)?"down":"stop",
+		scrollTop:tmpscrollListTop,
+	}
+	//把滚动指令发给逻辑层
+	if(lastCommand!=callMethodData.command){
+		lastCommand = callMethodData.command;
+		instance.callMethod("pageScroll", callMethodData);
+	}
+	
+	var moveOffset = moveY + scrollOffsetTop - state.initscrollOffsetTop;
+	var offset = calcOffset(initIndex, moveOffset);
+	if(offset<=2 || offset>=state.rowData.rownum-2){
+		callMethodData.command = 'stop';
+	}
+	//为保证体验，非APP和H5端，在滚动视图期间不进行位置交换
+	if((!isAppH5) && callMethodData.command!='stop'){
+		return;
+	}
+	oldOffset = oldOffset == null ? initIndex : oldOffset;
+	if (offset < 0 || offset >= state.rowData.rownum) {
+		return;
+	}
+	if (offset == oldOffset) {
+		return;
+	}
+	
+	oldOffset = offset;
+	state.offset = offset;
+	//触发change事件
+	instance.callMethod("change", {
+		index: state.rowData.index,
+		moveTo: state.offset
+	});
+	feedbackGenerator(instance); //震动反馈
+	//根据offset对行进行位置交换
+	var blockList = instance.selectAllComponents('.row' + rowtype);
+	for (var i = 0; i < blockList.length; i++) {
+		if (i == initIndex) {
+			continue;
+		}
+		var translateY = 0;
+		if ((i >= offset && i < initIndex) || (i <= offset && i > initIndex)) {
+			translateY = i < initIndex ? row_Height : -row_Height;
+		}
+		var style = {
+			'height': row_Height+'px',
+			'transform': 'translateY(' + translateY + 'px) translateZ(5px)',
+			'-webkit-transform': 'translateY(' + translateY + 'px) translateZ(5px)'
+		}
+		blockList[i].hasClass('ani') || blockList[i].addClass('ani');
+		blockList[i].setStyle(style);
+	}
+	
+}
+//计算偏移index
+var oldOffset = null;
+function calcOffset(initIndex, moveY) {
+	var offset = initIndex + parseInt(moveY / row_Height); //偏移 行高的倍数
+	var rest = moveY % row_Height;
+	if (rest > 0) {
+		offset = offset + (rest / row_Height >= 0.6 ? 1 : 0);
+		if (offset < oldOffset) {
+			offset = rest / row_Height <= 0.4 ? offset : oldOffset;
+		}
+	} else {
+		offset = offset + (rest / row_Height <= -0.6 ? -1 : 0);
+		if (offset > oldOffset) {
+			offset = rest / row_Height >= -0.4 ? offset : oldOffset;
+		}
+	}
+	return offset;
+}
+
+//触感反馈
+//wxs 不支持条件编译，所以用此方法判断
+var isiOSAPP = typeof plus != "undefined" && plus.os.name == 'iOS';
+var UISelectionFeedbackGenerator;
+var UIImpactFeedbackGenerator;
+var impact
+
+if (isiOSAPP) {
+	UISelectionFeedbackGenerator = plus.ios.importClass("UISelectionFeedbackGenerator");
+	impact = new UISelectionFeedbackGenerator();
+	impact.init();
+}
+
+function feedbackGenerator(instance) {
+	if (isiOSAPP) {
+		impact.selectionChanged();
+	} else {
+		if (typeof plus != "undefined") {
+			plus.device.vibrate(12)
+		} else {
+			instance.callMethod("vibrate");
+		}
+	}
+}
+
+module.exports = {
+	scroll:scroll,
+	longpress:longpress,
+	touchstart: touchstart,
+	touchmove: touchmove,
+	touchend: touchend
+}

pages-chart/chartDetail.vue

@@ -0,0 +1,14 @@
+<template>
+  <web-view :src="url"></web-view>
+</template>
+
+<script>
+import {h5BaseUrl} from '../utils/config'
+export default {
+    data () {
+        return {
+            url:h5BaseUrl+'/hzyb/chart/detail'
+        }
+    }
+}
+</script>

pages.json

@@ -108,6 +108,12 @@
 					"style":{
 						"navigationBarTitleText": "图表分类"
 					}
+				},
+				{
+					"path": "chartDetail",
+					"style":{
+						"navigationBarTitleText": "图表详情"
+					}
 				}
 			]
 		}

pages/chart/chart.vue

@@ -1,6 +1,6 @@
 <template>
     <page-meta :page-style="showFilter? 'overflow: hidden;' : ''" :scroll-top="pageMetaScrollTop" />
-    <view class="chart-page">
+    <view class="chart-page" @click="pageClick">
       <van-sticky style="background: #fff">
         <view class="flex search-wrap" id="search-wrap">
             <van-search
@@ -22,7 +22,7 @@
       </van-sticky>
       <view class="chart-list-wrap">
         <drag
-          ref="chartDrag"
+          ref="chartDragIns"
           generic:item="chart-item"
           :columns="2"
           :list-data="list"
@@ -57,7 +57,12 @@
             <view class="filter-item" v-for="item in 4" :key="item">分类以</view>
 
             <view class="title">我的图库</view>
-            <view class="filter-item" v-for="item in 5" :key="item">分类以</view>
+            <dragSorts
+              :list="myClassifyList"
+              :rowHeight="44"
+              :listHeight="200"
+            ></dragSorts>
+            <!-- <view class="filter-item" v-for="item in 5" :key="item">分类以</view> -->
           </view>
         </view>
       </van-popup>
@@ -65,9 +70,11 @@
 
 <script>
 import chartItem from './component/chartItem.vue'
+import dragSorts from '../../components/chartClassifyItem/HM-dragSorts.vue'
 export default {
     components: {
-      'chart-item':chartItem
+      'chart-item':chartItem,
+      dragSorts
     },
     data() {
         return {
@@ -76,9 +83,11 @@ export default {
           list:[],
           page:1,
           finished:false,
-          chartDrag:null,
+          chartDragIns:null,//图表拖拽实例
           pageMetaScrollTop:0,
           scrollTop:0,
+
+          myClassifyList:[{name:"分类1"},{name:"分类2"},{name:"分类3"},{name:"分类4"},{name:"分类5"},{name:"分类6"},],//我的图库分类数据
         }
     },
     onLoad() {
@@ -103,8 +112,8 @@ export default {
           }
           this.list=[...this.list,...arr]
           setTimeout(() => {
-            this.chartDrag=this.$refs.chartDrag
-            this.chartDrag.init();
+            this.chartDragIns=this.$refs.chartDragIns
+            this.chartDragIns.init();
           }, 100);
         }else{
           this.finished=true
@@ -120,13 +129,16 @@ export default {
         console.log(moveTarget.title);
         this.list=listData
         setTimeout(() => {
-          this.chartDrag.init();
+          this.chartDragIns.init();
         }, 100);
         
       },
       // 点击某项
       chartClick(e){
         console.log(e.detail.data);
+        uni.navigateTo({
+          url:'/pages-chart/chartDetail'
+        })
       },
       // 移动时滚动
       chartScroll(e){
@@ -140,6 +152,11 @@ export default {
         })
         this.showFilter=false
       },
+
+      pageClick(){
+        const dom=this.createSelectorQuery()
+        console.log(dom.select('pop-title'));
+      }
       
     }
 }

pages/chart/component/chartItem.vue

@@ -1,6 +1,12 @@
 <template>
   <view class="chart-item" :data-id="itemData.dragId" @click.stop="itemClick">
-      <view class="van-multi-ellipsis--l2 title">{{itemData.title}}就发动机上课了发觉得凯撒尽快发动机卡JFK的撒尽快付款的撒娇离开了</view>
+      <rich-text 
+        class="van-multi-ellipsis--l2 title" 
+        :nodes="getTitle(itemData.title)"
+        @longpress.stop="chartTitle(itemData,$event)"
+      ></rich-text>
+      <view class="pop-title" v-if="showPopTitle">{{title}}</view>
+      <!-- <view class="van-multi-ellipsis--l2 title">{{itemData.title}}就发动机上课了发觉得凯撒尽快发动机卡JFK的撒尽快付款的撒娇离开了</view> -->
       <image lazy-load class="img" src="" mode="aspectFill"/>
   </view>
 </template>
@@ -14,9 +20,32 @@ export default {
 			    value: {}
         }
     },
+    data () {
+      return {
+        showPopTitle:false,
+        title:"",
+      }
+    },
     methods: {
       itemClick(){
         this.$emit('click')
+        this.showPopTitle=false
+      },
+
+      // 格式化标题
+      getTitle(e){
+        return `<span style="color:red">${e}</span>`
+      },
+
+      // 长按标题
+      chartTitle(data,e){
+        this.showPopTitle=true
+        this.title=data.title
+        uni.setClipboardData({
+          data: data.title,
+          success: (result) => {},
+          fail: (error) => {}
+        })
       }
     }
 }
@@ -32,10 +61,22 @@ export default {
     margin-right: 10rpx;
     margin-bottom: 20rpx;
     padding: 20rpx 20rpx 33rpx 20rpx;
+    position: relative;
     .title{
       font-size: 26rpx;
       min-height: 60rpx;
     }
+    .pop-title{
+      position: absolute;
+      width: 80%;
+      font-size: 24rpx;
+      padding: 8rpx;
+      border-radius: 4rpx;
+      top: 80rpx;
+      left: 10%;
+      background-color: #fff;
+      box-shadow: 0px 0px 12rpx rgba(154, 141, 123, 0.16);
+    }
     .img{
       margin-top: 10rpx;
       width: 100%;

utils/config.js

@@ -11,6 +11,16 @@ if(env.envVersion==='develop'){//开发
     baseApiUrl='https://yanbao.hzinsights.com'
 }
 
+// h5页面根路径
+let h5BaseUrl=''
+if(env.envVersion==='develop'){//开发
+    h5BaseUrl='http://advisoryadmin.brilliantstart.cn/xcx_h5'
+}else if(env.envVersion==='trial'){//体验版
+    h5BaseUrl='http://advisoryadmin.brilliantstart.cn/xcx_h5'
+}else if(env.envVersion==='release'){//正式版
+    h5BaseUrl='https://details.hzinsights.com'
+}
+
 // 配置图片资源 https://hzstatic.hzinsights.com/static/icon/hzyb/
 const globalImgUrls={
     activityNoAuth:'https://hzstatic.hzinsights.com/static/icon/hzyb/activity_no_auth.png',
@@ -62,5 +72,6 @@ const defaultTabBarListConfig=[
 module.exports={
     baseApiUrl,
     globalImgUrls,
-    defaultTabBarListConfig
+    defaultTabBarListConfig,
+    h5BaseUrl
 }