mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-02 02:06:38 +08:00
067d2e4b73
1.修改购物车数量超出或者乱输入的问题 2.修改领取优惠券报错问题 3.修改订单页面订单列表数据错乱问题 4.修复真机手机模式的购买页面样式对齐和二维码对齐 5.修改支付二维码接口错误问题 6.修复苹果端立即购买按钮没反应问题
607 lines
18 KiB
Vue
607 lines
18 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" v-for="(pro,pindex) in item.orderDetailList" :key="pindex">
|
|
<div class="rc-image"><img :src="pro.picFile" alt="" /></div>
|
|
<div class="rc-right" @click="usertiaozhuan(item)">
|
|
<div class="rc-usercenter">
|
|
<em>{{ pro.productName }}</em>
|
|
<div class="rc-userright">
|
|
<span>规格:{{ pro.specifications }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="rc-userbottom">
|
|
<span>数量:{{ pro.pcs }}件</span>
|
|
<i>￥{{ pro.ecPrice }}</i>
|
|
</div>
|
|
|
|
<div class="rc-userbottomm">
|
|
<i>￥{{ pro.ecPrice }}</i>
|
|
<span>{{ pro.pcs }}</span>
|
|
<i>￥{{ item.salesAmount }}</i>
|
|
</div>
|
|
</div>
|
|
<div class="pc-bottom">
|
|
<template v-if="pindex == item.orderDetailList.length -1">
|
|
<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>
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="online" style="display:none"></div>
|
|
<div class="rc-usermain rc-price">
|
|
<div class="rc-price priceleft">
|
|
<span>数量:</span>
|
|
<em>共{{ item.orderDetailList.length }}件商品</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 class="qrcode rc-center" v-show="qrtext"><vue-qr :text="qrtext" :size="200"></vue-qr></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, generateOrderWX,getOrderQrCode } from '../../ajax/getData';
|
|
import { mapMutations, mapState } from 'vuex';
|
|
import vueQr from 'vue-qr';
|
|
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: ''
|
|
}
|
|
],
|
|
qrtext : '', //二维码内容
|
|
};
|
|
},
|
|
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 || 0;
|
|
this.resetData();
|
|
// this.userdata = user.data.mobile;
|
|
},
|
|
components: {
|
|
Myheader,
|
|
MyFooter,
|
|
tabs,
|
|
vueQr
|
|
},
|
|
methods: {
|
|
...mapMutations(['changemessage', 'checkIsLogin']),
|
|
async indet(mobile, stype) {
|
|
let data = await userindent(mobile, undefined, 1, 100);
|
|
this.activeIndex = stype || 0;
|
|
this.goldmedal = data;
|
|
this.alllist = [];
|
|
this.allmessage = [];
|
|
this.useralllist = [];
|
|
this.obligation = []; //待付款
|
|
this.receiving = []; //待发货
|
|
this.pending = []; //已完成
|
|
// console.log(data,'22');
|
|
// this.goldmedal = data.filter(val=> val.orderDetailList.length);
|
|
let filterData = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
let item = data[i];
|
|
if(!item.orderDetailList.length){
|
|
continue;
|
|
}
|
|
let orderDetail = item.orderDetailList[0];
|
|
item.payInfo = [
|
|
{
|
|
basePoint: item.basePoint,
|
|
productName: orderDetail.productName,
|
|
buyCount: 1,
|
|
productCode: orderDetail.productCode,
|
|
payAmount: orderDetail.salesAmount,
|
|
memberId: this.userInfo.id,
|
|
phoneNumber: item.phoneNumber,
|
|
orderAddress: {
|
|
addressPhoneNumber: item.addressPhoneNumber,
|
|
addressUserName: item.addressUserName,
|
|
addressProvinceName: item.addressProvinceName,
|
|
addressCityName: item.addressCityName,
|
|
addressCountyName:item.addressCountyName,
|
|
addressDetailInfo: item.addressDetailInfo,
|
|
}
|
|
}
|
|
]
|
|
filterData.push(item);
|
|
|
|
}
|
|
this.goldmedal = filterData;
|
|
this.filterCurrentData();
|
|
// 0:待付款,1:待收货,2:已完成,3:已取消,4:异常订单
|
|
return false;
|
|
// 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;
|
|
|
|
// // let item = {
|
|
// // ...this.useralllist[y],
|
|
// // ...this.goldmedal[y],
|
|
// // phoneNumber : this.goldmedal[y].addressPhoneNumber,
|
|
// // lengthnum : this.goldmedal[y].orderDetailList.length
|
|
// // }
|
|
// // this.useralllist[y] = item;
|
|
// 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].paytype = this.goldmedal[y].paytype;
|
|
// this.useralllist[y].salesAmount = this.goldmedal[y].salesAmount;
|
|
// this.useralllist[y].lengthnum = this.goldmedal[y].orderDetailList.length;
|
|
// let item = this.goldmedal[y];
|
|
// let orderDetail = item.orderDetailList[0];
|
|
// if(orderDetail){
|
|
// this.useralllist[y].payInfo = [
|
|
// {
|
|
// basePoint: item.basePoint,
|
|
// productName: orderDetail.productName,
|
|
// buyCount: orderDetail.pcs,
|
|
// productCode: orderDetail.productCode,
|
|
// payAmount: orderDetail.ecPrice,
|
|
// memberId: this.userInfo.id,
|
|
// phoneNumber: item.phoneNumber,
|
|
// orderAddress: {
|
|
// addressPhoneNumber: item.addressPhoneNumber,
|
|
// addressUserName: item.addressUserName,
|
|
// addressProvinceName: item.addressProvinceName,
|
|
// addressCityName: item.addressCityName,
|
|
// addressCountyName:item.addressCountyName,
|
|
// addressDetailInfo: item.addressDetailInfo,
|
|
// }
|
|
// }
|
|
// ]
|
|
// }
|
|
// }
|
|
|
|
// 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 filterCurrentData(){
|
|
/* 根据切换 过滤对应的数据显示 */
|
|
let filterArr = this.goldmedal.filter(val=>{
|
|
if(this.activeIndex == 0){
|
|
return val.status >= 0;
|
|
}else{
|
|
return val.status == this.activeIndex - 1;
|
|
}
|
|
});
|
|
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;
|
|
this.filterCurrentData();
|
|
// 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;
|
|
// let item = this.goldmedal[i];
|
|
// let orderDetail = item.orderDetailList[0];
|
|
// this.useralllist[y].payInfo = [
|
|
// {
|
|
// basePoint: item.basePoint,
|
|
// productName: orderDetail.productName,
|
|
// buyCount: orderDetail.pcs,
|
|
// productCode: orderDetail.productCode,
|
|
// payAmount: orderDetail.ecPrice,
|
|
// memberId: this.userInfo.id,
|
|
// phoneNumber: item.phoneNumber,
|
|
// orderAddress: {
|
|
// addressPhoneNumber: item.addressPhoneNumber,
|
|
// addressUserName: item.addressUserName,
|
|
// addressProvinceName: item.addressProvinceName,
|
|
// addressCityName: item.addressCityName,
|
|
// addressCountyName:item.addressCountyName,
|
|
// addressDetailInfo: item.addressDetailInfo,
|
|
// }
|
|
// }
|
|
// ]
|
|
|
|
|
|
// }
|
|
// this.useralllist = list.filter(val => {
|
|
// return val != undefined;
|
|
// });
|
|
},
|
|
async userfind(item) {
|
|
// let params = [
|
|
// {
|
|
// basePoint: 0,
|
|
// productName: '幼猫全价粮',
|
|
// buyCount: 1,
|
|
// productCode: '2003004003',
|
|
// payAmount: 90,
|
|
// memberId: 886750,
|
|
// phoneNumber: '15766132405',
|
|
// orderAddress: {
|
|
// addressPhoneNumber: '15766132404',
|
|
// addressUserName: '测试',
|
|
// addressProvinceName: '安徽省',
|
|
// addressCityName: '蚌埠市',
|
|
// addressCountyName: '怀远县',
|
|
// addressDetailInfo: '12123134444'
|
|
// }
|
|
// }
|
|
// ];
|
|
// console.log(item,'222');
|
|
// return false;
|
|
|
|
|
|
// return false;
|
|
this.paytypeWarning = this.util.checkPaytypeValidated(item.paytype);
|
|
this.showPaytypeWarning = !this.paytypeWarning.result;
|
|
this.qrtext = '';
|
|
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 {
|
|
if(item.payInfo && this.paytypeWarning.paytype != 0){
|
|
// console.log(item);
|
|
// ;
|
|
let { msg } = await getOrderQrCode({
|
|
orderNo : item.orderNumber
|
|
}, '1');
|
|
// let { msg } = await generateOrderWX(item.payInfo,1);
|
|
this.qrtext = msg;
|
|
};
|
|
_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>
|