You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1348 lines
37 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="page">
<view class="fixhead" :style="{ marginTop: geStatusBarHeight() + 'px'}">
<selShop :showName="false" :showQR="true" :shopid="shopid" :shop="shop" @changeArea="changeArea"></selShop>
</view>
<scroll-view class="scrolllist" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
<view class="tabicl" v-for="(item, index) in list" :key="index" :class="index==tabCurrentIndex?'cur':''" @tap="tabSelect" :data-id="index">
<view class="ptext">{{item.name}}</view>
<view class="pline"></view>
</view>
</scroll-view>
<swiper class="swiper-box" :duration="300" :current="tabCurrentIndex" @animationfinish="animationfinish" @change="handleChange">
<swiper-item class="swiper-item" v-for="(tabItem,index) in list" :key="tabItem.id">
<!-- 了解场馆 -->
<scroll-view v-if="list[index].id==3" scroll-y style="height: 100%;width: 100%;">
<scroll-view class="scrolltab" scroll-x="true" scroll-with-animation>
<view class="tab" :class="0==tabIndex?'cur':''" @tap="tabSelectC" :data-id="0">
企业介绍
</view>
<view class="tab" :class="1==tabIndex?'cur':''" @tap="tabSelectC" :data-id="1">
创始人
</view>
<view class="tab" :class="2==tabIndex?'cur':''" @tap="tabSelectC" :data-id="2">
店面位置
</view>
</scroll-view>
<view v-if="0==tabIndex" class="bcontent">
<!-- <image style="width: 100%;height: 200rpx; margin: 20rpx auto;" src="/static/image/three.jpg" mode="aspectFit"></image> -->
<mp-html :content="html1" :markdown="true" :lazy-load="true"/>
</view>
<view v-if="1==tabIndex" class="bcontent">
<mp-html :content="html2" :markdown="true" :lazy-load="true"/>
</view>
<view v-if="2==tabIndex" class="adrcontent">
<view class="adrcon" v-for="(item, i) in shoplist" :key="i">
<view class="adrow">
<uni-icons type="shop-filled" color="#00a89b" size="25"></uni-icons>
<view class="txt">{{item.storeName}}</view>
<image class="qrimg" src="/static/image/qr.png" mode="aspectFit"></image>
<uni-icons type="phone" color="#00a89b" size="25" @click="gotoPhone(item.phone)" ></uni-icons>
</view>
<view class="adrow">
<uni-icons type="map-pin-ellipse" color="#00a89b" size="24"></uni-icons>
<view class="atxt">{{item.address}}</view>
<uni-icons type="paperplane" color="#868c99" size="25" @click="gotoAddress(item.address)"></uni-icons>
</view>
</view>
<!-- <view class="adrcon">
<view class="adrow">
<uni-icons type="shop-filled" color="#00a89b" size="25"></uni-icons>
<view class="txt">淮海中路店</view>
<image class="qrimg" src="/static/image/qr.png" mode="aspectFit"></image>
<uni-icons type="phone" color="#00a89b" size="25"></uni-icons>
</view>
<view class="adrow">
<uni-icons type="map-pin-ellipse" color="#00a89b" size="24"></uni-icons>
<view class="atxt">上海市黄浦区淮海中路918号</view>
<uni-icons type="paperplane" color="#868c99" size="25"></uni-icons>
</view>
</view> -->
</view>
</scroll-view>
<!-- 教练风采 -->
<scroll-view v-else-if="list[index].id==5" scroll-y style="height: 100%;width: 100%;">
<view class="tcard" v-for="(item, i) in tabItem.slist" :key="i" @tap="gotoTeacher(item)">
<view class="limg imgload">
<image v-if="item.avatar" :src="getimgRemoteFile(item.avatar)" mode="aspectFill"></image>
</view>
<view class="tlcon">
<view class="tlname">
{{item.userName}}
</view>
<view class="tlinfo">
{{item.intro}}
</view>
</view>
</view>
<uni-load-more iconType="circle" :status="tabItem.loadStatus" />
</scroll-view>
<!-- 健康指数-->
<scroll-view v-else-if="list[index].id==2" scroll-y style="height: 100%;width: 100%;">
<view class="scontent">
<uni-forms ref="valiForm" :modelValue="valiFormData">
<uni-forms-item label="性别" labelWidth="180rpx" required name="contact">
<uni-data-checkbox v-model="valiFormData.gender" :localdata="sexs" />
</uni-forms-item>
<uni-forms-item label="年龄" labelWidth="180rpx" required name="phone">
<uni-easyinput type="number" v-model="valiFormData.age" maxlength="12" placeholder="请输入年龄" />
</uni-forms-item>
<uni-forms-item label="身高cm" labelWidth="180rpx" required name="phone">
<uni-easyinput type="number" v-model="valiFormData.height" maxlength="12" placeholder="请输入身高" />
</uni-forms-item>
<uni-forms-item label="体重kg" labelWidth="180rpx" required name="phone">
<uni-easyinput type="number" v-model="valiFormData.weight" maxlength="12" placeholder="请输入体重" />
</uni-forms-item>
</uni-forms>
<button type="primary" class="btn" @click="submit('valiForm')">计算</button>
</view>
</scroll-view>
<!-- 体质测评 -->
<scroll-view v-else-if="list[index].id==10" scroll-y style="height: 100%;width: 100%;">
<view class="tzcontent">
<view class="tztitle">{{title}}</view>
<view class="tztxt">
{{description}}
</view>
<uni-forms ref="valiForm1" label-position="top">
<view class="example">
<uni-forms-item v-for="(item, i) in list[index].slist" :key="i" :name="item.name+'('+item.description+')'"
:label="numberToChinese(i+1)+'、'+item.name+'('+item.description+') 得分:'+(item.score?item.score:0)" labelWidth="700rpx" >
<view v-if="item.questions" class="uni-list" v-for="(cell, j) in item.questions" :key="'c'+j">
<view class="optxt">{{(j+1)+'、'+cell.content}}</view>
<uni-data-checkbox v-model="cell.score" :localdata="getoption(cell.options)" @change="checkboxChange($event,i,j)"></uni-data-checkbox>
</view>
</uni-forms-item>
</view>
</uni-forms>
<button type="primary" class="btn" @click="tzsubmit('valiForm1')">提交</button>
</view>
</scroll-view>
<scroll-view v-else scroll-y style="height: 100%;width: 100%;">
<view class="card" v-for="(item, i) in tabItem.slist" :key="i" @tap="gotoDetail(item,tabItem.name,index)">
<view class="limg imgload">
<image v-if="item.image" :src="getimgRemoteFile(item.image)" mode="aspectFill"></image>
</view>
<view class="tlcon">
<view class="tlname">
{{item.title}}
</view>
<view class="tlinfo">
{{item.content}}
</view>
<view class="tother">
<uni-icons type="eye" color="#868c99" size="18"></uni-icons>
<view class="txt1">{{item.readNum?item.readNum:0}}</view>
<uni-icons type="calendar" color="#868c99" size="17"></uni-icons>
<view class="txt">{{item.modifyTime?item.modifyTime:(item.startTime?item.startTime:'')}}</view>
</view>
</view>
</view>
<uni-load-more iconType="circle" :status="tabItem.loadStatus" />
</scroll-view>
</swiper-item>
</swiper>
<!-- 是否登录 -->
<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
</view>
</template>
<script>
import { myCache,getcartNum,getRemoteFile } from '../../utils/utils.js';
import openlogin from "../components/openlogin.vue";
import selShop from "../components/selShop.vue";
export default {
components: {
openlogin,
selShop
},
data() {
return {
openId:"",
phone:"",
userid:"",
tabCurrentIndex: 0,
scrollLeft: 0,
shopid:myCache('myshopid')?myCache('myshopid'):null,
shop:myCache('myshop')?myCache('myshop'):'',
tabIndex: 0,
id:1,
sexs: [{
text: '男性',
value: "male"
},
{
text: '女性',
value: "female"
}],
valiFormData: {// 校验表单数据
id: null,
gender: '',
age: '',
height: '',
weight: '',
},
//tabs
list: myCache('sortCache'),
// [
// {
// name:"瑜伽传承",
// id:1,
// loadStatus:'more',//'more', // 'noMore',
// slist:[]
// },
// {
// name:"了解场馆",
// id:2,
// loadStatus:'more',//'more', // 'noMore',
// slist:[]
// },
// {
// name:"教练风采",
// id:3,
// loadStatus:'more',//'more', // 'noMore',
// slist:[]
// },
// {
// name:"练习瞬间",
// id:4,
// loadStatus:'more',//'more', // 'noMore',
// slist:[]
// },
// {
// name:"瑜伽欣赏",
// id:5,
// loadStatus:'more',//'more', // 'noMore',
// slist:[]
// },
// {
// name:"瑜伽常识",
// id:6,
// loadStatus:'more',//'more', // 'noMore',
// slist:[]
// },
// {
// name:"健康饮食",
// id:7,
// loadStatus:'more',//'more', // 'noMore',
// slist:[
// ]
// },
// {
// name:"健康指数",
// id:8,
// loadStatus:'noMore',//'more', // 'noMore',
// slist:[]
// }
// ],
html1:`三朵蘭瑜伽机构由从事瑜伽行业18年的全国知名瑜伽导师冉洪涛老师创办并带领一批行业内瑜伽教学经验8年以上的优秀瑜伽老师成立核心课程研发团队立足于将在世界传承几千年的瑜伽修炼体系精髓进行实践化和实用化结合中医的经络学和中医理疗方法针对现代人体质和容易出现的健康问题研发出多套经典的瑜伽实用课程经过几年在全国的推广和瑜伽会员的习练测试已经让越来越多的人恢复了健康和活力
<br>三朵蘭以【预防未病,助人健康】为己任,一直为瑜伽而传播、为更多人保持和恢复健康助力!让更多人通过练习瑜伽拥有健康的体魄、平和宁静的内心、幸福和快乐的生活!<br>
`,
html2:`三朵蘭瑜伽机构由从事瑜伽行业18年的全国知名瑜伽导师冉洪涛老师创办并带领一批行业内瑜伽教学经验8年以上的优秀瑜伽老师成立核心课程研发团队立足于将在世界传承几千年的瑜伽修炼体系精髓进行实践化和实用化结合中医的经络学和中医理疗方法针对现代人体质和容易出现的健康问题研发出多套经典的瑜伽实用课程经过几年在全国的推广和瑜伽会员的习练测试已经让越来越多的人恢复了健康和活力
<br>三朵蘭以【预防未病,助人健康】为己任,一直为瑜伽而传播、为更多人保持和恢复健康助力!让更多人通过练习瑜伽拥有健康的体魄、平和宁静的内心、幸福和快乐的生活!<br>
`,
shoplist:[],
// 校验规则
rules: {
gender: {
rules: [{
required: true,
errorMessage: '请选择性别'
}]
},
age: {
rules: [{
required: true,
errorMessage: '请输入年龄'
}]
},
height: {
rules: [{
required: true,
errorMessage: '请输入身高'
}]
},
weight: {
rules: [{
required: true,
errorMessage: '请输入体重'
}]
},
},
items: [
{
value: '2',
name: '2',
text: '2'
},
{
value: '1',
text: '1',
name: '1'
},
{
value: '0',
text: '0',
name: '0'
}
],
description:"(亲爱的伽人欢迎来到中医九种体质自测普查此版本适用人群全年龄段评分标准请根据近1年真实情况勾选。打分规则完全符合 = 2分 | 偶尔有 = 1分 | 完全不符合 = 0分请选择)",
title:"中医九种体质自测普查",
surveyId:null,
scores:0,
sessionId:null,
};
},
onLoad(option) {
if(option.id||option.id==0){
this.id=option.id;
}
// 获取分类信息
this.getSort();
},
onShow(){
this.openId = myCache('openId');
var user = myCache('user');
this.userid = user.userid? user.userid:'';
this.phone = user.userphone;
var cartnum=getcartNum();
if(cartnum>0){
// 底部菜单消息角标
uni.setTabBarBadge({
//显示未读消息条数
index: 4,
text: cartnum+''
});
}
else{
uni.removeTabBarBadge({
index: 4
})
}
},
mounted() {
if(this.userid==""||this.userid=="0"){
this.$refs.loginId.open();
}
},
onPullDownRefresh() {
setTimeout(()=>{
uni.stopPullDownRefresh()
},100);
},
methods: {
numberToChinese(num) {
const chineseNums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
const sections = ['', '十', '百', '千'];
const units = ['', '万', '亿'];
num = String(num).split("").reverse().join(""); // 将数字反转以便从低位到高位处理
let result = '';
let unitIndex = 0;
for (let i = 0; i < num.length; i++) {
let n = Number(num[i]);
if (n !== 0) {
result = chineseNums[n] + sections[i % 4] + result;
if (i % 4 === 0 && i !== 0) {
result = units[unitIndex] + result;
unitIndex++;
}
} else {
if (result.charAt(0) !== chineseNums[0]) { // 避免连续多个零
result = chineseNums[0] + result;
}
}
}
return result.replace(/零([亿万])/g, "$1").replace(/零+/g, "零"); // 处理连续零和结果尾部的零
},
getoption(options){
var arrs=[];
if(options&&options.length>0){
options.forEach(option=>{
arrs.push({value:option.score,text:option.optionText})
})
}
return arrs;
},
checkboxChange(e,i,j){
console.log('e:',e,i,j);
if(e.detail.data){
this.list[this.tabCurrentIndex].slist[i].questions[j]["score"]=e.detail.value;
this.$forceUpdate();
this.list[this.tabCurrentIndex].slist[i].questions[j].options.forEach(op=>{
if(e.detail.value==op.score){
this.list[this.tabCurrentIndex].slist[i].questions[j]["optionId"]=op.optionId;
this.$forceUpdate();
}
})
this.scores=0;
this.list[this.tabCurrentIndex].slist.forEach((item,ind) => {
var score=0
if(item.questions){
item.questions.forEach(cell => {
if(cell.score){
this.scores+=cell.score;
score+=cell.score;
this.$forceUpdate();
}
});
}
this.list[this.tabCurrentIndex].slist[ind]["score"]=score;
this.$forceUpdate();
});
this.$forceUpdate();
}
},
tzsubmit(ref) {
var answers=[];
var tj=0;
this.list[this.tabCurrentIndex].slist.forEach(item => {
if(item.questions){
item.questions.forEach(cell => {
if(cell.optionId){
tj++;
answers.push({
questionId:cell.questionId,
optionId:cell.optionId
});
}
});
}
})
if(tj>0){
this.tzsavedo(answers)
}
else{
uni.showModal({
title: '提示',
content: "请选择体质测评数据后提交!",
cancelText: '取消',
confirmText: '确定',
success: ress => {
if (ress.confirm) {
}
}
});
}
},
async tzsavedo(answers){
var params={
answers:answers,
surveyId:this.surveyId,
sessionId:this.sessionId,
}
try{
const {data: res} = await uni.$http.post('/api/questionnaire/submit', params);
if(res&&res.success){
var data=res.data;
var constitutionScores=data.constitutionScores?data.constitutionScores:[];
// 1.若平和质总分 ≥ 8分且其他所有体质总分均 6分
// 则跳出为:恭喜您,您的体质为“为平和体质”,非常完美。请联系您的馆主或教练,领取训练及生活方案,继续保持哦。
// 2.(若某一种偏颇体质(气虚/阳虚/阴虚等)总分 ≥ 8分
// 亲爱的伽人您好,您的体质为典型(气虚/阳虚/阴虚等,是什么就跳出什么)体质。请联系您的馆主或教练,领取训练机生活方案,快速调整哦。
// 3.(若某一种偏颇体质总分在 6 7分 之间)则跳出为:
// 亲爱的伽人您好,您的体质为典型(气虚/阳虚/阴虚等,是什么就跳出什么)倾向体质。请联系您的馆主或教练,领取训练机生活方案,快速调整哦。
// 4.若有两种及以上偏颇体质分数都7分含7分以上则跳出
// 亲爱的伽人您好,您的体质为复合型体质典型,建议综合调理。请联系您的馆主或教练,领取训练机生活方案,快速调整哦。
var ifone=0,iftwo=0,ifthree=0,iffour=0;
var twostr=[],threestr=[];
constitutionScores.forEach(item=>{
// 1.若平和质总分 ≥ 8分且其他所有体质总分均 6分
if(item.constitutionAlias=="pinghe"){
if(item.totalScore>=8)
{
ifone=2;
}
}
else{
if(item.totalScore>6)
{
ifone=ifone-1;
}
if(item.totalScore>=8)
{
iftwo=iftwo+1;
twostr.push(item.constitutionName.replace("体质",""))
}
if(item.totalScore>=7&&item.totalScore<=6)
{
ifthree=ifthree+1;
threestr.push(item.constitutionName.replace("体质",""))
}
if(item.totalScore>=7)
{
iffour=iffour+1;
}
}
});
var tips=data.resultText?data.resultText:"体质测评提交成功!";
if(ifone==2){
tips="恭喜您,您的体质为“为平和体质”,非常完美。请联系您的馆主或教练,领取训练及生活方案,继续保持哦。"
}
else if(iftwo>0){
tips="亲爱的伽人您好,您的体质为典型"+twostr.toString('/')+"体质。请联系您的馆主或教练,领取训练机生活方案,快速调整哦。"
}
else if(ifthree>0){
tips="亲爱的伽人您好,您的体质为典型"+threestr.toString('/')+"倾向体质。请联系您的馆主或教练,领取训练机生活方案,快速调整哦。"
}
else if(iffour>1){
tips="亲爱的伽人您好,您的体质为复合型体质典型,建议综合调理。请联系您的馆主或教练,领取训练机生活方案,快速调整哦。"
}
uni.showModal({
title: '提示',
content: tips,
cancelText: '取消',
confirmText: '确定',
success: ress => {
if (ress.confirm) {}
}
});
}
else{
uni.showModal({
title: '提示',
content: res.message? res.message:'体质测评提交失败!请重试!',
cancelText: '取消',
confirmText: '确定'
});
}
}
catch{
uni.showModal({
title: '提示',
content: '计算异常!请重试!',
cancelText: '取消',
confirmText: '确定'
});
}
},
async getSort() {
// 分类
const {data: res} = await uni.$http.get('/api/index/getIndex');
if (res&&res.data) {
myCache('sortCache',res.data);
this.list=[];
res.data.forEach((cell,ii)=>{
if(cell.id==this.id){
this.tabCurrentIndex=ii;
this.$forceUpdate();
}
this.list.push({
name:cell.name,
id:cell.id,
loadStatus:'more',//'more', // 'noMore',
slist:[]
});
this.$forceUpdate();
});
// 加载数据
this.loadData();
}
},
gotoPhone(phone){
//#ifdef MP-WEIXIN
uni.makePhoneCall({
phoneNumber: phone
});
//#endif
//#ifdef APP-PLUS
plus.device.dial(phone, true);
//#endif
},
gotoAddress(address){
console.log(address);
},
getimgRemoteFile(img){
if(img){
// console.log(getRemoteFile(img))
// return getRemoteFile(img)
return img;
}
else{
return require("@/static/image/nopic.png");
}
},
// 切换门店
changeArea(item){
console.log(item)
this.shop=item.storeName;
this.shopid=item.id;
// 内容切换
this.list=[];
this.html1=``;
this.html2=``;
this.$forceUpdate();
this.getSort();
},
iflogin(){
this.openId = myCache('openId');
var user = myCache('user');
this.userid = user.userid? user.userid:'';
this.phone = user.userphone;
if(this.userid==""||this.userid=="0"||this.phone==""){
uni.navigateTo({
url: `/pages/login/login`
});
return false;
}
else{
return true;
}
},
getPhoneNumber(e){
if(e.phone){
this.phone = e.phone
}
if(e.userid){
this.userid = e.userid
}
},
async getList() {
if(this.list[this.tabCurrentIndex].loadStatus!=="noMore")
{
var para={
visitStore:this.shopid
}
var url="/api/inherit/getList";
if(this.list[this.tabCurrentIndex].id==1){
// 瑜伽是一种生活(瑜伽传承)
url="/api/inherit/getList";
}
else if(this.list[this.tabCurrentIndex].id==3){
// 了解场馆
url="/api/store/getList";
}
else if(this.list[this.tabCurrentIndex].id==5){
// 教练风采
url="/api/context/getList";
}
else if(this.list[this.tabCurrentIndex].id==6){
// 精彩瞬间(练习瞬间)
url="/api/moments/getList";
}
else if(this.list[this.tabCurrentIndex].id==11){
// 瑜伽欣赏
url="/api/appreciate/getList";
}
else if(this.list[this.tabCurrentIndex].id==12){
// 瑜伽常识
url="/api/sense/getList";
}
else if(this.list[this.tabCurrentIndex].id==9){
// 吃瘦练美(健康饮食)
url="/api/healthy/getList";
}
else if(this.list[this.tabCurrentIndex].id==10){
// 体质测评
url="/api/questionnaire/getOne";
}
else{
return false;
}
uni.showLoading({
title: '数据加载中...'
});
// 体质测评
if(this.list[this.tabCurrentIndex].id==10){
// 获取体质测评项
const {data: res} = await uni.$http.get(url);
if(res.data){
var data=res.data;
this.list[this.tabCurrentIndex].loadStatus="noMore";
this.list[this.tabCurrentIndex].slist=data.constitutions?data.constitutions:[];
this.description=data.description;
this.title=data.title;
this.surveyId=data.surveyId;
this.sessionId=data.sessionId;
this.$forceUpdate();
if(this.userid){
// 获取体质测评上次答题结果(需登录)
const {data: rest} = await uni.$http.get("/api/questionnaire/result");
if(rest.data){
var resultText=rest.data.resultText;
if(resultText){
uni.showModal({
title: '上次测评结果',
content: resultText,
cancelText: '取消',
confirmText: '确定',
success: ress => {
if (ress.confirm) {}
}
});
}
// var constitutionScores=rest.data.constitutionScores?rest.data.constitutionScores:[];
// var answers=rest.data.answers?rest.data.answers:[];
// answers.forEach(cell=>{
// this.list[this.tabCurrentIndex].slist.forEach((item,ii)=>{
// if(item.questions&&item.questions.length>0){
// item.questions.forEach((qt,kk)=>{
// if(qt.questionId==answers.questionId){
// if(qt.options){
// qt.options.forEach((opt,hh)=>{
// if(opt.optionId==answers.optionId){
// this.list[this.tabCurrentIndex].slist[ii].questions[kk]["score"]=opt.score;
// this.$forceUpdate();
// }
// });
// }
// }
// })
// }
// });
// });
}
}
}
else{
this.list[this.tabCurrentIndex].loadStatus="noMore";
this.$forceUpdate();
}
}
else{
// 获取数据
const {data: res} = await uni.$http.post(url, para);
if(res.data){
this.list[this.tabCurrentIndex].loadStatus="noMore";
if(this.list[this.tabCurrentIndex].id==3){
console.log(res.data)
// 了解场馆
var companyIntroduction=res.data&&res.data.companyIntroduction?res.data.companyIntroduction:'';
if(companyIntroduction){
this.html1=companyIntroduction.profile; //企业简介
this.html2=companyIntroduction.founder; //创始人
}
this.shoplist=res.data&&res.data.storeList?res.data.storeList:[];
this.$forceUpdate();
}
else{
this.list[this.tabCurrentIndex].slist=res.data;
this.$forceUpdate();
}
this.$forceUpdate();
}
else{
this.list[this.tabCurrentIndex].loadStatus="noMore";
this.$forceUpdate();
}
}
}
},
loadData(){
// 加载
if(this.list[this.tabCurrentIndex].loadStatus=="more") {
this.list[this.tabCurrentIndex].loadStatus="loading";
setTimeout(() => {
this.getList();
}, 300);
}
},
tabSelect(e) {
console.log("tabSelect");
if(this.list[e.currentTarget.dataset.id].id==4){
// 课程预约
if(this.userid==""||this.userid=="0"){
this.$refs.loginId.open();
}
else{
// 课程预约
uni.navigateTo({
url: `/pages/user/courselist`
});
}
}
else if(this.list[e.currentTarget.dataset.id].id==7){
// 大咖分享(线上大咖课)
uni.reLaunch({
url: `/pages/product/list?id=2`
});
}
else if(this.list[e.currentTarget.dataset.id].id==8){
// 教练培训
uni.reLaunch({
url: `/pages/product/list`
});
}
else{
this.tabCurrentIndex = e.currentTarget.dataset.id;
this.$forceUpdate();
}
},
animationfinish({ detail: { current } }) {
// console.log("animationfinish")
// this.tabCurrentIndex = current;
},
handleChange(e) {
//原在animationfinish中的操作转移到这里
console.log("handleChange");
if(this.list[e.detail.current].id==4){
// 课程预约
if(this.userid==""||this.userid=="0"){
this.$refs.loginId.open();
}
else{
// 课程预约
uni.navigateTo({
url: `/pages/user/courselist`
});
}
}
else if(this.list[e.detail.current].id==7){
// 大咖分享(线上大咖课)
uni.reLaunch({
url: `/pages/product/list?id=2`
});
}
else if(this.list[e.detail.current].id==8){
// 教练培训
uni.reLaunch({
url: `/pages/product/list`
});
}
else{
this.tabCurrentIndex = e.detail.current;
this.$forceUpdate();
this.tabChangeDo();
}
},
tabChangeDo(){
this.scrollLeft = (this.tabCurrentIndex - 1) * 90;
if(this.list[this.tabCurrentIndex].id==2){
var that=this;
// 健康指数 体质测评
setTimeout(() => {
console.log(that.$refs.valiForm)
if(that.$refs.valiForm){
that.$refs.valiForm[0].setRules(that.rules);
}
}, 1000);
}
else{
// 重新加载 暂不需要加载
// this.list[this.tabCurrentIndex].loadStatus="more";
// this.list[this.tabCurrentIndex].slist=[];
this.loadData();
}
},
tabSelectC(e) {
console.log("tabSelectC")
this.tabIndex = e.currentTarget.dataset.id;
},
gotoDetail(item,name,index){
// 详情
item["name"]=name;
var data=encodeURIComponent(JSON.stringify(item));
var type=this.list[index].id;
uni.navigateTo({
url: `/pages/category/detail?data=${data}&type=${type}`
});
},
gotoTeacher(item){
// 详情
uni.navigateTo({
url: `/pages/teacher/detail?id=${item.userId}&name=${item.userName}`
});
},
async submit(ref) {
var that = this;
this.$refs[ref][0].validate().then(res => {
console.log('success', res);
that.savedo();
}).catch(err => {
console.log('err', err);
})
},
async savedo(){
try{
const {data: res} = await uni.$http.post('/api/healthy/calculateBim', this.valiFormData);
if(res&&res.success){
var bim=res.data?parseFloat(res.data):0;
if(bim){
var msg="";
if(bim<=18.5){
msg="您的体重过轻请联系馆主或教练领取A方案!";
}
else if(bim>18.5&&bim<=24){
msg="太棒了您的体重非常健康请联系馆主或教练领取B方案保持!";
}
else if(bim>24&&bim<28){
msg="您的体重超重请联系馆主或教练领取C方案保持!";
}
else if(bim>=28){
msg="您的体重肥胖请联系馆主或教练领取D方案保持!";
}
uni.showModal({
title: '提示',
content: msg,
cancelText: '取消',
confirmText: '确定',
success: ress => {
if (ress.confirm) {
}
}
});
}
else{
uni.showModal({
title: '提示',
content: '计算异常!请重试!',
cancelText: '取消',
confirmText: '确定'
});
}
}
else{
uni.showModal({
title: '提示',
content: res.message? res.message:'计算异常!请重试!',
cancelText: '取消',
confirmText: '确定'
});
}
}
catch{
uni.showModal({
title: '提示',
content: '计算异常!请重试!',
cancelText: '取消',
confirmText: '确定'
});
}
},
// 获取状态栏高度
geStatusBarHeight(){
return uni.getSystemInfoSync()['statusBarHeight'];
},
// 获取导航栏高度
getNavBarHeight(){
return 45+uni.getSystemInfoSync()['statusBarHeight'];
},
}
}
</script>
<style lang="scss" scoped>
.page{
padding: 0;
position: relative;
background-image: url('@/static/image/bg.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
.fixhead{
width: 100%;
padding-top: 20rpx;
padding-bottom: 20rpx;
}
.search{
display: flex;
flex-direction: row;
align-items: center;
width: 300rpx;
height: 60rpx;
border-radius: 60rpx;
border:1rpx solid #ddd;
padding-left: 30rpx;
margin-left: 20rpx;
.txt{
margin-left: 20rpx;
font-size: 28rpx;
line-height: 50rpx;
color: #666;
}
}
.swiper-box {
flex: 1;
height: calc(100vh - var(--window-top) - var(--window-bottom) - 200rpx) !important;
}
.swiper-item {
height: 100%;
}
.scrolltab{
height: 60rpx;
white-space: nowrap;
width: 80%;
margin: 20rpx 10%;
text-align: center;
.tab{
width: 180rpx;
height: 60rpx;
line-height: 55rpx;
position: relative;
display: inline-block;
overflow: hidden;
margin-left: 20rpx;
border-radius: 30rpx;
border: 2rpx solid #ddd;
color: #333333;
font-size: 30rpx;
text-align: center;
}
.tab.cur{
color: #000;
background-color: #e4f9f7;
border: 2rpx solid #00a89b;
}
}
.btn{
margin: 20rpx auto;
font-size: 32rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #FCFCFD;
width: 314rpx;
height: 76rpx;
line-height: 76rpx;
background: #00a89b;
box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
border-radius: 10rpx;
opacity: 1;
&::after{
border:none;
}
}
.scontent{
background-color: rgba(255, 255,255, 0.5);
border-radius: 20rpx;
margin: 30rpx;
padding:50rpx 40rpx;
font-size: 28rpx;
text-align: center;
}
.bcontent{
background-color: rgba(255, 255,255, 0.5);
border-radius: 20rpx;
margin: 30rpx;
padding: 30rpx 30rpx;
font-size: 28rpx;
}
.adrcontent{
margin: 30rpx;
}
.adrcon{
display: flex;
flex-direction: column;
background-color: rgba(255, 255,255, 0.5);
border-radius: 20rpx;
border: 1rpx solid #eeefe8;
padding: 30rpx;
margin-bottom: 30rpx;
.adrow{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 5rpx 0;
.qrimg{
width: 36rpx;
height: 36rpx;
margin-right: 10rpx;
}
.txt{
font-size: 28rpx;
color: #333;
display: flex;
flex: 1;
margin-left: 10rpx;
margin-right: 10rpx;
}
.atxt{
font-size: 28rpx;
color: #959694;
display: flex;
flex: 1;
margin-left: 10rpx;
margin-right: 10rpx;
}
}
}
.scrolllist{
height: 110rpx;
background: #FFF;
white-space: nowrap;
width: 100%;
}
.tabicl{
min-width: 160rpx;
height: 100rpx;
line-height: 100rpx;
position: relative;
display: inline-block;
overflow: hidden;
margin-left: 12rpx;
}
.ptext{
font-size: 30rpx;
text-align: center;
color: #000;
height: 90rpx;
}
.cur .ptext{
color: #000;
font-size: 34rpx;
}
.cur .pline{
width: 40%;
height: 9rpx;
background: #00a89b;
border-radius: 6rpx;
opacity: 1;
margin-left: 30%;
}
.nodata{
width: 100%;
height: calc(100vh - 400rpx) !important;
line-height: calc(100vh) !important;
background-image: url('/static/image/no.png');
background-size: 52% auto;
background-repeat: no-repeat;
background-position: center;
font-size: 28rpx;
text-align: center;
color: #00a89b;
overflow: hidden;
}
.tcard {
display: flex;
flex-direction: row;
background: #fff;
border-radius: 20rpx;
margin: 30rpx 30rpx 0;
padding: 24rpx 20rpx 20rpx 22rpx;
.limg{
width: 120rpx;
height: 120rpx;
margin-right: 20rpx;
>image {
width: 120rpx;
height: 120rpx;
border-radius: 10rpx;
}
}
.tlcon {
display: flex;
flex-direction: column;
.tlname {
font-size: 30rpx;
font-weight: 600;
margin-bottom: 16rpx;
color: #323334;
}
.tlinfo {
font-size: 28rpx;
color: #868c99;
display: flex;
align-items: center;
height: 80rpx;
line-height: 40rpx;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis; //属性规定当文本溢出包含元素时发生的事情 text-overflow: clip|ellipsis|string; (修剪/省略号/指定字符串)
-webkit-line-clamp: 2;
/*要显示的行数*/
/* autoprefixer: off */
-webkit-box-orient: vertical; //属性规定框的子元素应该被水平或垂直排列
/* autoprefixer: on */
}
}
}
.card {
display: flex;
flex-direction: row;
background: #fff;
border-radius: 20rpx;
margin: 20rpx;
padding: 24rpx;
.limg{
width: 196rpx;
height: 166rpx;
margin-right: 20rpx;
>image {
width: 196rpx;
height: 166rpx;
border-radius: 10rpx;
}
}
.tlcon {
display: flex;
flex-direction: column;
.tlname {
font-size: 30rpx;
font-weight: 600;
margin-bottom: 10rpx;
color: #323334;
}
.tother{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
color: #868c99;
.txt1{
font-size: 26rpx;
margin-right: 20rpx;
margin-left: 4rpx;
width: 50rpx;
}
.txt{
font-size: 26rpx;
margin-right: 20rpx;
margin-left: 4rpx;
}
}
.tlinfo {
font-size: 28rpx;
color: #868c99;
display: flex;
align-items: center;
height: 80rpx;
line-height: 40rpx;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis; //属性规定当文本溢出包含元素时发生的事情 text-overflow: clip|ellipsis|string; (修剪/省略号/指定字符串)
-webkit-line-clamp: 2;
/*要显示的行数*/
/* autoprefixer: off */
-webkit-box-orient: vertical; //属性规定框的子元素应该被水平或垂直排列
/* autoprefixer: on */
}
}
}
::v-deep.uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text{
line-height: 40rpx !important;
font-size: 28rpx !important;
font-family: PingFang SC-Regular, PingFang SC !important;
font-weight: 400 !important;
color: #23262F !important;
}
::v-deep .uni-forms-item.is-direction-top .uni-forms-item__label{
font-size: 30rpx !important;
font-family: PingFang SC-Semibold, PingFang SC !important;
font-weight: 500 !important;
color: #333333 !important;
}
::v-deep .uni-forms-item__label{
height: auto !important;
}
::v-deep .uni-forms-item__error{
display: none !important;
}
::v-deep .uni-forms-item{
margin-bottom: 16rpx !important;
}
.uni-list-cell{
display: flex;
flex-direction: row;
padding: 20rpx 0;
}
.rtxt{
margin-left: 16rpx;
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #23262F;
}
.rtip{
font-size: 28rpx;
color:#F45A45;
margin-right: 5rpx;
}
.rtitle{
color:#666666;
height: 40rpx;
line-height: 40rpx;
font-size: 28rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #23262F;
}
.tvalue{
display: flex;
flex:1;
justify-content: flex-end;
font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
height: 40rpx;
line-height: 40rpx;
margin-left: 16rpx;
}
.nvalue{
display: flex;
flex:1;
justify-content: flex-end;
font-size: 24rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
height: 40rpx;
line-height: 40rpx;
margin-left: 16rpx;
}
.example {
margin: 20rpx 8rpx 0;
padding: 20rpx;
background-color: #FFFFFF;
border-radius: 16rpx;
}
.optxt{
width: 100%;
line-height: 40rpx;
font-size: 28rpx;
color: #23262F;
text-align: left;
}
.tztitle{
width: 100%;
line-height: 60rpx;
font-size: 36rpx;
font-weight: 600;
color: #000;
}
.tztxt{
width: 100%;
line-height: 32rpx;
font-size: 28rpx;
color: #000;
text-align: left;
}
.tzcontent{
background-color: rgba(255, 255,255, 0.5);
border-radius: 20rpx;
margin: 30rpx;
padding:20rpx 20rpx;
text-align: center;
}
</style>