service_card/qianshancardshang_wx/pages/index/index.vue

<template>
    <view class="home" >
		<!-- 头部 -->
		<navbar :back="false" title="首页" :bgcolor="backgroundColor" color="#fff" fixed zIndex="1010" :center="true"	:custom='true' @getTop="getTop"/>
		<image :src="bgimg" class="homebg"></image>
		<view class="hometop">
			<swiper class="swiper" circular :indicator-active-color="activecolor" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<image :src="swpimga" class="swiperimg"></image>
				</swiper-item>
				<swiper-item>
					<image :src="swpimga" class="swiperimg"></image>
				</swiper-item>
				<swiper-item>
					<image :src="swpimga" class="swiperimg"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="flexcj  mainus">
			<view class="mainuse flex" @click="getUse">
				<view class="mainusea">
					<view class="mainuseb">使用指南</view>
					<view class="mainusec overtwo">查看使用指南了 解核销操作方法</view>
				</view>
				<image :src="znimg" class="mainused flex0"></image>
			</view>
			<view class="mainuse flex" @click="getRecord">
				<view class="mainusea">
					<view class="mainuseb">核销记录</view>
					<view class="mainusec overtwo">查看核销记录了 解核销记录信息</view>
				</view>
				<image :src="znhimg" class="mainused flex0" style="height: 82rpx;"></image>
			</view>
		</view>
		<view class="hgbox">
			<view class="flex1">
				<view class="hgboxtit">核销操作</view>
				<view class="hgboxtxt">扫描用户出示的二维码即可实现核销</view>
			</view>
			<image :src="rimg" class="flex0"></image>
		</view>
    <!-- 底部 导航栏  currentPage 当前页面ID -->
        <tab-bar :currentPage="0"></tab-bar>
    </view>
</template>

<script>
	import url from "@/util/url";
	let {host} = url
    //导入组件
    import tabBar from '@/components/tabbar/tabbar.vue'
    export default {
        data() {
            return {
				padtop:this.$http._GET.customBarH||0,
				backgroundColor: 'transparent',
				bgimg:require('@/static/image/bg.png'),
				swpimga:require("@/static/image/swipera.png"),
				indicatorDots: true,
				autoplay: false,
				activecolor:'#ffffff',
				interval: 2000,
				duration: 500,
				rimg:require("@/static/image/wrimg.png"),
				znimg: require('static/image/use.png'),
				znhimg: require('static/image/hicon.png'),
            };
        },
        components:{
            tabBar
        },
        methods: {
			getTop(e){
				this.padtop=e;
			},
			checkLogin() {
				var token = uni.getStorageSync('token')
				// var token = "df057579-73c8-4bdd-8312-f64db8efd699"
				if (token == undefined || token == '') {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return false
				}
				return true
			},
			getRecord(){
				// 判断是否能核销
				this.$http.routePage('/pages/index/record','nav')
				// if (!this.checkLogin()) {
				// 	return
				// }
				// var businessId=uni.getStorageSync('businessId')
				// if(businessId&&businessId=='-1'){
				// 	uni.showToast({
				// 		title:'暂无核销记录',
				// 		icon:"none"
				// 	})
				// }else{
				// 	this.$http.routePage('/pages/index/record','nav')
				// }
				
			},
		},
		onPageScroll(res) {
			var scrolltop=res.scrollTop;
			if(scrolltop>0){
				this.backgroundColor='linear-gradient(60deg, #6A6BF1, #CB4BFA)'
			}else{
				this.backgroundColor='transparent'
			}
		 },
    };
</script>
<style scoped lang="scss">

	.home{min-height: 100vh;background: #FFFFFF;overflow: auto;
		.homebg{width: 100%;height: 376rpx;}
		.hometop{margin-top:-208rpx;}
		.swiper{height: 260rpx;margin: 0 34rpx 28rpx;
			.swiperimg{width: 100%;height: 100%;}
		}
		.hgbox{margin:0rpx 32rpx 16rpx;background:linear-gradient(60deg,  #a254da,#606efe);;border-radius: 14rpx;padding: 28rpx 32rpx 24rpx 36rpx;display: flex;align-items: center;justify-content: space-between;min-height: 128rpx;box-sizing: border-box;
			.hgboxtit{font-size: 34rpx;font-weight: bold;color: #FFFFFF;margin-bottom: 8rpx;}
			.hgboxtxt{font-size: 24rpx;color: #CBB8E8;}
			image{width: 16rpx;height: 28rpx;margin-left: 12rpx;}
		
		}
	}
	.flexcj{display: flex;align-items: center;justify-content: space-between;}
	.overtwo{word-break: break-all;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal;}
	.mainus{
		margin:0rpx 32rpx 28rpx;
	}
	.mainuse{min-height: 170rpx;background: #F8F8F8;border-radius: 6rpx;padding: 30rpx 18rpx 30rpx 26rpx;box-sizing: border-box;width: 328rpx;}
	.mainuseb{font-size: 22rpx;font-weight: bold;position: relative;margin-bottom: 20rpx;color: #A04CFF;}
	.mainuseb::after{width: 22rpx;height: 2rpx;background: #E1E1E1;content: "";position: absolute;left: 0;bottom: -15rpx;}
	.mainusec{font-size: 24rpx;color: #3F3F3F;}
	.mainused{width: 84rpx;height: 76rpx;margin-top: 16rpx;margin-left: 28rpx;}
</style>