Skip to content

C
contraceptives_app
Commit c70a20de authored by zw's avatar zw
Browse files
Options

App1

parent 7063c0b6
Show whitespace changes
Inline Side-by-side
Showing with 1604 additions and 0 deletions
.browserslistrc 0 → 100644
View file @ c70a20de
> 1%
last 2 versions
not dead
.env.dev 0 → 100644
View file @ c70a20de
NODE_ENV=dev
VUE_APP_PATH=http://123.56.183.13:8889
.env.prod 0 → 100644
View file @ c70a20de
NODE_ENV=prod
VUE_APP_PATH=https://ynfymds-service.yiboshi.com
.env.test 0 → 100644
View file @ c70a20de
NODE_ENV=test
VUE_APP_PATH=http://123.56.183.13:8086
.eslintrc.js 0 → 100644
View file @ c70a20de
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
.gitignore 0 → 100644
View file @ c70a20de
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
babel.config.js 0 → 100644
View file @ c70a20de
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
package-lock.json 0 → 100644
View file @ c70a20de
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
View file @ c70a20de
{
"name": "contraceptives_app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --mode dev",
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build --mode prod"
},
"dependencies": {
"axios": "^0.20.0",
"core-js": "^3.6.5",
"mint-ui": "^2.2.13",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
public/index.html 0 → 100644
View file @ c70a20de
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_2002967_absxhdgm27r.css">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=8830df3ce60e0b6348e0854a939ffa9d"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
public/static/test.html 0 → 100644
View file @ c70a20de
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
<title>位置经纬度 + 获取步行规划数据</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://webapi.amap.com/maps?v=1.4.15&key=8830df3ce60e0b6348e0854a939ffa9d&plugin=AMap.Walking"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<script type="text/javascript">
var endlngLat;
var map;
function addText(end) {
endlngLat=end;
map = new AMap.Map("container", {
zoom: 14
});
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
buttonPosition:'RB', //定位按钮的停靠位置
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
});
map.addControl(geolocation);
geolocation.getCurrentPosition(function(status,result){
if(status=='complete'){
onComplete(result)
}else{
onError(result)
}
});
});
}
function onComplete(data) {
var walkOption = {
map: map,
panel: "panel",
hideMarkers: false,
isOutline: true,
outlineColor: '#ffeeee',
autoFitView: true
}
// 步行导航
var walking = new AMap.Walking(walkOption)
var startlngLat=[data.position.lng,data.position.lat];
//根据起终点坐标规划步行路线
walking.search(startlngLat,endlngLat, function(status, result) {
// result即是对应的不行路线数据信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_RidingResult
if (status === 'complete') {
drawRoute(result.routes[0])
log.success('步行路线数据查询成功')
} else {
log.error('步行路线数据查询失败' + result)
}
});
}
//解析定位错误信息
function onError(data) {
document.getElementById('status').innerHTML='定位失败'
}
function drawRoute (route) {
var path = []
for (var i = 0, l = route.steps.length; i < l; i++) {
var step = route.steps[i]
for (var j = 0, n = step.path.length; j < n; j++) {
path.push(step.path[j])
}
}
}
</script>
</body>
</html>
\ No newline at end of file
src/App.vue 0 → 100644
View file @ c70a20de
<template>
<div id="app">
<router-view/>
</div>
</template>
src/assets/elGlobal.css 0 → 100644
View file @ c70a20de
html, body ,#app{
height: 100%;
margin: 0px;
padding: 0px;
}
/*去掉高德地图的logo*/
.amap-logo{
display: none!important;
}
.amap-copyright{
opacity:0;
}
.mint-button-icon .mintui{
font-size: 24px;
}
.mint-button-text{
font-size: 16px;
}
.mint-header{
background-color: #FFFFFF;
color: #666666;
font-size: 18px;
}
.mint-header .mint-button-icon .mintui{
color: #999999;
}
.mint-radiolist-title{
font-weight: bold;
}
.mint-radiolist-label{
padding: 0px 0px;
}
.mint-cell-wrapper{
padding: 0px 0px;
}
.mint-radio-core{
width: 16px;
height: 16px
}
.mint-radio-input:checked + .mint-radio-core{
background-color: #FFFFFF;
border-color: #00CA9D;
}
.mint-radio-input:checked + .mint-radio-core::after{
background-color: #00CA9D;
}
.mint-radio-core::after{
top: 3px;
left: 3px;
}
input::-webkit-input-placeholder {
color: #ccc;
}
src/main.js 0 → 100644
View file @ c70a20de
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import './assets/elGlobal.css'
Vue.config.productionTip = false
Vue.use(MintUI)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
src/router/index.js 0 → 100644
View file @ c70a20de
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Navigation from '../views/navigation'
import CollectRecords from '../views/collectRecords'
import ReturnVisit from '../views/returnVisit'
import ChoiceContraceptives from '../views/choiceContraceptives'
import SiteDetails from '../views/siteDetails'
import ReceiveSuccess from '../views/receiveSuccess'
Vue.use(VueRouter)
const routes = [
{path: '/', name: 'Home', component: Home},
{path: '/navigation', name: 'navigation', component: Navigation},
{path: '/collectRecords', name: 'collectRecords', component: CollectRecords},
{path: '/returnVisit', name: 'returnVisit', component: ReturnVisit},
{path: '/choiceContraceptives', name: 'choiceContraceptives', component: ChoiceContraceptives},
{path: '/siteDetails', name: 'siteDetails', component: SiteDetails},
{path: '/receiveSuccess', name: 'receiveSuccess', component: ReceiveSuccess},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
src/store/index.js 0 → 100644
View file @ c70a20de
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
src/utils/api.js 0 → 100644
View file @ c70a20de
import axios from 'axios';
var apiInstance=axios.create({
baseURL:process.env.VUE_APP_PATH,
timeout:10000,
withCredentials:true
})
/*为请求添加请求头中的token*/
apiInstance.interceptors.request.use(config=>{
if(sessionStorage.token){
config.headers.Authorization="bearer "+sessionStorage.getItem('token');
if(typeof(config.params) == "undefined"){
config.params={}
}
}
return config;//赋值完后把config返回回去
},error => {
// 请求错误后把我们的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
src/utils/mapUtils.js 0 → 100644
View file @ c70a20de
import AMap from 'AMap';
var mapObj;
export const location = {
initMap(id){
mapObj= new AMap.Map(id, {zoom: 13,mapStyle: "amap://styles/macaron"});
let geolocation;
mapObj.plugin(['AMap.Geolocation'], function () {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默认:true
timeout: 10000, // 超过10秒后停止定位，默认：无穷大
maximumAge: 0, // 定位结果缓存0毫秒，默认：0
convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: false, // 显示定位按钮，默认：true
buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: false // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
})
mapObj.addControl(geolocation)
geolocation.getCurrentPosition();
})
return geolocation
},
initWalk(walkOption){
var walking;
AMap.service("AMap.Walking",function () {
walking=new AMap.Walking(walkOption);
})
return walking;
},
gatMap(){
return mapObj;
}
}
src/views/Home.vue 0 → 100644
View file @ c70a20de
<template>
<div class="home">
<my-map></my-map>
</div>
</template>
<script>
import MyMap from "./myMap";
export default {
name: 'Home',
components: {MyMap},
data() {
return {
}
}
}
</script>
<style scoped>
.home{
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
src/views/choiceContraceptives.vue 0 → 100644
View file @ c70a20de
<template>
<div class="choiceContraceptives">
<mt-header title="选择药具">
<router-link to="/" slot="left">
<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="check-btn">
<input type="radio" id="1" value="1" >
</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 class="check-btn">
<input type="radio" id="2" value="2" >
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-badReaction" v-if="dataList && dataList.length>0">
<mt-button type="primary" @click="receiveContraceptives">确认领取</mt-button>
</div>
<div v-if="dataList && dataList.length===0">
<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>
</div>
</template>
<script>
export default {
name: "choiceContraceptives",
data(){
return{
dataList:[]
}
},
methods:{
backHome(){
this.$router.push("/");
},
receiveContraceptives(){
this.$router.push("/receiveSuccess");
}
}
}
</script>
<style scoped>
.tips{
color: #747971;
font-size: 14px;
padding: 10px 30px 20px;
}
.success-img{
text-align: center;
padding-top: 100px;
}
.sub-badReaction {
position: fixed;
z-index: 2;
left: calc(50% - 155px);
bottom: 20px;
}
.sub-badReaction .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);
}
.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);
}
.choiceContraceptives{
width: 100%;
height: 100%;
}
.content-list{
width: 100%;
height: calc(100% - 108px);
}
.content-item{
padding-top: 10px;
border-top: 1px solid #F5F6F8;
border-bottom: 5px solid #F5F6F8;
height: 150px;
}
.content-item img{
width: 85px;
max-height: 100px;
float: left;
display: inline-block;
vertical-align: middle;
}
.tradeInfo{
float: left;
width:calc(100% - 130px);
padding-left: 10px;
}
.tradeName{
font-size: 14px;
}
.ui-flex {
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
box-sizing: border-box
}
.ui-flex.justify-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
.ui-flex.center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.check-btn{
float: right;
width: 40px;
height: 100%;
}
.check-btn input{
margin-top: 60px;
margin-left: 10px;
width: 20px;
height: 20px;
cursor: pointer;
font-size: 14px;
position: relative;
}
.check-btn input[type=radio]:after {
position: absolute;
width: 20px;
height: 20px;
top: 0;
content: " ";
background-color: #fff;
color: #fff;
display: inline-block;
visibility: visible;
border: 1px solid #999F97;
padding: 0px 3px;
border-radius: 50%;
}
.check-btn input[type=radio]:checked:before {
text-align: center;
content: "✓";
display: block;
position: relative;
background-color: #00CA9D;
width: 20px;
height: 20px;
top: 0px;
left: 0px;
color: #fff;
font-weight: 400;
border-radius: 50%;
z-index: 1;
}
</style>
\ No newline at end of file
src/views/collectRecords.vue 0 → 100644
View file @ c70a20de
<template>
<div>
<mt-header title="领取记录">
<router-link to="/" slot="left">
<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>
</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>
</div>
</div>
</template>
<script>
export default {
name: "collectRecords"
}
</script>
<style scoped>
.content {
width: 90%;
margin: 20px auto 0px;
padding: 10px;
border: 1px solid #F3F3F3;
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{
line-height: 24px;
}
.content .details .item .item-right{
float: right;
}
</style>
\ No newline at end of file
src/views/myMap.vue 0 → 100644
View file @ c70a20de
<template>
<div class="myMap">
<mt-header title="药具领取">
<router-link to="/" slot="left">
<mt-button icon="back"></mt-button>
</router-link>
</mt-header>
<div id="map-container" class="containerMap"></div>
<div class="scanCode">
<mt-button icon="saoma" type="primary" @click="ScanCode">扫码领取</mt-button>
</div>
<div class="right_item">
<div class="item">
<div class="img" @click="toCollectRecords">
<img src="../assets/img/personal.png"/>
</div>
<label>个人信息</label>
</div>
<div class="item">
<div class="img">
<img src="../assets/img/artificial.png"/>
</div>
<label>人工网点</label>
</div>
<div class="item">
<div class="img">
<img src="../assets/img/homePage.png"/>
</div>
<label>返回首页</label>
</div>
</div>
</div>
</template>
<script>
import AMap from 'AMap';
import {location} from "../utils/mapUtils";
import machinesImg from '../assets/img/machines.png';
import closeImg from '../assets/img/close.png';
import presonImg from '../assets/img/preson.png';
import sharpImg from '../assets/img/sharp.png';
import { MessageBox } from 'mint-ui';
import {getNetworkInfo} from '../utils/api';
export default {
name: "myMap",
data() {
return {
jumpHref: {},
lngLat: [],
showMap: false,
machines: []
}
},
methods: {
ScanCode() {
/*先判断是否有没有回访的领取记录*/
let isReturn=false;
if(isReturn){
this.$router.push('/returnVisit');
}else{
this.$router.push('/choiceContraceptives');
/*打开摄像头扫码*/
/*扫描成功拿到发货机id跳转到选择药具页面*/
/*扫描失败弹出提示信息*/
}
},
toCollectRecords() {
this.$router.push('/collectRecords');
},
createMap() {
let geolocation = location.initMap("map-container"); //定位
AMap.event.addListener(geolocation, "complete", result => {
this.lngLat = [result.position.lng, result.position.lat];
getNetworkInfo({latitude:result.position.lat,longitude:result.position.lng}).then(res=>{
if(res.data.code==='SUCCESS'){
this.machines=res.data.data;
this.createSign();
}
})
});
},
createSign() {
// 创建一个机器Icon
let map = location.gatMap();
var machinesIcon = new AMap.Icon({
size: new AMap.Size(25, 50),
image: machinesImg,
imageSize: new AMap.Size(25, 50),
imageOffset: new AMap.Pixel(0, 0)
});
// 创建一个机器Icon
var personIcon = new AMap.Icon({
size: new AMap.Size(40, 40),
image: presonImg,
imageSize: new AMap.Size(32, 32),
imageOffset: new AMap.Pixel(0, 0)
});
let markers = [];
this.machines.forEach(x => {
if(x.netType===0){
let marker = new AMap.Marker({
map: map,
icon: personIcon,
position: [x.netLongitude,x.netLatitude]
});
this.createInfoWindow(map, marker, x);
markers.push(marker);
}else {
let marker = new AMap.Marker({
map: map,
icon: machinesIcon,
position: [x.netLongitude,x.netLatitude]
});
this.createInfoWindow(map, marker, x);
markers.push(marker);
}
});
},
/*为标记绑定弹窗事件*/
createInfoWindow(map, marker, info) {
var infoWindow = new AMap.InfoWindow({ //创建信息窗体
isCustom: true, //使用自定义窗体
content: this.windowStyle(marker, info), //信息窗体的内容可以是任意html片段
offset: new AMap.Pixel(16, -45)
});
var onMarkerClick = function (e) {
infoWindow.open(map, e.target.getPosition());//打开信息窗体
//e.target就是被点击的Marker
}
marker.on('click', onMarkerClick);//绑定click事件
},
/*弹窗样式*/
windowStyle(marker, info) {
let _that = this;
let content = document.createElement("div");
content.className = "custom-info input-card content-window-card";
let top = document.createElement("div");
let titleD = document.createElement("div");
let closeX = document.createElement("img");
top.className = "info-top";
titleD.innerHTML = info.netName;
closeX.src = closeImg;
closeX.onclick = this.closeInfoWindow;
top.appendChild(titleD);
top.appendChild(closeX);
content.appendChild(top);
// 定义中部内容
let middle = document.createElement("div");
middle.className = "info-middle";
middle.innerHTML = "管理员：" + info.netPerson + "</br>联系电话：" + info.netPhone + "</br>" + "地址：" + info.netAddress + "</br>";
let infoButton = document.createElement("input");
infoButton.type = "button";
infoButton.className = "text-button";
infoButton.value = "详情"
infoButton.onclick = function () {
_that.jumpInfo(info.id)
};
let navigationButton = document.createElement("input");
navigationButton.type = "button";
navigationButton.className = "text-button button-right";
navigationButton.value = "导航"
navigationButton.onclick = function () {
_that.navigation(info)
};
middle.appendChild(infoButton);
middle.appendChild(navigationButton);
content.appendChild(middle);
// 定义底部内容
let bottom = document.createElement("div");
bottom.className = "info-bottom";
bottom.style.position = 'relative';
bottom.style.top = '0px';
bottom.style.margin = '0 auto';
let sharp = document.createElement("img");
sharp.src = sharpImg;
bottom.appendChild(sharp);
content.appendChild(bottom);
return content;
},
/*关闭弹窗*/
closeInfoWindow() {
let map = location.gatMap();
map.clearInfoWindow();
},
navigation(info) {
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
//这个是安卓操作系统
window.location.href="androidamap://viewMap?sourceApplication=appname&poiname="+info.netName+"&lat="+info.netLatitude+"&lon="+info.netLongitude+"&dev=0";
//判断是否切出浏览器
setTimeout(function(){
let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden
if(typeof hidden =="undefined" || hidden ==false){
//应用宝下载地址
MessageBox('提示', '请下载高德地图进行导航')
}
}, 2500);
}
if (isIOS) {
//这个是ios操作系统
window.location.href="iosamap://viewMap?sourceApplication=appname&poiname="+info.netName+"&lat="+info.netLatitude+"&lon="+info.netLongitude+"&dev=0"
//判断是否切出浏览器
setTimeout(function(){
let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden
if(typeof hidden =="undefined" || hidden ==false){
//应用宝下载地址
MessageBox('提示', '请下载高德地图进行导航')
}
}, 2500);
}
/*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}});
},
},
mounted() {
this.createMap();
},
}
</script>
<style>
.right_item {
position: absolute;
z-index: 2;
right: 15px;
top: 50%
}
.right_item .item .img {
padding: 9px;
width: 36px;
height: 36px;
margin: 0 auto;
border-radius: 1.5rem;
background: white;
}
.right_item .item {
color: #00CA9D;
margin-top: 20px;
}
.myMap {
height: 100%;
margin: 0px;
padding: 0px;
}
.containerMap {
width: 100%;
height: calc(100% - 40px);
margin: 0px;
font-size: 13px;
position: relative;
z-index: 1;
}
.scanCode {
position: fixed;
z-index: 2;
left: calc(50% - 155px);
bottom: 20px;
}
.scanCode .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);
}
.content-window-card {
position: relative;
box-shadow: none;
bottom: 0;
left: 0;
width: auto;
padding: 0;
}
.content-window-card p {
height: 2rem;
}
.custom-info {
border: solid 1px silver;
}
div.info-top {
position: relative;
background: none repeat scroll 0 0 #F9F9F9;
border-bottom: 1px solid #CCC;
border-radius: 5px 5px 0 0;
}
div.info-top div {
display: inline-block;
color: #333333;
font-size: 14px;
font-weight: bold;
line-height: 31px;
padding: 0 10px;
}
div.info-top img {
position: absolute;
top: 10px;
right: 10px;
transition-duration: 0.25s;
}
div.info-top img:hover {
box-shadow: 0px 0px 5px #000;
}
div.info-middle {
padding: 5px;
width: 196px;
height: 118px;
color: #ffffff;
line-height: 17px;
background: rgba(0, 0, 0, 0.7);;
border-radius: 2px;
}
.input-card {
background-color: transparent !important;
}
div.info-top div {
color: #ffffff;
background: #000000;
}
div.info-top {
background: #000000;
}
div.info-bottom {
height: 0px;
width: 100%;
clear: both;
text-align: center;
}
div.info-bottom img {
position: relative;
z-index: 104;
}
span {
margin-left: 5px;
font-size: 11px;
}
.info-middle img {
float: left;
margin-right: 6px;
}
/*弹窗内按钮样式预留*/
.text-button {
border: 0px;
height: 24px;
width: 60px;
margin-left: 20px;
color: white;
background: #00CA9D;
margin-top: 10px;
opacity: 1;
border-radius: 12px;
}
.button-right {
margin-right: 20px;
float: right;
}
#container {
width: 100%;
height: 100%;
}
#panel {
position: fixed;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
}
#panel .amap-call {
background-color: #009cf9;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
#panel .amap-lib-walking {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
overflow: hidden;
}
.showMap {
width: 100%;
height: 100%;
}
div.info-top img {
width: 15px;
}
.myMap >>> .pg-navigation .nearby_top_goback {
margin-left: 10px;
width: 0px !important;
height: 0px !important;
}
</style>
\ No newline at end of file
src/views/navigation.vue 0 → 100644
View file @ c70a20de
<template>
<div style="width: 100%;height:100%">
<iframe id="tes" ref="mainIframe" src="./static/test.html" class="showMap"></iframe>
</div>
</template>
<script>
export default {
name: "navigation",
mounted() {
let LngLat=[this.$route.query.Lng,this.$route.query.Lat]
setTimeout(() => {
this.$refs.mainIframe.contentWindow.addText(LngLat);
}, 1000)
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/receiveSuccess.vue 0 → 100644
View file @ c70a20de
<template>
<div>
<mt-header title="领取成功">
<router-link to="/" slot="left">
<mt-button icon="back"></mt-button>
</router-link>
</mt-header>
<div class="success-img">
<img src="../assets/img/receiveSuccess.png"/>
<div class="tips">
温馨提示：对于同一种避孕药具，一个人一个季度最多领取三盒
</div>
</div>
<div class="backHome">
<mt-button type="primary" @click="backHome">返回首页</mt-button>
</div>
</div>
</template>
<script>
export default {
name: "receiveSuccess",
methods:{
backHome(){
this.$router.push("/");
}
}
}
</script>
<style scoped>
.tips{
color: #747971;
font-size: 14px;
padding: 10px 30px 20px;
}
.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>
\ No newline at end of file
src/views/returnVisit.vue 0 → 100644
View file @ c70a20de
<template>
<div>
<mt-header title="填写随访">
<router-link to="/" slot="left">
<mt-button icon="back"></mt-button>
</router-link>
</mt-header>
<div class="remarks">
注：药具领取前需填写之前的使用情况
</div>
<form>
<div class="subject">
<mt-radio
title="使用是否满意"
align="left"
v-model="formData.isAgree"
:options="options1">
</mt-radio>
<div v-if="formData.isAgree==='1'">
<input type="text" 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">
</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">
<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)">
<input type="text" v-model="formData.otherBadReaction" @blur="blurOtherBadReaction" placeholder="请填写其他不良反应"/>
<label class="checkMsg" v-if="formData.checkOtherBadReaction">请填写其他不良反应</label>
</div>
</div>
</div>
</form>
<div class="sub-badReaction">
<mt-button type="primary" @click="subReturnVisit">提 交</mt-button>
</div>
</div>
</template>
<script>
export default {
name: "returnVisit",
data() {
return {
options1: [{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}],
formData: {
isAgree:'0',
isBadReaction:'0',
badReaction: [],
checkDisagreeReason:false,
checkOtherBadReaction:false,
checkBadReaction:false
}
}
},
methods:{
blurDisagreeReason(){
this.formData.checkDisagreeReason=this.formData.disagreeReason===''||this.formData.disagreeReason===undefined;
},
blurOtherBadReaction(){
this.formData.checkOtherBadReaction=this.formData.otherBadReaction===''||this.formData.otherBadReaction===undefined;
},
changeBadReaction(){
this.formData.checkBadReaction=this.formData.badReaction.length<1|| this.formData.badReaction===undefined;
},
subReturnVisit(){
let flag=true;
if(this.formData.isAgree==='1'){
this.blurDisagreeReason();
if(this.formData.checkDisagreeReason){
flag=false;
}
}
if(this.formData.isBadReaction==='1'){
this.changeBadReaction();
if(this.formData.checkBadReaction){
flag=false;
}
if(this.formData.badReaction.includes(5)){
this.blurOtherBadReaction();
if(this.formData.checkOtherBadReaction){
flag=false;
}
}
}
/*验证完毕*/
if(flag){
console.log(this.formData);
}else {
return false;
}
}
}
}
</script>
<style>
.checkMsg{
color: red;
}
.remarks {
background-color: #F5F6F8;
padding: 5px 0px 5px 20px;
}
.subject {
padding: 5px 0px 5px 20px;
}
.subject .mint-cell:not(:last-child) {
float: left;
}
.subject input[type=text] {
border: none;
outline: none;
width: 100%;
padding-left: 5px;
border-bottom: 1px solid #F0F0F0;
color: #6E6166;
}
.badReaction {
width: 100%;
border-top: 1px solid #F0F0F0;
padding-top: 10px;
padding-left: 5px;
}
.hidden {
opacity: 0;
position: absolute;
z-index: 11;
}
input[type=checkbox] + span {
display: inline-block;
height: 16px;
width: 16px;
border-radius: 3px;
background-color: white;
border: 1px solid #cccccc;
}
input[type=checkbox]:checked + span {
background-color: #00CA9D;
}
.txt {
position: relative;
top: -3px;
left: 3px;
}
.sub-badReaction {
position: fixed;
z-index: 2;
left: calc(50% - 155px);
bottom: 20px;
}
.sub-badReaction .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>
\ No newline at end of file
src/views/siteDetails.vue 0 → 100644
View file @ c70a20de
<template>
<div class="siteDetails">
<mt-header title="网点详情">
<router-link to="/" slot="left">
<mt-button icon="back"></mt-button>
</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="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>
</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>
</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>
<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>
</div>
</template>
<script>
export default {
name: "siteDetails",
data() {
return {
distance: 0,
siteDetail: {
id: 4,
name: "大悦城发放机",
LngLat: [102.714625, 25.02158],
address: "大悦城发放机发放点详细地址",
contacts: "梨花",
phone: "13669772255"
},
}
},
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]);
},
methods: {
clickAddress(){
console.log(123);
},
clickPhone(){
console.log(456);
},
getDistance(latFrom, lngFrom, latTo, lngTo) {
var rad = function (d) {//计算角度
return d * Math.PI / 180.0;
}
var EARTH_RADIUS = 6378136.49;
var radLatFrom = rad(latFrom);
var radLatTo = rad(latTo);
var a = radLatFrom - radLatTo;
var b = rad(lngFrom) - rad(lngTo);
var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLatFrom) * Math.cos(radLatTo) * Math.pow(Math.sin(b / 2), 2)));
distance = distance * EARTH_RADIUS;
distance = Math.round(distance * 10000) / 10000;
return parseFloat(distance.toFixed(0));
},
}
}
</script>
<style scoped>
.siteDetailInfo{
font-size: 15px;
padding: 10px 20px;
border-top: 1px solid #F5F6F8;
border-bottom: 5px solid #F5F6F8;
}
.siteName{
font-weight: bold;
font-size: 18px;
margin-bottom: 10px;
}
.btn {
color: #00CA9D;
background-color: #FFFFFF;
border: 0px none;
margin-top: 2px;
margin-right: 5px;
padding: 0;
font-family: "宋体";
font-size: 15px;
}
.btn:focus {
outline: none;
}
.ui-flex {
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
box-sizing: border-box
}
.ui-flex.justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
}
.ui-flex.center {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.content-list{
width: 100%;
height: calc(100% - 185px);
}
.content-item{
padding: 10px 10px 0 20px;
border-bottom: 5px solid #F5F6F8;
height: 150px;
}
.content-item:first-child{
padding-top: 0;
}
.content-item img{
width: 85px;
max-height: 100px;
float: left;
display: inline-block;
vertical-align: middle;
}
.tradeName{
font-size: 14px;
}
.tradeInfo{
float: left;
width:calc(100% - 90px);
padding-left: 10px;
}
</style>
\ No newline at end of file
vue.config.js 0 → 100644
View file @ c70a20de
const IsProd = process.env.NODE_ENV === 'prod';
const date = new Date();
const Version=''+date .getFullYear()+date .getMonth()+date .getDate()+date.getHours();
module.exports = {
runtimeCompiler: true,
indexPath: "index.html",
assetsDir:'static',
publicPath: './', // 设置打包文件相对路径
outputDir: 'dist',
configureWebpack: {
//关闭 webpack 的性能提示
performance: {
hints: false
},
externals: {
"AMap":'AMap',
'demoutils':'demoutils'
},
output: { // 输出重构 打包编译后的 文件名称 【版本号】
filename: `js/[name].${Version}.js`,
chunkFilename: `js/[name].${Version}.js`,
}
},
productionSourceMap: IsProd ? false : true,
chainWebpack:(config)=>{
config.plugins.delete('preload');
config.plugins.delete('prefetch');
}
}
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