mirror of
https://gitee.com/lab1024/smart-admin.git
synced 2025-10-01 17:56:39 +08:00
444 lines
13 KiB
Vue
444 lines
13 KiB
Vue
<template>
|
|
<div class="user-main">
|
|
<Myheader></Myheader>
|
|
<div class="rc-top"></div>
|
|
<div class="rc-main" v-for="(item, index) in goldmedal" :key="item.id">
|
|
<div class="online bold">
|
|
</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="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 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>
|
|
</el-dialog>
|
|
<MyFooter></MyFooter>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Myheader from "~/components/header.vue";
|
|
import { mapMutations } 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 util from "@/ajax/util";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
util,
|
|
paytypeWarning:{result:true,message:''},
|
|
showPaytypeWarning:false,
|
|
goldmedal: [],
|
|
userproductId: "",
|
|
logisticsDate: "",
|
|
addressPhoneNumber: "",
|
|
userphone: "",
|
|
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,
|
|
trackingstates: "", //运输状态
|
|
useralllist: [],
|
|
delivery: [],
|
|
|
|
useraddress: [],
|
|
shopprice: {},
|
|
information: {
|
|
paytypeText: "",
|
|
distribution: "快递",
|
|
catimage: require("../../assets/image/rc-left.png"),
|
|
},
|
|
};
|
|
},
|
|
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.data.id,
|
|
},
|
|
};
|
|
dis_livchat(option);
|
|
}
|
|
},
|
|
//订单支付和再次购买
|
|
onceagain(item) {
|
|
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 = "再次购买";
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
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,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import url("../../assets/css/usertion.less");
|
|
</style> |