You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
315 lines
9.2 KiB
315 lines
9.2 KiB
<template>
|
|
<v-page>
|
|
<v-header
|
|
:title="`${
|
|
detail.cur_user_role == 'seller' ? $t('otc.f2') : $t('otc.f3')
|
|
} ${$t('otc.f4')}`"
|
|
></v-header>
|
|
<view class="layout-main">
|
|
<view class="item bg-panel-3 rounded-sm p-md m-md">
|
|
<view class="row m-t-sm d-flex align-center">
|
|
<view class="label"> {{ $t("otc.f5") }} </view>
|
|
<view class="flex-fill fn-right color-light">
|
|
{{ detail.order_sn }}
|
|
</view>
|
|
</view>
|
|
<view class="row m-t-sm d-flex align-center">
|
|
<view class="label"> {{ $t("otc.c1") }} </view>
|
|
<view class="flex-fill fn-right color-light">
|
|
{{ detail.status_text }}
|
|
</view>
|
|
</view>
|
|
<view class="row m-t-sm d-flex align-center">
|
|
<view class="label"> {{ $t("otc.c3") }} </view>
|
|
<view class="flex-fill fn-right color-light">
|
|
{{ detail.money }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="row m-t-sm d-flex align-center">
|
|
<view class="label"> {{ $t("otc.b0") }} </view>
|
|
<view class="flex-fill fn-right color-light">
|
|
{{ detail.price }}
|
|
</view>
|
|
</view>
|
|
<view class="row m-t-sm d-flex align-center">
|
|
<view class="label"> {{ $t("otc.c4") }} </view>
|
|
<view class="flex-fill fn-right color-light">
|
|
{{ detail.amount }}
|
|
</view>
|
|
</view>
|
|
<view class="row m-t-sm d-flex align-center">
|
|
<view class="label"> {{ $t("otc.b1") }} </view>
|
|
<view class="flex-fill fn-right color-light">
|
|
<text class="text-primary">{{
|
|
seller_payments.pay_type_text
|
|
}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="row m-t-sm" v-if="seller_payments.pay_type == 'alipay'">
|
|
<view class="m-b-sm"
|
|
>{{ $t("otc.d9") }}：<text class="text-primary">{{
|
|
seller_payments.pay_type_text
|
|
}}</text></view
|
|
>
|
|
<view class="m-b-sm"
|
|
>{{ $t("otc.f6") }}：{{ seller_payments.card_no }}</view
|
|
>
|
|
<view class="m-b-sm">
|
|
<view
|
|
class="upload-box d-flex justify-center align-center rounded-sm bg-panel-1 box-shadow w-7/12"
|
|
>
|
|
<img class="w-max" :src="seller_payments.full_code_img" alt />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="row m-t-sm" v-if="seller_payments.pay_type == 'wechat'">
|
|
<view class="m-b-sm"
|
|
>{{ $t("otc.d9") }}：<text class="text-primary">{{
|
|
seller_payments.pay_type_text
|
|
}}</text></view
|
|
>
|
|
<view class="m-b-sm"
|
|
>{{ $t("otc.f6") }}：{{ seller_payments.card_no }}</view
|
|
>
|
|
<view class="m-b-sm">
|
|
<view
|
|
class="upload-box d-flex justify-center align-center rounded-sm bg-panel-1 box-shadow w-7/12"
|
|
>
|
|
<img class="w-max" :src="seller_payments.full_code_img" alt />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="row m-t-sm" v-if="seller_payments.pay_type == 'bank_card'">
|
|
<view class="m-b-sm"
|
|
>{{ $t("otc.d9") }}：<text class="color-primary">{{
|
|
seller_payments.pay_type_text
|
|
}}</text></view
|
|
>
|
|
<view class="m-b-sm"
|
|
>{{ $t("otc.f6") }}：{{ seller_payments.card_no }}</view
|
|
>
|
|
<view class="m-b-sm"
|
|
>{{ $t("otc.f7") }}：{{ seller_payments.bank_name }}</view
|
|
>
|
|
<view class="m-b-sm"
|
|
>{{ $t("otc.e6") }}：{{ seller_payments.open_bank }}</view
|
|
>
|
|
</view>
|
|
<view class="row m-t-sm d-flex align-center">
|
|
<view class="label"> {{ $t("otc.f8") }} </view>
|
|
<view class="flex-fill fn-right color-light">
|
|
<text class="color-danger">{{ getTime(overed_time).m }}</text
|
|
>{{ $t("otc.f9")
|
|
}}<text class="color-danger">{{ getTime(overed_time).s }}</text
|
|
>{{ $t("otc.g0") }}
|
|
</view>
|
|
</view>
|
|
<view class="row m-t-sm">
|
|
<view class="label color-warning"> {{ $t("otc.g1") }} </view>
|
|
<view class="m-t-xs">
|
|
<view
|
|
class="upload-box d-flex justify-center align-center rounded-sm bg-panel-1 box-shadow"
|
|
@click="getFile"
|
|
>
|
|
<van-icon
|
|
v-if="!paid_img"
|
|
class="color-light fn-30"
|
|
name="photograph"
|
|
/>
|
|
<img v-else :src="$imgUrl + '/' + paid_img" alt />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="m-md" v-if="detail.confirm_button == 'buyer'">
|
|
<v-button
|
|
type="green"
|
|
class="rounded"
|
|
block
|
|
@click="ifConfirmPaidOrder"
|
|
>{{ $t("otc.g2") }}</v-button
|
|
>
|
|
<view class="h-10"></view>
|
|
<v-button type="red" class="rounded" block @click="ifCancelOrder">{{
|
|
$t("otc.g3")
|
|
}}</v-button>
|
|
</view>
|
|
<view class="m-md" v-if="detail.confirm_button == 'seller'">
|
|
<v-button type="green" class="rounded" block @click="ifConfirmOrder">{{
|
|
$t("otc.g4")
|
|
}}</v-button>
|
|
<view class="h-10"></view>
|
|
<v-button type="red" class="rounded" block @click="ifNotConfirmOrder">{{
|
|
$t("otc.g5")
|
|
}}</v-button>
|
|
</view>
|
|
</view>
|
|
</v-page>
|
|
</template>
|
|
<script>
|
|
import Otc from "@/api/otc";
|
|
import Member from "@/api/member";
|
|
export default {
|
|
name: "detail",
|
|
data() {
|
|
return {
|
|
query: {},
|
|
detail: {},
|
|
seller_payments: {},
|
|
overed_time: 0,
|
|
dTime: undefined,
|
|
paid_img: "",
|
|
};
|
|
},
|
|
onLoad(query) {
|
|
this.query = query;
|
|
this.orderDetail();
|
|
},
|
|
methods: {
|
|
getTime(s) {
|
|
return {
|
|
m: Math.floor(s / 60),
|
|
s: s % 60,
|
|
};
|
|
},
|
|
orderDetail() {
|
|
let data = {
|
|
order_id: this.query.id,
|
|
};
|
|
Otc.orderDetail(data).then((res) => {
|
|
this.detail = res.data;
|
|
this.seller_payments = res.data.seller_payments;
|
|
this.overed_time = res.data.overed_time;
|
|
if (this.overed_time) {
|
|
this.lastTime();
|
|
}
|
|
});
|
|
},
|
|
// 倒计时
|
|
lastTime() {
|
|
this.dTime = setInterval(() => {
|
|
this.overed_time--;
|
|
if (!this.overed_time) {
|
|
clearInterval(this.dTime);
|
|
}
|
|
}, 1000);
|
|
},
|
|
// 撤销订单
|
|
ifCancelOrder() {
|
|
this.$dialog
|
|
.confirm({
|
|
title: this.$t("otc.d0"),
|
|
message: this.$t("otc.g6") + "?",
|
|
confirmButtonText: this.$t("common.confirm"),
|
|
cancelButtonText: this.$t("common.cancel"),
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
this.cancelOrder();
|
|
});
|
|
},
|
|
cancelOrder() {
|
|
let data = {
|
|
order_id: this.query.id,
|
|
};
|
|
Otc.cancelOrder(data).then((res) => {
|
|
this.$router.back();
|
|
this.$toast.success(this.$t("otc.g7"));
|
|
});
|
|
},
|
|
// 确认付款
|
|
ifConfirmPaidOrder() {
|
|
this.$dialog
|
|
.confirm({
|
|
title: this.$t("otc.d0"),
|
|
message: this.$t("otc.g8") + "?",
|
|
confirmButtonText: this.$t("common.confirm"),
|
|
cancelButtonText: this.$t("common.cancel"),
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
this.confirmPaidOrder();
|
|
});
|
|
},
|
|
confirmPaidOrder() {
|
|
let data = {
|
|
order_id: this.query.id,
|
|
paid_img: this.paid_img,
|
|
};
|
|
Otc.confirmPaidOrder(data).then((res) => {
|
|
this.orderDetail();
|
|
this.$toast.success(this.$t("otc.g9"));
|
|
});
|
|
},
|
|
// 确认收款
|
|
ifConfirmOrder() {
|
|
this.$dialog
|
|
.confirm({
|
|
title: this.$t("otc.d0"),
|
|
message: this.$t("otc.h0") + ".",
|
|
confirmButtonText: this.$t("common.confirm"),
|
|
cancelButtonText: this.$t("common.cancel"),
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
this.confirmOrder();
|
|
});
|
|
},
|
|
confirmOrder() {
|
|
let data = {
|
|
order_id: this.query.id,
|
|
};
|
|
Otc.confirmOrder(data).then((res) => {
|
|
this.orderDetail();
|
|
this.$toast.success(this.$t("otc.g9"));
|
|
});
|
|
},
|
|
// 未到账
|
|
ifNotConfirmOrder() {
|
|
this.$dialog
|
|
.confirm({
|
|
title: this.$t("otc.d0"),
|
|
message: this.$t('otc.h1')+".",
|
|
confirmButtonText: this.$t("common.confirm"),
|
|
cancelButtonText: this.$t("common.cancel"),
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
this.notConfirmOrder();
|
|
});
|
|
},
|
|
notConfirmOrder() {
|
|
let data = {
|
|
order_id: this.query.id,
|
|
};
|
|
Otc.notConfirmOrder(data).then((res) => {
|
|
this.orderDetail();
|
|
this.$toast.success(this.$t("otc.g9"));
|
|
});
|
|
},
|
|
// 上传图片
|
|
getFile() {
|
|
this.$getFile({ count: 1 }).then((res) => {
|
|
this.upLoadImg(res);
|
|
});
|
|
},
|
|
// 上传图片
|
|
upLoadImg(chooseImageRes) {
|
|
Member.uploadImage(chooseImageRes).then((res) => {
|
|
this.paid_img = res.data.path;
|
|
this.$toast.success(this.$t("auth.c1"));
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.upload-box {
|
|
min-width: 100%;
|
|
min-height: 100px;
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
</style>
|