积分相关更新

2024-10-18 13:43:52 +08:00
parent 0131e97d21
commit 55ae63e94b
8 changed files with 562 additions and 69 deletions
--- a/pagesOrder/components/topUpActivity.vue
+++ b/pagesOrder/components/topUpActivity.vue
@@ -0,0 +1,141 @@
+<template>
+	<!-- 充值活动 -->
+	<view class="topUp">
+		<view class="topUpActivity">
+			<view class="topUpActivity_title">充值更划算</view>
+			<view class="content">
+				<view class="content_item" @click="goTopUp" v-for="(item,index) in list" :key="index">
+					<view class="fit">首充优惠</view>
+					<view class="amount">{{ item.minNum }}元</view>
+					<view class="zs"><text class="zamount">赠{{ item.handselNum }}元</text><text class="points">50积分</text></view>
+					<view class="coupon">赠送2张优惠券</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [],
+			}
+		},
+		props:{
+			shopUserInfo:{
+				type: Object
+			},
+		},
+		mounted() {
+			console.log(this.shopUserInfo)
+			this.getData();
+		},
+		methods: {
+			/**
+			 * 去充值
+			 */
+			goTopUp() {
+				uni.pro.navigateTo('/pages/member/index', {
+					shopId: uni.cache.get('shopId'),
+					type: "topUpActivity"
+				})
+			},
+			
+			/**
+			 * 获取充值数据
+			 */
+			async getData () {
+				let res = await this.api.paygetActive({
+					shopId: uni.cache.get('shopId'),
+					page: 1,
+					pageSize: 99
+				})
+				this.list = res.data.list;
+				
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.topUp{
+		box-sizing: border-box;
+		margin-top: 30rpx;
+		border-radius: 18rpx;
+		padding: 0 20rpx;
+		.topUpActivity{
+			background-color: #fff;
+			border-radius: 22rpx;
+			padding: 32rpx 24rpx;
+			box-sizing: border-box;
+			.topUpActivity_title{
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #333333;
+				box-sizing: border-box;
+			}
+			.content{
+				display: flex;
+				overflow-x: auto;
+				padding-top: 32rpx;
+				.content_item{
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					position: relative;
+					background: linear-gradient( 180deg, #FFF7E6 0%, #FFFFFF 100%);
+					border-radius: 12rpx 12rpx 12rpx 12rpx;
+					border: 2rpx solid #FEE082;
+					margin-right: 24rpx;
+					padding: 22rpx 42rpx;
+					flex-shrink: 0;
+					.fit{
+						width: 102rpx;
+						height: 36rpx;
+						line-height: 36rpx;
+						text-align: center;
+						background: linear-gradient( 180deg, #FEE082 0%, #FFA158 100%);
+						border-radius: 12rpx 0rpx 12rpx 0rpx;
+						font-weight: 500;
+						font-size: 20rpx;
+						color: #FFFFFF;
+						position: absolute;
+						left: 0;
+						top: -14rpx;
+					}
+					.amount{
+						font-weight: bold;
+						font-size: 36rpx;
+						color: #333333;
+					}
+					.zs{
+						display: flex;
+						align-items: center;
+						margin-bottom: 12rpx;
+						margin-top: 12rpx;
+						text{
+							font-weight: 500;
+							font-size: 20rpx;
+							color: #666666;
+						}
+						text:nth-child(1){
+							padding-right: 12rpx;
+							margin-right: 12rpx;
+						}
+					}
+					.coupon{
+						padding: 6rpx 12rpx;
+						background: rgba(250,236,205,0.88);
+						border-radius: 4rpx 4rpx 4rpx 4rpx;
+						font-weight: 500;
+						font-size: 20rpx;
+						color: #F7955C;
+					}
+				}
+			}
+			
+		}
+	}
+	
+</style>