支付页面
This commit is contained in:
X1627315083
@@ -40,6 +40,13 @@
|
||||
>
|
||||
Trial Approval
|
||||
</div>
|
||||
<div
|
||||
class="trialApproval button_second"
|
||||
@click="UpgradePlan()"
|
||||
>
|
||||
Upgrade Plan
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<nav class="header_nav_content">
|
||||
<div
|
||||
@@ -166,6 +173,7 @@
|
||||
<!-- 绑定邮箱第一步 end -->
|
||||
</div>
|
||||
</a-modal>
|
||||
<UpgradePlan ref="UpgradePlan"></UpgradePlan>
|
||||
</div>
|
||||
</template>
|
||||
<script >
|
||||
@@ -174,6 +182,7 @@ import { isEmail } from "@/tool/util";
|
||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
|
||||
import Habit from "@/component/Detail/habit.vue";
|
||||
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
@@ -184,6 +193,7 @@ export default defineComponent({
|
||||
components: {
|
||||
VerificationCodeInput,
|
||||
Habit,
|
||||
UpgradePlan,
|
||||
},
|
||||
setup(){
|
||||
const store = useStore();
|
||||
@@ -255,7 +265,10 @@ export default defineComponent({
|
||||
let noRefresh = name === "home" ? true : false;
|
||||
this.$router.push({ name: name, params: { noRefresh: noRefresh } });
|
||||
},
|
||||
|
||||
UpgradePlan(){
|
||||
let UpgradePlan = this.$refs.UpgradePlan
|
||||
UpgradePlan.init()
|
||||
},
|
||||
//点击下拉图标出现操作
|
||||
changeShowOperateContent() {
|
||||
this.isShowOperate = !this.isShowOperate;
|
||||
|
||||
512
src/component/HomePage/UpgradePlan.vue
Normal file
512
src/component/HomePage/UpgradePlan.vue
Normal file
@@ -0,0 +1,512 @@
|
||||
<template>
|
||||
<a-modal class="modal_component UpgradePlan_modal"
|
||||
v-model:visible="showUpgradePlan"
|
||||
:footer="null"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="UpgradePlan_closeIcon">
|
||||
|
||||
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
|
||||
</div>
|
||||
<div class="UpgradePlan_content">
|
||||
<div>Upgrade your Account Subscription Plan</div>
|
||||
</div>
|
||||
<div v-show="stepNum == 0" class="UpgradePlan_nav">
|
||||
<div class="UpgradePlan_nav_content">
|
||||
<div :class="[planNum == 0 ? 'active':'']" @click="setPlan(0)">Monthly</div>
|
||||
<div :class="[planNum == 1 ? 'active':'']" @click="setPlan(1)">Annual(save 20%)</div>
|
||||
<div :class="[planNum == 2 ? 'active':'']" @click="setPlan(2)">Buy Credits</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="stepNum == 0" class="UpgradePlan_payList">
|
||||
<div v-show="planNum == 0" class="UpgradePlan_payList0">
|
||||
<div class="UpgradePlan_payList-item" v-for="item in productList">
|
||||
<div class="UpgradePlan_payList-item-price">$99/month</div>
|
||||
<div class="UpgradePlan_payList-item-plan">Pro Plus Plan</div>
|
||||
<div class="UpgradePlan_payList-item-integral">500 Credits per month</div>
|
||||
<ul class="UpgradePlan_payList-item-content">
|
||||
<li>
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
<span>22500 Images per month</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="planNum == 1" class="UpgradePlan_payList1">
|
||||
<div class="UpgradePlan_payList-item" v-for="item in productList">
|
||||
<div class="UpgradePlan_payList-item-price">$99/month</div>
|
||||
<div class="UpgradePlan_payList-item-plan">Pro Plus Plan</div>
|
||||
<div class="UpgradePlan_payList-item-integral">500 Credits per month</div>
|
||||
<ul class="UpgradePlan_payList-item-content">
|
||||
<li>
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
<span>22500 Images per month</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="planNum == 2" class="UpgradePlan_payList2">
|
||||
<div class="UpgradePlan_payList-item">
|
||||
<div class="UpgradePlan_payList2_img">
|
||||
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_premium_thumb-300x300.jpg" alt="">
|
||||
</div>
|
||||
<div class="UpgradePlan_payList2_name">{{ price.credits * price.num }} credits</div>
|
||||
<div class="UpgradePlan_payList2_unitPrice">${{ price.price * price.num }} <span @click="setUnit">USD</span></div>
|
||||
<div class="UpgradePlan_payList2_input">
|
||||
<div class="UpgradePlan_payList2_input_add" @click="addPriceNum">+</div>
|
||||
<input type="number" v-model="price.num">
|
||||
<div class="UpgradePlan_payList2_input_remo" @click="removePriceNum">-</div>
|
||||
</div>
|
||||
<div class="UpgradePlan_payList2_describe">All credits are shared within the {{ }} name organization</div>
|
||||
<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade">UPGRADE NOW</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
|
||||
<div class="UpgradePlan_payAffirm_title">Select payment method</div>
|
||||
<div class="UpgradePlan_payAffirm_content">
|
||||
<label>
|
||||
<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
|
||||
<img src="https://ecmb.bdimg.com/tam-ogel/-1860672422_-148079605_900_900.png" alt="">
|
||||
PayPal
|
||||
</label>
|
||||
<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'alipay'?'active':'']">
|
||||
|
||||
</div>
|
||||
<label>
|
||||
<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAANmSURBVEiJvZZdaFxFFMd/M/cj926yu02MWWObEm3quoHGYBJBC4aCqbRRKoE+aLH6JhUFBT9Aij4oiooSfKn4oiA+FKlIkfbBj3TZYkGDDVWs1M1aaKgkJqEJazab+zE+3Gziunu3qwmep7kz95zfzH/OmRmhlFL8D6aXGl9ecjl2dpncnIe/QbQmIdmm8dwei/6OACGUUiqTc3nqxBKbvTgp4NjBRu7u1JEAo+nlTYcA+Ao+OFcEVqWbnPXqcoxZgvdGGtEljE95jJ4pXNcnN+evg+rdkyZTcOc2DYA//vTr8inF1sN+MDXQpCjrs4z1b10KbEP80w3XVzhVBAoFvf5AhL1JI3Sm93TqfP1krKL/xIUV3hmrlDQU9MLJAi+Kcof2qODUE1EAvvjZ4ZXTS6ETqRvkK8XANp2bYnKtrzmyLtXOVsnhgYYyn29/c8jOVt+7UBBAe1zS1SrL+j76rrjWbm0U9G7V6d0aJMhDOTc0Vk3QyZ9Wag0D8OEjTQBcnvfJzYWXSVVQS0QylNRJtmlYusDxFNN5RXbWZ2LKZSYfyNPZoq2l++c/1p5UBWgoafDq/giWDtN5haVB3BaUMl0p+GXG46tLDqmEhgCuFRTHz/8LUGeL5I3hCO+fK/LJeJGCE1RbxBR0JzQGu3T2pUxSCY1UQlvzuzzvs71Z4+J0+B4JpZTqeWsBgGcHLYQQvFvjaNGlYKTH4Oheu2Ls6oLPWNblm18dfphy8XyI25LM09HyFW1v1vjsQm0JpAjkBSi6iquLiltagsy8OS451GdyqM9kcVmRybmMXwlWWQaayfsMdulkck5VyI1NgjcfjNDfoeP5QVGfyTrcu0Pnsbss+jvW5YxZguFug+FuoxL06USR449HWfHg4++L/L4YZNcNjZKRHpNH+0222IJ8UXH0VIGxbDCh9KRLejJPKqFxeKCB+2830MvLr3yPAPbsNHhtn03UCgI6HmyxBWI168aveLx8eompa+Gnd1uT4OG+Bg7eYRKzRHVQadn7Uya72iUxW1BYgdy8TzrrcHG6vrsLwDYEB3YZvHSfHYB6317Y8DshzKSAiefjwVV+a6t2vf//s+1YjS0BjuwO6mezTQjBM4NW0C696zI5l9H0MpOzG39uSRGodGS3xdBtf3tubSxsffYXznw1EQcnMd4AAAAASUVORK5CYII=" alt="">
|
||||
支付宝
|
||||
</label>
|
||||
<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'paypal'?'active':'']">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="UpgradePlan_payAffirm_clause">
|
||||
<label>
|
||||
<input type="checkbox" v-model="clause">
|
||||
<span>I acknowledge that I have read, understand, and agree with the <a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">Terms and Conditions</a> (including the Scope of service) and the <a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">Subscription Agreement</a>. *</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="UpgradePlan_payList_item_upgrade_btn">
|
||||
<div class="UpgradePlan_payList_item_upgrade1 subitOkPreviewBtn" @click="cancel">Cancel</div>
|
||||
<div class="UpgradePlan_payList_item_upgrade2 subitOkPreviewBtn" @click="payment">Payment</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<div>Has it been paid?</div>
|
||||
<div>
|
||||
<div @click="getTradeQuery">Yes</div>
|
||||
<div @click="getTradeQuery">No</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { message, Upload } from "ant-design-vue";
|
||||
import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import GO from "@/tool/GO";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { getUploadUrl } from "@/tool/util";
|
||||
// import { forEach } from "jszip";
|
||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||||
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
scaleImage,
|
||||
},
|
||||
props: ["msg",'sketchCatecoryList'],
|
||||
setup() {
|
||||
// console.log(prop.msg);
|
||||
let showUpgradePlan = ref(false)
|
||||
let planNum = ref(0)
|
||||
let stepNum = ref(0)
|
||||
let price = ref({
|
||||
num:1,
|
||||
price:15,
|
||||
credits:115,
|
||||
})
|
||||
let modeOfPayment = ref('alipay')
|
||||
let clause = ref(false)//同意条款
|
||||
let productList = ref([])
|
||||
let payIndex = ref(0)
|
||||
let isShowMark = ref(false)
|
||||
return {
|
||||
showUpgradePlan,
|
||||
planNum,
|
||||
stepNum,
|
||||
price,
|
||||
modeOfPayment,
|
||||
clause,
|
||||
productList,
|
||||
payIndex,
|
||||
isShowMark,
|
||||
};
|
||||
},
|
||||
data(prop) {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getProductList()
|
||||
},
|
||||
watch:{
|
||||
// driver__:{
|
||||
// handler(newVal,oldVal){
|
||||
// if(this.type_.type2 == 'Printboard'){
|
||||
// if(newVal.index >= 14 && newVal.index < 15){
|
||||
// this.setKeyword(newVal.index-14)
|
||||
// }else{
|
||||
// }
|
||||
// }else if(this.type_.type2 == 'Sketchboard'){
|
||||
|
||||
// }
|
||||
|
||||
// }
|
||||
// },
|
||||
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.showUpgradePlan = true
|
||||
},
|
||||
setPlan(num:any){
|
||||
this.planNum = num
|
||||
},
|
||||
upgrade(index:any){
|
||||
this.stepNum = 1
|
||||
this.payIndex = index
|
||||
},
|
||||
getProductList(){
|
||||
Https.axiosGet(Https.httpUrls.productList).then((rv) => {
|
||||
if (rv) {
|
||||
this.productList = rv
|
||||
// this.disignTypeList = rv
|
||||
}
|
||||
})
|
||||
},
|
||||
addPriceNum(){//数量减减
|
||||
this.price.num++
|
||||
},
|
||||
removePriceNum(){//数量加加
|
||||
if(this.price.num > 1){
|
||||
this.price.num--
|
||||
}
|
||||
},
|
||||
payment(){//付款
|
||||
console.log(this.modeOfPayment,'alipay','paypal');
|
||||
if(!this.clause){
|
||||
return
|
||||
}
|
||||
let url = window.location.href
|
||||
url = url.replace(/\/[^/]+$/, '') + '/paySucceed';
|
||||
Https.axiosPost(Https.httpUrls.pagePay+`/${this.payIndex}?returnUrl=${url}`, {returnUrl:url}).then(
|
||||
(rv: any) => {
|
||||
// var newWindow:any = window.open();
|
||||
// newWindow.document.write(rv);
|
||||
document.write(rv);
|
||||
// this.isShowMark = true
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
},
|
||||
//查询是否支付
|
||||
// getTradeQuery(){
|
||||
// let params = 1
|
||||
// Https.axiosGet(Https.httpUrls.tradeQuery,{params:{enumName:params}}).then((rv) => {
|
||||
// if (rv) {
|
||||
// console.log(rv);
|
||||
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
cancel(){//取消
|
||||
this.stepNum = 0
|
||||
this.modeOfPayment = 'alipay'
|
||||
this.clause = false
|
||||
},
|
||||
//设置单位
|
||||
setUnit(){
|
||||
|
||||
},
|
||||
cancelDsign(){
|
||||
this.showUpgradePlan = false
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.UpgradePlan_modal {
|
||||
flex: 1;
|
||||
// height: 30rem;
|
||||
// overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
position: relative;
|
||||
.UpgradePlan_content{
|
||||
font-size: var(--aida-fsize2);
|
||||
font-weight: 900;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
.UpgradePlan_nav{
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
.UpgradePlan_nav_content{
|
||||
background: #eaecf0;
|
||||
display: flex;
|
||||
padding: .5rem 2rem;
|
||||
border-radius: 5rem;
|
||||
margin: 2rem 0;
|
||||
div{
|
||||
border-radius: 2rem;
|
||||
padding: .5rem 2rem;
|
||||
margin: 0 1rem;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
div:hover{
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payList{
|
||||
flex: 1;
|
||||
.UpgradePlan_payList0,.UpgradePlan_payList1,.UpgradePlan_payList2{
|
||||
overflow-y: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.UpgradePlan_payList-item{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payList0,.UpgradePlan_payList1{
|
||||
.UpgradePlan_payList-item{
|
||||
width: 35rem;
|
||||
padding: 3rem;
|
||||
border: .5rem solid #edeff2;
|
||||
border-radius: 2rem;
|
||||
margin-right: 2rem;
|
||||
&.UpgradePlan_payList-item:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
.UpgradePlan_payList-item-price{
|
||||
font-weight: 600;
|
||||
font-size: var(--aida-fsize2);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.UpgradePlan_payList-item-plan{
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.UpgradePlan_payList-item-content{
|
||||
margin-top: 1.2rem;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.UpgradePlan_payList-item-upgrade{
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.UpgradePlan_payList2{
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
.UpgradePlan_payList-item{
|
||||
justify-content: space-between;
|
||||
padding: 3rem;
|
||||
align-items: center;
|
||||
margin-top: 5rem;
|
||||
.UpgradePlan_payList2_img{
|
||||
img{
|
||||
border-radius: 50%;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payList2_name,.UpgradePlan_payList2_unitPrice{
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.UpgradePlan_payList2_name{
|
||||
font-weight: 900;
|
||||
}
|
||||
.UpgradePlan_payList2_input{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
div{
|
||||
font-size: 4rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
input{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border: .2rem solid #f4f4f7;
|
||||
margin: 0 2rem;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payList2_describe{
|
||||
background: #f2f2f4;
|
||||
padding: 1rem 3rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.UpgradePlan_payList-item-upgrade{
|
||||
position: initial;
|
||||
transform: translate(0,0);
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payAffirm{
|
||||
width: 50rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 5rem;
|
||||
.UpgradePlan_payAffirm_title{
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payAffirm_content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 3rem 0;
|
||||
label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
cursor: pointer;
|
||||
border: .5rem solid #efefef;
|
||||
border-radius: 2rem;
|
||||
img{
|
||||
margin: 0rem 2rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payAffirm_clause{
|
||||
margin-bottom: 1.5rem;
|
||||
label{
|
||||
cursor: pointer;
|
||||
input{
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
span{
|
||||
vertical-align: top;
|
||||
a{
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.UpgradePlan_payList_item_upgrade_btn{
|
||||
display: flex;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
>div{
|
||||
position: relative;
|
||||
left: 0;
|
||||
transform: none;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.UpgradePlan_payList_item_upgrade1{
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 2px solid;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.UpgradePlan_closeIcon{
|
||||
top: calc(2rem*1.2);
|
||||
right: calc(2rem*1.2);
|
||||
cursor: pointer;
|
||||
width: calc(4rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
.fi-rr-cross-small::before{
|
||||
padding: calc(.2rem*1.2);
|
||||
border-radius: 5px;
|
||||
border: solid 2px rgba(0, 0, 0, 0.25);
|
||||
transition: 1s all;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
&.UpgradePlan_closeIcon:hover .fi-rr-cross-small::before{
|
||||
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style lang="less">
|
||||
.UpgradePlan_modal,.layout_modal{
|
||||
.ant-modal-content{
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
.ant-modal-header{
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
}
|
||||
.ant-modal-body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: calc(5rem*1.2) calc(5rem*1.2) !important;
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -27,7 +27,7 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="collection_closeIcon" :class="[driver__.driver?'hideEvents':'']">
|
||||
<div class="collection_closeIcon closeIcon" :class="[driver__.driver?'hideEvents':'']">
|
||||
<!-- <div class="header_right_block" @click.stop="">
|
||||
<div class="header_cancel_button" >Cancel</div>
|
||||
</div> -->
|
||||
@@ -338,26 +338,7 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
.collection_closeIcon{
|
||||
top: calc(2rem*1.2);
|
||||
right: calc(2rem*1.2);
|
||||
cursor: pointer;
|
||||
width: calc(4rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.fi-rr-cross-small::before{
|
||||
padding: calc(.2rem*1.2);
|
||||
border-radius: 5px;
|
||||
border: solid 2px rgba(0, 0, 0, 0.25);
|
||||
transition: 1s all;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
&.collection_closeIcon:hover .fi-rr-cross-small::before{
|
||||
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
}
|
||||
.collection_page{
|
||||
left: 50%;
|
||||
@@ -427,7 +408,7 @@ export default defineComponent({
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.collection_modal,.layout_modal{
|
||||
.collection_modal,.layout_modal,{
|
||||
// max-width: 1200px ;
|
||||
// max-width: 1150px ;
|
||||
.ant-modal-content{
|
||||
@@ -453,8 +434,4 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
// .ant-progress-circle .ant-progress-inner{
|
||||
// width: 8rem !important;
|
||||
// height: 8rem !important;
|
||||
// }
|
||||
</style>
|
||||
|
||||
516
src/component/Pay/payOrder.vue
Normal file
516
src/component/Pay/payOrder.vue
Normal file
@@ -0,0 +1,516 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="modal_component payOrder_modal"
|
||||
v-model:visible="showPayOrder"
|
||||
:footer="null"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="closeIcon">
|
||||
<!-- <div class="header_right_block" @click.stop="">
|
||||
<div class="header_cancel_button" >Cancel</div>
|
||||
</div> -->
|
||||
<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
|
||||
</div>
|
||||
<div class="history_page">
|
||||
<div class="page_content">
|
||||
<div class="page_content_body">
|
||||
<div class="history_page_body">
|
||||
<div class="history_table_search">
|
||||
<!-- <a-range-picker
|
||||
class="range_picker"
|
||||
v-model:value="rangePickerValue"
|
||||
:placeholder="[
|
||||
$t('HistoryPage.StartDate'),
|
||||
$t('HistoryPage.EndDate'),
|
||||
]"
|
||||
valueFormat="YYYY-MM-DD"
|
||||
>
|
||||
<template #suffixIcon>
|
||||
<span
|
||||
class="icon iconfont range_picker_icon icon-rili"
|
||||
></span>
|
||||
</template>
|
||||
</a-range-picker> -->
|
||||
<div class="content_search_block">
|
||||
<input
|
||||
class="search_input"
|
||||
:placeholder="
|
||||
$t('HistoryPage.inputContent1')
|
||||
"
|
||||
v-model="searchCollectionName"
|
||||
@keydown.enter="searchHistoryList()"
|
||||
/>
|
||||
<div
|
||||
class="search_icon_block"
|
||||
@click="searchHistoryList()"
|
||||
>
|
||||
<span
|
||||
class="icon iconfont icon-sousuo"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="history_table_content" ref="historyTable">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="collectionList"
|
||||
:scroll="{ y: historyTableHeight }"
|
||||
@change="changePage"
|
||||
:pagination="{
|
||||
showSizeChanger: true,
|
||||
current: currentPage,
|
||||
pageSize: pageSize,
|
||||
total: total,
|
||||
showQuickJumper: true,
|
||||
bordered: false,
|
||||
}"
|
||||
>
|
||||
<template
|
||||
#bodyCell="{ column, text, record, index }"
|
||||
>
|
||||
<div
|
||||
class="operate_list"
|
||||
v-if="column?.Operations"
|
||||
>
|
||||
<div
|
||||
class="operate_item"
|
||||
@click="refund(record)"
|
||||
>
|
||||
refund
|
||||
</div>
|
||||
<!-- <div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div> -->
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal
|
||||
class="modal_component refund_reason"
|
||||
v-model:visible="showRefundReason"
|
||||
:footer="null"
|
||||
width="30%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="closeIcon">
|
||||
<!-- <div class="header_right_block" @click.stop="">
|
||||
<div class="header_cancel_button" >Cancel</div>
|
||||
</div> -->
|
||||
<i class="fi fi-rr-cross-small" @click.stop="cancelRefundreason()"></i>
|
||||
</div>
|
||||
</a-modal>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, createVNode, computed, nextTick } from "vue";
|
||||
import HeaderComponent from "@/component/HomePage/Header.vue";
|
||||
import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { formatTime } from "@/tool/util";
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
HeaderComponent,
|
||||
HistoryDetail,
|
||||
RobotAssist,
|
||||
},
|
||||
setup() {
|
||||
let rangePickerValue: any = ref([]);
|
||||
let renameData: any = ref({}); //修改名字选中的数据
|
||||
const columns: any = computed(() => {
|
||||
return [
|
||||
{
|
||||
title: "Serial",
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
width: 90,
|
||||
dataIndex: "orderNo",
|
||||
key: " ",
|
||||
},
|
||||
{
|
||||
title: "Title",
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
width: 90,
|
||||
dataIndex: "title",
|
||||
key: "sketchCounts",
|
||||
},
|
||||
// { title: useI18n().t('HistoryPage.UptateTime'), align:'center', ellipsis: true,width: 90, dataIndex: 'updateDate', key: 'updateTime',customRender:(record:any)=>{
|
||||
// // let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
|
||||
// return record.record.updateTime
|
||||
// }},
|
||||
{
|
||||
title: "Money",
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
width: 90,
|
||||
dataIndex: "totalFee",
|
||||
key: "sketchCounts",
|
||||
},
|
||||
{
|
||||
title: "Payment",
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
width: 90,
|
||||
dataIndex: "paymentType",
|
||||
key: "sketchCounts",
|
||||
},
|
||||
{
|
||||
title: "State",
|
||||
align: "center",
|
||||
ellipsis: true,
|
||||
width: 90,
|
||||
dataIndex: "orderStatus",
|
||||
key: "sketchCounts",
|
||||
},
|
||||
|
||||
{
|
||||
title: useI18n().t("HistoryPage.Operations"),
|
||||
key: "operation",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 90,
|
||||
// slots:{customRender:'action'}
|
||||
Operations: true,
|
||||
},
|
||||
];
|
||||
});
|
||||
let showPayOrder: any = ref(false);
|
||||
let showRefundReason: any = ref(false);
|
||||
let collectionList: any = ref([]);
|
||||
let { t } = useI18n();
|
||||
return {
|
||||
rangePickerValue,
|
||||
columns,
|
||||
collectionList,
|
||||
showPayOrder,
|
||||
showRefundReason,
|
||||
renameData,
|
||||
t,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
historyTableHeight: 0,
|
||||
newCollectionName: "",
|
||||
groupDetails: {}, //每个collection的详情
|
||||
collectionName: "", //选中的名字
|
||||
searchCollectionName: "",
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
init() {
|
||||
console.log(123123);
|
||||
this.showPayOrder = true;
|
||||
this.getHistoryList();
|
||||
nextTick().then(() => {
|
||||
let history_table_content = document.getElementsByClassName(
|
||||
"history_table_content"
|
||||
)[0];
|
||||
console.log(history_table_content);
|
||||
this.historyTableHeight =
|
||||
history_table_content.scrollHeight - 130;
|
||||
});
|
||||
},
|
||||
cancelDsign() {//关闭订单页面
|
||||
this.showPayOrder = false;
|
||||
},
|
||||
cancelRefundreason(){//关闭退款页面
|
||||
this.showRefundReason = false;
|
||||
},
|
||||
//改变页码
|
||||
changePage(e: any) {
|
||||
this.currentPage = e.current;
|
||||
this.pageSize = e.pageSize;
|
||||
this.getHistoryList();
|
||||
},
|
||||
|
||||
//查询列表
|
||||
searchHistoryList() {
|
||||
this.currentPage = 1;
|
||||
this.getHistoryList();
|
||||
},
|
||||
|
||||
getHistoryList() {
|
||||
let startDate: any = this.rangePickerValue
|
||||
? new Date(this.rangePickerValue[0]).getTime()
|
||||
: "";
|
||||
let endDate: any = this.rangePickerValue
|
||||
? new Date(this.rangePickerValue[1]).getTime()
|
||||
: "";
|
||||
let data = {
|
||||
page: this.currentPage,
|
||||
size: this.pageSize,
|
||||
collectionName: this.searchCollectionName,
|
||||
startDate: startDate,
|
||||
endDate: endDate,
|
||||
};
|
||||
|
||||
Https.axiosGet(Https.httpUrls.orderInfoList).then((rv: any) => {
|
||||
console.log(rv);
|
||||
this.total = rv.length;
|
||||
console.log(this.total);
|
||||
this.collectionList = rv.slice(
|
||||
(this.currentPage - 1) * this.pageSize,
|
||||
(this.currentPage - 1) * this.pageSize + this.pageSize
|
||||
);
|
||||
});
|
||||
// Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
|
||||
// (rv: any) => {
|
||||
// this.collectionList = rv.content
|
||||
// this.total = rv.total
|
||||
// }
|
||||
// );
|
||||
},
|
||||
|
||||
//删除分组
|
||||
// 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}})
|
||||
console.log(record);
|
||||
this.showRefundReason = true
|
||||
// Https.axiosPost(
|
||||
// Https.httpUrls.tradeRefund + `/${record.orderNo}/${"123"}`,
|
||||
// {}
|
||||
// ).then((rv: any) => {
|
||||
// console.log(rv);
|
||||
// })
|
||||
// .catch((res) => {});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.payOrder_modal ,.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
.refund_reason{
|
||||
.ant-modal-content {
|
||||
.ant-modal-body {
|
||||
// height: calc(65vh - 6.4rem);
|
||||
height: calc(30rem * 1.2);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.payOrder_modal {
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
}
|
||||
.history_page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9rem;
|
||||
overflow: hidden;
|
||||
// min-width: 1440px;
|
||||
position: relative;
|
||||
|
||||
.page_content {
|
||||
position: relative;
|
||||
|
||||
.page_content_bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page_content_body {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.history_page_body {
|
||||
width: 100%;
|
||||
// height: calc(100% - 7rem);
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.history_header {
|
||||
font-size: 1.8rem;
|
||||
height: 6.3rem;
|
||||
line-height: 6.3rem;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.history_table_search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.range_picker {
|
||||
width: 36rem;
|
||||
height: 4.8rem;
|
||||
|
||||
.ant-picker-input > input {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.range_picker_icon {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content_search_block {
|
||||
margin-left: 4rem;
|
||||
display: flex;
|
||||
|
||||
.search_input {
|
||||
width: 32.8rem;
|
||||
padding-left: 1.5rem;
|
||||
height: 4.8rem;
|
||||
line-height: 4.6rem;
|
||||
background: #ffffff;
|
||||
border: 0.1rem solid #f1f1f1;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
|
||||
&::placeholder {
|
||||
color: #c2c2c2;
|
||||
}
|
||||
}
|
||||
|
||||
.search_icon_block {
|
||||
width: 7.2rem;
|
||||
height: 4.8rem;
|
||||
line-height: 4.8rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-sousuo {
|
||||
font-size: 2rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history_table_content {
|
||||
margin-top: 2.6rem;
|
||||
width: 100%;
|
||||
// height: calc(100% - 13.7rem);
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
padding-bottom: 3rem;
|
||||
.ant-table {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ant-table-body {
|
||||
overflow-y: auto !important;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr {
|
||||
&:hover > td {
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table-pagination-right {
|
||||
padding-right: 3.5rem;
|
||||
}
|
||||
|
||||
.operate_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem;
|
||||
|
||||
.operate_item {
|
||||
font-size: 1.4rem;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
color: #343579;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user