demingshangjia/pages/index/details.vue
2020-08-05 20:10:55 +08:00

621 lines
14 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="goods-info">
<image :src="info.extend_order_goods[0].goods_image"></image>
<view class="info-right">
<view class="name u-line-1">{{ info.extend_order_goods[0].goods_name }}</view>
<view class="info">
<view class="num">{{ info.extend_order_goods[0].goods_num }}件商品</view>
<view class="price">
实付
<span>{{ info.extend_order_goods[0].goods_pay_price }}</span>
</view>
</view>
</view>
</view>
<view class="refunds-user" v-if="type == 2 || type == 3 || type == 4 || type == 5 || type == 6">
<view>
<image src="/static/image/home/2.png"></image>
<view>{{ info.extend_order_common.reciver_name }}</view>
</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="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>
</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>
<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>
<view class="btn" @click="confirmpushstyle">确认</view>
</view>
<view class="pushtimeline" v-if="type == 2">
<view class="timelinetitle">物流信息</view>
<view class="timelineid">订单单号:{{ info.order_sn }}</view>
<view class="timelinebox" v-for="list in info.express_list">
<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 || type == 6">退款状态:{{ type == 5 ? '同意退款请注意查收' : '拒绝退款请等待客服联系' }}</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"></u-picker>
<!-- 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" mode="center" border-radius="10" class="delivery-popup">
<view class="title">填写快递单号</view>
<view class="input-info"><input type="text" placeholder="请输入快递单号" v-model="pushid" /></view>
<view class="btn" @click="showExpress = false">确认</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-toast ref="uToast" />
</view>
</template>
<script>
export default {
data() {
return {
status: 1, // 订单状态
cur: Number,
showDelivery: false, // 填写骑手信息
showExpress: false, // 填写快递单号
showRefunds: false, // 平台退货处理
showcompany: false, // 平台退货处理
companylist: [],
show: false, // 骑手列表
name: '',
phone: '',
company: '',
express: '',
type: '',
orderid: 0,
info: {},
list: [],
pushid: null,
pushstate: false, //显示物流单号
selctcar: null, //骑手信息
companyidA: null, //物流派送公司id
companyidB: null //骑手派送公司id
};
},
onLoad(option) {
this.type = option.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: {
// 人工配送
pushstyleA() {
this.cur = 0;
this.showcompany = true;
},
// 选择骑手
pushstyleB() {
this.cur = 1;
this.show = true;
},
// 获取物流公司列表
getcompanyinfo() {
let that = this;
this.$u.api.pushcompany({}).then(res => {
if (res.errCode != 0) {
} else {
that.companylist = res.data;
}
});
},
// 取消退款
cancel() {
this.showRefunds = false;
// cur
},
//
confirm() {
this.showRefunds = false;
if (this.cur == 0) {
// 确定退款
return;
this.$u.api.refund({
refund_id: this.orderid,
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'
});
console.log(res);
}
});
} else {
// 不进行退款
return;
this.$u.api.refund({
refund_id: this.orderid,
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'
});
console.log(res);
}
});
}
},
// 同意退款
refuse() {
this.cur = 1;
this.showRefunds = true;
},
// 同意退款
unrefuse() {
this.cur = 0;
this.showRefunds = true;
},
// 获取物流信息
getcarinfo() {
this.$u.api.getpushinfo({
order_id: this.orderid
}).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'
});
console.log(res);
}
});
},
// 选择快递公司
getselectcompany(e) {
let obj = this.companylist[e[0]];
this.companyidA = obj.express_id;
this.showExpress = true;
},
// 绑定配送方式
confirmpushstyle() {
if (this.cur == 0) {
console.log(this.pushid);
this.$u.api.bindpushid({
order_id: this.orderid,
shipping_code: this.pushid,
shipping_express_id: this.companyidA
}).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 {
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'
});
}
});
}
},
// 选择骑手
getselect(e) {
this.selctcar = this.list[e[0]];
},
// 获取订单信息
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.$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].content = 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;
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-user {
padding: 25rpx 30rpx;
background-color: #ffffff;
margin-bottom: 20rpx;
> view {
display: flex;
align-items: center;
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 {
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;
}
}
}
}
.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;
> view {
font-size: 30rpx;
color: rgba(0, 0, 51, 1);
width: 335rpx;
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;
&:nth-child(2n-1) {
margin-right: 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 {
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;
}
}
}
}
</style>