侧边栏

components/cm-module/scrollTop/scrollTop.vue

@@ -1,8 +1,182 @@
-<template>
+<template name="scrollTop">
+	<!-- 商品详情价格判断 -->
+	<view>
+		<view class="scrollTop">
+			<view class="icon msg" @click="onClickPhone">
+				<text class="iconfont icon-zixunrexian"></text>
+			</view>
+			<view class="icon top" @click="onPageScrollTop">
+				<text class="iconfont icon-zhiding"></text>
+			</view>
+		</view>
+		<view class="phone" v-show="isPhone" @click="hideIsPhone">
+			<view class="content">
+				<view class="tel">
+					<view class="p">0755-22907771</view>
+					<view class="btn">
+						<tui-button margin="5rpx 0 5rpx 0" type="gradual" shape="circle" width="120rpx" height="50rpx" :size="24" @click="toTelPhone">点击咨询</tui-button>
+					</view>
+				</view>
+				<view class="tel">
+					<view class="p">153-3885-1365</view>
+					<view class="btn">
+						<tui-button margin="5rpx 0 5rpx 0" type="gradual" shape="circle" width="120rpx" height="50rpx" :size="24" @click="toPhone">点击咨询</tui-button>
+					</view>
+				</view>
+				<view class="txt">工作日</view>
+				<view class="txt">周一~周五/9:00-18:00</view>
+			</view>
+			<text class="iconfont icon-2guanbi"></text>
+		</view>
+	</view>
 </template>
 
 <script>
+	export default{
+		name:'scrollTop',
+		props:{
+			
+		},
+		data() {
+			return{
+				isPhone:false,
+				telPhone:'0755-22907771',
+				mobilePhone:'15338851365'
+			}
+		},
+		created() {
+			
+		},
+		methods:{
+			onPageScrollTop(){
+				uni.pageScrollTo({
+				    scrollTop: 0,
+				    duration: 600
+				});
+			},
+			onClickPhone(){
+				this.isPhone = true
+			},
+			hideIsPhone(){
+				this.isPhone = false
+			},
+			toTelPhone(){
+				uni.makePhoneCall({
+				    phoneNumber:this.telPhone 
+				});
+			},
+			toPhone(){
+				uni.makePhoneCall({
+				    phoneNumber:this.mobilePhone 
+				});
+			},
+		},		
+	}
 </script>
 
-<style>
+<style lang="scss">	
+	.scrollTop{
+		width: 80rpx;
+		height: 200rpx;
+		position: fixed;
+		right: 24rpx;
+		bottom: 20%;
+		.icon{
+			width: 80rpx;
+			height: 80rpx;
+			border-radius: 50%;
+			float: left;
+			margin: 10rpx 0;
+			line-height: 80rpx;
+			text-align: center;
+			&.msg{
+				background-image: linear-gradient(0deg, #f28e31 0%, #e15616 100%);
+			}
+			&.top{
+				background-color: rgba(0,0,0,0.4);
+			}
+			.iconfont{
+				font-size: $font-size-44;
+				color: #FFFFFF;
+			}
+		}
+	}
+	.phone{
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		right: 0;
+		top: 0;
+		background: rgba(0,0,0,0.4);
+		z-index: 999999;
+		.content{
+			width: 500rpx;
+			height: 704rpx;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			margin: auto;
+			background: url(https://admin-b.caimei365.com/userfiles/1/images/photo/2020/11/%E4%B8%8B%E8%BD%BD.jpg) no-repeat;
+			background-size: cover;
+			border-radius: 20rpx;
+			box-sizing: border-box;
+			padding: 220rpx 60rpx 0 60rpx;
+			.tel{
+				height: 60rpx;
+				line-height: 60rpx;
+				font-size: $font-size-28;
+				margin: 8rpx 0;
+				.p{
+					color: $color-system;
+					float: left;
+				}
+				.btn{
+					float: right;
+				}
+			}
+			.txt{
+				height: 60rpx;
+				line-height: 60rpx;
+				font-size: $font-size-28;
+				color: #666666;
+				text-align: center;
+			}
+		}
+		.icon-2guanbi{
+			width: 80rpx;
+			height: 80rpx;
+			text-align: center;
+			line-height: 80rpx;
+			font-size: 54rpx;
+			display: block;
+			position: absolute;
+			bottom: 16%;
+			left: 50%;
+			margin-left: -40rpx;
+			color: #FFFFFF;
+		}
+	}
 </style>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

main.js

@@ -11,10 +11,12 @@ import cuCustom from './components/cm-custom/cu-custom.vue'
 import auCustom from './components/cm-custom/au-custom.vue'
 import cmCustom from './components/cm-custom/cm-custom.vue'
 import customCeller from './components/cm-custom/custom-seller.vue'
+import scrollTop from '@/components/cm-module/scrollTop/scrollTop.vue'
 Vue.component('cu-custom',cuCustom)
 Vue.component('au-custom',auCustom)
 Vue.component('cm-custom',cmCustom)
 Vue.component('custom-seller',customCeller)
+Vue.component('scroll-top',scrollTop)
 
 Vue.prototype.$getStorage = function(key){
 	var userParam = uni.getStorageSync(key);

pages/goods/product.vue

@@ -237,6 +237,8 @@
 					<view class="btn"><view class="button" @click.stop="btnConfirm">确定</view></view>
 				</view>
 			</view>
+			<!-- 侧边 -->
+			<scroll-top v-if="isScrollTop"></scroll-top>
 		</view>
 	</view>
 </template>
@@ -277,6 +279,7 @@
 				specClass: '',//规格弹窗css类，控制开关动画
 				isBtnType:'',
 				isRequest:false,
+				isScrollTop:false,
 				current:0,
 				isShareType:'',
 				isHeaderPoduct:false,
@@ -626,8 +629,10 @@
 			}
 			if(e.scrollTop>700){
 				this.navbarFiexd = 'fixed'
+				this.isScrollTop = true
 			}else{
 				this.navbarFiexd = 'none'
+				this.isScrollTop = false
 			}
 		},
 		onShareAppMessage(res){//分享转发

pages/tabBar/home/home.vue

@@ -147,6 +147,8 @@
 				</view>
 			</view>	
 		</view>
+		<!-- 侧边 -->
+		<scroll-top v-if="isScrollTop"></scroll-top>
 		<!-- 活动弹窗 -->
 		<!-- <activityAlert :show="isActivity" @click="handleClick" @cancel="handleCancelClick"></activityAlert> -->
 		<!-- 透明模态层 -->
@@ -170,7 +172,7 @@
 			modalLayer,
 			cmCustom,
 			uniStars,
-			activityAlert
+			activityAlert,
 		},
 		data() {
 			return {
@@ -219,7 +221,8 @@
 					{text:'售后无忧',icon:'../../../static/temp/server2@2x.png',path:'/pages/service/aftersale'},
 					{text:'购物须知',icon:'../../../static/temp/server3@2x.png',path:'/pages/service/shoppingnotice'},
 					{text:'联系我们',icon:'../../../static/temp/server4@2x.png',path:''},
-				]
+				],
+				isScrollTop:false
 			}
 		},
 		onLoad() {
@@ -418,6 +421,11 @@
 			}else{
 				this.inputActive = 'float'
 			}	
+			if(e.scrollTop>600){
+				this.isScrollTop = true
+			}else{
+				this.isScrollTop = false
+			}	
 		},
 		onPullDownRefresh() {//下拉刷新
 			this.getHomeInformation()