1188 行
40 KiB
HTML
可执行文件
1188 行
40 KiB
HTML
可执行文件
<!--[1.8.50]-->
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
height: 350px;
|
||
display: flex;
|
||
border: 1px solid #eeeeee;
|
||
background-color: #fffffd;
|
||
padding: 28px 90px;
|
||
}
|
||
|
||
.swiper {
|
||
margin-right: 100px;
|
||
width: 220px;
|
||
height: 330px;
|
||
}
|
||
|
||
.swiper_item {
|
||
/* width: 220px;
|
||
height: 290px; */
|
||
}
|
||
|
||
.swiper_item img {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
max-height: 290px;
|
||
}
|
||
|
||
.application {
|
||
display: flex;
|
||
}
|
||
|
||
.logo {
|
||
margin-right: 28px;
|
||
}
|
||
|
||
.logo img {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
|
||
.name {
|
||
margin: 0;
|
||
}
|
||
|
||
.detail_text {
|
||
font-size: 14px;
|
||
color: #999999;
|
||
}
|
||
|
||
.version_text {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
}
|
||
|
||
.detail_tag {
|
||
height: 70px;
|
||
line-height: 70px;
|
||
}
|
||
|
||
.money {
|
||
font-size: 18px;
|
||
color: #fe5757;
|
||
}
|
||
|
||
.rowline {
|
||
border-bottom: 1px dashed #cccccc;
|
||
margin: 24px 0 26px;
|
||
}
|
||
|
||
.money span {
|
||
font-size: 30px;
|
||
}
|
||
|
||
.buy_btn {
|
||
width: 120px;
|
||
height: 36px;
|
||
text-align: center;
|
||
line-height: 36px;
|
||
background-color: #409eff;
|
||
border-radius: 2px;
|
||
font-size: 14px;
|
||
color: #ffffff;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.buyed_btn {
|
||
background-color: #d3d3d3;
|
||
}
|
||
|
||
.tab {
|
||
border: 1px solid #eeeeee;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.el-tabs__nav-wrap::after {
|
||
height: 1px;
|
||
}
|
||
|
||
.el-tabs__nav-scroll {
|
||
padding-left: 70px;
|
||
}
|
||
|
||
.application_content {
|
||
padding: 0 30px;
|
||
}
|
||
|
||
.application_content .content_top {
|
||
padding-bottom: 20px;
|
||
margin-bottom: 20px;
|
||
border-bottom: 1px solid #eeeeee;
|
||
}
|
||
|
||
.promoto {
|
||
width: 100%;
|
||
}
|
||
|
||
.promoto img {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.version {
|
||
position: relative;
|
||
padding-right: 34px;
|
||
}
|
||
|
||
.line {
|
||
width: 1px;
|
||
height: 100%;
|
||
position: absolute;
|
||
background-color: #eeeeee;
|
||
top: 0px;
|
||
left: 180px;
|
||
}
|
||
|
||
.timeline_box {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.time {
|
||
width: 180px;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.time_box {
|
||
text-align: center;
|
||
}
|
||
|
||
.year {
|
||
font-size: 16px;
|
||
color: #999999;
|
||
}
|
||
|
||
.date {
|
||
font-size: 20px;
|
||
color: #409eff;
|
||
}
|
||
|
||
.time::before {
|
||
content: '';
|
||
display: block;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 10px;
|
||
background-color: #409eff;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translate(50%, -50%);
|
||
}
|
||
|
||
.version_message {
|
||
width: 86%;
|
||
border-radius: 5px;
|
||
border: 1px solid #eeeeee;
|
||
position: relative;
|
||
}
|
||
|
||
.version_message::before {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
width: 15px;
|
||
height: 15px;
|
||
background-color: #ffffff;
|
||
border-bottom: 1px solid #eeeeee;
|
||
border-left: 1px solid #eeeeee;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%) rotate(45deg);
|
||
}
|
||
|
||
.version_title {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
background-color: #f7f7f7;
|
||
font-size: 18px;
|
||
color: #333333;
|
||
padding: 0 18px 0 30px;
|
||
}
|
||
|
||
.version_content {
|
||
padding: 20px 30px;
|
||
}
|
||
|
||
.el-icon-price-tag {
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.order {}
|
||
|
||
.el-dialog__body {
|
||
padding: 0;
|
||
}
|
||
|
||
.order_info {
|
||
height: 132px;
|
||
padding: 0 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-top: 1px solid #eeeeee;
|
||
}
|
||
|
||
.order_detail {
|
||
display: flex;
|
||
}
|
||
|
||
.order_info img {
|
||
width: 80px;
|
||
height: 80px;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.order_name {
|
||
font-size: 20px;
|
||
color: #333333;
|
||
}
|
||
|
||
.order_text {
|
||
font-size: 14px;
|
||
color: #999999;
|
||
margin: 5px 0 10px;
|
||
}
|
||
|
||
.order_money {
|
||
font-size: 16px;
|
||
color: #fe5757;
|
||
}
|
||
|
||
.order_footer {
|
||
width: 100%;
|
||
height: 74px;
|
||
background-color: #f7f7f7;
|
||
padding: 0 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 160px;
|
||
}
|
||
|
||
.pay_box {
|
||
padding-bottom: 50px;
|
||
}
|
||
|
||
.pay_bar {
|
||
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
height: 40px;
|
||
display: flex;
|
||
padding: 0 50px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-top: 1px solid #eeeeee;
|
||
border-bottom: 1px solid #eeeeee;
|
||
}
|
||
|
||
.pay_bar>div {
|
||
/* flex: 1; */
|
||
width: 50%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.pay_type {
|
||
width: fit-content;
|
||
margin: auto;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.check {
|
||
border-bottom: 2px solid #409eff;
|
||
}
|
||
|
||
#qrcode {
|
||
width: 180px;
|
||
height: 180px;
|
||
margin: 40px auto 10px;
|
||
}
|
||
|
||
.qrcode_tip {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
text-align: center;
|
||
}
|
||
|
||
.order_success {
|
||
padding-bottom: 40px;
|
||
}
|
||
|
||
.success_img {
|
||
width: 130px;
|
||
height: 130px;
|
||
margin: 30px auto;
|
||
}
|
||
|
||
.success_img img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.success_tip {
|
||
font-size: 14px;
|
||
color: #666666;
|
||
text-align: center;
|
||
}
|
||
|
||
.install {
|
||
margin: 30px auto 0;
|
||
}
|
||
|
||
.el-dialog--center .el-dialog__body {
|
||
text-align: center;
|
||
}
|
||
|
||
.txt3 {
|
||
font-size: 14px;
|
||
color: #999;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.txt4 {
|
||
font-size: 14px;
|
||
color: #409EFF;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
|
||
.buttons {
|
||
display: flex;
|
||
}
|
||
|
||
.buttons .buy_btn {
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.buttons .buy_btn:focus {
|
||
outline: none
|
||
}
|
||
|
||
.buttons .buy_btn.disabled {
|
||
cursor: not-allowed;
|
||
background-color: #d3d3d3;
|
||
}
|
||
|
||
.blessing .el-dialog,
|
||
.little-gift .el-dialog {
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.blessing .header {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
background-color: #f1f1f1;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.blessing .title {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.blessing .description {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.blessing .rows {
|
||
margin: 15px 0;
|
||
padding: 0 20px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.blessing .rows .first {
|
||
width: 90px;
|
||
}
|
||
|
||
.blessing .rows .row:nth-child(2) {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.blessing .duration-day {
|
||
width: 50px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.blessing .size .el-input__inner,
|
||
.blessing .duration-day .el-input__inner {
|
||
padding: 0 5px;
|
||
}
|
||
|
||
.blessing .size {
|
||
width: 80px;
|
||
margin: 0 5px;
|
||
}
|
||
|
||
.blessing .error input {
|
||
border-color: #f56c6c;
|
||
}
|
||
|
||
.little-gift .el-form {
|
||
padding: 0 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.little-gift .el-dialog__header {
|
||
border-bottom: 1px solid #DCDFE6;
|
||
}
|
||
|
||
.little-gift .tips {
|
||
padding: 0 15px 0 30px;
|
||
margin-top: 20px;
|
||
color: #f56c6c;
|
||
}
|
||
</style>
|
||
<div id="detail" v-loading="loading" v-cloak>
|
||
<el-card class="box-card">
|
||
<div class="content">
|
||
<el-carousel class="swiper" indicator-position="outside">
|
||
<el-carousel-item class="swiper_item" v-for="(item,index) in pulginInfo.carousel">
|
||
<img :src="item" alt="">
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<div class="application">
|
||
<div class="logo">
|
||
<img :src="pulginInfo.addon_logo" alt="">
|
||
</div>
|
||
<div class="application_detail">
|
||
<h4 class="name">
|
||
{{pulginInfo.name}}
|
||
</h4>
|
||
<div class="detail_text version_text">版本号：{{pulginInfo.branch_versions}}</div>
|
||
<div class="detail_text">
|
||
{{pulginInfo.desc}}
|
||
</div>
|
||
<div class="detail_text detail_tag">
|
||
<span style="display: inline-block;margin-right: 10px;"
|
||
v-for="(item,index) in pulginInfo.label_name"><i class="el-icon-price-tag"></i> {{item}}
|
||
</span>
|
||
</div>
|
||
<div class="money">￥<span>{{pulginInfo.price}}</span></div>
|
||
<div class="rowline"></div>
|
||
<div class="buttons">
|
||
<div class="buy_btn" @click="open" v-if="is_buy == 0">立即购买</div>
|
||
<div class="buy_btn" @click="setUp" v-if="is_buy==1&&is_install==0">一键安装</div>
|
||
<div class="buy_btn" @click="renewal" v-if="is_buy == 1&&is_install==1&&upgrade==1">版本更新</div>
|
||
<div class="buy_btn buyed_btn" v-if="is_buy == 1&&is_install==1&&upgrade==2">已购买</div>
|
||
<el-popover placement="top" width="200" :disabled="is_buy==1&&is_install==1" trigger="hover"
|
||
content="购买且安装后可点击！">
|
||
<div class="buy_btn" slot="reference" :class="{disabled: is_buy!=1||is_install!=1}"
|
||
v-show="['blessing', 'littlegift'].includes(identification)" @click="showSettingDialog">
|
||
设置</div>
|
||
</el-popover>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab">
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="应用详情" name="first">
|
||
<div class="application_content">
|
||
<p class="content_top">发布时间：{{pulginInfo.create_time}} 最后更新时间：{{pulginInfo.update_time}}</p>
|
||
<div class="promoto" v-html="pulginInfo.content">
|
||
{{pulginInfo.content}}
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="版本介绍" name="second">
|
||
<div class="version">
|
||
<div class="line"></div>
|
||
<div class="timeline_box" v-for="(item,index) in version">
|
||
<div class="time">
|
||
<div class="time_box">
|
||
<span class="year">{{item.year_month_day_time | yearAndMonth}}</span><br>
|
||
<span class="date">{{item.year_month_day_time | getData}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="version_message">
|
||
<div class="version_title">版本号：v{{item.versions}}</div>
|
||
<div class="version_content">
|
||
<pre>{{item.content}}</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-dialog title="确认订单信息" :append-to-body="true" :visible.sync="dialogVisible" width="518px"
|
||
:close-on-click-modal="false" :before-close="handleClose">
|
||
<div class="order" v-if="state !== 3">
|
||
<div class="order_info">
|
||
<div class="order_detail">
|
||
<img :src="pulginInfo.addon_logo" alt="">
|
||
<div>
|
||
<div class="order_name">{{pulginInfo.name}}</div>
|
||
<div class="order_text">适用系统：零售</div>
|
||
<div class="order_money">￥{{pulginInfo.price}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="order_text">数量*1</div>
|
||
</div>
|
||
<div style="padding: 0 30px;" v-if="state === 2">
|
||
<div class="pay_box">
|
||
<div class="pay_bar">
|
||
<div v-if="isAli == 1">
|
||
<div @click="switchPay(1)" class="pay_type" :class="isCheck === 1 ? 'check' : ''">支付宝
|
||
</div>
|
||
</div>
|
||
<div v-if="isWechat == 1">
|
||
<div @click="switchPay(2)" class="pay_type" :class="isCheck === 2 ? 'check' : ''">微信
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="qrcode"></div>
|
||
<div class="qrcode_tip" v-if="isCheck === 1">打开手机支付宝扫一扫</div>
|
||
<div class="qrcode_tip" v-if="isCheck === 2">打开手机微信扫一扫</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="order_footer" v-if="state === 1">
|
||
<div>待支付：￥{{pulginInfo.price}}</div>
|
||
<div class="buy_btn" @click="goPay">立即支付</div>
|
||
</div>
|
||
</div>
|
||
<div class="order" v-if="state === 3">
|
||
<div class="order_success">
|
||
<div class="success_img">
|
||
<img src="/Public/plug/img/success.png">
|
||
</div>
|
||
<div class="success_tip">
|
||
恭喜您已成功购买“{{pulginInfo.name}}"应用套餐，<br> 一键安装即可应用！
|
||
</div>
|
||
<div class="buy_btn install" @click="setUp">一键安装</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 进度条 -->
|
||
<el-dialog title="安装" :append-to-body="true" width="18%" top="30vh" center :visible.sync="dialogTableVisible"
|
||
:close-on-click-modal="false">
|
||
<el-progress type="circle" :percentage="percent" :show-text="text" v-if="install_type != 1"></el-progress>
|
||
<span slot="footer" class="dialog-footer" v-if="install_type == 3">
|
||
<div class="txt4">安装成功</div>
|
||
<el-button type="primary" @click="makeSure">确 定</el-button>
|
||
</span>
|
||
<span slot="footer" class="dialog-footer" v-else-if="install_type == 4">
|
||
<div class="txt4">安装失败，请联系客服进行处理</div>
|
||
<el-button type="primary" @click="dialogTableVisible=false">关 闭</el-button>
|
||
</span>
|
||
<span slot="footer" class="dialog-footer" v-else-if="install_type == 2">
|
||
<div class="txt3">安装中</div>
|
||
<div class="txt3">请勿离开此页面</div>
|
||
</span>
|
||
</el-dialog>
|
||
<!-- 祝福语配置 -->
|
||
<el-dialog title="祝福语设置" class="blessing" :append-to-body="true" width="500px" :visible.sync="blessingDialog"
|
||
:close-on-click-modal="false">
|
||
<div class="header">
|
||
<span class="title">祝福有效期</span>
|
||
<span class="description">（当发生修改后，仅对修改后产生的数据有效）</span>
|
||
</div>
|
||
<div class="rows">
|
||
<div class="row">
|
||
<span>生效时长：</span>
|
||
<el-radio-group v-model="blessingSetting.durationType">
|
||
<el-radio label="1" class="first">永久有效</el-radio>
|
||
<el-radio label="2">
|
||
<el-input v-model="blessingSetting.durationDay" size="mini" class="duration-day"
|
||
:class="{error: durationDayError}" oninput="value=value.replace(/[^\d]/g,'')"
|
||
ref="durationDay" @blur="blessingValidate"></el-input>
|
||
天内有效
|
||
<el-tooltip effect="dark" content="最大设置365天" placement="top">
|
||
<i class="el-icon-question"></i>
|
||
</el-tooltip>
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
<div class="row" v-if="blessingSetting.durationType == 2">
|
||
<span>生效规则：</span>
|
||
<el-radio-group v-model="blessingSetting.ruleType">
|
||
<el-radio label="1" class="first">确认收货后</el-radio>
|
||
<el-radio label="2">首次扫码后</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
<div class="header">
|
||
<span class="title">祝福大小</span>
|
||
<span class="description">（可以限制用户上传祝福大小，没有填写默认10M限制。）</span>
|
||
</div>
|
||
<div class="rows">
|
||
<div class="row">
|
||
最大上传视频/录音大小<el-input v-model="blessingSetting.size" size="mini"
|
||
oninput="value=value.replace(/[^\d]/g,'')" :class="{error: durationSizeError}" class="size">
|
||
</el-input>MB
|
||
</div>
|
||
</div>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="blessingDialog = false" size="medium">取消</el-button>
|
||
<el-button type="primary" @click="setSetting()" size="medium">确定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog title="Q3 ERP设置" class="little-gift" :append-to-body="true" width="620px"
|
||
:visible.sync="littleGiftDialog" :close-on-click-modal="false">
|
||
<p class="tips">提示：添加计划任务，建议一分钟执行一次，路径/index.php/LittleGift/Plan/cancelOrder。</p>
|
||
<el-form ref="form" label-width="120px">
|
||
<el-form-item :label="settiing.route_name + '：'" v-for="settiing in littleGiftSetting">
|
||
<el-input v-model="settiing.route_url"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="littleGiftDialog = false" size="medium">取消</el-button>
|
||
<el-button type="primary" @click="setSetting(true)" size="medium">确定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
<script>
|
||
new Vue({
|
||
el: '#detail',
|
||
data() {
|
||
return {
|
||
activeName: 'first', // 详情tab切换标志
|
||
dialogVisible: false, // 弹框开启
|
||
isCheck: 1, // 微信/支付宝tab选中
|
||
pulginInfo: {}, // 详情信息
|
||
version: [], // 版本信息
|
||
payUrl: '', // 二维码url
|
||
pluginState: 0, // 插件状态
|
||
isWechat: 1, // 是否开通微信
|
||
isAli: 1, // 是否开通支付宝
|
||
state: 1, // 操作状态 1确认订单 2支付订单
|
||
orderTimer: {}, // 订单轮询定时器
|
||
dialogTableVisible: false, // 安装弹框
|
||
status: "",//进度条状态 success warning exception
|
||
text: true,
|
||
install_type: 1,//1未安装 2正在安装 3安装成功 4安装失败
|
||
percent: 0,//安装进度条
|
||
install_timer: null,//安装进度计时器
|
||
loading: false,
|
||
identification: "",//应用唯一标志符
|
||
is_buy: 0,//0 未购买 1已购买
|
||
is_install: 0,//1已安装 0未安装
|
||
upgrade: 2,//upgrade == 1有更新 2无更新
|
||
|
||
externalPluginSettingRequestUrls: { //外部插件配置请求地址
|
||
'littlegift': {
|
||
get: 'LittleGift/Index/getList',
|
||
set: 'LittleGift/Index/configOperation'
|
||
}
|
||
},
|
||
//祝福语
|
||
blessingDialog: false, //祝福语设置窗口
|
||
blessingSetting: { //祝福语设置
|
||
durationType: '1', //生效时长
|
||
durationDay: '', //生效时长的具体天数，仅durationType为2时必须填写
|
||
ruleType: '1', //生效规则
|
||
size: '' //祝福语最大上传限制
|
||
},
|
||
durationDayError: false, //生效时间具体天数验证
|
||
durationSizeError: false, //最大上传验证
|
||
|
||
//微礼ERP
|
||
littleGiftDialog: false, //微礼ERP设置窗口
|
||
littleGiftSetting: [] //微礼ERP设置数据
|
||
}
|
||
},
|
||
filters: {
|
||
yearAndMonth(value) {
|
||
return value.slice(0, value.length - 3)
|
||
},
|
||
getData(value) {
|
||
return value.slice(value.length - 2, value.length)
|
||
}
|
||
},
|
||
mounted() {
|
||
this.identification = MenuApp.getQueryVariable("identification");//获取url某一个字段的值（获取唯一标识）
|
||
this.getPlugInfo()
|
||
this.getVersion()
|
||
},
|
||
methods: {
|
||
/**
|
||
* 获取应用详情
|
||
*/
|
||
getPlugInfo() {
|
||
this.loading = true
|
||
console.log(this.identification)
|
||
$.ajax({
|
||
type: "POST",
|
||
dataType: 'json',
|
||
data: {
|
||
identification: this.identification
|
||
},
|
||
contentType: "application/x-www-form-urlencoded; charset=utf-8",
|
||
async: true,
|
||
url: "/index.php/Super/Plug/getAddonDetails",
|
||
success: (res) => {
|
||
this.pulginInfo = res.data
|
||
this.is_buy = res.is_buy
|
||
this.is_install = res.is_install
|
||
this.loading = false
|
||
this.upgrade = res.upgrade//插件已购买 upgrade == 1有更新 2无更新
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 获取版本信息
|
||
*/
|
||
getVersion() {
|
||
$.ajax({
|
||
type: "POST",
|
||
dataType: 'json',
|
||
data: {
|
||
identification: this.identification,
|
||
|
||
},
|
||
contentType: "application/x-www-form-urlencoded; charset=utf-8",
|
||
async: true,
|
||
url: "/index.php/Super/Plug/getBranchVersions",
|
||
success: (res) => {
|
||
this.version = res.data
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 获取微信支付宝配置
|
||
*/
|
||
getPayConfig() {
|
||
$.ajax({
|
||
type: "POST",
|
||
dataType: 'json',
|
||
data: {},
|
||
contentType: "application/x-www-form-urlencoded; charset=utf-8",
|
||
async: true,
|
||
url: "/index.php/Super/Plug/getPayConfigInfo",
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.isWechat = res.data.wx.wechat_state
|
||
this.isAli = res.data.ali.ali_state
|
||
if (this.isAli == 0) {
|
||
this.isCheck = 2
|
||
} else if (this.isWechat == 0) {
|
||
this.isCheck = 1
|
||
}
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'error',
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 立即支付
|
||
*/
|
||
goPay() {
|
||
if (this.isWechat == 0 && this.isAli == 0) {
|
||
this.$message({
|
||
message: '暂时无法支付，请联系官方售后',
|
||
type: 'warning'
|
||
});
|
||
return
|
||
}
|
||
|
||
this.state = 2
|
||
// 如果开通支付宝则默认渲染支付宝二维码，否则渲染微信
|
||
if (this.isAli == 1) {
|
||
this.payByAli()
|
||
} else {
|
||
this.payByWechat()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 获取微信二维码
|
||
*/
|
||
payByWechat() {
|
||
this.isCheck = 2;
|
||
$.ajax({
|
||
type: "POST",
|
||
dataType: 'json',
|
||
data: {
|
||
identification: this.identification,
|
||
},
|
||
contentType: "application/x-www-form-urlencoded; charset=utf-8",
|
||
async: true,
|
||
url: "/index.php/Super/Plug/getWxCode",
|
||
success: (res) => {
|
||
if (res.status === 1) {
|
||
this.payUrl = res.data.code_url
|
||
this.drawCode(res.data.out_trade_no)
|
||
} else {
|
||
document.getElementById("qrcode").innerHTML = "";
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'error'
|
||
});
|
||
}
|
||
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 获取支付宝二维码
|
||
*/
|
||
payByAli() {
|
||
this.isCheck = 1;
|
||
$.ajax({
|
||
type: "POST",
|
||
dataType: 'json',
|
||
data: {
|
||
identification: this.identification
|
||
},
|
||
contentType: "application/x-www-form-urlencoded; charset=utf-8",
|
||
async: true,
|
||
url: "/index.php/Super/Plug/getAliPayCode",
|
||
success: (res) => {
|
||
if (res.status === 1) {
|
||
this.payUrl = res.qr_code
|
||
this.drawCode(res.out_trade_no)
|
||
} else {
|
||
document.getElementById("qrcode").innerHTML = "";
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'error'
|
||
});
|
||
}
|
||
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 查询订单状态
|
||
*/
|
||
getOrderState(order) {
|
||
$.ajax({
|
||
type: "POST",
|
||
dataType: 'json',
|
||
data: {
|
||
out_trade_no: order,
|
||
// support_id: 1,
|
||
// group_id: 1
|
||
},
|
||
contentType: "application/x-www-form-urlencoded; charset=utf-8",
|
||
async: true,
|
||
url: "/index.php/Super/Plug/getOrderPaystate",
|
||
success: (res) => {
|
||
if (res.status === 1) {
|
||
if (res.data.status == 1) {
|
||
clearInterval(this.orderTimer)
|
||
this.state = 3
|
||
this.getPlugInfo();
|
||
} else if (res.data.status == 3) {
|
||
clearInterval(this.orderTimer)
|
||
this.$message({
|
||
message: res.data.status_name,
|
||
type: 'error'
|
||
});
|
||
}
|
||
} else {
|
||
clearInterval(this.orderTimer)
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'error'
|
||
});
|
||
}
|
||
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 支付确认弹框
|
||
*/
|
||
open() {
|
||
this.$confirm(`<span>您将订购"${this.pulginInfo.name}"套餐</span>，<br/><span>是否提交订单？</span>`, ' ', {
|
||
confirmButtonText: '提交订单',
|
||
cancelButtonText: '取消',
|
||
center: true,
|
||
dangerouslyUseHTMLString: true
|
||
}).then(() => {
|
||
this.getPayConfig();
|
||
this.dialogVisible = true;
|
||
}).catch(() => {
|
||
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 安装
|
||
*/
|
||
setUp() {
|
||
this.install_type = 2;
|
||
this.dialogVisible = false;
|
||
this.dialogTableVisible = true;
|
||
this.percent = 1;
|
||
this.install_timer = setInterval(() => {
|
||
if (this.install_type == 2) {
|
||
if (this.percent < 99) {
|
||
this.percent++;
|
||
} else if (this.percent == 100) {
|
||
clearInterval(this.install_timer);
|
||
}
|
||
} else if (this.install_type == 3) {
|
||
this.percent = 100;
|
||
this.getPlugInfo();
|
||
clearInterval(this.install_timer);
|
||
} else if (this.install_type == 4) {
|
||
clearInterval(this.install_timer);
|
||
}
|
||
}, 10);
|
||
$.ajax({
|
||
type: "POST",
|
||
dataType: 'json',
|
||
contentType: "application/x-www-form-urlencoded; charset=utf-8",
|
||
data: {"identification": this.identification},
|
||
async: true,
|
||
url: "/index.php/Super/Plug/getZip",
|
||
success: (res) => {
|
||
if (res.status == 1) {
|
||
this.is_install = 1;
|
||
this.install_type = 3;
|
||
} else {
|
||
this.install_type = 4;
|
||
}
|
||
},
|
||
error: (data) => {
|
||
console.log(data);
|
||
this.install_type = 4;
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 更新
|
||
*/
|
||
renewal() {
|
||
//先验证是否有跟新版本
|
||
|
||
this.dialogTableVisible = true
|
||
this.setUp()
|
||
|
||
},
|
||
|
||
//安装成功--确定
|
||
makeSure() {
|
||
this.dialogTableVisible = false;
|
||
this.install_type = 2;
|
||
},
|
||
//安装失败
|
||
cancelInstall() {
|
||
//取消
|
||
this.dialogTableVisible = false;
|
||
this.install_type = 1;
|
||
},
|
||
|
||
/**
|
||
* 切换支付方式
|
||
*/
|
||
switchPay(type) {
|
||
this.isCheck = type
|
||
this.payUrl = ""
|
||
clearInterval(this.orderTimer)
|
||
if (type == 1) {
|
||
this.payByAli()
|
||
} else {
|
||
this.payByWechat()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 绘制付款码方法
|
||
*/
|
||
drawCode(order) {
|
||
this.$nextTick(() => {
|
||
if (this.state === 2) {
|
||
document.getElementById("qrcode").innerHTML = "";
|
||
let qrcode = new QRCode(document.getElementById("qrcode"), {
|
||
text: this.payUrl,
|
||
width: 180,
|
||
height: 180,
|
||
colorDark: "#000000",
|
||
colorLight: "#ffffff",
|
||
correctLevel: QRCode.CorrectLevel.H
|
||
});
|
||
this.orderTimer = setInterval(() => {
|
||
this.getOrderState(order)
|
||
}, 1000)
|
||
}
|
||
})
|
||
},
|
||
|
||
handleClick() {
|
||
},
|
||
handleClose() {
|
||
console.log(this.orderTimer);
|
||
clearInterval(this.orderTimer)
|
||
console.log(this.orderTimer);
|
||
this.dialogVisible = false
|
||
this.state = 1
|
||
},
|
||
/**
|
||
* @description 设置通用入口（方便后期扩展）
|
||
*/
|
||
showSettingDialog() {
|
||
if (this.is_buy != 1 || this.is_install != 1) return false
|
||
|
||
if (['blessing'].includes(this.identification)) {
|
||
//系统自有插件获取配置
|
||
this.getSetting()
|
||
} else if (['littlegift'].includes(this.identification)) {
|
||
//外部插件获取配置
|
||
this.getSetting(true)
|
||
}
|
||
|
||
switch (this.identification) {
|
||
case 'blessing':
|
||
this.blessingDialog = true
|
||
break
|
||
case 'littlegift':
|
||
this.littleGiftDialog = true
|
||
break
|
||
}
|
||
},
|
||
/**
|
||
* @description 祝福语设置验证
|
||
*/
|
||
blessingValidate() {
|
||
//当生效时长类型设置为按具体天数时
|
||
if (this.blessingSetting.durationType == 2) {
|
||
let durationDayErrorMessage = ''
|
||
if (!this.blessingSetting.durationDay || this.blessingSetting.durationDay < 1) {
|
||
//为空
|
||
durationDayErrorMessage = '选择按有效时长时，必须填写填写具体的天数！'
|
||
} else if (!/^[0-9]+$/.test(this.blessingSetting.durationDay)) {
|
||
//不全为数字
|
||
durationDayErrorMessage = '有效时长天数只能为数字'
|
||
} else if (this.blessingSetting.durationDay > 365) {
|
||
//设置天数大于365天
|
||
durationDayErrorMessage = '有效时长最大只能设置365天'
|
||
}
|
||
|
||
if (durationDayErrorMessage) {
|
||
this.$message.error(durationDayErrorMessage)
|
||
this.durationDayError = true
|
||
return false
|
||
} else {
|
||
this.durationDayError = false
|
||
}
|
||
} else {
|
||
this.durationDayError = false
|
||
}
|
||
|
||
if (this.blessingSetting.size && !/^[0-9]+$/.test(this.blessingSetting.size)) {
|
||
this.$message.error('上传文件大小必须为数字！')
|
||
this.durationSizeError = true
|
||
return false
|
||
} else {
|
||
this.durationSizeError = false
|
||
}
|
||
|
||
return true
|
||
},
|
||
/**
|
||
* @description 获取插件配置
|
||
* @param {Boolean} externalPlugin 是否为外部插件（外部插件需要调用其特有的配置地址）
|
||
*/
|
||
getSetting(externalPlugin = false) {
|
||
const requestUrl = !externalPlugin ? 'Super/Plug/plugSetInfo' : this.externalPluginSettingRequestUrls[this.identification].get
|
||
|
||
this.sendRequest(requestUrl, {
|
||
data: {
|
||
identification: this.identification
|
||
},
|
||
success: (response) => {
|
||
if (response.status == 1) {
|
||
const data = response.data
|
||
if (!data) return
|
||
|
||
switch (this.identification) {
|
||
case 'blessing':
|
||
this.blessingSetting.durationType = data.duration_type
|
||
this.blessingSetting.ruleType = data.duration_start_type
|
||
this.blessingSetting.durationDay = data.duration_time
|
||
this.blessingSetting.size = data.space
|
||
break
|
||
case 'littlegift':
|
||
this.littleGiftSetting = data
|
||
break
|
||
}
|
||
} else {
|
||
this.$message.error(response.message)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* @description 插件设置提交
|
||
* @param {Boolean} externalPlugin 是否为外部插件（外部插件需要调用其特有的配置地址）
|
||
*/
|
||
setSetting(externalPlugin = false) {
|
||
let param = {} //提交的数据
|
||
const requestUrl = !externalPlugin ? 'Super/Plug/plugSet' : this.externalPluginSettingRequestUrls[this.identification].set
|
||
|
||
switch (this.identification) {
|
||
case 'blessing':
|
||
if (!this.blessingValidate()) return false
|
||
|
||
param = {
|
||
duration_type: this.blessingSetting.durationType,
|
||
duration_time: this.blessingSetting.durationDay,
|
||
duration_start_type: this.blessingSetting.ruleType,
|
||
space: this.blessingSetting.size
|
||
}
|
||
break;
|
||
case 'littlegift':
|
||
param = this.littleGiftSetting
|
||
break
|
||
default:
|
||
//不是可操作的插件直接退出
|
||
return false
|
||
}
|
||
|
||
this.sendRequest(requestUrl, {
|
||
data: {
|
||
identification: this.identification,
|
||
param: JSON.stringify(param)
|
||
},
|
||
success: (response) => {
|
||
if (response.status == 1) {
|
||
switch (this.identification) {
|
||
case 'blessing':
|
||
this.blessingDialog = false
|
||
break
|
||
case 'littlegift':
|
||
this.littleGiftDialog = false
|
||
break
|
||
}
|
||
this.$message.success(response.message)
|
||
} else {
|
||
this.$message.error(response.message)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
</script> |