aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

支付页面

Browse Source
This commit is contained in:
X1627315083
2024-02-19 09:38:47 +08:00
parent 31d2e71ab7
commit b61782b9ec
11 changed files with 1234 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.dev
View File

@@ -5,4 +5,4 @@ NODE_ENV = 'development'
# VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
# VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
# VUE_APP_BASE_URL = 'http://192.168.1.6:7766'
# VUE_APP_BASE_URL = '18.167.251.121:17088'

47
src/assets/style/style.css
View File

@@ -595,14 +595,36 @@ li {
.libraryPageCascader .ant-cascader-menu {
margin-top: 4rem;
}
.closeIcon {
position: absolute;
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;
}
.closeIcon .fi-rr-cross-small::before {
padding: calc(0.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);
}
.closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before {
border: solid 2px rgba(0, 0, 0, 0.55);
color: #000000;
}
.collection_modal .ant-modal-body,
.design_detail_modal_component .ant-modal-body,
.payOrder_modal.design_detail_modal_component .ant-modal-body,
.designOpenrtion_modal .ant-modal-body,
.library_page .ant-modal-body {
overflow-y: hidden;
}
.collection_modal .design_title_text,
.design_detail_modal_component .design_title_text,
.payOrder_modal.design_detail_modal_component .design_title_text,
.designOpenrtion_modal .design_title_text,
.library_page .design_title_text {
font-size: var(--aida-fsize2);
@@ -612,7 +634,7 @@ li {
margin-bottom: calc(2rem*1.2);
}
.collection_modal .design_title_text .design_title_text_intro,
.design_detail_modal_component .design_title_text .design_title_text_intro,
.payOrder_modal.design_detail_modal_component .design_title_text .design_title_text_intro,
.designOpenrtion_modal .design_title_text .design_title_text_intro,
.library_page .design_title_text .design_title_text_intro {
font-size: var(--aida-fsize1-4);
@@ -620,7 +642,7 @@ li {
color: rgba(0, 0, 0, 0.45);
}
.collection_modal .ant-upload.ant-upload-select-picture-card,
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card,
.payOrder_modal.design_detail_modal_component .ant-upload.ant-upload-select-picture-card,
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card,
.library_page .ant-upload.ant-upload-select-picture-card {
background: #FFFFFF;
@@ -631,27 +653,27 @@ li {
margin: 0;
}
.collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.payOrder_modal.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.library_page .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
font-size: calc(3.2rem*1.2);
color: #B7B7B7;
}
.collection_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.payOrder_modal.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.library_page .ant-upload.ant-upload-select-picture-card .ant-upload-text {
font-size: calc(1.6rem*1.2);
color: #B7B7B7;
}
.collection_modal .ant-upload-list-picture-card-container,
.design_detail_modal_component .ant-upload-list-picture-card-container,
.payOrder_modal.design_detail_modal_component .ant-upload-list-picture-card-container,
.designOpenrtion_modal .ant-upload-list-picture-card-container,
.library_page .ant-upload-list-picture-card-container {
display: none !important;
}
.collection_modal .ant-upload-picture-card-wrapper,
.design_detail_modal_component .ant-upload-picture-card-wrapper,
.payOrder_modal.design_detail_modal_component .ant-upload-picture-card-wrapper,
.designOpenrtion_modal .ant-upload-picture-card-wrapper,
.library_page .ant-upload-picture-card-wrapper {
width: auto;
@@ -683,16 +705,19 @@ li {
color: #000000;
}
.design_detail_modal_component .ant-upload-list-picture-card-container,
.designOpenrtion_modal .ant-upload-list-picture-card-container {
.designOpenrtion_modal .ant-upload-list-picture-card-container,
.UpgradePlan_modal .ant-upload-list-picture-card-container {
display: none !important;
}
.design_detail_modal_component .ant-upload-picture-card-wrapper,
.designOpenrtion_modal .ant-upload-picture-card-wrapper {
.designOpenrtion_modal .ant-upload-picture-card-wrapper,
.UpgradePlan_modal .ant-upload-picture-card-wrapper {
width: auto;
vertical-align: top;
}
.design_detail_modal_component .subitOkPreviewBtn,
.designOpenrtion_modal .subitOkPreviewBtn {
.designOpenrtion_modal .subitOkPreviewBtn,
.UpgradePlan_modal .subitOkPreviewBtn {
background-color: #38205b;
color: #fff;
cursor: pointer;

42
src/assets/style/style.less
View File

@@ -578,20 +578,7 @@ ul,li{
// .ant-select-dropdown{
// z-index: 10001;
// }
//提示框样式
.ant-modal-root{
.ant-modal-wrap{
.ant-modal-confirm-confirm{
.ant-modal-content{
.ant-modal-body{
.ant-modal-confirm-body-wrapper{
}
}
}
}
}
}
.ant-message-info .anticon{
// color: #b2b2b2;
}
@@ -711,8 +698,31 @@ ul,li{
margin-top: 4rem;
}
}
.closeIcon{
position: absolute;
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 弹窗
.collection_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page{
.collection_modal,.payOrder_modal.design_detail_modal_component,.designOpenrtion_modal,.library_page{
.ant-modal-body{
overflow-y: hidden;
@@ -781,7 +791,7 @@ ul,li{
}
}
}
.design_detail_modal_component,.designOpenrtion_modal{
.design_detail_modal_component,.designOpenrtion_modal,.UpgradePlan_modal{
.ant-upload-list-picture-card-container{
display: none !important;
}

15
src/component/HomePage/Header.vue
View File

@@ -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
View 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>

29
src/component/HomePage/collectionModal.vue
View File

@@ -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
View 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>

5
src/router/index.ts
View File

@@ -36,6 +36,11 @@ const routes: Array<RouteRecordRaw> = [
name: 'history',
component: _import('HistoryPage')
},
{
path: '/paySucceed',
name: 'paySucceed',
component: _import('paySucceed')
},
{
path: '/oldHistory',
name: 'oldHistory',

16
src/tool/https.js
View File

@@ -25,11 +25,12 @@ import { message } from 'ant-design-vue';
// }else{
// httpIp = ''
// }
// let httpIp = process.env.NODE_ENV == 'development' ? "" : "";
let httpIp = process.env.NODE_ENV == 'development' ? "http://192.168.1.7/:10086" : "";
let httpIp = process.env.NODE_ENV == 'development' ? "" : "";
// let httpIp = process.env.NODE_ENV == 'development' ? "https://192.168.0.102:10086" : "";
// console.log(httpIp,process.env.VUE_APP_BASE_URL);
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
axios.defaults.baseURL = httpIp; //配置接口地址
// axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
// console.log(process.env.VUE_APP_BASE_URL);
//POST传参序列化(添加请求拦截器)
@@ -126,11 +127,18 @@ export const Https = {
elementSavePrint:'/api/element/savePrint',//保存印花
getRgbByTcx:'/api/element/getRgbByTcx', // 通过hsv值获取潘通信息
getRgbByHsv:'/api/element/getRgbByHsv', //通过hsv值获取潘通信息
designCollection:`/api/design/designCollection`, //设计 Conllection
designCollection:`/robot/design/designCollection`, //设计 Conllection
reDesignCollection:`/api/design/reDesignCollection`,//重新设计 Conllection
countDesignProcess:'/api/design/countDesignProcess', //统计design进度
designProcess:`/api/design/designProcess`, //统计design进度
designGetModel:`/api/design/getModel`, //导出获取模特链接
//充值相关
productList:`/api/product/list`, //获取商品列表
pagePay:`/api/ali-pay/trade/page/pay`, //支付宝确认支付
orderInfoList:`/api/order-info/list`, //查询订单列表
tradeRefund:`/api/ali-pay/trade/refund`, //查询订单列表
tradeQuery:`/api/ali-pay/trade/query/{orderNo}`, //查询订单状态
getRgbByHsvBatch:`/api/element/getRgbByHsvBatch`, //通过hsv值数组批量获取潘通信息
designLike:`/api/design/like`, //Design Like

108
src/views/paySucceed.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<div class="paySucceed_page">
<HeaderComponent></HeaderComponent>
<div class="paySucceed_centent">
<div class="paySucceed_centent_title"><i class="fi fi-ss-check-circle"></i>支付成功</div>
<div class="paySucceed_centent_btn">
<div class=" button_second" @click="turnToPage('home')">返回首页</div>
<div class=" button_second" @click="turnToPage('order')">查看订单</div>
</div>
</div>
<payOrder ref="payOrder"></payOrder>
<RobotAssist></RobotAssist>
</div>
</template>
<script lang="ts">
import { defineComponent,ref,createVNode,computed} from 'vue'
import HeaderComponent from "@/component/HomePage/Header.vue";
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
import payOrder from "@/component/Pay/payOrder.vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from 'vue-i18n';
export default defineComponent({
components: {
HeaderComponent,
RobotAssist,
payOrder,
},
setup() {
let {t} = useI18n()
return {
t,
}
},
data(){
return{
}
},
mounted(){
},
methods:{
turnToPage(name:any) {
if(name == 'order'){
let payOrder:any = this.$refs.payOrder
payOrder.init()
}else {
let noRefresh:any = name === "home" ? true : false;
this.$router.push({ name: name, params: { noRefresh: noRefresh } });
}
},
//确定修改名字
// confrimRename(){
// let data = {
// timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
// userGroupId: this.renameData.id,
// userGroupName: this.newCollectionName
// }
// Https.axiosPost(Https.httpUrls.updateUserGroupName,data).then(
// (rv: any) => {
// message.success(this.t('HistoryPage.jsContent3'))
// this.collectionList[this.renameData.index].name = this.newCollectionName
// this.collectionList[this.renameData.index].updateDate = rv.updateDate
// this.renameVisivle = false
// this.newCollectionName = ''
// this.renameData = {}
// }
// );
// },
}
})
</script>
<style lang="less">
.paySucceed_page {
width: 100%;
height: 100%;
padding: 0 9rem;
overflow: hidden;
// min-width: 1440px;
position: relative;
.paySucceed_centent{
margin-top: 20rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.paySucceed_centent_title{
font-size: 1.8rem;
font-weight: 900;
i{
color: green;
margin-right: 1rem;
}
}
.paySucceed_centent_btn{
display: flex;
margin-top: 10rem;
.button_second{
margin: 0 2.5rem;
}
}
}
}
</style>

2
vue.config.js
View File

@@ -23,7 +23,7 @@ module.exports = defineConfig({
changeOrigin:true,
},
'/robot':{
target:'http://18.167.251.121:9991',
target:'http://18.167.251.121:17088',
changeOrigin:true,
pathRewrite:{
'^/robot': 'api', // api替换成api