配件押金页面搭建及对接

src/pages.json

@@ -188,6 +188,14 @@
 						"navigationBarTitleText": "联系客服",
 						"enablePullDownRefresh": false
 					}
+                },
+				{
+                    "path": "deposit/index",
+                    "style": {
+						"navigationStyle":"custom",
+						"navigationBarTitleText": "配件押金",
+						"enablePullDownRefresh": false
+					}
                 }
             ]
 		},

src/pages/index/mine.vue

@@ -123,7 +123,7 @@
 				return process.uniEnv.qn_base_url
 			},
 			pages() {
-				return ['wallet', '', 'contract', 'cert', 'address', '', 'customer']
+				return ['wallet', 'deposit', 'contract', 'cert', 'address', '', 'customer']
 			},
 			headImageUrl() {
 				return this.info.headImage || this.placeholderImage

src/pages/mine/deposit/index.vue

+<template>
+	<view class="det-wrap">
+		<w-navbar title="配件押金"></w-navbar>
+		<view class="content">
+			<view class="toolbar">
+				<view class="refund" @tap="refund">退押金</view>
+			</view>
+			<view class="deposit">
+				<view class="title">我的配件押金</view>
+				<view class="amount"><text class="prefix">￥</text>{{ amount }}</view>
+			</view>
+			<view class="rules">
+				<view class="title">质保金规则</view>
+				<view class="item" v-for="(item, index) in rules" :key="index">
+					<view class="question">
+						<view class="qa-icon danger-bg">Q</view>
+						<view class="txt">{{ item.question }}</view>
+					</view>
+					<view class="answer">
+						<view class="qa-icon default-bg">A</view>
+						<view class="txt">{{ item.answer }}</view>
+					</view>
+					<u-divider v-show="rules.length != (index+1)" half-width="315" border-color="#F4F5F7" height="20"></u-divider>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				settled: null,
+				rules: [
+					{
+						question: '为什么缴纳设备押金？',
+						answer: `设备押金是什么什么什么，应该巴拉巴拉巴拉，所以
+								要缴纳，巴拉巴拉巴拉。`
+					},
+					{
+						question: '退还设备押金说明',
+						answer: `设备押金的退还说明是什么什么样的，应该怎么怎么
+								样，先找客服，然后再怎么怎么样，然后再怎么怎么
+								样，这样就可以了。`
+					}
+				],
+			};
+		},
+		computed: {
+			amount() {
+				return this.settled && this.settled.deposit || '0.00';
+			},
+		},
+		onLoad() {
+			if(this.vuex_token && this.vuex_settled) {
+				this.settled = this.vuex_settled
+			} else {
+				this.getData();
+			}
+		},
+		methods: {
+			getData() {
+				let self = this
+				const callBack = (vm, result) => {
+					// 后台自动判断入驻流程是否完成，前台通过status确定状态
+					if (result && result.record) {
+						self.settled = result.record
+					}
+				};
+				app.getBaseInfo(self, callBack);
+			},
+			refund() {
+				this.$u.route({
+					type: 'redirect',
+					url: "pages/mine/customer/index"
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.det-wrap {
+	background-color: #F4F5F7;
+	padding: 30rpx;
+	
+	.content {
+		padding: 30rpx;
+		width: 690rpx;
+		min-height: 1120rpx;
+		background: #FFFFFF;
+		border-radius: 12rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		
+		.toolbar {
+			align-self: flex-end;
+			.refund {
+				text-align: center;
+				width: 88rpx;
+				height: 40rpx;
+				background: #F4F5F7;
+				border-radius: 26rpx;
+				font-size: 20rpx;
+				font-weight: 400;
+				color: #2272FF;
+				line-height: 40rpx;
+			}
+			
+		}
+		.deposit {
+			margin-top: 50rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			
+			.title {
+				font-size: 40rpx;
+				font-weight: bold;
+				color: #333333;
+				line-height: 40rpx;
+			}
+			.amount {
+				margin-top: 60rpx;
+				font-size: 72rpx;
+				font-weight: bold;
+				color: #2272FF;
+				line-height: 72rpx;
+				.prefix{
+					font-size: 40rpx;
+				}
+			}
+		}
+		.rules {
+			align-self: flex-start;
+			margin-top: 160rpx;
+			.title {
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #333333;
+				line-height: 32rpx;
+				margin-bottom: 10rpx;
+			}
+			.item {
+				margin-top: 40rpx;
+				.question {
+					display: flex;
+					margin-bottom: 30rpx;
+					.txt {
+						margin-left: 20rpx;
+						width: 554rpx;
+						font-size: 28rpx;
+						font-weight: bold;
+						color: #333333;
+						line-height:40rpx;
+					}
+				}
+				.answer {
+					display: flex;
+					margin-bottom: 30rpx;
+					.txt {
+						margin-left: 20rpx;
+						width: 554rpx;
+						font-size: 24rpx;
+						font-weight: 400;
+						color: #666666;
+						line-height: 36rpx;
+					}
+				}
+			}
+		}
+	}
+}
+.qa-icon {
+	text-align: center;
+	width: 40rpx;
+	height: 40rpx;
+	border-radius: 8rpx;
+	font-size: 28rpx;
+	font-weight: 500;
+	color: #FFFFFF;
+	line-height: 40rpx;
+}
+.danger-bg {
+	background: #FA5A49;
+}
+.default-bg {
+	background: #2272FF;
+}
+</style>