352 lines
9.2 KiB
Vue
352 lines
9.2 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 领取试用装 -->
|
||
<view class="banner">
|
||
<swiper class="banner-swiper" interval="3000" indicator-dots indicator-color="#ffffff" indicator-active-color="#6d79ec" autoplay>
|
||
<swiper-item v-for="(item,index) in adverts" :key="index" @click="JumpUrl(item.url)">
|
||
<image class="banner-img" :src="item.cover" mode="aspectFill"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<!-- 快捷入口 -->
|
||
<view class="tools">
|
||
<view class="tools-box tools-flex">
|
||
<view class="item item-sm" @click="$Router.push({name: 'purineIndex'})">
|
||
<view class="item-content">
|
||
<view class="title">嘌呤查询</view>
|
||
<view class="submit">知识小科普</view>
|
||
</view>
|
||
<image class="item-icon" src="@/static/icons/tool_icon_00.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="item item-sm" @click="$Router.push({name: 'Circle'})">
|
||
<view class="item-content">
|
||
<view class="title">病友记录</view>
|
||
<view class="submit">交流治疗经验</view>
|
||
</view>
|
||
<image class="item-icon" src="@/static/icons/tool_icon_01.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="tools-box">
|
||
<view class="item item-lg" @click="hasClick">
|
||
<view class="item-content">
|
||
<view class="title">尿酸记录</view>
|
||
<view class="submit">最近一次记录</view>
|
||
<view class="value"><text>{{ caseData ? caseData.quantity : 0 }}</text>μmol/L</view>
|
||
<view class="time">{{ caseData ? caseData.created_at : '暂无记录时间' }}</view>
|
||
</view>
|
||
<image class="item-icon" src="@/static/icons/tool_icon_02.png" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 竞选推荐 -->
|
||
<view class="news-title">精选推荐</view>
|
||
<view class="news-item" v-for="(item, index) in articlesArr" :key="index" @click="$Router.push({name: 'Receive', params: { id: item.article_id }})">
|
||
<view class="item-title">{{ item.title }}</view>
|
||
<view class="item-cover">
|
||
<image :src="item.cover" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="item-time">
|
||
<text>{{ item.clicks }} 次浏览</text>
|
||
<text>{{ item.created_at }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 创建名片前提条件 -->
|
||
<view class="authBack" v-if="authState"></view>
|
||
<view class="authPop" v-if="authState">
|
||
<image @tap="authTap" class="authPop-cloes" src="/static/icons/uricacidClose.png"></image>
|
||
<image class="authPop-img" src="/static/imgs/authPop_img.png" mode="aspectFill"></image>
|
||
<view class="authPop-cont">
|
||
请先添加个人档案，成功后可添加尿酸
|
||
</view>
|
||
<view class="authBtn" @tap="authUrl">去添加</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
index
|
||
} from '@/apis/interfaces/mall'
|
||
export default {
|
||
data() {
|
||
return {
|
||
adverts : [], //轮播
|
||
articlesArr: [], //文章列表
|
||
goodsData : '', //商品
|
||
caseData : '', //今日尿酸量
|
||
authState : false,
|
||
hasCase : ''
|
||
}
|
||
},
|
||
onShow() {
|
||
// 获取首页数据
|
||
this.mallData();
|
||
},
|
||
methods: {
|
||
// 首页数据
|
||
mallData() {
|
||
index().then(res => {
|
||
this.articlesArr = res.articles
|
||
this.caseData = res.last_case_log
|
||
this.goodsData = res.goods
|
||
this.hasCase = res.hasCase
|
||
this.adverts = res.banners
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 是否认证
|
||
hasClick() {
|
||
if(this.$store.getters.getToken) {
|
||
if(!this.hasCase) {
|
||
this.authState = !this.authState
|
||
return
|
||
}
|
||
this.$Router.push({ name: 'uricacidIndex' });
|
||
return
|
||
}
|
||
this.$Router.push({ name: 'Login' });
|
||
},
|
||
|
||
// 去认证
|
||
authUrl() {
|
||
this.$Router.push({ name: 'Attestation', params: { editState: false } });
|
||
this.authState = !this.authState
|
||
},
|
||
|
||
// 关闭认证提示弹出层
|
||
authTap() {
|
||
this.authState = !this.authState
|
||
},
|
||
|
||
// 能量跳转
|
||
JumpUrl(open) {
|
||
let type = open.openType
|
||
switch (type) {
|
||
case 'switchTab':
|
||
this.$Router.pushTab({
|
||
name: open.path
|
||
})
|
||
break;
|
||
case 'web':
|
||
window.location.href = open.url
|
||
break;
|
||
case 'navigateTo':
|
||
this.$Router.push({path: open.path + '?' + open.params})
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content{
|
||
overflow: hidden;
|
||
background: #f3f4f6;
|
||
}
|
||
.banner{
|
||
position: relative;
|
||
background: white;
|
||
margin: $margin;
|
||
padding-top: 45%;
|
||
border-radius: $radius;
|
||
box-shadow: 0 0 5rpx 5rpx rgba($color: $border-color, $alpha: .5);
|
||
overflow: hidden;
|
||
.banner-swiper {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
}
|
||
.banner-img {
|
||
border-radius: 10rpx;
|
||
width: 100%;
|
||
height: 100%;
|
||
vertical-align: top;
|
||
}
|
||
}
|
||
// 快速入口
|
||
.tools{
|
||
display: flex;
|
||
padding: 0 $padding/2;
|
||
.tools-box{
|
||
padding: 0 $padding/2;
|
||
width: 50%;
|
||
box-sizing: border-box;
|
||
.item-lg{
|
||
height: 280rpx + $margin;
|
||
.item-icon{
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 128rpx;
|
||
}
|
||
}
|
||
}
|
||
.tools-flex{
|
||
.item-sm{
|
||
height: 140rpx;
|
||
&:last-child{
|
||
margin-top: $margin;
|
||
}
|
||
.item-icon{
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 100rpx;
|
||
}
|
||
}
|
||
}
|
||
.item{
|
||
position: relative;
|
||
padding: 0 $padding;
|
||
background: white;
|
||
border-radius: $radius;
|
||
font-size: $title-size-m;
|
||
box-shadow: 0 0 5rpx 5rpx rgba($color: $border-color, $alpha: .5);
|
||
overflow: hidden;
|
||
.item-content{
|
||
padding: 30rpx 0;
|
||
.title{
|
||
font-weight: bold;
|
||
font-size: $title-size-lg;
|
||
color: $text-color;
|
||
line-height: 40rpx;
|
||
}
|
||
.submit{
|
||
line-height: 40rpx;
|
||
font-size: $title-size-sm;
|
||
color: $text-gray;
|
||
}
|
||
.value{
|
||
padding: 10rpx 0;
|
||
color: $text-gray;
|
||
line-height: 100rpx;
|
||
font-size: $title-size-sm;
|
||
& > text{
|
||
color: $text-color;
|
||
font-weight: bold;
|
||
font-size: $title-size + 26;
|
||
padding-right: 10rpx;
|
||
}
|
||
}
|
||
.time{
|
||
color: $text-gray;
|
||
font-size: $title-size-sm;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 精选推荐
|
||
.news-title{
|
||
padding: $padding;
|
||
font-size: $title-size;
|
||
font-weight: bold;
|
||
color: $text-color;
|
||
}
|
||
.news-item{
|
||
margin: 0 $margin $margin;
|
||
background: white;
|
||
border-radius: $radius;
|
||
padding: $padding;
|
||
box-shadow: 0 0 5rpx 5rpx rgba($color: $border-color, $alpha: .5);
|
||
.item-title{
|
||
font-weight: bold;
|
||
font-size: $title-size + 2;
|
||
color: $text-color;
|
||
}
|
||
.item-cover{
|
||
width: 100%;
|
||
padding-top: 50%;
|
||
position: relative;
|
||
margin: ($margin - 10) 0;
|
||
& > image{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: $border-color-light;
|
||
}
|
||
}
|
||
.item-time{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: $title-size-sm;
|
||
color: $text-gray;
|
||
}
|
||
}
|
||
|
||
|
||
/* 认证弹出 */
|
||
.authBack {
|
||
background: rgba(0, 0, 0, .35);
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 9;
|
||
}
|
||
|
||
.authPop {
|
||
background-color: #ffffff;
|
||
position: fixed;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 400rpx;
|
||
height: 500rpx;
|
||
margin-left: -200rpx;
|
||
margin-top: -250rpx;
|
||
z-index: 10;
|
||
border-radius: 10rpx;
|
||
text-align: center;
|
||
padding: 40rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.authPop-img {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
}
|
||
|
||
.authPop-cont {
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
line-height: 44rpx;
|
||
color: #999;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.authBtn {
|
||
background: #6d79ec;
|
||
margin: 0 40rpx;
|
||
color: white;
|
||
font-size: 30rpx;
|
||
line-height: 74rpx;
|
||
border-radius: 6rpx;
|
||
width: calc(100% - 80rpx);
|
||
text-align: center;
|
||
}
|
||
|
||
.authPop-cloes {
|
||
position: absolute;
|
||
top: 10rpx;
|
||
right: 10rpx;
|
||
z-index: 11;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
</style>
|