mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-01 17:56:39 +08:00
473 lines
14 KiB
Vue
473 lines
14 KiB
Vue
<template>
|
|
<div class="user-main">
|
|
<Myheader></Myheader>
|
|
<div class="rc-top"></div>
|
|
<tabs :crumbs="crumbs"></tabs>
|
|
<!-- <div class="online bold notop"></div> -->
|
|
<!-- <div class="rc-top"></div> -->
|
|
<div class="rc-max-width--xl rc-main" v-for="(item, index) in goldmedal" :key="item.id">
|
|
<div class="online bold notop"></div>
|
|
<div class="rc-receiving useruantity">
|
|
<em>{{ item.status == '0' ? '待付款' : item.status == '1' ? '待收货' : item.status == '2' ? '已完成' : item.status == '3' ? '已取消' : '异常订单' }}</em>
|
|
<span>{{ orderstatus }}</span>
|
|
</div>
|
|
<div class="online bold"></div>
|
|
<div class="delivery useruantity" v-if="isshow">
|
|
<div class="to-delivery">
|
|
<img src="../../static/images/delivery.png" alt="" />
|
|
<span>{{ trackingstates }}</span>
|
|
<!-- <i>2021-1-21</i> -->
|
|
</div>
|
|
<div class="bo-delivery">
|
|
<!-- <span> 广州天河—刘某某【15124617917】正在派送中</span> -->
|
|
<!-- {{ logisticsCompany }} -->
|
|
</div>
|
|
<div class="viewdetails">
|
|
<span>查看详情</span>
|
|
<img :src="leftico" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="online bold" v-if="isshow"></div>
|
|
<div class="mypersonal useruantity">
|
|
<div class="my-delivery">
|
|
<span>{{ item.addressUserName }}</span>
|
|
<i>{{ item.addressPhoneNumber }}</i>
|
|
</div>
|
|
<div class="per-delivery">
|
|
<span>{{ item.addressProvinceName }}{{ item.addressCityName }}{{ item.addressCountyName }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="online bold"></div>
|
|
<div>
|
|
<div class="rc-center">
|
|
<div class="rc-usermain useruantity" v-for="(userlist, index) in item.orderDetailList" :key="index">
|
|
<div class="rc-image"><img :src="userlist.picFile" alt="" /></div>
|
|
<div class="rc-right">
|
|
<div class="rc-usercenter">
|
|
<em>{{ userlist.productName }}</em>
|
|
<div class="rc-userright">
|
|
<span>规格:{{ userlist.specifications }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="rc-userbottom">
|
|
<span>数量:{{ userlist.pcs }}件</span>
|
|
<i>￥{{ userlist.ecPrice }}</i>
|
|
</div>
|
|
<!-- <div class="rc-userbottomm">
|
|
<i>￥{{ item.userprice }}</i>
|
|
<span>{{ item.orderstype }}</span>
|
|
<i>￥{{ item.userprice }}</i>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="online bold"></div>
|
|
</div>
|
|
<div class="rc-merchandise ">
|
|
<div class="rc-merchandise ">
|
|
<ul>
|
|
<li>
|
|
<span>商品总价:</span>
|
|
<i>￥{{ item.salesAmount }}</i>
|
|
</li>
|
|
<li>
|
|
<span>配送费用:</span>
|
|
<i>{{ shopprice.distribution }}</i>
|
|
</li>
|
|
<li>
|
|
<span>活动促销:</span>
|
|
<i>{{ shopprice.promotion }}</i>
|
|
</li>
|
|
<li>
|
|
<span>实际付款:</span>
|
|
<i>{{ shopprice.payment }}</i>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="online bold "></div>
|
|
<div class="rc-payment">
|
|
<div class="rc-payment">
|
|
<ul>
|
|
<li>
|
|
<span>订单编号:</span>
|
|
<i>{{ item.orderNumber }}</i>
|
|
</li>
|
|
<li>
|
|
<span>下单时间:</span>
|
|
<i>{{ logisticsDate }}</i>
|
|
</li>
|
|
<li>
|
|
<span>付款方式:</span>
|
|
<i>{{ information.paytypeText }}</i>
|
|
</li>
|
|
<li>
|
|
<span>配送方式:</span>
|
|
<i>{{ information.distribution }}</i>
|
|
</li>
|
|
<li>
|
|
<span>快递单号:</span>
|
|
<div class="u-trackingnumber">
|
|
<i>{{ logisticsNumber }}</i>
|
|
<!-- <img :src="information.catimage" alt=""> -->
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="rc-foot">
|
|
<div class="rc-foo">
|
|
<div class="online bold "></div>
|
|
<div style="">
|
|
<i>合计金额:</i>
|
|
<em>￥{{ usersalesAmount }}</em>
|
|
</div>
|
|
<div class="rc-md-up ts-button-container rc-padding-y--md">
|
|
<span class="ts-standard-btn ts-standard-btn--two" @click="userpay(item)">{{ customer }}</span>
|
|
<span class="ts-standard-btn" @click="onceagain(item)">{{ payorsucess }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rc-full-width rc-md-down ts-button-container rc-padding-y--md rc-margin-top--md">
|
|
<span class="ts-standard-btn ts-standard-btn--two" @click="userpay(item)">{{ customer }}</span>
|
|
<i class="ts-standard-btn" @click="onceagain()">{{ payorsucess }}</i>
|
|
</div>
|
|
|
|
<el-dialog :visible.sync="showPaytypeWarning" :close-on-click-modal="false">
|
|
<div class="ts-warning-popup">
|
|
<div class="title rc-full-width"><img src="../../assets/error.png" alt="" /></div>
|
|
<div class="content rc-full-width rc-text--center rc-margin-y--md">
|
|
<h3>温馨提示</h3>
|
|
<span class="">{{ paytypeWarning.message }}</span>
|
|
</div>
|
|
<div class="qrcode rc-center"><vue-qr :text="qrtext" :size="200"></vue-qr></div>
|
|
</div>
|
|
</el-dialog>
|
|
<MyFooter></MyFooter>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Myheader from '~/components/header.vue';
|
|
import tabs from '@/components/tabs.vue';
|
|
import { mapMutations, mapState } from 'vuex';
|
|
import MyFooter from '~/components/rc-footer.vue';
|
|
import Vue from 'vue';
|
|
let vm = new Vue();
|
|
import formatConversion from '../../static/js/date';
|
|
import { userin, selectaddress, canceldanhao, generateOrderWX, repayOrde } from '../../ajax/getData';
|
|
import vueQr from 'vue-qr';
|
|
import util from '@/ajax/util';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
util,
|
|
paytypeWarning: { result: true, message: '' },
|
|
showPaytypeWarning: false,
|
|
goldmedal: [],
|
|
userproductId: '',
|
|
logisticsDate: '',
|
|
addressPhoneNumber: '',
|
|
qrtext: '', //支付二维码内容
|
|
logisticsNumber: '',
|
|
customer: '', //联系客服或者取消订单
|
|
payorsucess: '', //立即支付或者再次购买，
|
|
addressUserName: '',
|
|
logisticsCompany: '', //物流公司
|
|
orderstatus: '',
|
|
goldastates: '',
|
|
|
|
userisdelivery: '待收货',
|
|
userdelivery: '派送中',
|
|
isshow: true,
|
|
usersalesAmount: '',
|
|
leftico: require('../../assets/image/rc-left.png'),
|
|
orderNumber: '',
|
|
// userdata: '',
|
|
// usermessage: null,
|
|
// userid: null,
|
|
// userphone: '',
|
|
trackingstates: '', //运输状态
|
|
useralllist: [],
|
|
delivery: [],
|
|
|
|
useraddress: [],
|
|
shopprice: {},
|
|
information: {
|
|
paytypeText: '',
|
|
distribution: '快递',
|
|
catimage: require('../../assets/image/rc-left.png')
|
|
},
|
|
crumbs: [
|
|
{
|
|
path: '/personal/useraddress'
|
|
},
|
|
{
|
|
title: '订单详情'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
...mapMutations(['checkIsLogin']),
|
|
refreshDesktopNav: function() {
|
|
RCDL.navigation.currentState = null;
|
|
RCDL.navigation.rebuild();
|
|
},
|
|
//取消订单
|
|
async canceldanhao(orderNumber) {
|
|
let data = await canceldanhao(this.userphone, this.orderNumber);
|
|
if (data) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: '取消订单成功'
|
|
});
|
|
setTimeout(() => {
|
|
this.$router.push({
|
|
path: '/personal/useraddress',
|
|
query: {
|
|
stype: 1
|
|
}
|
|
});
|
|
}, 500);
|
|
}
|
|
},
|
|
userpay() {
|
|
if (this.goldastates == 0) {
|
|
if (confirm('确认要取消该订单嘛？')) {
|
|
this.canceldanhao();
|
|
}
|
|
} else if ((this.customer = '联系客服申请售后')) {
|
|
var option = {
|
|
customer: {
|
|
id: '',
|
|
name: '',
|
|
email: '',
|
|
mobile: '',
|
|
memberId: this.userdata.id
|
|
}
|
|
};
|
|
dis_livchat(option);
|
|
}
|
|
},
|
|
//订单支付和再次购买
|
|
async onceagain(item) {
|
|
console.log(item);
|
|
let orderDetail = item.orderDetailList[0];
|
|
let { msg } = await generateOrderWX(
|
|
[
|
|
{
|
|
basePoint: item.basePoint,
|
|
productName: orderDetail.productName,
|
|
buyCount: orderDetail.pcs,
|
|
productCode: orderDetail.productCode,
|
|
payAmount: orderDetail.ecPrice,
|
|
memberId: this.userdata.id,
|
|
phoneNumber: item.phoneNumber,
|
|
orderAddress: {
|
|
addressPhoneNumber: item.addressPhoneNumber,
|
|
addressUserName: item.addressUserName,
|
|
addressProvinceName: item.addressProvinceName,
|
|
addressCityName: item.addressCityName,
|
|
addressCountyName: item.addressCountyName,
|
|
addressDetailInfo: item.addressDetailInfo
|
|
}
|
|
}
|
|
],
|
|
1
|
|
);
|
|
|
|
this.qrtext = msg;
|
|
|
|
this.paytypeWarning = this.util.checkPaytypeValidated(this.paytype);
|
|
this.showPaytypeWarning = !this.paytypeWarning.result;
|
|
if (this.paytypeWarning.result) {
|
|
if (this.payorsucess == '立即支付') {
|
|
this.getwei(item);
|
|
} else {
|
|
_hmt.push([
|
|
'_trackCustomEvent',
|
|
'order_repay',
|
|
{
|
|
status: 'fail'
|
|
}
|
|
]);
|
|
this.$router.push({
|
|
path: '/productdetails/producted',
|
|
query: {
|
|
stype: 1,
|
|
productCode: this.userproductId
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
async orderquantity(orderNumber) {
|
|
let data = await userin(orderNumber);
|
|
if (data) {
|
|
this.goldmedal = data;
|
|
for (let i = 0; i < this.goldmedal.length; i++) {
|
|
this.goldastates = this.goldmedal[i].status;
|
|
this.userproductId = this.goldmedal[i].orderDetailList[0].productId;
|
|
this.logisticsNumber = this.goldmedal[i].orderDetailList[0].logisticsNumber; //物流单号
|
|
this.trackingstates = this.goldmedal[i].orderDetailList[0].status; //运输状态
|
|
if (this.trackingstates == 0) {
|
|
this.trackingstates = '运输中';
|
|
} else if (this.trackingstates == 1) {
|
|
this.trackingstates = '已签收';
|
|
} else if (this.trackingstates == 2) {
|
|
this.trackingstates = '未发货';
|
|
}
|
|
this.logisticsDate = this.formatConversion(this.goldmedal[i].orderDate); //时间戳
|
|
this.logisticsCompany = this.goldmedal[i].orderDetailList[0].logisticsCompany; //物流公司
|
|
this.orderNumber = this.goldmedal[i].orderNumber;
|
|
this.usersalesAmount = this.goldmedal[i].salesAmount;
|
|
this.addressUserName = this.goldmedal[i].addressUserName;
|
|
this.addressPhoneNumber = this.goldmedal[i].addressPhoneNumber;
|
|
this.paytype = this.goldmedal[i].paytype;
|
|
this.information.paytypeText = this.util.getTextByPaytype(this.paytype);
|
|
this.updateButtonByOrderStatus(this.goldmedal[i].status);
|
|
}
|
|
}
|
|
},
|
|
//订单立即支付
|
|
async getwei(user) {
|
|
let data = await this.repayOrde(this.orderNumber);
|
|
let loginedUser = this.$store.state.userInfo;
|
|
if (data.code == 1) {
|
|
let userPayData = {
|
|
userprice: this.usersalesAmount,
|
|
orderId: this.orderNumber,
|
|
userinformation: this.addressUserName + ' ' + this.addressPhoneNumber,
|
|
wxPay: data.msg
|
|
};
|
|
_hmt.push([
|
|
'_trackCustomEvent',
|
|
'order_repay',
|
|
{
|
|
status: 'success',
|
|
member_id: loginedUser.data.id
|
|
}
|
|
]);
|
|
this.$router.push({
|
|
path: '/personal/userpay',
|
|
query: {
|
|
userData: this.orderNumber,
|
|
stype: 1,
|
|
userPayData: JSON.stringify(userPayData)
|
|
}
|
|
});
|
|
} else {
|
|
_hmt.push([
|
|
'_trackCustomEvent',
|
|
'order_repay',
|
|
{
|
|
status: 'fail - ' + this.orderNumber,
|
|
member_id: loginedUser.data.id
|
|
}
|
|
]);
|
|
this.$message({
|
|
type: 'error',
|
|
message: '订单数据错误，请联系客服进行处理'
|
|
});
|
|
}
|
|
},
|
|
async repayOrde(ordernumber) {
|
|
let payType = this.util.pickPaytype();
|
|
let res = await repayOrde(ordernumber, payType);
|
|
if (res) {
|
|
return res;
|
|
}
|
|
},
|
|
async editaddress(user) {
|
|
// user.data.id=844350;
|
|
let data = await selectaddress(this.userid);
|
|
let list = [];
|
|
this.useraddress = data.data;
|
|
for (let i = 0; i < this.useraddress.length; i++) {
|
|
if (this.useraddress[i].isDefault == true) {
|
|
list.push(this.useraddress[i]);
|
|
}
|
|
}
|
|
this.useraddress = list;
|
|
console.log(this.useraddress[0].recipient);
|
|
|
|
// console.log(this.list);
|
|
},
|
|
updateButtonByOrderStatus(status) {
|
|
if (status == 2) {
|
|
this.orderstatus = '您的订单已完成';
|
|
this.isshow = false;
|
|
this.userisdelivery = '待发货';
|
|
this.customer = '联系客服申请售后';
|
|
this.payorsucess = '再次购买';
|
|
} else if (status == 0) {
|
|
this.orderstatus = '您的订单还未付款，请尽快付款！';
|
|
this.isshow = false;
|
|
this.userisdelivery = '待付款';
|
|
this.customer = '取消订单';
|
|
this.payorsucess = '立即支付';
|
|
} else if (status == 1) {
|
|
this.orderstatus = '您的订单已发出，请耐心等候。';
|
|
this.isshow = true;
|
|
this.userisdelivery = '待收货';
|
|
this.customer = '联系客服申请售后';
|
|
this.payorsucess = '再次购买';
|
|
} else if (status == 3) {
|
|
this.orderstatus = '您的订单已取消！';
|
|
this.isshow = false;
|
|
this.userisdelivery = '已取消';
|
|
this.customer = '联系客服申请售后';
|
|
this.payorsucess = '再次购买';
|
|
}
|
|
},
|
|
resetData() {
|
|
if (this.userdata && this.loginState) {
|
|
this.editaddress(this.userid);
|
|
this.orderNumber = this.$route.query.orderNumber;
|
|
this.orderquantity(this.orderNumber);
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.resetData();
|
|
return false;
|
|
// this.checkIsLogin();
|
|
// this.userdata = this.$store.state.userInfo;
|
|
// this.usermessage = JSON.parse(localStorage.getItem('userInfo'));
|
|
// this.userid = this.usermessage.data.id;
|
|
// this.userphone = this.usermessage.data.mobile;
|
|
// this.editaddress(this.userid);
|
|
// this.orderNumber = this.$route.query.orderNumber;
|
|
// this.orderquantity(this.orderNumber);
|
|
},
|
|
components: {
|
|
Myheader,
|
|
MyFooter,
|
|
tabs,
|
|
vueQr
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
userdata: state => state.user.userInfo,
|
|
usermessage: state => state.user.userInfo,
|
|
userid: state => state.user.userInfo.id,
|
|
userphone: state => state.user.userInfo.mobile,
|
|
loginState: state => state.login.loginState
|
|
})
|
|
},
|
|
watch: {
|
|
userdata() {
|
|
this.resetData();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import url('../../assets/css/usertion.less');
|
|
</style>
|