初始化项目
This commit is contained in:
唐明明
351
pages/index/index.vue
Normal file
351
pages/index/index.vue
Normal file
@@ -0,0 +1,351 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user