assess-app/pages/index/module/popup-module.vue

<template>
	<uni-popup background-color="#fff" ref="popup" type="bottom" borderRadius="10px 10px 10px 10px">
		<view class="p-24 box-border-box pop-box r-20">
      <view v-if="colorType<=5">
        <view  class="r-40 p-20 box-border-box flex-stretch mb-48 box-shadow"
               :class="colorType === 1?'bgc-F92A3B-E70073':colorType === 2?'bgc-AB46FF-8125FE':colorType === 3?'bgc-00B6DC-0F62FA':'bgc-00C651-009B65'">
          <view class="mr-20 q-box fc-fff size-48"
                :class="colorType === 1?'bgc-F8516C':colorType === 2?'bgc-B768FF':colorType === 3?'bgc-33B2EB':'bgc-34CC79'">
            {{colorType === 1?'$':colorType === 2?'🏚':colorType === 3?'🛡':'🎁'}}
          </view>
          <view class="flex-direction flex-start">
            <view class="size-24 fc-fff sys-weight-600 mb-10 zw-box bgc-F8516C" v-if="colorType===1"  >
              债务
            </view>
            <view class="size-24 fc-fff sys-weight-600 mb-10 zw-box bgc-B365FF" v-else-if="colorType===2"  >
              借款人
            </view>
            <view class="size-24 fc-fff sys-weight-600 mb-10 zw-box bgc-34B4EB" v-else-if="colorType===3" >
              担保人
            </view>
            <view class="size-24 fc-fff sys-weight-600 mb-10 zw-box bgc-34CA79" v-else-if="colorType===4" >
              抵押物
            </view>
            <view class="size-24 fc-fff sys-weight-600 mb-10 zw-box bgc-34CA79" v-else>
              债权人
            </view>
            <view class="fc-fff size-32 text-overflow-ellipsis-one mb-10">
              {{itemData.attachmentName}}
            </view>
            <view class="fc-fff hy-box size-24" v-if="colorType===1">
              活跃的
            </view>
          </view>
        </view>
        <view class="p-tb30 bt-EDEEF0">
          <view class="p-30 box-border-box bgc-EEFAFF r-40 mb-48 box-shadow b-DBEAFE flex-stretch">
            <view class="ok-box r-circle bgc-DBEAFE box-border-box mr-20 center justify-center">
              <view class="checkmarkempty-box r-circle center justify-center">
                <uni-icons type="checkmarkempty" size="12" color="#155DFB"></uni-icons>
              </view>
            </view>
            <view class="flex-direction flex-start">
              <view class="center mb-10">
                <view class="size-28 mr-18 fc-1B388E">
                  尽职调查状态
                </view>
                <view class="size-24 yz-box fc-008235 sys-weight-600">
                  已验证
                </view>
              </view>
              <view class="size-24 fc-1547E6">
                所有要求的文件均已验证并为最新文件
              </view>
            </view>
          </view>
        </view>
        <view class="max-h">
          <view class="size-32 mb-20">
            实体详情
          </view>
          <view class="b-F3F4F6-1 box-shadow sys-radius-20">
            <view class="p-30 box-border-box b-b-F3F4F6 center row-justify-sb" v-for="(item) in 3">
              <view class="size-28">
                实体类型
              </view>
              <view class="size-28">
                公司
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <view class="max-h">
          <view class="size-32 mb-20">
            评估结果
          </view>
          <view class="b-F3F4F6-1 box-shadow sys-radius-20">
            <view class="p-30 box-border-box b-b-F3F4F6 center row-justify-sb" >
              <view class="size-28">
                评估单价
              </view>
              <view class="size-28">
                ￥{{(propertyRes.unit_price*1).toFixed(2)}}
              </view>
            </view>

            <view class="p-30 box-border-box b-b-F3F4F6 center row-justify-sb" >
              <view class="size-28">
                评估总价
              </view>
              <view class="size-28">
                ￥{{propertyRes.total_price}}
              </view>
            </view>
            <view class="p-30 box-border-box b-b-F3F4F6 center row-justify-sb" >
              <view class="size-28">
                评估维度
              </view>
              <view class="size-28">
                {{propertyRes.predict_msg}}
              </view>
            </view>

          </view>
        </view>
      </view>

		</view>
	</uni-popup>
</template>

<script>
	import {predictProperty} from "@/api/valuation";

  export default {
		components: {},
		data() {
			return {
        colorType:3,
        propertyRes: {
          unit_price: '',
          total_price: '',
          predict_msg: '',
        },
        itemData:{
          attachmentName:""
        }
      }
		},
		onLoad(data) {},
		mounted() {},
		methods: {
			openPop(colorType,data) {
        if (colorType !==undefined){
          this.colorType=colorType
        }
        if(colorType===6){
          this.propertyRes=data
        }else {
          this.itemData=data
        }
				this.$refs.popup.open()
			},
      setProperty(data) {

      }
		}
	}
</script>

<style lang="scss" scoped>
	.max-h{
		max-height: 40vh;
		overflow: auto;
	}
	.b-b-F3F4F6 {
		border-bottom: .1rpx solid #F3F4F6;
	}

	.pop-box {
		border-radius: 20rpx 20rpx 0 0;
	}

	.box-shadow {
		box-shadow: 5rpx 5rpx 5px 0 rgba(0, 0, 0, 0.2);
	}

	.q-box {
		width: 88rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 30rpx;
	}

	.zw-box {
		padding: 4rpx 16rpx;
		display: inline-block;
		border-radius: 20rpx;
	}

	.hy-box {
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		background: #00CA52;
	}

	.bt-EDEEF0 {
		border-top: .1rpx solid #EDEEF0;
	}

	.b-DBEAFE {
		border: .1rpx solid #DBEAFE;
	}

	.yz-box {
		background: #DBFCE7;
		border-radius: 40rpx;
		padding: 4rpx 16rpx;
		border: .1rpx solid #B9F8CF;
	}

	.ok-box {
		width: 72rpx;
		height: 72rpx;
	}

	.checkmarkempty-box {
		width: 32rpx;
		height: 32rpx;
		border: 1rpx solid #155DFB;
	}
</style>