!21 2022-1-17 Leung

Merge pull request !21 from Admin/sit-Leung

rc-busness/ajax/getData.js

@@ -201,32 +201,27 @@ export const userque = (stype) => {
 
 
 //标品全部信息
-export const biaomessage = (stype,name) => {
+export const biaomessage = (stype,name,curPage,curRow) => {
-  console.log(stype);
+	if(!curPage)
-  if(stype.length>1){
+		curPage=1;
-    console.log("========");
+	if(!curRow)
-    let list={};
+		curRow=10;
-    stype.map(item=>{
+	let queryTail='&page='+curPage+'&rows='+curRow;
-      console.log(item);
+	if(stype.length>1){
-      list=item
+		let list={};
-    }) 
+		stype.map(item=>{
-    var str = "?";
+			console.log(item);
-              for(var key in list){
+			list=item
-                  str = str + key + "=" + list[key] + "&";
+		})
-              }
+		var str = "?";
-              stype = str.substr(0,str.length-1);
+		for(var key in list){
-    var data = {
+			str = str + key + "=" + list[key] + "&";
-      page:1,
+		}
-      row:10
+		stype = str.substr(0,str.length-1);
-    }
+		return fetch('product/query'+stype+queryTail, '', 'POST' )
-    return fetch('product/query'+stype, data, 'POST' )
+	}else{
-  }else{
+		return fetch('product/query?petType='+stype+queryTail, '', 'POST' )
-    console.log('-==');
+	}
-    return fetch('product/query?petType='+stype,data, 'POST' )
-    
-  }
- 
-   
 }
 
 export const searchchanpin = (stype) => {

rc-busness/assets/css/global.less

@@ -38,8 +38,7 @@ img, picture {
 	flex-wrap: wrap;
 	justify-content: space-evenly;
 	&:after{
-		content:"";
+
-		width:154px;
 	}
 	li{
 		border: 1px solid #D7D7D7;
@@ -369,17 +368,25 @@ img, picture {
 		display:block;
 		li{
 			max-width:20rem;
-			margin-right:.9rem;
+			//margin-right:.875rem;
-			margin-left:.9rem;
+			margin-left:2.2vw;
 			.rc-column{
 				span{
 					font-size:1.875rem;
 					height: 5.2rem;
 				}
 			}
+			&:nth-child(4n+1){
+				margin-left:0;
+			}
+			&:nth-child(4n){
+				//margin-right:0;
+			}
 		}
 		img{
 			width:20rem;
+			max-width:320px;
+			min-width:160px;
 		}
 	}
 	.ts-right-arr {
@@ -512,3 +519,14 @@ img, picture {
 		display: none!important;
 	}
 }
+@media screen and (min-width: 769px) and (max-width: 1370px)
+{
+	.ts-product-list {
+		display:flex;
+		justify-content: space-between;
+		li{
+			margin-left:0;
+			margin-right:0;
+		}
+	}
+}

rc-busness/assets/css/index.less

@@ -5,6 +5,36 @@
 /deep/.van-swipe__indicator--active{
 	background-color: #E1001A;
 }
+.rc-ma{
+	.ul-zhuan{
+		li{
+			background: unset;;
+			img{
+				border-radius: 50%;
+			}
+			&.active {
+				img{
+					border: 3px solid #E2001A;
+				}
+				color: #E2001A;
+			
+			}
+			&.unactive {
+				color: #444444;
+				img{
+					border: 3px solid #D7D7D7;
+				}
+			}
+		}
+	}
+}
+.uservideo{
+	overflow: hidden;
+	video{
+		height:100%;
+		width:auto;
+	}
+}
 @media screen and (max-width:768px){
 	.ul-dog{
 		display: none;
@@ -24,16 +54,14 @@
 			display: block;
 		}
 		img{
-			width: 0.64rem;
+			width: 4rem;
-			height: 0.64rem;
+			height: 4rem;
 			display: block;
 		}
 		li{
 			display: inline-block;
 			margin-left: 0.20rem;
-			width: 0.64rem;
 			text-align: center;
-			height: 0.64rem;
 			background: #F6F6F6;
 			border-radius: 50%;
 			opacity: 1;
@@ -260,12 +288,7 @@
 				li{
 					display: inline-block;
 					margin-left: 1.25rem;
-					width: 4rem;
 					text-align: center;
-					height: 4rem;
-					background: #F6F6F6;
-					border-radius: 50%;
-					opacity: 1;
 				}
 			}
 
@@ -280,15 +303,16 @@
 		}
 	}
 	.active {
-	font-size: 0.14rem;
+		font-size: 0.14rem;
-	border: 1px solid red;
+		img{
-	color: red;
+			border-width: 1px;
-
+		}
 	}
 	.unactive {
-	font-size: 0.14rem;
+		font-size: 0.14rem;
-	color: #444444;
+		img{
-	border: 1px solid #D7D7D7;
+			border-width: 1px;
+		}
 	}
 	// .usermain{
 	// 	display: none;
@@ -411,35 +435,33 @@ object-fit: cover;
 			margin-top: 1rem;
 		}
 	}
-.uservideo{
+	.uservideo{
-width: 35rem;
+		width: 35rem;
-height: 31.6rem;
+		height: 31.6rem;
-display: block;
+		display: block;
-border: 1px solid red;
+	}
-
+	.userleft{
-}
+		position: absolute;
-.userleft{
+		top: 50%;
-position: absolute;
+		left:0;
-top: 50%;
+		margin-top: -.72rem;
-left:0;
+		img{
-margin-top: -.72rem;
+		  width: .69rem;
-img{
+		  height: 1.38rem;
-  width: .69rem;
+		  display: block;
-  height: 1.38rem;
+		}
-  display: block;
+	}
-}
+	.userright{
-}
+		position: absolute;
-.userright{
+		top: 50%;
-position: absolute;
+		right:0;
-top: 50%;
+		margin-top: -.72rem;
-right:0;
+		img{
-margin-top: -.72rem;
+			width: .69rem;
-img{
+			height: 1.375rem;
-  width: .69rem;
+			display: block;
-  height: 1.375rem;
+		}
-  display: block;
+	}
-}
-}
 }
 
 }
@@ -494,23 +516,19 @@ img{
 			flex-wrap: wrap;
 			flex-direction: row;
 			span{
-				margin-top: 2.5rem;
+				margin-top: 1vw;
 				display: block;
 			}
 			img{
-				width: 9.5rem;
+				width: 10vw;
-				height: 9.5rem;
+				height: 10vw;
 				display: block;
 			}
 			li{
 				cursor: pointer;
 				font-size: 16px;
-				width: 9.875rem;
 				text-align: center;
-				height: 9.875rem;
+				margin-left:1.3vw;
-				background: #F6F6F6;
-				border-radius: 50%;
-				margin-left:1.25rem;
 			}
 		}
 
@@ -525,8 +543,6 @@ img{
 	
 }
 .usermain{
-   margin-top: 2.5rem;
-   padding-bottom: 2.82rem;
 		.ul-dog{
 			width: 100%;
 			display: flex;
@@ -593,17 +609,18 @@ margin-left: 2.5rem;
     }
   }
 }
-.active {
+	.active {
-  font-size: 1rem;
+		font-size: 1rem;
-   border: 3px solid red;
+		img{
-   color: red;
+			border-width: 3px;
-
+		}
-}
+	}
-.unactive {
+	.unactive {
-  font-size: 1rem;
+		font-size: 1rem;
-  color: #444444;
+		img{
-   border: 1px solid #D7D7D7;
+			border-width: 1px;
-}
+		}
+	}
 .rc-maa{
     ul{
      width: 100%;
@@ -635,15 +652,12 @@ border-radius: 50%;
 }
 
 
-  .userselection {
+	.userselection {
- font-size: 0.16rem;
+		font-size: 0.16rem;
-
+		color: #E2001A;
-color: #E2001A;
+	}
-
-}
 .unselection {
   font-size: 0.16rem;
- 
 }
 .rc-usermessage{
 	span{
@@ -653,3 +667,14 @@ color: #E2001A;
 	}
   }
 }
+
+@media screen and (min-width:600px) and (max-width:768px)
+{
+	.ul-zhuan{
+	    display: flex;
+	    justify-content: space-evenly;
+		li{
+			margin-left:0;
+		}
+	}
+}

rc-busness/components/header.vue

@@ -379,21 +379,23 @@
 	</div>
 </template>
 <script>
-
+const isReload={
-
+	needload:false
+};
 export default {
   data() {
     return {
-  headerScroll:false,
+		headerScroll:false,
-  loginornot:true,//用户是否登录提示点
+		loginornot:true,//用户是否登录提示点
-  usermessage:null,//存储用户信息
+		usermessage:null,//存储用户信息
-
     };
   },
+  created(){
+  },
   mounted() {
 	  //判断用户有无登录显示红点
 	let usernot=JSON.parse(localStorage.getItem("userInfo"));
-	console.log(usernot);
+	//console.log(usernot);
 	if(usernot==null ||usernot==undefined){
 		console.log(usernot);
           this.loginornot=true
@@ -401,21 +403,53 @@ export default {
 		 this.loginornot=false
 		this.usermessage=usernot;
 	}
-	console.log(this.loginornot);
+	//debugger;
+	if(isReload.needload)
+		location.reload();
+	if(isReload.needload==false)
+		isReload.needload=true;
+	//console.log(this.loginornot);
+	/*
+	if(RCDL && RCDL.utilities && RCDL.navigation && RCDL.navigation.rebuild)
+	{
+		
+		if (["sm", "xs", "md-1"].includes(RCDL.utilities.breakpoints.values.width.current)) {
+			this.refreshMobileNav();
+		}
+		else
+		{
+			this.refreshDesktopNav();
+		}
+		
+	}
+	*/
   },
 
   methods: {
-	  
+	refreshDesktopNav:function(){
+		RCDL.navigation.currentState=null;
+		RCDL.navigation.rebuild();
+	},
+	refreshMobileNav:function(){
+		let itemGroupList=document.querySelectorAll("nav[data-toggle-group=mobile] .rc-list--align[role=menu]");
+		itemGroupList.forEach(function(ele,i){
+			if(ele.className.indexOf("rc-expand--horizontal")<0 && ele.className.indexOf("rc-btn-offset--top")<0)
+			{
+				if(ele.id.indexOf("nav-list")>=0)
+					ele.classList.add("rc-expand--horizontal");
+				else if(ele.id.indexOf("nav-footer")>=0)
+					ele.classList.add("rc-expand--vertical");
+			}
+		})
+	},
 	bindTracking: function(){
-		console.log('bindTracking');
+		//console.log('bindTracking');
 	},
 
 	//
 	//跳转搜索
 	searchturn(){
-     this.$router.push({ name: "usersearch-search",
+		this.$router.push({ name: "usersearch-search",})
-					
-					})
 	},
      //判断有无登录跳转不同页面
 	turnlogin(){

rc-busness/components/magnifier.vue

@@ -1,288 +0,0 @@
-<template>
-  <div class="magnify">
-    <div class="left_contaner">
-      <div class="middle_img" @mouseover="boxMouseOver" @mouseleave="boxMouseLeave">
-        <img :src="middleImg" alt="" style="width:100%">
-        <div class="shade" @mouseover="shadeMouseOver" @mousemove="shadeMouseMove" ref="shade" v-show="isShade"></div>
-      </div>
-      <div class="carousel">
-        <div class="left_arrow arrow" @click="leftArrowClick">
-            <img src="../assets/image/userleft.jpg" alt="">
-        </div>
-
-        <div class="show_box">
-          <ul class="picture_container" ref="middlePicture">
-            <li class="picture_item" @click="tabPicture(item,index)" v-for="(item, index) in pictureList" :key="index">
-              <img :src="item.attachmentPath" class="small_img" alt="">
-            </li>
-          </ul>
-        </div>
-        <div class="right_arrow arrow" @click="rightArrowClick">
-			<img src="../assets/image/userright.png" alt="">
-        </div>
-      </div>
-    </div>
-    <div class="right_contanier" v-show="isBig">
-      <img :src="middleImg" ref="bigImg" class="big_img" alt="">
-    </div>
-  </div>
-</template>
-
-<script>
-import $ from 'jquery'
-export default {
-  props:['parentmsg'],
-  props: {
-
-    tableLabelTest:Array,
-    imgList: Array, // 图片数据
-    zoom: {
-      default: 2, // 缩略比例,放大比例
-      type: Number
-    }
-  },
-  data() {
-    return {
-	  middleImgWidth:350,
-	  middleImgHeight:350,
-	  thumbnailHeight:100,
-	  
-      tableLabelTest1:this.tableLabelTest,
-      pictureList: [
-		{url: require("../assets/four.png")},
-		{url: require("../assets/cat.png")},
-		{url: require("../assets/one.png")},
-		{url: require("../assets/six.png")},
-		{url: require("../assets/six.png")},
-		{url: require("../assets/six.png")},
-		{url: require("../assets/four.png")},
-		{url: require("../assets/cat.png")},
-		{url: require("../assets/one.png")},
-		{url: require("../assets/six.png")},
-		{url: require("../assets/six.png")},
-		{url: require("../assets/six.png")},
-      ],
-      menu:[],
-      middleImg: '', // 中图图片地址
-      bigImg: '', // 大图图片地址
-      isShade: false, // 控制阴影显示与否
-      isBig: false, // 控制放大图显示与否
-      initX: 0, // 初始clientX值
-      initY: 0, // 初始clientY值
-      leftX: 0, // 初始定位left
-      topY: 0, // 初始定位top
-      middleLeft: 0, // 当前放置小图盒子的定位left值,
-      itemWidth: 80, // 缩略图每张的宽度
-    }
-  },
-	watch:{
-		data:'ifadroind',// 值可以为methods的方法名
-		inputName: function(newValue) {
-			this.pictureList=newValue;
-			this.menu=newValue;
-			console.log(this.newValue);
-		}
-	},
-  created() {
-    
-  },
-
-  mounted() {
-	  let user= JSON.parse(localStorage.getItem("message"));
-	   console.log(user);
-	  if(user!==null){
-	   this.pictureList=user;
-	  }
-	  if (user && user.length) {
-		this.pictureList = user
-	  }
-	  this.middleImg = this.pictureList[0].attachmentPath;
-	  console.log(this.middleImg);
-	  // 计算缩略图的宽度,默认是显示4张图片,两边箭头的宽度和为50
-	  // this.itemWidth = (this.middleImgWidth-30) / 2
-	  this.ifadroind();
-	  this.$nextTick(() => {
-	  console.log(this.menu);
-      // 容器的高
-      const imgWidth = this.middleImgHeight + this.thumbnailHeight + 20
-      // 设置容器宽高
-      // $('.magnify').css({
-      //   width: this.middleImgWidth,
-      //   height: imgWidth
-      // })
-  
-      // 设置移动阴影图宽高
-      $('.middle_img .shade').css({
-        width: this.middleImgWidth/this.zoom,
-        height: this.middleImgHeight/this.zoom
-      })
-      // 设置缩略图容器高
-      $('.carousel').css({
-        height: this.thumbnailHeight
-      })
-      // 设置每个缩略图宽
-      // $('.picture_item').css({
-      //   width: this.itemWidth
-      // })
-      // 设置放大后图片容器的宽高,left
-      $('.right_contanier').css({
-        left: this.middleImgWidth,
-        width: imgWidth,
-        height: imgWidth
-      })
-      // 设置放大图片的宽高(图片的放大倍数)
-      $('.right_contanier .big_img').css({
-        width: imgWidth * this.zoom,
-        height: imgWidth * this.zoom
-      })
-    })
-  },
-  
-  methods: {
-            //判断是手机打开还是电脑打开
-    ifadroind(){
-		var sUserAgent = navigator.userAgent.toLowerCase();
-		var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
-		var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
-		var bIsMidp = sUserAgent.match(/midp/i) == "midp";
-		var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
-		var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
-		var bIsAndroid = sUserAgent.match(/android/i) == "android";
-		var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
-		var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
- 
-		if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
-		  //Mob Screen
-		}else{
-			//PC screen size
-			this.middleImgWidth=560;
-			this.middleImgHeight=560;
-		}
-		$('.middle_img').css({
-			width: this.middleImgWidth,
-			height: this.middleImgHeight
-		})
-  },
-    // 产品图片鼠标移入事件,显示阴影,显示大图
-    boxMouseOver (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      this.isShade = true
-      this.isBig = true
-      // 计算阴影的位置
-      let x = e.offsetX - $('.shade').width()/2
-      let y = e.offsetY - $('.shade').height()/2
-      let maxLeft = $('.middle_img').width() - $('.shade').width() 
-      let maxTop = $('.middle_img').height() - $('.shade').height()
-      x = x <= 0 ? 0 : x
-      x = x >= maxLeft ? maxLeft : x
-      y = y <= 0 ? 0 : y
-      y = y >= maxTop ? maxTop : y
-      $('.shade').css({
-        left: x,
-        top: y
-      })
-    },
-    // 鼠标在阴影移动
-    shadeMouseMove (e) {
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      //用页面x - 父盒子的offsetLeft - 父盒子的左边框宽度
-      var x = this.getEventPage(e).pageX - $('.middle_img')[0].offsetParent.offsetLeft - $('.middle_img')[0].offsetParent.clientLeft;
-      //用页面y - 父盒子的offsetTop - 父盒子的上边框宽度
-      var y = this.getEventPage(e).pageY - $('.middle_img')[0].offsetParent.offsetTop - $('.middle_img')[0].offsetParent.clientTop;
-
-      //让阴影的坐标居中
-      x -= $('.shade').width() / 2;
-      y -= $('.shade').height() / 2;
-
-      // 移动边界限制
-      let maxLeft = $('.middle_img').width() - $('.shade').width()
-      let maxTop = $('.middle_img').height() - $('.shade').height()
-      x = x <= 0 ? 0 : x
-      x = x >= maxLeft ? maxLeft : x
-      y = y <= 0 ? 0 : y
-      y = y >= maxTop ? maxTop : y
-      // 重新赋值当前的定位值
-      $('.shade').css({
-        left: x,
-        top: y
-      })
-      // 计算出实时的大图的定位,首先计算出比例
-      // 比例为x:大图宽度/小图宽度 y: 大图高度/小图高度,将小图的定位乘以比例就是大图的定位
-      const xRate = $('.big_img').width() / $('.middle_img').width()
-      const yRate = $('.big_img').height() / $('.middle_img').height()
-      $('.big_img').css({
-        left: -x*xRate,
-        top: -y*yRate
-      })
-      // console.log(e, x, y, xRate, yRate, 66677)
-    },
-    // 鼠标移入阴影,去除自定义事件
-    shadeMouseOver (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      // console.log(88888, e)
-    },
-    // 图片移出隐藏阴影和大图
-    boxMouseLeave () {
-      this.isShade = false
-      this.isBig = false
-    },
-    // 切换图片
-    tabPicture (item,index) {
-      this.middleImg = item.attachmentPath
-      this.$emit('changeName',item)
-      console.log(item,index)
-    },
-    // 点击左边箭头
-    leftArrowClick () {
-      if (this.middleLeft < 0) {
-        // 每次向右平移一个图片盒子的宽度
-        this.middleLeft += this.itemWidth
-        $('.picture_container').animate({
-          left: this.middleLeft
-        }, 500)
-      }
-    },
-    // 点击右边箭头
-    rightArrowClick () {
-      // 每次向左平移一个盒子的宽度,最多移动的宽度为(图片数组长度-1)*每张缩略图的宽度
-      if (this.middleLeft > -this.itemWidth*(this.pictureList.length-1)) {
-		this.middleLeft -= this.itemWidth
-		$('.picture_container').animate({
-			left: this.middleLeft
-		}, 500)
-      }
-    },
-    /**
-     * 获取网页滚出去的距离（包括上面滚出去的部分和左边滚出去的部分）
-     * @returns {{scrollTop: (Number|number), scrollLeft: (Number|number)}}
-     */
-    getPageScroll() {
-      return {
-        scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
-        scrollLeft: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
-      }
-    },
-
-    /**
-    * 获取事件对象点击的点，相对于文档左上角的坐标
-    * @param e
-    * @returns {{pageX: *, pageY: *}}
-    */
-    getEventPage(e) {
-      return {
-        pageX: e.clientX + this.getPageScroll().scrollLeft,
-        pageY: e.clientY + this.getPageScroll().scrollTop
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import url("../assets/css/magnifier.less");
-</style>