支付页面样式开发

common/styles/global/components.scss

@@ -319,4 +319,101 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 		// 播放按钮动画
 		.play-apply-animation{animation:unset;}
 	}
+}
+
+// 底部支付
+.footer-mall-pay-box{
+	width: 100%;background-color: #fff;position: absolute;bottom: 0;
+	display: flex;align-items: center;justify-content: space-between;
+	box-sizing: border-box;padding: 16rpx 12rpx  calc(16rpx + var(--window-bottom));
+	.mall-left-box{
+		font-size: 22rpx;color: #afafaf;
+		.price-icon-box{margin-bottom: 6rpx;}
+		.red-price{font-size: 56rpx;color:#ff0101;font-weight: bold;margin-right: 10rpx;}
+		.fh-text{font-size: 32rpx;margin-right: 0;}
+		.mx-jt-icon{
+			width: 18rpx;height: 18rpx;@include ezy-no-repeat-cover;margin-left: 4rpx;
+			background-image: url("@/static/images/common/jt-up-icon.svg");
+		}
+	}
+	.pay-status-box{
+		width: 200rpx;display: flex;align-items: center;border-left: 1rpx solid #ccc;
+		padding:2rpx 0 2rpx 16rpx;color: #666;margin-left: 4rpx;
+		icon{width: 42rpx;height: 42rpx;@include ezy-no-repeat-cover;margin-right: 8rpx;}
+		.wx-icon{background-image: url("@/static/images/pay/svip-wx-icon.png");}
+		.zfb-icon{background-image: url("@/static/images/pay/svip-zfb-icon.png");}
+	}
+	.pay-status-box::after{
+		content:'';width: 24rpx;height: 24rpx;margin-left: 4rpx;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/common/qiehuan-icon.svg");
+	}
+	.pay-btn{
+		width: 200rpx;height: 80rpx;font-size: 28rpx;line-height: 80rpx;text-align: center;color: #fff;
+		@include ezy-no-repeat-cover;background-image: url("@/static/images/mall/mall-btn.png");
+	}
+}
+.footer-mall-pay-box::before{content:'';width: 100%;height: 4rpx;background-color: rgba(0, 0, 0, 0.4);
+position: absolute;left: 0;top: -4rpx;opacity: 0.4;}
+
+
+// 明细弹窗
+.mall-detail-dialog{
+	width: 100%;height: 100vh;display: flex;align-items: flex-end;
+	.detail-content-box{
+		width: 750rpx;height: 90vh;@include ezy-no-repeat-cover(top);
+		background-image: url("@/static/images/mall/cpmx-border-bj.png");
+		box-sizing: border-box;padding: 84rpx 32rpx 0;position: relative;
+		display: flex;flex-direction: column;
+	}
+	.yfmx-title{
+		width: 231rpx;height: 58rpx;@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/mall/yfmx-text.png");
+		display: block;margin: 0 auto 42rpx;
+	}
+	.dialog-close-btn{
+		width: 60rpx;height: 60rpx;
+		background-image: url("@/static/images/catalog/catalog-close-btn.png");@include ezy-no-repeat-cover;
+		position: absolute;top: 64rpx;right: 36rpx;
+	}
+	
+	.content-yuanjia{font-size: 46rpx;color: #ff0101;}
+	.detail-radio{
+		.uni-radio-input{
+			width: 48rpx;height: 48rpx;@include ezy-no-repeat-cover;margin: 10rpx 16rpx 10rpx 0;
+			background-image: url("@/static/images/pay/svip-radio.png");flex-shrink: 0;
+			background-color:transparent;border:0; pointer-events: none;
+			svg{display: none;}
+		}
+	}
+	.detail-radio.radio-checked .uni-radio-input{
+		background-image: url("@/static/images/pay/svip-radio-checked.png");
+	}
+	.detail-body-box{height: calc(90vh - 420rpx);overflow-y: auto;}
+	.detail-item-box{
+		display: flex;align-items: center;margin-top: 10rpx;border-bottom: 1px dashed #ccc;
+		box-sizing: border-box;padding-bottom:32rpx;margin-bottom: 32rpx;
+		.mall-image{width: 200rpx;height: 200rpx;margin-right: 16rpx;flex-shrink: 0;}
+		.content-body-box{display: flex;flex-direction: column;justify-content: space-between;}
+		.content-name{
+			font-size: 36rpx;color: #000;margin-bottom: 12rpx;display: flex;align-items: center;
+			.name-text{@include single-line-ellipsis;max-width: 320rpx;margin-right: 10rpx;}
+			icon{width:70rpx;height:32rpx;@include ezy-no-repeat-cover;background-image: url("@/static/images/mall/new-icon.png");}
+		}
+		.content-text{font-size: 24rpx;color: #666;@include multi-line-ellipsis(2);line-height: 1.6;}
+		.content-row{
+			display: flex;justify-content: space-between;align-items: center;margin-top: 10rpx;
+			.shop-car-box{
+				width: 70rpx;height: 70rpx;position: relative;
+				@include ezy-no-repeat-cover;background-image: url("@/static/images/mall/shop-car-icon.png");
+			}
+			.car-change{
+				width: 32rpx;height: 30rpx;position: absolute;right: -4rpx;top: -8rpx;
+				@include ezy-no-repeat-cover;background-image: url("@/static/images/mall/change-icon.png");
+			}
+		}
+	}
+	.detail-bottom-box{
+		width: 100%;display: flex;justify-content: space-between;color: #666;padding: 10rpx 0;
+		.bottom-text-row{display: flex;align-items: center;}
+	}
 }

common/styles/global/pages.scss

@@ -1555,7 +1555,7 @@
 		.mall-content-box{
 			display: flex;margin-top: 10rpx;border-bottom: 1px dashed #fff;
 			box-sizing: border-box;padding-bottom:24rpx;margin-bottom: 24rpx;
-			.mall-image{width: 220rpx;height: 220rpx;margin-right: 16rpx;@include ezy-no-repeat-cover;}
+			.mall-image{width: 220rpx;height: 220rpx;margin-right: 16rpx;flex-shrink: 0;}
 			.content-body-box{display: flex;flex-direction: column;justify-content: space-between;}
 			.content-name{
 				font-size: 36rpx;color: #000;margin-bottom: 12rpx;display: flex;align-items: center;
@@ -1581,45 +1581,10 @@
 			display: flex;justify-content: space-between;align-items: center;
 			box-sizing: border-box;padding-bottom: 16rpx;
 			.kcb-btn{
-				width: 148rpx;height: 48rpx;line-height: 48rpx;text-align: center;font-size: 22rpx;color: #fff;
+				width: 180rpx;height: 56rpx;line-height: 56rpx;text-align: center;font-size: 24rpx;color: #fff;
 				@include ezy-no-repeat-cover;background-image: url("@/static/images/common/jf-bj.png");
 			}
 			.hdj-text{font-size: 32rpx;color: #333;}
 		}
 	}
-	
-	.mall-pay-box{
-		width: 100%;background-color: #fff;position: absolute;bottom: 0;
-		display: flex;align-items: center;justify-content: space-between;
-		box-sizing: border-box;padding: 32rpx 12rpx  calc(32rpx + var(--window-bottom));
-		.mall-left-box{
-			font-size: 22rpx;color: #afafaf;
-			.price-icon-box{margin-bottom: 6rpx;}
-			.red-price{font-size: 56rpx;color:#ff0101;font-weight: bold;margin-right: 10rpx;}
-			.fh-text{font-size: 32rpx;margin-right: 0;}
-			.mx-jt-icon{
-				width: 18rpx;height: 18rpx;@include ezy-no-repeat-cover;margin-left: 4rpx;
-				background-image: url("@/static/images/common/jt-up-icon.svg");
-			}
-		}
-		.pay-status-box{
-			width: 200rpx;display: flex;align-items: center;border-left: 1rpx solid #ccc;
-			padding:2rpx 0 2rpx 16rpx;color: #666;margin-left: 4rpx;
-			icon{width: 42rpx;height: 42rpx;@include ezy-no-repeat-cover;margin-right: 8rpx;}
-			.wx-icon{background-image: url("@/static/images/pay/svip-wx-icon.png");}
-			.zfb-icon{background-image: url("@/static/images/pay/svip-zfb-icon.png");}
-		}
-		.pay-status-box::after{
-			content:'';width: 24rpx;height: 24rpx;margin-left: 4rpx;
-			@include ezy-no-repeat-cover;background-image: url("@/static/images/common/qiehuan-icon.svg");
-		}
-		.pay-btn{
-			width: 200rpx;height: 80rpx;font-size: 28rpx;line-height: 80rpx;text-align: center;color: #fff;
-			@include ezy-no-repeat-cover;background-image: url("@/static/images/mall/mall-btn.png");
-		}
-	}
-	.mall-pay-box::before{content:'';width: 100%;height: 4rpx;background-color: rgba(0, 0, 0, 0.4);
-	position: absolute;left: 0;top: -4rpx;opacity: 0.4;}
-	
-	
 }

pages/mall/mallDetailDialog.vue

@@ -0,0 +1,72 @@
+<template>
+	<uni-popup ref="detailPopup" :animation="false" :is-mask-click="false"
+	 mask-background-color="rgba(51, 137, 217, 0.65);">
+	 <view class="mall-detail-dialog">
+		 <view class="detail-content-box">
+			 <icon class="yfmx-title"></icon>
+			 <icon class="dialog-close-btn" @click="detailCloseBtn"></icon>
+			 <view class="detail-body-box">
+				 <!-- ↓需要换成从接口中取得 wgy -->
+			 	<view class="detail-item-box">
+					<!-- radio选中状态需要改成动态的 wgy -->
+					<radio value="zhifubao" checked="true" activeBackgroundColor="transparent" class="detail-radio radio-checked"/>
+			 		<img src="/static/images/my/about-icon.png" class="mall-image"/>
+			 		<view class="content-body-box">
+			 			<view class="content-name">
+			 				<view class="name-text">数学暑假进阶L1</view>
+			 			</view>
+			 			<view class="content-text">适用于L1和学前，介绍介绍，适用于L1和学前，介绍介绍适用于L1和学前，介绍介绍</view>
+			 			<view class="content-row">
+			 				<view class="content-yuanjia">￥39.9</view>
+			 			</view>
+			 		</view>
+			 	</view>
+			 </view>
+			 <view class="detail-bottom-box">
+			 	<view><radio value="zhifubao" checked="true" activeBackgroundColor="transparent" class="detail-radio radio-checked"/>全选</view>
+				<view class="bottom-text-row">合计<text class="content-yuanjia">￥39.9</text></view>
+			 </view>
+		 </view>
+		 <!-- ↓需要换成动态的 wgy -->
+		<view class="footer-mall-pay-box">
+			<view class="mall-left-box">
+				<view class="price-icon-box">
+					<text class="red-price fh-text">￥</text>
+					<text class="red-price">1999.8</text>明细
+					<icon class="mx-jt-icon"></icon>
+				</view>
+				<view>购买即同意虚拟产品不支持退订</view>
+			</view>
+			<!-- 微信 -->
+			<view class="pay-status-box" v-if="showPayWay" @click="switchPayWay"><icon class="wx-icon"></icon>微信</view>
+			<!-- 支付宝 -->
+			<view class="pay-status-box" v-if="!showPayWay" @click="switchPayWay"><icon class="zfb-icon"></icon>支付宝</view>
+			<view class="pay-btn" @click="detailPayBtn">立即支付</view>
+		</view>
+	 </view>
+	</uni-popup>
+</template>
+
+<script setup>
+	import { ref } from 'vue';
+	const showPayWay = ref(true)
+	function switchPayWay(){
+		showPayWay.value = !showPayWay.value
+	}
+	const $emit = defineEmits(['payBtn'])
+	const detailPopup = ref(null); // 索引
+	// 打开弹窗
+	function detailShow() {
+		detailPopup.value.open();
+	}
+	// 开启提分之旅按钮
+	function detailPayBtn(){
+		$emit('payBtn')
+	}
+	function detailCloseBtn(){
+		detailPopup.value.close();
+	}
+	defineExpose({
+			detailShow
+		})
+</script>