<template> <view class="content"> <view class="content-matter" v-for="(item,index) in list" @click="jump(item)" :key="index"> <view class="content-matter-lampwick"> <view class="content-matter-lampwick-lampw"> <view :class="subscript == '1' ? 'only-bg-red' : 'common-bg'" class=""></view> <view class="">{{item.title}}</view> </view> <view class="content-matter-lampwick-wick"> 维修时间:{{item.repairTime | formatDate}} </view> </view> <view class="content-matter-substance"> <image :src="item.fileVos[0].url" mode=""></image> <view class=""> <view class=""> 说明:{{item.remark ? item.remark : '暂无说明'}} </view> <!-- // 已发布 --> <view class="buttoncolor" v-if="subscript == '0'"> <button class="buttoncl" @click.stop="handleAgainAdd(item)">修改</button> <button class="buttonclde" @click.stop="abolish(1,item)">取消订单</button> </view> <!-- // 已驳回 --> <view class="d-flex a-end j-sb" v-if="subscript == '1'"> <view class="reject flex-1 hiddenMore"> 驳回理由:没有明确问题描述没有明确问题描述没有明确问题描述没有明确问题描述 </view> <button @click.stop="handleAgainAdd(item)" class="buttoncl" style="margin-left: 20rpx;">重新发布</button> </view> <!-- // 待支付 --> <view class="unpaid" v-if="subscript == '2'"> <view class="unpaid-paid"> <view class=""> 已沟通审核通过,待支付<text>{{item.actualAmount ? item.actualAmount : 0}}元</text> </view> <view class=""> 截止1小时内支付完成<text>{{isEndTime}}</text> </view> </view> <view class="" @click.stop="payment"> <button class="buttoncl">支付</button> </view> </view> <!-- // 已接单 --> <view class="buttoncolor" v-if="subscript == '3'"> <button class="buttoncl" @click.stop="abolish(2)">退款</button> <button class="buttonclde" @click.stop="abolish(3)">详情</button> <button class="buttonclde" @click.stop="abolish(4)">已退款</button> </view> </view> </view> </view> <compopover :show="show" :title="title" :titbut="titbut" @aindex="aindex" @aindexst="aindexst"></compopover> </view> </template> <script> import apiBaseConfig from '@/config/index.js'; import compopover from '@/components/popover/aIndex.vue' export default { props: { subscript: { type: String, }, list: { type: Array, default: [] } }, components: { compopover }, data() { return { timer: "", //定时器 isEndTime: "01:00:00", //倒计时要有个初始值 imgBgUrl: apiBaseConfig.imgBgUrl, globalData: getApp().globalData, show: false, title: '确认取消订单吗', titbut: '取消订单', currentId:'',//当前的id } }, mounted(){ this.timer = setInterval(()=>{ this.countDown() },1000) }, methods: { // 1小时倒计时 countDown() { let allTime = 0; let h = this.isEndTime.substring(0, 2); let m = this.isEndTime.substring(3, 5); let s = this.isEndTime.substring(6, 8); allTime = Number(h) * 60 * 60 + Number(m) * 60 + Number(s); if (allTime <= 0) return clearInterval(this.timer); //执行倒计时结束逻辑 allTime--; h = parseInt(allTime / 3600) < 10 ? '0' + String(parseInt(allTime / 3600)) : parseInt(allTime / 3600); m = parseInt(allTime / 60) < 10 ? '0' + String(parseInt(allTime / 60)) : parseInt(allTime / 60); s = allTime % 60 < 10 ? '0' + String(allTime % 60) : allTime % 60; this.isEndTime = h + ":" + m + ":" + s; }, // 跳转详情页 jump(data) { this.$uniGo.navigateTo({ url: `/demand/index/index?detailInfo=${encodeURIComponent(JSON.stringify(data))}` // url: `/demand/index/index?subscript=${this.subscript}` }); }, // 跳转支付界面 payment() { this.$uniGo.navigateTo({ url: `/demand/payment/index` }); }, // 取消订单1 立即退款2 abolish(val,data) { console.log(data.id,'数控') this.currentId = data.id if (val == 1) { this.title = '确认取消订单吗' this.titbut = '1' this.show = true } else if (val == 2) { this.title = '确认提交退款申请吗' this.titbut = '2' this.show = true } else if (val == 3) { this.$uniGo.navigateTo({ url: `/demand/index/index?subscript=${this.subscript}&subs=${'1'}` }); } else if (val == 4) { this.$uniGo.navigateTo({ url: `/demand/index/index?subscript=${this.subscript}&subs=${'2'}` }); } }, //重新发布按钮事件 handleAgainAdd(info) { let that = this that.$uniGo.navigateTo({ url: `/demand/updateForm/updateForm?detailInfo=${encodeURIComponent(JSON.stringify(info))}` }) }, // 再看看 aindex() { this.show = false }, // 取消订单2 立即退款3 aindexst(val) { this.$emit('getVal',val,this.currentId) this.show = false } } } </script> <style> page { background-color: #f3f4f6; } </style> <style lang="scss" scoped> .content { display: flex; flex-direction: column; justify-content: center; &-matter { margin: 28rpx 20rpx 50rpx; margin-top: 20rpx; background: #fff; padding: 20rpx; border-radius: 8rpx; &-lampwick { display: flex; justify-content: space-between; &-lampw { display: flex; >view:nth-child(1) { width: 6rpx; height: 36rpx; border-radius: 3rpx; margin-right: 10rpx; } .common-bg { background: #2C66FF; } .only-bg-red { background: #FD0000; } >view:nth-child(2) { font-size: 28rpx; color: #333333; } } &-wick { font-size: 20rpx; color: #333333; } } &-substance { margin-top: 16rpx; display: flex; >image { width: 170rpx; height: 170rpx; margin-right: 20rpx; } >view { width: 480rpx; margin-top: 14rpx; >view:nth-child(1) { font-size: 24rpx; color: #444444; } } } } } .buttoncolor { display: flex; margin-top: 40rpx; justify-content: flex-end; } .buttoncl { padding: 0rpx; margin: 0rpx; width: 120rpx; height: 44rpx; background: #5281FF; border-radius: 10rpx; line-height: 44rpx; font-size: 20rpx; font-weight: 400; color: #FFFFFF; margin-right: 20rpx; } .buttonclde { padding: 0rpx; margin: 0rpx; width: 120rpx; height: 44rpx; background: #FFFFFF; border-radius: 10rpx; border: 1rpx solid #FD0100; font-size: 20rpx; font-weight: 400; color: #FD0100; line-height: 44rpx; } .reject { margin-top: 20rpx; font-size: 24rpx; font-weight: 400; color: #FD0000; line-height: 33rpx; letter-spacing: 3rpx; } .unpaid { display: flex; align-items: center; margin-top: 24rpx; justify-content: space-between; &-paid { >view:nth-child(1) { font-size: 20rpx; font-weight: 400; color: #444444; margin-bottom: 8rpx; >text { margin-left: 8rpx; font-size: 24rpx; font-weight: 700; color: #333333; } } >view:nth-child(2) { font-size: 18rpx; font-weight: 400; color: #333333; >text { margin-left: 8rpx; font-size: 18rpx; font-weight: 400; color: #FD0100; } } } } </style>