mz/pages/patient/index.vue

<template>
	<view class="container">
		<view class="Search-box flex" @click="seacher()">
			<view class="Search-box flex">
				<image class="box-img" src="../../static/img/shousuo.png"></image>
				<font class="box-word">请输入关键字</font>
			</view>
			<view class="Search-word"><text class="word">搜索</text></view>
		</view>
		<scroll-view scroll-y class="second-part">
			<view v-for="(item, index) in bastList" :key="index" class="template flex">
				<view class="flex">
					<view class="left-img"><image src="/static/img/28.png" mode="aspectFit" style="width: 140rpx;height: 140rpx;border-radius: 50%;"></image></view>
					<view class="center-word">
						<text class="one">{{ item.name }}</text>
						<text class="two">{{ item.Company }}</text>
					</view>
				</view>
				<view class="right-label flex" @click="open">
					<image src="../../static/img/img014.png"></image>
					咨询问诊
				</view>
			</view>
		</scroll-view>
		<!-- 资讯医生弹出层 -->
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<image class="img" mode="widthFix" src="../../static/img/img24.png"></image>
				<view class="row">
					<view class="row-1">确认咨询该医生？</view>
					<view class="row-2">
						<text>咨询费用:</text>
						<text style="color: #DE504C;">￥100</text>
					</view>
					<button class="row-3 flex" @click="twoopen">马上咨询</button>
				</view>
			</view>
			<view class="close_icon" @click="close"><image src="../../static/img/img016.png"></image></view>
		</uni-popup>
		<uni-popup ref="popup1" type="bottom">
			<view class="payment">
				<view class="first flex1 ">
					<text class="word1">选择支付方式</text>
					<image style="width: 20rpx;height: 20rpx;" src="../../static/img/img25.png"></image>
				</view>
				<view class="second flex1">
					<view class="flex">
						<image mode="widthFix" style="width: 40rpx;margin-right: 20rpx;" src="../../static/img/img26.png"></image>
						<text class="weixin">微信支付</text>
					</view>
					<view class="radio-active"></view>
				</view>
				<view class="second flex1">
					<view class="flex">
						<image mode="widthFix" style="width: 40rpx;margin-right: 20rpx;" src="../../static/img/img017.png"></image>
						<text class="weixin">余额支付</text>
					</view>
					<view class="radio-active"></view>
				</view>
				<view class="Third">
					<view class="one"></view>
					<view class="two flex1">
						<view class="two1">
							<text class="two1-1 ">合计：</text>
							<text class="two1-2">￥</text>
							<text class="two1-2 size">200.0</text>
						</view>
						<view class="two2 flex"><text>立即支付</text></view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			bastList: [
				{
					name: '李淡淡',
					Company: '浙江六牛科技有限公司',
					direction: 'UI设计',
					time: 5
				},
				{
					name: '李淡淡',
					Company: '浙江六牛科技有限公司',
					direction: 'UI设计',
					time: 5
				},
				{
					name: '李淡淡',
					Company: '浙江六牛科技有限公司',
					direction: 'UI设计',
					time: 4
				},
				{
					name: '李淡淡',
					Company: '浙江六牛科技有限公司',
					direction: 'UI设计',
					time: 5
				}
			] //最新商品
		};
	},
	methods: {
		//咨询问诊
		open() {
			this.$refs.popup.open();
		},
		//关闭咨询
		close() {
			this.$refs.popup.close();
		},
		//马上咨询
		twoopen() {
			this.$refs.popup.onTap();
			this.$refs.popup1.open();
		}
	}
};
</script>

<style lang="scss">
.container {
	.flex {
		display: flex;
		align-items: center;
	}
	.Search-box {
		overflow: hidden;
		width: 100%;
		padding: 20rpx;
		background-color: #ffffff;
		justify-content: space-around;
		.Search-box {
			width: 89%;
			height: 72rpx;
			border-radius: 36rpx;
			background-color: #f8f6f6;
			justify-content: flex-start;
			padding-left: 54rpx;
			.box-img {
				height: 30rpx;
				width: 30rpx;
				margin-right: 20rpx;
			}
			.box-word {
				font-size: $uni-font-size-base - 2rpx;
				font-weight: 500;
				color: #666666;
			}
		}
		.Search-word {
			width: 11%;
			font-size: $uni-font-size-lg - 2rpx;
			font-weight: 500;
			color: #666666;
			.word {
				float: right;
			}
		}
	}
	.second-part {
		padding: 20rpx;
		.template {
			width: 100%;
			background: #ffffff;
			overflow: hidden;
			padding: 20rpx;
			box-shadow: 0px 5px 5px 0px rgba(35, 24, 21, 0.06);
			margin-bottom: 18rpx;
			border-radius: 12rpx;
			position: relative;
			.left-img {
				width: 140rpx;
				float: left;
				overflow: hidden;
				margin-right: 30rpx;
			}
			.center-word {
				.one {
					font-size: $uni-font-size-lg - 2rpx;
					font-weight: 500;
					color: $uni-text-color;
					line-height: 36rpx;
					display: block;
					margin-bottom: 10rpx;
				}
				.two {
					font-size: $uni-font-size-sm;
					font-weight: 500;
					color: #666666;
					line-height: 36rpx;
					display: block;
				}
			}

			.right-label {
				padding: 16rpx;
				border: 1px solid $base-color;
				border-radius: 7rpx;
				font-size: $font-sm - 1rpx;
				font-weight: 500;
				color: $base-color;
				align-items: center;
				image {
					width: 30rpx;
					height: 26rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
}

.popup {
	width: 536rpx;
	.img {
		width: 100%;
	}
	.row {
		background: #ffffff;
		overflow: hidden;
		border-radius: 0 0 10rpx 10rpx;
		padding: 45rpx 45rpx;
		margin-top: -15rpx;
		.row-1 {
			font-size: $font-lg + 4rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 53rpx;
			text-align: center;
		}
		.row-2 {
			font-size: $uni-font-size-lg;
			font-weight: 500;
			color: $font-color-dark;
			line-height: 44rpx;
			text-align: center;
			margin-top: 35rpx;
		}
		.row-3 {
			width: 80%;
			height: 70rpx;
			margin: 0 auto;
			margin-top: 40rpx;
			background: linear-gradient(0deg, rgba(126, 153, 254, 1), rgba(151, 143, 250, 1));
			border-radius: 34rpx;
			justify-content: center;
			font-size: $uni-font-size-lg + 4rpx;
			font-weight: 500;
			color: #f8f9f9;
		}
	}
}
.close_icon {
	width: 52rpx;
	height: 52rpx;
	margin: 88rpx auto 0;
	image {
		width: 100%;
		height: 100%;
	}
}
.payment {
	overflow: hidden;
	background-color: #f6f6f6;
	border-radius: 10rpx 10rpx 0rpx 0rpx;
	.first {
		height: 90rpx;
		overflow: hidden;
		border-bottom: 2rpx solid $border-color-light;
		padding: 0 25rpx;
		background-color: #ffffff;
		.word1 {
			font-size: $uni-font-size-base;
			font-weight: bold;
			color: $font-color-dark;
		}
	}
	.second {
		padding: 0 25rpx;
		background-color: #ffffff;
		.weixin {
			font-size: $uni-font-size-base;
			font-weight: 400;
			color: $font-color-dark;
			line-height: 100rpx;
		}
		.radio {
			width: 35rpx;
			height: 35rpx;
			border-radius: 50%;
			background-size: 35rpx;
			background-position: center;
			background-image: url('http://lxscimg.liuniu946.com/2019-11-29_5de0badfc57f7.png');
		}
		.radio-active {
			width: 35rpx;
			height: 35rpx;
			border-radius: 50%;
			background-size: 35rpx;
			background-position: center;
			background-image: url(../../static/icon/img10.png);
		}
	}
	.Third {
		.one {
			height: 20rpx;
			background-color: #f6f6f6;
		}
		.two {
			.two1 {
				width: 55%;
				height: 90rpx;
				background-color: #ffffff;
				padding-left: 25rpx;
				.two1-1 {
					font-size: $uni-font-size-base;
					font-weight: 400;
					color: $font-color-dark;
					line-height: 100rpx;
				}
				.two1-2 {
					font-size: $uni-font-size-sm;
					font-weight: bold;
					color: $color-red1;
					line-height: 55rpx;
				}
				.size {
					font-size: $uni-font-size-lg + 4rpx;
				}
			}
			.two2 {
				height: 90rpx;
				width: 45%;
				background: $color-red1;
				color: #ffffff;
				font-size: $uni-font-size-lg;
				font-weight: 550;
				justify-content: center;
			}
		}
	}
}
.flex {
	display: flex;
	align-items: center;
}
.flex1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>