medicine-xcx/pagesA/my_other_list/prescription/medicine/index.vue

<template>
	<view class="medicine">
		<view class="top"></view>
		<view class="steps">
			<text>上传处方</text>
			<u-icon name="arrow-rightward" size="15"></u-icon>
			<text>药师接单与审方</text>
			<u-icon name="arrow-rightward" size="15"></u-icon>
			<text>审方通过</text>
			<u-icon name="arrow-rightward" size="15"></u-icon>
			<text>在线支付</text>
			<u-icon name="arrow-rightward" size="15"></u-icon>
			<text>发货</text>
		</view>
		<view class="card">
			<view class="title_box">
				<text class="title">请上传清晰完整的处方照片</text>
				<button class="look" @click="lookMode">查看处方示例</button>
			</view>
			<text class="hint_info">药师将根据您上传的处方单信息为您抓药</text>
			<view class="upload">
				<u-upload :header="headerOptions" width="200" height="200" :action="action" @on-success="uploadSuccess" @on-error="uploadErr" @on-remove="uploadRemove" ></u-upload>
			</view>
		</view>
		
		<!-- 用药人 -->
		<view class="user">
			<view class="to_medicine_man" @click="selectUser"  v-if="!drugUserInfo">
				<text class="title">添加用药人信息</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<select-drug-user  v-if="drugUserInfo" :DrugInfo='drugUserInfo' :type="2" @selectUser="selectUser"></select-drug-user>
		</view>
		
		<!-- 提交 -->
		<view class="footer flex align-center justify-center">
			<button @click="toSuccess" class="add_btn">提交处方</button>
		</view>
		
		<!-- 示例图片 -->
		<view class="mask" v-show="show">
			<view class="show_box">
				<view class="clear_medicine_pic">
					<u-icon name="close" size="40" color="#fff" @click="toCloseShow"></u-icon>
				</view>
				<image class="medicine_pic" :src="img_url+'medicine_pic.png'" mode=""></image>
			</view>
		</view>
			
	</view>
</template>

<script>
	import config from "@/utils/js/config.js"
	import { UPLOAD_IMG, TOKEN_HEADER_NAME } from '@/config/settings.js'
	
	export default {
		data() {
			return {
				action: UPLOAD_IMG,
				img_url: config.img_url, 
				show: false,
				drugUserInfo: null,
				type: '',
				fileList: [],
				address: {},
				url: ''   ,// 保存进来的地址 防止用户添加信息后 返回路径混乱
				// 购买的商品数据
				goodsId: '',
				isSituation: 0,
				num: '',
				price: '',
				goodSkuParam: '',
				prescriptionId: 0,
				isZone: '',
				prescription: null,   // 0 从home页来 1 从商品页来
				createOrderType: '',
				orderType: '',
				payType: ''
			}
		},
		onLoad(options) {
			// 保存用户从那里来  选择地址后 原来返回
			let pages_url = getCurrentPages();
			this.url = pages_url[pages_url.length -2].route;
			
			this.orderType = options.orderType;
			this.payType = options.payType;
			this.createOrderType = options.createOrderType;
			this.goodsId = options.goodsId;
			this.isSituation = options.isSituation;
			this.num = options.num;
			this.price = options.price;
			this.goodSkuParam = options.goodSkuParam;
			this.prescriptionId = options.prescriptionId
			this.isZone = options.isZone
			this.prescription = this.prescription == 0 ? 0: 1;// 0 从home页来 1 从商品页来
			
			this.type = options.type
			uni.$on('uploadDrugUserInfo', obj => {
				console.log('-------------')
				this.drugUserInfo = obj
			})
			uni.$on('getAddressId', obj => {
				// 获取用户选择的地址
				this.drugUserInfo = obj
			})
		},
		onUnload() {
			uni.$off('uploadDrugUserInfo');
			uni.$off('getAddressId');
			this.$tools.navigateTo({
				url: this.url
			})
		},
		computed: {
			headerOptions () {
				return {
					[TOKEN_HEADER_NAME]: this.$store.state.userToken
				}
			}
		},
		methods: {
			// 查看示例图
			lookMode() {
				this.show = true;
			},
			toCloseShow() {
				this.show = false;
			},
			toSuccess() {
				console.log(this.fileList)
				if (!this.fileList.length) return this.$Toast('请上传处方照片')
				if (!this.drugUserInfo) return this.$Toast('请添加用药人信息');
				
				this.$api('patter', { drugUserId: this.drugUserInfo.id, pic: this.fileList.join() })
				.then(res => {
					console.log(res.result.id)
					if (res.code === 200) {
						if(this.type == 'prescription'){
							this.$tools.navigateTo({
								url: `/pagesC/subscribe/confirmSubscribe?addressId=${this.drugUserInfo.id}&orderType=${this.orderType}&imgUploadShow=${this.fileList.toString()}&medicineMan=${JSON.stringify(this.drugUserInfo)}&goodsId=${this.goodsId}&num=${this.num}&price=${this.price}&goodSkuParam=${this.goodSkuParam}&prescriptionId=${this.drugUserInfo.id}&createOrderType=${this.createOrderType}&payType=${this.payType}&isZone=${this.isZone}&patterId=${res.result.id}`
							})
						}else {
							uni.navigateTo({
								url: "./../success/index"
							})
						}
					}else{
						this.$Toast(res.message)
					}
				}).catch(err => {
					this.$Toast(err.message)
				})
			},
			
			selectUser () {
				this.$tools.navigateTo({
					url: `/pagesA/my_other_list/prescription/select_medicine_man/index?type=${this.type}&goodsId=${this.goodsId}&isSituation=${this.isSituation}&num=${this.num}&price=${this.price}&goodSkuParam=${this.goodSkuParam}&prescriptionId=${this.prescriptionId}`
				})
			},
			uploadSuccess (res) {
				this.fileList.push(res.result)
			},
			uploadErr (err) {
				console.log(res)
			},
			uploadRemove (index, lists) {
				this.fileList.splice(index, 1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.medicine {
		padding-bottom: 140rpx;
	}
  .top{
		position: fixed;
		z-index: -1;
		top: 0;
		left: 0;
		width: 100%;
		height: 636rpx;
		background: linear-gradient(180deg,#01aeea, #f1fbff);
	}
	.steps{
		font-size: 28rpx;
		color: #E9E9E9;
		padding-top: 57rpx;
		padding-left: 17rpx;
		display: flex;
		align-items: center;
		text{
			padding-right: 7rpx;
			padding-left: 7rpx;
		}
	}
	.card{
		width: 717rpx;
		margin: 0 auto;
		margin-top: 60rpx	;
		border-radius: 12rpx;
		background-color: #fff;
		.title_box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 17rpx;
			box-sizing: border-box;
			.title{
				font-size: 34rpx;
				font-weight: bold;
				margin-left: 28rpx;
				color: #000;
			}
			.look{
				// width: 136rpx;
				height: 48rpx;
				padding: 10rpx;
				background-color: #eee;
				border-radius: 18rpx;
				border: 1px solid #01AEEA;
				color: #01AEEA;
				font-size: 30rpx;
				margin-right: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.hint_info{
			display: inline-block;
			padding-top: 27rpx;
			padding-bottom: 44rpx;
			margin-left: 28rpx;
			font-size: 30rpx;
			box-sizing: border-box;
			color: #B7B7B7;
		}
		.upload{
			padding-left: 10rpx;
			padding-bottom: 44rpx;
		}
	}
	.user{
		width: 717rpx;
		margin: 15rpx auto 0;
		border-radius: 12rpx;
		background-color: #fff;
		box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);
		.to_medicine_man{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title{
				padding-left: 28rpx;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				font-size: 32rpx;
			}
			/deep/ .u-icon__icon{
				padding-right: 37rpx;
			}
		}
		
	}
	
	.footer {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #fff;
		height: 120rpx;
	}
	.add_btn{
		width: 668rpx;
		height: 88rpx;
		border-radius: 38rpx;
		background-color: #01AEEA;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		font-size: 32rpx;
	}
	
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 22;
		width: 100%;
		height: 100%;
		background-color: #000;
		.show_box{
			width: 750rpx;
			height: 100vh;
			.clear_medicine_pic{
				display: flex;
				justify-content: flex-end;
				padding-top: 42rpx;
				padding-right: 46rpx;
				padding-bottom: 50rpx;
				height: 140rpx;
				box-sizing: border-box;
			}
			.medicine_pic{
				width: 750rpx;
				height: 1026rpx;
			}
		}
	}
	.box {
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
		
		.name_box {
			font-size: 28rpx;
			color: #000;
			margin-top: 37rpx;
			margin-bottom: 17rpx;
		
			.name_btn {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #0C85FF;
				border-radius: 10rpx;
				border: 1px solid #0C85FF;
				padding: 5rpx 10rpx;
			}
			
		}
		
		.other_info {
			display: flex;
			font-size: 24rpx;
			padding-bottom: 23rpx;
			color: #000;
		
			text {
				margin-right: 38rpx;
			}
		}
	}
	
</style>