Skip to content

肖康 / H5_2.0

Go to a project
Commit 70a392dd by LJM
Options

订单详情

parent 469ae2e2
Inline Side-by-side
Showing with 861 additions and 1 deletions
assets/css/mine/orderdetail.scss
.page-userOrderDetail {
background-color: #f00;
padding-top: 88rpx;
padding-bottom: 150rpx;
.detail-head {
background-color: #fff;
padding: 24rpx 24rpx 0 24rpx;
.status-box {
padding-bottom: 24rpx;
border-bottom: 1px solid #f0f0f2;
.p1 {
.t1 {
font-size: 24rpx;
color: #484b59;
}
.t2 {
font-size: 24rpx;
color: #1969f9;
}
.iconfont {
margin-left: 20rpx;
font-size: 32rpx;
color: #c2c4cc;
}
}
.status-text {
font-size: 26rpx;
color: #1969f9;
font-weight: 600;
}
}
.status-info {
padding: 24rpx 0;
border-bottom: 1px solid #f0f0f2;
.mb12 {
margin-bottom: 12rpx;
}
.label {
font-size: 24rpx;
color: #919399;
}
.text {
text-align: right;
font-size: 24rpx;
color: #484b59;
}
}
.toggle {
height: 80rpx;
background: #fff;
border-radius: 0 0 10rpx 10rpx;
.tt {
font-size: 24rpx;
color: #1969f9;
}
.iconfont {
margin-left: 12rpx;
font-size: 32rpx;
color: #1969f9;
}
}
}
.delivery {
margin-top: 16rpx;
padding: 0 24rpx;
background: #ffffff;
border-radius: 10rpx 10rpx 0px 0px;
.head {
height: 73rpx;
border-bottom: 1px solid #f0f0f2;
.title {
font-size: 24rpx;
color: #484b59;
}
.iconfont {
font-size: 32rpx;
color: #919399;
}
}
.tip {
margin: 24rpx 0;
padding: 15rpx 24rpx 15rpx 24rpx;
background: #fff8f2;
border-radius: 0px 30rpx 30rpx 30rpx;
.iconfont {
font-size: 32rpx;
color: #f98119;
}
.tt {
margin-left: 16rpx;
width: 606rpx;
font-size: 22rpx;
color: #f98119;
}
}
.content {
.box {
margin-bottom: 8rpx;
&:last-child {
margin-bottom: 24rpx;
}
.tt {
margin-left: 12rpx;
font-size: 24rpx;
color: #484b59;
}
}
.iconfont {
color: #919399;
font-size: 32rpx;
}
}
.bottom {
border-top: 1px solid #f0f0f2;
height: 80rpx;
.t1 {
font-size: 24rpx;
color: #919399;
}
.t2 {
font-size: 24rpx;
color: #484b59;
}
}
}
.logistics {
margin-top: 16rpx;
padding: 0 24rpx;
background: #ffffff;
border-radius: 10rpx 10rpx 0px 0px;
.head {
height: 73rpx;
border-bottom: 1px solid #f0f0f2;
.t1 {
font-size: 24rpx;
color: #484b59;
}
.t2 {
color: #1969f9;
font-size: 24rpx;
margin-right: 20rpx;
}
.iconfont {
font-size: 32rpx;
color: #919399;
}
}
.list {
padding: 24rpx 0;
border-bottom: 1px solid #f0f0f2;
.box {
position: relative;
border-left: 1px dashed #c2c4cc;
padding-bottom: 24rpx;
.arrow {
position: absolute;
left: -8rpx;
top: 0;
z-index: 99;
width: 16rpx;
height: 16rpx;
background: #c2c4cc;
border-radius: 50%;
}
.text {
margin-left: 32rpx;
}
.t1 {
color: #919399;
font-size: 24rpx;
margin-bottom: 4rpx;
}
.t2 {
color: #919399;
font-size: 24rpx;
}
&:first-child {
.arrow {
background: #1969f9;
}
.t1 {
color: #1969f9;
}
.t2 {
color: #1969f9;
}
}
}
}
}
.shop {
margin-top: 16rpx;
padding: 0 24rpx;
background: #ffffff;
border-radius: 10rpx 10rpx 0px 0px;
.head {
height: 73rpx;
border-bottom: 1px solid #f0f0f2;
.title {
font-size: 24rpx;
color: #484b59;
}
.iconfont {
font-size: 32rpx;
color: #919399;
}
}
.content {
.box {
padding: 16rpx 0 24rpx 0;
border-bottom: 1px solid #f0f0f2;
.p1 {
font-size: 28rpx;
color: #292b33;
font-weight: 600;
margin-bottom: 12rpx;
}
.p2 {
.t1 {
color: #919399;
font-size: 24rpx;
}
.t2 {
color: #484b59;
font-size: 24rpx;
}
.t3 {
color: #292b33;
font-size: 24rpx;
font-weight: 600;
}
.xin {
margin: 0 12rpx;
font-size: 22rpx;
color: #919399;
}
}
.p3 {
.t1 {
color: #919399;
font-size: 24rpx;
}
.t2 {
color: #484b59;
font-size: 24rpx;
}
.t3 {
color: #f98119;
font-size: 24rpx;
font-weight: 600;
}
}
}
}
.bottom {
height: 80rpx;
.t1 {
font-size: 24rpx;
color: #919399;
}
.t2 {
font-size: 24rpx;
color: #484b59;
}
}
}
.shop-price {
margin-top: 16rpx;
padding: 24rpx 24rpx 0 24rpx;
background: #ffffff;
border-radius: 10rpx 10rpx 0px 0px;
.top {
.t0 {
font-size: 24rpx;
color: #1969f9;
margin: 0 2rpx;
}
.t1 {
font-size: 24rpx;
color: #484b59;
}
.t2 {
font-size: 24rpx;
color: #292b33;
font-weight: 600;
}
}
.bottom {
border-top: 1px solid #f0f0f2;
height: 72rpx;
.t1 {
font-size: 24rpx;
color: #484b59;
}
.t2 {
font-size: 24rpx;
color: #f98119;
color: #f98119;
font-weight: 600;
}
}
}
.receiving-information {
margin-top: 16rpx;
padding: 0 24rpx;
background: #ffffff;
border-radius: 10rpx 10rpx 0px 0px;
.head {
height: 73rpx;
border-bottom: 1px solid #f0f0f2;
.title {
font-size: 24rpx;
color: #484b59;
}
.iconfont {
font-size: 32rpx;
color: #919399;
}
}
.content {
padding: 16rpx 0 24rpx 0;
.iconfont {
font-size: 40rpx;
color: #c6c8cf;
}
.text {
margin-left: 16rpx;
}
.t1 {
font-size: 24rpx;
color: #484b59;
margin-right: 24rpx;
}
.t2 {
font-size: 24rpx;
color: #484b59;
}
.t3 {
margin-top: 8rpx;
font-size: 24rpx;
color: #919399;
max-width: 100%;
}
}
}
.pay-information {
margin-top: 16rpx;
padding: 0 24rpx;
background: #ffffff;
border-radius: 10rpx 10rpx 0px 0px;
.head {
height: 73rpx;
border-bottom: 1px solid #f0f0f2;
.title {
font-size: 24rpx;
color: #484b59;
}
.iconfont {
font-size: 32rpx;
color: #919399;
}
}
.content {
padding: 16rpx 0 24rpx 0;
.box {
margin-bottom: 12rpx;
&:last-child {
margin-bottom: 0;
}
.t1 {
font-size: 24rpx;
color: #919399;
}
.t2 {
font-size: 24rpx;
color: #484b59;
}
}
}
}
.tax-information {
margin-top: 16rpx;
padding: 0 24rpx;
background: #ffffff;
border-radius: 10rpx 10rpx 0px 0px;
.head {
height: 73rpx;
border-bottom: 1px solid #f0f0f2;
.title {
font-size: 24rpx;
color: #484b59;
}
.iconfont {
font-size: 32rpx;
color: #919399;
}
}
.content {
padding: 16rpx 0 24rpx 0;
.box {
margin-bottom: 12rpx;
&:last-child {
margin-bottom: 0;
}
.t1 {
font-size: 24rpx;
color: #919399;
}
.t2 {
max-width: 580rpx;
font-size: 24rpx;
color: #484b59;
}
}
}
.bottom {
border-top: 1px solid #f0f0f2;
padding: 16rpx 0 24rpx 0;
.iconfont {
font-size: 40rpx;
color: #c6c8cf;
}
.text {
margin-left: 16rpx;
}
.t1 {
font-size: 24rpx;
color: #484b59;
margin-right: 24rpx;
}
.t2 {
font-size: 24rpx;
color: #484b59;
}
.t3 {
margin-top: 8rpx;
font-size: 24rpx;
color: #919399;
max-width: 100%;
}
}
}
.btn-box {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
width: 100%;
height: 120rpx;
background: #ffffff;
box-shadow: 0px -4rpx 20rpx 0px rgba(198, 199, 204, 0.1);
border-radius: 10rpx 10rpx 0px 0px;
z-index: 99;
.btn-wrap {
padding: 20rpx 24rpx;
.t1 {
font-size: 24rpx;
color: #484b59;
}
.t2 {
font-size: 32rpx;
color: #f98119;
font-weight: 600;
}
.btn1 {
width: 180rpx;
height: 80rpx;
background: #ffffff;
border-radius: 10rpx;
border: 1px solid #c6c7cc;
font-size: 28rpx;
color: #484b59;
margin-right: 24rpx;
}
.btn2 {
width: 180rpx;
height: 80rpx;
background: #f98119;
border-radius: 10rpx;
font-size: 28rpx;
color: #fff;
}
}
}
}
.layer-box {
background: linear-gradient(180deg, #f0f6ff 0%, #ffffff 88rpx);
padding: 0 24rpx 24rpx 24rpx;
border-radius: 10rpx 10rpx 0px 0px;
.title {
height: 88rpx;
margin-bottom: 13rpx;
.left {
font-size: 32rpx;
color: #292b33;
font-weight: bold;
}
.right {
.iconfont {
font-size: 40rpx;
color: #c2c4cc;
}
}
}
.search {
height: 72rpx;
background: #f5f5f7;
border-radius: 10rpx;
.input {
text-indent: 26rpx;
font-size: 14px;
}
.icon-search {
font-size: 40rpx;
color: #919399;
margin-right: 24rpx;
}
}
.save {
margin-top: 32rpx;
height: 68rpx;
background: #1969f9;
border-radius: 10rpx;
font-size: 28rpx;
color: #fff;
}
}
assets/css/mine/shoporder.scss
.page-userOrder {
padding-top: 202rpx;
padding-bottom: 50rpx;
.top {
position: fixed;
top: 0;
......
pages/mine/orderdetail.vue
......@@ -5,6 +5,303 @@
<view style="text-align: right;"><a class="iconfont icon-qq" :href="kfqq" target="_blank"></a></view>
</template>
</navElement>
<view class="detail-head">
<view class="status-box row bothSide">
<view>
<view class="p1 row verCenter" style="margin-bottom: 10rpx;">
<text class="t1">订单编号：</text>
<text class="t2">{{ detail.order_sn }}</text>
<text class="iconfont icon-juxing3"></text>
</view>
<view class="p1 row verCenter">
<text class="t1">自定义订单号：</text>
<text class="t1">--</text>
<text class="iconfont icon-a-juxing3" @click="open()"></text>
</view>
</view>
<template v-if="detail.status == 1">
<view class="status-text">{{ detail.status_val }}</view>
</template>
<template v-else-if="detail.status == 2">
<view class="status-text" style="color: #F98119;">{{ detail.status_val }}</view>
</template>
<template v-else-if="detail.status == 10">
<view class="status-text" style="color: #919399;">{{ detail.status_val }}</view>
</template>
<template v-else-if="detail.status == -1">
<view class="status-text" style="color: #919399;">{{ detail.status_val }}</view>
</template>
<template v-else>
<view class="status-text">{{ detail.status_val }}</view>
</template>
</view>
<view class="status-info row bothSide verCenter" v-if="detail_head_flag">
<view class="column">
<text class="label mb12">下单时间：</text>
<text class="label mb12">配送方式：</text>
<text class="label">发票类型：</text>
</view>
<view class="column">
<text class="text mb12">{{ detail.create_time }}</text>
<text class="text mb12">{{ detail.order_shipping_type == 1 ? '快递配送' : '上门自提' }}</text>
<text class="text" v-if="detail.inv">{{ detail.inv.inv_type_val }}</text>
</view>
</view>
<view class="toggle row rowCenter verCenter" @click="detail_head_flag = !detail_head_flag">
<template v-if="detail_head_flag">
<text class="tt">收起</text>
<text class="iconfont icon-arrtop"></text>
</template>
<template v-else>
<text class="tt">展开</text>
<text class="iconfont icon-arrbot"></text>
</template>
</view>
</view>
<!-- 提货信息 -->
<view class="delivery" v-if="detail.order_shipping_type == 2">
<view class="head row bothSide verCenter">
<text class="title">提货信息</text>
<text class="iconfont icon-arrtop"></text>
</view>
<view class="tip row">
<text class="iconfont icon-ts"></text>
<text class="tt">请在接到猎芯网系统短信通知后，再携带已盖章的合同打印件上门取货。</text>
</view>
<view class="content row verCenter bothSide">
<view>
<view class="box row verCenter">
<text class="iconfont icon-dzz"></text>
<text class="tt">广东省深圳市龙岗区坂田街道清丽路1号宝能科技园南区12栋11楼</text>
</view>
<view class="box row verCenter">
<text class="iconfont icon-dh"></text>
<text class="tt">0755-82560956</text>
</view>
<view class="box row verCenter">
<text class="iconfont icon-gzr"></text>
<text class="tt">工作日（周一 ~ 周五）9:00 ~ 18:00</text>
</view>
</view>
<text class="iconfont icon-jt"></text>
</view>
<view class="bottom row verCenter">
<text class="t1">自提信息：</text>
<text class="t2" style="margin-right: 24rpx;">{{ detail.consignee }}</text>
<text class="t2">{{ detail.mobile }}</text>
</view>
</view>
<!-- 物流信息 -->
<view class="logistics">
<view class="head row bothSide verCenter">
<view class="row verCenter">
<text class="t1">物流单号：</text>
<text class="t2">SF255584668854</text>
<text class="iconfont icon-juxing3"></text>
</view>
<text class="iconfont icon-arrtop"></text>
</view>
<view class="list">
<view class="box row verCenter">
<text class="arrow"></text>
<view class="text column">
<text class="t1">2022年10月2日 下午3:44:15</text>
<text class="t2">【深圳市】已离开 广东深圳公司龙岗区坪山分拨分部广东深圳公司龙岗区坪山分拨分部[0755]</text>
</view>
</view>
<view class="box row verCenter">
<text class="arrow"></text>
<view class="text column">
<text class="t1">2022年10月2日 上午2:56:28</text>
<text class="t2">【深圳市】已离开 广东深圳公司中心分拨分部</text>
</view>
</view>
</view>
</view>
<!-- 商品信息 -->
<view class="shop">
<view class="head row bothSide verCenter">
<text class="title">商品信息</text>
<text class="iconfont icon-arrtop"></text>
</view>
<view class="content" v-if="detail.list.length > 0">
<view class="box" v-for="(item, index) in detail.list" :key="item.order_id">
<view class="p1">{{ item.goods_name }}</view>
<view class="p2 row bothSide verCenter" style="margin-bottom: 6rpx;">
<view>
<text class="t1">品牌：</text>
<text class="t2">{{ item.goods_name }}</text>
</view>
<view>
<text class="t2">{{ item.goods_price_format }}</text>
<text class="xin">*</text>
<text class="t3">{{ item.goods_number }}</text>
</view>
</view>
<view class="p3 row bothSide" style="margin-bottom: 6rpx;">
<view style="width: 50%;">
<text class="t1">供应商：</text>
<text class="t2">{{ item.supplier_name }}</text>
</view>
<view style="width: 50%;">
<text class="t1">交期：</text>
<text class="t2">{{ item.delivery_time || '--' }}</text>
</view>
</view>
<view class="p3 row bothSide">
<view style="width: 50%;">
<text class="t1">商品金额：</text>
<text class="t2">{{ item.goods_amount_format }}</text>
</view>
<view style="width: 50%;">
<text class="t1">实付金额：</text>
<text class="t3">{{ item.single_pre_price_amount }}</text>
</view>
</view>
</view>
</view>
<view class="bottom row verCenter">
<text class="t1">备注信息：</text>
<text class="t2">{{ detail.order_remark || '' }}</text>
</view>
</view>
<!-- 商品金额显示 -->
<view class="shop-price">
<view class="top">
<view class="row bothSide verCenter" style="margin-bottom: 26rpx;">
<view>
<text class="t1">共</text>
<text class="t0">{{ detail.list.length }}</text>
<text class="t1">件商品，总金额</text>
</view>
<view class="t2">{{ detail.goods_total_format }}</view>
</view>
<view class="row bothSide verCenter" style="margin-bottom: 26rpx;">
<view class="t1">附加费</view>
<view class="t2">{{ detail.extend_fee_format }}</view>
</view>
<view class="row bothSide verCenter" style="margin-bottom: 16rpx;">
<view class="t1">运费</view>
<view class="t2">{{ detail.shipping_price_format }}</view>
</view>
<view class="row bothSide verCenter" style="margin-bottom: 16rpx;">
<view class="t1">优惠金额</view>
<view class="t2">{{ detail.coupon_price_format }}</view>
</view>
</view>
<view class="bottom row bothSide verCenter">
<text class="t1">实付金额</text>
<text class="t2">{{ detail.topay_amount_format }}</text>
</view>
</view>
<!-- 发票信息 -->
<view class="tax-information" v-if="detail.inv">
<view class="head row bothSide verCenter">
<text class="title">发票信息</text>
<text class="iconfont icon-arrtop"></text>
</view>
<view class="content">
<view class="box row verCenter">
<text class="t1">发票抬头：</text>
<text class="t2">{{ detail.inv.tax_title }}</text>
</view>
<view class="box row verCenter">
<text class="t1">纳税识别号：</text>
<text class="t2">{{ detail.inv.tax_no }}</text>
</view>
<view class="box row verCenter">
<text class="t1">公司电话：</text>
<text class="t2">{{ detail.inv.company_phone }}</text>
</view>
<view class="box row verCenter">
<text class="t1">开户银行：</text>
<text class="t2">{{ detail.inv.bank_name }}</text>
</view>
<view class="box row verCenter">
<text class="t1">开户银行账号：</text>
<text class="t2">{{ detail.inv.bank_account }}</text>
</view>
<view class="box row">
<text class="t1">注册地址：</text>
<text class="t2">{{ detail.inv.company_address }}</text>
</view>
</view>
<view class="bottom row">
<text class="iconfont icon-fpp"></text>
<view class="text">
<view class="row verCenter">
<text class="t1">朱继来</text>
<text class="t2">13838383838</text>
</view>
<view class="t3">广东省深圳市龙岗区坂田街道红灯区203</view>
</view>
</view>
</view>
<!-- 收货信息 -->
<view class="receiving-information">
<view class="head row bothSide verCenter">
<text class="title">收货信息</text>
<text class="iconfont icon-arrtop"></text>
</view>
<view class="content row">
<text class="iconfont icon-dzz"></text>
<view class="text">
<view class="row verCenter">
<text class="t1">{{ detail.consignee }}</text>
<text class="t2">{{ detail.mobile }}</text>
</view>
<view class="t3">{{ detail.province_val || '' }} {{ detail.city_val || '' }} {{ detail.district_val || '' }} {{ detail.address }}</view>
</view>
</view>
</view>
<!-- 支付信息 -->
<view class="pay-information">
<view class="head row bothSide verCenter">
<text class="title">支付信息</text>
<text class="iconfont icon-arrtop"></text>
</view>
<view class="content">
<view class="box row bothSide verCenter">
<text class="t1">付款方式：</text>
<text class="t2">{{ detail.client_pay_type_val }}</text>
</view>
<view class="box row bothSide verCenter">
<text class="t1">付款时间：</text>
<text class="t2">{{ detail.pay_time }}</text>
</view>
<view class="box row bothSide verCenter">
<text class="t1">总金额</text>
<text class="t2">{{ detail.goods_total_format }}</text>
</view>
<view class="box row bothSide verCenter">
<text class="t1">订单金额：</text>
<text class="t2">{{ detail.order_amount_format }}</text>
</view>
</view>
</view>
<view class="btn-box">
<view class="btn-wrap row bothSide verCenter">
<view class="row verCenter">
<text class="t1">实付金额：</text>
<text class="t2">{{ detail.topay_amount_format }}</text>
</view>
<view class="row">
<view class="btn1 row rowCenter verCenter">下载合同</view>
<view class="btn2 row rowCenter verCenter">去支付</view>
</view>
</view>
</view>
<!-- 自定义订单号 -->
<uni-popup ref="popup" type="bottom">
<view class="layer-box">
<view class="title row verCenter bothSide">
<view class="left">自定义订单号</view>
<view class="right row"><text class="iconfont icon-xxx" @click="close()"></text></view>
</view>
<view class="search row bothSide verCenter"><input type="text" placeholder="请输入自定义订单号" class="input" v-model="customer_sn" /></view>
<view class="save row rowCenter verCenter" @click="addCustomerSn()">保存信息</view>
</view>
</uni-popup>
</view>
</template>
......@@ -18,9 +315,11 @@ export default {
},
data() {
return {
detail_head_flag: false,
kfqq: '',
title: '',
order_id: '',
customer_sn: '', //自定义订单号
detail: {}
};
},
......@@ -36,6 +335,40 @@ export default {
this.getData();
},
methods: {
open() {
this.$refs.popup.open('bottom');
},
close() {
this.$refs.popup.close();
},
/**
* 自定义订单号
*/
addCustomerSn() {
if (!this.customer_sn) {
uni.showToast({
title: '请填写自定义订单号',
icon: 'none'
});
return false;
}
this.request(Api_Url + '/order/addCustomerSn', 'POST', { order_id: this.order_id, customer_sn: this.customer_sn }, true, true).then(res => {
if (res.err_code === 0) {
uni.showToast({
title: '保存成功',
icon: 'success'
});
setTimeout(() => {
this.getData();
}, 2000);
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
},
getData() {
this.request(Api_Url + '/order/info', 'POST', { order_id: this.order_id }, true, true).then(res => {
if (res.err_code === 0) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment