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

310 lines
8.6 KiB

<template>
<view>
<form class="padding-lr cu-form-group flex-direction">
<view class="cu-form-group flex flex-direction padding-tb">
<view class="title padding-bottom-sm">
<span class="text-red padding-right-xs">*</span>当前所在地区
</view>
<view class="flex align-center">
<input
@tap="handleSelectLocation"
class="flex-sub padding-left-xs"
name="input"
placeholder="请选择当前所在地区"
type="btn"
v-model="district"
/>
<text class="cuIcon-location timer"></text>
</view>
</view>
<view class="cu-form-group flex flex-direction padding-tb">
<view class="title padding-bottom-sm">
<span class="text-red padding-right-xs">*</span>当前所在详细地址
</view>
<input name="input" placeholder="请输入详细地址(含门牌号)" type="text" v-model="address" />
</view>
<view class="cu-form-group flex flex-direction padding-top">
<view class="title padding-bottom-sm">
<span class="text-red padding-right-xs">*</span>当前状态
</view>
<radio-group @change="StateChange" class="block">
<view class="cu-list menu text-left">
<view :key="index" class="cu-item" v-for="(state,index) in status">
<label class="flex justify-between align-center">
<radio
:checked="index === healthTypeId"
:value="state.id"
class="round margin-right-xs"
></radio>
<view class="flex-sub" style="font-size: 34rpx;">{{ state.name }}</view>
</label>
</view>
</view>
</radio-group>
</view>
<view class="cu-form-group flex flex-direction padding-tb">
<view class="title padding-bottom-sm">就诊医院(若无填无)</view>
<input name="input" placeholder="请输入就诊医院" type="text" v-model="hospital" />
</view>
<view class="cu-form-group flex flex-direction padding-top">
<view class="title padding-bottom-sm">最近14天是否有武汉居住史、旅游史或武汉亲戚来访</view>
<radio-group @change="TourChange" class="block">
<view class="flex">
<view :key="index" class="flex-sub margin-tb-sm" v-for="(tour,index) in tours">
<label class="flex justify-between align-center">
<radio
:checked="index === touchHubei"
:value="tour.value"
class="round margin-right-xs"
></radio>
<text class="flex-sub" style="font-size: 34rpx;">{{ tour.name }}</text>
</label>
</view>
</view>
</radio-group>
</view>
<view class="cu-form-group flex flex-direction padding-top">
<view class="title padding-bottom-sm">最近14天是否有新冠肺炎患者或疑似患者接触史</view>
<radio-group @change="TouchChange" class="block">
<view class="flex">
<view :key="index" class="flex-sub margin-tb-sm" v-for="(touch,index) in touches">
<label class="flex justify-between align-center">
<radio
:checked="index === touchSick"
:value="touch.value"
class="round margin-right-xs"
></radio>
<text class="flex-sub" style="font-size: 34rpx;">{{ touch.name }}</text>
</label>
</view>
</view>
</radio-group>
</view>
<view class="cu-form-group flex flex-direction padding-tb">
<view class="title padding-bottom-sm">
<span class="text-red padding-right-xs">*</span>当前体温(℃)
</view>
<input name="input" placeholder="请输入当前真实体温" type="number" v-model="animalHeat" />
</view>
</form>
<user-agreement @changeIntentions="changeIntentions"></user-agreement>
<button @tap="handleHealthSign" class="bg-cyan margin primary-btn" hover-class="cc-active">确认提交</button>
<!-- 历史 -->
<button
@tap="openPage('/pages/my-code/my-code')"
class="shadow round bg-cyan history-btn iconfont icon-history"
hover-class="cc-active"
></button>
</view>
</template>
<script>
import { showToast } from 'common/script/util';
import { HEALTH_SIGN } from 'api/api';
import { mapState, mapMutations } from 'vuex';
export default {
data() {
return {
district: '请选择当前所在地区',
address: '',
// status: [],
hospital: '',
tours: [
{
value: '0',
name: '否',
},
{
value: '1',
name: '是',
},
],
touches: [
{
value: '0',
name: '否',
},
{
value: '1',
name: '是',
},
],
animalHeat: 0,
healthTypeId: 0,
touchHubei: 0,
touchSick: 0,
agree: false,
};
},
computed: mapState('user', ['token', 'status']),
methods: {
...mapMutations('user', ['setHealthCode']),
handleSelectLocation() {
const that = this;
uni.chooseLocation({
success: function(res) {
console.log('位置名称:' + res.name);
console.log('详细地址:' + res.address);
that.district = res.address;
},
});
},
changeIntentions(data) {
this.agree = data;
},
// 状态
StateChange: function(evt) {
for (let i = 0; i < this.status.length; i++) {
if (this.status[i].id === evt.target.value) {
this.healthTypeId = i;
break;
}
}
},
// 旅游
TourChange: function(evt) {
for (let i = 0; i < this.tours.length; i++) {
if (this.tours[i].value === evt.target.value) {
this.touchHubei = i;
break;
}
}
},
// 接触
TouchChange(evt) {
console.log(this.touches, 'aa');
for (let b = 0; b < this.touches.length; b++) {
if (this.touches[b].value === evt.target.value) {
this.touchSick = b;
break;
}
}
},
/**
* 申请健康码
*/
async handleHealthSign() {
try {
if (!this.checkRules()) return;
const {
address,
animalHeat,
district,
healthTypeId,
hospital,
token,
touchHubei,
touchSick,
} = this;
const params = {
param: {
address,
animalHeat,
district,
healthTypeId: healthTypeId + 1,
hospital,
token,
touchHubei,
touchSick,
},
};
const res = await this.$http.post(HEALTH_SIGN, params);
const { success, code, msg, data } = res.data;
if (success && code === 200) {
uni.showToast({
title: '申请健康码成功',
duration: 2000,
});
this.success = true;
this.setHealthCode(data.healthCode);
uni.reLaunch({
url: `/pages/index/index`,
});
} else {
uni.showToast({
title: msg || '申请健康码失败',
icon: 'none',
});
}
} catch (error) {
console.log('error: ', error);
if (error.msg) {
uni.showToast({
title: error.msg || '申请健康码失败',
icon: 'none',
});
}
}
},
// 验证信息
checkRules() {
const { district, address, healthTypeId, animalHeat, agree } = this;
if (!district || district === '请选择当前所在地区') {
showToast('请选择当前所在地区');
return;
}
if (!address) {
showToast('请输入当前所在地址');
return;
}
if (healthTypeId < 0) {
showToast('请选择状态');
return;
}
if (!animalHeat) {
showToast('请输入当前体温');
return;
}
if (!agree) {
showToast('请确定是否为本人填写');
return;
}
return true;
},
},
};
</script>
<style lang="scss" scoped>
.agree-box {
width: 70rpx;
}
.agree-text {
line-height: 60rpx;
}
.timer {
font-size: 34rpx !important;
color: $gray;
}
.primary-btn {
border-radius: 15rpx;
}
.history-btn {
position: fixed;
bottom: 40rpx;
right: 40rpx;
width: 96rpx;
height: 96rpx;
line-height: 96rpx;
padding: 0;
}
.history-btn::after {
border: none;
}
</style>