mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-01 17:56:39 +08:00
467 lines
13 KiB
Vue
467 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<Myheader></Myheader>
|
|
<div class="rc-top"></div>
|
|
<tabs :crumbs="crumbs"></tabs>
|
|
<div class="online bold"></div>
|
|
<div class="usercontshow rc-max-width--xl">
|
|
<div class="rc-headera">
|
|
<span v-for="(item, index) in discountlist" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'">
|
|
{{ item.title }}
|
|
</span>
|
|
</div>
|
|
<div class="online bold" style="height:8px;margin-top:0"></div>
|
|
<div class="rc-userheader">
|
|
<span v-for="(item, index) in message" :key="index">{{ item.title }}</span>
|
|
</div>
|
|
|
|
<div class="rc-center" v-for="(item, index) in useralllist" :key="index">
|
|
<div class="rc-usermaina">
|
|
<div class="rc-title">
|
|
<div>
|
|
<i>订单编号:</i>
|
|
<span>{{ item.orderNumber }}</span>
|
|
</div>
|
|
<div class="rc-usertitle">
|
|
<strong>订单状态:</strong>
|
|
<em>
|
|
{{ item.status == '0' ? '待付款' : item.status == '1' ? '待收货' : item.status == '2' ? '已完成' : item.status == '3' ? '已取消' : '异常订单' }}
|
|
</em>
|
|
</div>
|
|
</div>
|
|
<div class="rc-usermain">
|
|
<div class="rc-image"><img :src="item.picFile" alt="" /></div>
|
|
<div class="rc-right" @click="usertiaozhuan(item)">
|
|
<div class="rc-usercenter">
|
|
<em>{{ item.productName }}</em>
|
|
<div class="rc-userright">
|
|
<span>规格:{{ item.specifications }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="rc-userbottom">
|
|
<span>数量:{{ item.pcs }}件</span>
|
|
<i>￥{{ item.ecPrice }}</i>
|
|
</div>
|
|
<div class="rc-userbottomm">
|
|
<i>￥{{ item.ecPrice }}</i>
|
|
<span>{{ item.pcs }}</span>
|
|
<i>￥{{ item.salesAmount }}</i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pc-bottom">
|
|
<span v-if="item.status != 1" @click="userpay(item, index)">
|
|
{{
|
|
item.status == '0'
|
|
? '取消订单'
|
|
: item.status == '1'
|
|
? '确认收货'
|
|
: item.status == '2'
|
|
? '再次购买'
|
|
: item.status == '3'
|
|
? '再次购买'
|
|
: '异常订单'
|
|
}}
|
|
</span>
|
|
<span @click="userfind(item)">
|
|
{{
|
|
item.status == '0'
|
|
? '立即支付'
|
|
: item.status == '1'
|
|
? '查看订单'
|
|
: item.status == '2'
|
|
? '查看订单'
|
|
: item.status == '3'
|
|
? '查看订单'
|
|
: '异常订单'
|
|
}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="online" style="display:none"></div>
|
|
<div class="rc-usermain rc-price">
|
|
<div class="rc-price priceleft">
|
|
<span>数量:</span>
|
|
<em>共{{ item.lengthnum }}件商品</em>
|
|
</div>
|
|
<div class="rc-price priceright">
|
|
<strong>总计:</strong>
|
|
<i>￥{{ item.salesAmount }}</i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rc-bottom">
|
|
<span @click="userpay(item, index)">
|
|
{{ item.status == '0' ? '取消订单' : item.status == '1' ? '确认收货' : item.status == '2' ? '再次购买' : item.status == '3' ? '再次购买' : '异常订单' }}
|
|
</span>
|
|
<span @click="userfind(item)">
|
|
{{ item.status == '0' ? '立即支付' : item.status == '1' ? '查看订单' : item.status == '2' ? '查看订单' : item.status == '3' ? '查看订单' : '异常订单' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="online bold"></div>
|
|
</div>
|
|
|
|
</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>
|
|
</el-dialog>
|
|
<MyFooter></MyFooter>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Myheader from '~/components/header.vue';
|
|
import MyFooter from '~/components/rc-footer.vue';
|
|
import tabs from '~/components/tabs.vue';
|
|
import util from '@/ajax/util';
|
|
import { customerorders, userindent, canceldanhao, repayOrde } from '../../ajax/getData';
|
|
import { mapMutations, mapState } from 'vuex';
|
|
export default {
|
|
data() {
|
|
return {
|
|
util,
|
|
paytypeWarning: { result: true, message: '' },
|
|
showPaytypeWarning: false,
|
|
crumbs: [
|
|
{
|
|
path: '/personal/mypersonal/'
|
|
},
|
|
{
|
|
path: '/personal/useraddress/'
|
|
}
|
|
],
|
|
activeIndex: 0,
|
|
userstype: '',
|
|
alllist: [],
|
|
obligation: [], //待付款
|
|
pending: [], //待发货
|
|
receiving: [], //待收货
|
|
allmessage: [],
|
|
useralllist: [],
|
|
usertitle: '',
|
|
useraliset: [],
|
|
// userdata: [],
|
|
buttontitle: '再次购买',
|
|
discountlist: [
|
|
{
|
|
title: '全部'
|
|
},
|
|
{
|
|
title: '待付款'
|
|
},
|
|
{
|
|
title: '待发货'
|
|
},
|
|
{
|
|
title: '待收货'
|
|
}
|
|
],
|
|
|
|
message: [
|
|
{
|
|
title: '商品'
|
|
},
|
|
{
|
|
title: '单价/元'
|
|
},
|
|
{
|
|
title: '数量'
|
|
},
|
|
{
|
|
title: '实付款/元'
|
|
},
|
|
{
|
|
title: '操作'
|
|
}
|
|
],
|
|
|
|
goldmedal: [
|
|
{
|
|
ordernumber: '',
|
|
orderstype: 1,
|
|
usereat: '',
|
|
ordernum: 0,
|
|
num: '',
|
|
specification: '',
|
|
buttontitle: '',
|
|
userprice: '',
|
|
catimage: ''
|
|
}
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
userInfo: state => state.user.userInfo,
|
|
userdata: state => state.user.userInfo.mobile,
|
|
loginState: state => state.login.loginState
|
|
})
|
|
},
|
|
watch: {
|
|
userInfo(newVal) {
|
|
this.resetData();
|
|
}
|
|
},
|
|
mounted() {
|
|
// this.checkIsLogin();
|
|
|
|
this.userstype = this.$route.query.stype;
|
|
this.resetData();
|
|
// this.userdata = user.data.mobile;
|
|
},
|
|
components: {
|
|
Myheader,
|
|
MyFooter,
|
|
tabs
|
|
},
|
|
methods: {
|
|
...mapMutations(['changemessage', 'checkIsLogin']),
|
|
async indet(mobile, stype) {
|
|
let data = await userindent(mobile, undefined, 1, 100);
|
|
this.activeIndex = stype;
|
|
this.goldmedal = data;
|
|
this.alllist = [];
|
|
this.allmessage = [];
|
|
this.useralllist = [];
|
|
this.obligation = [];
|
|
this.receiving = [];
|
|
this.pending = [];
|
|
for (let i = 0; i < this.goldmedal.length; i++) {
|
|
if (!this.goldmedal[i].orderDetailList.length) continue;
|
|
this.useralllist.push(this.goldmedal[i].orderDetailList[0]);
|
|
this.alllist.push(this.goldmedal[i].orderDetailList[0]);
|
|
this.allmessage.push(this.goldmedal[i].orderDetailList[0]);
|
|
if (this.goldmedal[i].status == 0) {
|
|
this.obligation.push(this.goldmedal[i].orderDetailList[0]);
|
|
} else if (this.goldmedal[i].status == 1) {
|
|
this.receiving.push(this.goldmedal[i].orderDetailList[0]);
|
|
} else if (this.goldmedal[i].status == 2) {
|
|
this.pending.push(this.goldmedal[i].orderDetailList[0]);
|
|
}
|
|
}
|
|
for (let y = 0; y < this.goldmedal.length; y++) {
|
|
if (!this.useralllist[y]) {
|
|
this.useralllist[y] = {};
|
|
}
|
|
if (!this.goldmedal[y].orderDetailList) continue;
|
|
this.useralllist[y].orderNumber = this.goldmedal[y].orderNumber;
|
|
this.useralllist[y].status = this.goldmedal[y].status;
|
|
this.useralllist[y].addressUserName = this.goldmedal[y].addressUserName;
|
|
this.useralllist[y].phoneNumber = this.goldmedal[y].addressPhoneNumber;
|
|
this.useralllist[y].salesAmount = this.goldmedal[y].salesAmount;
|
|
this.useralllist[y].lengthnum = this.goldmedal[y].orderDetailList.length;
|
|
this.useralllist[y].paytype = this.goldmedal[y].paytype;
|
|
}
|
|
|
|
if (this.userstype == 1) {
|
|
this.useralllist = this.obligation;
|
|
} else if (this.userstype == 2) {
|
|
this.useralllist = this.pending;
|
|
} else if (this.userstype == 0) {
|
|
this.useralllist = this.allmessage;
|
|
} else if (this.userstype == 3) {
|
|
this.useralllist = this.receiving;
|
|
}
|
|
/* 过滤空的数据 */
|
|
let filterArr = this.useralllist.filter(val=>{
|
|
return val != undefined;
|
|
});
|
|
this.useralllist = filterArr;
|
|
},
|
|
//订单立即支付
|
|
async getwei(item) {
|
|
let payType = this.util.pickPaytype();
|
|
let data = await this.repayOrde(item.orderNumber, payType);
|
|
if (data.code == 1) {
|
|
let userPayData = {
|
|
userprice: item.salesAmount,
|
|
orderId: item.orderNumber,
|
|
userinformation: item.addressUserName + ' ' + item.phoneNumber,
|
|
wxPay: data.msg
|
|
};
|
|
this.$router.push({
|
|
path: '/personal/userpay',
|
|
query: {
|
|
userData: item.orderNumber,
|
|
stype: 1,
|
|
userPayData: JSON.stringify(userPayData)
|
|
}
|
|
});
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: '订单数据错误，请联系客服进行处理'
|
|
});
|
|
}
|
|
},
|
|
async repayOrde(ordernumber) {
|
|
let payType = this.util.pickPaytype();
|
|
let res = await repayOrde(ordernumber, payType);
|
|
if (res) {
|
|
return res;
|
|
}
|
|
},
|
|
usertiaozhuan(item) {
|
|
this.$router.push({
|
|
path: '/myorder/usertion',
|
|
query: {
|
|
stype: item.status,
|
|
orderNumber: item.orderNumber
|
|
}
|
|
});
|
|
},
|
|
|
|
async canceldanhao(orderNumber) {
|
|
let data = await canceldanhao(this.userdata, orderNumber);
|
|
if (data) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: '取消订单成功'
|
|
});
|
|
/* 这个在全部变量去除的时候 记得加 */
|
|
// setTimeout(() => {
|
|
// this.indet(this.userdata);
|
|
// this.activeIndex=0;
|
|
// this.useralllist=[];
|
|
// console.log('2222');
|
|
// }, 500);
|
|
}
|
|
},
|
|
|
|
userpay(item, index) {
|
|
if (item.status == 0) {
|
|
if (confirm('确认取消该订单嘛？')) {
|
|
this.canceldanhao(item.orderNumber);
|
|
setTimeout(() => {
|
|
this.indet(this.userdata);
|
|
this.useralllist = [];
|
|
this.alllist = [];
|
|
this.allmessage = [];
|
|
this.obligation = [];
|
|
this.receiving = [];
|
|
this.pending = [];
|
|
}, 500);
|
|
}
|
|
} else if (item.status == 1) {
|
|
//确认收货
|
|
}
|
|
|
|
if (item.buttontitle == '立即支付') {
|
|
this.$router.push({
|
|
path: '/personal/userpay',
|
|
query: {
|
|
stype: 1
|
|
}
|
|
});
|
|
} else if (item.status == 3) {
|
|
this.$router.push({
|
|
path: '/productdetails/producted',
|
|
query: {
|
|
stype: 1,
|
|
productCode: item.productId
|
|
}
|
|
});
|
|
}
|
|
},
|
|
selectGoods(item, index) {
|
|
let list = [];
|
|
this.activeIndex = index;
|
|
if (item.title == '待付款') {
|
|
list = this.obligation;
|
|
} else if (item.title == '待收货') {
|
|
list = this.receiving;
|
|
} else if (item.title == '待发货') {
|
|
this.useralllist = this.pending;
|
|
list = this.pending;
|
|
} else if (item.title == '全部') {
|
|
list = this.alllist;
|
|
}
|
|
this.useralllist = [];
|
|
for (var i = 0; i < this.useralllist.length; i++) {
|
|
this.useralllist[i].orderNumber = this.goldmedal[i].orderNumber;
|
|
this.useralllist[i].status = this.goldmedal[i].status;
|
|
this.useralllist[i].addressUserName = this.goldmedal[i].addressUserName;
|
|
this.useralllist[i].phoneNumber = this.goldmedal[i].phoneNumber;
|
|
this.useralllist[i].salesAmount = this.goldmedal[i].salesAmount;
|
|
this.useralllist[i].lengthnum = this.goldmedal[i].orderDetailList.length;
|
|
}
|
|
console.log(list);
|
|
|
|
this.useralllist = list.filter(val=>{
|
|
return val != undefined;
|
|
});;
|
|
},
|
|
userfind(item) {
|
|
this.paytypeWarning = this.util.checkPaytypeValidated(item.paytype);
|
|
this.showPaytypeWarning = !this.paytypeWarning.result;
|
|
let user = this.userInfo;
|
|
if (this.paytypeWarning.result) {
|
|
if (item.status == 0) {
|
|
_hmt.push([
|
|
'_trackCustomEvent',
|
|
'order_repay',
|
|
{
|
|
status: 'success',
|
|
member_id: user.id
|
|
}
|
|
]);
|
|
this.getwei(item);
|
|
} else {
|
|
this.$router.push({
|
|
path: '/myorder/usertion',
|
|
query: {
|
|
stype: item.status,
|
|
orderNumber: item.orderNumber
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
_hmt.push([
|
|
'_trackCustomEvent',
|
|
'order_repay',
|
|
{
|
|
status: 'fail',
|
|
member_id: user.id
|
|
}
|
|
]);
|
|
}
|
|
},
|
|
usertwo() {
|
|
this.$router.push({
|
|
path: '/myorder/userrecord',
|
|
query: {
|
|
stype: 1
|
|
}
|
|
});
|
|
},
|
|
/* 页面初始化设置数据 */
|
|
resetData() {
|
|
let stype = this.$route.query.stype;
|
|
if (this.userInfo && this.loginState) {
|
|
this.indet(this.userdata, stype);
|
|
} else {
|
|
if (!this.loginState) {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: '请先去登录'
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import url('../../assets/css/orderquantity.less');
|
|
</style>
|