weCom/pages/index/package.vue

<template>
	<view class="content">
	<view class="box">
		<view class="line" @click="detailFn(1)">
				 <view class="lineNameBox">
					 <view class="lnameLeft">
						 <view class="type">储值</view>
						 <view class="lname">储值名称一</view>
					 </view>
					 <view class="lBtn">使用条款</view>
				 </view>
				 <view class="lprice">
					 <span class="price1">￥</span>
					 <span class="price2">4566</span>
					 <span class="price3">( 充10000送1000 )</span>
				 </view>
				 <view class="lShop">
					 <view class="lShopName">可用门店：这是门店名称</view>
					 <image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
				 </view>
		</view>
		<view class="line" @click="detailFn(2)">
				 <view class="lineNameBox">
					 <view class="lnameLeft">
						 <view class="type">计次</view>
						 <view class="lname">储值名称一</view>
					 </view>
					 <view class="lBtn">使用条款</view>
				 </view>
				 <view class="lprice">
					 <span class="price1">￥</span>
					 <span class="price2">4566</span>
					 <span class="price3">( 充10000送1000 )</span>
				 </view>
				 <view class="lShop">
					 <view class="lShopName">可用门店：这是门店名称</view>
					 <image class="carUpimg" src="../../static/img/icon_arrow_up.png" mode=""></image>
				 </view>
		</view>
	</view>
	 
	 
	 
	 <uni-popup ref="popup" type="bottom" >
	 	<view class="popupBox" v-if="type==1">
	 	  <view class="popupTitleBox">
	 		  <view class="popupTitle">储值详情</view>
	 		  <image src="../../static/img/cha.png" mode="" class="chaImg"></image>
	 	  </view>
		  <view class="dlineBox">
			  <view class="dLine" v-for="(item,index) in 20">
				  <view class="dlineTime">06-13 11:28</view>
				  <view class="dlineprice1">-￥1.00</view>
			  </view>
		  </view>
	 	</view>
		
		<view class="popupBox" v-if="type==2">
		  <view class="popupTitleBox">
			  <view class="popupTitle">计次详情</view>
			  <image src="../../static/img/cha.png" mode="" class="chaImg"></image>
		  </view>
		  <view class="dlineBox">
			  <view class="dLine2" v-for="(item,index) in 20">
				<view class="jcNameBox">
						<view class="jcType">项目</view>
						<view class="jcNameTxt">王艳王岩</view>
				</view>
				<view class="jcTitme">
					<view class="jcYxq">有效期：2019-09-09</view>
					<view class="jcNum">
						<span>剩余/总：<span style="color: #FF3B30;">10</span> /23</span>
					</view>
				</view>
			  </view>
		  </view>
		</view>
	 	
	 </uni-popup>
	 
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:1,
			}
		},
		onLoad() {

		},
		methods: {
          detailFn(num){
			  this.type=num;
			  this.$refs.popup.open('bottom')
		  }
		}
	}
</script>

<style scoped>
.carUpimg{
		width: 26rpx;height: 16rpx;
	}
.box{
	padding: 0 24rpx;
}
.line{
	background: #fff;
	padding: 30rpx 20rpx;
	border-radius: 10rpx;
	margin-top: 20rpx;
}
.lineNameBox{
	display: flex;justify-content: space-between;
	padding-bottom: 10rpx;
}
.lnameLeft{
	display: flex;
}
.type{
	idth: 64rpx;
	height: 36rpx;
	background: #FF8113;
	border-radius: 5rpx;
	font-size: 24rpx;
	color: #FFFFFF;
	text-align: center;
	line-height: 36rpx;
	margin-top: 8rpx;
}
.lname{
	font-size: 28rpx;
	color: #333333;
	line-height: 52rpx;
	padding-left: 12rpx;
}
.lBtn{
	width: 136rpx;
	height: 52rpx;
	background: #FFFFFF;
	border-radius: 28rpx;
	border: 1rpx solid #DDDDDD;
	font-size: 24rpx;
	color: #3C3C3C;
	text-align: center;
	line-height: 52rpx;
}
.price1{
	font-size: 24rpx;
	color: #FF3B30;
}
.price2{
	font-size: 36rpx;
	color: #FF3B30;
}
.price3{
	font-size: 24rpx;
	color: #3C3C3C;
}
.lShop{
	display: flex;
	justify-content: space-between;
	padding-top: 10rpx;
}
.lShopName{
	font-size: 24rpx;
	color: #999999;
}
.popupBox{
		width: 750rpx;
		height: 60vh;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: relative;
	}
	.popupTitleBox{
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
	}
	.popupTitle{
		font-size: 30rpx;
		color: #3C3C3C;
		line-height: 42rpx;
	}
	.chaImg{
		width: 27rpx;height: 27rpx;margin-top: 9rpx;
	}
	.dLine{
		display: flex;
		justify-content: space-between;
		padding: 24rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.dLine2{
		padding: 24rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.dlineTime{
		font-size: 26rpx;
		color: #3C3C3C;
	}
	.dlineprice1{
		font-weight: 500;
		font-size: 26rpx;
		color: #3C3C3C;
	}
	.dlineBox{
		height: calc(60vh - 120rpx);
		overflow-y: auto;
	}
	.jcNameBox{
		display: flex;
	}
	.jcType{
		width: 62rpx;
		height: 32rpx;
		border-radius: 5rpx;
		border: 1px solid #F19D01;
		text-align: center;
		line-height: 32rpx;
		font-size: 24rpx;
		color: #F19D01;
	}
	.jcNameTxt{
		font-size: 26rpx;
		color: #333333;
		padding-left: 10rpx;
		line-height: 36rpx;
	}
	.jcTitme{
		display: flex;justify-content: space-between;
		padding-top: 20rpx;
	}
	.jcYxq{
		font-size: 24rpx;
		color: #999999;
	}
	.jcNum{
		font-size: 24rpx;
		color: #999999;
	}
</style>