You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

694 lines
17 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="complete-claims">
<u-navbar title="完善理赔信息" titleStyle="{'font-weight':'500','font-size':'32rpx'}" height="108rpx" placeholder="true"></u-navbar>
<view class="complete-body">
<!-- 顶部提示 -->
<view class="tips">
<image src="../../static/img/complete-tips.png" class="tips-img"></image>
<text class="tips-text">需扫描绑于螃蟹身上的验蟹师吊牌码添加哦</text>
</view>
<!-- 已申请的理赔 -->
<view class="item">
<view class="item-left">
<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
</view>
<view class="item-right">
<image src="../../static/img/item-img.png"></image>
<view class="item-num">YXS234568798097871</view>
<view class="item-con">死蟹2 公蟹</view>
<view class="item-price">
预计理赔<text>12.1222222</text>
</view>
</view>
</view>
<!-- <view class="item">
<view class="item-left">
<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
</view>
<view class="item-right">
<image src="../../static/img/item-img.png"></image>
<view class="item-num">YXS234568798097871</view>
<view class="item-con">死蟹2 公蟹</view>
<view class="item-price">
预计理赔<text>12.1222222</text>
</view>
</view>
</view>
<view class="item">
<view class="item-left">
<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
</view>
<view class="item-right">
<image src="../../static/img/item-img.png"></image>
<view class="item-num">YXS234568798097871</view>
<view class="item-con">死蟹2 公蟹</view>
<view class="item-price">
预计理赔<text>12.1222222</text>
</view>
</view>
</view>
<view class="item">
<view class="item-left">
<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
</view>
<view class="item-right">
<image src="../../static/img/item-img.png"></image>
<view class="item-num">YXS234568798097871</view>
<view class="item-con">死蟹2 公蟹</view>
<view class="item-price">
预计理赔<text>12.1222222</text>
</view>
</view>
</view>
<view class="item">
<view class="item-left">
<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
</view>
<view class="item-right">
<image src="../../static/img/item-img.png"></image>
<view class="item-num">YXS234568798097871</view>
<view class="item-con">死蟹2 公蟹</view>
<view class="item-price">
预计理赔<text>12.1222222</text>
</view>
</view>
</view>
<view class="item">
<view class="item-left">
<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
</view>
<view class="item-right">
<image src="../../static/img/item-img.png"></image>
<view class="item-num">YXS234568798097871</view>
<view class="item-con">死蟹2 公蟹</view>
<view class="item-price">
预计理赔<text>12.1222222</text>
</view>
</view>
</view>
<view class="item">
<view class="item-left">
<image src="https://wx3.sinaimg.cn/large/0060qb9Xgy1hsby36rqrxj335s35snpd.jpg"></image>
</view>
<view class="item-right">
<image src="../../static/img/item-img.png"></image>
<view class="item-num">YXS234568798097871</view>
<view class="item-con">死蟹2 公蟹</view>
<view class="item-price">
预计理赔<text>12.1222222</text>
</view>
</view>
</view> -->
<!-- 添加新的理赔 -->
<view class="add-btn" @click="show = true">
<view class="btn-bgColor">
<image src="../../static/img/add-scan.png"></image>
<button>扫码添加</button>
</view>
</view>
</view>
<!-- 底部按钮 -->
<view class="complete-bottom" >
<view class="bottom-left">
<view><text>288888</text></view>
<view>预计赔付</view>
</view>
<view class="bottom-price">
32.12222222
</view>
<view class="bottom-btn">
完成理赔
</view>
</view>
<u-popup ref="popup" :show="show" mode="bottom" @open="open" :safeAreaInsetBottom="false" :round="16" :closeOnClickOverlay="false">
<view class="complete-popup">
<image src="../../static/img/popup-close.png" @click="close"></image>
<view class="popup-title">补充理赔规格信息</view>
<scroll-view scroll-y="true" :style="{height: `${scroll_height}rpx`}"><!-- 允许上下滚动 -->
<view class="popup-tips">
<image src="../../static/img/complete-tips.png" class="tips-img"></image>
<text class="tips-text">规格信息可在包装外侧或购买订单中查看</text>
</view>
<view class="popup-item">
<view class="popup-item-title">
螃蟹类型
</view>
<view class="popup-item-box">
<view :class="['box-con',{'act': maleIsAct==true}]" @click="isActive">
<view class="box-left">
<image src="../../static/img/w1.png"></image>
</view>
<view class="box-right">
<view class="name">公蟹</view>
<view class="type">尖脐 钳大蟹钳毛多</view>
</view>
</view>
<view :class="['box-con',{'act': maleIsAct==false}]" @click="isActive">
<view class="box-left">
<image src="../../static/img/w1.png"></image>
</view>
<view class="box-right">
<view class="name">母蟹</view>
<view class="type">圆脐 钳小蟹钳毛少</view>
</view>
</view>
</view>
</view>
<view class="popup-item">
<view class="popup-item-title">
螃蟹规格
</view>
<view class="popup-item-box">
<view :class="['type-item',{'act': item.checked}]" v-for="item in typeList" @click="isTypeActive" :data-id='item.num'>{{item.name}}</view>
</view>
</view>
<view class="popup-item">
<view class="popup-item-title img">
单只蟹称重照片
</view>
<view class="item-addition">
漏出清晰的重量数字及溯源二维码。
</view>
<view class="image-box">
<view class="image-item">
<image src="https://wx2.sinaimg.cn/large/006WYq6ngy1hsd6nwzzj8j30u00u2dip.jpg"></image>
<view class="image-tip">
<image class="tip-icon" src="../../static/img/image-icon.png"></image>
示例
</view>
<view class="image-bottom">需要 1 张</view>
</view>
<view class="image-item">
<image src="https://wx2.sinaimg.cn/large/006WYq6ngy1hsd6nwzzj8j30u00u2dip.jpg"></image>
<view class="image-tip">
<image class="tip-icon" src="../../static/img/image-icon.png"></image>
示例
</view>
<view class="image-bottom">需要 1 张</view>
</view>
<view class="image-item">
<image src="https://wx2.sinaimg.cn/large/006WYq6ngy1hsd6nwzzj8j30u00u2dip.jpg"></image>
<view class="image-tip">
<image class="tip-icon" src="../../static/img/image-icon.png"></image>
示例
</view>
<view class="image-bottom">需要 1 张</view>
</view>
<view class="image-item">
<image src="https://wx2.sinaimg.cn/large/006WYq6ngy1hsd6nwzzj8j30u00u2dip.jpg"></image>
<view class="image-tip">
<image class="tip-icon" src="../../static/img/image-icon.png"></image>
示例
</view>
<view class="image-bottom">需要 1 张</view>
</view>
<view class="image-item">
<image class="image-add" src="../../static/img/image-add.png"></image>
</view>
</view>
</view>
</scroll-view>
<view class="popup-btn">
<view class="input-btn">确认提交</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data(){
return{
show:false,
typeList:
[{
name:'1.5两以下',
num:0,
checked:false
},{
name:'1.5 两',
num:1,
checked:false
},{
name:'2 两',
num:2,
checked:false
},{
name:'2.5 两',
num:3,
checked:false
},{
name:'3 两',
num:4,
checked:false
},{
name:'3.5两',
num:5,
checked:false
},{
name:'4 两',
num:6,
checked:false
},{
name:'4.5 两',
num:7,
checked:false
},{
name:'5 两',
num:8,
checked:false
},{
name:'5 两以上',
num:9,
checked:false
}],
maleIsAct:false,
scroll_height:0
}
},
onLoad() {
let windowHeight = wx.getSystemInfoSync().windowHeight;
let windowWidth = wx.getSystemInfoSync().windowWidth;
this.scroll_height = windowHeight*750/windowWidth - 400 - 30
},
methods:{
open(){
this.show = true
},
close(){
this.show = false
},
isActive(){
if(this.maleIsAct == true){
this.maleIsAct = false
}else{
this.maleIsAct = true
}
},
isTypeActive:function(e){
var index = e.currentTarget.dataset.id
var list = this.typeList
console.log(index)
console.log(list[index].checked)
if(list[index].checked == true){
list[index].checked = false
}else{
for (var item of this.typeList){
item.checked = false
}
list[index].checked = true
}
this.typeList = list
}
}
}
</script>
<style lang="scss">
.complete-body{
width: 750rpx;
min-height: 70vh;
background: #F5F5F5;
padding-bottom: 200rpx;
.tips{
width: 750rpx;
height: 60rpx;
background: #FFFAEE;
display: flex;
justify-content: center;
padding-top: 15rpx;
box-sizing: border-box;
}
.item{
width: 678rpx;
height: 180rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin: 24rpx 36rpx;
display: flex;
padding: 24rpx;
box-sizing: border-box;
position: relative;
.item-left{
width: 120rpx;
height: 120rpx;
border-radius: 12rpx;
overflow: hidden;
margin-right: 20rpx;
>image{
width: 100%;
height: 100%;
}
}
.item-right{
.item-num{
font-weight: 400;
font-size: 28rpx;
color: rgba(0,0,0,0.6);
line-height: 39rpx;
}
.item-con{
font-weight: 500;
font-size: 32rpx;
color: #000000;
line-height: 45rpx;
text-align: left;
}
.item-price{
width: 490rpx;
font-weight: 400;
font-size: 24rpx;
color: rgba(0,0,0,0.3);
line-height: 34rpx;
text-align: right;
box-sizing: border-box;
>text{
font-weight: 500;
font-size: 40rpx;
color: #000000;
line-height: 56rpx;
text-align: right;
&::before{
content: '¥';
font-size: 24rpx;
margin-right: 6rpx;
margin-left: 8rpx;
}
}
}
>image{
width: 32rpx;
height: 32rpx;
position: absolute;
right: 24rpx;
top: 24rpx;
}
}
}
.add-btn{
margin-left: 36rpx;
.btn-bgColor{
width: 678rpx;
height: 92rpx;
border-radius: 24rpx;
padding: 2rpx;
background-image: linear-gradient(91deg, rgba(67, 161, 255, 1), rgba(47, 128, 249, 1));
box-sizing: border-box;
position: relative;
z-index: 5;
>image{
position: absolute;
width: 36rpx;
height: 36rpx;
z-index: 10;
left: 260rpx;
top: 30rpx;
}
>button{
width: 100%;
height: 100%;
border-radius: 24rpx;
background: #F5F5F5;
font-weight: 500;
font-size: 28rpx;
color: #2388FF;
line-height: 39rpx;
padding-left: 60rpx;
padding-top: 24rpx;
}
}
}
}
.complete-bottom{
width: 750rpx;
height: 184rpx;
background: #FFFFFF;
position: fixed;
bottom: 0;
display: flex;
justify-content: space-around;
padding: 24rpx;
box-sizing: border-box;
z-index: 10;
.bottom-left{
font-weight: 400;
font-size: 24rpx;
color: rgba(0,0,0,0.3);
text-align-last: justify;
>view{
white-space: nowrap; //强制禁止换行
>text{
color: #000000 ;
font-size: 28rpx;
}
}
}
.bottom-price{
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 48rpx;
color: #FF2D46;
line-height: 67rpx;
&::before{
content: '¥';
font-size: 24rpx;
margin-right: 6rpx;
}
}
.bottom-btn{
width: 346rpx;
height: 92rpx;
background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%), #FFFFFF;
border-radius: 24rpx 24rpx 24rpx 24rpx;
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
line-height: 39rpx;
text-align: center;
padding-top: 26rpx;
box-sizing: border-box;
}
}
.complete-popup{
width: 750rpx;
height: 89vh;
background: #FFFFFF;
padding: 32rpx 36rpx;
position: relative;
box-sizing: border-box;
//关闭图标
>image{
width: 48rpx;
height: 48rpx;
position: absolute;
right: 36rpx;
top: 24rpx;
}
//标题
.popup-title{
font-weight: 600;
font-size: 32rpx;
color: #000000;
line-height: 45rpx;
}
//提示
.popup-tips{
width: 678rpx;
height: 60rpx;
background: #FFFAEE;
border-radius: 16rpx;
margin-top: 20rpx;
padding: 14rpx 24rpx;
box-sizing: border-box;
display: flex;
}
.popup-item{
.popup-item-title{
font-weight: 600;
font-size: 28rpx;
color: #000000;
line-height: 39rpx;
margin-bottom: 20rpx;
margin-top: 24rpx;
&.img{
margin-top: 10rpx;
margin-bottom: 12rpx;
}
}
.popup-item-box{
width: 678rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box-con{
width: 332rpx;
height: 120rpx;
background: #F8F8F8;
border-radius: 10rpx;
display: flex;
justify-content: space-around;
padding-top: 20rpx;
box-sizing: border-box;
.box-left{
width: 110rpx;
height: 80rpx;
overflow: hidden;
>image{
width: 100%;
height: 100%;
}
}
.box-right{
width: 184rpx;
height: 70rpx;
margin-top: 6rpx;
.name{
font-weight: 400;
font-size: 28rpx;
color: #000000;
}
.type{
font-weight: 400;
font-size: 22rpx;
color: rgba(34,34,34,0.6);
line-height: 31rpx;
}
}
&.act{
z-index: 15;
background: rgba(35,136,255,0.1);
border: 2rpx solid #2388FF;
}
}
.type-item{
width: 332rpx;
height: 72rpx;
background: #F8F8F8;
border-radius: 8rpx;
font-weight: 400;
font-size: 28rpx;
color: #000000;
line-height: 39rpx;
text-align: center;
padding-top: 16rpx;
box-sizing: border-box;
margin-bottom: 14rpx;
&.act{
z-index: 15;
background: rgba(35,136,255,0.1);
border: 2rpx solid #2388FF;
}
}
.item-addition{
font-weight: 400;
font-size: 24rpx;
color: #999999;
line-height: 34rpx;
text-align: left;
}
.image-box{
display: flex;
flex-wrap: wrap;
justify-content: left;
.image-item{
width: 226rpx;
height: 226rpx;
background: #F3F4F5;
border-radius: 10rpx;
box-sizing: border-box;
overflow: hidden;
margin-top: 20rpx;
position: relative;
text-align: center;
margin-right: 12rpx;
>image{
width: 100%;
height: 100%;
z-index: 5;
}
.image-tip{
width: 100rpx;
height: 38rpx;
background: rgba(0,0,0,0.6);
border-radius: 0rpx 0rpx 8rpx 0rpx;
position: absolute;
left: 0;
top: 0;
z-index: 10;
font-weight: 400;
font-size: 22rpx;
color: #FFFFFF;
line-height: 31rpx;
text-align: left;
padding: 4rpx 12rpx;
box-sizing: border-box;
display: flex;
.tip-icon{
width: 24rpx;
height: 24rpx;
margin-right: 8rpx;
margin-top: 4rpx;
}
}
.image-bottom{
width: 226rpx;
height: 38rpx;
background: rgba(0,0,0,0.6);
border-radius: 0rpx 0rpx 8rpx 0rpx;
position: absolute;
left: 0;
right: 0;
bottom: 0;
font-weight: 400;
font-size: 22rpx;
color: #FFFFFF;
line-height: 31rpx;
text-align: center;
}
.image-add{
margin-top: 90rpx;
width: 48rpx;
height: 48rpx;
}
}
}
}
.popup-btn{
height:160rpx;
position: absolute;
bottom: 0;
background-color: #FFF;
.input-btn{
width: 678rpx;
height: 92rpx;
background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%), #FFFFFF;
border-radius: 24rpx;
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
line-height: 39rpx;
text-align: center;
padding: 26rpx;
box-sizing: border-box;
}
}
}
.tips-img{
width: 86rpx;
height: 30rpx;
}
.tips-text{
font-weight: 400;
font-size: 24rpx;
color: #F0A941;
line-height: 34rpx;
margin-left: 12rpx;
}
</style>