|
|
@@ -0,0 +1,176 @@
|
|
|
+<template>
|
|
|
+ <view class="app-container">
|
|
|
+ <view v-if="!detailData" class="no-text">
|
|
|
+ <image src="/static/image/no-data.png"></image>
|
|
|
+ <view class="texts">暂无数据</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <block v-else>
|
|
|
+ <view class="count-container">
|
|
|
+ <view class="item">
|
|
|
+ <view>¥{{ detailData.shouldAmount || '0' }}</view>
|
|
|
+ <view>应缴金额</view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view>¥{{ detailData.payableAmount || '0' }}</view>
|
|
|
+ <view>质保金余额</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="info-container">
|
|
|
+ <view class="title">个人信息</view>
|
|
|
+ <view class="row">服务人员姓名：{{ detailData.workerName }}</view>
|
|
|
+ <view class="row">服务人员电话：{{ detailData.mobile }}</view>
|
|
|
+ <view class="row">服务人员身份证：{{ detailData.idCard }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="list-container">
|
|
|
+ <block v-if="detailData && detailData.workerWarrantyPrices && detailData.workerWarrantyPrices.length > 0">
|
|
|
+ <block v-for="(item, index) in detailData.workerWarrantyPrices" :key="index">
|
|
|
+ <view class="item">
|
|
|
+ <view class="left">
|
|
|
+ <view class="title">质保金{{ item.type === 'A' ? '退还' : '扣除' }}</view>
|
|
|
+ <view class="date">{{ item.time }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="right">{{ item.type === 'A' ? '+' : '-' }}{{ item.price }}</view>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ </block>
|
|
|
+ <view v-else class="no-text">
|
|
|
+ <image src="/static/image/no-data.png"></image>
|
|
|
+ <view class="texts">暂无记录</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ detailData: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下拉刷新
|
|
|
+ onPullDownRefresh() {
|
|
|
+ this.getDetail()
|
|
|
+ },
|
|
|
+
|
|
|
+ onLoad() {
|
|
|
+ this.getDetail()
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ // 获取详情
|
|
|
+ getDetail() {
|
|
|
+ this.$api
|
|
|
+ .post('/user/warranty')
|
|
|
+ .then(res => {
|
|
|
+ this.detailData = res.data
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.count-container {
|
|
|
+ display: flex;
|
|
|
+ height: 160rpx;
|
|
|
+ align-items: center;
|
|
|
+ background: #ffffff;
|
|
|
+ border-bottom: 1px solid #f7f7f7;
|
|
|
+ .item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 120rpx;
|
|
|
+ border-right: 1px solid #e5e5e5;
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ view {
|
|
|
+ &:nth-child(1) {
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #e95505;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.info-container {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 0 30rpx 15rpx;
|
|
|
+ .title {
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #6da7ff;
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.list-container {
|
|
|
+ padding: 0 30rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .item {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 30rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #e95505;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.no-text {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 50rpx;
|
|
|
+ text-align: center;
|
|
|
+ image {
|
|
|
+ width: 450rpx;
|
|
|
+ height: 250rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+ .texts {
|
|
|
+ color: #cccccc;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
linwenxin