358 lines
8.6 KiB
Vue
358 lines
8.6 KiB
Vue
<template>
|
||
<view class="page flex-col">
|
||
<view class="box_2 flex-col">
|
||
<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="{ backgroundImage: 'url(' + imagesUrl + 'baiyinbg.png'+ ')' }">
|
||
<text class="text_2">升级会员，享受更高优惠</text>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<view class="text-wrapper_1 flex-col"
|
||
:style="{ backgroundImage: 'url(' + imagesUrl + 'huangjinbg.png'+ ')' }">
|
||
<text class="text_2">升级会员，享受更高优惠</text>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<view class="text-wrapper_1 flex-col"
|
||
:style="{ backgroundImage: 'url(' + imagesUrl + 'bojinbg.png'+ ')' }">
|
||
<text class="text_2">升级会员，享受更高优惠</text>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="w700 flex-row justify-center btn">
|
||
<u-button color="linear-gradient(to bottom, rgb(244, 230, 186), rgb(252, 236, 210))" text="立即充值,升级会员"
|
||
@click="getRechrge" :customStyle="{color:'#000'}"></u-button>
|
||
</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>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
imagesUrl: getApp().globalData.config.imagesUrl,
|
||
baseUrl: getApp().globalData.config.baseUrl,
|
||
background: ['color1', 'color2', 'color3'],
|
||
indicatorDots: true,
|
||
autoplay: true,
|
||
interval: 4000,
|
||
duration: 500,
|
||
current: 0,
|
||
config: {},
|
||
constants: {},
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getConfig()
|
||
},
|
||
methods: {
|
||
// 获取配置:电话与位置、坐标
|
||
async getConfig() {
|
||
const res = await this.$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/tabBar/mine/Recharge'
|
||
})
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
.swiper {
|
||
height: 230rpx;
|
||
}
|
||
|
||
.btn {
|
||
margin: 20rpx auto;
|
||
}
|
||
|
||
.page {
|
||
background-color: rgba(36, 42, 56, 1);
|
||
width: 750rpx;
|
||
height: 100vh;
|
||
}
|
||
|
||
.box_1 {
|
||
background-color: rgba(36, 42, 56, 1);
|
||
width: 750rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.box_2 {
|
||
width: 750rpx;
|
||
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(255, 255, 255, 1);
|
||
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;
|
||
}
|
||
|
||
.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: 160rpx;
|
||
height: 44rpx;
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 44rpx;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
line-height: 44rpx;
|
||
margin-left: 35rpx;
|
||
}
|
||
|
||
.image_3 {
|
||
width: 187rpx;
|
||
height: 23rpx;
|
||
margin: 15rpx 0 0 36rpx;
|
||
}
|
||
|
||
.text_4 {
|
||
width: 263rpx;
|
||
height: 24rpx;
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 255, 255, 1);
|
||
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(255, 255, 255, 1);
|
||
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(255, 255, 255, 1);
|
||
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(255, 255, 255, 1);
|
||
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;
|
||
}
|
||
|
||
.paragraph_1 {
|
||
width: 616rpx;
|
||
overflow-wrap: break-word;
|
||
color: rgba(255, 255, 255, 1);
|
||
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(255, 255, 255, 1);
|
||
font-size: 26rpx;
|
||
font-family: MicrosoftYaHei;
|
||
font-weight: NaN;
|
||
text-align: left;
|
||
line-height: 26rpx;
|
||
}
|
||
</style> |