demingshangjia/pages/index/details.vue
2020-09-07 17:10:24 +08:00

874 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="details">
<view class="box" v-if="type<4">
<view class="goods-info" v-for="list in info.extend_order_goods">
<image :src="list.image_480_url"></image>
<view class="info-right">
<view class="name u-line-1">{{ list.goods_name }}</view>
<view class="info">
<view class="num">共{{ list.goods_num }}件商品</view>
<view class="price">
实付
<span>¥{{ list.goods_pay_price }}</span>
</view>
</view>
</view>
</view>
</view>
<u-radio-group class="box" v-model="value" v-if="type>3">
<view class="goods-info" v-for="list in info.refund_list">
<image :src="list.goods_image"></image>
<view class="info-right">
<view class="name u-line-1">{{ list.goods_name }}</view>
<view class="info">
<view class="num">共{{ list.goods_num }}件商品</view>
<view class="price">
实付
<span>¥{{ list.refund_amount }}</span>
</view>
</view>
</view>
<u-radio :name="list.refund_id" v-if="type==4" shape="circle" @change="radioGroupChange">
</u-radio >
</view>
</u-radio-group>
<!-- 待处理 -->
<view class="user-info" v-if="type == 1">
<view class="info-title">收件人信息</view>
<view class="info-container">
<view>
<view class="title">姓名</view>
<view class="value">{{ info.extend_order_common.reciver_name }}</view>
<image src="/static/image/home/chat.png" @click="tochat(info.buyer_id)"></image>
</view>
<view>
<view class="title">手机号</view>
<view class="value">{{ info.extend_order_common.reciver_info.mob_phone }}</view>
</view>
<view>
<view class="title">收货地址</view>
<view class="value u-line-1">{{ info.extend_order_common.reciver_info.address }}</view>
</view>
<view>
<view class="title">派送方式</view>
<view class="value u-line-1">{{ users_type == 0 ? "-" : users_type == 1 ? "快递" : users_type == 2 ? "骑手" : "自提" }}</view>
</view>
<view @click="showInvoice">
<view class="title">开具发票</view>
<view class="invoice">
<text>{{ is_invoice ? "是" : "否" }}</text>
<u-icon name="arrow-right" color="#999" size="20" style="margin-left: 10rpx;"></u-icon>
</view>
</view>
</view>
</view>
<!-- 待处理之后的 -->
<view class="refunds-title" v-if="type!=1">收件人信息</view>
<view class="refunds-user" v-if="type == 2 || type == 3 || type == 4 || type == 5 || type == 6|| type == 7">
<view>
<image src="/static/image/home/2.png"></image>
<view>{{ info.extend_order_common.reciver_name }}</view>
<image src="/static/image/home/chat.png" @click="tochat(info.buyer_id)"></image>
</view>
<view>
<image src="/static/image/home/3.png"></image>
<view>{{ info.extend_order_common.reciver_info.mob_phone }}</view>
</view>
<view>
<image src="/static/image/home/4.png"></image>
<view class="address u-line-1">{{ info.extend_order_common.reciver_info.address }}</view>
</view>
</view>
<!-- 待处理 -->
<view class="delivery" v-if="type == 1">
<view class="title">派送方式</view>
<view class="methods">
<view :class="{ active: cur == 0 }" @click="pushstyleA">快递</view>
<view :class="{ active: cur == 1 }" @click="pushstyleB">骑手</view>
<view :class="{ active: cur == 2 }" @click="pushstyleC">自提</view>
</view>
<view v-if="cur != 2 && (pushid || selctcar)">
<view class="title">{{cur == 0 ? '快递单号':'骑手信息'}}</view>
<view class="value">{{ cur == 0 ? pushid ? companyidA.express_name + ": " + pushid : '' : selctcar ? selctcar.label : '' }}</view>
</view>
<view class="btn" @click="confirmpushstyle">确认</view>
</view>
<!-- 已发货 -->
<view class="pushtimeline" v-if="type == 2">
<view class="timelinetitle">物流信息</view>
<view class="timelineid">订单单号:&nbsp;&nbsp;&nbsp;{{ info.order_sn }}</view>
<view class="timelinebox" v-for="(list,index) in info.express_list" :key="index">
<view class="timelinecontent">{{list.content}}</view>
<view class="timelinetime">{{list.kd_time}}</view>
</view>
</view>
<!-- 已完成 -->
<!-- 退款处理 -->
<view class="refunds-option" v-if="type == 4">
<view :class="{ active: cur == 0 }" @click="unrefuse">不处理</view>
<view :class="{ active: cur == 1 }" @click="refuse">确定处理</view>
</view>
<!-- 同意退款/拒绝退款 -->
<view class="refund" v-if="type == 5 ">退款状态:同意退款,请注意查收!</view>
<view class="refund" v-if="type == 6 ">退款状态:商家同意退款,等待后台处理!</view>
<view class="refund" v-if="type == 7 ">退款状态:商家拒绝退款,请等待客服联系!</view>
<u-popup v-model="showDelivery" mode="center" border-radius="10" class="delivery-popup">
<view class="title">骑手信息</view>
<view class="input-info">
<input type="text" placeholder="请输入您的姓名" v-model="name" />
<input type="text" placeholder="请输入您的手机号" v-model="phone" />
<input type="text" placeholder="请输入您的公司名称" v-model="company" />
</view>
<view class="btn" @click="showDelivery = false">确认</view>
</u-popup>
<!-- <u-picker mode="selector" v-model="show" :default-selector="[0]" :range="list" range-key="content" @confirm="getselect" confirm-color="#ff780f;"></u-picker> -->
<u-select v-model="show" :list="list" @confirm="getselect" confirm-color="#FF780F"></u-select>
<!-- companylist -->
<u-picker
mode="selector"
v-model="showcompany"
:default-selector="[0]"
:range="companylist"
range-key="express_name"
@confirm="getselectcompany"
title="请选择公司"
confirm-text="下一步"
></u-picker>
<u-popup v-model="showExpress" :mask-close-able="false" mode="center" border-radius="10" class="delivery-popup">
<view class="title">填写快递单号</view>
<view class="input-info"><input type="text" style="color: #333; line-height: 1;" placeholder="请输入快递单号" v-model="pushid" /></view>
<view class="btn" @click="saveDelivery">确认</view>
</u-popup>
<u-popup v-model="showRefunds" mode="center" border-radius="10" class="refunds-popup">
<view v-if="cur == 1" class="popup-tips">
确定处理
<br />
平台将进行退款
</view>
<view v-if="cur == 0" class="popup-tips">
确定不处理
<br />
平台将进行联系
</view>
<view class="popup-btn">
<view class="cancel" @click="cancel">取消</view>
<view class="determine" @click="confirm">确定</view>
</view>
</u-popup>
<u-popup class="invoice-box" v-model="show_invoice" :mask-close-able="false" mode="center" length="540rpx" border-radius="10">
<view class="title">
<text>发票信息</text>
<u-icon class="close" name="close" @click="show_invoice=false"></u-icon>
</view>
<view class="info">
<view>
<text>发票抬头:</text>
<view class="u-line-2">{{ invoiceList.invoice_title }}</view>
</view>
<view v-if="invoice_type==2">
<text>税号:</text>
<text>{{ invoiceList.invoice_code }}</text>
</view>
<view v-if="invoice_type==2">
<text>单位地址:</text>
<view class="u-line-3">{{ invoiceList.invoice_goto_addr }}</view>
</view>
<view>
<text>电话号码:</text>
<text>{{ invoiceList.invoice_rec_mobphone }}</text>
</view>
<view v-if="invoice_type==2">
<text>开户银行:</text>
<view class="u-line-3">{{ invoiceList.invoice_reg_bname }}</view>
</view>
<view v-if="invoice_type==2">
<text>银行账户:</text>
<text>{{ invoiceList.invoice_reg_baccount }}</text>
</view>
<view v-if="invoice_type==1">
<text>身份证号</text>
<text>{{ invoiceList.invoice_code }}</text>
</view>
</view>
</u-popup>
<u-toast ref="uToast" />
</view>
</template>
<script>
export default {
data() {
return {
status: 1, // 订单状态
cur: null,
show_invoice: false, // 发票
showDelivery: false, // 填写骑手信息
showExpress: false, // 填写快递单号
showRefunds: false, // 平台退货处理
showcompany: false, // 平台退货处理
companylist: [],
show: false, // 骑手列表
name: '',
phone: '',
company: '',
express: '',
type: '',
orderid: 0,
info: {
extend_order_goods:[{}],
extend_order_common:{
reciver_info:{
mob_phone:"",
address:""
},
receive_name:""
}
},
list: [],
pushid: null,
pushstate: false, //显示物流单号
selctcar: null, //骑手信息
companyidA: null, //物流派送公司id
companyidB: null, //骑手派送公司id
value:"",
refundid:null,
is_invoice: 0, // 判断发票
invoice_type: null,
invoiceList: {}, // 发票数据
users_type: "", // 用户选择发货type
};
},
onLoad(option) {
this.type = option.type;
// console.log(this.type)
this.orderid = option.id;
this.resetinfo();
if (this.type == 1) {
// 获取快递公司
this.getcompanyinfo();
}
if (this.type == 2) {
// 获取物流信息
this.getcarinfo();
}
// 订单状态: 0:全部 1已付款未发货 2已发货 3已完成 4申请退款/退货 5已退款/退货 6拒绝退款/退货
},
methods: {
// 跳转详情页面
tochat(ID){
function Friend(uuid, name, avatar,time = "", text = "",date = "") {
this.uuid = uuid;
this.name = name;
this.avatar = avatar;
this.online = false;
this.unReadMessage = 0;
this.text = text;
this.time = time;
this.date = date
}
console.log(ID)
const token = uni.getStorageSync('token');
let that = this
uni.request({
url:"https://mall.dmygkeji.com/api/Specialci/getAtwillUserInfo",
data:{
userId: ID
},
method:"POST",
header:{
"Authorization" : 'Bearer' + " " + token
},
success(res){
console.log(res)
res = res.data
let user = new Friend(res.data.member_id,res.data.member_nickname,res.data.member_avatar)
that.$u.route({
url:"/pages/messages/privateChat",
params:{
id:JSON.stringify(user)
}
})
}
})
},
// 退款单选
radioGroupChange(e) {
this.refundid = e
console.log(e);
},
// 人工配送
pushstyleA() {
this.cur = 0;
this.showcompany = true;
},
// 选择骑手
pushstyleB() {
this.cur = 1;
this.show = true;
},
// 选择骑手
pushstyleC() {
this.cur = 2;
},
// 获取物流公司列表
getcompanyinfo() {
let that = this;
this.$u.api.pushcompany({}).then(res => {
if (res.errCode != 0) {
} else {
that.companylist = res.data;
}
});
},
// 查询物流
// getcarinfo() {
// this.$u.api.getcarinfo({
// order_id: this.orderid
// }).then(res => {
// console.log(res);
// })
// },
// 保存订单号
saveDelivery() {
if (!this.pushid) {
uni.showToast({
title: "请填写快递单号!",
icon: "none"
})
return
}
this.showExpress = false;
},
// 取消退款
cancel() {
this.showRefunds = false;
// cur
},
//
confirm() {
this.showRefunds = false;
if (!this.refundid) {
this.$refs.uToast.show({
title: "请选择商品",
type: "warning"
});
return;
}
if (this.cur == 0) {
// 确定退款
this.$u.api.refund({
refund_id: this.refundid,
seller_state: 3,
seller_message: ""
}).then(res => {
if (res.errCode != 0) {
this.$refs.uToast.show({
title: res.message,
type: 'error'
});
} else {
this.$refs.uToast.show({
title: res.message,
type: 'success'
});
let pages = getCurrentPages();
let prePage = pages[pages.length - 2];
console.log(prePage.$vm);
prePage.$vm.del_id = this.orderid;
uni.navigateBack({
delta: 1
});
}
});
} else {
// 不进行退款
this.$u.api.refund({
refund_id: this.refundid,
seller_state: 2,
seller_message: ""
}).then(res => {
if (res.errCode != 0) {
this.$refs.uToast.show({
title: res.message,
type: 'error'
});
} else {
this.$refs.uToast.show({
title: res.message,
type: 'success'
});
uni.navigateBack({
delta: 1
});
console.log(res);
}
});
}
},
// 同意退款
refuse() {
this.cur = 1;
this.showRefunds = true;
},
// 同意退款
unrefuse() {
this.cur = 0;
this.showRefunds = true;
},
// 选择快递公司
getselectcompany(e) {
let obj = this.companylist[e[0]];
this.companyidA = obj;
this.showExpress = true;
},
// 绑定配送方式
confirmpushstyle() {
// console.log(this.cur);
if (this.cur < 0) {
this.$refs.uToast.show({
title: '请选择派送方式!',
type: 'warning ',
})
return;
}
if (this.cur == 0) {
if (!this.companyidA) {
this.$refs.uToast.show({
title: '请选择派送方式!',
type: 'warning ',
})
return;
}
// console.log(this.pushid);
this.$u.api.bindpushid({
order_id: this.orderid,
shipping_code: this.pushid,
shipping_express_id: this.companyidA.express_id
}).then(res => {
if (res.errCode != 0) {
this.$refs.uToast.show({
title: res.message,
type: 'error'
});
} else {
this.$refs.uToast.show({
title: res.message,
type: 'success'
});
uni.navigateBack({
delta: 1
});
}
});
} else if (this.cur == 1) {
if (!this.selctcar) {
this.$refs.uToast.show({
title: '请选择派送方式!',
type: 'warning ',
})
return;
}
this.$u.api.bindcarer({
order_id: this.orderid,
takeawayer_id: this.selctcar.takeawayer_id
}).then(res => {
console.log(res);
if (res.errCode != 0) {
this.$refs.uToast.show({
title: res.message,
type: 'error'
});
} else {
this.$refs.uToast.show({
title: res.message,
type: 'success'
});
uni.navigateBack({
delta: 1
});
}
});
} else {
uni.navigateTo({
url: "mention?id=" + this.orderid
})
}
},
// 显示发票
showInvoice() {
if (this.is_invoice) {
this.show_invoice = true;
}
},
// 选择骑手
getselect(e) {
this.selctcar = this.list[e[0].value];
},
// 获取订单信息
resetinfo() {
this.$u.api.orderdetail({
order_id: this.orderid
}).then(res => {
console.log(res);
if (res.errCode != 0) {
this.$refs.uToast.show({
title: res.message,
type: 'error'
});
} else {
this.info = res.data;
this.cur = res.data.member_deliver_type;
// console.log(res.data.member_deliver_type);
this.users_type = res.data.member_deliver_type;
this.invoiceList = res.data.extend_order_common.invoice_info;
this.is_invoice = this.invoiceList.invoice_id || false;
this.invoice_type = this.invoiceList.invoice_type;
// console.log(this.invoiceList,this.is_invoice,this.invoice_type);
}
});
this.$u.api.takeawayerlist({}).then(res => {
console.log(res);
if (res.errCode != 0) {
this.$refs.uToast.show({
title: res.message,
type: 'error'
});
} else {
let arr = res.data;
for (let index in arr) {
arr[index].value = index;
arr[index].label = arr[index].company_name + ' ' + arr[index].contacts + ' ' + arr[index].contact_number;
}
this.list = arr;
}
});
}
}
};
</script>
<style lang="scss" scoped>
.details {
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--window-top));
background-color: #ececec;
.goods-info {
background-color: #ffffff;
width: 750rpx;
padding: 30rpx;
display: flex;
align-items: center;
margin: 2rpx 0 20rpx;
> image {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
flex-shrink: 0;
margin-right: 26rpx;
}
.info-right {
.name {
width: 439rpx;
font-size: 28rpx;
color: rgba(51, 51, 51, 1);
margin-bottom: 30rpx;
}
.info {
width: 100%;
display: flex;
align-items: center;
font-size: 26rpx;
color: rgba(102, 102, 102, 1);
.price {
margin-left: 10rpx;
> span {
color: #ff780f;
}
}
}
}
}
.refunds-title{
padding: 25rpx 30rpx;
font-weight: 500;
color: #333333;
background-color: #ffffff;
}
.refunds-user {
padding: 25rpx 30rpx;
background-color: #ffffff;
margin-bottom: 20rpx;
> view {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
@mixin image-class($width, $right) {
> image {
flex-shrink: 0;
width: $width;
height: 40rpx;
margin-right: $right;
}
}
&:first-child {
@include image-class($width: 40rpx, $right: 20rpx);
}
&:nth-child(2) {
margin-left: 4rpx;
@include image-class($width: 32rpx, $right: 24rpx);
}
&:last-child {
margin-left: 2rpx;
@include image-class($width: 36rpx, $right: 22rpx);
}
> view {
flex: 1;
font-size: 26rpx;
color: rgba(51, 51, 51, 1);
}
}
}
.user-info {
.info-title {
font-size: 30rpx;
font-weight: 500;
color: rgba(51, 51, 51, 1);
height: 88rpx;
background-color: #ffffff;
margin-bottom: 2rpx;
padding: 30rpx;
}
.info-container {
padding: 0 30rpx;
background-color: #ffffff;
margin-bottom: 20rpx;
> view {
height: 88rpx;
display: flex;
align-items: center;
color: rgba(51, 51, 51, 1);
&:not(:last-child) {
border-bottom: 2rpx solid #ececec;
}
.title {
width: 150rpx;
font-size: 30rpx;
margin-right: 10rpx;
}
.value {
font-size: 26rpx;
flex: 1;
}
.invoice {
margin-left: auto;
font-size: 26rpx;
color: #333;
}
image{
width: 40rpx;
height: 40rpx;
}
}
}
}
.delivery {
flex: 1;
background-color: #ffffff;
padding: 30rpx;
position: relative;
.title {
font-size: 30rpx;
font-weight: 500;
color: rgba(51, 51, 51, 1);
margin-bottom: 30rpx;
}
.methods {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
> view {
font-size: 30rpx;
color: rgba(0, 0, 51, 1);
width: 30%;
height: 80rpx;
border: 1rpx solid rgba(236, 236, 236, 1);
background: rgba(236, 236, 236, 1);
border-radius: 6rpx;
text-align: center;
line-height: 80rpx;
margin-bottom: 20rpx;
}
.active {
border: 1rpx solid #ff780f;
color: #ff780f;
background: #fff1e6;
}
}
.btn {
position: absolute;
bottom: 40rpx;
left: 50%;
transform: translate(-50%, 0);
width: 690rpx;
height: 98rpx;
background: rgba(255, 120, 15, 1);
border-radius: 49rpx;
font-size: 36rpx;
color: rgba(255, 255, 255, 1);
text-align: center;
line-height: 98rpx;
}
}
.pushtimeline {
width: 100%;
padding: 0 30rpx;
background-color: #ffffff;
.timelinetitle {
margin-top: 20rpx;
height: 40rpx;
line-height: 40rpx;
font-size: 30rpx;
font-weight: 400;
color: rgba(51, 51, 51, 1);
}
.timelineid {
margin: 18rpx 0;
min-height: 40rpx;
font-size: 24rpx;
font-weight: 400;
color: rgba(102, 102, 102, 1);
}
.timelinebox {
margin: 20rpx 0;
}
.timelinecontent {
line-height: 40rpx;
font-size: 26rpx;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
.timelinetime {
font-size: 24rpx;
font-weight: 500;
color: rgba(153, 153, 153, 1);
line-height: 40rpx;
}
}
.refund {
padding: 88rpx 30rpx;
background-color: #ffffff;
line-height: 40rpx;
}
.refunds-option {
flex: 1;
padding: 88rpx 30rpx;
background-color: #ffffff;
display: flex;
> view {
width: 335rpx;
height: 80rpx;
border: 1rpx solid rgba(236, 236, 236, 1);
background: rgba(236, 236, 236, 1);
border-radius: 6rpx;
font-size: 30rpx;
color: rgba(0, 0, 51, 1);
line-height: 80rpx;
text-align: center;
margin-right: 20rpx;
}
.active {
border: 1rpx solid #ff780f;
color: #ff780f;
background: #fff1e6;
}
}
.delivery-popup {
.title {
width: 420rpx;
font-size: 30rpx;
font-weight: 500;
color: rgba(51, 51, 51, 1);
text-align: center;
line-height: 88rpx;
border-bottom: 2rpx solid #ececec;
}
.input-info {
> input {
font-size: 26rpx;
line-height: 88rpx;
padding: 30rpx;
border-bottom: 2rpx solid #ececec;
}
}
.btn {
margin: 20rpx auto;
width: 200rpx;
height: 60rpx;
background: rgba(255, 120, 15, 1);
border-radius: 30rpx;
font-size: 28rpx;
color: rgba(255, 255, 255, 1);
line-height: 60rpx;
text-align: center;
}
}
.refunds-popup {
.popup-tips {
width: 420rpx;
text-align: center;
font-size: 28rpx;
color: rgba(102, 102, 102, 1);
line-height: 42rpx;
padding: 30rpx 0;
}
.popup-btn {
width: 420rpx;
display: flex;
border-top: 2rpx solid #ececec;
> view {
flex: 1;
height: 98rpx;
text-align: center;
line-height: 98rpx;
&:first-child {
border-right: 2rpx solid #ececec;
}
}
.determine {
color: #ff780f;
}
}
}
.invoice-box {
.title {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 20rpx 20rpx 0 20rpx;
text-align: center;
.close {
margin-left: 180rpx;
}
}
.info {
padding: 30rpx;
& > view {
display: flex;
margin: 10rpx 0;
& > text:first-child {
flex-shrink: 0;
width: 140rpx !important;
text-align: right;
}
& > text:last-child {
width: 320rpx !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
}
</style>