sadjv3_jishi/package/pages/zysc/member/orderdetail.vue

622 lines
20 KiB
Vue
Raw Normal View History

2024-06-05 19:14:51 +08:00
<template>
<view>
<view v-if="list.sendWay != 2"
style="height: 140upx;background: #FFFFFF;margin-top: 30upx; padding: 10upx;border-radius: 15upx;width: 95%;margin-left: 20upx;">
<view style="display: flex;margin: 15upx 0 0 20upx;">
<image src="https://renwu.xiansqx.com/img/20210813/3edd01640b20476da2d93d8d25a8269b.png"
style="width: 70upx; height: 70upx;margin-top: 10upx;"></image>
<view style="margin-left: 20upx;width: 80%;">
<view style="display: flex;align-items: center;">
<view style="font-size: 32upx;color: #333333;">{{list.consignee}}</view>
<view style="font-size: 28upx;color: #999999;margin-left: 10upx;">{{list.mobile}}</view>
</view>
<view
style="margin-top: 10upx;font-size: 26upx;color: #333333;width: 90%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
{{list.provinces}}{{list.detail}}
</view>
</view>
</view>
</view>
<view
style="height: 320upx;background: #FFFFFF;margin-top: 30upx; padding: 10upx;border-radius: 15upx;width: 95%;margin-left: 20upx;">
<view style="display: flex;">
<view style="padding: 20upx 0 0upx 30upx;width: 75%;text-align: left;color: #000;font-size: 28upx;">
{{list.createAt}}
</view>
<view style="padding: 20upx 0 0upx 0upx;width: 20%;text-align: right;color: #05C25C;font-size: 28upx;">
{{list.status}}
</view>
</view>
<view style="display: flex;padding: 20upx 10upx;" @tap='goOrderDetail(list.goodsId)'>
<image :src="list.img" style="width: 30%;height: 190upx;margin-left: 20upx;"></image>
<view style="margin-left: 20upx;width: 68%;">
<view
style="font-size: 30upx;color: #333333;width: 90%;height: 80upx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;">
{{list.title}}
</view>
<view style="display: flex;height: 50upx;margin-top: 70upx;">
<view style="display: flex;width: 50%;">
<view style="font-size: 30upx;color: #333333;">¥ {{list.price}}</view>
<view style="font-size: 24upx;color: #666666;padding-top: 7upx;padding-left: 10upx;">
×{{list.number}}</view>
</view>
<view
style="font-size: 26upx;color: #333333;padding: 0 0 10upx 20upx;width: 40%;text-align: right;">
总金额: ¥{{list.payMoney}}</view>
</view>
</view>
</view>
</view>
<view
style="height: max-content;background: #FFFFFF;margin-top: 30upx; padding: 10upx;border-radius: 15upx;width: 95%;margin-left: 20upx;margin-bottom: 150upx;">
<view style="display: flex;padding: 20upx;align-items: center;"
v-if="list.postagePrice != null && list.sendWay != 2">
<view style="font-size: 26upx;color: #333333;width: 25%;">运费</view>
<view style="font-size: 26upx;color: #333333;margin-left: 10upx;width: 70%;">
{{list.postagePrice == 0 ? '包邮' : list.postagePrice + '元'}}
</view>
</view>
<view style="display: flex;padding: 20upx;align-items: center;" @tap="copy(list.orderNum)">
<view style="font-size: 26upx;color: #333333;width: 25%;">订单编号</view>
<view style="font-size: 26upx;color: #333333;margin-left: 10upx;width: 70%;">{{list.orderNum}}
<u-icon name="file-text"></u-icon>
</view>
</view>
<view style="display: flex;padding: 20upx;align-items: center;">
<view style="font-size: 26upx;color: #333333;width: 25%;">配送方式</view>
<view style="font-size: 26upx;color: #333333;margin-left: 10upx;width: 70%;">
{{list.sendWay == 2 ? '自取' : '快递'}}
</view>
</view>
<view style="display: flex;padding: 20upx;align-items: center;">
<view style="font-size: 26upx;color: #333333;width: 25%;">下单时间</view>
<view style="font-size: 26upx;color: #333333;margin-left: 10upx;width: 70%;">{{list.createAt}}</view>
</view>
<view style="display: flex;padding: 20upx;align-items: center;" v-if="state != 5 && list.descrition">
<view style="font-size: 26upx;color: #333333;width: 25%;">订单备注</view>
<view style="width: 70%;font-size: 26upx;color: #333333;margin-left: 10upx;">{{list.descrition}}</view>
</view>
<view style="display: flex;padding: 20upx;align-items: center;" v-if="list.sendWay == 2 && adminShopName">
<view style="font-size: 26upx;color: #333333;width: 25%;">商家名称</view>
<view style="width: 70%;font-size: 26upx;color: #333333;margin-left: 10upx;">{{adminShopName}}</view>
</view>
<view style="display: flex;padding: 20upx;align-items: center;" @tap="bindGps"
v-if="list.sendWay == 2 && adminShopAddress">
<view style="font-size: 26upx;color: #333333;width: 25%;">商家地址</view>
<view style="width: 70%;font-size: 26upx;color: #333333;margin-left: 10upx;align-items: center;">
{{adminShopAddress}}
<u-icon name="map"></u-icon>
</view>
</view>
<view style="display: flex;padding: 20upx;align-items: center;" @click="bindphone(adminShopPhone)"
v-if="list.sendWay == 2 && adminShopPhone">
<view style="font-size: 26upx;color: #333333;width: 25%;">商家电话</view>
<view style="width: 70%;font-size: 26upx;color: #333333;margin-left: 10upx;">{{adminShopPhone}}
<u-icon name="phone"></u-icon>
</view>
</view>
<view style="display: flex;padding: 20upx;align-items: center;" v-if="state != 5">
<view v-if="state < 2" style="font-size: 26upx;color: #333333;width: 25%;">支付状态</view>
<view v-if="state >= 2" style="font-size: 26upx;color: #333333;width: 25%;">支付方式</view>
<view style="width: 70%;font-size: 26upx;color: #333333;margin-left: 10upx;">{{payWay}}</view>
</view>
<view style="display: flex;padding: 20upx;align-items: center;" @click="getDuihuanma(list.virtualId)"
v-if="list.virtualId && state < 5">
<view style="font-size: 26upx;color: #333333;width: 25%;">兑换码</view>
<view style="font-size: 26upx;color: #FC0B17;margin-left: 10upx;width: 70%;">点击查看详情</view>
</view>
<view style="display: flex;padding: 20upx;align-items: center;" v-if="refundCheck">
<view style="font-size: 26upx;color: #333333;width: 25%;">退款原因</view>
<input type="text" style="width: 70%;font-size: 26upx;color: #333333;margin-left: 10upx;"
v-model="refund" placeholder="请输入退款原因" :disabled="state === 6 || state === 7 ? true : false" />
</view>
<view style="display: flex;padding: 20upx;align-items: center;" v-if="refusedRefund">
<view style="font-size: 26upx;color: #333333;width: 25%;">拒绝退款原因</view>
<input type="text" style="width: 70%;font-size: 26upx;color: #333333;margin-left: 10upx;"
v-model="refusedRefund" disabled="true" />
</view>
<view style="padding: 20upx;" v-if="expList.length > 0">
<view>
<view style="display: flex;">
<view style="font-size: 26upx;color: #333333;width: 25%;">{{expName}}</view>
<view style="font-size: 26upx;color: #333333;margin-left: 10upx;width: 70%;">
{{list.expressNumber}}
</view>
</view>
<view style="width: 100%;margin-top: 20upx;">
<view style="margin-top: 20upx;" v-for="(item,index) in expList" :key='index'>
<view style="width: 100%;margin-top: 10upx;">
<text>{{item.time}}:</text>
<text style="margin-left: 20upx;">{{item.status}}</text>
<!-- <view style="width: 40%;">{{item.time}}:</view>
<view style="font-size: 26upx;color: #333333;margin-left: 10upx;">{{item.status}}</view> -->
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 淘口令分享 -->
<simpleModal ref="simpleModalTkl" @maskClose="TklmaskClose">
<view class="buy-box-title">兑换码</view>
<view class="buy-box-center" style="width: 700upx;">
<view class="code-cent">
<div class="cente-text">
<div>
<view class="textarea">
商品{{ duihuanList.title }}
<br />
链接{{ duihuanList.linkUrl }}
<br />
兑换码{{ duihuanList.content }}
</view>
</div>
</div>
</view>
<view style="display: flex;width: 100%;">
<view class="buy-btn-copy" style="width: 40%;" @tap="goWeb">一键打开</view>
<view class="buy-btn-copy" style="width: 40%;" v-bind:class="[copyTklStatus ? 'active' : '', '']"
@tap="copyTklWenAns">{{ copyTklStatus ? '已复制到剪切板' : '一键复制' }}</view>
</view>
</view>
</simpleModal>
<view
style="text-align: center;position: fixed;bottom: 0upx;background-color: #FFFFFF;width: 100%;height: 100upx;justify-content: center;overflow: hidden;"
v-if="state < 5">
<view style="display: flex;text-align: center;width: max-content;float: right;">
<view class='view_button' @tap='goMaijia(list)'>联系卖家</view>
<view v-if="state === 3" style="color: #05C25C;border: 1px solid #05C25C;" class='view_button'
@tap='goconfirm(list)'>确认收货</view>
<view v-if="state === 3 && isExpress != 2" class='view_button' @tap='getWuLiu(list)'>查看物流</view>
<view v-if="state === 2" class='view_button' @tap='goRemind(list)'>提醒发货</view>
<view v-if="state === 2 && isRefund != 2 && isExpress != 2" class='view_button' @tap='gorefund(list)'>退款
</view>
<view v-if="state === 4" class='view_button' @tap='gopinglun(list)'>去评价</view>
<!-- <view v-if="state === 1" class='view_button' @tap='gocancle(list)'>取消订单</view> -->
<view v-if="state === 1" style="color: #05C25C;border: 1px solid #05C25C;" class='view_button'
@tap='goPay(list)'>去支付</view>
</view>
</view>
</view>
</template>
<script>
import simpleModal from '@/components/simple-pro/customModal.vue';
export default {
components: {
simpleModal
},
data() {
return {
adminShopName: '',
adminShopAddress: '',
adminShopPhone: '',
latitude: 0,
longitude: 0,
state: '-1',
isRefund: 0,
payWay: '',
id: 0,
refusedRefund: '',
expName: '',
refund: '',
isExpress: 0,
copyTklStatus: false,
refundCheck: false,
duihuanList: {},
list: {},
expList: []
}
},
onLoad(d) {
this.adminShopName = this.$queue.getData('adminShopName');
this.adminShopAddress = this.$queue.getData('adminShopAddress');
this.adminShopPhone = this.$queue.getData('adminShopPhone');
let adminShopJW = this.$queue.getData('adminShopJW');
if (adminShopJW) {
adminShopJW = adminShopJW.split(',');
if (adminShopJW.length > 0) {
this.longitude = adminShopJW[0];
this.latitude = adminShopJW[1];
}
}
if (d.id) {
this.id = d.id;
this.getListById(d.id);
}
},
methods: {
copy(num) {
uni.setClipboardData({
data: num,
success: r => {
this.$queue.showToast('复制成功');
}
});
},
// 一键导航
bindGps() {
uni.openLocation({
latitude: Number(this.latitude) - 0, //要去的纬度-地址
longitude: Number(this.longitude) - 0, //要去的经度-地址
name: this.adminShopName, //地址名称
address: this.adminShopAddress, //详细地址名称
success: function() {
console.log('导航成功');
},
fail: function(error) {
console.log(error)
}
});
},
// 拨打电话
bindphone(phone) {
let that = this
uni.showModal({
title: '提示',
content: '是否拨打电话',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定', phone);
uni.makePhoneCall({
phoneNumber: phone //仅为示例
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
gopinglun(item) {
uni.redirectTo({
url: '../my/pinglun?ordersId=' + item.id
});
},
goWeb() {
//#ifdef APP-PLUS
uni.navigateTo({
url: '/pages/member/webview?url=' + this.duihuanList.linkUrl
});
//#endif
//#ifdef H5
window.location.href = this.duihuanList.linkUrl
//#endif
},
getDuihuanma(id) {
this.$Request.getT('/app/selfGoodsVirtual/find?id=' + id).then(res => {
if (res.status === 0) {
this.duihuanList = res.data;
this.$refs.simpleModalTkl.show({
showConfirmButton: false
});
}
});
},
copyTklWenAns: function() {
uni.setClipboardData({
data: this.duihuanList.content,
success: r => {
this.$queue.showToast('复制成功')
this.copyTklStatus = true;
}
});
},
TklmaskClose: function(e) {
this.$refs.simpleModalTkl.hide();
this.copyTklStatus = false;
},
TklmaskShow: function(e) {
},
goRemind(item) {
this.$Request.getT('/app/orders/remind?ordersId=' + item.id).then(res => {
if (res.status === 0) {
this.$queue.showToast('已提醒商家及时发货,请注意查收');
} else {
this.$queue.showToast(res.msg);
}
});
},
goOrderDetail(id) {
uni.navigateTo({
url: '../index/commoditydetail?ordersId=' + id
});
},
gorefund(list) {
if (this.refundCheck) {
if (this.refund != undefined && this.refund != '') {} else {
uni.showToast({
icon: 'none',
title: '退款原因不能为空'
});
return;
}
uni.showModal({
title: '温馨提示',
content: '确定要取消订单并退款吗?',
showCancel: true,
cancelText: '取消',
confirmText: '确认',
success: res => {
if (res.confirm) {
this.$Request.getT('/app/orders/refund?ordersId=' + list.id + '&refund=' + this
.refund).then(res => {
if (res.status === 0) {
this.getListById(this.id);
} else {
this.$queue.showToast(res.msg);
}
});
}
}
});
} else {
this.refundCheck = true;
}
},
goMaijia(list) {
let kefu = this.$queue.getData('kefu'); // 用户端联系方式 1 手机号 2企业微信
let kefuPhone = this.$queue.getData('kefuPhone');
let userId = this.$queue.getData('userId');
if (userId) {
if (kefu == 1) {
uni.makePhoneCall({
phoneNumber: kefuPhone //仅为示例
});
} else {
// #ifdef MP-WEIXIN
let that = this
try {
wx.openCustomerServiceChat({
extInfo: {
url: that.$queue.getData('kefuUrl')
},
corpId: that.$queue.getData('kefuAppId'),
success(res) {},
fail(res) {
console.error(res)
}
})
} catch (error) {
console.error("catchcatch" + error)
uni.showToast({
title: '请更新至微信最新版本'
});
}
// #endif
// #ifndef MP-WEIXIN
let url = this.$queue.getData('kefuUrl');
if (url.indexOf('/pages/') !== -1 || url.indexOf('/my/') !== -1) {
uni.navigateTo({
url
});
} else {
//#ifndef H5
uni.navigateTo({
url: '/pages/index/webView?url=' + url
});
//#endif
//#ifdef H5
window.location.href = url;
//#endif
}
// #endif
}
} else {
uni.showModal({
title: '提示',
content: '您还未登录,请先登录',
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
uni.navigateTo({
url: '/pages/public/login'
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
}
},
getWuLiu(list) {
this.$queue.showLoading('查询中...');
this.$Request.getT('/app/orders/findExpress?expressNumber=' + list.expressNumber).then(res => {
if (res.status === 0) {
uni.hideLoading();
this.expList = [];
//快递公司名称
this.expName = res.data.result.expName;
if (res.data.result.list.length > 0) {
res.data.result.list.forEach(d => {
this.expList.push(d);
});
} else {
this.$queue.showToast("暂无货运信息");
}
} else {
uni.hideLoading();
this.$queue.showToast(res.msg);
}
});
// this.$Request.getT('/orders/findExpress?expressNumber=557031772301836').then(res => {
// if (res.status === 0) {
// let data = JSON.parse(res.data);
// this.expName = data.result.expName;
// this.expList = [];
// //快递公司名称
// if (data) {
// this.expList = data.result.list;
// console.log(JSON.stringify(this.expList))
// } else {
// this.$queue.showToast("暂无货运信息");
// }
// } else {
// this.$queue.showToast(res.msg);
// }
// });
},
gocancle(list) {
uni.showModal({
title: '温馨提示',
content: '确定要取消此订单吗?',
showCancel: true,
cancelText: '取消',
confirmText: '确认',
success: res => {
if (res.confirm) {
this.$Request.getT('/app/orders/cancel?id=' + list.id).then(res => {
if (res.status === 0) {
this.getListById(this.id);
} else {
this.$queue.showToast(res.msg);
}
});
}
}
});
},
goconfirm(list) {
uni.showModal({
title: '温馨提示',
content: '确定收到货物了吗?',
showCancel: true,
cancelText: '取消',
confirmText: '确认',
success: res => {
if (res.confirm) {
this.$Request.getT('/app/orders/confirm?id=' + list.id).then(res => {
if (res.status === 0) {
this.getListById(this.id);
} else {
this.$queue.showToast(res.msg);
}
});
}
}
});
},
goPay(list) {
this.$queue.setData('href', '/pages/my/orderdetail')
uni.redirectTo({
url: '../my/payment?money=' + list.payMoney + '&title=' + list.title + '&img=' + list.img +
'&id=' + list.id
});
},
deleteOder(id) {
uni.showModal({
title: '温馨提示',
content: '确定要删除此订单吗?',
showCancel: true,
cancelText: '取消',
confirmText: '确认',
success: res => {
if (res.confirm) {
this.$Request.getT('/app/orders/delete?id=' + id).then(res => {
if (res.status === 0) {
uni.navigateBack();
} else {
this.$queue.showToast(res.msg);
}
});
}
}
});
},
getListById(id) {
uni.showLoading({
title: '加载中...'
});
this.$Request.getT('/app/orders/find?id=' + id).then(res => {
if (res.status === 0) {
this.state = res.data.status;
if (res.data.status === 1) {
res.data.status = '待付款'
} else if (res.data.status === 2) {
res.data.status = '待发货'
} else if (res.data.status === 3) {
res.data.status = '已发货'
} else if (res.data.status === 4) {
res.data.status = '已收货'
} else if (res.data.status === 5) {
res.data.status = '已取消'
} else if (res.data.status === 6) {
res.data.status = '退款中'
} else if (res.data.status === 7) {
res.data.status = '已退款'
} else if (res.data.status === 8) {
res.data.status = '拒绝退款'
} else if (res.data.status === 10) {
res.data.status = '已评价'
}
if (res.data.mobile === '') {
res.data.consignee = '未填写地址信息';
res.data.mobile = '';
}
this.list = res.data;
this.isRefund = res.data.isRefund;
this.refusedRefund = res.data.refusedRefund;
this.isExpress = res.data.isExpress;
if (this.state === 6 || this.state === 7) {
this.refundCheck = true;
this.refund = res.data.refund;
}
if (res.data.payWay === 1 || res.data.payWay === 2 || res.data.payWay === 3) {
this.payWay = '微信';
} else if (res.data.payWay === 4 || res.data.payWay === 5) {
this.payWay = '支付宝';
} else if (res.data.payWay === 6) {
this.payWay = '零钱';
} else if (res.data.payWay === 7) {
this.payWay = '积分';
} else {
this.payWay = '待支付';
}
}
uni.hideLoading();
});
}
}
}
</script>
<style>
@import '../../../../static/css/index.css';
page {
background: #F2F2F2;
}
.view_button {
margin: 25upx 20upx 10upx 30upx;
line-height: 60upx;
font-size: 24upx;
color: #333333;
width: 150upx;
height: 60upx;
border-radius: 100upx;
border: 1upx solid #bababa;
}
.buy-box-center .buy-btn-copy {
background: linear-gradient(to left, #FF2638 0, #FF2638 100%);
display: block;
border-radius: 50px;
line-height: 40px;
height: 40px;
text-align: center;
color: #fff;
font-size: 16px;
margin-left: 20upx;
width: 580upx;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
}
</style>