Skip to content

C
contraceptives_app
Commit ee60e74d authored by gengchunlei's avatar gengchunlei
Browse files
Options

一期

parent c70a20de
master chuXiong-xiaochengxu gcl-2022-4-14-loss-report gcl-loss-report-init yn-2022-3-31 yueyang
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 614 additions and 170 deletions
package-lock.json
View file @ ee60e74d
This diff is collapsed.
package.json
View file @ ee60e74d
......@@ -10,8 +10,11 @@
"dependencies": {
"axios": "^0.20.0",
"core-js": "^3.6.5",
"less": "^3.12.2",
"less-loader": "^7.0.2",
"mint-ui": "^2.2.13",
"vue": "^2.6.11",
"vue-qrcode-reader": "^2.3.14",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
......
src/main.js
View file @ ee60e74d
......@@ -5,7 +5,11 @@ import store from './store'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import './assets/elGlobal.css'
import Router from 'vue-router'
import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);
Vue.use(Router)
Vue.config.productionTip = false
Vue.use(MintUI)
......
src/router/index.js
View file @ ee60e74d
......@@ -7,6 +7,8 @@ import ReturnVisit from '../views/returnVisit'
import ChoiceContraceptives from '../views/choiceContraceptives'
import SiteDetails from '../views/siteDetails'
import ReceiveSuccess from '../views/receiveSuccess'
import qrcodeReader from "../views/scanComponent/qrcodeReader"
Vue.use(VueRouter)
const routes = [
......@@ -17,10 +19,12 @@ const routes = [
{path: '/choiceContraceptives', name: 'choiceContraceptives', component: ChoiceContraceptives},
{path: '/siteDetails', name: 'siteDetails', component: SiteDetails},
{path: '/receiveSuccess', name: 'receiveSuccess', component: ReceiveSuccess},
{path:'/qrcodeReader', name: 'qrcodeReader', component: qrcodeReader},
]
const router = new VueRouter({
mode: 'history',
mode: 'hash',
base: process.env.BASE_URL,
routes
})
......
src/utils/api.js
View file @ ee60e74d
import axios from 'axios';
var apiInstance=axios.create({
baseURL:process.env.VUE_APP_PATH,
baseURL:'',
timeout:10000,
withCredentials:true
})
......@@ -19,7 +19,32 @@ apiInstance.interceptors.request.use(config=>{
// 请求错误后把我们的error返回回去
return Promise.reject(error);
})
/*获取列表*/
/*获取网点*/
export const getNetworkInfo = params =>{
return apiInstance.get(`/basic-info/v1/basic-info/basic-network-info/get-network-info`,{params});
};
\ No newline at end of file
return apiInstance.get(`/api/basic-info/v1/basic-info/basic-network-info/get-network-info`,{params});
};
//获取用领取记录
export const getUserCollectRecord = params => {
return apiInstance.get(`/api/stock-info/v1/stock-info/stock-provide-record`, {params})
}
//获取库存信息
export const getStockInfo = params => {
return apiInstance.get(`/api/stock-info/v1/stock-info/stock-basic-info/basic-info`, {params})
}
//用户领取次数
export const getUserReceiveNum = params => {
return apiInstance.get(`/api/stock-info/v1/stock-info/stock-provide-record/number/${params.residentId}`, {params})
}
//填写随访记录
export const addVisitRecord = params => {
return apiInstance.post(`/api/stock-info/v1/stock-info/stock-visit-info`, params)
}
//确认领取药具
export const getMedical = params => {
return apiInstance.post(`/api/stock-info/v1/stock-info/stock-provide-record`, params)
}
src/utils/common.js 0 → 100644
View file @ ee60e74d
// 判断
export function isIOSWebKit() {
const aa = window.navigator.userAgent;
if (aa.indexOf('client-iOS') !== -1){// ios端
return true;
}else if(aa.indexOf('Android') !== -1 || aa.indexOf('Adr') !== -1){// 安卓端
return false;
}
}
//当前方法传参数两种 字符串或者map
export function callMobile(handlerInterface,parameters){
let classStr = Object.prototype.toString.call(parameters);
if(classStr === '[object String]' || classStr === '[object Object]'){
let param = parameters;
if(classStr === "[object Object]"){ //判断传参是str ,还是object
//handlerInterface由iOS addScriptMessageHandler与andorid addJavascriptInterface 代码注入而来。
param = JSON.stringify(parameters);//参数必须转化成json格式
}
try {
if (isIOSWebKit()){//ios
if(window.webkit!==undefined){
window.webkit.messageHandlers[handlerInterface].postMessage(param);
}
}else if(isIOSWebKit() === false){
//安卓传输不了js json对象，只能传输string
window.ecloud[handlerInterface](param);
}
}catch (e) {
}
}
}
src/views/choiceContraceptives.vue
View file @ ee60e74d
......@@ -5,42 +5,38 @@
<mt-button icon="back"></mt-button>
</router-link>
</mt-header>
<div class="content-list" v-if="dataList && dataList.length>0">
<div class="content-item ui-flex justify-center center">
<div class="cell">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1926305167,3823812322&fm=26&gp=0.jpg"/>
</div>
<div class="tradeInfo">
<div class="tradeName">天然乳胶避孕套超薄装天然乳胶避孕套超薄装</div>
<div style="margin-top: 5px"><label style="float: left;margin-bottom: 0">数量：86</label><label style="float: right;margin-right: 15px;margin-bottom: 0">规格：10只/盒</label><div style="clear: both"></div></div>
<div>有效期至：2023-11-22</div>
<div>生产厂家：程程药业有限公司</div>
</div>
<div class="content-list" v-if="!noDataShow">
<div
class="list-data"
v-infinite-scroll="loadMore"
:infinite-scroll-disabled="loading"
infinite-scroll-distance="10"
>
<div class="content-item ui-flex justify-center center"
v-for="item in detailInfo"
:key="item.id"
>
<div class="check-btn">
<input type="radio" id="1" value="1" >
<input type="radio" id="1" :value="JSON.stringify(item)" v-model="checkedMedical">
</div>
<div style="clear: both"></div>
</div>
<div class="content-item ui-flex justify-center center">
<div class="cell">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1926305167,3823812322&fm=26&gp=0.jpg"/>
<img :src="item.imgUrl"/>
</div>
<div class="tradeInfo">
<div class="tradeName">天然乳胶避孕套超薄装天然乳胶避孕套超薄装</div>
<div style="margin-top: 5px"><label style="float: left;margin-bottom: 0">数量：86</label><label style="float: right;margin-right: 15px;margin-bottom: 0">规格：10只/盒</label><div style="clear: both"></div></div>
<div>有效期至：2023-11-22</div>
<div>生产厂家：程程药业有限公司</div>
</div>
<div class="check-btn">
<input type="radio" id="2" value="2" >
<div class="tradeName">{{item.medicineName}}</div>
<div style="margin-top: 5px"><label style="float: left;margin-bottom: 0">数量：{{item.stockNum}}</label><label style="float: right;margin-right: 15px;margin-bottom: 0">规格：{{item.specs}}</label><div style="clear: both"></div></div>
<div>有效期至：{{item.expireDate}}</div>
<div>生产厂家：{{item.factoryName}}</div>
</div>
<div style="clear: both"></div>
</div>
</div>
</div>
<div class="sub-badReaction" v-if="dataList && dataList.length>0">
<div class="sub-badReaction" v-if="!noDataShow">
<mt-button type="primary" @click="receiveContraceptives">确认领取</mt-button>
</div>
<div v-if="dataList && dataList.length===0">
<div v-if="noDataShow">
<div class="success-img">
<img src="../assets/img/noHave.png"/>
<div class="tips">
......@@ -57,20 +53,72 @@
</template>
<script>
import {getMedical, getStockInfo} from "../utils/api";
export default {
name: "choiceContraceptives",
data(){
return{
dataList:[]
loading: false,
checkedMedical:'',
detailInfo: [],
loadText:'加载中...',
noDataShow: false,
param: {
pageIndex: 0,
pageSize: 10
}
}
},
methods:{
getStockListInfo(callBack) {
let par = {
relationId: 4,
...this.param
}
getStockInfo(par).then(({data = {}}) => {
const {dataList = []} = data.data
this.detailInfo = this.detailInfo.concat(dataList)
if (this.detailInfo.length == 0) {
this.noDataShow = true
} else {
this.noDataShow = false
}
if (data.data && data.data.length < this.param.pageSize) {
this.loadText = '暂无更多数据'
} else {
this.loading = false
}
callBack && callBack()
}).finally(() => {
this.loading = false
})
},
loadMore() {
this.loading = true
this.param.pageIndex += 1
this.getStockListInfo()
},
backHome(){
this.$router.push("/");
},
receiveContraceptives(){
this.$router.push("/receiveSuccess");
let pars = JSON.parse(this.checkedMedical)
let par = {
residentId: 1,
networkId: 4,
...pars
}
getMedical(par).then(({data}) => {
if (data.code == 'SUCCESS') {
this.$router.push("/receiveSuccess");
}
})
}
},
beforeDestroy() {
this.detailInfo = []
}
}
</script>
......@@ -217,4 +265,9 @@
border-radius: 50%;
z-index: 1;
}
</style>
\ No newline at end of file
.list-data{
/*height: calc(100% - 40px);*/
max-height: calc(100vh - 40px);
overflow-y: auto;
}
</style>
src/views/collectRecords.vue
View file @ ee60e74d
......@@ -5,62 +5,100 @@
<mt-button icon="back"></mt-button>
</router-link>
</mt-header>
<div class="content">
<div class="title">天然乳胶避孕套超薄装</div>
<div class="details">
<div class="item">
<label class="item-left">规格:</label>
<label class="item-right">10支/盒</label>
</div>
<div class="item">
<label class="item-left">领取数量：</label>
<label class="item-right">1盒</label>
</div>
<div class="item">
<label class="item-left">领取时间：</label>
<label class="item-right">2022-07-22 12:33:12</label>
</div>
<div class="item">
<label class="item-left">领取站点：</label>
<label class="item-right">五华区人民路自助发放机</label>
</div>
<div class="item">
<label class="item-left">站点类型：</label>
<label class="item-right">自助发放机</label>
<div>
<div
class="list-data"
v-infinite-scroll="loadMore"
:infinite-scroll-disabled="loading"
infinite-scroll-distance="10"
>
<div class="content" v-for="item in detailInfo" :key="item.id">
<div class="title">{{item.medicalName}}</div>
<div class="details">
<div class="item">
<label class="item-left">规格:</label>
<label class="item-right">{{item.productSpecs || '--'}}</label>
</div>
<div class="item">
<label class="item-left">领取数量：</label>
<label class="item-right">{{item.number || '--'}}</label>
</div>
<div class="item">
<label class="item-left">领取时间：</label>
<label class="item-right">{{item.createDate || '--'}}</label>
</div>
<div class="item">
<label class="item-left">领取站点：</label>
<label class="item-right">{{item.netName || '--'}}</label>
</div>
<div class="item">
<label class="item-left">站点类型：</label>
<label class="item-right">{{item.netTypeName || '--'}}</label>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="title">天然乳胶避孕套超薄装</div>
<div class="details">
<div class="item">
<label class="item-left">规格:</label>
<label class="item-right">10支/盒</label>
</div>
<div class="item">
<label class="item-left">领取数量：</label>
<label class="item-right">1盒</label>
</div>
<div class="item">
<label class="item-left">领取时间：</label>
<label class="item-right">2022-07-22 12:33:12</label>
</div>
<div class="item">
<label class="item-left">领取站点：</label>
<label class="item-right">五华区人民路自助发放机</label>
</div>
<div class="item">
<label class="item-left">站点类型：</label>
<label class="item-right">自助发放机</label>
</div>
<div class="loading" v-if="loading">
<span id="load-text">{{loadText}}</span>
</div>
<div v-if="noDataShow">
<NoData></NoData>
</div>
</div>
</div>
</template>
<script>
import {getUserCollectRecord} from '../utils/api';
import NoData from "./component/noData";
export default {
name: "collectRecords"
name: "collectRecords",
components: {NoData},
data() {
return {
loading: false,
detailInfo: [],
loadText:'加载中...',
noDataShow: false,
param: {
pageIndex: 0,
pageSize: 10
}
}
},
methods: {
getRecordInfo(callBack) {
getUserCollectRecord(this.param).then(({data = {}}) => {
const {dataList = []} = data.data
this.detailInfo = this.detailInfo.concat(dataList)
if (this.detailInfo.length == 0) {
this.noDataShow = true
} else {
this.noDataShow = false
}
if (data.data && data.data.length < this.param.pageSize) {
this.loadText = '暂无更多数据'
} else {
this.loading = false
}
callBack && callBack()
}).finally(() => {
this.loading = false
})
},
loadMore() {
this.loading = true
this.param.pageIndex += 1
this.getRecordInfo()
}
},
beforeDestroy() {
this.detailInfo = []
}
}
</script>
......@@ -73,15 +111,27 @@
border-radius: 1rem;
box-shadow: darkgrey 0px 2px 20px -10px;
}
.content .title {
font-weight: bold;
line-height: 30px;
border-bottom: 1px solid #F3F3F3;
}
.content .details .item{
.content .details .item {
line-height: 24px;
}
.content .details .item .item-right{
.content .details .item .item-right {
float: right;
}
</style>
\ No newline at end of file
.list-data{
/*height: calc(100% - 40px);*/
max-height: calc(100vh - 40px);
overflow-y: auto;
}
.loading{
width: 100%;
text-align: center;
}
</style>
src/views/component/noData.vue 0 → 100644
View file @ ee60e74d
<template>
<div>
<div class="success-img">
<img src="./../../assets/img/noHave.png"/>
<div class="tips">
暂无数据...
</div>
</div>
<div class="backHome">
<mt-button type="primary" @click="backHome">返回首页</mt-button>
</div>
</div>
</template>
<script>
export default {
name: "noData",
methods: {
backHome(){
this.$router.push("/");
},
}
}
</script>
<style scoped>
.tips{
color: #747971;
font-size: 14px;
padding: 10px 30px 20px;
margin: 0 auto;
}
.success-img{
text-align: center;
padding-top: 100px;
}
.backHome {
position: fixed;
z-index: 2;
left: calc(50% - 155px);
}
.backHome .mint-button {
width: 311px;
height: 44px;
background: linear-gradient(242deg, #dff9b9 -27%, #1bd09f 85%);
border-radius: 22px;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
}
</style>
src/views/myMap.vue
View file @ ee60e74d
......@@ -40,7 +40,9 @@
import presonImg from '../assets/img/preson.png';
import sharpImg from '../assets/img/sharp.png';
import { MessageBox } from 'mint-ui';
import {getNetworkInfo} from '../utils/api';
import {getNetworkInfo, getUserReceiveNum} from '../utils/api';
import {callMobile} from "../utils/common";
import { Toast } from 'mint-ui';
export default {
name: "myMap",
data() {
......@@ -51,18 +53,36 @@
machines: []
}
},
created() {
},
methods: {
ScanCode() {
/*先判断是否有没有回访的领取记录*/
let isReturn=false;
if(isReturn){
this.$router.push('/returnVisit');
}else{
this.$router.push('/choiceContraceptives');
/*打开摄像头扫码*/
/*扫描成功拿到发货机id跳转到选择药具页面*/
/*扫描失败弹出提示信息*/
let pars = {
'callback': 'qrcodeContent',
}
// window.android.qrcode()
callMobile("qrcode", pars);
/*先判断是否有没有回访的领取记录*/
let par = {residentId: 1}
getUserReceiveNum(par).then(({data}) => {
if (data.data < 0) {
this.$router.push('/returnVisit');
} else {
this.$router.push('/choiceContraceptives');
// this.$router.push('/returnVisit');
/*打开摄像头扫码*/
/*扫描成功拿到发货机id跳转到选择药具页面*/
/*扫描失败弹出提示信息*/
}
})
},
subscanQRCallBack(result){
alert('扫码结果：'+result);
Toast({
message: '测试'+result,
position: 'bottom',
duration: 5000
});
},
toCollectRecords() {
this.$router.push('/collectRecords');
......@@ -154,7 +174,7 @@
infoButton.className = "text-button";
infoButton.value = "详情"
infoButton.onclick = function () {
_that.jumpInfo(info.id)
_that.jumpInfo(info)
};
let navigationButton = document.createElement("input");
navigationButton.type = "button";
......@@ -214,14 +234,17 @@
}
/*this.$router.push({path: '/navigation', query: {Lng: Lng, Lat: Lat}})*/
},
jumpInfo(id) {
let Lng=this.lngLat[0];
let Lat=this.lngLat[1];
this.$router.push({path: `/siteDetails`,query:{id:id,Lng: Lng, Lat: Lat}});
jumpInfo(info) {
this.$router.push({path: `/siteDetails`,query:{info:JSON.stringify(info)}});
},
},
mounted() {
this.createMap();
// 将subscanQRCallBack方法绑定到window下面，提供给外部调用
document.addEventListener("qrcodeContent",this.subscanQRCallBack);
},
beforeDestroy() {
document.removeEventListener("qrcodeContent",this.subscanQRCallBack);
},
}
</script>
......@@ -426,4 +449,4 @@
width: 0px !important;
height: 0px !important;
}
</style>
\ No newline at end of file
</style>
src/views/returnVisit.vue
View file @ ee60e74d
......@@ -14,27 +14,29 @@
title="使用是否满意"
align="left"
v-model="formData.isAgree"
:options="options1">
:options="options1" @change="changeAgree">
</mt-radio>
<div v-if="formData.isAgree==='1'">
<input type="text" v-model.trim="formData.disagreeReason" @blur="blurDisagreeReason" placeholder="请填写原因"/>
<div v-if="formData.isAgree==='1'" style="margin-top: 8px">
<input type="text" style="height: 33px" v-model.trim="formData.disagreeReason" @blur="blurDisagreeReason" placeholder="请填写原因"/>
<label class="checkMsg" v-if="formData.checkDisagreeReason">请填写不满意原因</label>
</div>
<mt-radio
title="有无不良反应"
align="left"
v-model="formData.isBadReaction"
:options="options2">
:options="options2"
@change="changeBad"
>
</mt-radio>
<div v-if="formData.isBadReaction==='1'" class="badReaction">
<div style="font-weight: bold; color: #888">请选择不良反应(多选)：</div>
<div v-for="item in options3" :key="item.value" style="margin-top: 10px">
<div v-for="item in options3" :key="item.value" style="margin-top: 7px">
<input type="checkbox" v-model="formData.badReaction" @change="changeBadReaction" :id="item.value" :value="item.value" class="hidden"/>
<span></span>
<span class="txt">{{item.label}}</span>
</div>
<label class="checkMsg" v-if="formData.checkBadReaction">请选择不良反应</label>
<div v-if="formData.badReaction.includes(5)">
<div v-if="formData.badReaction.includes(9)">
<input type="text" v-model="formData.otherBadReaction" @blur="blurOtherBadReaction" placeholder="请填写其他不良反应"/>
<label class="checkMsg" v-if="formData.checkOtherBadReaction">请填写其他不良反应</label>
</div>
......@@ -48,23 +50,28 @@
</template>
<script>
import {addVisitRecord} from "../utils/api";
import { Toast } from 'mint-ui';
export default {
name: "returnVisit",
data() {
return {
options1: [{label: '满意', value: '0'}, {label: '不满意', value: '1'}],
options2: [{label: '没有', value: '0'}, {label: '不满意', value: '1'}],
options2: [{label: '没有', value: '0'}, {label: '有', value: '1'}],
options3: [
{label: '恶心呕吐', value: 0},
{label: '阴道点滴出血', value: 1},
{label: '月经过少或闭经', value: 2},
{label: '面部色素沉着', value: 3},
{label: '体重增加', value: 4},
{label: '其他', value: 5}],
{label: '恶心呕吐', value: 1},
{label: '阴道点滴出血', value: 2},
{label: '月经过少或闭经', value: 3},
{label: '面部色素沉着', value: 4},
{label: '体重增加', value: 5},
{label: '其他', value: 9}],
formData: {
isAgree:'0',
disagreeReason: '',
isBadReaction:'0',
badReaction: [],
otherBadReaction: '',
checkDisagreeReason:false,
checkOtherBadReaction:false,
checkBadReaction:false
......@@ -72,12 +79,23 @@
}
},
methods:{
changeAgree() {
if(this.formData.isAgree == 0) {
this.formData.disagreeReason = ''
}
},
blurDisagreeReason(){
this.formData.checkDisagreeReason=this.formData.disagreeReason===''||this.formData.disagreeReason===undefined;
},
blurOtherBadReaction(){
this.formData.checkOtherBadReaction=this.formData.otherBadReaction===''||this.formData.otherBadReaction===undefined;
},
changeBad() {
if (this.formData.isBadReaction == 0) {
this.formData.badReaction = []
this.formData.otherBadReaction = ''
}
},
changeBadReaction(){
this.formData.checkBadReaction=this.formData.badReaction.length<1|| this.formData.badReaction===undefined;
},
......@@ -94,7 +112,7 @@
if(this.formData.checkBadReaction){
flag=false;
}
if(this.formData.badReaction.includes(5)){
if(this.formData.badReaction.includes(9)){
this.blurOtherBadReaction();
if(this.formData.checkOtherBadReaction){
flag=false;
......@@ -103,7 +121,30 @@
}
/*验证完毕*/
if(flag){
console.log(this.formData);
let badInfo = this.formData.badReaction.join()
let par = {
satisfied: this.formData.isAgree,
satisfiedReason: this.formData.disagreeReason,
bad: this.formData.isBadReaction,
badReason: badInfo,
badOther: this.formData.otherBadReaction
}
addVisitRecord(par).then(({data}) => {
if (data.code == 'SUCCESS') {
Toast({
message: '填写成功！',
position: 'bottom',
duration: 2000
});
this.$router.push("/");
} else {
Toast({
message: '失败，请联系管理员！',
position: 'bottom',
duration: 2000
});
}
})
}else {
return false;
}
......@@ -112,7 +153,8 @@
}
</script>
<style>
<style lang="less">
.checkMsg{
color: red;
}
......@@ -123,6 +165,8 @@
.subject {
padding: 5px 0px 5px 20px;
height: calc(100vh - 144px);
overflow: auto;
}
.subject .mint-cell:not(:last-child) {
......@@ -136,11 +180,15 @@
padding-left: 5px;
border-bottom: 1px solid #F0F0F0;
color: #6E6166;
outline: none;
}
.badReaction {
width: 100%;
/*
border-top: 1px solid #F0F0F0;
*/
padding-top: 10px;
padding-left: 5px;
}
......@@ -180,4 +228,4 @@
border-radius: 22px;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
}
</style>
\ No newline at end of file
</style>
src/views/scanComponent/qrcodeReader.vue 0 → 100644
View file @ ee60e74d
<!--
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-08-18 10:13:28
* @LastEditTime: 2019-08-18 15:24:32
* @LastEditors: Please set LastEditors
-->
<template>
<div>
<p class="error">{{ error }}</p>
<p class="decode-result">
Last result:
<b>{{ result }}</b>
</p>
<QrcodeStream @decode="onDecode" @init="onInit" :camera="camera"/>
</div>
</template>
<script>
import { QrcodeStream } from "vue-qrcode-reader";
export default {
components: { QrcodeStream },
data() {
return {
result: "",
camera: 'auto',
error: ""
};
},
methods: {
onDecode(result) {
this.result = result;
},
async onInit(promise) {
try {
await promise;
} catch (error) {
if (error.name === "NotAllowedError") {
this.error = "ERROR: you need to grant camera access permisson";
} else if (error.name === "NotFoundError") {
this.error = "ERROR: no camera on this device";
} else if (error.name === "NotSupportedError") {
this.error = "ERROR: secure context required (HTTPS, localhost)";
} else if (error.name === "NotReadableError") {
this.error = "ERROR: is the camera already in use?";
} else if (error.name === "OverconstrainedError") {
this.error = "ERROR: installed cameras are not suitable";
} else if (error.name === "StreamApiNotSupportedError") {
this.error = "ERROR: Stream API is not supported in this browser";
}
}
}
}
};
</script>
<style scoped>
.error {
font-weight: bold;
color: red;
}
</style>
src/views/siteDetails.vue
View file @ ee60e74d
......@@ -6,70 +6,116 @@
</router-link>
</mt-header>
<div class="siteDetailInfo">
<div class="siteName">{{siteDetail.name}}</div>
<div><label style="font-size: 15px">距离：{{distance}}km</label><label style="margin-left: 20px;font-size: 15px">类型：人工发放网点</label></div>
<div class="siteName">{{siteDetail.netName}}</div>
<div><label style="font-size: 15px">距离：{{siteDetail.distance}}km</label><label
style="margin-left: 20px;font-size: 15px">类型：{{siteDetail.netTypeName}}</label></div>
<div class="ui-flex justify-center center" style="line-height: 29px">地址：
<label class="btn" @click="clickAddress">{{siteDetail.address}}</label><div class="cell"><img src="../assets/img/phone.png"/></div>
<label class="btn" @click="clickAddress">{{siteDetail.netAddress}}</label>
<div class="cell"><img src="../assets/img/phone.png"/></div>
</div>
<div class="ui-flex justify-center center">联系电话：
<label class="btn" @click="clickPhone">{{siteDetail.phone}}</label><div class="cell"><img src="../assets/img/phone.png"/></div>
<label class="btn" @click="clickPhone">{{siteDetail.netPhone}}</label>
<div class="cell"><img src="../assets/img/phone.png"/></div>
</div>
</div>
<div style="padding:0 20px;font-size: 15px">该网点当前可领取的药具</div>
<div class="content-list">
<div class="content-item ui-flex justify-center center">
<div class="cell">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1926305167,3823812322&fm=26&gp=0.jpg"/>
</div>
<div class="tradeInfo">
<div class="tradeName">天然乳胶避孕套超薄装天然乳胶避孕套超薄装</div>
<div style="margin-top: 5px"><label style="float: left;margin-bottom: 0">数量：86</label><label style="float: right;margin-right: 15px;margin-bottom: 0">规格：10只/盒</label><div style="clear: both"></div></div>
<div>有效期至：2023-11-22</div>
<div>生产厂家：程程药业有限公司</div>
<div
class="list-data"
v-infinite-scroll="loadMore"
:infinite-scroll-disabled="loading"
infinite-scroll-distance="10"
>
<div class="content-item ui-flex justify-center center"
v-for="item in stockInfo"
:key="item.id"
>
<div class="cell">
<img :src=item.imgUrl />
</div>
<div class="tradeInfo">
<div class="tradeName">{{item.medicineName}}</div>
<div style="margin-top: 5px"><label style="float: left;margin-bottom: 0">数量：{{item.stockNum}}</label><label
style="float: right;margin-right: 15px;margin-bottom: 0">规格：{{item.specs}}</label>
<div style="clear: both"></div>
</div>
<div>有效期至：{{item.expireDate}}</div>
<div>生产厂家：{{item.factoryName}}</div>
</div>
<div style="clear: both"></div>
</div>
<div style="clear: both"></div>
</div>
<div class="content-item ui-flex justify-center center">
<div class="cell">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1926305167,3823812322&fm=26&gp=0.jpg"/>
</div>
<div class="tradeInfo">
<div class="tradeName">天然乳胶避孕套超薄装天然乳胶避孕套超薄装</div>
<div style="margin-top: 5px"><label style="float: left;margin-bottom: 0">数量：86</label><label style="float: right;margin-right: 15px;margin-bottom: 0">规格：10只/盒</label><div style="clear: both"></div></div>
<div>有效期至：2023-11-22</div>
<div>生产厂家：程程药业有限公司</div>
</div>
<div style="clear: both"></div>
</div>
<div v-if="noDataShow">
<NoData></NoData>
</div>
</div>
</div>
</template>
<script>
import {getStockInfo} from "../utils/api";
import NoData from "./component/noData";
export default {
name: "siteDetails",
components: {NoData},
data() {
return {
distance: 0,
siteDetail: {
id: 4,
name: "大悦城发放机",
LngLat: [102.714625, 25.02158],
address: "大悦城发放机发放点详细地址",
contacts: "梨花",
phone: "13669772255"
},
siteDetail: {},
loading: false,
relationId: '',
stockInfo: [],
loadText: '加载中...',
noDataShow: false,
param: {
pageIndex: 0,
pageSize: 10
}
}
},
created() {
/*发请求通过this.$route.query.id*/
this.distance = this.getDistance(this.$route.query.Lat, this.$route.query.Lng, this.siteDetail.LngLat[1], this.siteDetail.LngLat[0]);
this.siteDetail = JSON.parse(this.$route.query.info)
this.relationId = this.siteDetail.id
// this.getMedicalInfoList()
},
methods: {
clickAddress(){
loadMore() {
this.loading = true
this.param.pageIndex += 1
this.getMedicalInfoList()
},
getMedicalInfoList(callBack) {
let par = {
relationId: this.relationId,
...this.param
}
getStockInfo(par).then(({data}) => {
const {dataList = []} = data.data
this.stockInfo = this.stockInfo.concat(dataList)
if (this.stockInfo.length == 0) {
this.noDataShow = true
} else {
this.noDataShow = false
}
if (data.data && data.data.length < this.param.pageSize) {
this.loadText = '暂无更多数据'
} else {
this.loading = false
}
callBack && callBack()
}).finally(() => {
this.loading = false
})
},
clickAddress() {
console.log(123);
},
clickPhone(){
clickPhone() {
console.log(456);
},
getDistance(latFrom, lngFrom, latTo, lngTo) {
......@@ -86,22 +132,28 @@
distance = Math.round(distance * 10000) / 10000;
return parseFloat(distance.toFixed(0));
},
},
beforeDestroy() {
this.relationId = ''
this.stockInfo = []
}
}
</script>
<style scoped>
.siteDetailInfo{
.siteDetailInfo {
font-size: 15px;
padding: 10px 20px;
border-top: 1px solid #F5F6F8;
border-bottom: 5px solid #F5F6F8;
}
.siteName{
.siteName {
font-weight: bold;
font-size: 18px;
margin-bottom: 10px;
}
.btn {
color: #00CA9D;
background-color: #FFFFFF;
......@@ -112,9 +164,11 @@
font-family: "宋体";
font-size: 15px;
}
.btn:focus {
outline: none;
}
.ui-flex {
display: -webkit-box !important;
display: -webkit-flex !important;
......@@ -133,6 +187,7 @@
-webkit-box-pack: center;
-ms-flex-pack: center;
}
.ui-flex.center {
-webkit-box-pack: center;
-ms-flex-pack: center;
......@@ -141,31 +196,43 @@
-ms-flex-align: center;
align-items: center
}
.content-list{
.content-list {
width: 100%;
height: calc(100% - 185px);
}
.content-item{
.content-item {
padding: 10px 10px 0 20px;
border-bottom: 5px solid #F5F6F8;
height: 150px;
}
.content-item:first-child{
.content-item:first-child {
padding-top: 0;
}
.content-item img{
.content-item img {
width: 85px;
max-height: 100px;
float: left;
display: inline-block;
vertical-align: middle;
}
.tradeName{
.tradeName {
font-size: 14px;
}
.tradeInfo{
.tradeInfo {
float: left;
width:calc(100% - 90px);
width: calc(100% - 90px);
padding-left: 10px;
}
</style>
\ No newline at end of file
.list-data {
/*height: calc(100% - 40px);*/
max-height: calc(100vh - 200px);
overflow-y: auto;
}
</style>
vue.config.js
View file @ ee60e74d
......@@ -22,6 +22,28 @@ module.exports = {
}
},
productionSourceMap: IsProd ? false : true,
lintOnSave:false,
devServer: {
port: 8082,
open: true,
overlay: {
warning: false,
errors: false
},
// https:true,
proxy: { //配置跨域
'/api': {
target: 'http://123.56.183.13:8889/', //真实的后台接口
changOrigin: true, //允许跨域
pathRewrite: {
/* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
*/
'^/api': ''
}
},
}
},
chainWebpack:(config)=>{
config.plugins.delete('preload');
config.plugins.delete('prefetch');
......
yarn.lock 0 → 100644
View file @ ee60e74d
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment