fix
This commit is contained in:
X1627315083
@@ -3,7 +3,7 @@
|
||||
<div class="generalModel_table_search">
|
||||
<div class="generalModel_state">
|
||||
<div class="generalModel_state_item">
|
||||
<span>{{$t('allOrder.Time')}}:</span>
|
||||
<!-- <span>{{$t('allOrder.Time')}}:</span> -->
|
||||
<a-range-picker
|
||||
class="range_picker"
|
||||
v-model:value="rangePickerValue"
|
||||
@@ -24,29 +24,34 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="generalModel_search">
|
||||
<div
|
||||
<div class="gallery_btn" @click="searchAllOrderList()">Search</div>
|
||||
<div class="gallery_btn" style="margin-left: 2rem;" @click="searchAllOrderList()">Export</div>
|
||||
<!-- <div
|
||||
class="generalModel_search_item"
|
||||
@click="searchAllOrderList()"
|
||||
>
|
||||
<span
|
||||
class="icon iconfont icon-sousuo"
|
||||
></span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="generalModel_table_content" ref="historyTable">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:row-selection="{ selectedRowKeys: selectedRowKey, onChange: onSelectChange }"
|
||||
:data-source="collectionList"
|
||||
:scroll="{ y: historyTableHeight }"
|
||||
@change="changePage"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
showSizeChanger: false,
|
||||
current: currentPage,
|
||||
pageSize: pageSize,
|
||||
total: total,
|
||||
showQuickJumper: true,
|
||||
bordered: false,
|
||||
size:'small',
|
||||
position:['bottomCenter']
|
||||
}"
|
||||
>
|
||||
<template
|
||||
@@ -56,17 +61,14 @@
|
||||
class="operate_list"
|
||||
v-if="column?.Operations"
|
||||
>
|
||||
<!-- <div
|
||||
v-if="record.orderStatus == '支付成功'"
|
||||
class="operate_item"
|
||||
@click="refund(record)"
|
||||
>
|
||||
refund
|
||||
</div> -->
|
||||
<div class="operate_item">{{ $t('HistoryPage.Delete') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #itemRender="{ type, originalElement }">
|
||||
{{ type }}
|
||||
</template>
|
||||
</a-table>
|
||||
<!-- <a-table :row-selection="{ selectedRowKeys: selectedRowKey, onChange: onSelectChange }" :columns="columns" :data-source="collectionList" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -82,19 +84,20 @@ export default defineComponent({
|
||||
const {t} = useI18n()
|
||||
const columns: any = computed(() => {
|
||||
return [
|
||||
{
|
||||
|
||||
{
|
||||
title: useI18n().t('allOrder.Serial'),
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
dataIndex: "orderNo",
|
||||
key: "orderNo",
|
||||
},
|
||||
{
|
||||
title: useI18n().t('allOrder.Title'),
|
||||
{
|
||||
title: useI18n().t('allOrder.Time'),
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
dataIndex: "title",
|
||||
key: "title",
|
||||
dataIndex: "createTime",
|
||||
key: "createTime",
|
||||
},
|
||||
{
|
||||
title: useI18n().t('allOrder.Money'),
|
||||
@@ -104,7 +107,7 @@ export default defineComponent({
|
||||
key: "totalFee",
|
||||
},
|
||||
{
|
||||
title: useI18n().t('allOrder.Payment'),
|
||||
title: useI18n().t('allOrder.PaymentMethods'),
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
dataIndex: "paymentType",
|
||||
@@ -117,6 +120,13 @@ export default defineComponent({
|
||||
dataIndex: "orderStatus",
|
||||
key: "orderStatus",
|
||||
},
|
||||
{
|
||||
title: useI18n().t('allOrder.OrderType'),
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
dataIndex: "title",
|
||||
key: "title",
|
||||
},
|
||||
|
||||
// {
|
||||
// title: useI18n().t("HistoryPage.Operations"),
|
||||
@@ -130,6 +140,7 @@ export default defineComponent({
|
||||
let dataList: any = ref([]);
|
||||
let rangePickerValue: any = ref([]);
|
||||
let collectionList: any = ref([]);
|
||||
|
||||
let userInfo: any = {};
|
||||
let currentState = ref({
|
||||
value:'income',
|
||||
@@ -144,6 +155,10 @@ export default defineComponent({
|
||||
value:'expend',
|
||||
},
|
||||
])
|
||||
let selectedRowKey = ref([])
|
||||
const onSelectChange= (selectedRowKeys:any,)=>{
|
||||
selectedRowKey.value = selectedRowKeys
|
||||
}
|
||||
return {
|
||||
columns,
|
||||
dataList,
|
||||
@@ -154,6 +169,8 @@ export default defineComponent({
|
||||
currentState,
|
||||
state,
|
||||
t,
|
||||
selectedRowKey,
|
||||
onSelectChange,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -166,19 +183,17 @@ export default defineComponent({
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// let historyTable: any = this.$refs.historyTable;
|
||||
// this.historyTableHeight = historyTable.clientHeight - 130;
|
||||
this.getAllOrderList()
|
||||
nextTick(()=>{
|
||||
let historyTable: any = this.$refs.historyTable;
|
||||
this.historyTableHeight = historyTable.clientHeight - 130;
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.currentPage = 1
|
||||
this.pageSize = 10
|
||||
nextTick(()=>{
|
||||
let historyTable: any = this.$refs.historyTable;
|
||||
this.historyTableHeight = historyTable.clientHeight - 100;
|
||||
})
|
||||
this.getAllOrderList()
|
||||
|
||||
},
|
||||
//改变页码
|
||||
changePage(e: any) {
|
||||
@@ -193,8 +208,8 @@ export default defineComponent({
|
||||
},
|
||||
//获取列表
|
||||
getAllOrderList() {
|
||||
let startDate: any = this.rangePickerValue[0]?this.rangePickerValue[0] : "";
|
||||
let endDate: any = this.rangePickerValue[1]?this.rangePickerValue[1] : "";
|
||||
let startDate: any = this.rangePickerValue?.[0]?this.rangePickerValue[0] : "";
|
||||
let endDate: any = this.rangePickerValue?.[1]?this.rangePickerValue[1] : "";
|
||||
let data = {
|
||||
endTime: endDate,
|
||||
isIncome: this.currentState.value == 'income'?true:false,
|
||||
@@ -209,6 +224,7 @@ export default defineComponent({
|
||||
this.currentPage = 1
|
||||
this.getAllOrderList()
|
||||
}else{
|
||||
rv.content.forEach((item:any) => item.key = item.id);
|
||||
this.collectionList = rv.content
|
||||
this.total = rv.total
|
||||
}
|
||||
@@ -218,7 +234,7 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
.allOrder_page{
|
||||
padding: 0 !important;
|
||||
flex: 1;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="generalModel_table_search">
|
||||
<div class="generalModel_state">
|
||||
<div class="generalModel_state_item">
|
||||
<span>Time:</span>
|
||||
<!-- <span>Time:</span> -->
|
||||
<a-range-picker
|
||||
class="range_picker"
|
||||
v-model:value="rangePickerValue"
|
||||
@@ -21,21 +21,22 @@
|
||||
</a-range-picker>
|
||||
</div>
|
||||
<div class="generalModel_state_item">
|
||||
<span>State:</span>
|
||||
<!-- <span>State:</span> -->
|
||||
<a-select v-model:value="currentState.value" style="width:25rem" size="large" optionFilterProp="label" :options="state" placeholder="Please select" allowClear show-search></a-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="generalModel_search">
|
||||
<div
|
||||
<div class="gallery_btn" @click="searchcreditsDetailList()">Search</div>
|
||||
<!-- <div
|
||||
class="generalModel_search_item"
|
||||
@click="searchcreditsDetailList()"
|
||||
>
|
||||
<span
|
||||
class="icon iconfont icon-sousuo"
|
||||
></span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="generalModel_table_content" ref="historyTable">
|
||||
|
||||
364
src/component/Pay/payMethod.vue
Normal file
364
src/component/Pay/payMethod.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div class="payMethod" ref="payMethod"></div>
|
||||
<a-modal
|
||||
class="generalModel"
|
||||
:get-container="() => $refs.payMethod"
|
||||
v-model:visible="payMethodModel"
|
||||
:footer="null"
|
||||
:width="pageWidth"
|
||||
height="auto"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="payMethodModelMask"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
:zIndex="1000"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payMethodContent">
|
||||
<div class="generalModelTitle">
|
||||
Purchase points
|
||||
</div>
|
||||
<div class="generalModelInfo">
|
||||
select a payment method
|
||||
</div>
|
||||
<div class="payMethod_list">
|
||||
<label class="payMethod_item">
|
||||
<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
|
||||
<img src="../../assets/images/homePage/paypal.svg" alt="">
|
||||
<span>PayPal</span>
|
||||
</label>
|
||||
<label class="payMethod_item">
|
||||
<input name="Stripe" type="radio" value="stripe" v-model="modeOfPayment">
|
||||
<img src="../../assets/images/homePage/bankCard.svg" alt="">
|
||||
<span>{{ $t('upgradePlan.CreditCard') }}</span>
|
||||
</label>
|
||||
<label class="payMethod_item">
|
||||
<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
|
||||
<img src="../../assets/images/homePage/alipay.svg" alt="">
|
||||
<span>{{ $t('upgradePlan.Alipay') }}</span>
|
||||
<div v-show="modeOfPayment == 'alipay'" class="payAffirm_detail">
|
||||
<label>
|
||||
<input name="location" type="radio" value="ALIPAYHK" v-model="modeOfPaymentDetail">
|
||||
<span>{{ $t('upgradePlan.HongKong') }}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input name="location" type="radio" value="ALIPAYCN" v-model="modeOfPaymentDetail">
|
||||
<span>{{ $t('upgradePlan.MainlandChina') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
|
||||
<label>
|
||||
<input type="checkbox" v-model="clause">
|
||||
<span class="generalModelDescription">{{ $t('upgradePlan.policy1') }}<a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">{{ $t('upgradePlan.policy2') }}</a>{{ $t('upgradePlan.policy3') }}<a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">{{ $t('upgradePlan.policy4') }}</a>. *</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="payMethod_payAffirm_btn">
|
||||
<div class="gallery_btn white" @click="cancelDsign">Cancel</div>
|
||||
<div class="gallery_btn" @click="payAffirm">Payment</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark" state="true">
|
||||
<div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
|
||||
<div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
|
||||
<div class="mark_loading_title_box">
|
||||
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">{{ $t('upgradePlan.Back') }}</div>
|
||||
<div class="mark_loading_btn" @click="completePayment">OK</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { isEmail } from "@/tool/util";
|
||||
import { setCookie ,WriteCookie } from "@/tool/cookie";
|
||||
import { message } from "ant-design-vue";
|
||||
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { setLang } from "@/tool/guide";
|
||||
const md5 = require("md5");
|
||||
export default defineComponent({
|
||||
components: {
|
||||
VerificationCodeInput,
|
||||
},
|
||||
emits: ['completePayment'],
|
||||
setup(prop,{emit}){
|
||||
const store = useStore();
|
||||
let payMethod = reactive({
|
||||
payMethodModel:false,
|
||||
payMethodModelMask:true,
|
||||
pageWidth:'50%'
|
||||
})
|
||||
let payMethodData = reactive({
|
||||
modeOfPayment:'paypal',
|
||||
modeOfPaymentDetail:'ALIPAYHK',
|
||||
labelDisclaimer:null,//dom
|
||||
payAffirmData:{} as any,
|
||||
clause:false,
|
||||
newWindow:null as any,
|
||||
isShowMark:false,
|
||||
})
|
||||
const init = (data:any)=>{
|
||||
payMethod.payMethodModel = true
|
||||
payMethodData.payAffirmData = data
|
||||
}
|
||||
const cancelDsign = () => {
|
||||
payMethod.payMethodModel = false
|
||||
}
|
||||
const payAffirm = () => {
|
||||
if(!payMethodData.clause){
|
||||
let labelDisclaimer:any = payMethodData.labelDisclaimer
|
||||
if(!labelDisclaimer.classList.contains('animation')){
|
||||
labelDisclaimer.classList.add('animation')
|
||||
setTimeout(() => {
|
||||
labelDisclaimer.classList.remove('animation')
|
||||
}, 1000);
|
||||
}
|
||||
return
|
||||
}
|
||||
let httpsUrl
|
||||
let url = window.location.href
|
||||
let payAffirmData = payMethodData.payAffirmData
|
||||
let data = {
|
||||
autoRenewal:true,//false为不自动续费
|
||||
productName:payAffirmData.productName,
|
||||
quantity:payAffirmData.quantity?payAffirmData.quantity:1,
|
||||
returnUrl:url,
|
||||
subscribeType:payAffirmData.subscribeType?payAffirmData.subscribeType:'',//yearly为年费，monthly为月费
|
||||
}
|
||||
if(payMethodData.modeOfPayment == 'paypal'){
|
||||
httpsUrl = Https.httpUrls.payPaypal
|
||||
}else if (payMethodData.modeOfPayment == 'stripe') {
|
||||
httpsUrl = Https.httpUrls.payStripe
|
||||
}else{
|
||||
httpsUrl = Https.httpUrls.payAlipayHK
|
||||
}
|
||||
Https.axiosPost(httpsUrl,data).then(
|
||||
(rv: any) => {
|
||||
var width = 800;
|
||||
var height = 600;
|
||||
var left = (screen.width - width) / 2;
|
||||
var top = (screen.height - height) / 2;
|
||||
payMethodData.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
|
||||
let herf
|
||||
if(payMethodData.modeOfPayment == 'paypal'){
|
||||
// 在新窗口中写入内容
|
||||
herf = rv.approve;
|
||||
// payMethodData.newWindow.location.href = rv.approve;
|
||||
}else if(payMethodData.modeOfPayment == 'stripe'){
|
||||
herf = rv
|
||||
// payMethodData.newWindow.location.href = rv
|
||||
}else{
|
||||
let data = JSON.parse(rv)
|
||||
herf = `${data.url}?${data.alipay_order_string}`
|
||||
// payMethodData.newWindow.location.href = herf;
|
||||
}
|
||||
if(payMethodData.newWindow){
|
||||
payMethodData.newWindow.location.href = herf
|
||||
}else{
|
||||
// window.open(herf, '_blank');
|
||||
window.location.href=herf;
|
||||
}
|
||||
payMethodData.isShowMark = true
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
}
|
||||
const setPaidBack = ()=>{
|
||||
payMethod.payMethodModel = false
|
||||
payMethodData.isShowMark = false
|
||||
payMethodData.clause = false
|
||||
payMethodData.modeOfPayment = 'paypal'
|
||||
payMethodData.modeOfPaymentDetail = 'ALIPAYHK'
|
||||
}
|
||||
const completePayment = ()=>{
|
||||
setPaidBack()
|
||||
emit('completePayment')
|
||||
}
|
||||
return{
|
||||
store,
|
||||
...toRefs(payMethod),
|
||||
...toRefs(payMethodData),
|
||||
init,
|
||||
cancelDsign,
|
||||
payAffirm,
|
||||
setPaidBack,
|
||||
completePayment,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
turnToWindow(url:any) {
|
||||
window.open(url);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.payMethod {
|
||||
.payMethodContent{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 60rem;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
.generalModelTitle,.generalModelInfo{
|
||||
width: 100%;
|
||||
}
|
||||
.payMethod_list{
|
||||
margin-bottom: 4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
>label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
margin-bottom: 3rem;
|
||||
cursor: pointer;
|
||||
border: 2px solid #EFEFEF;
|
||||
border-radius: 2rem;
|
||||
height: 8rem;
|
||||
width: 100%;
|
||||
img{
|
||||
margin: 0rem 2rem;
|
||||
// max-width: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
.payAffirm_detail{
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
>label{
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
span{
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
>label:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.payMethod_payAffirm_clause{
|
||||
margin-bottom: 4rem;
|
||||
label{
|
||||
cursor: pointer;
|
||||
input{
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span{
|
||||
vertical-align: top;
|
||||
a{
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.animation{
|
||||
animation: shake .3s linear;
|
||||
@keyframes shake {
|
||||
0%{
|
||||
transform: translateX(0px);
|
||||
}
|
||||
25%{
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
50%{
|
||||
transform: translateX(10px);
|
||||
}
|
||||
75%{
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
100%{
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.payMethod_payAffirm_btn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
>div{
|
||||
width: 29rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.mark_loading{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
.mark_loading_title{
|
||||
font-size: 3rem;
|
||||
// text-decoration: underline;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2rem;
|
||||
// color: #fff;
|
||||
}
|
||||
.mark_loading_intro{
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
}
|
||||
.mark_loading_title_box{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mark_loading_btn,.mark_loading_btn2{
|
||||
// border: #000;
|
||||
// color: #fff;
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
border: 2px solid;
|
||||
padding: 0 20px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
padding: .3rem 4rem;
|
||||
background: #39215b;
|
||||
color: #fff;
|
||||
border: none;
|
||||
margin: 0 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
.mark_loading_btn2{
|
||||
border: 2px solid #000;
|
||||
color: #000;
|
||||
background: rgba(0,0,0,0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div ref="payOrder_modal"></div>
|
||||
<a-modal
|
||||
class="modal_component payOrder_modal generalModel_modal"
|
||||
class="modal_component payOrder_modal generalModel"
|
||||
v-model:visible="showPayOrder"
|
||||
:footer="null"
|
||||
width="78%"
|
||||
@@ -8,12 +9,19 @@
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
wrapClassName="#app"
|
||||
:get-container="() => $refs.payOrder_modal"
|
||||
:keyboard="false"
|
||||
>
|
||||
|
||||
<div class="closeIcon">
|
||||
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
|
||||
</div>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payOrder_page">
|
||||
<div class="payOrder_page_title">
|
||||
<div class="payOrder_page_title_item" @click="setState('paypal')" :class="{active:presentState == 'paypal'}">{{ $t('payOrder.OrderInformation') }}</div>
|
||||
@@ -65,16 +73,19 @@ export default defineComponent({
|
||||
methods: {
|
||||
init() {
|
||||
this.showPayOrder = true;
|
||||
this.setState('paypal')
|
||||
},
|
||||
setState(str:any){
|
||||
this.presentState = str
|
||||
let setInit:any
|
||||
if(str == 'paypal'){
|
||||
setInit = this.$refs.allOrder
|
||||
}else{
|
||||
setInit = this.$refs.creditsDetail
|
||||
}
|
||||
setInit.init()
|
||||
nextTick(()=>{
|
||||
this.presentState = str
|
||||
let setInit:any
|
||||
if(str == 'paypal'){
|
||||
setInit = this.$refs.allOrder
|
||||
}else{
|
||||
setInit = this.$refs.creditsDetail
|
||||
}
|
||||
setInit.init()
|
||||
})
|
||||
},
|
||||
cancelDsign(){
|
||||
this.showPayOrder = false
|
||||
@@ -82,16 +93,19 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.payOrder_modal {
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
}
|
||||
<style lang="less" scoped>
|
||||
:deep(.payOrder_modal) {
|
||||
>.ant-modal-content{
|
||||
>.ant-modal-body{
|
||||
padding: 6rem;
|
||||
}
|
||||
}
|
||||
.payOrder_page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// min-width: 1440px;
|
||||
position: relative;
|
||||
.payOrder_page_title{
|
||||
@@ -126,9 +140,10 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.payOrder_table_content{
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,216 +0,0 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="modal_component refund_reason"
|
||||
v-model:visible="showRefundReason"
|
||||
:footer="null"
|
||||
width="50%"
|
||||
:maskClosable="false"
|
||||
:mask="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="closeIcon">
|
||||
|
||||
<i class="fi fi-rr-cross-small" @click.stop="cancelRefundreason()"></i>
|
||||
</div>
|
||||
<div class="modal_title_text">
|
||||
Refund Reason
|
||||
</div>
|
||||
<div class="reason">
|
||||
<label>
|
||||
<div>
|
||||
<input name="reason" type="radio" @click="getReasonCategory" value="noLike" v-model="reason">
|
||||
<span>Dislike</span>
|
||||
</div>
|
||||
</label>
|
||||
<label>
|
||||
<div>
|
||||
<input name="reason" type="radio" @click="getReasonCategory" value="Rests" v-model="reason">
|
||||
<span>Rests</span>
|
||||
</div>
|
||||
|
||||
<textarea v-show="reason == 'Rests'" name="" id="" cols="40" rows="10" v-model="reasonTextarea"></textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="subitOkPreviewBtn" @click="setReason">OK</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, createVNode, computed, nextTick } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { formatTime } from "@/tool/util";
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
},
|
||||
setup() {
|
||||
let showRefundReason: any = ref(false);
|
||||
let record: any = ref();//订单编号
|
||||
let reason: any = ref('noLike');//原因
|
||||
let reasonTextarea: any = ref();//原因
|
||||
let loadingShow: any = ref(false);
|
||||
let { t } = useI18n();
|
||||
return {
|
||||
showRefundReason,
|
||||
record,
|
||||
reason,
|
||||
reasonTextarea,
|
||||
loadingShow,
|
||||
t,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
cancelRefundreason(){//关闭退款页面
|
||||
this.record = ''
|
||||
this.showRefundReason = false;
|
||||
},
|
||||
//删除分组
|
||||
// deleteGroup(record:any,index:number){
|
||||
// let deleteGroupFun = (id:any,index:number) =>{
|
||||
// let data = {
|
||||
// userGroupId:id
|
||||
// }
|
||||
// Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
|
||||
// (rv: any) => {
|
||||
// message.success(this.t('HistoryPage.jsContent1'))
|
||||
// this.collectionList.splice(index,1)
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
// Modal.confirm({
|
||||
// title: this.t('HistoryPage.jsContent2'),
|
||||
// icon: createVNode(ExclamationCircleOutlined),
|
||||
// okText: 'Yes',
|
||||
// cancelText: 'No',
|
||||
// centered:true,
|
||||
// mask:false,
|
||||
// onOk() {
|
||||
// deleteGroupFun(record.id,index)
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
|
||||
refund(record: any) {
|
||||
// this.$router.push({name:'home',params: {id:record.id}})
|
||||
this.record = record
|
||||
this.showRefundReason = true
|
||||
},
|
||||
getReasonCategory(){
|
||||
if(this.reason == 'Rests'){
|
||||
}else{
|
||||
this.reasonTextarea = ''
|
||||
}
|
||||
},
|
||||
setReason(){
|
||||
let reason = this.reason
|
||||
this.loadingShow = true
|
||||
if(this.reason == 'Rests'){
|
||||
reason = this.reasonTextarea?this.reasonTextarea:this.reason
|
||||
}
|
||||
|
||||
// return
|
||||
|
||||
let httpsUrl = Https.httpUrls.tradeRefundAlipay
|
||||
if(this.record.paymentType == "PayPal"){
|
||||
httpsUrl = Https.httpUrls.tradeRefundPaypal
|
||||
}
|
||||
Https.axiosPost(
|
||||
httpsUrl + `/${this.record.orderNo}/${reason}`,
|
||||
{}
|
||||
).then((rv: any) => {
|
||||
this.loadingShow = false
|
||||
this.showRefundReason = false
|
||||
})
|
||||
.catch((res) => {});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.refund_reason{
|
||||
// max-width: 1200px ;
|
||||
// max-width: 1150px ;
|
||||
.ant-modal-content {
|
||||
border-radius: calc(1rem * 1.2);
|
||||
overflow: hidden;
|
||||
.ant-modal-header {
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
}
|
||||
.ant-modal-body {
|
||||
// height: calc(65vh - 6.4rem);
|
||||
height: calc(65rem * 1.2);
|
||||
}
|
||||
//进度完成字体颜色
|
||||
|
||||
.ant-progress-circle.ant-progress-status-success .ant-progress-text {
|
||||
color: #000;
|
||||
}
|
||||
.ant-progress-circle .ant-progress-text {
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
font-size: calc(1.6rem * 1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal_component.refund_reason{
|
||||
.ant-modal-content {
|
||||
.ant-modal-body {
|
||||
// height: calc(65vh - 6.4rem);
|
||||
padding: 3rem;
|
||||
height: calc(40rem * 1.2);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.refund_reason{
|
||||
.reason{
|
||||
height: calc(27rem * 1.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 3rem;
|
||||
font-size: 1.6rem;
|
||||
label{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
div{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
input,span{
|
||||
cursor: pointer;
|
||||
}
|
||||
span{
|
||||
margin: 0 1rem;
|
||||
}
|
||||
textarea{
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
outline-color:#767676;
|
||||
resize: none;
|
||||
}
|
||||
textarea:focus-visible {
|
||||
border-color: #767676;
|
||||
}
|
||||
}
|
||||
}
|
||||
.subitOkPreviewBtn{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user