zhangjing/sykl-sm
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[锶源昆仑-寺庙捐赠活动]

Browse Source
This commit is contained in:
张慢慢
2023-05-15 13:53:32 +08:00
parent 1b6eb2668c
commit c9b18c9074
284 changed files with 9505 additions and 3822 deletions
Download Patch File Download Diff File Expand all files Collapse all files

580
pages/index/index.vue
View File

@@ -1,352 +1,266 @@
<template>
<view class="content">
<!-- 水宣传图 -->
<image class="banner" src="@/static/imgs/banner.png" mode="widthFix"></image>
<!-- 快捷入口 -->
<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: 'Indexdetails'})">
<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">
<swiper
class="swiper-content"
easing-function="easeInOutCubic"
indicator-active-color="#4490ff"
indicator-color="rgba(68,144,255, .2)"
:indicator-dots="true"
:autoplay="true"
:vertical="true"
:circular="true"
>
<swiper-item>
<view class="swiper-item">
<view class="title">血糖</view>
<view class="submit">最近一次记录</view>
<view class="value">
<text>{{ caseData ? caseData.quantity : 0 }}</text>mmol/L
</view>
<view class="time">{{ caseData ? caseData.created_at : '暂无记录时间' }}</view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<view class="title">血脂</view>
<view class="submit">最近一次记录</view>
<view class="value">
<text>{{ caseData ? caseData.quantity : 0 }}</text>mmol/L
</view>
<view class="time">{{ caseData ? caseData.created_at : '暂无记录时间' }}</view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<view class="title">血压</view>
<view class="submit">最近一次记录</view>
<view class="value">
<text>{{ caseData ? caseData.quantity : 0 }}</text> mmHg
</view>
<view class="time">{{ caseData ? caseData.created_at : '暂无记录时间' }}</view>
</view>
</swiper-item>
</swiper>
</view>
<!-- <image class="item-icon" src="@/static/icons/tool_icon_02.png" mode="widthFix"></image> -->
</view>
</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 class="content">
<image class="inedxImg" src="http://api.temple.siyuankunlun.cn/storage/materials/2023/01/10/indexTop.png" mode="widthFix"></image>
<view class="inedxCont">
<image class="inedxBack" src="/static/img/indexBack.png" mode="widthFix"></image>
<form @submit="siteform" class="inedxForm">
<view class="site-input">
<label>姓名<text>*</text></label>
<input placeholder="请输入" name="name" maxlength="4" :value="userData.nickname ? userData.nickname : ''"></input>
</view>
<view class="site-input">
<label>联系方式<text>*</text></label>
<input placeholder="请输入" class="site-disabled" :disabled="userData.username" name="tel" maxlength="11" type="number" :value="userData.username ? userData.username : ''"></input>
</view>
<!-- 授权书 -->
<!-- <view class="agreement">
<checkbox-group @change="radioChange">
<checkbox style="transform: scale(.75)" color="#B79872" :checked="checked" size='6' class="radioGroup" />
</checkbox-group>
<view class="agreement-text">
下次自动填写，阅读并同意<view class="agreement-color" @click="$Router.push({name: 'Agreement', params: {name : 'warrant'}})">《授权书》</view>
</view>
</view> -->
<view class="site-btn">
<button form-type="submit" size="mini" :disabled="disabled">
<image src="/static/img/indexBtn.png" mode="widthFix"></image>
</button>
<view class="site-tips">
剩余：{{residue ? residue : '--'}}份
</view>
</view>
<view class="mapModular">
<view class="mapModular-img">
<map :latitude="latitude" :longitude="longitude" @click="clickMap" style="width: 100%; height: 270rpx;"></map>
</view>
<view class="mapModular-name">
禅经寺地址：{{city}}{{rough}}
</view>
</view>
</form>
</view>
<image class="inedxImg-Down" src="http://api.temple.siyuankunlun.cn/storage/materials/2023/01/05/indexDown.png" mode="widthFix"></image>
</view>
</template>
<script>
import {
index
} from '@/apis/interfaces/mall'
export default {
import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
import { mallIndex } from '@/apis/interfaces/mall'
export default {
data() {
return {
adverts : [], //轮播
goodsData : '', //商品
caseData : '', //今日尿酸量
authState : false,
hasCase : ''
latitude : '34.115519',
longitude: '108.958177',
rough : '',
city : '',
address : '',
disabled: false,
checked : false,
userData: '',
skuId : '',
residue : '',// 份数
qqMap: new QQMapWX({
key: 'MDGBZ-WDNC4-P6EUO-DOPPE-JAMMJ-ZNBA4',
vm: this
}),
}
},
onShow() {
// 获取首页数据
this.mallData();
// 获取商品详情数据
this.detailsInfo();
console.log(this.qqMap)
// 调用接口
this.qqMap.reverseGeocoder({
location: {
latitude: 34.115519,
longitude: 108.958177
},
success: locatRes => {
this.rough = locatRes.result.formatted_addresses.rough
this.city = locatRes.result.address_component.city
},
fail: res => {},
complete: res => {}
});
},
methods: {
// 首页数据
mallData() {
index().then(res => {
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"
})
})
// 商品详情数据
detailsInfo() {
mallIndex().then(res => {
this.userData = res.user
this.skuId = res.show_goods.skus[0].sku_id
this.residue = res.residue
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 勾选协议
radioChange() {
this.checked = !this.checked
},
// 是否认证
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;
}
}
// 跳转
siteform(e) {
let value = e.detail.value
if(this.$store.getters.getToken != '') {
if(value.name != '' && value.tel != '') {
this.$Router.push({
name: 'indexPlace',
params: {
name : value.name ,
skuId : this.skuId
},
})
}
else {
uni.showToast({
title: '请填写信息',
icon: "none"
})
}
return
}
// 立即登录
if(value.name != '' && value.tel != '') {
// 立即登录
this.$Router.push({
name: 'Login',
params: {
name : value.name,
tel : value.tel,
skuId : this.skuId,
},
})
} else {
uni.showToast({
title: '请填写信息',
icon: "none"
})
}
},
// 跳地图
clickMap(){
uni.openLocation({
longitude: Number(this.longitude),
latitude : Number(this.latitude),
name : this.city,
address : this.rough
})
},
}
}
</script>
<style lang="scss" scoped>
.content{
overflow: hidden;
min-height: calc(100vh - 60px);
background: #ecf4f6;
box-sizing: border-box;
}
.banner{
width: 100%;
}
// 快速入口
.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;
}
}
.swiper-content{
height: calc(171px - 60rpx);
box-sizing: border-box;
z-index: 9;
}
}
}
// 精选推荐
.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;
}
.inedxImg {
width: 100%;
display: block;
position: relative;
z-index: 9;
}
.inedxImg-Down {
width: 100%;
display: block;
position: relative;
z-index: 9;
}
.inedxCont {
display: block;
position: relative;
z-index: 1;
top: -160rpx;
padding-top: 126%;
.inedxBack {
width: 100%;
top: 0;
}
.inedxBack,
.inedxForm {
width: 100%;
position: absolute;
left: 0;
}
.inedxForm {
top: 160rpx;
padding: 0 $padding * 2;
box-sizing: border-box;
}
.site-input {
padding: $padding 0;
box-sizing: border-box;
line-height: 80rpx;
border-bottom: 2rpx solid #6F6F6F;
label {
font-size: $title-size;
color: #6f6f6f;
text {
font-weight: 600;
color: red;
}
}
.site-disabled {
color: #999;
}
}
.agreement{
margin: $margin + 10 0 $margin * 2;
display: flex;
line-height: 44rpx;
font-size: $title-size-sm - 2;
color: #ABABAB;
.agreement-text {
display: flex;
line-height: 52rpx;
.agreement-color {
color: #B79872;
}
}
}
.site-btn {
display: inline-block;
text-align: center;
width: 100%;
margin-top: 70rpx;
button {
background: transparent;
border: none;
image {
width: 240rpx;
}
&::after {
display: none;
}
}
.site-tips {
color: red;
font-size: $title-size-m;
}
}
.mapModular {
margin-top: 60rpx;
color: #6f6f6f;
font-size: 27rpx;
.mapModular-img {
height: 270rpx;
border: #ae8e69 2rpx solid;
background-color: #ffffff;
}
.mapModular-name {
padding: 20rpx 10rpx;
box-sizing: border-box;
}
}
}
/* 认证弹出 */
.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>