|
@@ -1,87 +1,70 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="page pl-32 pr-32 pt-32">
|
|
|
|
|
- <swiper
|
|
|
|
|
- class="swiper"
|
|
|
|
|
- circular
|
|
|
|
|
- :indicator-dots="true"
|
|
|
|
|
- :autoplay="banner.length > 1"
|
|
|
|
|
- :interval="3000"
|
|
|
|
|
- >
|
|
|
|
|
- <swiper-item
|
|
|
|
|
- class="full-percent"
|
|
|
|
|
- v-for="(item, index) in banner"
|
|
|
|
|
- :key="index"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <view class="page">
|
|
|
|
|
+ <block v-if="activity">
|
|
|
|
|
+ <navigation-bar
|
|
|
|
|
+ :title="activity.name"
|
|
|
|
|
+ :color="'#fff'"
|
|
|
|
|
+ :placeholder="false"
|
|
|
|
|
+ :background="'#3F3EC2'"
|
|
|
|
|
+ ></navigation-bar>
|
|
|
|
|
+ <image
|
|
|
|
|
+ v-if="activity.activityDescPage"
|
|
|
|
|
+ style="width: 100%"
|
|
|
|
|
+ mode="widthFix"
|
|
|
|
|
+ :src="activity.activityDescPage"
|
|
|
|
|
+ ></image>
|
|
|
|
|
+ </block>
|
|
|
|
|
+ <view class="desc">
|
|
|
|
|
+ <view class="flex mb-40" v-for="(item, index) in desc" :key="index">
|
|
|
<view
|
|
<view
|
|
|
- class="full-percent"
|
|
|
|
|
- :style="{
|
|
|
|
|
- backgroundImage: `url(${item.bannerUrl})`,
|
|
|
|
|
- }"
|
|
|
|
|
- ></view>
|
|
|
|
|
- </swiper-item>
|
|
|
|
|
- </swiper>
|
|
|
|
|
- <view class="fs-32 fw-500 color-000 pt-40">活动说明</view>
|
|
|
|
|
- <view class="mt-32">
|
|
|
|
|
- <view
|
|
|
|
|
- class="mt-24 fs-28 color-666"
|
|
|
|
|
- v-for="(item, index) in desc"
|
|
|
|
|
- :key="index"
|
|
|
|
|
- >{{ item }}</view
|
|
|
|
|
- >
|
|
|
|
|
- </view>
|
|
|
|
|
- <style-bottom-view>
|
|
|
|
|
- <view class="pl-40 pr-40 pb-30 pt-30" style="background-color: #fff">
|
|
|
|
|
- <style-button
|
|
|
|
|
- type="primary"
|
|
|
|
|
- @click="to('/pages-user/wallet-recharge/wallet-recharge')"
|
|
|
|
|
- >去充值</style-button
|
|
|
|
|
|
|
+ class="width-40 height-40 br-round fs-28 color-fff flex-center flex-shrink mr-20"
|
|
|
|
|
+ style="
|
|
|
|
|
+ shadow: 0px 1px 1px rgba(0, 0, 0, 0.25));
|
|
|
|
|
+ background: linear-gradient(180deg, #9767f8 0%, #564eed 100%);
|
|
|
|
|
+ "
|
|
|
|
|
+ >{{ index + 1 }}</view
|
|
|
>
|
|
>
|
|
|
|
|
+ <view class="fs-28 lh-40 flex-grow" style="color: rgba(8, 0, 61, 0.8)">{{ item }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
- </style-bottom-view>
|
|
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
-import { fetchProfile } from "../..//api/user";
|
|
|
|
|
-import { to } from "../../utils/navigate";
|
|
|
|
|
|
|
+import { fetchProfile } from "../../api/user";
|
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
|
import { ref } from "vue";
|
|
import { ref } from "vue";
|
|
|
|
|
|
|
|
-const desc = ref([]);
|
|
|
|
|
-const banner = ref<any[]>([]);
|
|
|
|
|
|
|
+const desc = ref<string[]>([]);
|
|
|
|
|
+const activity = ref();
|
|
|
|
|
|
|
|
onLoad((options: any) => {
|
|
onLoad((options: any) => {
|
|
|
uni.showLoading({
|
|
uni.showLoading({
|
|
|
title: "加载中",
|
|
title: "加载中",
|
|
|
});
|
|
});
|
|
|
fetchProfile().then((res) => {
|
|
fetchProfile().then((res) => {
|
|
|
- const activity = res.activityList.find(
|
|
|
|
|
- (item: any) => item.id === options.id
|
|
|
|
|
- );
|
|
|
|
|
- uni.setNavigationBarTitle({
|
|
|
|
|
- title: activity.name,
|
|
|
|
|
- });
|
|
|
|
|
- desc.value = activity.activityDesc.split("\n");
|
|
|
|
|
- banner.value = activity.bannerList;
|
|
|
|
|
|
|
+ const a = res.activityList.find((item: any) => item.id === options.id);
|
|
|
|
|
+ desc.value = a.activityDesc.split("\n");
|
|
|
|
|
+ activity.value = a;
|
|
|
uni.hideLoading();
|
|
uni.hideLoading();
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
|
|
+page {
|
|
|
|
|
+ background-color: #716ffc;
|
|
|
|
|
+}
|
|
|
.page {
|
|
.page {
|
|
|
- min-height: 100vh;
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
- .swiper {
|
|
|
|
|
- height: 176rpx;
|
|
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ .desc {
|
|
|
|
|
+ position: absolute;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- border-radius: 16rpx;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- view {
|
|
|
|
|
- background-position: center;
|
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
|
- background-size: 100% auto;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ top: 650rpx;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ padding: 0 68rpx;
|
|
|
|
|
+ padding-top: 100rpx;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|