我的课程-购买未完成

2024-06-21 17:33:11 +08:00
parent c8d7b5f271
commit ccc4e5d72a
7 changed files with 618 additions and 233 deletions
--- a/components/buyPup.vue
+++ b/components/buyPup.vue
@@ -0,0 +1,198 @@
+<template>
+	<view>
+		<u-popup key="1" :show="pricespop" :round="10" @close="closePup">
+			<view class="proListPrice" v-if="proPriceList.length > 0">
+				<view class="title">
+					请选择
+				</view>
+				<view class="list">
+					<view :class="['item',curProId == item.productId ? 'active' : '']"
+						v-for="(item,index) in proPriceList" :key="index" @click="choosePrice(item)">
+						{{item.productName}} - ￥{{item.price}}
+					</view>
+				</view>
+				<view class="tbn flexbox" style="padding-bottom: 20px;">
+					<view class="saveBtnss buybtn flexbox" @click="oprate('buy')">
+						<u-icon name="bag" color="#fff" size="28"></u-icon>
+						<text>立即购买</text>
+					</view>
+					<view class="saveBtnss gouwuche flexbox" @click="oprate('gouwuche')">
+						<uni-icons type="cart" size="28" style="color: #666;"></uni-icons>
+						<text>加入购物车</text>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"buyPup",
+		props:['proPriceList'],
+		data() {
+			return {
+				pricespop:true,
+				curProId:null,
+			};
+		},methods:{
+			closePup() {
+				this.pricespop = false
+				this.$emit('closePup')
+				// this.proPriceList = []
+			},
+			choosePrice(item) {
+				// console.log(item, 'choosePrice')
+				this.curProId = item.productId
+			},
+			oprate(val){
+				if(!this.curProId){
+					uni.showToast({
+						title:'请选择您的课程',
+						icon:'none'
+					})
+					return
+				}
+				if(val=='buy'){
+					console.log('直接购买');
+					this.$emit('oprate',{name:val,id:this.curProId})
+				}else if(val == 'gouwuche'){
+					console.log('加入购物车');
+					this.$emit('oprate',{name:val,id:this.curProId})
+				}
+				this.closePup()
+			}
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '@/style/mixin.scss';
+	.flexbox {
+		display: flex;
+	}
+	.saveBtn {
+		align-items: center;
+		justify-content: center;
+		height: 80rpx;
+		background-color: #00d8df;
+		// width: 46%;
+		overflow: hidden;
+		border-radius: 30rpx;
+	
+		text {
+			padding-left: 10rpx;
+			font-size: 28rpx;
+			color: #fff;
+		}
+	}
+	
+	.vipBtn {
+		@include theme("vipbtnbg");
+		border-radius: 100rpx;
+		justify-content: center;
+		width: 150px;
+		color: #fff;
+		margin: 10rpx auto;
+	}
+	
+	.buyBox {
+		// position: fixed;
+		// z-index: 2;
+		// bottom: 100rpx;
+		// left: 0;
+		@include pleft_right(4px);
+		// @include mshadow(10px, 1);
+		padding: 20rpx 10rpx;
+		width: 100%;
+		font-size: 28rpx;
+		flex-wrap: wrap;
+		background-image: linear-gradient(60deg, #e0e9f6 0%,#ece6fa 30%,#d7e8f0 60%, #fff 100%);
+		// background: rgba(255, 255, 255, 0.9);
+	
+		.item {
+			width: 100%;
+			text-align: center; line-height: 70rpx !important;
+	
+		}
+	
+		.tbn {
+			align-items: center;
+		}
+	
+		.buybtn {
+			color: #fff;
+		}
+	}
+	.proListPrice {
+		text-align: center;
+
+		.title {
+			font-size: 28rpx;
+			margin: 10px 0;
+		}
+
+		.list {
+			padding: 0 10px;
+			padding-bottom: 20rpx;
+
+			.item {
+				font-size: 26rpx;
+				color: #333;
+				margin-bottom: 10rpx;
+				line-height: 80rpx;
+				border-radius: 50rpx;
+				border: 1px solid #eee;
+			}
+
+			.item.active {
+				color: $themeColor;
+				border: 1px solid $themeColor;
+			}
+
+			.item:last-child {
+				// border-bottom: none
+			}
+		}
+
+		.tbn {
+			justify-content: center;
+		}
+
+		.buybtn { padding: 0 20rpx;
+			background-color: #00d8df;
+			margin: 0;
+			margin-right: 20rpx;
+
+			text {
+				color: #fff;
+			}
+		}
+
+		.saveBtnss {
+			align-items: center;
+			justify-content: center;
+			height: 80rpx;
+
+			// width: 46%;
+			overflow: hidden;
+			border-radius: 50rpx;
+
+			text {
+				padding-left: 10rpx;
+				font-size: 28rpx;
+
+			}
+		}
+
+		.gouwuche {
+			border: 1px solid #666;
+			padding-right: 20rpx;
+
+			text {
+				// color: #fff;
+			}
+		}
+	}
+</style>