初始化项目
This commit is contained in:
唐明明
46
pages/404/404.vue
Normal file
46
pages/404/404.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<view class="content vertical">
|
||||
<image src="@/static/404/404.png" mode="widthFix"></image>
|
||||
<view class="text">出错了</view>
|
||||
<view class="text">你访问的页面以离开了地球~！</view>
|
||||
<button type="default" size="mini" @click="$Router.replaceAll({name: 'Index'})">返回首页</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
text-align: center;
|
||||
padding-bottom: 20vh;
|
||||
background: #2e065f;
|
||||
.text{
|
||||
color: #dbb6ec;
|
||||
line-height: 60rpx;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
button{
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
width: 60vw;
|
||||
font-size: $title-size-lg;
|
||||
border-radius: 0;
|
||||
margin-top: $margin*2;
|
||||
background: white;
|
||||
color: #2e065f;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
360
pages/attestation/index.vue
Normal file
360
pages/attestation/index.vue
Normal file
@@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<form class="issue-form" @submit="issueForm">
|
||||
<view class="case">
|
||||
<view class="issue-title">
|
||||
用户档案
|
||||
</view>
|
||||
<view class="issue-block">
|
||||
<view class="issue-inputs">
|
||||
<label class="issue-input-label">真实姓名</label>
|
||||
<input class="issue-inputs-input" maxlength="4" placeholder="输入真实姓名" name="name" :value="seeData.name" type="text" :disabled="editState"></input>
|
||||
</view>
|
||||
<view class="issue-inputs">
|
||||
<label class="issue-input-label">手机号码</label>
|
||||
<input class="issue-inputs-input" placeholder="输入手机号码" name="mobileNo" :value="seeData.username" type="tel":disabled="editState"></input>
|
||||
</view>
|
||||
<view class="issue-inputs">
|
||||
<label class="issue-input-label">年龄</label>
|
||||
<input class="issue-inputs-input" placeholder="输入年龄" name="age" :value="seeData.age" type="number":disabled="editState"></input>
|
||||
</view>
|
||||
<view class="issue-inputs">
|
||||
<label class="issue-input-label">性别</label>
|
||||
<block v-if="editState">
|
||||
<view class="issue-inputs-input">
|
||||
{{ seeData.sex == 'woman' ? '女' : '男' }}
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<picker @change="bindSexChange" :value="sexIndex" :range="sexArray" range-key="name" :disabled="editState">
|
||||
<view class="uni-input">{{sexArray[sexIndex].name}}</view>
|
||||
<image class="uni-input-img" src="/static/icons/userLogin_icon.png" mode=""></image>
|
||||
</picker>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="!editState">
|
||||
<view class="issue-title">
|
||||
病例档案
|
||||
</view>
|
||||
<view class="case-block">
|
||||
<view class="case-inputs">
|
||||
<label class="case-input-label">症状说明</label>
|
||||
<textarea :value="seeData.remark" placeholder="输入症状说明" name="remark" type="text" :disabled="editState" />
|
||||
</view>
|
||||
<view class="case-inputs">
|
||||
<label class="case-input-label">
|
||||
当前尿酸值
|
||||
<text>（{{sexName == 'man' ? '男性' : '女性'}}尿酸正常指标 {{ countMin }} ~ {{ countMax }}）</text>
|
||||
</label>
|
||||
<input class="case-inputs-input" placeholder="输入当前尿酸值" @input="numberInput" :value="countNumber" type="idcard" :disabled="editState"></input>
|
||||
<text class="case-inputs-tips active" v-if="countNumber > countMax">偏高</text>
|
||||
<text class="case-inputs-tips" v-if="countNumber < countMin && countNumber != ''">偏低</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="issue-block">
|
||||
<label class="issueNew-title">诊断证明</label>
|
||||
<view class="issueNew-photo">
|
||||
<view class="issueNew-content" v-if="editState">
|
||||
<image class="issueNew-icon" @click="openImg(seeData.cover)" :src="seeData.cover" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="issueNew-content" @click="updImg('license')" v-else>
|
||||
<image class="issueNew-icon" :src="license.showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
|
||||
<view class="issueNew-text">请上传诊断证明</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="userdata-btn" v-if="!editState">
|
||||
<button class="issue-btn" form-type="submit" :disabled="disabled">立即保存</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { goutCreate, goutAdd, goutSee } from '@/apis/interfaces/gout'
|
||||
import { uploads } from '@/apis/interfaces/uploading'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
disabled : false ,// 提交按钮状态
|
||||
editState: false, //是否可以编辑表单
|
||||
numberVal: '',
|
||||
count : '',
|
||||
countMax : '',
|
||||
countMin : '',
|
||||
countNumber:'',
|
||||
seeData : {
|
||||
name : '',
|
||||
id_card : '',
|
||||
username: '',
|
||||
sex : '',
|
||||
cover : '',
|
||||
remark : '',
|
||||
age : ''
|
||||
}, //查看我的病例内容
|
||||
sexIndex : 0,
|
||||
sexName : 'man',
|
||||
license : {
|
||||
showpath: '',
|
||||
path : ''
|
||||
},
|
||||
sexArray : [{
|
||||
val : 'man',
|
||||
name : '男'
|
||||
},{
|
||||
val : 'woman',
|
||||
name : '女'
|
||||
}]
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
// 病例前置信息
|
||||
goutCreate().then(res => {
|
||||
this.count = res.count
|
||||
this.countMax = parseInt(res.count.man.max)
|
||||
this.countMin = parseInt(res.count.man.min)
|
||||
this.seeData.username = res.user.username
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
|
||||
if(this.$Route.query.hasCase == true) {
|
||||
this.editState = true
|
||||
// 获取查看病例
|
||||
this.goutSeeInfo();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 查看病例
|
||||
goutSeeInfo() {
|
||||
goutSee().then(res => {
|
||||
this.seeData.name = res.case.name
|
||||
this.seeData.username = res.case.user.username
|
||||
this.seeData.sex = res.case.sex
|
||||
this.seeData.cover = res.case.cover
|
||||
this.seeData.age = res.case.age
|
||||
this.countNumber = parseInt(res.case.number)
|
||||
this.seeData.remark = res.case.remark
|
||||
this.sexName = res.case.sex
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 选择男女
|
||||
bindSexChange(e) {
|
||||
this.sexIndex = parseInt(e.detail.value)
|
||||
this.sexName = this.sexArray[e.detail.value].val
|
||||
if(this.sexArray[e.detail.value].val == 'woman') {
|
||||
this.countMax = parseInt(this.count.woman.max)
|
||||
this.countMin = parseInt(this.count.woman.min)
|
||||
}
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
updImg(type){
|
||||
uni.chooseImage({
|
||||
count : 1,
|
||||
success : path => {
|
||||
uploads([{
|
||||
uri : path.tempFilePaths[0]
|
||||
}]).then(res => {
|
||||
this[type] = {
|
||||
showpath: res.url[0],
|
||||
path: res.path[0]
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 尿酸值
|
||||
numberInput(e) {
|
||||
this.countNumber = e.detail.value
|
||||
},
|
||||
|
||||
// 提交表单
|
||||
issueForm(e) {
|
||||
let value = e.detail.value,
|
||||
newCover = this.license.path,
|
||||
newSex = this.sexArray[this.sexIndex].val
|
||||
goutAdd({
|
||||
name : value.name,
|
||||
age : value.age,
|
||||
mobileNo: value.mobileNo,
|
||||
number : this.countNumber,
|
||||
remark : value.remark,
|
||||
cover : newCover,
|
||||
sex : newSex
|
||||
}).then(res => {
|
||||
this.disabled = true
|
||||
this.$Router.replace({name: "User"})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 查看图片
|
||||
openImg(img) {
|
||||
uni.previewImage({
|
||||
current: img,
|
||||
urls:[img]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
.case {
|
||||
border-bottom: 160rpx solid transparent;
|
||||
}
|
||||
.issue-title {
|
||||
padding: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.issue-block {
|
||||
background: white;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 0 25rpx;
|
||||
.issue-inputs {
|
||||
position: relative;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
padding-left: 170rpx;
|
||||
.issue-input-label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 170rpx;
|
||||
}
|
||||
.issue-inputs-input {
|
||||
line-height: 90rpx;
|
||||
height: 90rpx;
|
||||
width: 100%;
|
||||
}
|
||||
.uni-input-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.case-block {
|
||||
.case-inputs {
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.case-input-label {
|
||||
margin-bottom: 30rpx;
|
||||
display: block;
|
||||
text {
|
||||
color: #646464;
|
||||
}
|
||||
}
|
||||
.case-inputs-input {
|
||||
width: 70%;
|
||||
}
|
||||
.case-inputs-tips {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 100rpx;
|
||||
color: green;
|
||||
&.active {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 上传图片样式 */
|
||||
.issueNew-title {
|
||||
line-height: 90rpx;
|
||||
}
|
||||
.issueNew-photo{
|
||||
width: 100%;
|
||||
padding-top: 50%;
|
||||
background: white;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
.issueNew-content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 25rpx;
|
||||
left: 25rpx;
|
||||
bottom: 10rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-pack: center;
|
||||
border:1rpx solid #f5f5f5;
|
||||
border-radius: 6rpx;
|
||||
.issueNew-icon{
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 按钮 */
|
||||
.userdata-btn {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
right: 0;
|
||||
background: white;
|
||||
.issue-btn {
|
||||
background: #6e79ec;
|
||||
text-align: center;
|
||||
color: white;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: normal;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 10rpx;
|
||||
&[disabled] {
|
||||
background: #a7affd !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
170
pages/circle/index.vue
Normal file
170
pages/circle/index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<block v-if="logsArr.length > 0">
|
||||
<view class="While circle" v-for="(item, index) in logsArr" :key="index">
|
||||
<view class="circle-user">
|
||||
<image class="circle-user-head" :src="item.case.user.avatar ? item.case.user.avatar : '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
|
||||
<view class="circle-user-name">
|
||||
<block v-if="item.case">{{ item.case.user.nickname }}</block>
|
||||
<view class="circle-user-quantity">尿酸值{{ item.quantity }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="circle-content">
|
||||
{{ item.remark }}
|
||||
</view>
|
||||
<image v-if="item.cover" class="circle-picture-img" @click="openImg(item.cover)" :src="item.cover" mode="widthFix"></image>
|
||||
<view class="circle-see">
|
||||
发布时间：<text>{{ item.created_at }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pagesLoding" v-if="lodingStats">
|
||||
<block v-if="page.has_more">
|
||||
<image class="pagesLodingIcon" src="/static/icons/refresh_loding.gif" mode="widthFix"></image>加载中...
|
||||
</block>
|
||||
<block v-else>
|
||||
没有更多了~
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
<view class="pack-center pages-hint" v-else>
|
||||
<image src="/static/imgs/coupon_null.png"></image>
|
||||
<view>暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
allLogs
|
||||
} from '@/apis/interfaces/gout'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
logsArr : [] ,// 病友记列表
|
||||
page : {}, //分页信息
|
||||
lodingStats : false //加载状态
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
// 获取首页数据
|
||||
this.logsInfo();
|
||||
},
|
||||
methods: {
|
||||
// 首页数据
|
||||
logsInfo(page) {
|
||||
allLogs({
|
||||
page : page || ''
|
||||
}).then(res => {
|
||||
let listArr = this.logsArr,
|
||||
newData = []
|
||||
if(page == 1 || page == undefined) listArr = []
|
||||
newData = listArr.concat(res.data)
|
||||
this.logsArr = newData
|
||||
this.page = res.page
|
||||
this.lodingStats= false
|
||||
uni.stopPullDownRefresh()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 查看图片
|
||||
openImg(img) {
|
||||
uni.previewImage({
|
||||
current: img,
|
||||
urls:[img]
|
||||
})
|
||||
},
|
||||
|
||||
// 页面相关事件处理函数--监听用户下拉动作
|
||||
onPullDownRefresh() {
|
||||
// 商品列表数据
|
||||
this.logsInfo();
|
||||
},
|
||||
|
||||
// 上拉加载
|
||||
onReachBottom(){
|
||||
this.lodingStats = true
|
||||
let pageNumber = this.page.current
|
||||
if(this.page.has_more){
|
||||
pageNumber++
|
||||
// 商品列表数据
|
||||
this.logsInfo(pageNumber);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content{
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.While {
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding:30rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||||
}
|
||||
|
||||
.circle {
|
||||
border-radius: 10rpx;
|
||||
.circle-user {
|
||||
position: relative;
|
||||
.circle-user-head {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.circle-user-name {
|
||||
line-height: 60rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding-left: 80rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
.circle-user-quantity {
|
||||
background-color: #a7affd;
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
padding: 0 10rpx;
|
||||
border-radius: 60rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
margin: 10rpx 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.circle-content {
|
||||
margin: 20rpx 0;
|
||||
font-size: 26rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.circle-picture-img{
|
||||
width: 60%;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.circle-see {
|
||||
font-size: 26rpx;
|
||||
color: #919191;
|
||||
margin-top: 20rpx;
|
||||
text {
|
||||
padding-right: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
pages/friend/index.vue
Normal file
103
pages/friend/index.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<block v-if="relationArr.length > 0">
|
||||
<view class="While list" v-for="(item, index) in relationArr" :key="index">
|
||||
<image class="list-cover" :src="item.avatar || '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
|
||||
<view class="list-text">
|
||||
<view class="list-text-name nowrap">{{ item.nickname }}<view class="list-like-online">{{ item.username }}</view></view>
|
||||
<view class="list-text-time nowrap">邀请时间：{{ item.created_at }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="pack-center pages-hint" v-else>
|
||||
<image src="/static/imgs/coupon_null.png"></image>
|
||||
<view>暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { relations } from '@/apis/interfaces/user'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
relationArr: [], //我的伙伴列表
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// 获取商品详情数据
|
||||
this.relationsInfo();
|
||||
},
|
||||
methods: {
|
||||
// 商品详情数据
|
||||
relationsInfo() {
|
||||
relations().then(res => {
|
||||
this.relationArr = res.users
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.While {
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding:30rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||||
}
|
||||
|
||||
.list {
|
||||
border-radius: 10rpx;
|
||||
margin: 30rpx;
|
||||
position: relative;
|
||||
.list-cover {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.list-text{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 30rpx 30rpx 0 150rpx;
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.list-text-name {
|
||||
line-height: 40rpx;
|
||||
display: flex;
|
||||
font-size: 34rpx;
|
||||
margin-bottom: 10rpx;
|
||||
.list-like-online {
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
border: solid 2rpx #edb25f;
|
||||
color: #edb25f;
|
||||
border-radius: 4rpx;
|
||||
display: inline-block;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
padding: 0 10rpx;
|
||||
margin: 4rpx 15rpx;
|
||||
}
|
||||
}
|
||||
.list-text-time{
|
||||
font-size: 26rpx;
|
||||
line-height: 38rpx;
|
||||
color: #919191;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
450
pages/index/details.vue
Normal file
450
pages/index/details.vue
Normal file
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="exhibition">
|
||||
<rich-text :nodes="detailsImg"></rich-text>
|
||||
</view>
|
||||
<view class="exhibition-receive">
|
||||
<view class="exhibition-receive-btn" @click="popLogin" v-if="!detailsData.hasLogin">
|
||||
参与活动
|
||||
</view>
|
||||
<block v-else>
|
||||
<view class="exhibition-receive-btn" @click="popClick" v-if="canSample">
|
||||
参与活动
|
||||
</view>
|
||||
<view class="exhibition-receive-btn active" v-else>
|
||||
已参与
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view class="popBack" v-if="popShow"></view>
|
||||
<view class="popCont" v-if="popShow">
|
||||
<view class="popCont-title">
|
||||
<image @click="popClick" class="popCont-title-close" src="/static/icons/uricacidClose.png" mode="aspectFill"></image>
|
||||
<view class="popCont-title-text">
|
||||
领取试用装
|
||||
</view>
|
||||
</view>
|
||||
<form @submit="siteform" class="While site-form">
|
||||
<view class="site-input">
|
||||
<label>收货人</label>
|
||||
<input placeholder="请输入收货人姓名" name="name"></input>
|
||||
</view>
|
||||
<view class="site-input">
|
||||
<label>手机号码</label>
|
||||
<input placeholder="请输入手机号码" name="mobile" type="number"></input>
|
||||
</view>
|
||||
<view class="site-input">
|
||||
<label>所在省份</label>
|
||||
<picker @change="areasChange" :value="area.areaIndex" :range="area.areasArr" :range-key="'name'">
|
||||
<view class="picker" v-if="area.areasArr[area.areaIndex]">
|
||||
{{ area.areasArr[area.areaIndex].name }}
|
||||
</view>
|
||||
<image class="site-input-arrow" src="/static/icons/userLogin_icon.png"></image>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="site-input">
|
||||
<label>所在城市</label>
|
||||
<picker @change="cityDrop" :value="city.cityIndex" :range="city.cityArr" :range-key="'name'" class="conneColor">
|
||||
<view class="picker" v-if="city.cityArr[city.cityIndex]">
|
||||
{{ city.cityArr[city.cityIndex].name }}
|
||||
</view>
|
||||
<image class="site-input-arrow" src="/static/icons/userLogin_icon.png"></image>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="site-input">
|
||||
<label>所在区域</label>
|
||||
<picker @change="regiDrop" :value="regi.regiIndex" :range="regi.regiArr" :range-key="'name'" class="conneColor">
|
||||
<view class="picker" v-if="regi.regiArr[regi.regiIndex]">
|
||||
{{ regi.regiArr[regi.regiIndex].name }}
|
||||
</view>
|
||||
<image class="site-input-arrow" src="/static/icons/userLogin_icon.png"></image>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="site-input">
|
||||
<label>收货地址</label>
|
||||
<input placeholder="请输入详细地址" name="address"></input>
|
||||
</view>
|
||||
<view class="site-btn">
|
||||
<button form-type="submit" :disabled="disabled" size="mini">提交申请</button>
|
||||
</view>
|
||||
</form>
|
||||
</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 { goods, Receive, create } from '@/apis/interfaces/mall'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popShow : false, //弹出层
|
||||
detailsData : '', //商品数据信息
|
||||
disabled : false , // 提交按钮状态
|
||||
detailsImg : '',
|
||||
canSample : '',
|
||||
authState : false,
|
||||
// 省份选择
|
||||
area: {
|
||||
areasArr : [],
|
||||
areaId : '',
|
||||
areaIndex : 0,
|
||||
},
|
||||
|
||||
// 市级选择
|
||||
city: {
|
||||
cityArr : [],
|
||||
cityId : 0,
|
||||
cityIndex : 0,
|
||||
},
|
||||
|
||||
// 区域选择
|
||||
regi: {
|
||||
regiArr : [],
|
||||
regiId : 0,
|
||||
regiIndex : 0,
|
||||
}
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
// 获取商品详情数据
|
||||
this.detailsInfo();
|
||||
},
|
||||
methods: {
|
||||
// 商品详情数据
|
||||
detailsInfo() {
|
||||
goods(this.$Route.query.id).then(res => {
|
||||
this.detailsData = res
|
||||
this.detailsImg = res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
||||
this.canSample = res.canSample
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 去登陆
|
||||
popLogin() {
|
||||
this.$Router.push({ name: 'Login' });
|
||||
},
|
||||
|
||||
// 领取产品弹出
|
||||
popClick() {
|
||||
if(!this.detailsData.hasCase) {
|
||||
this.authState = !this.authState
|
||||
return
|
||||
}
|
||||
this.popShow = !this.popShow
|
||||
// 获取省市区列表
|
||||
if(this.popShow == true)this.createInfo();
|
||||
},
|
||||
|
||||
// 去认证
|
||||
authUrl() {
|
||||
this.$Router.push({ name: 'Attestation', params: { editState: false } });
|
||||
this.authState = !this.authState
|
||||
},
|
||||
|
||||
// 关闭认证提示弹出层
|
||||
authTap() {
|
||||
this.authState = !this.authState
|
||||
},
|
||||
|
||||
// 省市区列表
|
||||
createInfo() {
|
||||
create().then(res => {
|
||||
let areas = res,
|
||||
areaIndex = this.area.areaIndex
|
||||
this.area.areaId = areas[areaIndex].id
|
||||
this.area.areasArr= areas
|
||||
this.citylist(areas[areaIndex].id)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 所在省份-下拉
|
||||
areasChange(e) {
|
||||
let area = this.area.areasArr,
|
||||
index = e.detail.value,
|
||||
atcode = area[index].id
|
||||
if (index != this.area.areaIndex) {
|
||||
this.area.areaIndex = index
|
||||
this.area.areaId = atcode
|
||||
// 获取市级列表
|
||||
this.citylist(atcode)
|
||||
}
|
||||
},
|
||||
|
||||
// 市级列表
|
||||
citylist(cityId) {
|
||||
create({
|
||||
parent_id: cityId
|
||||
}).then(res=>{
|
||||
let cityArr = res
|
||||
this.city.cityId = cityArr[0].id
|
||||
this.city.cityArr = cityArr
|
||||
this.city.cityIndex = 0
|
||||
this.regilist(cityArr[0].id)
|
||||
})
|
||||
},
|
||||
|
||||
// 市级下拉筛选
|
||||
cityDrop(e) {
|
||||
let city = this.city.cityList,
|
||||
index = e.detail.value,
|
||||
citycode = city[index].id
|
||||
if (index != this.area.areaIndex) {
|
||||
this.city.cityIndex = index
|
||||
this.city.cityId = citycode
|
||||
|
||||
// 获取市级列表
|
||||
this.regilist(citycode)
|
||||
}
|
||||
},
|
||||
|
||||
// 区列表
|
||||
regilist(areaId) {
|
||||
create({
|
||||
parent_id: areaId
|
||||
}).then(res=>{
|
||||
this.regi.regiArr = res
|
||||
this.regi.regiId = res[0].id
|
||||
this.regi.regiIndex = 0
|
||||
})
|
||||
},
|
||||
|
||||
// 区下拉筛选
|
||||
regiDrop(e) {
|
||||
let newIndex = e.detail.value
|
||||
this.regi.regiIndex = newIndex
|
||||
this.regi.regiId = this.regi.regiArr[newIndex].id
|
||||
},
|
||||
|
||||
// 表单提交
|
||||
siteform(val) {
|
||||
let newVal = val.detail.value
|
||||
Receive({
|
||||
name: newVal.name,
|
||||
mobile: newVal.mobile,
|
||||
province_id: this.area.areaId,
|
||||
city_id: this.city.cityId,
|
||||
district_id: this.regi.regiId,
|
||||
address: newVal.address
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res,
|
||||
icon: "none"
|
||||
})
|
||||
this.disabled = true
|
||||
this.popShow = false
|
||||
this.canSample = false
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.While {
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||||
}
|
||||
|
||||
.site-form {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.site-input {
|
||||
padding: 0 0 0 200rpx;
|
||||
position: relative;
|
||||
line-height: 90rpx;
|
||||
min-height: 90rpx;
|
||||
border-bottom: 2rpx solid #f2f2f2;
|
||||
label {
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: 0;
|
||||
}
|
||||
input {
|
||||
height: 90rpx;
|
||||
}
|
||||
.site-input-arrow {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.exhibition {
|
||||
border-bottom: 120rpx solid transparent;
|
||||
.exhibition-img {
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
.exhibition-receive {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 17rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
z-index: 9;
|
||||
.exhibition-receive-btn {
|
||||
background-color: #ff8260;
|
||||
color: #FFFFFF;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
&.active {
|
||||
background-color: #d5d5d5;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-btn button[size="mini"] {
|
||||
width: 100%;
|
||||
background: #6e79ec;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 32rpx;
|
||||
color: white;
|
||||
padding: 0;
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
|
||||
// 弹出
|
||||
.popBack {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba($color: #000000, $alpha: .4);
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.popCont {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 100;
|
||||
height: 70vh;
|
||||
overflow-y: scroll;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
.popCont-title {
|
||||
border-bottom: 2rpx solid #F2F2F2;
|
||||
padding-bottom: 30rpx;
|
||||
display: flex;
|
||||
line-height: 54rpx;
|
||||
position: relative;
|
||||
.popCont-title-close {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-top: 7rpx;
|
||||
}
|
||||
.popCont-title-text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}/* 认证弹出 */
|
||||
.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>
|
||||
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>
|
||||
225
pages/login/login.vue
Normal file
225
pages/login/login.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="login-top">
|
||||
<view class="top-logo-content">
|
||||
手机号快捷登录
|
||||
</view>
|
||||
未注册的手机号码将自动注册
|
||||
</view>
|
||||
<!-- 输入手机号相关 -->
|
||||
<view class="inputs phone">
|
||||
<label class="label">+86</label>
|
||||
<input type="number" placeholder="输入您的手机号码" maxlength="11" v-model="phone" />
|
||||
</view>
|
||||
<view class="inputs sms">
|
||||
<input type="number" placeholder="输入短信验证码" maxlength="4" v-model="code" />
|
||||
<button class="sms-btn" type="default" size="mini" :disabled="phone == '' || getSms"
|
||||
@click="getPhoneCode">{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<input placeholder="邀请码 (选填)" maxlength="10" v-model="parentId" />
|
||||
</view>
|
||||
<button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
|
||||
<view class="beianNo">黑ICP备2021013714号-1</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getSms,
|
||||
smsAuth
|
||||
} from '@/apis/interfaces/auth'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone : "",
|
||||
code : "",
|
||||
parentId: "",
|
||||
smsTime : 60,
|
||||
getSms : false
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.parentId = this.$Route.query.invite || ''
|
||||
},
|
||||
methods: {
|
||||
// 用户登录
|
||||
login() {
|
||||
smsAuth({
|
||||
mobileNo : this.phone,
|
||||
code : this.code,
|
||||
invite : this.parentId
|
||||
}).then(res => {
|
||||
this.$store.commit('setToken', res.token_type + ' ' + res.access_token)
|
||||
if(this.$Route.toName){
|
||||
this.$Router.back()
|
||||
}else{
|
||||
this.$Router.replaceAll({name: 'Index'})
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取验证码
|
||||
getPhoneCode() {
|
||||
let outTime
|
||||
getSms({
|
||||
mobileNo: this.phone
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res,
|
||||
icon: "none"
|
||||
})
|
||||
this.getSms = true
|
||||
outTime = setInterval(() => {
|
||||
if (this.smsTime <= 1) {
|
||||
this.getSms = false
|
||||
this.smsTime = 60
|
||||
clearInterval('outTime')
|
||||
}
|
||||
this.smsTime -= 1
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: $padding * 3;
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
|
||||
.login-top {
|
||||
height: 17vh;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
color: #919191;
|
||||
.top-bg {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
z-index: 2;
|
||||
width: 740rpx;
|
||||
}
|
||||
.top-logo-content {
|
||||
box-sizing: border-box;
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
font-size: $title-size + 8;
|
||||
margin-bottom: 10rpx;
|
||||
.top-logo {
|
||||
margin-bottom: 20rpx;
|
||||
width: 146rpx;
|
||||
height: 146rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.inputs {
|
||||
background:rgba($color: $mian-color, $alpha: 0.05);
|
||||
border: solid 1rpx $border-color;
|
||||
position: relative;
|
||||
margin-top: $margin;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding: 0 $padding;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
|
||||
&.phone {
|
||||
padding-left: 120rpx;
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
border-right: solid 1rpx $border-color;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&.sms {
|
||||
padding-right: 200rpx;
|
||||
.sms-btn[size='mini'] {
|
||||
width: 200rpx;
|
||||
height: 77rpx;
|
||||
line-height: 77rpx;
|
||||
position: absolute;
|
||||
top: 1rpx;
|
||||
right: 1rpx;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-left: solid 1rpx $border-color;
|
||||
color: $mian-color;
|
||||
font-size: $title-size-lg;
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
&[disabled] {
|
||||
color: rgba($color: $mian-color, $alpha: .6);
|
||||
background: $border-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: $title-size + 6;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: #6e79ec;
|
||||
color: white;
|
||||
border-radius: 0;
|
||||
margin-top: $margin;
|
||||
font-size: $title-size;
|
||||
line-height: 90rpx;
|
||||
height: 90rpx;
|
||||
font-weight: bold;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background: rgba($color: #6e79ec, $alpha: .6);
|
||||
}
|
||||
}
|
||||
.beianNo{
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
text-align: center;
|
||||
padding-top: $padding*2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
279
pages/order/details.vue
Normal file
279
pages/order/details.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="orderData">
|
||||
<view class="While">
|
||||
<view class="orderData-cont-label">
|
||||
<image class="orderData-cont-img" src="/static/icons/orderIcon_01.png" mode="aspectFill"></image>
|
||||
<view class="orderData-cont-text">
|
||||
<view class="orderData-cont-name">订单编号</view>
|
||||
<view class="orderData-cont-copy">
|
||||
<text class="nowrap">{{ goodsData.order_no }}</text>
|
||||
<view @tap="copyUrl(goodsData.order_no)">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="orderData-cont-label">
|
||||
<image class="orderData-cont-img" src="/static/icons/orderIcon_00.png" mode="aspectFill"></image>
|
||||
<view class="orderData-cont-text" v-if="goodsData.express">
|
||||
<view class="orderData-cont-name">{{ goodsData.express.name }} <text>{{ goodsData.express.mobile }}</text></view>
|
||||
<view class="orderData-cont-copy">
|
||||
{{ goodsData.express.full_address }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="While orderGoods">
|
||||
<view class="orderGoods-wares" v-for="(item, index) in goodsData.items" :key="index">
|
||||
<image class="orderGoods-img" :src="item.sku.cover" mode="aspectFill"></image>
|
||||
<view class="orderGoods-cont">
|
||||
<view class="nowrap orderGoods-name">{{ item.sku.goods_name }}</view>
|
||||
<view class="orderGoods-price">
|
||||
<text>￥{{ item.sku.price }}</text>
|
||||
x{{ item.qty }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="orderGoods-brief">
|
||||
<view>商品总价</view>
|
||||
<text>￥{{ goodsData.amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="While reserveCont">
|
||||
<view class="reserveCont-title">订单信息</view>
|
||||
<view class="reserve-label">
|
||||
<view class="reserve-name">交易时间</view>
|
||||
<view class="reserve-text">{{ goodsData.created_at }}</view>
|
||||
</view>
|
||||
<view class="reserve-label">
|
||||
<view class="reserve-name">运费</view>
|
||||
<view class="reserve-text">{{ goodsData.freight == 0 ? '免邮' : goodsData.freight }}</view>
|
||||
</view>
|
||||
<view class="reserve-label">
|
||||
<view class="reserve-name">交易状态</view>
|
||||
<view class="reserve-text green">{{ goodsData.state }}</view>
|
||||
</view>
|
||||
<view class="reserve-label">
|
||||
<view class="reserve-name">实际金额</view>
|
||||
<view class="reserve-text reserve-price">￥{{ goodsData.total }}.00</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-data-footer">
|
||||
<view class="order-btn" open-type="navigateBack" @click="$Router.push({name: 'OrderIndex', params: { listType: $Route.query.listType}})">返回订单</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { goodsDet } from '@/apis/interfaces/user'
|
||||
import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy/junyi-h5-copy.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goodsData: '', //详情
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 商品详情
|
||||
this.goodsInfo();
|
||||
},
|
||||
methods: {
|
||||
// 获取商品详情
|
||||
goodsInfo() {
|
||||
goodsDet(this.$Route.query.orderNo).then(res => {
|
||||
this.goodsData = res
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 复制订单号
|
||||
copyUrl(val) {
|
||||
const result = h5Copy(val)
|
||||
if (result === false) {
|
||||
uni.showToast({
|
||||
title:'不支持',
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title:'复制成功',
|
||||
icon:'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.content{
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.While {
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||||
}
|
||||
|
||||
.orderData {
|
||||
border-bottom: 100rpx transparent solid;
|
||||
}
|
||||
|
||||
// 订单
|
||||
.orderData-cont-label {
|
||||
padding: 40rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border-bottom: #f2f2f2 2rpx solid;
|
||||
.orderData-cont-img {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.orderData-cont-text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 25rpx 30rpx 0 120rpx;
|
||||
box-sizing: border-box;
|
||||
.orderData-cont-name {
|
||||
margin-bottom: 10rpx;
|
||||
text {
|
||||
color: #999;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
.orderData-cont-copy {
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
text {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
view {
|
||||
color: #edb25f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 产品
|
||||
.orderGoods {
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
.orderGoods-wares {
|
||||
position: relative;
|
||||
margin-bottom: 10rpx;
|
||||
.orderGoods-img {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border: 2rpx solid #dddddd;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.orderGoods-cont {
|
||||
position: absolute;
|
||||
width: calc(100% - 130rpx);
|
||||
left: 130rpx;
|
||||
top: 0;
|
||||
.orderGoods-text {
|
||||
margin: 20rpx 0 30rpx;
|
||||
color: #666666;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.orderGoods-price {
|
||||
display: flex;
|
||||
color: #555555;
|
||||
margin-top: 15rpx;
|
||||
text {
|
||||
flex: 1;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.orderGoods-brief {
|
||||
display: flex;
|
||||
padding-top: 30rpx;
|
||||
view {
|
||||
flex: 1;
|
||||
color: #333333;
|
||||
}
|
||||
text {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 规格
|
||||
.reserveCont {
|
||||
.reserveCont-title {
|
||||
font-weight: 600;
|
||||
padding: 30rpx;
|
||||
}
|
||||
.reserve-label {
|
||||
display: flex;
|
||||
padding: 0 30rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
.reserve-name {
|
||||
flex: 1;
|
||||
width: 200rpx;
|
||||
margin-right: 20rpx;
|
||||
color: #7e7e7e;
|
||||
}
|
||||
.reserve-text {
|
||||
width: calc(100% - 240rpx);
|
||||
text-align: right;
|
||||
line-height: 50rpx;
|
||||
&.reserve-price {
|
||||
font-weight: 600;
|
||||
color: #6d79ec;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 底部菜单
|
||||
.order-data-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: solid 1rpx #f2f2f2;
|
||||
padding-top: 17rpx;
|
||||
padding-right: 30rpx;
|
||||
padding-left: 30rpx;
|
||||
height: 83rpx;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction:row-reverse;
|
||||
.order-btn{
|
||||
margin-left: 20rpx;
|
||||
height: 58rpx;
|
||||
line-height: 58rpx;
|
||||
box-sizing: border-box;
|
||||
border:solid 1rpx #747788;
|
||||
padding: 0 20rpx;
|
||||
font-size: 26rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
279
pages/order/index.vue
Normal file
279
pages/order/index.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="header">
|
||||
<view class="tabs">
|
||||
<view class="item" :class="{'show': listType == 'paid'}" @click="onTabs('paid')">待发货</view>
|
||||
<view class="item" :class="{'show': listType == 'delivered'}" @click="onTabs('delivered')">已发货</view>
|
||||
<view class="item" :class="{'show': listType == 'signed'}" @click="onTabs('signed')">已签收</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order" v-if="orderArr.length > 0">
|
||||
<view class="While order-list" v-for="(item, index) in orderArr" :key="index">
|
||||
<view class="order-top">
|
||||
<view class="order-top-number">{{ item.order_no }}</view>
|
||||
<view class="order-top-tips">{{ item.state }}</view>
|
||||
</view>
|
||||
<view class="order-name" v-for="(goodItem, index) in item.items" :key="index">
|
||||
<image class="order-img" :src="goodItem.sku.cover" mode="aspectFill"></image>
|
||||
<view class="order-goods">
|
||||
<view class="order-label">
|
||||
<view class="nowrap order-label-name">
|
||||
{{ goodItem.sku.goods_name }}
|
||||
</view>
|
||||
<view class="order-label-price">
|
||||
￥{{ goodItem.sku.price }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-specs">
|
||||
x{{ goodItem.qty }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-text">
|
||||
<view class="order-time">下单时间：{{ item.created_at }}</view>
|
||||
<view class="order-price">合计金额：<text class="red">￥{{ item.amount }}</text></view>
|
||||
</view>
|
||||
<view class="order-btn">
|
||||
<view class="order-btn-atn active" @click="orderSign(item.order_no)" v-if="item.can.sign == true">立即签收</view>
|
||||
<view class="order-btn-atn" @click="$Router.push({name: 'OrderDetails', params: { orderNo: item.order_no, listType: listType}})">订单详情</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pack-center pages-hint" v-else>
|
||||
<image src="/static/imgs/coupon_null.png"></image>
|
||||
<view>暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { orders, goodsSign } from '@/apis/interfaces/user'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
listType: 'paid',
|
||||
orderArr: [], //订单列表
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.listType = this.$Route.query.listType
|
||||
|
||||
// 获取省市区列表
|
||||
this.ordersInfo();
|
||||
},
|
||||
methods: {
|
||||
// 商品详情数据
|
||||
ordersInfo() {
|
||||
orders({
|
||||
state: this.listType
|
||||
}).then(res => {
|
||||
this.orderArr = res.data
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 状态筛选
|
||||
onTabs(val){
|
||||
if(this.listType === val) return
|
||||
this.listType = val
|
||||
|
||||
// 商品详情数据
|
||||
this.ordersInfo();
|
||||
},
|
||||
|
||||
// 立即签收
|
||||
orderSign(orderNo) {
|
||||
goodsSign(orderNo).then(res => {
|
||||
uni.showToast({
|
||||
title: '签收成功',
|
||||
icon: "none"
|
||||
})
|
||||
setTimeout(()=>{
|
||||
// 商品详情数据
|
||||
this.ordersInfo();
|
||||
},2000)
|
||||
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.content{
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.While {
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||||
}
|
||||
|
||||
.order {
|
||||
margin-top: 90rpx;
|
||||
}
|
||||
|
||||
.order-top {
|
||||
line-height: 90rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
border-bottom: 2rpx #f2f2f2 solid;
|
||||
.order-top-number {
|
||||
flex: 1;
|
||||
}
|
||||
.order-top-tips {
|
||||
font-size: 26rpx;
|
||||
color: #edb25f;
|
||||
}
|
||||
}
|
||||
|
||||
.order-name {
|
||||
padding: 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.order-img {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.order-goods {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 20rpx 20rpx 20rpx 110rpx;
|
||||
box-sizing: border-box;
|
||||
.order-label {
|
||||
display: flex;
|
||||
font-size: 30rpx;
|
||||
margin-bottom: 15rpx;
|
||||
.order-label-name {
|
||||
flex: 1;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.order-label-price {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.order-specs {
|
||||
font-size: 24rpx;
|
||||
color: #919191;
|
||||
display: flex;
|
||||
text {
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-text {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
display: flex;
|
||||
padding-bottom: 20rpx;
|
||||
border-top: 2rpx solid #f2f2f2;
|
||||
border-bottom: 2rpx solid #f2f2f2;
|
||||
padding-top: 20rpx;
|
||||
.order-time {
|
||||
color: #919191;
|
||||
font-size: 26rpx;
|
||||
flex: 1;
|
||||
}
|
||||
.order-price {
|
||||
text {
|
||||
font-weight: 600;
|
||||
color: #6d79ec;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
text-align: right;
|
||||
padding: 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.order-btn-atn {
|
||||
border: 2rpx solid #f2f2f2;
|
||||
border-radius: 40rpx;
|
||||
padding: 0 30rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
color: #767676;
|
||||
display: inline-block;
|
||||
margin-left: 15rpx;
|
||||
font-size: 24rpx;
|
||||
&.active {
|
||||
color: #6d79ec;
|
||||
border-color: #bfc5ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tabs
|
||||
.header{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
.tabs{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: white;
|
||||
padding: 15rpx 0;
|
||||
font-size: $title-size-lg;
|
||||
color: $text-gray;
|
||||
.item{
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
&.show{
|
||||
color: #6d79ec;
|
||||
border-bottom: solid 4rpx #6d79ec;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 类型
|
||||
.tabs-type{
|
||||
display: flex;
|
||||
padding: 20rpx 30rpx;
|
||||
background: white;
|
||||
.item{
|
||||
font-size: $title-size-sm;
|
||||
height: 46rpx;
|
||||
line-height: 46rpx;
|
||||
border-radius: 23rpx;
|
||||
padding: 0 ($padding - 10);
|
||||
background: white;
|
||||
margin-right: $margin/2;
|
||||
color: $text-gray;
|
||||
&.show{
|
||||
background-color:#6d79ec;
|
||||
color: #6d79ec;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
419
pages/purine/details.vue
Normal file
419
pages/purine/details.vue
Normal file
@@ -0,0 +1,419 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="While foods">
|
||||
<image class="foods-img" :src="foodData.cover" mode="aspectFill"></image>
|
||||
<view class="foods-cont">
|
||||
<view class="foods-name">
|
||||
{{ foodData.name }}
|
||||
</view>
|
||||
<view class="foods-text">
|
||||
{{ foodData.explain }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="While levels">
|
||||
<view class="levels-name">
|
||||
嘌呤含量
|
||||
</view>
|
||||
<view class="levels-tips">
|
||||
<view class="levels-number">
|
||||
{{ foodData.number }}
|
||||
</view>
|
||||
<view class="levels-text">
|
||||
<view class="levels-unit">毫克</view>
|
||||
<view class="levels-usable">每100克（可食部分）</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line">
|
||||
<view class="line-label" :class="{active : orderId == item.order}" v-for="(item, index) in count.options" :key="index">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<block v-if="orderId == 1">( 该食物可放心食用 )</block>
|
||||
<block v-else-if="orderId == 2">( 该食物可少量食用 )</block>
|
||||
<block v-else>( 该食物谨慎食用 )</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="While vote">
|
||||
<view class="vote-title">
|
||||
<text>一共有{{ count.vote_users }}位痛友参与投票</text>
|
||||
每个人体质不同，食物对身体的影响也会有差异！
|
||||
</view>
|
||||
<view class="vote-number">
|
||||
<view class="vote-label" v-for="(item, index) in count.options" :key="index">
|
||||
<view class="vote-number-ticket">{{ item.count }}</view>
|
||||
<view class="vote-number-name">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="vote-assess">
|
||||
你吃了吗怎么样？
|
||||
</view>
|
||||
<view class="vote-btn">
|
||||
<view class="vote-btn-label" :class="{active : item.is_my_vote}" v-for="(item, index) in count.options" :key="index" @click="voteClick(item.id)">
|
||||
<image v-if="item.order == 1" class="vote-label-icon" src="/static/icons/lookIcon_00.png" mode=""></image>
|
||||
<image v-else-if="item.order == 2" class="vote-label-icon" src="/static/icons/lookIcon_01.png" mode=""></image>
|
||||
<image v-else class="vote-label-icon" src="/static/icons/lookIcon_02.png" mode=""></image>
|
||||
<view class="vote-label-name">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="While other">
|
||||
<view class="other-title">
|
||||
其他营养含量
|
||||
</view>
|
||||
<view class="other-list" v-if="foodData.pabulum">
|
||||
<view class="other-label">
|
||||
<view class="other-name">
|
||||
脂肪
|
||||
</view>
|
||||
<view class="other-number">
|
||||
{{ foodData.pabulum.fat ? foodData.pabulum.fat : 0 }}g
|
||||
</view>
|
||||
</view>
|
||||
<view class="other-label">
|
||||
<view class="other-name">
|
||||
碳水
|
||||
</view>
|
||||
<view class="other-number">
|
||||
{{ foodData.pabulum.carbohydrate ? foodData.pabulum.carbohydrate : 0 }}g
|
||||
</view>
|
||||
</view>
|
||||
<view class="other-label">
|
||||
<view class="other-name">
|
||||
蛋白质
|
||||
</view>
|
||||
<view class="other-number">
|
||||
{{ foodData.pabulum.protein ? foodData.pabulum.protein : 0 }}g
|
||||
</view>
|
||||
</view>
|
||||
<view class="other-label">
|
||||
<view class="other-name">
|
||||
纤维素
|
||||
</view>
|
||||
<view class="other-number">
|
||||
{{ foodData.pabulum.cellulose ? foodData.pabulum.cellulose : 0 }}g
|
||||
</view>
|
||||
</view>
|
||||
<view class="other-label">
|
||||
<view class="other-name">
|
||||
热量
|
||||
</view>
|
||||
<view class="other-number">
|
||||
{{ foodData.pabulum.calories ? foodData.pabulum.calories : 0 }}kcal
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="While other">
|
||||
<view class="other-title">
|
||||
食物评价
|
||||
</view>
|
||||
<view class="evaluate">
|
||||
{{ foodData.description }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="While other">
|
||||
<view class="other-title">
|
||||
痛风患者怎么吃
|
||||
</view>
|
||||
<view class="evaluate">
|
||||
{{ foodData.remark }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { foodDet, foodVote } from '@/apis/interfaces/gout'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
foodData: '', //食物数据
|
||||
count : '',
|
||||
orderId : '', //评价id
|
||||
canVote : '', //是否投票
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 获取食物详情
|
||||
this.foodInfo();
|
||||
},
|
||||
methods: {
|
||||
// 食物详情
|
||||
foodInfo() {
|
||||
foodDet(this.$Route.query.id).then(res => {
|
||||
this.foodData = res
|
||||
this.count = res.count
|
||||
this.orderId = res.count.grade
|
||||
this.canVote = res.can.vote
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 投票
|
||||
voteClick(id) {
|
||||
if(this.$store.getters.getToken) {
|
||||
if(!this.canVote) {
|
||||
uni.showToast({
|
||||
title: '您已经投过票了',
|
||||
icon: "none"
|
||||
})
|
||||
return
|
||||
}
|
||||
// 进行投票
|
||||
foodVote(this.$Route.query.id, id).then(res => {
|
||||
uni.showToast({
|
||||
title: res,
|
||||
icon: "none"
|
||||
})
|
||||
|
||||
// 获取食物详情
|
||||
this.foodInfo();
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
|
||||
return
|
||||
}
|
||||
this.$Router.push({ name: 'Login' });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.While {
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding:30rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||||
}
|
||||
|
||||
// 食物
|
||||
.foods {
|
||||
position: relative;
|
||||
.foods-img {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.foods-cont {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 30rpx 30rpx 30rpx 150rpx;
|
||||
box-sizing: border-box;
|
||||
.foods-name {
|
||||
font-weight: 600;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.foods-text {
|
||||
font-size: 26rpx;
|
||||
color: #919191;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 含量
|
||||
.levels {
|
||||
.levels-name {
|
||||
font-size: 28rpx;
|
||||
color: #919191;
|
||||
text-align: center;
|
||||
}
|
||||
.levels-tips {
|
||||
background: linear-gradient(to left, #6d79ec, #8591ff);
|
||||
color: #FFFFFF;
|
||||
padding: 20rpx 20rpx 20rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
margin: 30rpx 100rpx;
|
||||
display: flex;
|
||||
.levels-number {
|
||||
font-size: 60rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.levels-text {
|
||||
font-size: 26rpx;
|
||||
padding-top: 8rpx;
|
||||
.levels-usable {
|
||||
font-size: 24rpx;
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.line {
|
||||
display: flex;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
.line-label {
|
||||
flex: 3;
|
||||
margin: 0 5rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding-bottom: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #919191;
|
||||
&::after,
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
}
|
||||
&::after {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
height: 6rpx;
|
||||
}
|
||||
&::before {
|
||||
left: calc(50% - 8rpx);
|
||||
bottom: -6rpx;
|
||||
z-index: 9;
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: #fff9ee;
|
||||
border-style: solid;
|
||||
border-width: 6rpx;
|
||||
display: none;
|
||||
}
|
||||
&.active::before {
|
||||
display: block;
|
||||
}
|
||||
&:nth-child(1)::after {
|
||||
background: #5dcd7b;
|
||||
}
|
||||
&:nth-child(2)::after {
|
||||
background: #e9ce49;
|
||||
}
|
||||
&:nth-child(3)::after {
|
||||
background: #f58054;
|
||||
}
|
||||
&:nth-child(1)::before {
|
||||
border-color: #5dcd7b;
|
||||
}
|
||||
&:nth-child(2)::before {
|
||||
border-color: #e9ce49;
|
||||
}
|
||||
&:nth-child(3)::before {
|
||||
border-color: #f58054;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
text-align: center;
|
||||
padding-top: 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #919191;
|
||||
}
|
||||
}
|
||||
|
||||
// 投票
|
||||
.vote {
|
||||
.vote-title {
|
||||
font-size: 26rpx;
|
||||
color: #919191;
|
||||
text {
|
||||
color: #000000;
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
.vote-number {
|
||||
display: flex;
|
||||
margin: 40rpx 0;
|
||||
.vote-label {
|
||||
flex: 3;
|
||||
text-align: center;
|
||||
.vote-number-ticket {
|
||||
color: #6d79ec;
|
||||
font-weight: 600;
|
||||
}
|
||||
.vote-number-name {
|
||||
font-size: 28rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vote-assess {
|
||||
margin-bottom: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vote-btn {
|
||||
display: flex;
|
||||
.vote-btn-label {
|
||||
flex: 3;
|
||||
margin: 0 10rpx;
|
||||
background-color: #f3f4f6;
|
||||
color: #262729;
|
||||
border-radius: 30rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
.vote-label-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin: 10rpx 15rpx 0 20rpx;
|
||||
}
|
||||
&.active {
|
||||
background-color: #a2aaff;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 其他含量
|
||||
.other {
|
||||
.other-title {
|
||||
margin-bottom: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.other-list {
|
||||
display: flex;
|
||||
.other-label {
|
||||
flex: 5;
|
||||
text-align: center;
|
||||
width: 20%;
|
||||
font-size: 26rpx;
|
||||
.other-number {
|
||||
font-size: 24rpx;
|
||||
color: #919191;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 食物评价
|
||||
.evaluate {
|
||||
line-height: 42rpx;
|
||||
color: #585858;
|
||||
font-size: 26rpx;
|
||||
271
pages/purine/index.vue
Normal file
271
pages/purine/index.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="equityTop">
|
||||
<view class="equityTool">
|
||||
<view class="search">
|
||||
<image class="search-img" src="/static/icons/purineSearch.png" mode="aspectFill"></image>
|
||||
<input class="search-input" type="text" placeholder="食物嘌呤查询" @input="searchSitle" />
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="equityTab">
|
||||
<view class="item-box" :class="{active : categoryId == item.category_id}" v-for="(item, index) in sortArr" :key="index" @click="sortClick(item.category_id)">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="contentList">
|
||||
<view class="List" v-if="foodsArr.length > 0">
|
||||
<view class="List-label" @click="$Router.push({name: 'purineDetails', params: { id: item.food_id }})" v-for="(item, index) in foodsArr" :key="index">
|
||||
<image class="List-img" :src="item.cover" mode="aspectFill"></image>
|
||||
<view class="List-cont">
|
||||
<view class="List-top">
|
||||
<view class="nowrap List-top-name">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="List-top-tips">
|
||||
{{ item.count.votes }}人投票
|
||||
</view>
|
||||
</view>
|
||||
<view class="List-text">
|
||||
{{ item.explain }}
|
||||
</view>
|
||||
<view class="List-levels">
|
||||
嘌呤：{{ item.number }}mg/100g
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pagesLoding" v-if="lodingStats">
|
||||
<block v-if="page.has_more">
|
||||
<image class="pagesLodingIcon" src="/static/icons/refresh_loding.gif" mode="widthFix"></image>加载中...
|
||||
</block>
|
||||
<block v-else>
|
||||
没有更多了~
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pack-center pages-hint" v-else>
|
||||
<image src="/static/imgs/coupon_null.png"></image>
|
||||
<view>暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { foodList } from '@/apis/interfaces/gout'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
foodsArr : [], //实物列表
|
||||
sortArr : [], //分类
|
||||
categoryId : '',
|
||||
title : '',
|
||||
page : {}, //分页信息
|
||||
lodingStats : false //加载状态
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 获取食物数据
|
||||
this.lastInfo();
|
||||
},
|
||||
methods: {
|
||||
// 食物数据
|
||||
lastInfo(page) {
|
||||
foodList({
|
||||
title: this.title,
|
||||
category_id: this.categoryId,
|
||||
page : page || ''
|
||||
}).then(res => {
|
||||
let listArr = this.foodsArr,
|
||||
newData = []
|
||||
if(page == 1 || page == undefined) listArr = []
|
||||
newData = listArr.concat(res.foods.data)
|
||||
this.sortArr = res.categories
|
||||
this.categoryId = res.category.category_id
|
||||
this.foodsArr = newData
|
||||
this.page = res.foods.page
|
||||
this.lodingStats= false
|
||||
uni.stopPullDownRefresh()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 选择分类
|
||||
sortClick(id) {
|
||||
this.categoryId = id
|
||||
// 获取食物数据
|
||||
this.lastInfo();
|
||||
},
|
||||
|
||||
// 输入关键字
|
||||
searchSitle(name) {
|
||||
this.title = name.detail.value
|
||||
// 获取食物数据
|
||||
this.lastInfo();
|
||||
},
|
||||
|
||||
// 页面相关事件处理函数--监听用户下拉动作
|
||||
onPullDownRefresh() {
|
||||
// 商品列表数据
|
||||
this.lastInfo();
|
||||
},
|
||||
|
||||
// 上拉加载
|
||||
onReachBottom(){
|
||||
this.lodingStats = true
|
||||
let pageNumber = this.page.current
|
||||
if(this.page.has_more){
|
||||
pageNumber++
|
||||
// 商品列表数据
|
||||
this.lastInfo(pageNumber);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.equityTop {
|
||||
background-color: #FFFFFF;
|
||||
height: 220rpx;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
.equityTool {
|
||||
position: relative;
|
||||
height: 68rpx;
|
||||
line-height: 68rpx;
|
||||
display: flex;
|
||||
.search {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
border-radius:60rpx;
|
||||
background-color: #f8f8f8;
|
||||
margin-right: 40rpx;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
.search-input {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.search-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin: 16rpx 15rpx 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.moreBtn {
|
||||
display: flex;
|
||||
.moreBtn-img {
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
margin-top: 10rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.equityTab {
|
||||
white-space:nowrap;
|
||||
margin-top: 20rpx;
|
||||
.item-box{
|
||||
display: inline-block;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
margin-right: 40rpx;
|
||||
font-size: 30rpx;
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: calc(50% - 20rpx);
|
||||
bottom: 0;
|
||||
background-color: #FFFFFF;
|
||||
width: 40rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
&.active::after {
|
||||
background-color: #6e79ec;
|
||||
}
|
||||
&.active {
|
||||
color: #6e79ec;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contentList {
|
||||
margin-top: 220rpx;
|
||||
padding: 30rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.List {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||||
.List-label {
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.List-img {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.List-cont {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 20rpx 20rpx 20rpx 180rpx;
|
||||
box-sizing: border-box;
|
||||
.List-top {
|
||||
display: flex;
|
||||
line-height: 40rpx;
|
||||
.List-top-name {
|
||||
flex: 1;
|
||||
margin-right: 20rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.List-top-tips {
|
||||
display: inline-block;
|
||||
background-color: #f1f3ff;
|
||||
color: #6d79ec;
|
||||
font-size: 24rpx;
|
||||
border-radius: 6rpx;
|
||||
height: 40rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
.List-text {
|
||||
font-size: 24rpx;
|
||||
padding: 10rpx 0 20rpx;
|
||||
color: #919191;
|
||||
}
|
||||
.List-levels {
|
||||
font-size: 26rpx;
|
||||
color: #54975e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
88
pages/receive/index.vue
Normal file
88
pages/receive/index.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="While title">
|
||||
{{ detailsData.title }}
|
||||
<view class="time">
|
||||
<view class="time-number">{{ detailsData.created_at }}</view>
|
||||
游览数：{{ detailsData.clicks }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="While article">
|
||||
<rich-text :nodes="contentData"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
artiicle
|
||||
} from '@/apis/interfaces/mall'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
detailsData : '', //文章数据信息
|
||||
contentData : '', //文章内容
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// 获取商品详情数据
|
||||
this.detailsInfo();
|
||||
},
|
||||
methods: {
|
||||
// 商品详情数据
|
||||
detailsInfo() {
|
||||
artiicle(this.$Route.query.id).then(res => {
|
||||
this.detailsData = res
|
||||
this.contentData = res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 新增尿酸弹出
|
||||
popClick() {
|
||||
this.popShow = !this.popShow
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content{
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.While {
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding:30rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
line-height: 52rpx;
|
||||
font-size: 34rpx;
|
||||
.time {
|
||||
font-weight: normal;
|
||||
font-size: 28rpx;
|
||||
color: #919191;
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
.time-number {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.article {
|
||||
line-height: 52rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
</style>
|
||||
378
pages/uricacid/index.vue
Normal file
378
pages/uricacid/index.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="While">
|
||||
<view class="top">
|
||||
<view class="top-time">
|
||||
{{ lastData.log ? lastData.log.created_at : '您还没有上传过尿酸值' }}
|
||||
</view>
|
||||
<view v-if="lastData.log" class="top-record" @click="$Router.push({name: 'uricacidList', params: {id: lastData.caseId}})">
|
||||
所有记录
|
||||
</view>
|
||||
</view>
|
||||
<view class="uricacid">
|
||||
<view class="uricacid-number">
|
||||
<block v-if="lastData.log">
|
||||
<text>{{ lastData.log.quantity }}</text>umol
|
||||
</block>
|
||||
<block v-else>
|
||||
<text>暂无数据</text>
|
||||
</block>
|
||||
</view>
|
||||
<view class="uricacid-tips">
|
||||
<text>男性尿酸指标 {{ lastData.Newscope.man }}</text>
|
||||
<text>女性尿酸指标 {{ lastData.Newscope.woman }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="While analyse">
|
||||
<view class="analyse-title">
|
||||
尿酸趋势分析
|
||||
</view>
|
||||
<view class="analyse-text" v-if="lastData.log">
|
||||
当前尿酸值为{{ lastData.log.quantity }}umol,
|
||||
<block v-if="lastData.Newscope.scope">
|
||||
{{ lastData.log.quantity > lastData.Newscope.scope.max ? '高于' : '低于' }}{{ lastData.Newscope.scope.max }}umol
|
||||
{{ lastData.log.quantity > lastData.Newscope.scope.max ? '您的尿酸水平偏高，根据治疗指南需要进行治疗干预。需要生活控制（多喝水，饮食控制、并发症危险因素的控制、碱化尿液），配合药物治疗。具体情况请遵循医嘱。' : '您的尿酸水平控制很棒，请继续保持' }}
|
||||
</block>
|
||||
</view>
|
||||
<view class="analyse-text" v-else>
|
||||
暂无分析数据
|
||||
</view>
|
||||
<view class="analyse-btn" @click="recordClick">
|
||||
记录尿酸值
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 记录尿酸值弹出 -->
|
||||
<view class="recordBack" v-if="recordShow"></view>
|
||||
<view class="recordCont" v-if="recordShow">
|
||||
<form @submit="siteform">
|
||||
<view class="recordCont-title">
|
||||
<image @click="recordClick" class="recordCont-title-close" src="/static/icons/uricacidClose.png" mode="aspectFill"></image>
|
||||
<view class="recordCont-title-text">
|
||||
新增尿酸记录
|
||||
</view>
|
||||
<view class="recordCont-title-btn">
|
||||
<button form-type="submit">完成</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="recordCont-form">
|
||||
<view class="site-input">
|
||||
<label>请输入尿酸值</label>
|
||||
<view class="recordCont-title-input">
|
||||
<input placeholder="请输入" name="quantity" type="digit"></input>
|
||||
<text>umol</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="site-remarks">
|
||||
<textarea name="remark" placeholder="请输入备注信息" maxlength="30" />
|
||||
<text>最大限制30字</text>
|
||||
</view>
|
||||
<view class="site-data">
|
||||
<label>尿酸记录日期</label>
|
||||
<view class="site-data-text">
|
||||
<picker mode="date" :value="date" @change="bindDateChange">
|
||||
<view class="uni-input">{{date}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="site-photo">
|
||||
<label>上传图片（选填）</label>
|
||||
<view class="issueNew-photo">
|
||||
<image @click="updImg()" class="issueNew-icon" :src="cover.showpath || '/static/imgs/cover_img.png'" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { lastLog, AddlastLog } from '@/apis/interfaces/gout'
|
||||
import { uploads } from '@/apis/interfaces/uploading'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lastData : {
|
||||
Newscope : '',
|
||||
log : '',
|
||||
caseId : ''
|
||||
}, //尿酸数据
|
||||
date : '请选择日期',
|
||||
recordShow : false,
|
||||
cover : {
|
||||
showpath: '',
|
||||
path : ''
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 获取尿酸数据
|
||||
this.lastInfo();
|
||||
},
|
||||
methods: {
|
||||
// 尿酸数据
|
||||
lastInfo() {
|
||||
lastLog().then(res => {
|
||||
this.lastData.Newscope = res.scope
|
||||
this.lastData.log = res.log
|
||||
this.lastData.caseId = res.case.gout_case_id
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 选择日期
|
||||
bindDateChange(e) {
|
||||
this.date = e.target.value
|
||||
},
|
||||
|
||||
// 新增尿酸弹出
|
||||
recordClick() {
|
||||
this.recordShow = !this.recordShow
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
updImg(type){
|
||||
uni.chooseImage({
|
||||
count : 1,
|
||||
success : path => {
|
||||
uploads([{
|
||||
uri : path.tempFilePaths[0]
|
||||
}]).then(res => {
|
||||
this.cover = {
|
||||
showpath: res.url[0],
|
||||
path: res.path[0]
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 提交表单
|
||||
siteform(e) {
|
||||
let newQuantity = e.detail.value.quantity,
|
||||
newRemark = e.detail.value.remark,
|
||||
newChecked = this.date,
|
||||
newCover = this.cover.path
|
||||
AddlastLog(this.lastData.caseId, {
|
||||
quantity : newQuantity,
|
||||
remark : newRemark,
|
||||
checked_at : newChecked,
|
||||
cover : newCover
|
||||
}).then(res => {
|
||||
this.recordShow = false
|
||||
this.cover = ''
|
||||
// 获取尿酸数据
|
||||
this.lastInfo();
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.While {
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding:30rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||||
}
|
||||
|
||||
.top {
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
.top-time {
|
||||
color: #919191;
|
||||
flex: 1;
|
||||
}
|
||||
.top-record {
|
||||
color: #54975e;
|
||||
}
|
||||
}
|
||||
.uricacid {
|
||||
padding: 40rpx 0 20rpx;
|
||||
.uricacid-number {
|
||||
text-align: center;
|
||||
color: #919191;
|
||||
text {
|
||||
color: #000000;
|
||||
font-size: 58rpx;
|
||||
font-weight: 600;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.uricacid-tips {
|
||||
margin-top: 30rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
text {
|
||||
padding: 0 15rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.analyse {
|
||||
.analyse-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.analyse-text {
|
||||
line-height: 42rpx;
|
||||
color: #585858;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.analyse-btn {
|
||||
background-color: #6e79ec;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
border-radius: 80rpx;
|
||||
line-height: 84rpx;
|
||||
margin: 80rpx 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 弹出
|
||||
.recordBack {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba($color: #000000, $alpha: .4);
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
.recordCont {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 100;
|
||||
overflow-y: scroll;
|
||||
height: 60vh;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
.recordCont-title {
|
||||
border-bottom: 2rpx solid #F2F2F2;
|
||||
padding-bottom: 30rpx;
|
||||
display: flex;
|
||||
line-height: 54rpx;
|
||||
position: relative;
|
||||
.recordCont-title-close {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-top: 7rpx;
|
||||
}
|
||||
.recordCont-title-text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.recordCont-title-btn button {
|
||||
background-color: #6e79ec;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.recordCont-form {
|
||||
margin-top: 30rpx;
|
||||
.site-input {
|
||||
margin-bottom: 30rpx;
|
||||
label {
|
||||
margin-bottom: 20rpx;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
.recordCont-title-input {
|
||||
display: flex;
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
text {
|
||||
color: #adadad;
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-photo {
|
||||
display: flex;
|
||||
label {
|
||||
flex: 1;
|
||||
margin-top: 10rpx;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
.issueNew-photo{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
.issueNew-icon{
|
||||
width: 100%;
|
||||
height: 100%;;
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-remarks {
|
||||
background-color: #F2F2F2;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
}
|
||||
text {
|
||||
text-align: right;
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #54975e;
|
||||
}
|
||||
}
|
||||
.site-data {
|
||||
margin: 40rpx 0;
|
||||
display: flex;
|
||||
label {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
349
pages/uricacid/list.vue
Normal file
349
pages/uricacid/list.vue
Normal file
@@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<block v-if="LogArr.length > 0">
|
||||
<view class="While list">
|
||||
<view class="list-label" v-for="(item, index) in LogArr" :key="index" @click="showSee(item.gout_case_log_id)">
|
||||
<view class="list-title">
|
||||
<view class="list-regular">
|
||||
<text>{{ item.quantity }}</text> umol
|
||||
</view>
|
||||
<view class="list-rise" :class="{active : item.diff.symbol == '+'}">
|
||||
<text>{{ item.diff.symbol == '+' ? '上升' : '下降'}}</text> {{ item.diff.value }}umol
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-text">
|
||||
{{ item.remark }}
|
||||
</view>
|
||||
<view class="list-text">
|
||||
记录时间：{{ item.created_at }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="pagesLoding" v-if="lodingStats">
|
||||
<block v-if="page.has_more">
|
||||
<image class="pagesLodingIcon" src="/static/icons/refresh_loding.gif" mode="widthFix"></image>加载中...
|
||||
</block>
|
||||
<block v-else>
|
||||
没有更多了~
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="pack-center pages-hint" v-else>
|
||||
<image src="/static/imgs/coupon_null.png"></image>
|
||||
<view>暂无数据</view>
|
||||
</view>
|
||||
|
||||
<!-- 记录尿酸值弹出 -->
|
||||
<view class="recordBack" v-if="recordShow"></view>
|
||||
<view class="recordCont" v-if="recordShow">
|
||||
<view class="recordCont-title">
|
||||
<image @click="recordClick" class="recordCont-title-close" src="/static/icons/uricacidClose.png" mode="aspectFill"></image>
|
||||
<view class="recordCont-title-text">
|
||||
尿酸详情
|
||||
</view>
|
||||
<view class="recordCont-title-btn">
|
||||
<view @click="delLogs">删除记录</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="recordCont-form">
|
||||
<view class="site-input">
|
||||
<label>尿酸值</label>
|
||||
<view class="recordCont-title-input">
|
||||
{{ LogInfo.quantity }}<text>umol</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="site-input">
|
||||
<label>备注描述</label>
|
||||
<view class="site-remarks">
|
||||
{{ LogInfo.remark }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="site-data">
|
||||
<label>尿酸记录日期</label>
|
||||
<view class="site-data-text">
|
||||
{{ LogInfo.created_at }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="site-input" v-if="LogInfo.cover">
|
||||
<label>图片信息</label>
|
||||
<image class="issueNew-icon" @click="openImg(LogInfo.cover)" :src="LogInfo.cover" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ListLog, DetLog, DelLog } from '@/apis/interfaces/gout'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
LogArr : [], //记录列表
|
||||
LogInfo : '', //记录详情
|
||||
LogId : '', //记录id
|
||||
recordShow : false,
|
||||
page : {}, //分页信息
|
||||
lodingStats : false //加载状态
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 获取尿酸记录列表
|
||||
this.lastInfo();
|
||||
},
|
||||
methods: {
|
||||
// 尿酸数据
|
||||
lastInfo(page) {
|
||||
ListLog(this.$Route.query.id,{
|
||||
page : page || ''
|
||||
}).then(res => {
|
||||
let listArr = this.LogArr,
|
||||
newData = []
|
||||
if(page == 1 || page == undefined) listArr = []
|
||||
newData = listArr.concat(res.data)
|
||||
this.LogArr = newData
|
||||
this.page = res.page
|
||||
this.lodingStats= false
|
||||
uni.stopPullDownRefresh()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 查看详情
|
||||
showSee(val) {
|
||||
// 获取详情
|
||||
this.lastDet(val);
|
||||
this.recordShow = true
|
||||
},
|
||||
|
||||
// 尿酸列表-详情
|
||||
lastDet(id) {
|
||||
DetLog(id).then(res => {
|
||||
this.LogInfo = res
|
||||
this.LogId = id
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 新增尿酸弹出
|
||||
recordClick() {
|
||||
this.recordShow = !this.recordShow
|
||||
},
|
||||
|
||||
// 删除记录
|
||||
delLogs() {
|
||||
DelLog(this.LogId).then(res => {
|
||||
// 获取尿酸记录列表
|
||||
this.lastInfo();
|
||||
|
||||
this.recordShow = false
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 查看图片
|
||||
openImg(img) {
|
||||
uni.previewImage({
|
||||
current: img,
|
||||
urls:[img]
|
||||
})
|
||||
},
|
||||
|
||||
// 页面相关事件处理函数--监听用户下拉动作
|
||||
onPullDownRefresh() {
|
||||
// 商品列表数据
|
||||
this.lastInfo();
|
||||
},
|
||||
|
||||
// 上拉加载
|
||||
onReachBottom(){
|
||||
this.lodingStats = true
|
||||
let pageNumber = this.page.current
|
||||
if(this.page.has_more){
|
||||
pageNumber++
|
||||
// 商品列表数据
|
||||
this.lastInfo(pageNumber);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.While {
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding:30rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||||
}
|
||||
|
||||
.list {
|
||||
border-radius: 10rpx;
|
||||
margin: 30rpx;
|
||||
.list-label {
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: 2rpx solid #f4f4f4;
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
}
|
||||
.list-title {
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
line-height: 54rpx;
|
||||
.list-regular {
|
||||
margin-right: 40rpx;
|
||||
text {
|
||||
color: #6d79ec;
|
||||
font-weight: 600;
|
||||
font-size: 44rpx;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.list-rise {
|
||||
margin-right: 20rpx;
|
||||
color: #919191;
|
||||
text {
|
||||
font-weight: 600;
|
||||
color: #54975e;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
&.active {
|
||||
text {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-text {
|
||||
margin-top: 20rpx;
|
||||
color: #919191;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 弹出
|
||||
.recordBack {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba($color: #000000, $alpha: .4);
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
.recordCont {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 100;
|
||||
overflow-y: scroll;
|
||||
height: 70vh;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
.recordCont-title {
|
||||
border-bottom: 2rpx solid #F2F2F2;
|
||||
padding-bottom: 30rpx;
|
||||
display: flex;
|
||||
line-height: 54rpx;
|
||||
position: relative;
|
||||
.recordCont-title-close {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-top: 7rpx;
|
||||
}
|
||||
.recordCont-title-text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.recordCont-title-btn view {
|
||||
background-color: red;
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.recordCont-form {
|
||||
margin-top: 30rpx;
|
||||
.site-input {
|
||||
margin-bottom: 30rpx;
|
||||
label {
|
||||
margin-bottom: 20rpx;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
.recordCont-title-input {
|
||||
display: flex;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
line-height: 60rpx;
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
color: #adadad;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-remarks {
|
||||
background-color: #F2F2F2;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
}
|
||||
text {
|
||||
text-align: right;
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #54975e;
|
||||
}
|
||||
}
|
||||
.site-data {
|
||||
margin: 40rpx 0;
|
||||
display: flex;
|
||||
label {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.issueNew-icon{
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
</style>
|
||||
195
pages/user/code.vue
Normal file
195
pages/user/code.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="While">
|
||||
<view class="codeUser" v-if="inviteData.user_info">
|
||||
<image class="codeUser-img" :src="inviteData.user_info.avatar || '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
|
||||
<view class="codeUser-name">{{ inviteData.user_info.nickname }}</view>
|
||||
</view>
|
||||
<view class="codeImg">
|
||||
<image class="codeUser-img" :src="inviteData.code" mode="aspectFill"></image>
|
||||
<view class="codeUser-text">
|
||||
扫描二维码,注册成功后,即可绑定关系
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="While down">
|
||||
长按保存我的推广码
|
||||
</view>
|
||||
<!-- 海报canvas -->
|
||||
<canvas class="canvasImg" canvas-id="qrcodeCard"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { invite } from '@/apis/interfaces/user'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
inviteData: ''
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
// 获取推广码
|
||||
this.inviteInfo();
|
||||
},
|
||||
methods: {
|
||||
// 推广码
|
||||
inviteInfo() {
|
||||
invite().then(res => {
|
||||
this.inviteData = res
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 查看图片
|
||||
openImg(img) {
|
||||
uni.previewImage({
|
||||
current: img,
|
||||
urls:[img]
|
||||
})
|
||||
},
|
||||
|
||||
// 绘图
|
||||
dowCode(){
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
})
|
||||
|
||||
// 头像
|
||||
let avatarImg = new Promise(success=>{
|
||||
uni.getImageInfo({
|
||||
src : this.inviteData.user_info.avatar,
|
||||
success : res => {
|
||||
success(res.path)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 下载素材
|
||||
let codeImg = new Promise(success => {
|
||||
uni.getImageInfo({
|
||||
src : this.inviteData.code,
|
||||
success : res => {
|
||||
success(res.path)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
Promise.all([avatarImg, codeImg]).then(res => {
|
||||
// 绘制海报
|
||||
const ctx = uni.createCanvasContext('qrcodeCard')
|
||||
ctx.save()
|
||||
|
||||
// 绘制背景
|
||||
ctx.drawImage('/static/imgs/codeBack.png', 0, 0, 375, 452)
|
||||
|
||||
// 绘制头像
|
||||
ctx.drawImage(res[0], 155, 35, 70, 70)
|
||||
// 绘制二维码
|
||||
ctx.drawImage(res[1], 110, 200, 160, 160)
|
||||
// 文字
|
||||
ctx.setFontSize(16)
|
||||
ctx.setFillStyle("#FFFFFF")
|
||||
ctx.setTextAlign('center')
|
||||
ctx.fillText(this.inviteData.user_info.nickname, 190, 135 , 270)
|
||||
|
||||
// 文字
|
||||
ctx.setFontSize(15)
|
||||
ctx.setFillStyle("#919191")
|
||||
ctx.setTextAlign('center')
|
||||
ctx.fillText("扫描二维码,注册成功后,即可绑定关系",190, 400)
|
||||
|
||||
ctx.save();
|
||||
ctx.beginPath(); //开始绘制
|
||||
ctx.arc(70 / 2 + 156, 70 / 2 + 250, 70 / 2, 0, Math.PI * 2, false);
|
||||
ctx.clip();
|
||||
|
||||
// 保存图片
|
||||
ctx.draw(true, () => {
|
||||
uni.hideLoading()
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'qrcodeCard',
|
||||
x: 0,
|
||||
y: 0,
|
||||
success: res => {
|
||||
this.removeSaveImg()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}).catch(err=>{
|
||||
uni.showToast({
|
||||
title: '海报下载，请检查网络',
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content{
|
||||
overflow: hidden;
|
||||
background: #f3f4f6;
|
||||
padding: 140rpx 80rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.While {
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.codeUser {
|
||||
background-color: #6e79ec;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
padding: 50rpx 0;
|
||||
.codeUser-img {
|
||||
background-color: #FFFFFF;
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
.codeImg {
|
||||
padding: 60rpx 0;
|
||||
text-align: center;
|
||||
.codeUser-img {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
}
|
||||
.codeUser-text {
|
||||
padding: 0 100rpx;
|
||||
color: #919191;
|
||||
line-height: 48rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.down {
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
color: #54975e;
|
||||
}
|
||||
|
||||
/* canvas */
|
||||
.canvasImg {
|
||||
position: absolute;
|
||||
left: -1000%;
|
||||
bottom: 0;
|
||||
height: 452px;
|
||||
width: 375px;
|
||||
background: #fbf6f0;
|
||||
}
|
||||
</style>
|
||||
329
pages/user/index.vue
Normal file
329
pages/user/index.vue
Normal file
@@ -0,0 +1,329 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 会员信息 -->
|
||||
<view class="user">
|
||||
<image class="user-cover" src="/static/imgs/default_myHead.png" mode="aspectFill"></image>
|
||||
<block v-if="userLogin">
|
||||
<image class="user-cover" @click="updImg('license')" :src="avatar" mode="aspectFill"></image>
|
||||
<view class="user-nickname" @click="nameClick">{{ nickName ? nickName : '请登录' }}<image v-if="nickName" src="/static/icons/useredit_icon.png" mode=""></image></view>
|
||||
<view class="user-tags" v-if="userData.hasCase">
|
||||
<view class="user-tags-label" @click="$Router.push({name: 'Attestation', params: { hasCase: userData.hasCase }})">
|
||||
用户档案<image src="/static/icons/userForm_icon.png"></image>
|
||||
</view>
|
||||
<view class="user-tags-label" @click="$Router.push({name: 'UserCase'})">
|
||||
病例档案<image src="/static/icons/userForm_icon.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
暂未添加档案
|
||||
</view>
|
||||
</block>
|
||||
<view v-else @click="$Router.push({name: 'Login'})">
|
||||
<view class="user-login">请先登录</view>
|
||||
<!-- <image class="user-login-img" src="@/static/icons/userLogin_icon.png" mode="widthFix"></image> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- 订单 -->
|
||||
<view class="orders">
|
||||
<view class="title">我的订单<text @click="$Router.push({name: 'OrderIndex', params: { listType: 'paid' }})">全部订单</text></view>
|
||||
<view class="orders-flex">
|
||||
<!-- <view class="order-item">
|
||||
<image src="@/static/icons/order_01.png" mode="widthFix"></image>
|
||||
<view class="text-text">待付款</view>
|
||||
</view> -->
|
||||
<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'paid' }})">
|
||||
<image src="@/static/icons/order_02.png" mode="widthFix"></image>
|
||||
<view class="text-text">待发货</view>
|
||||
</view>
|
||||
<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'delivered' }})">
|
||||
<image src="@/static/icons/order_03.png" mode="widthFix"></image>
|
||||
<view class="text-text">已发货</view>
|
||||
</view>
|
||||
<view class="order-item" @click="$Router.push({name: 'OrderIndex', params: { listType: 'signed' }})">
|
||||
<image src="@/static/icons/order_04.png" mode="widthFix"></image>
|
||||
<view class="text-text">已签收</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="tools">
|
||||
<view class="tools-item" v-if="!userData.hasCase" @click="$Router.push({name: 'Attestation', params: { hasCase: userData.hasCase }})">添加档案<u-icon name="arrow-right" size="14" color="#9d9d9d"></u-icon></view>
|
||||
<view class="tools-item" @click="$Router.push({name: 'Friend'})">邀请记录<u-icon name="arrow-right" size="14" color="#9d9d9d"></u-icon></view>
|
||||
<view class="tools-item" @click="$Router.push({name: 'UserCode'})">邀请码<u-icon name="arrow-right" size="14" color="#9d9d9d"></u-icon></view>
|
||||
<view class="tools-item" v-if="userLogin" @click="outLogin">退出登录<u-icon name="arrow-right" size="14" color="#9d9d9d"></u-icon></view>
|
||||
</view>
|
||||
|
||||
<view class="nameBack" v-if="nameState"></view>
|
||||
<view class="namePop" v-if="nameState">
|
||||
<input type="text" class="namePop-input" placeholder="请输入新名字" @input="nameInput" />
|
||||
<view class="namePop-btn" @click="nameSubmit">确定</view>
|
||||
</view>
|
||||
<image v-if="nameState" class="nameClose" @click="nameClick" src="/static/icons/nameClose_icon.png" mode=""></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { userIndex, setting } from '@/apis/interfaces/user'
|
||||
import { uploads } from '@/apis/interfaces/uploading'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userData : '', //用户信息
|
||||
userLogin: '', //登录状态
|
||||
avatar : '', //头像
|
||||
nickName : '', //昵称
|
||||
nameState: false
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
if(this.$store.getters.getToken) {
|
||||
this.userLogin = true
|
||||
// 获取用户信息
|
||||
this.userInfo();
|
||||
}
|
||||
},
|
||||
|
||||
methods:{
|
||||
// 退出登录
|
||||
outLogin(){
|
||||
this.$store.commit('setToken', '')
|
||||
this.$Router.replaceAll({name: 'Index'})
|
||||
},
|
||||
|
||||
// 用户信息
|
||||
userInfo() {
|
||||
userIndex().then(res => {
|
||||
this.userData = res
|
||||
this.avatar = res.avatar
|
||||
this.nickName = res.nickname
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
updImg(type){
|
||||
uni.chooseImage({
|
||||
count : 1,
|
||||
success : path => {
|
||||
uploads([{
|
||||
uri : path.tempFilePaths[0]
|
||||
}]).then(res => {
|
||||
this.avatar = res.url[0]
|
||||
// 上传头像
|
||||
this.settingInfo('avatar', res.path[0]);
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 修改昵称弹出
|
||||
nameClick() {
|
||||
this.nameState = !this.nameState
|
||||
},
|
||||
|
||||
// 输入昵称
|
||||
nameInput(val) {
|
||||
this.nickName = val.detail.value
|
||||
},
|
||||
|
||||
// 修改提交
|
||||
nameSubmit() {
|
||||
// 上传头像
|
||||
this.settingInfo('nickname', this.nickName);
|
||||
},
|
||||
|
||||
// 上传用户信息
|
||||
settingInfo(key, value) {
|
||||
setting(key, {
|
||||
value: value
|
||||
}).then(res => {
|
||||
this.nameState = false
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
outLogin() {
|
||||
this.$store.commit('setToken', '')
|
||||
this.$Router.push({name: 'Index'})
|
||||
this.userLogin = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
min-height: 80vh;
|
||||
background: linear-gradient(to bottom, rgba($color: $mian-color, $alpha: .2), white);
|
||||
overflow: hidden;
|
||||
}
|
||||
// 用户信息
|
||||
.user{
|
||||
position: relative;
|
||||
margin: $margin + 20 $margin $margin + 20;
|
||||
padding-left: 140rpx;
|
||||
min-height: 118rpx;
|
||||
.user-nickname {
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 15rpx;
|
||||
display: flex;
|
||||
image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin: 10rpx 15rpx;
|
||||
}
|
||||
}
|
||||
.user-tags {
|
||||
display: flex;
|
||||
color: #FFFFFF;
|
||||
font-size: 26rpx;
|
||||
.user-tags-label {
|
||||
background-color: #7e8aff;
|
||||
border-radius: 30rpx;
|
||||
padding-left: 20rpx;
|
||||
line-height: 48rpx;
|
||||
margin-right: 20rpx;
|
||||
display: flex;
|
||||
image{
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
margin-top: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-cover{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 118rpx;
|
||||
height: 118rpx;
|
||||
border-radius: 50%;
|
||||
border:solid 5rpx white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.user-login {
|
||||
line-height: 118rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.user-login-img {
|
||||
position: absolute !important;
|
||||
right: 0;
|
||||
top: 35rpx;
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
}
|
||||
// 订单
|
||||
.orders{
|
||||
background: white;
|
||||
margin: $margin;
|
||||
border-radius: $radius;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
line-height: 90rpx;
|
||||
padding: 0 $padding;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text{
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.orders-flex{
|
||||
display: flex;
|
||||
padding: ($padding/2) ($padding/2) $padding;
|
||||
.order-item{
|
||||
width: 33.33%;
|
||||
text-align: center;
|
||||
image{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
.text-text{
|
||||
font-size: $title-size-sm;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 操作按钮
|
||||
.tools{
|
||||
background: white;
|
||||
margin: $margin;
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
.tools-item{
|
||||
line-height: 90rpx;
|
||||
padding: 0 $padding;
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
font-size: $title-size-lg;
|
||||
color: $text-color;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&:last-child{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 弹出
|
||||
.nameBack {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba($color: #000000, $alpha: .4);
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.namePop {
|
||||
position: fixed;
|
||||
left: 100rpx;
|
||||
right: 100rpx;
|
||||
top: 40%;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 100;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 100rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.namePop-input {
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.namePop-btn {
|
||||
color: #6e79ec;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.nameClose {
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
position: fixed;
|
||||
left: calc(50% - 27rpx);
|
||||
top: calc(40% + 140rpx);
|
||||
z-index: 101;
|
||||
}
|
||||
</style>
|
||||
510
pages/userCase/userCase.vue
Normal file
510
pages/userCase/userCase.vue
Normal file
@@ -0,0 +1,510 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="caseUser">
|
||||
<view class="caseUser-left">
|
||||
<view class="caseUser-left-number">
|
||||
患者：{{ caseInfo.name }}
|
||||
</view>
|
||||
<view class="caseUser-left-tool">
|
||||
<view class="caseUser-left-number">
|
||||
年龄：{{ caseInfo.age }} 岁
|
||||
</view>
|
||||
<view class="caseUser-left-number">
|
||||
性别：{{ caseInfo.sex == 'woman' ? '女' : '男' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="caseUser-img">
|
||||
<image v-if="caseImg" @click="openImg(caseImg)" :src="caseImg" mode="aspectFill"></image>
|
||||
<block v-else>
|
||||
<image src="/static/imgs/caseTips.png" mode="aspectFill"></image>
|
||||
<view @click="updImg" class="caseUser-tips">上传</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="caseUser-label">
|
||||
<view class="caseUser-label-see">
|
||||
<view class="caseUser-label-name">
|
||||
初始值
|
||||
</view>
|
||||
<view class="caseUser-label-number">
|
||||
{{ countInfo.first != 0 ? countInfo.first : '-' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="caseUser-label-see">
|
||||
<view class="caseUser-label-name">
|
||||
最高值
|
||||
</view>
|
||||
<view class="caseUser-label-number">
|
||||
{{ countInfo.max != 0 ? countInfo.max : '-' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="caseUser-label-see">
|
||||
<view class="caseUser-label-name">
|
||||
最新值
|
||||
</view>
|
||||
<view class="caseUser-label-number">
|
||||
{{ countInfo.last != 0 ? countInfo.last : '-' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="caseRemark">
|
||||
<view class="caseRemark-title">
|
||||
症状说明
|
||||
</view>
|
||||
<view class="caseRemark-text">
|
||||
{{ caseInfo.remark }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="caseTime" v-if="timeInfo.length > 0">
|
||||
<view class="caseTime-label" v-for="(items, index) in timeInfo" :key="index">
|
||||
<view class="caseTime-date">
|
||||
{{ items.created_at }}
|
||||
</view>
|
||||
<view class="caseTime-cont" @click="showSee(items.item.gout_case_log_id)" v-if="items.type == 'case_log'">
|
||||
<view class="caseTime-cont-left" :class="{active : items.item.cover}">
|
||||
<view class="caseTime-cont-name">
|
||||
{{ items.text }} - {{ items.item.quantity }}umol
|
||||
</view>
|
||||
<view class="nowrap-multi caseTime-cont-text">
|
||||
{{ items.item.remark }}
|
||||
</view>
|
||||
</view>
|
||||
<image class="caseTime-cont-img" :src="items.item.cover" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="caseTime-cont" @click="$Router.push({name: 'Indexdetails', params: {id: items.item.goods.goods_id}})" v-else>
|
||||
<view class="caseTime-cont-left">
|
||||
<view class="caseTime-cont-name">
|
||||
{{ items.text }}
|
||||
</view>
|
||||
<view class="nowrap caseTime-cont-text">
|
||||
商品： {{ items.item.goods.goods_name }}
|
||||
</view>
|
||||
<view class="caseTime-cont-text" style="margin: 0;">
|
||||
状态： {{ items.item.state }}
|
||||
</view>
|
||||
</view>
|
||||
<image class="caseTime-cont-img" :src="items.item.goods.cover" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 记录尿酸值弹出 -->
|
||||
<view class="recordBack" v-if="recordShow"></view>
|
||||
<view class="recordCont" v-if="recordShow">
|
||||
<view class="recordCont-title">
|
||||
<view class="recordCont-title-text">
|
||||
尿酸详情
|
||||
</view>
|
||||
<image @click="recordClick" class="recordCont-title-close" src="/static/icons/uricacidClose.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="recordCont-form">
|
||||
<view class="site-input">
|
||||
<label>尿酸值</label>
|
||||
<view class="recordCont-title-input">
|
||||
{{ LogInfo.quantity }}<text>umol</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="site-input">
|
||||
<label>备注描述</label>
|
||||
<view class="site-remarks">
|
||||
{{ LogInfo.remark }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="site-data">
|
||||
<label>尿酸记录日期</label>
|
||||
<view class="site-data-text">
|
||||
{{ LogInfo.created_at }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="site-input" v-if="LogInfo.cover">
|
||||
<label>图片信息</label>
|
||||
<image class="issueNew-icon" @click="openImg(LogInfo.cover)" :src="LogInfo.cover" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { goutSee, goutCover, DetLog } from '@/apis/interfaces/gout'
|
||||
import { uploads } from '@/apis/interfaces/uploading'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
caseImg : '',
|
||||
caseInfo : '',
|
||||
LogInfo : '', //记录详情
|
||||
countInfo : '',
|
||||
timeInfo : [],
|
||||
recordShow : false,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
goutSee().then(res => {
|
||||
this.caseInfo = res.case
|
||||
this.countInfo = res.count
|
||||
this.timeInfo = res.timelines
|
||||
this.caseImg = res.case.cover
|
||||
console.log(res.case)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 查看图片
|
||||
openImg(img) {
|
||||
uni.previewImage({
|
||||
current: img,
|
||||
urls:[img]
|
||||
})
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
updImg(type){
|
||||
uni.chooseImage({
|
||||
count : 1,
|
||||
success : path => {
|
||||
uploads([{
|
||||
uri : path.tempFilePaths[0]
|
||||
}]).then(res => {
|
||||
this.caseImg = res.url[0]
|
||||
// 上传头像
|
||||
this.settingInfo(res.path[0]);
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 上传图片-提交
|
||||
settingInfo(value) {
|
||||
goutCover(this.caseInfo.gout_case_id, {
|
||||
cover: value
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon : 'none'
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 查看详情
|
||||
showSee(val) {
|
||||
// 获取详情
|
||||
this.lastDet(val);
|
||||
this.recordShow = true
|
||||
},
|
||||
|
||||
// 新增尿酸弹出
|
||||
recordClick() {
|
||||
this.recordShow = !this.recordShow
|
||||
},
|
||||
|
||||
// 尿酸列表-详情
|
||||
lastDet(id) {
|
||||
DetLog(id).then(res => {
|
||||
this.LogInfo = res
|
||||
this.LogId = id
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
overflow: hidden;
|
||||
background: linear-gradient(to bottom, rgba($color: $mian-color, $alpha: .2), white);
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.caseUser {
|
||||
background-color: #6e79ec;
|
||||
color: #FFFFFF;
|
||||
padding: 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 310rpx;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
.caseUser-left {
|
||||
height: 160rpx;
|
||||
padding-left: 30rpx;
|
||||
box-sizing: border-box;
|
||||
.caseUser-left-tool {
|
||||
display: flex;
|
||||
margin-top: 30rpx;
|
||||
.caseUser-left-number {
|
||||
flex: 2;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.caseUser-left-number {
|
||||
line-height: 48rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.caseUser-img {
|
||||
width: 120rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
background-color: #a8b0ff;
|
||||
padding: 6rpx;
|
||||
box-sizing: border-box;
|
||||
right: 30rpx;
|
||||
top: 25rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.caseUser-tips {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #707070;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
line-height: 140rpx;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.caseUser-label {
|
||||
background-color: #5963cb;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
.caseUser-label-see {
|
||||
flex: 3;
|
||||
text-align: center;
|
||||
.caseUser-label-name {
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.caseUser-label-number {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.caseRemark {
|
||||
background-color: #F8F8F8;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
.caseRemark-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.caseRemark-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.caseTime {
|
||||
background-color: #FFFFFF;
|
||||
padding: 50rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 50rpx;
|
||||
top: 55rpx;
|
||||
background-color: #ebebeb;
|
||||
width: 2rpx;
|
||||
height: 100%;
|
||||
}
|
||||
.caseTime-label {
|
||||
position: relative;
|
||||
padding-left: 50rpx;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -13rpx;
|
||||
z-index: 99;
|
||||
top: 6rpx;
|
||||
background-color: #ebebeb;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:last-child::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -1rpx;
|
||||
z-index: 99;
|
||||
top: 6rpx;
|
||||
background-color: #FFFFFF;
|
||||
width: 2rpx;
|
||||
height: 200%;
|
||||
}
|
||||
.caseTime-date {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
font-weight: 600;
|
||||
}
|
||||
.caseTime-cont {
|
||||
background-color: #eff0ff;
|
||||
margin: 20rpx 0 40rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
border-radius: 10rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 180rpx;
|
||||
.caseTime-cont-left {
|
||||
width: 100%;
|
||||
&.active {
|
||||
width: calc(100% - 100rpx);
|
||||
}
|
||||
.caseTime-cont-name {
|
||||
color: #6e79ec;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.caseTime-cont-text {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.caseTime-cont-price {
|
||||
color: red;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
.caseTime-cont-img {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 20rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 弹出
|
||||
.recordBack {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba($color: #000000, $alpha: .4);
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
.recordCont {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 100;
|
||||
overflow-y: scroll;
|
||||
height: 70vh;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
.recordCont-title {
|
||||
border-bottom: 2rpx solid #F2F2F2;
|
||||
padding-bottom: 30rpx;
|
||||
display: flex;
|
||||
line-height: 54rpx;
|
||||
position: relative;
|
||||
.recordCont-title-close {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-top: 7rpx;
|
||||
}
|
||||
.recordCont-title-text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.recordCont-title-btn view {
|
||||
background-color: red;
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.recordCont-form {
|
||||
margin-top: 30rpx;
|
||||
.site-input {
|
||||
margin-bottom: 30rpx;
|
||||
label {
|
||||
margin-bottom: 20rpx;
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
}
|
||||
.recordCont-title-input {
|
||||
display: flex;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
line-height: 60rpx;
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
color: #adadad;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.site-remarks {
|
||||
background-color: #F2F2F2;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
}
|
||||
text {
|
||||
text-align: right;
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #54975e;
|
||||
}
|
||||
}
|
||||
.site-data {
|
||||
margin: 40rpx 0;
|
||||
display: flex;
|
||||
label {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.issueNew-icon{
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user