<template>
<view class="order-item" @click="$emit('clickOrder')">
<!-- -1：草稿 1：待续期 2：生效中 3：未续期失效 4：已终止 -->
<view v-if="orderInfo.status == 1" class="status-tag wait-Aml">
待续期
</view>
<view v-else-if="orderInfo.status == 4" class="status-tag sign-tag">
已终止
</view>
<view v-else-if="orderInfo.status == 3" class="status-tag reserve-tag">
未续期失效
</view>
<view v-else-if="orderInfo.status === 2" class="status-tag reserve-tag">
生效中
</view>
<view v-else-if="orderInfo.status === -1" class="status-tag draft-tag">
草稿
</view>
<u-image
class="order-status"
width="70rpx"
height="70rpx"
src="https://baycloud-test.oss-cn-shenzhen.aliyuncs.com/human_management/2025-11-05/e5d06651-778e-4e74-b5cc-d4c59469afa8.png"
/>
<view @click="handclick()">
<view class="order-info">
<!-- 左侧投保人信息组 -->
<view class="insure-info">
<view class="insure-name f32 f-w-b ellipsis" v-if="orderInfo.insureName&&orderInfo.insureNameEnglish">
{{ orderInfo.insureName }}
{{ orderInfo.insureNameEnglish }}
</view>
<view class="supplementary-list">
<view>{{ orderInfo.skuName }} </view>
<!-- <view
> 每期保费：<text>{{ orderInfo.instalmentPremium | toThousands }}</text>
{{ orderInfo.currency }}
</view> -->
<view style="display: flex; font-size: 26upx;width: 200%;justify-content: space-between;" v-if="orderInfo.instalmentPremium" >
<view
> 每期保费：<text>{{ orderInfo.instalmentPremium | toThousands }}</text>
<text>{{ orderInfo.currency }}</text>
</view>
<view >
<view> <text v-if="orderInfo.paymentNum">【{{ orderInfo.paymentNum }}年】</text><text v-if="paymentFrequencyMap[orderInfo.paymentFrequency]">【{{ paymentFrequencyMap[orderInfo.paymentFrequency] }}】</text></view>
<view v-if="orderInfo.guaranteeNum">【保{{ orderInfo.guaranteeNum }}年】</view>
</view>
</view>
</view>
</view>
<!-- 右侧受保人信息（右移对齐设计图） -->
<view class="client-info">
<view class="info-row" v-if="orderInfo.protectionName||orderInfo.protectionNameEnglish">
<view class="type">受保人：</view>
<view class="protection-name ellipsis">
<!-- 优先显示 protectionName -->
<template v-if="orderInfo.protectionName">
{{ orderInfo.protectionName }}
</template>
<!-- 当 protectionName 不存在时显示 protectionNameEnglish -->
<template v-else-if="orderInfo.protectionNameEnglish">
{{ orderInfo.protectionNameEnglish }}
</template>
<template>【{{ orderInfo.protectionAge }}岁】</template>
</view>
</view>
<!-- <view >
<view> 【{{ orderInfo.paymentNum }}年】【{{ paymentFrequencyMap[orderInfo.paymentFrequency] }}】</view>
<view>【保{{ orderInfo.guaranteeNum }}年】</view>
</view> -->
</view>
</view>
<view class="info-money" @click="handYear">
<view>当前已缴费至</view>
<view style="margin-left: 44rpx" @click="handYear">
<text v-if="orderInfo.payYear">第{{ orderInfo.payYear }}年</text><text>第{{ orderInfo.payPeriod }}期</text></view
>
<u-icon color="#2F288F" name="arrow-right" size="24rpx"></u-icon>
</view>
<view class="info-time">
<view
v-if="orderInfo.policyNumber"
class="f28 c333 flex"
@click.stop="handleNativeCopyText(orderInfo.policyNumber)"
>保单号：{{ orderInfo.policyNumber
}}<image
style="width: 30rpx; height: 30rpx; margin-left: 4rpx"
src="/static/image/copy.png"
mode="aspectFit"
></image
></view>
<view class="f28 c333" v-if="orderInfo.signatureDate"
>签署时间：{{
dayjs(orderInfo.signatureDate).format("YYYY-MM-DD")
}}</view
>
</view>
<view class="info-time">
<view v-if="orderInfo.policyDate"
>保单日：{{ dayjs(orderInfo.policyDate).format("YYYY-MM-DD") }}</view
>
<view v-if="orderInfo.nextPeriodPayDeadline"
>下一期缴费截止日期：{{
dayjs(orderInfo.nextPeriodPayDeadline).format("YYYY-MM-DD")
}}</view
>
</view>
<view class="info-time" style="margin-top: 20rpx">
<view
style="color: #e07891"
v-if="orderInfo.status == 1 && orderInfo.remainingDays"
>离缴费日剩余：{{ orderInfo.remainingDays }}天</view
>
<!-- <view style="color: #e07891;">宽限期剩余：12天</view> -->
<view
class="addBtnChild"
v-if="orderInfo.status == 1"
@click="handleMaintainPayment"
>维护缴费</view
>
<view
class="addBtnChild"
@click="handleRestartPolicy"
v-if="orderInfo.status == 3"
>重启保单</view
>
</view>
</view>
<!-- 弹框1 -->
<view>
<!-- 遮罩层 -->
<view class="mask" v-if="showDialog" @click="showDialog = false"></view>
<!-- 弹窗内容 -->
<view class="dialog-wrap" v-if="showDialog">
<view class="dialog-title-wrap">
<view class="dialog-title">重启保单</view>
<view class="title-underline"></view>
<!-- 下划线元素 -->
</view>
<view class="dialog-content"> 是否确认重启保单？ </view>
<view class="dialog-close" @click="showDialog = false">×</view>
<!-- <view class="lines"></view> -->
<view style="display: flex">
<view class="btn-jz" @click="showDialog = false">取消</view>
<view
class="btn-jz"
@click="restartPolicyApi"
style="background-color: #2f288f; color: #fff"
>确定</view
>
</view>
</view>
</view>
</view>
</template>
<script>
import { copyText as nativeCopyText } from "@/config/utils";
import dayjs from "@/uni_modules/uview-ui/libs/util/dayjs.js";
import NickName from "@/components/nickName";
export default {
name: "orderItem",
filters: {
toThousands(num) {
if (!num && num !== 0) return '';
const parts = Number(num).toString().split('.');
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return parts.length > 1 ? parts.join('.') : parts[0];
}
},
components: {
NickName,
},
props: {
orderInfo: {
type: Object,
default: () => ({}),
},
},
data() {
return {
showDialog: false,
paymentFrequencyMap: {
0: "年缴",
1: "月缴",
2: "季缴",
3: "半年缴",
},
};
},
mounted() {
this.ty()
},
methods: {
handclick(){
console.log("==================1=================",this.orderInfo.id)
setTimeout(() => {
uni.$u.route({
url: "pages/policy/index",
type: "redirectTo", // 关闭当前页面，跳转到新页面
params: {
// 这里添加需要携带的参数，键值对形式
id: this.orderInfo.id,
appontDirect: "1",
}
});
}, 1000);
},
handYear(event) {
event.stopPropagation(); // 阻止事件冒泡，仅触发当前方法
console.log("点击了年份区域，不会触发外层的handclick");
// 其他业务逻辑...
},
dayjs,
async handleNativeCopyText(val) {
await nativeCopyText(val);
uni.$u.toast("复制成功");
},
handleRestartPolicy() {
this.showDialog = true;
},
handleMaintainPayment() {
uni.$u.route({
url: "pages/paymentInformation/paymentInformation?policyNumber=" + this.orderInfo.policyNumber,
type: "redirectTo", //关闭当前页面，跳转到新页面 无需返回的页面跳转
});
},
async restartPolicyApi() {
try {
const res = await uni.$u.http.get("/app/policyCustody/restart", {
params: {
policyNumber: this.orderInfo.policyNumber,
},
});
if (res.code == 1) {
uni.$u.toast("重启成功");
this.showDialog = false;
this.$set(this.orderInfo, "status", 2);
} else {
uni.$u.toast(res.msg || "重启失败，请重试");
}
} catch (err) {}
},
ty(){
this.orderInfo.instalmentPremium=3342222222222
}
// renderOccupationRank(val) {
// const rankList = [
// { name: "新贵", id: 0 },
// { name: "精英", id: 1 },
// { name: "王者", id: 2 },
// { name: "至尊", id: 3 },
// { name: "大团长", id: 4 },
// ];
// const findIndex = rankList.findIndex((item) => item.id === val);
// return findIndex > -1 ? `${rankList[findIndex].name}/` : "";
// },
// getNameByStatusArr(val, name) {
// const findObj = this.statusArr.find((_) => _.value === val);
// return findObj ? findObj[name] : "";
// },
// handleCopy() {
// uni.setClipboardData({
// data: this.orderInfo.orderNo,
// });
// },
},
};
</script>
<style lang="scss" scoped>
.order-item {
border-radius: 16upx;
background-color: white;
margin-bottom: 20upx;
position: relative;
padding: 30upx 18upx 36upx;
box-sizing: border-box; /* 关键：padding包含在总宽度内 */
width: 100%; /* 确保父容器占满宽度 */
// 状态标签样式（左上角悬浮）
.status-tag {
position: absolute;
top: 0;
left: 0;
font-size: 26upx;
color: #fff;
padding: 8upx 24upx;
border-radius: 16upx 0 16upx 0;
}
.reserve-tag {
background-color: #f9bd86;
}
.wait-Aml {
background-color: #e07891;
}
.sign-tag {
background-color: #3b289e;
}
.cancel-tag {
background-color: #4d5b58;
}
.draft-tag {
background-color: rgba(166, 161, 225, 1);
}
// 核心布局容器（左右分布）
.order-info {
display: flex;
justify-content: space-between; /* 已修复：现在会生效 */
align-items: flex-start;
width: 100%;
margin-top: 40upx;
white-space: nowrap;
}
// 左侧投保人信息
.insure-info {
width: 49%;
margin-right: 30upx;
white-space: nowrap;
.insure-name {
margin-bottom: 12upx;
}
.supplementary-list {
display: flex;
flex-direction: column;
gap: 9upx;
}
.supplementary-info {
font-size: 24upx;
color: #999;
line-height: 1.4;
}
}
// 右侧受保人信息
.client-info {
// flex: 1; /* 占据剩余全部宽度 */
min-width: 0; /* 允许内容收缩，避免溢出 */
// white-space: nowrap; /* 保持一行布局 */
.info-row {
display: flex;
align-items: center;
width: 100%;
}
.type {
font-size: 26upx;
// color: #999;
}
.protection-name {
font-size: 26upx;
color: #333;
flex: 1; /* 内容占满剩余宽度 */
// text-align: right;
}
}
// 通用样式
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.f32 {
font-size: 32upx;
}
.f-w-b {
font-weight: bold;
}
}
.info-money {
display: flex;
font-size: 26upx;
justify-content: space-around;
height: 70rpx;
width: 100%;
margin: 0 auto;
background-color: rgba(244, 245, 247, 1);
margin-top: 10upx;
line-height: 70rpx;
border-radius: 10rpx;
}
.info-time {
display: flex;
font-size: 26upx;
justify-content: space-between;
margin-top: 10upx;
}
.order-status {
position: absolute;
top: 0;
right: 20upx;
}
.addBtnChild {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
width: 184rpx;
height: 54rpx;
margin-left: 20rpx;
border: 1px solid #2f288f;
color: #2f288f;
border-radius: 20rpx;
}
// 弹框
.mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 999;
}
.dialog-wrap {
position: fixed;
left: 50%;
top: 50%; /* 改为50%，基于视口垂直居中 */
transform: translate(-50%, -50%); /* 配合top:50%实现完全居中 */
width: 74%;
/* 建议限制最大宽度，避免在大屏幕上过宽 */
max-width: 700rpx;
padding: 40rpx 30rpx; /* 增加内边距，让内容更美观 */
background: #fff;
border-radius: 8px;
z-index: 1000;
}
.dialog-title {
font-size: 16px;
font-weight: bold;
// margin-bottom: 15px;
text-align: center;
padding-bottom: 20rpx;
}
.dialog-content {
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
padding: 8rpx;
height: 200rpx;
line-height: 200rpx;
padding-bottom: 20rpx;
text-align: center;
}
.dialog-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
.icon {
transform: translate(10rpx, 10rpx);
}
.lines {
height: 10rpx;
width: 100%;
border-bottom: 1px solid #e5e5e5; /* 添加底部边框 */
}
.btn-jz {
margin: 0 auto;
text-align: center;
margin-top: 20rpx;
color: #2f288f;
font-size: 28rpx;
border: 1px solid #2f288f;
width: 180rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 10rpx;
}
.btn-jz:active {
background-color: #2f288f;
color: #fff;
}
.donwText {
margin-bottom: 10rpx;
text-align: center;
font-weight: normal;
color: #6e8ee6;
font-size: 28rpx;
}
.dialog-title-wrap {
/* 包裹标题和下划线，避免下划线被其他元素影响 */
display: flex;
flex-direction: column;
align-items: center; /* 标题和下划线居中对齐 */
margin-bottom: 30rpx; /* 与内容区保持距离 */
}
.dialog-title {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 10rpx; /* 标题与下划线的间距 */
}
.title-underline {
width: 100%; /* 下划线宽度 */
height: 2rpx; /* 下划线厚度 */
background-color: #3333; /* 下划线颜色，与主题色保持一致 */
border-radius: 1rpx; /* 轻微圆角，更美观 */
}
</style>
点击handYear不触发handclick
最新发布
这是一首充满激情的诗歌，表达了作者渴望加入路飞的航海队伍，一同经历风雨、追求梦想的心声。诗中展现了对友情、理想和信念的执着，以及面对困难时的勇气和决心。
扫一扫
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
