|
|
<template> <view v-if="$isRight(order_details)"> <lf-nav title="订单详情" :showIcon="true"></lf-nav> <!-- v-if="order_details.last_pay_time" --> <view class="tips" v-if="show"> <view class="lf-font-24 lf-color-white">剩余支付时间：</view> <view class="lf-font-24 lf-color-white"> <!-- {{time}} --> <countdown-timer :time="time" :autoStart="true" @finish="dateFinish"> <template v-slot="{minute, second}"> <view class="lf-flex"> <view class="lf-font-24 lf-color-white">{{ minute >= 10 ? minute : "0" + minute }}</view> <view class="lf-font-24 lf-color-white">:</view> <view class="lf-font-24 lf-color-white">{{ second >= 10 ? second : "0" + second }}</view> </view> </template> </countdown-timer> </view> </view> <!-- 待收货 --> <view class="tips-waitconfirm" v-if="order_details.pick_self == 0"> <view class="lf-flex-column"> <view class="lf-font-28 lf-color-white">运输中</view> <view class="lf-font-24 lf-color-white" v-if="true">广州转运中心公司 已发出，下一站南宁转运中心</view> <view class="lf-font-24 lf-color-white" v-else>[自提柜]已签收，签收人凭取货码签收。</view> </view> <view class="waitconfirm-tag"> 查看详情 </view> </view> <view class="card" style="margin-top: 0;" v-if="order_details.pick_self == 0"> <view class="lf-font-28"> <text class="lf-color-222 lf-font-bold">{{order_details.accept_name}}</text> <text class="lf-color-777 lf-m-l-20">{{order_details.mobile}}</text> </view> <view class="lf-font-28 lf-color-333 lf-m-t-20"> <text>{{order_details.address_name}}{{order_details.address}}</text> </view> </view> <view class="card" style="margin-top: 0;" v-else> <view class="lf-font-28"> <text class="lf-color-222 lf-font-bold">{{order_details.brand.name}}</text> <text class="lf-color-777 lf-m-l-20">{{order_details.brand.tel}}</text> </view> <view class="lf-font-28 lf-color-333 lf-m-t-20"> <text>{{order_details.brand.floor}}</text> </view> </view> <view class="card goods"> <view> <text class="lf-iconfont icon-Group- lf-font-30"></text> <text class="shop-name">{{order_details.brand.name}}</text> <text class="lf-iconfont icon-xiangyou lf-font-24"></text> </view> <view class="lf-flex lf-m-t-20" v-for="(item,index) of order_details.items" :key="index"> <image class="goods-img" :src="item.item_meta.image"></image> <view class="info"> <view class="lf-font-26 lf-color-333 lf-line-1">{{item.item_name}}</view> <view class="lf-font-24 lf-color-777">{{item.item_meta.specs_text}}</view> <view class="lf-row-between" style="line-height: 1;"> <text class="price">¥{{item.total_yuan}}</text> <text class="lf-font-28 lf-color-777">x {{item.quantity}}</text> </view> </view> </view> </view> <view style="margin-top: 60rpx;display: flex;justify-content: center;" v-if="$isRight(order_details) && order_details.status == 2 && order_details.pick_self != 0"> <view class="lf-flex-column"> <lf-qrcode :options="config.qrc"></lf-qrcode> <view class="lf-font-28 lf-row-center" style="color: #15716E;">{{order_details.status_text}}</view> </view> </view> <view class="card" v-if="type == 'point'"> <view class="lf-row-between lf-font-28"> <text class="lf-color-777">积分数量</text> <text class="lf-color-222">{{order_details.redeem_point}}</text> </view> <view class="lf-row-between lf-m-t-30 lf-font-28"> <text class="lf-color-777">应付运费</text> <text class="lf-color-222">+¥{{order_details.payable_freight}}</text> </view> <view class="lf-row-between lf-m-t-30 lf-font-28"> <text class="lf-color-777">实付运费</text> <text class="lf-color-222">+¥{{order_details.real_freight}}</text> </view> </view> <view class="card" v-if="type == 'default'"> <view class="lf-row-between lf-font-28"> <text class="lf-color-777">优惠券</text> <text style="color: #F63434;">-¥20</text> </view> <view class="lf-row-between lf-m-t-30 lf-font-28"> <text class="lf-color-777">运费</text> <text class="lf-color-222">+¥10</text> </view> <view class="lf-row-between lf-m-t-30 lf-font-28"> <text class="lf-color-777">订单总价</text> <text class="lf-color-222">¥{{order_details.total_yuan}}</text> </view> </view> <view class="card"> <view class="lf-row-between lf-font-28"> <text class="lf-color-777">商品订单编号</text> <text> <text class="lf-color-222">{{order_details.order_no}}</text> <text class="lf-font-28 lf-m-l-20" style="color: #22A19F;" @click="copy(order_details.order_no)">复制</text> </text> </view> <view class="lf-row-between lf-font-28 lf-m-t-30"> <text class="lf-color-777">创建时间</text> <text class="lf-color-222">{{order_details.created_at}}</text> </view> <!-- <view class="lf-row-between lf-font-28 lf-m-t-30"> <text class="lf-color-777">留言</text> <text class="lf-color-222">暂无留言</text> </view> --> <view class="lf-row-between lf-font-28 lf-m-t-30" v-if="order_details.status_text"> <text class="lf-color-777">订单状态</text> <text class="lf-color-222">{{order_details.status_text}}</text> </view> <!-- 待发货 --> <view class="lf-row-between lf-font-28 lf-m-t-30"> <text class="lf-color-777">支付方式</text> <text class="lf-color-222">{{order_details.payment_text}}</text> </view> <view class="lf-row-between lf-font-28 lf-m-t-30" v-if="order_details.pick_self == 0"> <text class="lf-color-777">收货方式</text> <text class="lf-color-222">快递</text> </view> <view class="lf-row-between lf-font-28 lf-m-t-30" v-else> <text class="lf-color-777">收货方式</text> <text class="lf-color-222">自提</text> </view> <view class="lf-row-between lf-font-28 lf-m-t-30"> <text class="lf-color-777">备注</text> <text class="lf-color-222">{{ order_details.note || '暂无备注' }}</text> </view> <view class="lf-row-between lf-font-28 lf-m-t-30" v-if="order_details.pay_time"> <text class="lf-color-777">支付时间</text> <text class="lf-color-222">{{order_details.pay_time}}</text> </view> </view> <view style="height: 120rpx;margin-top: 20rpx;"></view> <!-- 待付款 --> <!-- <view class="order-btn"> <view class="lf-font-28 lf-row-center" style="color:#F63434"> 待付款 </view> <view class="lf-flex"> <view class="btn-cancel lf-m-r-20"> 取消订单 </view> <view class="btn-atonce"> 立即付款 </view> </view> </view> --> <!-- 待发货 --> <view class="order-btn" v-if="order_details.status == 2"> <view class="lf-font-28 lf-row-center lf-color-777"> 待发货 </view> <view class="lf-flex"> <view style="width: 220rpx;"></view> <view style="width: 220rpx;"></view> </view> </view> <!-- 代付款 --> <view class="order-btn" v-if="order_details.status == 1"> <view class="lf-font-28 lf-row-center lf-color-777"> 待付款 </view> <view class="lf-flex"> <view class="btn-gray lf-m-r-20">取消订单</view> <view class="btn-red" @click="$url('/pages/order/cashier/cashier?amount='+ order_details.total_yuan+'&order_no='+order_details.order_no)">立即付款</view> </view> </view> <!-- 待收货 --> <view class="order-btn" v-if="order_details.status == 3"> <view class="lf-font-28 lf-row-center lf-color-black"> 待收货 </view> <view class="lf-flex"> <view style="width: 220rpx;"></view> <view class="btn-confirm"> 确认收货 </view> </view> </view> <!-- 已完成 --> <view class="order-btn" v-if="order_details.status == 4"> <view class="lf-font-28 lf-row-center" style="color: #22A19F;"> 已完成 </view> <view class="lf-flex"> <view style="width: 220rpx;"></view> <view style="width: 220rpx;"></view> </view> </view> </view></template>
<script> import lfQrcode from '@/components/lf-code/lf-qrcode.vue'; import countdownTimer from '@/components/countdown-timer/countdown-timer'; export default { data() { return { type: 'default', // point积分订单详情, default默认普通商品订单详情
time: '', order_no: '', order_details: '', countdown_minute: '', show: false, pick_type: 0, config: { bar: { code: 'E01181016286106', color: '#000', // 条形码的颜色
bgColor: '#FFFFFF', // 背景色
width: 586, // 宽度
height: 210 // 高度
}, qrc: { code: "", size: 352, // 二维码大小
level: 4, //等级 0～4
bgColor: '#FFFFFF', //二维码背景色 默认白色
// border: {
// color: ['#8A2387', '#F27121'], //边框颜色支持渐变色
// lineWidth: 3, //边框宽度
// },
// img: '/static/logo.png', //图片
// iconSize: 40, //二维码图标的大小
color: '#000000', //边框颜色支持渐变色
} }, } }, components: { countdownTimer, lfQrcode }, onLoad(options) { this.type = options.type || this.type; this.order_no = options.order_id; this.pick_type = options.pick_type; console.log('字体',this.pick_type) if (this.order_no) { this.getOrderDetails(); } }, methods: { // 点击复制
copy(text) { uni.setClipboardData({ data: text }); }, dateFinish() { this.show = false; console.log("倒计时结束"); }, countDown(munite, second) { let m = munite; let s = second; let m2, s2; let _this = this; let tiem = setInterval(function() { s--; if (s < 0) { s = 59; m--; if (m < 0) { _this.time = '00分00秒'; _this.show = false; // _this.getOrderDetails();
clearTimeout(tiem); return; } } m2 = m < 10? '0' + m : m; s2 = s < 10 ? ('0' + s) : s; _this.time = m2 + '分' + s2 + '秒'; }, 1000) }, s_to_hs(s) { //计算分钟
//算法：将秒数除以60，然后下舍入，既得到分钟数
var h; h = Math.floor(s / 60); //计算秒
//算法：取得秒%60的余数，既得到秒数
s = s % 60; //将变量转换为字符串
h += ''; s += ''; //如果只有一位数，前面增加一个0
// h = (h.length == 1) ? '0' + h : h;
// s = (s.length == 1) ? '0' + s : s;
this.countDown(h,s) // return h + ':' + s;
}, getTime(){ var date = new Date(), year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(), second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); month >= 1 && month <= 9 ? (month = "0" + month) : ""; day >= 0 && day <= 9 ? (day = "0" + day) : ""; var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; return timer; }, getOrderDetails() { this.$http.get({ api: 'api/order/' + this.order_no, header: { Authorization: this.$cookieStorage.get('user_token') } }).then(res => { this.order_details = res.data.data this.config.qrc.code = JSON.stringify({ u_id: this.order_details.user_id, no: this.order_details.order_no }) var date = this.getTime() this.time = new Date(this.order_details.will_closed_at).getTime() - new Date(date).getTime() if(this.time > 0) { this.show = true; } console.log(this.order_details); }) }, } }</script>
<style> page { background-color: #F8F8F8; }</style><style lang="scss" scoped="scoped"> .btn-gray { width: 220rpx;background: white;height: 90rpx;border-radius: 45rpx;border: 2rpx solid #999999;display: flex;align-items: center;justify-content: center; color: #777777; font-size: 28rpx; } .btn-red { width: 220rpx;background: #F63434;height: 90rpx;border-radius: 45rpx;display: flex;align-items: center;justify-content: center; color: white; font-size: 28rpx; } .tips-waitconfirm { width: 100%; height: 113rpx; background: #15716E; display: flex; justify-content: space-between; padding: 0 32rpx; align-items: center; }
.waitconfirm-tag { width: 136rpx; height: 53rpx; border-radius: 27rpx; border: 2rpx solid #FFFFFF; font-size: 24rpx; color: white; display: flex; justify-content: center; align-items: center; }
.btn-cancel { width: 220rpx; height: 90rpx; border-radius: 45rpx; border: 2rpx solid #999999; color: #777; font-size: 28rpx; display: flex; justify-content: center; align-items: center; }
.btn-confirm { width: 220rpx; height: 90rpx; border-radius: 45rpx; background-color: #15716E; color: #fff; font-size: 28rpx; display: flex; justify-content: center; align-items: center; }
.btn-atonce { width: 220rpx; height: 90rpx; border-radius: 45rpx; background-color: #F63434; color: #fff; font-size: 28rpx; display: flex; justify-content: center; align-items: center; }
.order-btn { width: 100%; height: 120rpx; background: #FFFFFF; display: flex; justify-content: space-between; padding: 0 32rpx; position: fixed; bottom: 0; }
.tips { display: flex; background-color: #F63434; height: 64rpx; width: 100%; justify-content: center; align-items: center; }
.card { height: max-content; width: 750rpx; padding: 30rpx 32rpx; background-color: #FFFFFF;
&:nth-child(n+2) { margin-top: 20rpx; } }
.goods { .shop-name { font-size: 28rpx; color: #222222; font-weight: bold; margin: 0 15rpx; }
.goods-img { width: 130rpx; height: 130rpx; border-radius: 4rpx; margin-right: 15rpx; background-color: #EEEEEE; }
.info { width: 540rpx; height: 130rpx; display: flex; flex-direction: column; justify-content: space-around;
.price { font-size: 32rpx; color: #F63434; font-weight: bold; } }
.order-num { font-size: 24rpx; color: #999999; display: flex; justify-content: space-between; margin-top: 28rpx; } }</style>
|
