支付组件
This commit is contained in:
aixianling
@@ -1,333 +0,0 @@
|
||||
<template>
|
||||
<div class="ai-article">
|
||||
<div v-html="value"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AiArticle',
|
||||
|
||||
props: {
|
||||
value: {
|
||||
type: String
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-article {
|
||||
width: 100%;
|
||||
line-height: 1.75;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
text-align: justify;
|
||||
overflow-x: auto;
|
||||
word-break: break-word;
|
||||
|
||||
:deep( h1 ){
|
||||
margin: 1.3rem 0;
|
||||
line-height: 1.2
|
||||
}
|
||||
|
||||
:deep( p ){
|
||||
line-height: 2.27rem
|
||||
}
|
||||
|
||||
:deep( hr ){
|
||||
border: none;
|
||||
border-top: 1px solid #ddd;
|
||||
margin-top: 2.7rem;
|
||||
margin-bottom: 2.7rem
|
||||
}
|
||||
|
||||
:deep( img:not(.equation)), :deep( iframe), :deep( embed), :deep( video ){
|
||||
display: block;
|
||||
margin: 18px auto;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
:deep( img.equation ){
|
||||
margin: 0 .1em;
|
||||
max-width: 100% !important;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
:deep( figure ){
|
||||
margin: 2.7rem auto;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
:deep( img:not(.equation) ){
|
||||
cursor: zoom-in
|
||||
}
|
||||
|
||||
:deep( figure figcaption ){
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
line-height: 2.7rem;
|
||||
color: #909090
|
||||
}
|
||||
|
||||
:deep( pre ){
|
||||
line-height: 1.93rem;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
:deep( code),
|
||||
:deep( pre ){
|
||||
font-family: Menlo, Monaco, Consolas, Courier New, monospace
|
||||
}
|
||||
|
||||
:deep( code ){
|
||||
font-size: 1rem;
|
||||
padding: .26rem .53em;
|
||||
word-break: break-word;
|
||||
color: #4e5980;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 2px;
|
||||
overflow-x: auto
|
||||
}
|
||||
|
||||
:deep( pre>code ){
|
||||
font-size: 1rem;
|
||||
padding: .67rem 1.3rem;
|
||||
margin: 0;
|
||||
word-break: normal;
|
||||
display: block
|
||||
}
|
||||
|
||||
:deep( a ){
|
||||
color: #259
|
||||
}
|
||||
|
||||
:deep( a:active),
|
||||
:deep( a:hover ){
|
||||
color: #275b8c
|
||||
}
|
||||
|
||||
:deep( table ){
|
||||
width: 100%;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 18px;
|
||||
overflow: auto;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid #ccc;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
|
||||
:deep( thead ){
|
||||
background: #f6f6f6;
|
||||
color: #000;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
:deep( td),
|
||||
:deep( th ){
|
||||
padding: 3px 5px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
:deep( td ){
|
||||
min-width: 10rem
|
||||
}
|
||||
|
||||
:deep( blockquote ){
|
||||
margin: 1em 0;
|
||||
border-left: 4px solid #ddd;
|
||||
padding: 0 1.3rem
|
||||
}
|
||||
|
||||
:deep( blockquote>p ){
|
||||
margin: .6rem 0
|
||||
}
|
||||
|
||||
:deep( ol),
|
||||
:deep( ul ){
|
||||
padding-left: 2.7rem
|
||||
}
|
||||
|
||||
:deep( ol li),
|
||||
:deep( ul li ){
|
||||
margin-bottom: .6rem
|
||||
}
|
||||
|
||||
:deep( ol ol),
|
||||
:deep( ol ul),
|
||||
:deep( ul ol),
|
||||
:deep( ul ul ){
|
||||
margin-top: .27rem
|
||||
}
|
||||
|
||||
:deep( pre>code ){
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
color: #333;
|
||||
background: #f8f8f8
|
||||
}
|
||||
|
||||
:deep( p ){
|
||||
line-height: inherit;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 18px
|
||||
}
|
||||
:deep( p:first-child){
|
||||
margin-top: 0!important;
|
||||
}
|
||||
:deep( img ){
|
||||
max-height: none
|
||||
}
|
||||
|
||||
:deep( a ){
|
||||
color: #0269c8;
|
||||
border-bottom: 1px solid #d1e9ff
|
||||
}
|
||||
|
||||
:deep( code ){
|
||||
background-color: #fff5f5;
|
||||
color: #ff502c;
|
||||
font-size: .87em;
|
||||
padding: .065em .4em
|
||||
}
|
||||
|
||||
:deep( blockquote ){
|
||||
color: #666;
|
||||
padding: 1px 23px;
|
||||
margin: 18px 0;
|
||||
border-left: 4px solid #cbcbcb;
|
||||
background-color: #f8f8f8
|
||||
}
|
||||
|
||||
:deep( blockquote:after ){
|
||||
display: block;
|
||||
content: ""
|
||||
}
|
||||
|
||||
:deep( blockquote>p ){
|
||||
margin: 10px 0
|
||||
}
|
||||
|
||||
:deep( blockquote.warning ){
|
||||
position: relative;
|
||||
border-left-color: #f75151;
|
||||
margin-left: 8px
|
||||
}
|
||||
|
||||
:deep( blockquote.warning:before ){
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: -12px;
|
||||
background: #f75151;
|
||||
border-radius: 50%;
|
||||
content: "!";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
:deep( ol),
|
||||
:deep( ul ){
|
||||
padding-left: 28px
|
||||
}
|
||||
|
||||
:deep( ol li),
|
||||
:deep( ul li ){
|
||||
margin-bottom: 0;
|
||||
list-style: inherit
|
||||
}
|
||||
|
||||
:deep( ol li.task-list-item),
|
||||
:deep( ul li.task-list-item ){
|
||||
list-style: none
|
||||
}
|
||||
|
||||
:deep( ol li.task-list-item ol),
|
||||
:deep( ol li.task-list-item ul),
|
||||
:deep( ul li.task-list-item ol),
|
||||
:deep( ul li.task-list-item ul ){
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
:deep( ol li ){
|
||||
padding-left: 6px
|
||||
}
|
||||
|
||||
:deep( pre ){
|
||||
position: relative;
|
||||
line-height: 1.75
|
||||
}
|
||||
|
||||
:deep( pre>code ){
|
||||
padding: 15px 12px
|
||||
}
|
||||
|
||||
:deep( pre>code.hljs[lang] ){
|
||||
padding: 18px 15px 12px
|
||||
}
|
||||
|
||||
:deep( h1),
|
||||
:deep( h2),
|
||||
:deep( h3),
|
||||
:deep( h4),
|
||||
:deep( h5),
|
||||
:deep( h6 ){
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
margin-top: 35px;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep( h1 ){
|
||||
font-size: 30px;
|
||||
margin-bottom: 5px
|
||||
}
|
||||
|
||||
:deep( h2 ){
|
||||
padding-bottom: 12px;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ececec
|
||||
}
|
||||
|
||||
:deep( h3 ){
|
||||
font-size: 18px;
|
||||
padding-bottom: 0
|
||||
}
|
||||
|
||||
:deep( h4 ){
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
:deep( h5 ){
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
:deep( h6 ){
|
||||
margin-top: 5px
|
||||
}
|
||||
|
||||
:deep( h1.heading+h2.heading ){
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
:deep( h1.heading+h3.heading ){
|
||||
margin-top: 15px
|
||||
}
|
||||
|
||||
:deep( .heading+.heading ){
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
:deep( h1+:not(.heading) ){
|
||||
margin-top: 25px
|
||||
}
|
||||
}
|
||||
</style>
|
||||
180
src/components/AiPayment.vue
Normal file
180
src/components/AiPayment.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<section class="AiPayment">
|
||||
<el-tabs type="card" stretch v-model="search.module" @tab-click="getPayments">
|
||||
<el-tab-pane label="基础会员" name="0"/>
|
||||
<el-tab-pane label="金币充值" name="1"/>
|
||||
</el-tabs>
|
||||
<div class="content">
|
||||
<div class="payments mb-16">
|
||||
<div class="card" v-for="pay in payments" :key="pay.id" :class="{active:pay.id==selected}"
|
||||
@click="getQrcode(pay.id)">
|
||||
<div v-text="pay.title"/>
|
||||
<div class="c-red mt-16" v-text="`￥${pay.price}`"/>
|
||||
</div>
|
||||
</div>
|
||||
<el-row type="flex" align="middle">
|
||||
<ul class="fill">
|
||||
<li v-for="(desc,i) in descriptions" :key="i" v-text="desc"/>
|
||||
</ul>
|
||||
<div class="fill flex-center">
|
||||
<vue-qr v-if="qrcode" :text="qrcode" :size="120" :margin="8" :logoSrc="wechatLogo"/>
|
||||
<div v-else class="qrcode c-666">请选择<br>支付方案</div>
|
||||
<div class="c-999 ml-16">
|
||||
<div class="flex-center mb-16">
|
||||
应付金额：￥{{ amount }}
|
||||
</div>
|
||||
<div class="wechat flex-center">
|
||||
微信扫码支付
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
<div class="bottom flex-center">
|
||||
<el-button size="small">取消支付</el-button>
|
||||
<el-button size="small">已扫码支付</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import VueQr from "vue-qr"
|
||||
|
||||
export default {
|
||||
name: "AiPayment",
|
||||
components: {VueQr},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
search: {module: "0"},
|
||||
show: true,
|
||||
descriptions: ["抢仓发货", "数据下载", "复制商品", "会员服务"],
|
||||
payments: [],
|
||||
qrcode: "",
|
||||
amount: 0,
|
||||
selected: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wechatLogo: v => require("../assets/wechat_logo.png")
|
||||
},
|
||||
methods: {
|
||||
getPayments() {
|
||||
this.$http.post("/api/priceConfig/page", null, {
|
||||
params: {...this.search}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.payments = res.data.records || []
|
||||
}
|
||||
})
|
||||
},
|
||||
getQrcode(priceConfigId) {
|
||||
this.selected = priceConfigId
|
||||
this.$http.post("/api/order/createOrder", null, {
|
||||
params: {priceConfigId}
|
||||
}).then(res => {
|
||||
if (res?.data?.id) {
|
||||
return res.data.id
|
||||
}
|
||||
}).then(id => this.$http.post("/api/order/createPrepayOrder", null, {
|
||||
params: {id}
|
||||
})).then(res => {
|
||||
if (res?.data) {
|
||||
this.qrcode = res.data.codeUrl
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getPayments()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.AiPayment {
|
||||
font-size: 16px;
|
||||
|
||||
:deep(.el-tabs) {
|
||||
z-index: 4;
|
||||
|
||||
.is-active {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 16px;
|
||||
|
||||
li {
|
||||
list-style-type: circle;
|
||||
}
|
||||
}
|
||||
|
||||
.payments {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 32px;
|
||||
|
||||
.card {
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
border: 1px solid #ddd;
|
||||
padding: 32px 64px;
|
||||
border-radius: 4px;
|
||||
|
||||
&.active {
|
||||
border-color: #26f;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 16px;
|
||||
content: "✔";
|
||||
color: white;
|
||||
background: #26f;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px 32px;
|
||||
margin-top: -16px;
|
||||
border: 1px solid #ddd;
|
||||
z-index: 9;
|
||||
|
||||
.qrcode {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background-color: #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.wechat {
|
||||
line-height: 20px;
|
||||
padding-left: 28px;
|
||||
background-image: url("../assets/wechat_logo.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
justify-content: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user