Skip to content

肖康 / H5_2.0

Go to a project
Commit 35fbec8a by LJM
Options

css

parent dd82e9fa
Inline Side-by-side
Showing with 339 additions and 42 deletions
assets/css/mine/orderdetail.scss
......@@ -67,7 +67,6 @@
border-radius: 10rpx 10rpx 0px 0px;
.head {
height: 73rpx;
border-bottom: 1px solid #f0f0f2;
.title {
font-size: 24rpx;
color: #484b59;
......@@ -78,6 +77,7 @@
}
}
.tip {
border-top: 1px solid #f0f0f2;
margin: 24rpx 0;
padding: 15rpx 24rpx 15rpx 24rpx;
background: #fff8f2;
......@@ -195,7 +195,7 @@
border-radius: 10rpx 10rpx 0px 0px;
.head {
height: 73rpx;
border-bottom: 1px solid #f0f0f2;
.title {
font-size: 24rpx;
color: #484b59;
......@@ -206,6 +206,7 @@
}
}
.content {
border-top: 1px solid #f0f0f2;
.box {
padding: 16rpx 0 24rpx 0;
border-bottom: 1px solid #f0f0f2;
......@@ -307,7 +308,6 @@
border-radius: 10rpx 10rpx 0px 0px;
.head {
height: 73rpx;
border-bottom: 1px solid #f0f0f2;
.title {
font-size: 24rpx;
color: #484b59;
......@@ -318,6 +318,7 @@
}
}
.content {
border-top: 1px solid #f0f0f2;
padding: 16rpx 0 24rpx 0;
.iconfont {
font-size: 40rpx;
......@@ -350,7 +351,6 @@
border-radius: 10rpx 10rpx 0px 0px;
.head {
height: 73rpx;
border-bottom: 1px solid #f0f0f2;
.title {
font-size: 24rpx;
color: #484b59;
......@@ -361,6 +361,7 @@
}
}
.content {
border-top: 1px solid #f0f0f2;
padding: 16rpx 0 24rpx 0;
.box {
margin-bottom: 12rpx;
......@@ -457,28 +458,65 @@
.t1 {
font-size: 24rpx;
color: #484b59;
white-space: nowrap;
}
.t2 {
font-size: 32rpx;
color: #f98119;
font-weight: 600;
}
.btn1 {
width: 180rpx;
.btn {
width: 160rpx;
height: 80rpx;
margin-right: 24rpx;
&:last-child {
margin-right: 0;
}
}
.btn0 {
background: #f98119;
border-radius: 6rpx;
font-size: 22rpx;
color: #fff;
}
.btn1 {
border-radius: 6rpx;
border: 1px solid #1969f9;
font-size: 22rpx;
color: #1969f9;
}
.btn2 {
border-radius: 6rpx;
border: 1px solid #1969f9;
font-size: 22rpx;
color: #1969f9;
}
.btn3 {
background: #ffffff;
border-radius: 10rpx;
border-radius: 6rpx;
opacity: 0.54;
border: 1px solid #c6c7cc;
font-size: 28rpx;
font-size: 22rpx;
color: #484b59;
margin-right: 24rpx;
}
.btn2 {
width: 180rpx;
height: 80rpx;
background: #f98119;
border-radius: 10rpx;
font-size: 28rpx;
.btn4 {
background: #1969f9;
border-radius: 6rpx;
font-size: 22rpx;
color: #fff;
}
.btn5 {
background: #ffffff;
border-radius: 6rpx;
opacity: 0.54;
border: 1px solid #c6c7cc;
font-size: 22rpx;
color: #484b59;
}
.btn6 {
background: #1969f9;
border-radius: 6rpx;
font-size: 22rpx;
color: #fff;
}
}
......
pages/mine/orderdetail.vue
......@@ -11,11 +11,11 @@
<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>
<text class="iconfont icon-juxing3" @click="copy(detail.order_sn)"></text>
</view>
<view class="p1 row verCenter">
<text class="t1">自定义订单号：</text>
<text class="t1">--</text>
<text class="t1">{{ detail.customer_sn || '-' }}</text>
<text class="iconfont icon-a-juxing3" @click="open()"></text>
</view>
</view>
......@@ -47,7 +47,7 @@
<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">
<view class="toggle row rowCenter verCenter" @click.stop="detail_head_flag = !detail_head_flag">
<template v-if="detail_head_flag">
<text class="tt">收起</text>
<text class="iconfont icon-arrtop"></text>
......@@ -62,13 +62,18 @@
<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>
<template v-if="delivery_flag">
<text class="iconfont icon-arrtop" @click.stop="delivery_flag = !delivery_flag"></text>
</template>
<template v-else>
<text class="iconfont icon-arrbot" @click.stop="delivery_flag = !delivery_flag"></text>
</template>
</view>
<view class="tip row">
<view class="tip row" v-if="delivery_flag">
<text class="iconfont icon-ts"></text>
<text class="tt">请在接到猎芯网系统短信通知后，再携带已盖章的合同打印件上门取货。</text>
</view>
<view class="content row verCenter bothSide">
<view class="content row verCenter bothSide" v-if="delivery_flag">
<view>
<view class="box row verCenter">
<text class="iconfont icon-dzz"></text>
......@@ -85,14 +90,14 @@
</view>
<text class="iconfont icon-jt"></text>
</view>
<view class="bottom row verCenter">
<view class="bottom row verCenter" v-if="delivery_flag">
<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="logistics" v-if="detail.shipList && detail.shipLists.length > 0">
<view class="head row bothSide verCenter">
<view class="row verCenter">
<text class="t1">物流单号：</text>
......@@ -122,10 +127,15 @@
<view class="shop">
<view class="head row bothSide verCenter">
<text class="title">商品信息</text>
<text class="iconfont icon-arrtop"></text>
<template v-if="shop_flag">
<text class="iconfont icon-arrtop" @click.stop="shop_flag = !shop_flag"></text>
</template>
<template v-else>
<text class="iconfont icon-arrbot" @click.stop="shop_flag = !shop_flag"></text>
</template>
</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="content" v-if="detail.list && shop_flag">
<view class="box" v-for="(item, index) in detail.list" :key="item.rec_id">
<view class="p1">{{ item.goods_name }}</view>
<view class="p2 row bothSide verCenter" style="margin-bottom: 6rpx;">
<view>
......@@ -160,7 +170,7 @@
</view>
</view>
</view>
<view class="bottom row verCenter">
<view class="bottom row verCenter" v-if="shop_flag">
<text class="t1">备注信息：</text>
<text class="t2">{{ detail.order_remark || '' }}</text>
</view>
......@@ -169,7 +179,7 @@
<view class="shop-price">
<view class="top">
<view class="row bothSide verCenter" style="margin-bottom: 26rpx;">
<view>
<view v-if="detail.list">
<text class="t1">共</text>
<text class="t0">{{ detail.list.length }}</text>
<text class="t1">件商品，总金额</text>
......@@ -198,7 +208,12 @@
<view class="tax-information" v-if="detail.inv">
<view class="head row bothSide verCenter">
<text class="title">发票信息</text>
<text class="iconfont icon-arrtop"></text>
<template v-if="tax_flag">
<text class="iconfont icon-arrtop" @click.stop="tax_flag = !tax_flag"></text>
</template>
<template v-else>
<text class="iconfont icon-arrbot" @click.stop="tax_flag = !tax_flag"></text>
</template>
</view>
<view class="content">
<view class="box row verCenter">
......@@ -209,24 +224,24 @@
<text class="t1">纳税识别号：</text>
<text class="t2">{{ detail.inv.tax_no }}</text>
</view>
<view class="box row verCenter">
<view class="box row" v-if="tax_flag">
<text class="t1">公司电话：</text>
<text class="t2">{{ detail.inv.company_phone }}</text>
</view>
<view class="box row verCenter">
<view class="box row" v-if="tax_flag">
<text class="t1">开户银行：</text>
<text class="t2">{{ detail.inv.bank_name }}</text>
</view>
<view class="box row verCenter">
<view class="box row" v-if="tax_flag">
<text class="t1">开户银行账号：</text>
<text class="t2">{{ detail.inv.bank_account }}</text>
</view>
<view class="box row">
<view class="box row" v-if="tax_flag">
<text class="t1">注册地址：</text>
<text class="t2">{{ detail.inv.company_address }}</text>
</view>
</view>
<view class="bottom row">
<view class="bottom row" v-if="tax_flag">
<text class="iconfont icon-fpp"></text>
<view class="text">
<view class="row verCenter">
......@@ -241,9 +256,14 @@
<view class="receiving-information">
<view class="head row bothSide verCenter">
<text class="title">收货信息</text>
<text class="iconfont icon-arrtop"></text>
<template v-if="receiving_flag">
<text class="iconfont icon-arrtop" @click.stop="receiving_flag = !receiving_flag"></text>
</template>
<template v-else>
<text class="iconfont icon-arrbot" @click.stop="receiving_flag = !receiving_flag"></text>
</template>
</view>
<view class="content row">
<view class="content row" v-if="receiving_flag">
<text class="iconfont icon-dzz"></text>
<view class="text">
<view class="row verCenter">
......@@ -258,9 +278,14 @@
<view class="pay-information">
<view class="head row bothSide verCenter">
<text class="title">支付信息</text>
<text class="iconfont icon-arrtop"></text>
<template v-if="pay_flag">
<text class="iconfont icon-arrtop" @click.stop="pay_flag = !pay_flag"></text>
</template>
<template v-else>
<text class="iconfont icon-arrbot" @click.stop="pay_flag = !pay_flag"></text>
</template>
</view>
<view class="content">
<view class="content" v-if="pay_flag">
<view class="box row bothSide verCenter">
<text class="t1">付款方式：</text>
<text class="t2">{{ detail.client_pay_type_val }}</text>
......@@ -286,8 +311,13 @@
<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 class="btn btn0 row rowCenter verCenter" v-if="detail.status == 2 || detail.status == 3" @click.stop="nowPay(detail.order_id)">立即支付</view>
<view class="btn btn1 row rowCenter verCenter" v-if="detail.status == 10 || detail.status == -1" @click.stop="rebuy(detail.order_id)">再次购买</view>
<view class="btn btn2 row rowCenter verCenter" v-if="detail.status == 4" @click.stop="sendTip(detail.order_sn, detail.user_id)">提醒发货</view>
<view class="btn btn3 row rowCenter verCenter" v-if="detail.status != 1" @click.stop="download(detail.order_id)">下载合同</view>
<view class="btn btn4 row rowCenter verCenter" v-if="detail.status == 7 || detail.status == 8 || detail.status == 10" @click.stop="ship(detail.order_id, detail.order_sn, detail.zy_delivery_type, detail.status)">查看物流</view>
<view class="btn btn5 row rowCenter verCenter" v-if="detail.status == 2 || detail.status == 1" @click.stop="cancelOrder(detail.order_id)">取消订单</view>
<view class="btn btn6 row rowCenter verCenter" v-if="detail.status == 8" @click.stop="sureSend(detail.order_id)">确认收货</view>
</view>
</view>
</view>
......@@ -302,6 +332,31 @@
<view class="save row rowCenter verCenter" @click="addCustomerSn()">保存信息</view>
</view>
</uni-popup>
<!--提示 -->
<uni-popup ref="popupCenter" type="center">
<view class="layer-box-confirm">
<template v-if="tipType == 1">
<view class="tip-title column rowCenter verCenter">
<text>全部商品添加购物车成功</text>
<text>您可前往购物车结算~</text>
</view>
<view class="btn row bothSide verCenter">
<view class="btn1 row rowCenter verCenter" @click="close(1)">关闭</view>
<navigator url="joincart" hover-class="none" class="btn2 row rowCenter verCenter">前往购物车</navigator>
</view>
</template>
<template v-else-if="tipType == 2">
<view class="tip-title column rowCenter verCenter">
<text>非常抱歉当前订单商品暂无库存</text>
<text>请联系客服找料!</text>
</view>
<view class="btn row bothSide verCenter">
<view class="btn1 row rowCenter verCenter" @click="close(1)">关闭</view>
<view class="btn2 row rowCenter verCenter">联系客服</view>
</view>
</template>
</view>
</uni-popup>
</view>
</template>
......@@ -316,11 +371,17 @@ export default {
data() {
return {
detail_head_flag: false,
shop_flag: true,
pay_flag: true,
receiving_flag: true,
tax_flag: false,
delivery_flag: true,
kfqq: '',
title: '',
order_id: '',
customer_sn: '', //自定义订单号
detail: {}
detail: {},
tipType: 1
};
},
mounted() {
......@@ -369,11 +430,195 @@ export default {
}
});
},
/**
* 立即支付
* @param {Object} order_id
*/
nowPay(order_id) {
uni.navigateTo({
url: '/pay/online?order_id=' + order_id
});
},
/**
* 再次购买
* @param {Object} order_id
*/
rebuy(order_id) {
this.request(Api_Url + '/cart/rebuy', 'POST', { order_id: order_id }, true, true).then(res => {
if (res.err_code === 0) {
var count = Number(res.data.count);
var successCount = Number(res.data.success);
if (count == successCount) {
//全部购买成功
this.tipType = 1;
this.$refs.popupCenter.open('center');
}
if (successCount == 0) {
//全部购买失败
this.tipType = 2;
this.$refs.popupCenter.open('center');
}
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
},
/**
* 提醒发货
* @param {Object} order_sn
* @param {Object} user_id
*/
sendTip(order_sn, user_id) {
uni.showModal({
title: '提示',
content: '你确定要提醒发货吗?',
success: res => {
if (res.confirm) {
console.log('用户点击确定');
this.request(Api_Url + '/crm/remindDelivery', 'POST', { order_sn: order_sn, user_id: user_id }, true, true).then(res => {
if (res.err_code === 0) {
uni.showToast({
title: '提醒成功',
icon: 'success'
});
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
/**
* 下载合同
*/
download(order_id) {
this.request(Api_Url + '/contract/checkPdf', 'POST', { id: order_id }, true, true).then(res => {
if (res.err_code === 0) {
var url = Api_Url + '/contract/pdf?id=' + order_id + '&pf=' + 2;
uni.downloadFile({
url: url,
success: function(res) {
const filePath = res.tempFilePath;
uni.openDocument({
filePath: filePath,
showMenu: true,
success: function(res) {
console.log('打开文档成功');
},
fail: function() {
uni.showModal({
title: '提示',
content: '暂不支持该文件类型预览',
showCancel: false
});
console.log('打开文档失败');
}
});
}
});
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
},
/**
* 取消订单
* @param {Object} order_id
*/
cancelOrder(order_id) {
uni.showModal({
title: '提示',
content: '你确定要取消该订单嘛?',
success: res => {
if (res.confirm) {
console.log('用户点击确定');
this.request(Api_Url + '/order/cancel', 'POST', { id: order_id }, 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'
});
}
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
/**
* 查看物流
* @param {Object} order_id
* @param {Object} order_sn
* @param {Object} zy_delivery_type
* @param {Object} status
*/
ship(order_id, order_sn, zy_delivery_type, status) {
uni.navigateTo({
url: '/user/orderdetail?order_id=' + order_id
});
},
/**
*确认收货
* @param {Object} order_id
*/
sureSend(order_id) {
uni.showModal({
title: '提示',
content: '您要确认收货吗?',
success: res => {
if (res.confirm) {
console.log('用户点击确定');
this.request(Api_Url + '/order/recive', 'POST', { order_id: order_id }, 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'
});
}
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
getData() {
this.request(Api_Url + '/order/info', 'POST', { order_id: this.order_id }, true, true).then(res => {
if (res.err_code === 0) {
this.title = res.data.status_val;
this.title = res.data.status_val; //标题
this.detail = res.data;
this.customer_sn = res.data.customer_sn; //赋值自定义单号
} else if (res.err_code == 21004) {
uni.showToast({
title: res.err_msg,
......@@ -390,6 +635,20 @@ export default {
});
}
});
},
/**
* 复制
*/
copy(val) {
uni.setClipboardData({
data: val,
success() {
uni.showToast({
title: '复制成功',
icon: 'success'
});
}
});
}
}
};
......
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