tanxue пре 6 дана
родитељ
комит
243fe3fe63

+ 6 - 3
common/styles/global/components.scss

@@ -324,17 +324,18 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 // 底部支付
 .footer-mall-pay-box{
 	width: 100%;background-color: #fff;position: absolute;bottom: 0;
-	display: flex;align-items: center;justify-content: space-between;
+	display: flex;align-items: center;justify-content: space-between;z-index: 100;
 	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{
+		.mxjt-sq-icon,.mxjt-zk-icon{
 			width: 18rpx;height: 18rpx;@include ezy-no-repeat-cover;margin-left: 4rpx;
 			background-image: url("@/static/images/common/jt-up-icon.svg");
 		}
+		.mxjt-zk-icon{transform: rotate(180deg);}
 	}
 	.pay-status-box{
 		width: 200rpx;display: flex;align-items: center;border-left: 1rpx solid #ccc;
@@ -365,11 +366,12 @@ position: absolute;left: 0;top: -4rpx;opacity: 0.4;}
 		box-sizing: border-box;padding: 84rpx 32rpx 0;position: relative;
 		display: flex;flex-direction: column;
 	}
-	.yfmx-title{
+	.yfmx-title,.cpmx-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;
 	}
+	.cpmx-title{background-image: url("@/static/images/mall/cpmx-text.png");}
 	.dialog-close-btn{
 		width: 60rpx;height: 60rpx;
 		background-image: url("@/static/images/catalog/catalog-close-btn.png");@include ezy-no-repeat-cover;
@@ -389,6 +391,7 @@ position: absolute;left: 0;top: -4rpx;opacity: 0.4;}
 		background-image: url("@/static/images/pay/svip-radio-checked.png");
 	}
 	.detail-body-box{height: calc(90vh - 420rpx);overflow-y: auto;}
+	.product-body-box{height: calc(90vh - 220rpx);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;

+ 2 - 1
common/styles/global/pages.scss

@@ -1560,7 +1560,6 @@
 			.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{
@@ -1583,6 +1582,8 @@
 			.kcb-btn{
 				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");
+				icon{width: 18rpx;height: 18rpx;@include ezy-no-repeat-cover;margin-left: 4rpx;
+			background-image: url("@/static/images/common/jt-up-white-icon.svg");transform: scale(180deg);}
 			}
 			.hdj-text{font-size: 32rpx;color: #333;}
 		}

+ 1 - 18
pages/mall/mallDetailDialog.vue → pages/mall/detailDialog.vue

@@ -24,25 +24,8 @@
 			 </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>
@@ -67,6 +50,6 @@
 		detailPopup.value.close();
 	}
 	defineExpose({
-			detailShow
+			detailShow,detailCloseBtn
 		})
 </script>

+ 374 - 2
pages/mall/mallPage.vue

@@ -1,18 +1,390 @@
 <template>
-	<view class="ezy-order-page">
+	<view class="ezy-mall-page">
 		<view class="icon-title-navBar-box">
 			<view @click="goBack" class="nav-bar-icon"></view>
-			<text class="nav-bar-title">商城</text>
+			<text class="nav-bar-title">鹅状元进阶营</text>
 		</view>
+		<view class="ezy-tab-border">
+
+			<uni-segmented-control :current="dingdanData.current" :values="dingdanData.items" active-color="#3A7FE9"
+				@clickItem="onChangeTab" class="ezy-tab-box" />
+			<view>
+				<view v-if="dingdanData.current === 0">
+					<scroll-view scroll-y="true" refresher-enabled="true"
+						:refresher-triggered="dingdanData.quanbu.loading" :refresher-threshold="50"
+						refresher-background="transparent" @refresherrefresh="onRefresh" class="order-scroll-view">
+						<!--数学-->
+						<uni-list>
+							<uni-list-item v-for="item in dingdanData.quanbu.list" class="mall-list-item">
+								<template v-slot:body>
+									<view class="mall-content-box">
+										<!-- 需要换成从接口中取得 wgy -->
+										<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 class="shop-car-box">
+													<!-- 购物车上的对号需控制 wgy-->
+													<icon class="car-change"></icon>
+												</view>
+											</view>
+										</view>
+									</view>
+									<view class="mall-bottom-row">
+										<view class="kcb-btn" @click="productBtn">课程包明细<icon></icon></view>
+										<view class="hdj-text">活动价:¥29.9</view>
+									</view>
+								</template>
+							</uni-list-item>
+							<uni-load-more :status="dingdanData.quanbu.state" @click="getMore(0)"
+								:contentText="dingdanData.quanbu.contentText">
+							</uni-load-more>
+						</uni-list>
+					</scroll-view>
+				</view>
+				<view v-if="dingdanData.current === 1">
+					<view>英语</view>
+				</view>
+				<view v-if="dingdanData.current === 2">
+					<view>语文</view>
+				</view>
+			</view>
+		</view>
+		<view class="footer-mall-pay-box">
+			<view class="mall-left-box" @click="detailBtn">
+				<!-- 需要换成从接口中取得 wgy -->
+				<view class="price-icon-box">
+					<text class="red-price fh-text">¥</text>
+					<text class="red-price">1999.8</text>明细
+					<icon :class="mxjtClass"></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">立即支付</view>
+		</view>
+		
+		<detail-dialog ref="mallDetailPopup" @payBtn="payBtn"></detail-dialog>
+		<product-dialog ref="mallProductPopup" @payBtn="payBtn"></product-dialog>
 	</view>
 </template>
 
 <script setup>
+	import {reactive,ref} from "vue";
+	import {getOrderList,orderAdd} from "@/api/order";
+	import {onLoad} from "@dcloudio/uni-app";
+	import {toast,getUserIdentity} from "@/utils/common";
+	import cacheManager from '@/utils/cacheManager.js';
+	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
+	import detailDialog from './detailDialog.vue'
+	import productDialog from './productDialog.vue'
+	const showPayWay = ref(true)
+	const showDetail = ref(false)
+	const mxjtClass = ref('mxjt-sq-icon')
+	function switchPayWay(){
+		showPayWay.value = !showPayWay.value
+	}
+	const mallDetailPopup = ref(null);
+	const mallProductPopup = ref(null);
+	function productBtn(){
+		mallProductPopup.value.detailShow();
+	}
+	function detailBtn(){
+		showDetail.value = !showDetail.value;
+		if(showDetail.value){
+			mxjtClass.value = 'mxjt-zk-icon';
+			mallDetailPopup.value.detailShow();
+		}else{
+			mxjtClass.value = 'mxjt-sq-icon';
+			mallDetailPopup.value.detailCloseBtn();
+		}
+		
+	}
+	
+	function payBtn(){
+		
+	}
+	
+	const dingdanData = reactive({
+		items: ['数学', '英语', '语文'],
+		current: 0,
+		quanbu: {
+			page: 0,
+			list: [],
+			loading: false,
+			state: 'more',
+			contentText: {
+				contentdown: '查看更多',
+				contentrefresh: '加载中',
+				contentnomore: '没有更多'
+			}
+
+		},
+		daiFukuan: {
+			page: 0,
+			list: [],
+			loading: false,
+			state: 'more',
+			contentText: {
+				contentdown: '查看更多',
+				contentrefresh: '加载中',
+				contentnomore: '没有更多'
+			}
+		},
+		yiFukuan: {
+			page: 0,
+			list: [],
+			loading: false,
+			state: 'more',
+			contentText: {
+				contentdown: '查看更多',
+				contentrefresh: '加载中',
+				contentnomore: '没有更多'
+			}
+		},
+	})
+
+
+	function handlePay(item) {
+		uni.redirectTo({
+			url: `/pages/pay/svip?cardId=${item.cardId}&formPage=my&orderId=${item.id}`
+		})
+	}
+
+	function onChangeTab(e) {
+		if (dingdanData.current !== e.currentIndex) {
+			dingdanData.current = e.currentIndex;
+			if (dingdanData.current == 0) {
+				dingdanData.quanbu.page = 0
+			} else if (dingdanData.current == 1) {
+				dingdanData.daiFukuan.page = 0
+			} else if (dingdanData.current == 2) {
+				dingdanData.yiFukuan.page = 0
+			}
+			refreshData(dingdanData.current);
+		}
+	}
+
+	function refreshData(code) {
+		const opt = {
+			page: 1,
+			size: 10, // 固定查询10条
+			status: code
+		}
+
+		if (code == 0) {
+			dingdanData.quanbu.list = [];
+			// 数学
+			dingdanData.quanbu.state = 'loading';
+			dingdanData.quanbu.page++;
+			opt.page = dingdanData.quanbu.page;
+		} else if (code == 1) {
+			dingdanData.daiFukuan.list = [];
+			// 英语
+			dingdanData.daiFukuan.state = 'loading';
+			dingdanData.daiFukuan.page++;
+			opt.page = dingdanData.daiFukuan.page;
+		} else if (code == 2) {
+			dingdanData.yiFukuan.list = [];
+			// 英语
+			dingdanData.yiFukuan.state = 'loading';
+			dingdanData.yiFukuan.page++;
+			opt.page = dingdanData.yiFukuan.page;
+		}
+		getOrderList(opt).then(res => {
+			if (code == 0) {
+				dingdanData.quanbu.list = dingdanData.quanbu.list.concat(res.data.data);
+				dingdanData.quanbu.loading = false;
+			} else if (code == 1) {
+				dingdanData.daiFukuan.list = dingdanData.daiFukuan.list.concat(res.data.data);
+				dingdanData.daiFukuan.loading = false;
+			} else if (code == 2) {
+				dingdanData.yiFukuan.list = dingdanData.yiFukuan.list.concat(res.data.data);
+				dingdanData.yiFukuan.loading = false;
+			}
+			if (code == 0) {
+				if (res.data.total > dingdanData.quanbu.list.length) {
+					// 数学
+					dingdanData.quanbu.state = 'more';
+					dingdanData.quanbu.loading = false;
+				} else {
+					// 数学
+					dingdanData.quanbu.state = 'no-more';
+					dingdanData.quanbu.loading = false;
+				}
+			} else if (code == 1) {
+				if (res.data.total > dingdanData.daiFukuan.list.length) {
+					// 英语
+					dingdanData.daiFukuan.state = 'more';
+					dingdanData.daiFukuan.loading = false;
+				} else {
+					// 英语
+					dingdanData.daiFukuan.state = 'no-more';
+					dingdanData.daiFukuan.loading = false;
+				}
+			} else if (code == 2) {
+				if (res.data.total > dingdanData.yiFukuan.list.length) {
+					// 英语
+					dingdanData.yiFukuan.state = 'more';
+					dingdanData.yiFukuan.loading = false;
+				} else {
+					// 英语
+					dingdanData.yiFukuan.state = 'no-more';
+					dingdanData.yiFukuan.loading = false;
+				}
+			}
+		}).catch(err => {
+			if (code == 0) {
+				// 数学
+				dingdanData.quanbu.state = 'more';
+				dingdanData.quanbu.loading = false;
+			} else if (code == 1) {
+				// 英语
+				dingdanData.daiFukuan.state = 'more';
+				dingdanData.daiFukuan.loading = false;
+			} else if (code == 2) {
+				// 英语
+				dingdanData.yiFukuan.state = 'more';
+				dingdanData.yiFukuan.loading = false;
+			}
+		})
+	}
+
+	function onRefresh() {
+		if (dingdanData.current == 0) {
+			dingdanData.quanbu.page = 0;
+			dingdanData.quanbu.list = [];
+			dingdanData.quanbu.loading = true;
+		} else if (dingdanData.current == 1) {
+			dingdanData.daiFukuan.page = 0;
+			dingdanData.daiFukuan.list = [];
+			dingdanData.daiFukuan.loading = true;
+		} else if (dingdanData.current == 2) {
+			dingdanData.yiFukuan.page = 0;
+			dingdanData.yiFukuan.list = [];
+			dingdanData.yiFukuan.loading = true;
+		}
+		refreshData(dingdanData.current);
+	}
+
+	function getMore(code) {
+		const opt = {
+			page: 1,
+			size: 10, // 固定查询10条
+			status: code // 前台索引加1为学科cardId
+		}
+
+		if (code == 0) {
+			if (dingdanData.quanbu.state == 'no-more') {
+				return;
+			}
+			// 数学
+			dingdanData.quanbu.state = 'loading';
+			dingdanData.quanbu.page++;
+			opt.page = dingdanData.quanbu.page;
+		} else if (code == 1) {
+			if (dingdanData.daiFukuan.state == 'no-more') {
+				return;
+			}
+			dingdanData.daiFukuan.state = 'loading';
+			dingdanData.daiFukuan.page++;
+			opt.page = dingdanData.daiFukuan.page;
+		} else if (code == 2) {
+			if (dingdanData.yiFukuan.state == 'no-more') {
+				return;
+			}
+			dingdanData.yiFukuan.state = 'loading';
+			dingdanData.yiFukuan.page++;
+			opt.page = dingdanData.yiFukuan.page;
+		}
+		getOrderList(opt).then(res => {
+			if (code == 0) {
+				dingdanData.quanbu.list = dingdanData.quanbu.list.concat(res.data.data);
+				dingdanData.quanbu.loading = false;
+			} else if (code == 1) {
+				dingdanData.daiFukuan.list = dingdanData.daiFukuan.list.concat(res.data.data);
+				dingdanData.daiFukuan.loading = false;
+			} else if (code == 2) {
+				dingdanData.yiFukuan.list = dingdanData.yiFukuan.list.concat(res.data.data);
+				dingdanData.yiFukuan.loading = false;
+			}
+			if (code == 0) {
+				if (res.data.total > dingdanData.quanbu.list.length) {
+					// 数学
+					dingdanData.quanbu.state = 'more';
+					dingdanData.quanbu.state_text = '加载更多';
+					dingdanData.quanbu.loading = false;
+				} else {
+					// 数学
+					dingdanData.quanbu.state = 'no-more';
+					dingdanData.quanbu.state_text = '没有更多啦';
+					
+					dingdanData.quanbu.loading = false;
+				}
+			} else if (code == 1) {
+				if (res.data.total > dingdanData.daiFukuan.list.length) {
+					// 英语
+					dingdanData.daiFukuan.state = 'more';
+					dingdanData.daiFukuan.state_text = '加载更多';
+					
+					dingdanData.daiFukuan.loading = false;
+				} else {
+					// 英语
+					dingdanData.daiFukuan.state = 'no-more';
+					dingdanData.daiFukuan.state_text = '没有更多啦';
+					dingdanData.daiFukuan.loading = false;
+				}
+			} else if (code == 2) {
+				if (res.data.total > dingdanData.yiFukuan.list.length) {
+					// 英语
+					dingdanData.yiFukuan.state = 'more';
+					dingdanData.yiFukuan.state_text = '加载更多';
+					dingdanData.yiFukuan.loading = false;
+				} else {
+					// 英语
+					dingdanData.yiFukuan.state = 'no-more';
+					dingdanData.yiFukuan.state_text = '没有更多啦';
+				
+					dingdanData.yiFukuan.loading = false;
+				}
+			}
+		}).catch(err => {
+			if (code == 0) {
+				// 数学
+				dingdanData.quanbu.state = 'more';
+				dingdanData.quanbu.state_text = '加载更多';
+				dingdanData.quanbu.loading = false;
+			} else if (code == 1) {
+				// 英语
+				dingdanData.daiFukuan.state = 'more';
+				dingdanData.daiFukuan.state_text = '加载更多';
+				dingdanData.daiFukuan.loading = false;
+			} else if (code == 2) {
+				// 英语
+				dingdanData.yiFukuan.state = 'more';
+				dingdanData.yiFukuan.state_text = '加载更多';
+				dingdanData.yiFukuan.loading = false;
+			}
+		})
+	}
+
+	
 	function goBack() {
 		uni.redirectTo({
 			url: '/pages/my/index'
 		})
 	}
+
+	onLoad(() => {
+		getMore(dingdanData.current);
+	})
 </script>
 
 <style>

+ 46 - 0
pages/mall/productDialog.vue

@@ -0,0 +1,46 @@
+<template>
+	<uni-popup ref="detailPopup" :animation="false" :is-mask-click="false"
+	 mask-background-color="rgba(51, 137, 217, 0.65);" style="z-index: 101;">
+	 <view class="mall-detail-dialog">
+		 <view class="detail-content-box">
+			 <icon class="cpmx-title"></icon>
+			 <icon class="dialog-close-btn" @click="detailCloseBtn"></icon>
+			 <view class="product-body-box">
+				 <!-- ↓需要换成从接口中取得 wgy -->
+			 	<view class="detail-item-box">
+			 		<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>
+	 </view>
+	</uni-popup>
+</template>
+
+<script setup>
+	import { ref } from 'vue';
+	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>