Skip to content

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

App1

parent 7063c0b6
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1174 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 diff is collapsed.
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
This diff is collapsed.
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