tanxue 1 месяц назад
Родитель
Сommit
a262b03d5d
3 измененных файлов с 148 добавлено и 44 удалено
  1. 82 4
      common/styles/global/pages.scss
  2. 64 39
      pages/chanpinShop/cp1/dingdan.vue
  3. 2 1
      pages/chanpinShop/cp1/intro.vue

+ 82 - 4
common/styles/global/pages.scss

@@ -961,7 +961,7 @@
 }
 }
 
 
 // 资料---数学--计算特训题库下载
 // 资料---数学--计算特训题库下载
-/* .ezy-jstx-ziliao-page{
+.ezy-jstx-ziliao-page{
 	width: 100%;height: 100vh;display: flex;flex-direction: column;
 	width: 100%;height: 100vh;display: flex;flex-direction: column;
 	.jstx-body{
 	.jstx-body{
 		margin-top: 48rpx;position: relative;overflow: unset;padding: 0 24rpx;box-sizing: border-box;
 		margin-top: 48rpx;position: relative;overflow: unset;padding: 0 24rpx;box-sizing: border-box;
@@ -1004,10 +1004,10 @@
 			
 			
 		}
 		}
 	}
 	}
-} */
+}
 
 
 // 资料下载弹窗
 // 资料下载弹窗
-/* .sxtk-sc-dialog{
+.sxtk-sc-dialog{
 	.tip-title{color: #343434;font-size: 38rpx;margin-bottom: 24rpx;}
 	.tip-title{color: #343434;font-size: 38rpx;margin-bottom: 24rpx;}
 	.tip-content-box{
 	.tip-content-box{
 		width: 625rpx;height: 587rpx;padding: 42rpx 48rpx;
 		width: 625rpx;height: 587rpx;padding: 42rpx 48rpx;
@@ -1019,7 +1019,7 @@
 		min-height: 260rpx;text-align: justify;border-bottom: 1px dashed #70cbf4;
 		min-height: 260rpx;text-align: justify;border-bottom: 1px dashed #70cbf4;
 		margin-bottom: 30rpx;color: #666;font-size: 32rpx;padding-bottom: 32rpx;
 		margin-bottom: 30rpx;color: #666;font-size: 32rpx;padding-bottom: 32rpx;
 		border-bottom: 1px dashed #70cbf4;line-height: 1.8;}
 		border-bottom: 1px dashed #70cbf4;line-height: 1.8;}
-} */
+}
 
 
 // 订单
 // 订单
 .ezy-order-page{
 .ezy-order-page{
@@ -1094,6 +1094,84 @@
 	}
 	}
 }
 }
 
 
+// 确认订单
+.ezy-qrdd-page{
+	width: 100%;height: 100vh;display: flex;flex-direction: column;
+	.qrdd-body-box{
+		flex: 1;position: relative;z-index: 2;
+		display: flex;flex-direction: column;
+		overflow-y: auto;
+	}
+	.dd-item-box{
+		width: 731rpx;height:356rpx;@include ezy-no-repeat-cover;
+		background-image: url("@/static/images/shop/order-bj.png");
+		position: relative;z-index: 1;box-sizing: border-box;padding: 26rpx 36rpx;
+		display: flex;align-items: center;margin:0 auto 16rpx;
+		.item-img-box{width: 210rpx;height: 285rpx;border-radius: 12rpx;margin-right: 24rpx;flex-shrink: 0;}
+		.item-content-box{
+			display: flex;flex-direction: column;justify-content: space-between;line-height: 1.5;
+			.item-name{color: #333;font-size: 34rpx;font-weight: bolder;margin-bottom: 10rpx;}
+			.item-intro{color: #444;font-size: 28rpx;@include multi-line-ellipsis(4);margin-bottom: 10rpx;}
+			.item-xianjia{color: #ff0000;font-size: 34rpx;font-weight: bolder;}
+		}
+	}
+	
+	// border-box
+	.qrdd-border-box{
+		width: 713rpx;margin:0 auto;border-radius: 20rpx;
+		box-shadow: 0 0rpx 16rpx rgba(100, 159, 241, 0.2);
+		box-sizing: border-box;padding: 0 24rpx 16rpx;margin-bottom: 24rpx;
+		position: relative;z-index: 2;background-color: #fff;
+		// 课程学习等级
+		.kcxxdj-title{color: #454545;font-size: 30rpx;font-weight: bolder;padding: 16rpx 0;}
+		.kcxxdj-tc-box{
+			width: 100%;background-color: #f9fafc;border-radius: 20rpx;
+			display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;
+			box-sizing: border-box;padding: 16rpx 0;
+			.tc-item{
+				min-width:76rpx;min-height: 76rpx;box-sizing: border-box;
+				text-align: center;border: 1rpx solid #eaeaeb;border-radius: 20rpx;
+				font-size: 30rpx;line-height: 1; color: #333;
+				padding: 20rpx 6rpx;margin: 16rpx 0 16rpx 16rpx;
+			}
+			.active{background-color: #2b9bfd;color: #fff;border: 1rpx solid #1280e1;}
+		}
+		// 商品总价
+		.border-row{
+			display: flex;justify-content: space-between;
+			font-size: 32rpx;color: #444;padding: 32rpx 0;
+			border-bottom:1rpx dashed #f1f1f1;
+			.jg-text{color: #ff0000;}
+		}
+		.border-row:last-child{border: 0;}
+		.sum-row{justify-content: flex-end;}
+		.sum-text{margin-right: 32rpx;}
+		
+		// 支付方式
+		.zzfs-name-box{
+			display: flex;align-items: center;
+			icon{width: 53rpx;height: 53rpx;@include ezy-no-repeat-cover;margin-right: 16rpx;}
+			.wechat-icon{background-image: url("@/static/images/shop/wx-icon.png");}
+			.alipay-icon{background-image: url("@/static/images/shop/zfb-icon.png");}
+		}
+	}
+	
+	
+	.qrdd-footer-box{
+		flex-shrink: 0;display: flex;align-items: center;justify-content: space-between;padding: 24rpx;
+		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);box-sizing: border-box;background-color: #f9f9f9;
+		.jg-box{color: #ff0000;}
+		.sum-row{display: flex;align-items: center;}
+		.xj-text-text{font-weight: bolder;font-size: 42rpx;}
+		.sum-text{font-size: 32rpx;color: #333;}
+		.yh-text{font-size: 28rpx;margin-top: 6rpx;}
+		.ljzf-btn{
+			width: 279rpx;height: 88rpx;line-height: 88rpx;color:#fff;font-size: 32rpx;text-align: center;
+			@include ezy-no-repeat-cover;background-image: url("@/static/images/shop/pay-btn.png");
+		}
+	}
+}
+
 // 手机号快捷登录弹窗
 // 手机号快捷登录弹窗
 .sjh-kjdl-dialog{
 .sjh-kjdl-dialog{
 	.sjh-kjdl-content-box{display: flex;flex-direction: column;align-items: center;}
 	.sjh-kjdl-content-box{display: flex;flex-direction: column;align-items: center;}

+ 64 - 39
pages/chanpinShop/cp1/dingdan.vue

@@ -1,53 +1,78 @@
 <template>
 <template>
-	<view>
+	<view class="ezy-qrdd-page">
 		<view class="icon-title-navBar-box">
 		<view class="icon-title-navBar-box">
 			<view class="nav-bar-icon" @click="handleBack"></view>
 			<view class="nav-bar-icon" @click="handleBack"></view>
 			<text class="nav-bar-title">确认订单</text>
 			<text class="nav-bar-title">确认订单</text>
 		</view>
 		</view>
-		<!-- 卡片 -->
-		<view>
-			<view>
-				<image :src="data.cover"></image>
+		<view class="qrdd-body-box">
+			<!-- 卡片 -->
+			<view class="dd-item-box">
+			  <!-- 封面 -->
+			  <image class="item-img-box" :src="data.cover" mode=""></image>
+			  <view class="item-content-box">
+				<!-- 名称 -->
+				<view class="item-name">{{data.name}}</view>
+				<!-- 简介 -->
+				<view class="item-intro">{{data.intro}}</view>
+				<!-- 价格 -->
+				<view class="item-xianjia">¥{{xianjia}}</view>
+			  </view>
+			  <view class="item-play-btn"></view>
 			</view>
 			</view>
-			<view>名称:{{data.name}}</view>
-			<view>简介:{{data.intro}}</view>
-			<view>价格:{{xianjia}}</view>
-		</view>
-		<!-- 等级 -->
-		<view>
-			<view>课程学习等级</view>
-			<view>
-				<!-- 套餐 -->
-				<view v-for="item in data.taocanList" @click="handleSelectTaoCan(item)"
-					:class="{active: item.taocanId == activeTaocan.taocanId}">
-					{{item.name}}
+			<!-- 等级 -->
+			<view class="qrdd-border-box">
+				<view class="kcxxdj-title">课程学习等级</view>
+				<view class="kcxxdj-tc-box">
+					<!-- 套餐 -->
+					<ezyActiveVue class="ezy-btn-active tc-item" v-for="item in data.taocanList" @click="handleSelectTaoCan(item)"
+						:class="{active: item.taocanId == activeTaocan.taocanId}">
+						{{item.name}}
+					</ezyActiveVue>
 				</view>
 				</view>
 			</view>
 			</view>
+			
+			<!-- 商品总价 -->
+			<view class="qrdd-border-box">
+				<view class="border-row">
+					<view>商品总价</view>
+					<view>¥{{yuanjia}}</view>
+				</view>
+				<view class="border-row">
+					<view>优惠券</view>
+					<view class="jg-text">-¥{{youhui}}</view>
+				</view>
+				<view class="border-row sum-row">
+					<view class="sum-text">合计</view>
+					<view class="jg-text">¥{{xianjia}}</view>
+				</view>
+			</view>
+			<!-- 支付模式 -->
+			<template v-if="currentPlatform != 'ios'">
+				<radio-group @change="radioChange" class="qrdd-border-box">
+					<label class="border-row" v-for="(item, index) in items" :key="item.value">
+						<view class="zzfs-name-box">
+							<icon :class="{
+							  'wechat-icon': item.name === '微信',
+							  'alipay-icon': item.name === '支付宝'
+							}"></icon>
+							<text>{{item.name}}</text>
+						</view>
+						<radio :value="item.value" :checked="index === current" style="transform:scale(0.7)"/>
+					</label>
+				</radio-group>
+			</template>
 		</view>
 		</view>
-		<!-- 商品总价 -->
-		<view>
-			<view>商品总价 ¥{{yuanjia}}</view>
-			<view>优惠券 -¥{{youhui}}</view>
-			<view>合计 ¥{{xianjia}}</view>
-		</view>
-		<!-- 支付模式 -->
-		<template v-if="currentPlatform != 'ios'">
-			<radio-group @change="radioChange">
-				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
-					<view>
-						<radio :value="item.value" :checked="index === current" />
-					</view>
-					<view>{{item.name}}</view>
-				</label>
-			</radio-group>
-		</template>
+		
 		<!-- 支付区 -->
 		<!-- 支付区 -->
-		<view>
-			<view>
-				<view>合计:¥{{xianjia}}</view>
-				<view>共优惠¥{{youhui}}</view>
+		<view class="qrdd-footer-box">
+			<view class="jg-box">
+				<view class="sum-row">
+					<text class="sum-text">合计:</text>
+					<text class="xj-text-text">¥{{xianjia}}</text>
+				</view>
+				<view class="yh-text">共优惠¥{{youhui}}</view>
 			</view>
 			</view>
-			<view @click="handlePay">立即支付</view>
+			<view @click="handlePay" class="ljzf-btn">立即支付</view>
 		</view>
 		</view>
 	</view>
 	</view>
 
 

+ 2 - 1
pages/chanpinShop/cp1/intro.vue

@@ -13,7 +13,7 @@
 					<icon class="fx-icon"></icon>
 					<icon class="fx-icon"></icon>
 					<view>分享</view>
 					<view>分享</view>
 				</view>
 				</view>
-				<view @click="handleStudy" class="bmxx-btn">立即报名学习</view>
+				<ezyActiveVue @click="handleStudy" class="ezy-btn-active bmxx-btn">立即报名学习</ezyActiveVue>
 			</view>
 			</view>
 		</view>
 		</view>
 		
 		
@@ -36,6 +36,7 @@
 	} from "@dcloudio/uni-app"
 	} from "@dcloudio/uni-app"
 	import * as shopHttp from "@/api/shop.js"
 	import * as shopHttp from "@/api/shop.js"
   import {getAppCp1Info} from "@/api/shop";
   import {getAppCp1Info} from "@/api/shop";
+  import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
   import SharePopup from "@/components/sharePopUp/index.vue"
   import SharePopup from "@/components/sharePopUp/index.vue"
   import {toast} from "uview-plus";
   import {toast} from "uview-plus";