①、后台使用了unicloud一站式服务，模块功能有：用户管理，转盘管理，转盘记录，兑换管理，兑换记录等功能。
②、可以通过后台配置的方式进行内容的设置及管理
可以扫码查看效果
<template>
<view class="tr-roll-body">
<view class="tr-roll-list">
<scroll-view class="tr-roll" scroll-y="true" @scrolltolower="">
<view class="content" v-for="(item,index) in listData" :key="index">
<view class="type">
<text class="name">{{item.name}}</text>
<image class="right-arrow" mode="aspectFill" @click="more(item.code,item.name)"
src="/static/rightArrow.png">
</image>
</view>
<view class="list-box">
<view class="row-box" v-for="(items,indexs) in item.children" :key="index"
@click="goto(index,indexs)">
<view class="title">{{items.name}}</view>
<view class="tip">{{items.explain}}</view>
</view>
</view>
</view>
</scroll-view>
</view>
<web-copy :is-visible.sync="showPopup" :web-data="webData" @closePopup="closePopup"></web-copy>
</view>
</template>
<script>
var that;
import webCopy from "@/components/web-copy/web-copy.vue"
export default {
components: {
webCopy
},
data() {
return {
webData: "",
showPopup: false,
listData: [],
}
},
onShow() {},
onLoad() {
that = this
this.getWebData();
},
onReady() {},
onShareAppMessage() {},
onShareTimeline() {},
methods: {
// 获取web数据
getWebData() {
uni.showLoading({
title: "加载中..."
})
uniCloud.callFunction({
name: 'lp_get_data',
data: {
type: 0,
keyword: this.keyword
},
success(res) {
that.listData = res.result
that.$nextTick(() => {
uni.hideLoading();
});
},
fail(err) {}
})
},
// 跳转
goto(index, indexs) {
this.webData = this.listData[index].children[indexs];
this.showPopup = true;
},
// 关闭弹窗
closePopup() {
this.showPopup = false;
},
// 更多
more(code, name) {
uni.navigateTo({
url: `/pages/web/list?code=${code}&name=${name}`
})
}
}
}
</script>
<style lang="scss">
page {
background-color: $uni-theme-bg-color;
}
.content {
display: flex;
flex-direction: column;
margin: 30rpx 20rpx;
.type {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0 20rpx;
height: 60rpx;
.name {
position: relative;
font-size: 34rpx;
font-weight: bold;
}
.name::after {
position: absolute;
content: '';
width: 60rpx;
height: 6rpx;
background-color: $uni-theme-color;
left: 2rpx;
top: 50rpx;
}
.right-arrow {
padding-top: 10rpx;
width: 45rpx;
height: 40rpx;
}
}
.list-box {
display: flex;
flex-wrap: wrap;
.row-box {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 15rpx;
padding: 0rpx 15rpx;
width: 327rpx;
height: 108rpx;
background-color: $uni-sub-theme-color;
border: 4rpx solid $uni-theme-text;
border-radius: 10rpx;
box-sizing: border-box;
.title {
width: 100%;
display: flex;
align-items: center;
height: 45rpx;
letter-spacing: 2rpx;
font-size: 30rpx;
font-weight: bold;
color: $uni-theme-text;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tip {
width: 100%;
line-height: 40rpx;
font-size: 24rpx;
color: $uni-sub-theme-text;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
</style>
<template>
<view class="content">
<view class="logo">懒人导航网
<image v-if="userInfo.member==1" class="member" mode="aspectFill"
src="/44494818-22677254-0.png">
</image>
</view>
<view class="describe">专为懒人收集的导航站，只收集免费的、好用的。</view>
<!-- 大嘴鸟 -->
<view class="dong">
<view class="monster">
<view class="monster__face">
<view class="monster__eye avatar-eye avatar-eye--green eye--left">
<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span
class="avatar-eye-pupil-lightReflection"></span></span></view>
</view>
<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span
class="avatar-eye-pupil-lightReflection"></span></span></view>
</view>
<view class="monster__noses">
<view class="monster__nose"></view>
<view class="monster__nose"></view>
</view>
<view class="monster__mouth">
<view class="monster__top"></view>
<view class="monster__bottom"></view>
</view>
</view>
</view>
</view>
<!-- 快捷菜单 -->
<view class="quick-menu">
<view class="quick" @click="balance">
<view class="img">
<image src="../../static/balance.png"></image>
</view>
<view class="info">
<text class="name">我的积分</text>
<text class="tip">{{userInfo.balance || 0}}</text>
</view>
</view>
<view class="quick" @click="playAd">
<view class="img">
<image src="../../static/obtain.png"></image>
</view>
<view class="info">
<text class="name">获取积分</text>
<text class="tip">看广告随机获取</text>
</view>
</view>
</view>
<!-- 列表菜单 -->
<view class="list-menu">
<view class="row" v-for="(item,index) in listMenu" :key="index" @click="goto(index)">
<image class="img" :src="item.icon"></image>
<view class="name">{{item.name}}</view>
<image class="icon" src="../../static/arrow.png"></image>
</view>
<view class="btn-box">
<button class="customer" open-type="contact">
<image class="img" src="../../static/customer.png"></image>
<view class="name">联系客服</view>
<image class="icon" src="../../static/arrow.png"></image>
</button>
</view>
</view>
</view>
</template>
<script>
let _this;
let videoAd = null
export default {
data() {
return {
userInfo: "",
listMenu: [{
name: "兑换记录",
icon: "../../static/exchangeRecord.png",
path: "/pages/user/exchangeRecord"
},{
name: "申请收纳",
icon: "../../static/storage.png",
path: "/pages/user/storage"
}, {
name: "反馈建议",
icon: "../../static/suggestion.png",
path: "/pages/user/suggestion"
}]
}
},
onShow() {
_this = this;
// 更新用户信息
_this.userInfo = getApp().globalData.userInfo;
},
onShareAppMessage() {},
onShareTimeline() {},
onLoad() {
},
methods: {
// 跳转
goto(index) {
if (this.listMenu[index].path != "") {
uni.navigateTo({
url: this.listMenu[`${index}`].path
})
} else {
uni.showToast({
title: "太懒了，还在开发中!",
icon: "none"
})
}
},
// 播放广告
playAd() {
if (videoAd) {
videoAd.show().catch(() => {
// 失败重试
videoAd.load()
.then(() => videoAd.show())
.catch(err => {})
})
}
},
// 我的积分
balance() {
uni.navigateTo({
url: "/pages/user/balance"
})
}
}
}
</script>
<style lang="scss">
page {
background-color: $uni-theme-bg-color;
}
/* 大嘴鸟*/
.dong {
z-index: 9999;
position: fixed;
top: -120px;
right: -80px;
transform: scale(0.24);
-webkit-transform: scale(0.24);
-moz-transform: scale(0.24);
}
.monster {
transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
/* IE 9 */
-moz-transform: rotate(-50deg);
/* Firefox */
-webkit-transform: rotate(-50deg);
/* Safari 和 Chrome */
-o-transform: rotate(-50deg);
/* Opera */
display: flex;
justify-content: center;
position: relative;
width: 170px;
height: 400px;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
background-color: #3C47D7;
box-shadow: 20px 20px 60px #4650E5;
}
.monster__face {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
top: 14%;
width: 75%;
height: 160px;
}
.monster__noses {
top: 50%;
display: flex;
justify-content: space-between;
width: 28%;
height: auto;
margin-bottom: 10px;
}
.monster__nose {
width: 8px;
height: 12px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.5);
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
}
.monster__mouth {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 0%;
overflow: hidden;
border: 25px solid #FFC333;
border-radius: 100px;
background-color: #810332;
animation: mouth 1.75s infinite;
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}
.monster__mouth::before {
content: '';
position: absolute;
width: 150px;
height: 80px;
border-radius: 100px;
background-color: #400018;
}
.monster__mouth::after {
content: '';
position: absolute;
bottom: -80px;
width: 160px;
height: 80px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
background-color: #DC1B50;
animation: tongue 1.75s infinite;
}
.monster__top {
position: absolute;
top: -30px;
width: 170px;
height: 30px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #ffffff;
z-index: 100;
animation: t 1.75s infinite;
}
.monster__bottom {
position: absolute;
bottom: 0;
width: 100px;
height: 30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #ffffff;
z-index: 100;
animation: b 1.75s infinite;
}
.avatar-eye {
position: absolute;
top: -10%;
width: 65px;
height: 65px;
background: linear-gradient(105deg, white, #cb87f4);
border-radius: 100%;
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
margin: 3px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.avatar-eye--green {
background: linear-gradient(to bottom, #fdfdfd, #c3efea);
}
.avatar-eye--violet {
background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
}
.eye--left {
left: 10%;
}
.eye--right {
left: 85%;
}
.eye--center {
left: 45%;
top: 10%;
}
.avatar-eye-pupil {
position: absolute;
width: 55%;
height: 55%;
left: 50%;
top: 25%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
z-index: 100;
border-radius: 100%;
}
.pupil--green {
background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
}
.pupil--pink {
background: linear-gradient(135deg, #f1a183, #8535cd);
}
.avatar-eye-pupil-blackThing {
position: absolute;
width: 55%;
height: 55%;
left: 50%;
top: 25%;
background: #2c2f32;
-webkit-transform: translate(-50%);
transform: translate(-50%);
border-radius: 100%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.avatar-eye-pupil-lightReflection {
position: absolute;
width: 7px;
height: 7px;
left: 25%;
top: 10%;
background: #ebebeb;
-webkit-transform: translate(-50%);
transform: translate(-50%);
border-radius: 100%;
box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
}
/**/
@keyframes t {
0%,
10%,
80%,
100% {
top: -30px;
}
20% {
top: 0px;
}
30% {
top: -20px;
}
40% {
top: -0px;
}
50% {
top: -25px;
}
70% {
top: 0px;
}
}
@keyframes b {
0%,
10%,
80%,
100% {
bottom: -30px;
}
20% {
bottom: 0px;
}
30% {
bottom: -20px;
}
40% {
bottom: -0px;
}
50% {
bottom: -25px;
}
70% {
bottom: 0px;
}
}
@keyframes mouth {
0%,
10%,
100% {
width: 100%;
height: 0%;
}
15% {
width: 90%;
height: 30%;
}
20% {
width: 50%;
height: 70%;
}
25% {
width: 70%;
height: 70%;
}
30% {
width: 80%;
height: 60%;
}
35% {
width: 60%;
height: 70%;
}
40% {
width: 55%;
height: 75%;
}
45% {
width: 50%;
height: 90%;
}
50% {
width: 40%;
height: 70%;
}
55% {
width: 70%;
height: 95%;
}
60% {
width: 40%;
height: 50%;
}
65% {
width: 100%;
height: 60%;
}
70% {
width: 100%;
height: 70%;
}
75% {
width: 90%;
height: 70%;
}
80% {
width: 50%;
height: 70%;
}
85% {
width: 90%;
height: 50%;
}
85% {
width: 40%;
height: 70%;
}
90% {
width: 90%;
height: 30%;
}
95% {
width: 100%;
height: 10%;
}
}
@keyframes tongue {
0%,
20%,
100% {
bottom: -80px;
}
30%,
90% {
bottom: -40px;
}
40% {
bottom: -45px;
}
50% {
bottom: -50px;
}
70% {
bottom: -80px;
}
90% {
bottom: -40px;
}
}
.logo {
display: flex;
justify-content: center;
align-items: flex-end;
width: 100%;
height: 180rpx;
letter-spacing: 6rpx;
font-size: 60rpx;
font-weight: bold;
text-shadow: $uni-theme-color 6rpx 10rpx 7rpx;
}
.member {
padding-left: 10rpx;
padding-bottom: 10rpx;
width: 35rpx;
height: 35rpx;
}
.describe {
font-size: 26rpx;
text-align: center;
line-height: 100rpx;
color: $uni-theme-text;
}
.quick-menu {
display: flex;
justify-content: space-between;
margin: 20rpx 40rpx;
.quick {
display: flex;
width: 320rpx;
height: 160rpx;
box-sizing: border-box;
background-color: $uni-sub-theme-color;
border: 4rpx solid $uni-theme-text;
border-radius: 10rpx;
.img {
display: flex;
justify-content: center;
align-items: center;
width: 35%;
height: 100%;
flex-shrink: 0;
image {
width: 90rpx;
height: 66rpx;
}
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 65%;
.name {
height: 50rpx;
font-size: 30rpx;
font-weight: bold;
color: $uni-theme-text;
}
.tip {
height: 40rpx;
font-size: 24rpx;
font-weight: bold;
color: $uni-sub-theme-text;
}
}
}
}
.list-menu {
margin: 40rpx;
display: flex;
flex-direction: column;
border: 4rpx solid $uni-theme-text;
border-radius: 10rpx;
.row,
.customer {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 20rpx;
height: 109rpx;
background-color: $uni-sub-theme-color;
border-bottom: 2rpx solid #cdcdcd;
.img {
width: 50rpx;
height: 50rpx;
flex-shrink: 0;
}
.name {
display: flex;
justify-content: flex-start;
padding-left: 20rpx;
font-size: 30rpx;
letter-spacing: 2rpx;
width: 85%;
}
.icon {
width: 25rpx;
height: 25rpx;
}
}
.customer {
display: flex;
justify-content: flex-start;
align-items: center;
border-radius: 0;
padding: 0 20rpx;
margin: 0;
width: 100%;
height: 109rpx;
background-color: $uni-sub-theme-color;
}
.customer::after {
border: none;
}
}
</style>
