feat：储值页面提交

myPages/coupon/index.rpx.scss

@@ -0,0 +1,153 @@
+/* 服务订单内容*/
+.service-order-tab-bar {
+    background: #fff;
+    display: flex;
+    justify-content: space-around;
+    height: 50px;
+    background-color: #f5f5f5;
+
+    .service-order-tab-item {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+        color: #333;
+        line-height: 26px;
+    }
+
+    .service-order-tab-item.active {
+        // color: #ff0000;
+    }
+
+    .underline {
+        border-bottom: 2px solid #FFE05C;
+    }
+}
+
+.bg-img {
+    background-image: url('/static/coupon/u210.png');
+    background-repeat: repeat;
+    height: 94px;
+    margin: 12px;
+}
+
+.bg-img1 {
+    background-image: url('/static/coupon/u211.png');
+    background-repeat: repeat;
+    height: 94px;
+    margin: 12px;
+}
+
+.service-order {
+    // background: #fff;
+}
+
+/* 门店列表 */
+.store-wrap {
+    border-radius: 2px;
+    padding-bottom: 12px;
+    padding-left: 12px;
+    padding-right: 12px;
+
+    .row-list {
+        .store-content {
+            display: flex;
+            align-items: center;
+            height: 94px;
+            color: #333333;
+
+            .h-left-content {
+                width: 26%;
+                text-align: center;
+
+                .h-text {
+                    width: 100%;
+                    font-weight: 400;
+                    line-height: 18px;
+                    font-size: 12px;
+
+                    .money {
+                        font-size: 18px;
+                        font-weight: bold;
+                        line-height: 26px;
+                    }
+                }
+            }
+
+            .h-center-content {
+                width: 50%;
+                padding-left: 12px;
+
+                .title {
+                    width: 100%;
+                    color: #999999;
+                    font-size: 12px;
+                    line-height: 18px;
+
+                    .h-value {
+                        font-size: 18px;
+                        line-height: 32px;
+                        color: #333333;
+                    }
+                }
+            }
+
+            .h-right-content {
+                width: 24%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background-image: url('/static/coupon/u2102.png');
+                height: 94px;
+
+                .h-btn-value-use {
+                    background: #FFE05C;
+                    color: #333333;
+                    height: 30px;
+                    width: 80px;
+                    text-align: center;
+                    line-height: 30px;
+                    border-radius: 15px;
+                    font-size: 14px;
+                }
+
+                .h-btn-value-receive {
+                    background: #93D21A;
+                    color: #fff;
+                    height: 30px;
+                    width: 80px;
+                    text-align: center;
+                    line-height: 30px;
+                    border-radius: 15px;
+                }
+
+                .h-btn-img {
+                    display: flex;
+                    align-items: center;
+
+                    image {
+                        height: 68px;
+                        width: 68px;
+                    }
+                }
+            }
+        }
+
+    }
+
+}
+
+/* 产品订单 */
+.product-order {
+    margin-top: 12px;
+}
+
+/* 底部 */
+.footer {
+    margin-top: 30px;
+    height: 120px;
+    font-size: 12px;
+    text-align: center;
+    color: #666;
+}

myPages/coupon/index.vue

@@ -0,0 +1,109 @@
+<template>
+    <view class="order-content-wrap">
+
+        <!-- 导航-->
+        <view class="service-order-tab-bar">
+            <view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab1' }"
+                @click="changeServiceTab('orderTab1')">
+                <text :class="{ underline: currentServiceTab === 'orderTab1' }">可使用</text>
+            </view>
+            <view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab2' }"
+                @click="changeServiceTab('orderTab2')">
+                <text :class="{ underline: currentServiceTab === 'orderTab2' }">已使用</text>
+            </view>
+            <view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab3' }"
+                @click="changeServiceTab('orderTab3')">
+                <text :class="{ underline: currentServiceTab === 'orderTab3' }">已过期</text>
+            </view>
+        </view>
+
+        <view class="custom-line"></view>
+        <!-- 当前订单-->
+        <view class="service-order">
+
+            <!-- 门店列表 -->
+            <view v-if="countsList.length > 0" v-for="(item, index) in countsList" :class="computedStyle(item.state)"
+                class="store-wrap  bg-img">
+                <view class="row-list">
+                    <view class="store-content">
+                        <view class="h-left-content">
+                            <view class="h-text">
+                                <view class="money">￥{{ item.discountsPrice }}</view>
+                                <view class="desc">{{ item.name }}</view>
+                            </view>
+                        </view>
+                        <view class="h-center-content">
+                            <view class="title">
+                                <text class="h-value">门店通用</text>
+                            </view>
+                            <view class="title">
+                                使用平台：<text v-if="item.strategyType == '0'">全平台</text>
+                                <text v-else-if="item.strategyType == '1'">个人优惠卷</text>
+                            </view>
+                            <view class="title">
+                                有效时间：{{ this.dateFormat(item.startTime) }}~{{ this.dateFormat(item.endTime) }}
+                            </view>
+                        </view>
+                        <view class="h-right-content">
+                            <view class="h-btn">
+                                <view @click="gotoUseCoupon()" v-if="item.state == 0" class="h-btn-value-use">立即使用</view>
+                                <!-- <view @click="gotoReceiveCoupon()" v-else-if="index == 1" class="h-btn-value-receive">立即领取</view> -->
+                                <view v-else-if="item.state == 1" class="h-btn-img">
+                                    <image src="../../static/coupon/u2109.png" mode=""></image>
+                                </view>
+                                <view v-else class="h-btn-img">
+                                    <image src="../../static/coupon/u2108.png" mode=""></image>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+            <view v-else class="footer">
+                <view class="">---暂无数据---</view>
+            </view>
+
+            <view v-if="countsList.length > 0" class="footer">
+                <view class="">---到底了---</view>
+            </view>
+        </view>
+
+    </view>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            currentServiceTab: 'orderTab1', // 当前选中的 Tab
+            reqParm: {
+                auth: true,
+                type: 0 // 我的优惠卷列表（0未使用， 1已使用， 2已过期 null查询全部）
+            },
+            countsList: []
+        };
+    },
+    onLoad() {
+
+    },
+    methods: {
+        // 切换菜单
+        changeServiceTab(tab) {
+            if (tab == 'orderTab1') { //全部
+                this.reqParm.type = '0';
+            } else if (tab == 'orderTab2') {
+                this.reqParm.type = '1';
+            } else if (tab == 'orderTab3') {
+                this.reqParm.type = '2';
+            }
+
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import '/common/css/common.css';
+@import './index.rpx.scss';
+</style>

myPages/recharge/index.css

@@ -1,7 +0,0 @@
-.tabBarLineHeight{
-    height: 138rpx;
-}
-.tabBarView{
-    position: fixed;
-    bottom: 0;
-}

myPages/recharge/index.rpx.scss

@@ -0,0 +1,253 @@
+/*scroll-view外层*/
+.skill-sequence-panel-content-wrapper {
+	position: relative;
+	white-space: nowrap;
+	// padding: 10rpx 0 10rpx 10rpx;
+	margin-top: 10px;
+}
+
+/*左右渐变遮罩*/
+.hide-content-box {
+	position: absolute;
+	top: 0;
+	height: 100%;
+	width: 10px;
+	z-index: 2;
+}
+
+.hide-content-box-left {
+	left: 0;
+	background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
+}
+
+.hide-content-box-right {
+	right: 0;
+	background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
+}
+
+.kite-classify-scroll {
+	width: 100%;
+	// height: 380rpx;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.kite-classify-cell {
+	display: inline-block;
+	width: 266rpx;
+	// height: 370rpx;
+	margin-right: 20rpx;
+	background-color: #ffffff;
+	border-radius: 10rpx;
+	overflow: hidden;
+	box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
+	position: relative;
+	.h-bg-img{
+		image{
+			height: 80px;
+		}
+	}
+	.content{
+		position: absolute;
+		bottom: 20%;
+		left:12px;
+		.money{
+			color: #333333;
+			.v{
+				font-size: 18px;
+				font-weight: bold;
+			}
+		}
+		.desc{
+			margin-top: 6px;
+			font-size: 12px;
+			color: #333333;
+			line-height: 22px;
+		}
+	}
+	.active{
+		 display: block;
+	}
+}
+
+	
+// 余额
+.recharge-me{
+	position: relative;
+	.bg-img{
+		height: 160px;
+		background: #FFE05C;
+	}
+	.wallet-content{
+		 position: absolute;
+		 top: 0;
+		 left: 0;
+		 right: 0;
+		 padding: 12px;
+		 .h-balance-wrap{
+			 background: #FFFCF1 ;
+			 border-radius: 6px;
+			 text-align: center;
+			 padding-left: 20px;
+			 padding-right: 20px;
+			 .h-balance{
+			 	display: flex;
+			 	justify-content: space-between;
+				align-items: center;
+				height: 118px;
+			 	.recharge-balance{
+			 		font-family: PingFangSC-Regular, PingFang SC;
+					.h-nav-img {
+						image{
+							height: 18px;
+							width: 18px;
+						}
+					}
+			 		.name{
+			 			font-size: 14px;
+			 			font-weight: 400;
+			 			color: #666666;
+			 			line-height: 22px;
+			 		}
+			 		.balance-value{
+			 			font-size: 18px;
+			 			font-weight: bold;
+			 			color: #333333;
+			 			line-height: 26px;
+			 		}
+			 	}
+			 }
+			 .btn{
+			 	display: flex;
+			 	font-size: 14px;
+				justify-content: space-between;
+				height: 60px;
+				align-items: center;
+				color: #999999;
+			 	.item-btn{
+					width: 50%;
+			 	}
+			 }
+		 }
+		
+	}
+	
+}
+
+// 充值金额选择
+.recharge-content-wrap{
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	margin-top: 12px;
+	position: relative;
+	.recharge-content{
+		width: calc(50% - 6px);
+		margin-bottom: 12px;
+		position: relative;
+		.h-bg-img{
+			image{
+				height: 80px;
+			}
+		}
+		.content{
+			position: absolute;
+			bottom: 25%;
+			left:12px;
+			.money{
+				color: #333333;
+				.v{
+					font-size: 18px;
+					font-weight: bold;
+				}
+			}
+			.desc{
+				font-size: 12px;
+				color: #333333;
+				line-height: 22px;
+			}
+		}
+		.choose-status{
+			display: none;
+			position: absolute;
+			left: 0px;
+			top: 0px;
+			.active{
+			  width: 0;
+			  height: 0;
+			  border-left: 0px solid transparent;
+			  border-right: 30px solid transparent;
+			  border-top: 30px solid green;
+			}
+			image{
+				height: 40px;
+				width: 40px;
+			}
+		}
+		.active{
+			 display: block;
+		}
+	}
+	
+}
+
+.h-custom{
+	background: #FFFCF1;
+	display: flex;
+	padding: 12px;
+	border-radius: 10px;
+	margin-top: 8px;
+	.h-money{
+		margin-left: 6px;
+	}
+}
+
+// 协议
+.recharge-agreement{
+	margin-top: 12px;
+	margin-bottom: 12px;
+	margin-left: 12px;
+	text-align: center;
+	.radio-group{
+		.v-text{
+			// color:green;
+		}
+		.h-btn{
+			color:green;
+		}
+	}
+	
+}
+
+// 提交按钮
+.h-submit-btn{
+	margin-top: 12px;
+	width: 343px;
+	height: 42px;
+	background: #FFE05C;
+	border-radius: 27px;
+	text-align: center;
+	line-height: 42px;
+}
+
+// 使用说明
+.h-desc{
+	font-family: PingFangSC-Regular, PingFang SC;
+	.title{
+		height: 24px;
+		font-size: 14px;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #333333;
+		line-height: 24px;
+	}
+	.h-content{
+		height: 40px;
+		font-size: 12px;
+		font-weight: 400;
+		color: #999999;
+		line-height: 20px;
+	}
+}
+

myPages/recharge/index.vue

@@ -1,31 +1,124 @@
 <template>
 	<view class="content">
-		储值
+		<!-- 钱包 -->
+		<view class="recharge-me">
+			<view class="wallet-content">
+				<view class="h-balance-wrap">
+					<view class="h-balance">
+						<view class="recharge-balance">
+							<view class="h-nav-img">
+								<image src="../../static/transaction/u1.png" mode=""></image>
+							</view>
+							<view class="name">储值余额</view>
+							<view class="balance-value">￥
+								<text v-if="userInfo.rechargeBalance">{{ userInfo.rechargeBalance }}</text>
+								<text v-else>0</text>
+							</view>
+						</view>
+						<view class="recharge-balance">
+							<view class="h-nav-img">
+								<image src="../../static/transaction/u3.png" mode=""></image>
+							</view>
+							<view class="name">赠送余额</view>
+							<view class="balance-value">￥
+								<text v-if="userInfo.rewardBalance" class="">{{ userInfo.rewardBalance }}</text>
+								<text v-else>0</text>
+							</view>
+						</view>
+						<view class="recharge-balance">
+							<view class="h-nav-img">
+								<image src="../../static/transaction/u4.png" mode=""></image>
+							</view>
+							<view class="name">赠送优惠券</view>
+							<view class="balance-value">
+								<text v-if="userInfo.coupon">{{ userInfo.coupon }}</text>
+								<text v-else>0</text>
+							</view>
+						</view>
+					</view>
+					<view class="horizontal-dashed-line"></view>
+					<view class="btn">
+						<view @click="gotoTransactionRecords()" class="item-btn">
+							<text>交易记录</text>>
+						</view>
+						<view class="dashed-line"></view>
+						<view @click="gotoTransactionOrderRecords()" class="item-btn">
+							<text>储值订单</text>>
+						</view>
+					</view>
+				</view>
+
+				<view class="skill-sequence-panel-content-wrapper">
+					<!--左边虚化-->
+					<!-- <view class="hide-content-box hide-content-box-left"></view> -->
+					<!--右边虚化-->
+					<!-- <view class="hide-content-box hide-content-box-right"></view> -->
+					<scroll-view scroll-x="true" class="kite-classify-scroll">
+						<view @click="selectActiveRecharge(item, index)" class="kite-classify-cell shadow"
+							v-for="(item, index) in rechargeList" :key="index">
+							<view v-if="currentTab === index" class="h-bg-img">
+								<image src="../../static/transaction/u2.png" mode=""></image>
+							</view>
+							<view v-else class="h-bg-img">
+								<image src="../../static/recharge/dianka.png" mode=""></image>
+							</view>
+							<view class="content">
+								<view class="money">
+									￥<text class="v">{{ item.reachPrice }}</text>
+								</view>
+								<view class="desc">
+									<text>{{ item.name }} </text>
+									<!-- <text>充￥{{item.reachPrice}}赚送￥{{item.discountsPrice}}</text> -->
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+
+				<!-- 充值按钮 -->
+				<view v-if="rechargeList.length > 0" @click="submitOrder()" class="h-submit-btn">
+					<text>立即充值</text>
+				</view>
+
+				<!-- 用户充值协议 -->
+				<view class="recharge-agreement">
+					<view class="radio-group">
+						<radio @click="toggleSelection" class="v-text" :checked="isSelected">我已阅读并同意</radio>
+						<text @click="gotoTermOfService(8)" class="h-btn">《储值协议》</text>
+					</view>
+				</view>
+
+				<!-- 使用说明 -->
+				<view class="h-desc">
+					<view class="title">
+						<text>使用说明</text>
+					</view>
+					<view class="h-content">
+						
+					</view>
+				</view>
+			</view>
+		</view>
 
 	</view>
 </template>
 
 <script>
-	import tabBar from "../../components/tabBar/tabBar";
-	export default {
-		components:{
-			tabBar
-		},
-		data() {
-			return {
-			}
-		},
-		onLoad() {
-			uni.hideTabBar({
-				animation:false
-			})
-		},
-		methods: {
+export default {
+
+	data() {
+		return {
 		}
+	},
+	onLoad() {
+
+	},
+	methods: {
 	}
+}
 </script>
 
-<style>
-	@import '/common/css/common.css';
-	@import './index.rpx.css';
+<style scoped lang="scss">
+@import '/common/css/common.css';
+@import './index.rpx.scss';
 </style>

pages.json

@@ -67,7 +67,14 @@
 				{
 					"path": "recharge/index",
 					"style": {
-						"navigationBarTitleText": "储值余额",
+						"navigationBarTitleText": "储值服务",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path": "coupon/index",
+					"style": {
+						"navigationBarTitleText": "优惠券",
 						"enablePullDownRefresh": false
 					}
 				}

pages/my/index.vue

@@ -371,10 +371,8 @@ export default {
 		// 储值服务
 		gotoRechargeService() {
 			uni.navigateTo({
-				url: '/myPages/recharge/index',
-				params: {
-					name: 'lisa'
-				}
+				url: '/myPages/recharge/index'
+				
 			})
 		},
 		// 去实名认证
@@ -383,18 +381,12 @@ export default {
 			console.log(that.userInfo.id)
 			uni.navigateTo({
 				url: '/pages/me/real-name-auth',
-				params: {
-					userId: that.userInfo.id
-				}
 			})
 		},
 		// 去优惠劵页面
 		gotoCoupon() {
 			uni.navigateTo({
-				url: '/pages/coupon/coupon',
-				params: {
-					name: 'lisa'
-				}
+				url: '/myPages/coupon/index',
 			})
 		},
 		// 去新老系统切换