detection-user/pages/detection/my-vip.vue

<!-- 个人信息 -->
<template>
	<view class="page flex-col">
		<view class="c-top">
			<view class="" @click="getback()">
				<uni-icons type="left" size="18" color="#ffffff"></uni-icons>
			</view>
			<view class="c-title">会员权益</view>
			<view style="width: 8%; height: 1px;"></view>
		</view>
		<view class="box_2 flex-col">
			<view class="hei-box">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" indicator-active-color="#704e17" @change="changeSwiper">
				<swiper-item >
					<view class="text-wrapper_1 flex-col" style="position: relative;"
						:style="{ backgroundImage: 'url(' + imagesUrl + 'baiyinbg.png'+ ')' }">
						<text class="hanghuang">升级会员，所有商品享9.5折优惠</text>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="text-wrapper_1 flex-col" style="position: relative;"
						:style="{ backgroundImage: 'url(' + imagesUrl + 'huangjinbg.png'+ ')' }">
						<text class="hanghuang">升级会员，所有商品享9折优惠</text>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="text-wrapper_1 flex-col" style="position: relative;"
						:style="{ backgroundImage: 'url(' + imagesUrl + 'bojinbg.png'+ ')' }">
						<text class="hanghuang">升级会员，所有商品享8折优惠</text>
					</view>
				</swiper-item>
			</swiper>
			</view>
			<view class="warp-box">
				<view class="w-box">
					<view class="v-imgs">
						<image src="http://www.nuoyunr.com/lananRsc/detection/vip1@2x.png" mode=""></image>
					</view>
					<view class="">信息发布</view>
				</view>
				<view class="w-box">
					<view class="v-imgs">
						<image src="http://www.nuoyunr.com/lananRsc/detection/vip1@2x.png" mode=""></image>
					</view>
					<view class="">服务项目折扣</view>
				</view>
				<view class="w-box">
					<view class="v-imgs">
						<image src="http://www.nuoyunr.com/lananRsc/detection/vip1@2x.png" mode=""></image>
					</view>
					<view class="">汽修项目折扣</view>
				</view>
				<view class="w-box">
					<view class="v-imgs">
						<image src="http://www.nuoyunr.com/lananRsc/detection/vip1@2x.png" mode=""></image>
					</view>
					<view class="">免费救援</view>
				</view>
				<view class="w-box">
					<view class="v-imgs">
						<image src="http://www.nuoyunr.com/lananRsc/detection/vip1@2x.png" mode=""></image>
					</view>
					<view class="">商品折扣</view>
				</view>
			
			</view>
			<u-transition :show="current == 0" mode="fade-up">
				<view class="transition">
				<view class="group_2 flex-row justify-between">
					<image class="image_2" :src="imagesUrl + 'bigline1.png'" />
					<text class="text_3">特权说明</text>
					<image class="image_3" :src="imagesUrl + 'bigline2.png'" />
				</view>
					<text class="text_4">升级会员，畅享各项权益</text>
					<view class="image-text_1 flex-row justify-between">
						<image class="label_1" :src="imagesUrl + 'wenhao.png'" />
						<text class="text-group_1">如何获得该卡</text>
					</view>
					<text class="text_5">{{ config.silverConditions }}</text>
					<view class="image-text_2 flex-row justify-between">
						<image class="label_2" :src="imagesUrl + 'zuanshi.png'" />
						<text class="text-group_2">特权说明</text>
					</view>
					<view class="text-wrapper_2">
						<rich-text :nodes="config.silverIntro" class="paragraph_1"></rich-text>
					</view>
				</view>
			</u-transition>
			<u-transition :show="current == 1" mode="fade-up">
				<view class="transition">
					<view class="group_2 flex-row justify-between">
						<image class="image_2" :src="imagesUrl + 'bigline1.png'" />
						<text class="text_3">特权说明</text>
						<image class="image_3" :src="imagesUrl + 'bigline2.png'" />
					</view>
					<text class="text_4">升级会员，畅享各项权益</text>
					<view class="image-text_1 flex-row justify-between">
						<image class="label_1" :src="imagesUrl + 'wenhao.png'" />
						<text class="text-group_1">如何获得该卡</text>
					</view>
					<text class="text_5">{{ config.goldConditions }}</text>
					<view class="image-text_2 flex-row justify-between">
						<image class="label_2" :src="imagesUrl + 'zuanshi.png'" />
						<text class="text-group_2">特权说明</text>
					</view>
					<view class="text-wrapper_2">
						<rich-text :nodes="config.goldIntro" class="paragraph_1"></rich-text>
					</view>
				</view>
			</u-transition>
			<u-transition :show="current == 2" mode="fade-up">
				<view class="transition">
					<view class="group_2 flex-row justify-between">
						<image class="image_2" :src="imagesUrl + 'bigline1.png'" />
						<text class="text_3">特权说明</text>
						<image class="image_3" :src="imagesUrl + 'bigline2.png'" />
					</view>
					<text class="text_4">升级会员，畅享各项权益</text>
					<view class="image-text_1 flex-row justify-between">
						<image class="label_1" :src="imagesUrl + 'wenhao.png'" />
						<text class="text-group_1">如何获得该卡</text>
					</view>
					<text class="text_5">{{ config.platinumConditions }}</text>
					<view class="image-text_2 flex-row justify-between">
						<image class="label_2" :src="imagesUrl + 'zuanshi.png'" />
						<text class="text-group_2">特权说明</text>
					</view>
					<view class="text-wrapper_2">
						<rich-text :nodes="config.platinumIntro" class="paragraph_1"></rich-text>
					</view>
				</view>
			</u-transition>
			<view class="anniu" @click="getRechrge">
				<text>成为会员</text>
			</view>
			<!-- <view class="w700 flex-row justify-center btn" style="width: 95%; margin: 0 auto; margin-top: 20px;">
				<u-button color="linear-gradient(to bottom, rgb(244, 230, 186), rgb(252, 236, 210))" text="立即充值,升级会员"
					@click="getRechrge" :customStyle="{color:'#000'}"></u-button>
			</view> -->
		</view>
	</view>
</template>
<script>
	import request from '../../utils/request'
	import config from '@/config'
	export default {
		data() {
			return {
				imagesUrl: '',
				baseUrl: '',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 40000,
				duration: 500,
				current: 0,
				config: {},
				constants: {},
			};
		},
		onLoad() {
			this.getConfig()
			this.imagesUrl = 'http://www.nuoyunr.com/lananRsc/'
			this.baseUrl = this.$baseUrl
		},
		methods: {
			getback(){
				uni.navigateBack()
			},
			// 获取配置:电话与位置、坐标
			async getConfig() {
				const res = await request({
					url: '/system/shopconfig/listWx'
				})
				this.config = res.rows[0]
				console.log(res.rows[0]);
			},

			// 切换轮播图 
			changeSwiper(e) {
				console.log(e.detail.current);
				this.current = e.detail.current
			},
			//去支付
			getRechrge() {
				uni.navigateTo({
					url:'/pages/detection/my-payment'
				})
			},
		},
	};
</script>
<style scoped lang="scss">
	.c-top{
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		padding-top: 15%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// background-color: white;
	}
	.c-title{
		font-size: 18px;
		color: white;
		font-weight: bold;
	}
	.hei-box{
		background:#181622;
	}
	.swiper {
		height: 230rpx;
	}
	.warp-box{
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.w-box{
		width: 33%;
		text-align: center;
		color: white;
	}
	.btn {
		margin: 20rpx auto;
	}
	.anniu{
		width: 90%;
		height: 45px;
		background: linear-gradient(90deg, #F5DDC4 0%, #E5B395 100%);
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: bold;
		color: #5E2D11;
		margin: 10px auto ;
	}
	.page {
	/* 	background: url('http://www.nuoyunr.com/lananRsc/jcbjt.png') center no-repeat; */
		background-size:100% 100%;
		width: 100%;
		height: 46vh;
		background:#181622;
	}
	
	.box_1 {
		background-color: rgba(36, 42, 56, 1);
		width: 750rpx;
		height: 40rpx;
	}
	
	.box_2 {
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		padding-bottom: 20px;
		margin-bottom: 1rpx;
	}
	
	.group_1 {
		background-color: rgba(36, 42, 56, 1);
		width: 750rpx;
		height: 88rpx;
	}
	
	.image_1 {
		width: 15rpx;
		height: 27rpx;
		margin: 31rpx 0 0 33rpx;
	}
	
	.text_1 {
		width: 120rpx;
		height: 29rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1.0);
		font-size: 30rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin: 30rpx 315rpx 0 267rpx;
	}
	
	.text-wrapper_1 {
		height: 196rpx;
		background-size: 100% 100%;
		width: 700rpx;
		margin: 27rpx 0 0 25rpx;
	}
	.hanghuang{
		position: absolute;
		bottom: 20px;
		left: 15px;
		color: rgba(112, 78, 23, 1);
		font-size: 24rpx;
	
	}
	
	.text_2 {
		width: 326rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(112, 78, 23, 1);
		font-size: 24rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 130rpx 0 0 48rpx;
	}
	
	.group_2 {
		width: 605rpx;
		height: 38rpx;
		margin: 69rpx 0 0 72rpx;
	}
	
	.image_2 {
		width: 187rpx;
		height: 23rpx;
		margin-top: 15rpx;
	}
	
	.text_3 {
		width: 100%;
		text-align: center;
	
		
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1.0);
		font-size: 44rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
		margin-top: 40px;
	}
	
	.image_3 {
		width: 187rpx;
		height: 23rpx;
		margin: 15rpx 0 0 36rpx;
	}
	
	.text_4 {
		width: 263rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1.0);
		font-size: 24rpx;
		font-family: MicrosoftYaHeiLight;
		font-weight: 300;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin: 18rpx 0 0 247rpx;
	}
	
	.image-text_1 {
		width: 204rpx;
		height: 30rpx;
		margin: 57rpx 0 0 43rpx;
	}
	
	.label_1 {
		width: 30rpx;
		height: 30rpx;
	}
	
	.text-group_1 {
		width: 156rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1.0);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		margin-top: 2rpx;
	}
	
	.text_5 {
		width: 238rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1.0);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin: 52rpx 0 0 89rpx;
	}
	
	.image-text_2 {
		width: 150rpx;
		height: 28rpx;
		margin: 73rpx 0 0 43rpx;
	}
	
	.label_2 {
		width: 30rpx;
		height: 26rpx;
		margin-top: 2rpx;
	}
	
	.text-group_2 {
		width: 102rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1.0);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
	}
	
	.text-wrapper_2 {
		width: 616rpx;
		height: 306rpx;
		overflow-wrap: break-word;
		font-size: 0;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		line-height: 80rpx;
		margin: 20rpx 0 20rpx 91rpx;
		color: #000;
	}
	
	.paragraph_1 {
		width: 616rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1.0);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		line-height: 50rpx;
	}
	
	.paragraph_2 {
		width: 616rpx;
		height: 306rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1.0);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		line-height: 26rpx;
	}
	.v-imgs{
		width: 40px;
		height: 40px;
		margin: 5px auto;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.xinbox{
		width: 95%;
		height: 90px;
		background: linear-gradient(180deg, #F4E9DE 0%, #FFFFFF 100%);
		border-radius: 8px 8px 8px 8px;
		margin: 0 auto;
		border: 1px solid white;
		// border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 244, 233, 1)) 1 1;
	}
</style>