360 lines
10 KiB
Vue
360 lines
10 KiB
Vue
<template>
|
||
<view v-if="isPop">
|
||
<view class="pop-bg" @click="closeFunc"></view>
|
||
<view class="pop-box">
|
||
<view class="order-detail">
|
||
<view class="d-e-c"
|
||
><u-icon
|
||
@click="closeFunc"
|
||
name="close"
|
||
size="30rpx"
|
||
color="#999"
|
||
></u-icon
|
||
></view>
|
||
<view class="p-0-20 f32 fb tc">{{ $t("MY_ORD_5") }}</view>
|
||
<!-- <view class="payload-box d-c d-a-s">
|
||
<image class="payload-bg" src="/static/bg/order-bg.png" mode=""></image>
|
||
<view class="d-s-c pr">
|
||
<u-icon name="checkmark-circle" size="34rpx" color="#fff"></u-icon>
|
||
<text class="white ml10">{{ detail.orderStatusVal }}</text>
|
||
</view>
|
||
<view class="white f24 pr" v-if="detail.orderStatus == 0 && payTime">请在{{ payTime }}内完成支付,否则订单将会被自动取消</view>
|
||
</view> -->
|
||
<!-- <view class="express-box d-b-c">
|
||
<u-icon size="56rpx" name="/static/icon/order/express.png"></u-icon>
|
||
<view class="flex-1 d-c d-a-s m-0-20">
|
||
<view class="f24 gray3">共3个包裹，运送中</view>
|
||
<view class="f20 gray9">邮政快递：71234567891</view>
|
||
</view>
|
||
<view class="icon iconfont icon-jiantou"></view>
|
||
</view> -->
|
||
<view
|
||
class="product-box"
|
||
v-if="serchStatus == 1 || serchStatus == 3 || serchStatus == 6"
|
||
>
|
||
<view class="product-title">{{ $t("w_0077") }}</view>
|
||
<view class="product-list">
|
||
<view
|
||
v-for="(item, index) in detail.storeOutBiExtList"
|
||
:key="index"
|
||
class="product-item"
|
||
>
|
||
<image class="product-img" :src="item.cover" mode=""></image>
|
||
<view class="product-info d-c d-b-s flex-1">
|
||
<view class="text-ellipsis-2 f28 gray3 fb"
|
||
>{{ item.productName }}
|
||
</view>
|
||
<view class="f24">
|
||
<text class="">{{ item.specsName }}</text>
|
||
</view>
|
||
<view class="f24">
|
||
<text class="">{{ item.productCode }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="f24 gray3 ml20">X{{ item.quantity }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="product-box" v-if="serchStatus == -1 || serchStatus == ''">
|
||
<view class="product-title">{{ $t("w_0077") }}</view>
|
||
<view class="product-list">
|
||
<view
|
||
v-for="(item, index) in detail.itemList"
|
||
:key="index"
|
||
class="product-item"
|
||
>
|
||
<image class="product-img" :src="item.cover" mode=""></image>
|
||
<view class="product-info d-c d-b-s flex-1">
|
||
<view class="text-ellipsis-2 f28 gray3"
|
||
>{{ item.productName }} {{ item.specsName }}
|
||
</view>
|
||
<view class="price-color f24">
|
||
{{ currencyIcon() }}
|
||
<text class="f32 fb">{{ formatNum(item.price) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="f24 grayD ml20">X{{ item.quantity }}</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="d-b-s">
|
||
<view style="width: 132rpx;" class="mr20 f28 domation">活动赠品</view>
|
||
<view class="flex-1" style="line-height: 1.5;">
|
||
<view class="d-b-c mb20">
|
||
<view class="f28 gray3 text-ellipsis-2">海之圣超饱和富氢水杯（绿色</view>
|
||
<view class="f24 grayD ml20">X1</view>
|
||
</view>
|
||
<view class="d-b-c mb20">
|
||
<view class="f28 gray3 text-ellipsis-2">海之圣超饱和富氢水杯（绿色</view>
|
||
<view class="f24 grayD ml20">X1</view>
|
||
</view>
|
||
|
||
<view class="d-b-c mb20">
|
||
<view class="f28 gray3 text-ellipsis-2">海之圣超饱和富氢水杯（绿色</view>
|
||
<view class="f24 grayD ml20">X1</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<view
|
||
class="product-box"
|
||
v-if="serchStatus == 1 || serchStatus == 3 || serchStatus == 6"
|
||
>
|
||
<view class="d-b-c mb10">
|
||
<text class="f24 gray9 mr20">{{ $t("MY_ORD_3") }}：</text>
|
||
<text class="f24 gray3">{{ detail.payTime }}</text>
|
||
</view>
|
||
<view class="d-b-c mb10" v-if="serchStatus == 6 || serchStatus == 1">
|
||
<text class="f24 gray9 mr20">{{ $t("fn_170") }}：</text>
|
||
<text class="f24 gray3">{{ detail.storeName }}</text>
|
||
</view>
|
||
<view class="d-b-c mb10" >
|
||
<text class="f24 gray9 mr20">{{ $t("MN_F_T_1204") }}：</text>
|
||
<text class="f24 gray3">{{ detail.bonusRatio || 0 }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="product-box" v-if="serchStatus == -1 || serchStatus == ''">
|
||
<view class="d-b-c mb10">
|
||
<text class="f24 gray9 mr20">{{ $t("MY_ORD_6") }}：</text>
|
||
<text class="f24 gray3">{{ formatNum(detail.orderAmount) }}</text>
|
||
</view>
|
||
<view class="d-b-c mb10" v-if="detail.orderType != 30">
|
||
<text class="f24 gray9 mr20">{{ $t("MY_ORD_16") }}(PV)：</text>
|
||
<text class="f24 gray3">{{ formatNum(detail.orderAchieve) }}</text>
|
||
</view>
|
||
<view class="d-b-c mb10" v-if="opento">
|
||
<text class="f24 gray9 mr20">{{ $t("MN_F_T_1204") }}：</text>
|
||
<text class="f24 gray3">{{ detail.bonusRatio || 0 }}</text>
|
||
</view>
|
||
<!-- <view class="d-b-c mb10" v-if="detail.orderType != 30">
|
||
<text class="f24 gray9 mr20">{{ $t("MY_ORD_16") }}(BV)：</text>
|
||
<text class="f24 gray3">{{
|
||
formatNum(detail.orderAssAchieve)
|
||
}}</text>
|
||
</view> -->
|
||
<!-- <view class="remark-box">
|
||
<text class="f26 gray6 mr20">备注：</text>
|
||
<text class="f26 gray3">zxczxczxczczczcxzxc</text>
|
||
</view> -->
|
||
</view>
|
||
<view
|
||
class="product-box border-t"
|
||
style="padding-bottom: 0"
|
||
v-if="
|
||
detail.deliveryWay != 2 && (serchStatus == -1 || serchStatus == '')
|
||
"
|
||
>
|
||
<view class="product-title">{{ $t("w_0065") }}</view>
|
||
<view class="address-box d-b-c">
|
||
<!-- <u-icon width="33rpx" height="40rpx" name="/static/icon/order/address.png"></u-icon> -->
|
||
<view class="flex-1 d-c d-a-s">
|
||
<view class="f28 mb10 gray3">
|
||
<text class="mr20">{{ detail.recName }}</text>
|
||
<text>{{ detail.recPhone }}</text>
|
||
</view>
|
||
<view class="f24 gray9"
|
||
>{{ detail.recProvince }}{{ detail.recCity
|
||
}}{{ detail.address }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
type: 0,
|
||
orderData: {},
|
||
payTime: "",
|
||
};
|
||
},
|
||
props: ["detail", "isPop", "serchStatus","opento"],
|
||
methods: {
|
||
closeFunc() {
|
||
this.$emit("close");
|
||
},
|
||
getPayTime(time) {
|
||
// 转换为式分秒
|
||
let h = parseInt((time / 60 / 60) % 24);
|
||
h = h < 10 ? "0" + h : h;
|
||
let m = parseInt((time / 60) % 60);
|
||
m = m < 10 ? "0" + m : m;
|
||
let s = parseInt(time % 60);
|
||
s = s < 10 ? "0" + s : s;
|
||
// 作为返回值返回
|
||
return h + ":" + m + ":" + s;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.pop-box {
|
||
width: 80%;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
top: 15%;
|
||
// bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
background-color: #ffffff;
|
||
border-radius: 15rpx;
|
||
z-index: 100;
|
||
}
|
||
|
||
.order-detail {
|
||
padding: 23rpx;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.payload-box {
|
||
padding: 30rpx 22rpx;
|
||
position: relative;
|
||
height: 137rpx;
|
||
box-sizing: border-box;
|
||
margin: 0 auto;
|
||
margin-bottom: 20rpx;
|
||
|
||
.payload-bg {
|
||
width: 564rpx;
|
||
height: 137rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 0;
|
||
}
|
||
}
|
||
|
||
.express-box {
|
||
width: 563;
|
||
height: 124rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
margin: 0 auto;
|
||
margin-bottom: 20rpx;
|
||
box-sizing: border-box;
|
||
// padding: 34rpx 21rpx;
|
||
padding: 0 21rpx;
|
||
|
||
.icon.icon-jiantou {
|
||
font-size: 32rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.address-box {
|
||
width: 563;
|
||
// height: 124rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
// padding: 34rpx 21rpx;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.product-box {
|
||
padding: 26rpx 20rpx 0 20rpx;
|
||
background: #ffffff;
|
||
// border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.product-title {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 5rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.product-item {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
width: 100%;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #eee;
|
||
|
||
.product-img {
|
||
width: 132rpx;
|
||
height: 132rpx;
|
||
border-radius: 10rpx;
|
||
display: block;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.product-info {
|
||
height: 132rpx;
|
||
}
|
||
}
|
||
|
||
.product-item:last-child {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.remark-box {
|
||
width: 563;
|
||
box-sizing: border-box;
|
||
padding: 26rpx 20rpx 26rpx 20rpx;
|
||
margin-bottom: 20rpx;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
word-break: break-all;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.order-btns-nav {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 96rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
padding: 0 23rpx;
|
||
background-color: #ffffff;
|
||
z-index: 20;
|
||
border-top: 1rpx solid #eee;
|
||
}
|
||
|
||
.order-btn {
|
||
min-width: 152rpx;
|
||
padding: 0 28rpx;
|
||
box-sizing: border-box;
|
||
height: 56rpx;
|
||
border-radius: 30rpx;
|
||
line-height: 56rpx;
|
||
background: #fb3024;
|
||
font-size: 26rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
border: 1rpx solid #fb3024;
|
||
text-align: center;
|
||
margin-left: 23rpx;
|
||
}
|
||
|
||
.order-btn.border-btn {
|
||
border: 1rpx solid #dddddd;
|
||
color: #333333;
|
||
background: none;
|
||
}
|
||
|
||
.pop-bg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
z-index: 98;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
}
|
||
</style>
|