hz-zhhq-app/pages/drugspush/drugspush-add.vue

419 lines
8.4 KiB
Vue

<template>
<view class="container">
<view class="banner-box">
<image src="/static/imgs/new-food-banner.png" mode=""></image>
</view>
<view class="main">
<view class="tab-box">
<view class="tab-item" style="width: 100%;">推荐药品</view>
</view>
</view>
<view class="content" >
<view class="interviewee">
<view class="form-box">
<view class="form-item">
<text class="label">药品名称:</text>
<view class="ipt-box"><input class="top-t" v-model="drugs.drugsName" placeholder="请输入药品名称" type="text" maxlength="10" /></view>
</view>
<!-- <view class="form-item">
<text class="label">菜品类型:</text>
<view class="ipt-box select">
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
<picker class="picker" v-if="kinds.length > 0" :range="kinds" @change="changeKinds" range-key="name">
<view>{{ kinds[kindsIndex].name }}</view>
</picker>
</view>
</view> -->
<view class="form-item">
<text class="label">推荐理由:</text>
<view class="ipt-box"><input class="top-t" v-model="drugs.remark" placeholder="请填写推荐理由" type="text" maxlength="50" /></view>
</view>
</view>
<view style="margin: 20upx;"><text class="input_left">药品图片</text></view>
<view class="pic">
<view class="img-box">
<view class="img-item" v-for="(item, index) in imgs" :key="index">
<image class="remove-btn" @click="removeImg(index)" src="/static/icons/delete-icon.png" mode=""></image>
<image class="img" :src="item" mode=""></image>
</view>
<view class="img-item upload-btn" @click="chooseImg()" v-if="imgs.length < 1"><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
</view>
</view>
</view>
<view class="occupied"></view>
<view class="footer-btn" @click="submit"><view class="btn">提交</view></view>
</view>
<!-- 检查列表 -->
</view>
</template>
<script>
import { submitDrugsPushAdd } from '@/common/api.js';
import { callbackRequest, getStorage, alertTip, convertImgToBase64, formatDate } from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
export default {
components: {
loadMore,
contentNone
},
data() {
return {
formatDate: formatDate,
//分页
userInfo: getStorage('userInfo'),
currentTabIndex: 0,
imgs: [],
kindsIndex:0,
drugs:{
drugsName:"",
remark:"",
drugsPicture:"",
creator:'',
},
};
},
onLoad() {
},
methods: {
changeKinds(e) {
this.kindsIndex = e.detail.value;
},
submit() {
if (!this.drugs.drugsName) {
alertTip('请输入药品名称');
return false;
}
// if (!this.this.feature.kinds) {
// alertTip('请输入详细位置');
// return false;
// }
if (!this.drugs.remark) {
alertTip('请输入推荐理由');
return false;
}
if(this.imgs.length==0){
alertTip('请上传药品图片');
return false;
}
//this.feature.kinds = this.kinds[this.kindsIndex].name;
this.drugs.drugsPicture = this.imgs[0];
this.drugs.creator = this.userInfo.id;
let params = {
method: submitDrugsPushAdd,
data: this.drugs
};
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
alertTip(res.returnMsg);
setTimeout(function() {
uni.navigateTo({
url:'/pages/drugspush/drugsPush?currentTabIndex=2'
})
}, 1500);
} else {
alertTip(res.returnMsg);
}
});
},
//上传图片
// chooseImg() {
// let _this = this;
// uni.chooseImage({
// count: 3,
// success: res => {
// let param = '';
// let imgArr = res.tempFilePaths;
// for (var i = 0; i < imgArr.length; i++) {
// param = imgArr[i];
// convertImgToBase64(param, function(base64) {
// _this.imgs.push(base64);
// });
// }
// }
// });
// },
chooseImg() {
let _this = this;
uni.chooseImage({
count: 3,
success: res => {
let param = '';
let imgArr = res.tempFilePaths;
for (var i = 0; i < imgArr.length; i++) {
param = imgArr[i];
uni.compressImage({
src: param,
quality: 80,
success: res1 => {
plus.io.resolveLocalFileSystemURL( res1.tempFilePath,
function(entry){
var reader = null;
entry.file( function ( file ) {
reader = new plus.io.FileReader();
reader.onloadend = function ( e ) {
_this.imgs.push(e.target.result);
};
reader.readAsDataURL( file );
}, function ( e ) {
alert( e.message );
} )
},
function(e){
console.log(e)
}
);
}
})
}
}
});
},
//删除图片
removeImg(index) {
this.imgs.splice(index, 1);
},
navTo(url) {
uni.navigateTo({
url
});
},
},
};
</script>
<style lang="scss">
@import url('../../static/css/repair/malfunction-repair.css');
@import '@/static/css/common.scss';
.nolist {
font-size: 30upx;
color: #797979;
text-align: center;
margin-top: 20upx;
}
.container {
position: relative;
overflow: hidden;
.banner-box {
width: 100%;
height: 240upx;
position: absolute;
top: 0;
left: 0;
image {
width: 100%;
height: 100%;
}
border-radius: 30upx;
}
.main {
margin: 172upx 40upx 0;
position: relative;
z-index: 10;
.tab-box {
overflow: hidden;
border-radius: 10upx 10upx 0 0;
background: rgba(132, 149, 167, 0.8);
height: 70upx;
.tab-item {
float: left;
height: 70upx;
width: 50%;
font-size: 30upx;
color: #e5f6ff;
text-align: center;
line-height: 70upx;
}
.active {
background: #fff;
color: #333;
border-radius: 10upx 10upx 0 0;
font-weight: bold;
}
}
}
}
.list-content {
font-size: 28upx;
margin: 0 40rpx;
.details {
background: white;
padding: 0 15upx 15upx;
// border-radius: 15upx;
margin-bottom: 10rpx;
.detail_header {
border-bottom: #f8f8f8 5upx solid;
height: 90upx;
line-height: 90upx;
// margin: 0;
// border-radius: 10upx;
.blueSign {
height: 28upx;
width: 5upx;
background: #00c277;
display: inline-block;
margin-left: 20upx;
vertical-align: middle;
}
.font-tilte {
font-weight: bold;
margin-left: 20upx;
vertical-align: middle;
}
}
.detail_msg {
margin-left: 20upx;
border-radius: 10upx;
overflow: hidden;
view {
height: 60upx;
line-height: 60upx;
}
.status {
position: absolute;
color: red;
margin-left: 580upx;
margin-top: -15upx;
}
}
}
}
.statusgr {
float: right;
margin-right: 30upx;
color: #00c277;
}
.statusred {
float: right;
margin-right: 30upx;
color: red;
}
.img-box {
overflow: hidden;
padding-top: 20rpx;
padding-bottom: 10rpx;
.img-item {
float: left;
width: 200upx;
height: 200upx;
border: 1px solid #ddd;
margin: 0 22rpx 20upx 0upx;
position: relative;
box-sizing: border-box;
.img {
display: block;
width: 100%;
height: 100%;
}
.remove-btn {
position: absolute;
top: -18upx;
right: -18upx;
width: 44upx;
height: 44upx;
z-index: 2;
}
}
.upload-btn {
.img {
width: 60upx;
height: 60upx;
margin: 70upx auto 0;
}
}
}
.detail_msg .info-item {
font-size: 28upx;
margin-right: 30upx;
text {
display: inline-block;
width: 140upx;
}
.infoSpan {
width: auto;
font-size: 28upx;
color: #666;
float: right;
}
}
.form-box {
background: #fff;
.form-item {
overflow: hidden;
border-bottom: 1px solid #eee;
padding: 30upx 20upx;
.label {
float: left;
width: 150upx;
font-size: 28upx;
color: #333;
font-weight: bold;
line-height: 50upx;
}
.ipt-box {
margin-left: 160upx;
input {
width: 100%;
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker {
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
margin-left: 10upx;
}
}
}
}
.comment-btn {
float: right;
font-size: 24upx;
border-radius: 10upx;
color: #fff;
// line-height: 30upx;
text-align: center;
min-width: 120upx;
margin-right: 30upx;
background-color: #00c277;
}
</style>