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

627 lines
21 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>
<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: 10upx;">
<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 v-if="list.price*list.number-list.payMoney>0"
style="font-size: 26upx;color: #333333;padding: 0 0 10upx 20upx;width: 50%;text-align: right;">
优惠: ¥{{(list.price*list.number-list.payMoney).toFixed(2)}}</view>
</view>
<view style="display: flex;height: 50upx;margin-top: 10upx;">
<view
style="font-size: 26upx;color: #333333;padding: 0 0 10upx 20upx;width: 100%;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>