hwq 3 years ago
parent
commit
c44a9586ca
3 changed files with 267 additions and 4 deletions
  1. 8 0
      pages/hall/hallpay.vue
  2. 133 0
      pages/hall/history.vue
  3. 126 4
      pages/hall/porducthall.vue

+ 8 - 0
pages/hall/hallpay.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

+ 133 - 0
pages/hall/history.vue

@@ -0,0 +1,133 @@
+<template>
+	<view class="center">
+		<view class="product">
+			<image class="product-image" src="../../static/img/afternoon.png" mode=""></image>
+			<view class="product-font font1">趣豆商城挂售礼盒</view>
+			<view class="product-font font2">艺术家:李丹丹</view>
+			<view class="product-font font2">创作时间:2022年01月30日</view>
+		</view>
+		<view class="main">
+			<view class="main-item">
+				<view class="main-left">日期</view>
+				<view class="main-right">归属人</view>
+			</view>
+			<view class="main-item">
+				<view class="main-left">2022年01月20日</view>
+				<view class="main-right">林兰</view>
+			</view>
+			<view class="main-item">
+				<view class="main-left">2022年01月20日</view>
+				<view class="main-right">林兰</view>
+			</view>
+			<view class="main-item">
+				<view class="main-left">2022年01月20日</view>
+				<view class="main-right">林兰</view>
+			</view>
+			<view class="main-item">
+				<view class="main-left">2022年01月20日</view>
+				<view class="main-right">林兰</view>
+			</view>
+		</view>
+		<view class="ma">
+			<view class="ma-main">
+				
+			</view>
+			<view class="ma-font">
+				溯源二维码
+			</view>
+		</view>
+	</view>
+</template>
+
+<script></script>
+
+<style lang="scss">
+.center {
+	background: #f8f8f8;
+	height: auto;
+	min-height: 100%;
+}
+.product {
+	width: 670rpx;
+	padding: 44rpx 0 40rpx 0;
+	background: #ffffff;
+	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+	border-radius: 20rpx;
+	margin: 34rpx auto 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	.product-image {
+		width: 300rpx;
+		height: 300rpx;
+		border-radius: 20rpx;
+	}
+	.product-font {
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #1d2023;
+	}
+	.font1 {
+		margin-top: 34rpx;
+	}
+	.font2 {
+		margin-top: 44rpx;
+	}
+}
+.main {
+	width: 670rpx;
+	background: #ffffff;
+	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+	border-radius: 20rpx;
+	margin: 30rpx auto 0;
+	.main-item:first-child {
+		border-top: none;
+	}
+	.main-item {
+		padding: 2rpx 20rpx;
+		display: flex;
+		align-items: center;
+		height: 104rpx;
+		border-top: 1px solid #dddddd;
+		.main-left {
+			width: 50%;
+			text-align: center;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #1d2023;
+		}
+		.main-right {
+			width: 50%;
+			text-align: center;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #1d2023;
+		}
+	}
+}
+.ma {
+	width: 670rpx;
+	padding: 46rpx 0;
+	background: #FFFFFF;
+	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+	border-radius: 20rpx;
+	margin: 30rpx auto 0;
+	.ma-main {
+		width: 300rpx;
+		height: 300rpx;
+		margin: 0 auto;
+		background: #000;
+	}
+	.ma-font {
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #1D2023;
+		margin-top: 34rpx;
+		text-align: center;
+	}
+}
+</style>

+ 126 - 4
pages/hall/porducthall.vue

@@ -27,7 +27,7 @@
 					<image class="tmr-image" src="../../static/img/shua.png" mode=""></image>
 					<view class="tmr-font">刷新倒计时</view>
 				</view>
-				<view class="tmr-item">
+				<view class="tmr-item" @click="nav('/pages/hall/history')">
 					<image class="tmr-image1" src="../../static/img/yuan.png" mode=""></image>
 					<view class="tmr-font">溯源</view>
 				</view>
@@ -87,22 +87,54 @@
 				<view class="bottom-num">200</view>
 			</view>
 			<view class="shu"></view>
-			<view class="bottom-item">
+			<view class="bottom-item" @click="openKf()">
 				<image class="bi-image" src="../../static/img/kf.png" mode=""></image>
 				<view class="bottom-font">联系</view>
 				<view class="bottom-num">客服</view>
 			</view>
 			<view class="btn">立即购买</view>
 		</view>
+		<uni-popup ref="popupkf" type="center">
+			<view class="popup-box">
+				<view class="img"><image src="../../static/img/img009.png" mode=""></image></view>
+				<view class="mian">
+					<view class="delivery">
+						<view class="title">已经为您定制专属客服</view>
+						<image src="../../static/img/img010.png" mode=""></image>
+					</view>
+					<view class="nocancel">客服VX:{{ text }}</view>
+					<view class="comfirm-box">
+						<view class="cancel" @click="cancel">取消</view>
+						<view class="comfirm" @click="comfirm(text)">复制微信</view>
+					</view>
+				</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
 export default {
 	data() {
-		return {};
+		return {
+			text:'123456',
+		};
 	},
-	methods: {}
+	methods: {
+		// 打开客服
+		openKf() {
+			this.$refs.popupkf.open();
+		},
+		// 关闭客服
+		cancel() {
+			this.$refs.popupkf.close();
+		},
+		nav(url) {
+			uni.navigateTo({
+				url
+			})
+		}
+	}
 };
 </script>
 
@@ -355,4 +387,94 @@ export default {
 		line-height: 80rpx;
 	}
 }
+.popup-box {
+	width: 522rpx;
+	height: 605rpx;
+	background-color: #ffffff;
+	border-radius: 20rpx;
+	position: relative;
+
+	.img {
+		position: relative;
+		top: -56rpx;
+		left: 0;
+		width: 522rpx;
+		height: 132rpx;
+		display: flex;
+		justify-content: center;
+
+		image {
+			border-radius: 20rpx 20rpx 0 0;
+			width: 450rpx;
+			height: 132rpx;
+		}
+	}
+
+	.mian {
+		margin-top: -44rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		// padding: 32rpx 32rpx;
+		background-color: #ffffff;
+		border-radius: 0 0 20rpx 20rpx;
+		text-align: center;
+
+		.delivery {
+			font-size: 40rpx;
+			color: #333333;
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+
+			.title {
+			}
+
+			image {
+				margin-top: 48rpx;
+				width: 172rpx;
+				height: 160rpx;
+			}
+		}
+
+		.nocancel {
+			font-size: 32rpx;
+			color: #333333;
+			margin-top: 14rpx;
+		}
+
+		.comfirm-box {
+			margin-top: 52rpx;
+			display: flex;
+			// margin-bottom: 32rpx;
+
+			// justify-content: space-around;
+			.cancel {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 197rpx;
+				height: 74rpx;
+				border: 1px solid #dcc786;
+				border-radius: 38rpx;
+
+				font-size: 32rpx;
+				color: #605128;
+			}
+
+			.comfirm {
+				margin-left: 32rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 197rpx;
+				height: 74rpx;
+				background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
+				border-radius: 38px;
+				font-size: 32rpx;
+				color: #605128;
+			}
+		}
+	}
+}
 </style>