You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1514 lines
56 KiB
1514 lines
56 KiB
<template>
|
|
<el-container>
|
|
<el-header style="height: 100px">
|
|
<el-dialog
|
|
:visible.sync="show_buy_download_times"
|
|
width="780px"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
center>
|
|
|
|
<span slot="title" style="color: #313639;font-size: 28px; margin-bottom: 14px;">
|
|
购买下载次数包
|
|
</span>
|
|
|
|
<div class="packages" style="max-width: 768px;">
|
|
<div class="package-item" v-for="(packages,index) in data_package_prices" :key="packages.name">
|
|
<div class="arraw-badge" v-if="index===1"><span>荐</span> <span class="arraw"/></div>
|
|
<div class="package-content">
|
|
<div class="money ">¥{{ packages.price / 100 }}</div>
|
|
<div class="times ">{{ packages.package_size |formatMoney }}</div>
|
|
<div class="unit" style="font-size: 14px;color: #869096">累计下载次数</div>
|
|
<div class="text-gift" v-if="packages.download_count_gift">{ 赠 <span>{{ packages.download_count_gift }}</span>
|
|
次 }
|
|
</div>
|
|
</div>
|
|
<div class="package-actions">
|
|
<el-radio v-model="default_price_radio" :label="packages.name" border>
|
|
<span>此套餐</span>
|
|
<span class="pay-current" v-if="default_price_radio === packages.name"
|
|
:style="{background:`url(${pay_image.selected}) right bottom/100% no-repeat`}"/>
|
|
|
|
</el-radio>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div>
|
|
<div style="margin-top: 30px;text-align: center">
|
|
<el-radio v-model="default_pay_radio" :label="pay.name" border v-for="pay in pay_choices"
|
|
:key="pay.name">
|
|
<span style="color: white">xxxxxxxxxxxxxx</span>
|
|
<span style="width: 160px; height: 45px">
|
|
<span class="pay-icon alipay" :style="{backgroundImage:`url(${pay_image.ali})`}"
|
|
v-if="pay.type === 'ALI'"/>
|
|
<span class="pay-icon" :style="{backgroundImage:`url(${pay_image.wx})`}"
|
|
v-if="pay.type === 'WX'"/>
|
|
<span class="pay-current" v-if="default_pay_radio === pay.name"
|
|
:style="{background:`url(${pay_image.selected}) right bottom/100% no-repeat` }"/>
|
|
</span>
|
|
</el-radio>
|
|
</div>
|
|
|
|
<div style="text-align: center">
|
|
<el-button type="primary" :disabled="buy_button_disable" @click="buy"
|
|
style="margin-top:30px;width: 166px"> 立即支付
|
|
</el-button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<span slot="footer">
|
|
如对充值订单有疑问,请联系 nineven@qq.com
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
:title="getDelappTitle"
|
|
:visible.sync="willDeleteApp"
|
|
width="50%">
|
|
|
|
<span v-if="delapp.issupersign">该应用开启了超级签名,执行删除操作,将会删除相关开发者账户下的证书等数据,可能会导致已经下载的APP闪退,并且删除后不可恢复,请谨慎操作</span>
|
|
<span v-else>删除后不可恢复,请谨慎操作</span>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="willDeleteApp = false">取 消</el-button>
|
|
<el-button type="danger" @click="delApp">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
|
|
<el-dialog class="upload-app"
|
|
style="position: fixed"
|
|
:visible.sync="willuploadApp"
|
|
:destroy-on-close="true"
|
|
:show-close="!uploading"
|
|
width="40%"
|
|
:close-on-click-modal="false"
|
|
@closed="closeUpload">
|
|
<div v-if="!uploading">
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<div class="grid-content bg-purple">
|
|
<div style="width: 100px;height: 100px">
|
|
<el-avatar shape="square" :size="100" :src="analyseappinfo.icon"/>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<div class="grid-content bg-purple">
|
|
<el-row :gutter="20" style="margin-top: 8px;">
|
|
<el-col :span="18">
|
|
{{ analyseappinfo.version}} (Build {{ analyseappinfo.buildversion}}) {{
|
|
analyseappinfo.release_type_id|getiOStype}}
|
|
<el-link :underline="false"
|
|
v-if="analyseappinfo.udid && analyseappinfo.udid.length > 0"
|
|
@click="showUDID(analyseappinfo)">- {{ analyseappinfo.udid.length
|
|
}} UDID
|
|
</el-link>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20" style="margin-top: 18px;">
|
|
<el-col :span="18">
|
|
<el-input v-model="analyseappinfo.appname"/>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-divider/>
|
|
|
|
<el-row :gutter="20">
|
|
|
|
<el-col :span="6">
|
|
<div class="grid-content bg-purple">
|
|
<el-row :gutter="20" style="margin-top: 18px;">
|
|
<el-col :span="18" :offset="8">
|
|
<span>短连接</span>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<div class="grid-content bg-purple">
|
|
<el-row :gutter="20" style="margin-top: 10px;">
|
|
<el-col :span="18">
|
|
<el-input v-model="short">
|
|
<template slot="prepend">{{analyseappinfo.domain_name}}/</template>
|
|
</el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20">
|
|
|
|
<el-col :span="6">
|
|
<div class="grid-content bg-purple">
|
|
<el-row :gutter="20" style="margin-top: 18px;">
|
|
<el-col :span="18" :offset="8">
|
|
<span>更新日志</span>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<div class="grid-content bg-purple">
|
|
<el-row :gutter="20" style="margin-top: 10px;">
|
|
<el-col :span="18">
|
|
<el-input type="textarea"
|
|
v-model="analyseappinfo.changelog"
|
|
placeholder="请输入内容"
|
|
rows="5"
|
|
show-word-limit/>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</div>
|
|
<div v-if="uploading">
|
|
<!-- <canvas ref="canvas" class="canvas"/>-->
|
|
<div class="wrap">
|
|
<!--包裹所有元素的容器-->
|
|
<div class="cube">
|
|
<!--前面图片 -->
|
|
<div class="out_front">
|
|
<img src="@/assets/imgs/1.png" class="pic" alt="">
|
|
</div>
|
|
<!--后面图片 -->
|
|
<div class="out_back">
|
|
<img src="@/assets/imgs/5.png" class="pic" alt="">
|
|
</div>
|
|
<!--左面图片 -->
|
|
<div class="out_left">
|
|
<img src="@/assets/imgs/6.png" class="pic" alt="">
|
|
</div>
|
|
<!--右面图片 -->
|
|
<div class="out_right">
|
|
<img src="@/assets/imgs/7.png" class="pic" alt="">
|
|
</div>
|
|
<!--上面图片 -->
|
|
<div class="out_top">
|
|
<img src="@/assets/imgs/8.png" class="pic" alt="">
|
|
</div>
|
|
<!--下面图片 -->
|
|
<div class="out_bottom">
|
|
<img src="@/assets/imgs/9.png" class="pic" alt="">
|
|
</div>
|
|
|
|
<!--小正方体 -->
|
|
<span class="in_front">
|
|
<img :src="this.analyseappinfo.icon" class="in_pic" alt="">
|
|
</span>
|
|
<span class="in_back">
|
|
<img :src="this.analyseappinfo.icon" class="in_pic" alt="">
|
|
</span>
|
|
<span class="in_left">
|
|
<img :src="this.analyseappinfo.icon" class="in_pic" alt="">
|
|
</span>
|
|
<span class="in_right">
|
|
<img :src="this.analyseappinfo.icon" class="in_pic" alt="">
|
|
</span>
|
|
<span class="in_top">
|
|
<img :src="this.analyseappinfo.icon" class="in_pic" alt="">
|
|
</span>
|
|
<span class="in_bottom">
|
|
<img :src="this.analyseappinfo.icon" class="in_pic" alt="">
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-progress :text-inside="true" :stroke-width="26" :percentage="uploadprocess"
|
|
v-if="uploadflag === true"/>
|
|
<el-button type="primary" plain @click="uploadcloud" v-else>{{ analyseappinfo.is_new|get_upload_text}}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-row>
|
|
<el-col :span="3">
|
|
<el-radio-group v-model="searchfromtype">
|
|
<el-radio-button label="android" icon="el-icon-mobile-phone"><i
|
|
class="iconfont icon-android2"/>
|
|
</el-radio-button>
|
|
<el-radio-button label="ios"><i class="iconfont icon-ios"/>
|
|
</el-radio-button>
|
|
</el-radio-group>
|
|
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-row>
|
|
<el-col :span="20">
|
|
<el-input
|
|
placeholder="请输入名称搜索"
|
|
v-model="keysearch"
|
|
@click="searchapps"
|
|
@keyup.enter.native="searchapps"
|
|
clearable>
|
|
</el-input>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
|
|
<el-button icon="el-icon-search" @click="searchFun">
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="4" class="surplus-card">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<div>
|
|
<span class="name">iOS应用</span>
|
|
<el-divider direction="vertical"/>
|
|
</div>
|
|
<div>
|
|
<span class="value">{{ hdata.ios_count }}</span>
|
|
<el-divider direction="vertical"/>
|
|
</div>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<div>
|
|
<span class="name">Android应用</span>
|
|
<el-divider direction="vertical"/>
|
|
</div>
|
|
<div>
|
|
<span class="value">{{ hdata.android_count }}</span>
|
|
<el-divider direction="vertical"/>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
|
|
<el-col :span="5" class="surplus-card">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<div>
|
|
<span class="name">今日苹果下载次数</span>
|
|
<el-divider direction="vertical"/>
|
|
</div>
|
|
<div>
|
|
<span class="value">{{ hdata.ios_today_hits_count }}</span>
|
|
<el-divider direction="vertical"/>
|
|
</div>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<div>
|
|
<span class="name">今日安卓下载次数</span>
|
|
<el-divider direction="vertical"/>
|
|
</div>
|
|
<div>
|
|
<span class="value">{{ hdata.android_today_hits_count }}</span>
|
|
<el-divider direction="vertical"/>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="7" class="surplus-card">
|
|
<el-row>
|
|
<el-col :span="9">
|
|
<div>
|
|
<el-tooltip placement="top">
|
|
<div slot="content">
|
|
1.账号下所有应用共用此剩余下载次数<br/>
|
|
2.每日凌晨 0 点自动重置下载次数<br/>
|
|
</div>
|
|
<span class="name">今日剩余免费次数</span>
|
|
</el-tooltip>
|
|
<el-divider direction="vertical"/>
|
|
</div>
|
|
<div>
|
|
<span class="value">{{$store.state.userinfo.free_download_times }}</span>
|
|
<el-divider direction="vertical"/>
|
|
</div>
|
|
</el-col>
|
|
|
|
<el-col :span="8">
|
|
<div>
|
|
<el-tooltip placement="top">
|
|
<div slot="content">1.下载次数包没有时间限制,用完为止<br/>2.购买的下载次数包为总下载量,不会每日重置</div>
|
|
<span class="name">剩余付费次数</span>
|
|
</el-tooltip>
|
|
<el-divider direction="vertical"/>
|
|
</div>
|
|
<div>
|
|
<span class="value">{{$store.state.userinfo.download_times }}</span>
|
|
<el-divider direction="vertical"/>
|
|
</div>
|
|
</el-col>
|
|
|
|
<el-col :span="6">
|
|
<div>
|
|
<el-tooltip placement="top">
|
|
<div slot="content">
|
|
1.下载应用,每100M消耗一次下载次数<br>
|
|
2.超级签下载,下载消耗次数翻倍<br>
|
|
</div>
|
|
<span class="name">购买次数</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<div>
|
|
<el-button class="action" size="small" icon="el-icon-shopping-cart-1"
|
|
@click="show_package_prices"/>
|
|
</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</el-header>
|
|
<div ref="appmain" style="margin: 40px 20px;height: 100%;width:1166px">
|
|
<el-row style="max-height: 460px; margin: 0 auto;" :gutter="10" class="page-apps">
|
|
<el-col style="width: 30%;height: 460px ;margin-left: 3%">
|
|
<div class=" app-animator appdownload">
|
|
<div class=" card app card-ios" style="padding: 0">
|
|
<el-upload
|
|
drag
|
|
:show-file-list="false"
|
|
:before-upload="beforeAvatarUpload"
|
|
accept=".ipa , .apk"
|
|
action="#"
|
|
multiple>
|
|
<i class="el-icon-upload" style="color: #fff"/>
|
|
<div class="el-upload__text" style="color: #fff;margin-top: 20px">拖拽到这里上传</div>
|
|
</el-upload>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</el-col>
|
|
<el-col style="width: 30%;height: 460px;margin-left: 3%"
|
|
v-for="(r,index) in applists" :key="r.id" @click="appInfos(index)">
|
|
|
|
<div class=" app-animator">
|
|
<div class="card app card-ios">
|
|
|
|
<i class=" type-icon iconfont icon-ios" v-if="r.type === 1"/>
|
|
<i class="type-icon iconfont icon-android2" v-if="r.type === 0"/>
|
|
|
|
<div class="type-mark" v-if="r.type === 1"></div>
|
|
<div class="type-mark" style="border-top: 48px solid #A4C639" v-if="r.type === 0"></div>
|
|
<a class="appicon" @click="appInfos(r)">
|
|
<img class="icon ng-isolate-scope" width="100" height="100"
|
|
:src="r.master_release.icon_url|make_icon_url" alt=""></a>
|
|
|
|
<div class="combo-info ng-scope" v-if="r.has_combo !== null ">
|
|
<i class="el-icon-copy-document" style="transform:rotateX(180deg);"/>
|
|
<a @click="appInfos(r.has_combo)">
|
|
<img class="icon ng-isolate-scope" width="45" height="45"
|
|
:src="r.has_combo.master_release.icon_url|make_icon_url" alt="">
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<br>
|
|
<p class="appname"><i class="el-icon-user-solid"/><span
|
|
class="ng-binding">{{ r.name }}</span>
|
|
</p>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td class="ng-binding">应用大小:</td>
|
|
<td><span
|
|
class="ng-binding">{{ r.master_release.binary_size }}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ng-binding">应用平台:</td>
|
|
<td><span class="ng-binding">{{ r.type |getapptype }}</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ng-binding">应用标识:</td>
|
|
<td><span class="ng-binding">{{ r.bundle_id | autoformat }}</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ng-binding">最新版本:</td>
|
|
<td><span class="ng-binding">{{ r.master_release.app_version }}(Build {{ r.master_release.build_version }})</span>
|
|
</td>
|
|
</tr>
|
|
<tr v-if="r.type === 1 && r.master_release.binary_url === ''">
|
|
<td class="ng-binding">打包类型:</td>
|
|
<td>
|
|
<span class="ng-binding">
|
|
{{ r.master_release.release_type|getiOStype }}
|
|
<span v-if="r.issupersign">超级签名</span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr v-if=" r.master_release.binary_url !== ''">
|
|
<td>第三方平台下载:</td>
|
|
<td>
|
|
<span>
|
|
<el-tooltip :content="r.master_release.binary_url" placement="top">
|
|
<a target="_blank" :href="r.master_release.binary_url">{{ r.master_release.binary_url| autoformat}}</a>
|
|
</el-tooltip>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="action">
|
|
<el-button @click="appInfos(r)">
|
|
<i class="icon-pen el-icon-edit"/> 管理
|
|
</el-button>
|
|
|
|
<el-button @click="appDownload(r)" class="ng-binding">
|
|
<i class="icon-eye el-icon-view"/> 预览
|
|
</el-button>
|
|
|
|
<el-button v-if="r.issupersign" @click="DeleteApp(r)" class="btn btn-remove"
|
|
icon="el-icon-loading"
|
|
circle/>
|
|
|
|
<el-button v-else @click="DeleteApp(r)" class="btn btn-remove" icon="el-icon-delete"
|
|
circle/>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
</el-container>
|
|
</template>
|
|
<script>
|
|
import {analyseApps, apputils, get_package_prices, getapps, getuploadurl, my_order} from "@/restful";
|
|
import {
|
|
dataURLtoFile,
|
|
format_money,
|
|
getappinfo,
|
|
getScrollHeight,
|
|
getScrollTop,
|
|
getWindowHeight,
|
|
uploadaliyunoss,
|
|
uploadlocalstorage,
|
|
uploadqiniuoss
|
|
} from "@/utils";
|
|
import {getUserInfoFun} from "../../utils";
|
|
|
|
export default {
|
|
name: "FirApps",
|
|
data() {
|
|
return {
|
|
default_pay_radio: '',
|
|
default_price_radio: '',
|
|
pay_choices: [],
|
|
analyseappinfo: {icon: ''},
|
|
short: '',
|
|
keysearch: '',
|
|
searchfromtype: '',
|
|
applists: [],
|
|
orgapplists: [],
|
|
hdata: {},
|
|
willDeleteApp: false,
|
|
willuploadApp: false,
|
|
uploading: false,
|
|
delapp: {},
|
|
has_next: false,
|
|
query: {'page': 1, size: 20},
|
|
searchflag: false,
|
|
uploadflag: false,
|
|
autoloadflag: true,
|
|
firstloadflag: true,
|
|
currentfile: null,
|
|
uploadprocess: 0,
|
|
uploadsuccess: 0,
|
|
loadingobj: null,
|
|
show_buy_download_times: false,
|
|
data_package_prices: [],
|
|
buy_button_disable: true,
|
|
pay_image: {
|
|
'wx': require('@/assets/pay/pay_weixin.png'),
|
|
'ali': require('@/assets/pay/pay_alipay.png'),
|
|
'selected': require('@/assets/pay/pay_selected.png'),
|
|
}
|
|
}
|
|
}, methods: {
|
|
show_package_prices() {
|
|
get_package_prices(res => {
|
|
if (res.code === 1000) {
|
|
this.show_buy_download_times = true;
|
|
this.data_package_prices = res.data;
|
|
this.pay_choices = res.pay_choices;
|
|
if (this.pay_choices) {
|
|
this.default_pay_radio = this.pay_choices[0].name
|
|
}
|
|
} else {
|
|
this.$message.error("获取价格异常");
|
|
this.show_buy_download_times = false;
|
|
}
|
|
}, {})
|
|
|
|
},
|
|
buy() {
|
|
this.buy_button_disable = true;
|
|
my_order(res => {
|
|
if (res.code === 1000) {
|
|
if (res.data && res.data.url) {
|
|
this.$message.success("下订单成功,正在跳转支付页");
|
|
this.$router.push({name: 'FirUserOrders', params: {out_trade_no: res.data.out_trade_no}})
|
|
} else {
|
|
this.$message.error("下订单异常,请联系管理员");
|
|
}
|
|
} else {
|
|
this.$message.error("异常" + res.msg);
|
|
this.buy_button_disable = false;
|
|
|
|
}
|
|
}, {
|
|
methods: 'POST', data: {
|
|
price_id: this.default_price_radio,
|
|
pay_id: this.default_pay_radio,
|
|
}
|
|
})
|
|
},
|
|
showUDID(appinfo) {
|
|
let udidstr = '';
|
|
for (let i = 0; i < appinfo.udid.length; i++) {
|
|
udidstr = udidstr + "<p>" + appinfo.udid[i] + "</p>"
|
|
}
|
|
this.$alert(udidstr, appinfo.appname + ' UDID', {
|
|
confirmButtonText: '确定',
|
|
dangerouslyUseHTMLString: true,
|
|
});
|
|
},
|
|
updateappinfo(file) {
|
|
this.uploadsuccess += 1;
|
|
if (this.uploadsuccess === 2) {
|
|
delete this.analyseappinfo.icon;
|
|
this.$message.success(file.name + '上传成功');
|
|
this.analyseappinfo.short = this.short;
|
|
analyseApps(data => {
|
|
if (data.code === 1000) {
|
|
let app_uuid = this.analyseappinfo.app_uuid;
|
|
this.closeUpload();
|
|
this.$router.push({name: 'FirAppInfostimeline', params: {id: app_uuid}});
|
|
}
|
|
}, {'methods': 'PUT', 'data': this.analyseappinfo});
|
|
}
|
|
},
|
|
uploadtostorage(file, certinfo) {
|
|
|
|
if (this.analyseappinfo.storage === 1) {
|
|
// eslint-disable-next-line no-unused-vars,no-unreachable
|
|
uploadqiniuoss(file, certinfo, this, res => {
|
|
this.updateappinfo(file)
|
|
}, process => {
|
|
if (this.uploadsuccess === 1) {
|
|
this.uploadprocess = process;
|
|
}
|
|
})
|
|
} else if (this.analyseappinfo.storage === 2) {
|
|
// eslint-disable-next-line no-unused-vars
|
|
uploadaliyunoss(file, certinfo, this, res => {
|
|
this.updateappinfo(file)
|
|
|
|
}, process => {
|
|
if (this.uploadsuccess === 1) {
|
|
this.uploadprocess = process;
|
|
}
|
|
});
|
|
} else {
|
|
//本地
|
|
if (this.analyseappinfo.domain_name) {
|
|
certinfo.upload_url = getuploadurl(this.analyseappinfo.domain_name)
|
|
} else {
|
|
certinfo.upload_url = getuploadurl();
|
|
}
|
|
certinfo.ftype = 'app';
|
|
certinfo.app_id = this.analyseappinfo.app_uuid;
|
|
// eslint-disable-next-line no-unused-vars,no-unreachable
|
|
uploadlocalstorage(file, certinfo, this, res => {
|
|
this.updateappinfo(file)
|
|
}, process => {
|
|
if (this.uploadsuccess === 1) {
|
|
this.uploadprocess = process;
|
|
}
|
|
})
|
|
}
|
|
},
|
|
getuploadtoken(loading) {
|
|
analyseApps(data => {
|
|
if (data.code === 1000) {
|
|
this.analyseappinfo.short = data.data.short;
|
|
this.short = data.data.short;
|
|
this.analyseappinfo.domain_name = data.data.domain_name;
|
|
this.analyseappinfo.app_uuid = data.data.app_uuid;
|
|
this.analyseappinfo.upload_token = data.data.upload_token;
|
|
this.analyseappinfo.upload_key = data.data.upload_key;
|
|
this.analyseappinfo.png_key = data.data.png_key;
|
|
this.analyseappinfo.png_token = data.data.png_token;
|
|
this.analyseappinfo.storage = data.data.storage;
|
|
this.analyseappinfo.is_new = data.data.is_new;
|
|
this.analyseappinfo.binary_url = data.data.binary_url;
|
|
this.willuploadApp = true;
|
|
} else {
|
|
this.$message.error("上传token获取失败,请刷新重试")
|
|
}
|
|
loading.close();
|
|
}, {
|
|
'methods': 'POST',
|
|
'data': {"bundleid": this.analyseappinfo.bundleid, "type": this.analyseappinfo.type}
|
|
})
|
|
},
|
|
uploadcloud() {
|
|
if (this.analyseappinfo.binary_url !== '') {
|
|
|
|
this.$confirm(`该应用存在第三方下载链接 <a target="_blank" href="${this.analyseappinfo.binary_url}"> ${this.analyseappinfo.binary_url} </a>更新之后,将不会自动跳转第三方下载;若您还需要第三方跳转,请在第三方平台更新该应用。`, '确定更新应用?', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
dangerouslyUseHTMLString: true,
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '开始更新'
|
|
});
|
|
this.uploadstorage()
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消更新'
|
|
});
|
|
this.closeUpload();
|
|
});
|
|
} else {
|
|
this.uploadstorage()
|
|
}
|
|
},
|
|
uploadstorage() {
|
|
this.uploadflag = true;
|
|
this.uploading = true;
|
|
// eslint-disable-next-line no-unused-vars
|
|
// this.timmer = setTimeout(data => {
|
|
// let canvas = this.$refs.canvas;
|
|
// show_beautpic(this, canvas, 888, 0.6);
|
|
// }, 100);
|
|
|
|
let file = dataURLtoFile(this.analyseappinfo.icon, this.analyseappinfo.png_key);
|
|
|
|
this.uploadtostorage(file, {
|
|
'upload_key': this.analyseappinfo.png_key,
|
|
'upload_token': this.analyseappinfo.png_token
|
|
});
|
|
|
|
file = this.currentfile;
|
|
this.uploadtostorage(file, {
|
|
'upload_key': this.analyseappinfo.upload_key,
|
|
'upload_token': this.analyseappinfo.upload_token
|
|
});
|
|
|
|
},
|
|
closeUpload() {
|
|
this.uploadsuccess = 0;
|
|
this.uploadprocess = 0;
|
|
this.uploadflag = false;
|
|
this.uploading = false;
|
|
this.willuploadApp = false;
|
|
this.currentfile = null;
|
|
this.uploadflag = false;
|
|
this.analyseappinfo = {};
|
|
},
|
|
|
|
searchFun() {
|
|
let keysearch = this.keysearch.replace(/^\s+|\s+$/g, "");
|
|
if (keysearch === '') {
|
|
this.searchflag = false;
|
|
this.applists = [];
|
|
this.orgapplists = [];
|
|
this.query.page = 1;
|
|
if (this.searchfromtype) {
|
|
this.getappsFun({"type": this.searchfromtype});
|
|
} else {
|
|
this.getappsFun({});
|
|
}
|
|
} else {
|
|
this.searchflag = true
|
|
}
|
|
if (this.searchflag) {
|
|
this.applists = [];
|
|
this.orgapplists = [];
|
|
if (this.searchfromtype) {
|
|
this.getappsFun({"type": this.searchfromtype, 'page': 1, size: 999});
|
|
} else {
|
|
this.getappsFun({'page': 1, size: 999});
|
|
}
|
|
}
|
|
},
|
|
auto_load() {
|
|
// eslint-disable-next-line no-console
|
|
// console.log(getScrollTop() , getWindowHeight(),getScrollTop() + getWindowHeight(), getScrollHeight());
|
|
if (getScrollTop() + getWindowHeight() >= getScrollHeight()) {
|
|
|
|
if (this.has_next) { //先判断下一页是否有数据
|
|
if (this.autoloadflag) {
|
|
this.autoloadflag = false;
|
|
if (this.applists.length === 0) {
|
|
this.query.page = 1;
|
|
} else {
|
|
this.query.page += 1;
|
|
}
|
|
if (this.searchfromtype !== '') {
|
|
this.query.type = this.searchfromtype;
|
|
}
|
|
this.getappsFun(this.query);
|
|
}
|
|
|
|
} else {
|
|
if (!this.has_next) {
|
|
this.$message.success("已经到底啦")
|
|
}
|
|
}
|
|
}
|
|
},
|
|
searchapps() {
|
|
let keysearch = this.keysearch.replace(/^\s+|\s+$/g, "");
|
|
let newapplists = [];
|
|
for (let i = 0; i < this.orgapplists.length; i++) {
|
|
if (this.orgapplists[i].name.search(keysearch) >= 0) {
|
|
newapplists.push(this.orgapplists[i]);
|
|
}
|
|
}
|
|
if (keysearch === "") {
|
|
this.applists = this.orgapplists.slice();
|
|
} else {
|
|
this.applists = newapplists.slice();
|
|
}
|
|
|
|
},
|
|
getappsFun(parms) {
|
|
this.loadingobj = this.$loading({
|
|
lock: true,
|
|
text: '加载中',
|
|
spinner: 'el-icon-loading',
|
|
// background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
getapps(data => {
|
|
if (data.code === 1000) {
|
|
this.loadingobj.close();
|
|
if (this.firstloadflag) {
|
|
window.addEventListener('scroll', this.auto_load);
|
|
this.firstloadflag = false
|
|
}
|
|
this.autoloadflag = true;
|
|
|
|
if (this.uploadflag) {
|
|
this.applists = data.data;
|
|
this.uploadflag = false;
|
|
} else {
|
|
this.applists = this.applists.concat(data.data);
|
|
}
|
|
this.has_next = data.has_next;
|
|
this.orgapplists = this.applists.slice(); //深拷贝
|
|
this.hdata = data.hdata;
|
|
this.searchapps();
|
|
|
|
} else {
|
|
this.loadingobj.close();
|
|
this.$router.push({name: 'FirLogin'});
|
|
}
|
|
}, parms);
|
|
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '应用解析中',
|
|
spinner: 'el-icon-loading',
|
|
// background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
getappinfo(file, appinfo => {
|
|
if (appinfo.bundleid) {
|
|
this.analyseappinfo = appinfo;
|
|
this.getuploadtoken(loading);
|
|
this.currentfile = file;
|
|
} else {
|
|
this.$message.error("应用解析失败,请检查是否为APP应用")
|
|
}
|
|
}, err => {
|
|
loading.close();
|
|
this.$message.error("应用解析失败,请检查是否为APP应用");
|
|
// eslint-disable-next-line no-console
|
|
console.log('Error ', err);
|
|
});
|
|
return false;
|
|
},
|
|
delApp() {
|
|
let loadingobj = this.$loading({
|
|
lock: true,
|
|
text: '操作中,请耐心等待',
|
|
spinner: 'el-icon-loading',
|
|
// background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
this.willDeleteApp = false;
|
|
apputils(data => {
|
|
loadingobj.close();
|
|
if (data.code === 1000) {
|
|
for (let i = 0; i < this.applists.length; i++) {
|
|
if (this.delapp.app_id === this.applists[i].app_id) {
|
|
this.applists.splice(i, 1);
|
|
this.orgapplists.splice(i, 1);
|
|
}
|
|
}
|
|
this.$message.success(this.delapp.name + '删除成功');
|
|
this.delapp = {};
|
|
} else {
|
|
this.$message.error('删除失败,请联系管理员');
|
|
}
|
|
}, {
|
|
"methods": "DELETE",
|
|
"app_id": this.delapp.app_id
|
|
});
|
|
},
|
|
DeleteApp(delapp) {
|
|
this.willDeleteApp = true;
|
|
this.delapp = delapp;
|
|
},
|
|
appInfos(app) {
|
|
this.$router.push({name: 'FirAppInfostimeline', params: {id: app.app_id}})
|
|
},
|
|
appDownload(app) {
|
|
// this.$router.push({name: 'FirDownload', params: {short: app.short}});
|
|
let routeData = this.$router.resolve({name: 'FirDownload', params: {short: app.short}});
|
|
let p_url = routeData.href;
|
|
if (app.preview_url && app.preview_url.length > 6) {
|
|
p_url = app.preview_url + p_url
|
|
}
|
|
window.open(p_url, '_blank', '');
|
|
}
|
|
}, computed: {
|
|
getDelappTitle() {
|
|
return `删除应用 ${this.delapp.name}`
|
|
},
|
|
},
|
|
filters: {
|
|
formatMoney: function (money) {
|
|
return format_money(money, 19);
|
|
},
|
|
getiOStype: function (release_type_id) {
|
|
let ftype = '';
|
|
if (release_type_id === 1) {
|
|
ftype = '内测版'
|
|
} else if (release_type_id === 2) {
|
|
ftype = '企业版'
|
|
}
|
|
return ftype
|
|
},
|
|
formatsize: function (size) {
|
|
return size / 1000;
|
|
},
|
|
autoformat: function (packname) {
|
|
|
|
if (packname && (packname.length) > 20) {
|
|
return packname.split('').slice(0, 20).join('') + '...';
|
|
} else {
|
|
return packname
|
|
}
|
|
},
|
|
getapptype: function (type) {
|
|
let ftype = '';
|
|
if (type === 0) {
|
|
ftype = 'Android'
|
|
} else {
|
|
ftype = 'iOS'
|
|
}
|
|
return ftype
|
|
},
|
|
make_icon_url(icon_url) {
|
|
if (icon_url) {
|
|
if (!icon_url.startsWith("http")) {
|
|
return location.origin + icon_url
|
|
} else {
|
|
return icon_url
|
|
}
|
|
}
|
|
return icon_url
|
|
|
|
},
|
|
get_upload_text(is_new) {
|
|
if (is_new) {
|
|
return '新应用上传'
|
|
} else {
|
|
return '应用更新'
|
|
}
|
|
}
|
|
|
|
}, mounted() {
|
|
getUserInfoFun(this);
|
|
this.$store.dispatch('doucurrentapp', {});
|
|
this.getappsFun({});
|
|
},
|
|
destroyed() {
|
|
window.removeEventListener('scroll', this.auto_load, false);
|
|
this.loadingobj.close();
|
|
},
|
|
watch: {
|
|
// eslint-disable-next-line no-unused-vars
|
|
default_pay_radio: function (val, oldVal) {
|
|
this.buy_button_disable = !(this.default_pay_radio.length > 2 && this.default_price_radio.length > 2);
|
|
},
|
|
// eslint-disable-next-line no-unused-vars
|
|
default_price_radio: function (val, oldVal) {
|
|
this.buy_button_disable = !(this.default_pay_radio.length > 2 && this.default_price_radio.length > 2);
|
|
},
|
|
// eslint-disable-next-line no-unused-vars
|
|
keysearch: function (val, oldVal) {
|
|
// this.searchapps()
|
|
let keysearch = this.keysearch.replace(/^\s+|\s+$/g, "");
|
|
if (keysearch === "") {
|
|
this.searchFun()
|
|
}
|
|
},
|
|
// eslint-disable-next-line no-unused-vars
|
|
searchfromtype: function (val, oldVal) {
|
|
this.applists = [];
|
|
this.query.page = 1;
|
|
// this.keysearch='';
|
|
this.searchFun();
|
|
// this.getappsFun({"type": this.searchfromtype});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.el-container {
|
|
margin: 10px auto 100px;
|
|
width: 1266px;
|
|
position: relative;
|
|
padding-bottom: 1px;
|
|
color: #9b9b9b;
|
|
-webkit-font-smoothing: antialiased;
|
|
border-radius: 1%;
|
|
}
|
|
|
|
.el-header {
|
|
margin-top: 20px;
|
|
padding-top: 30px;
|
|
border-bottom: 1px solid rgba(208, 208, 208, .5);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.surplus-card {
|
|
height: 40px;
|
|
text-align: right;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
|
|
.surplus-card .name {
|
|
font-size: 12px;
|
|
color: #9b9b9b;
|
|
}
|
|
|
|
.surplus-card .value {
|
|
font-size: 16px;
|
|
color: #434343;
|
|
}
|
|
|
|
.surplus-card .action {
|
|
width: 50px;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
padding: 0;
|
|
border-radius: 30px;
|
|
background-color: #fff;
|
|
border: 1px solid #B6BDC1;
|
|
}
|
|
|
|
.appdownload {
|
|
width: 96%;
|
|
height: 96%;
|
|
margin: 2px auto; /*水平居中*/
|
|
border-radius: 5px;
|
|
|
|
}
|
|
|
|
.appdownload /deep/ .el-upload-dragger {
|
|
width: 339.8px;
|
|
height: 430px;
|
|
background: #8bc3f8;
|
|
border: 0;
|
|
}
|
|
|
|
.appdownload /deep/ .el-icon-upload {
|
|
margin-top: 50%;
|
|
}
|
|
|
|
.appdownload /deep/ .el-upload-list__item-name {
|
|
margin-top: -43px;
|
|
}
|
|
|
|
|
|
.page-apps .card.app .action a, .page-apps .card.app .appname, .page-apps .card.app table tr td, .upload-modal .state-form .release-body .input-addon {
|
|
font-family: 'Open Sans', sans-serif
|
|
}
|
|
|
|
.page-apps .row-apps-top > div {
|
|
height: 100%
|
|
}
|
|
|
|
|
|
.page-apps .card.app .appicon img, .page-apps .card.app .combo-info img {
|
|
border-radius: 17.54%
|
|
}
|
|
|
|
.page-apps .card.app {
|
|
position: relative;
|
|
padding: 45px;
|
|
height: 340px;
|
|
background-color: #fff;
|
|
-webkit-transition: all .25s;
|
|
transition: all .25s
|
|
}
|
|
|
|
.page-apps .card.app:hover {
|
|
-webkit-transform: translateY(-4px);
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, .1)
|
|
}
|
|
|
|
.page-apps .card.app .type-icon {
|
|
position: absolute;
|
|
top: 9px;
|
|
right: 7px;
|
|
z-index: 2;
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
.page-apps .card.app .type-mark {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 1
|
|
}
|
|
|
|
.page-apps .card.app .type-mark i {
|
|
position: absolute;
|
|
top: 9px;
|
|
right: 7px
|
|
}
|
|
|
|
.page-apps .card.app .appicon {
|
|
display: inline-block;
|
|
width: 100px;
|
|
height: 100px;
|
|
cursor: pointer
|
|
}
|
|
|
|
.page-apps .card.app .appname {
|
|
margin-top: 36px;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
display: inline-block
|
|
}
|
|
|
|
.page-apps .card.app .appname i {
|
|
color: #f8ba0b;
|
|
font-size: 16px;
|
|
margin-right: 6px
|
|
}
|
|
|
|
.page-apps .card.app:hover .appname {
|
|
color: #4a4a4a
|
|
}
|
|
|
|
.page-apps .card.app .combo-info {
|
|
display: inline-block;
|
|
margin-left: 26px;
|
|
vertical-align: bottom
|
|
}
|
|
|
|
.page-apps .card.app .combo-info i {
|
|
margin-right: 14px;
|
|
font-size: 20px
|
|
}
|
|
|
|
.page-apps .card.app table {
|
|
width: 100%;
|
|
table-layout: fixed
|
|
}
|
|
|
|
.page-apps .card.app table tr td {
|
|
padding: 2px 0;
|
|
font-size: 12px;
|
|
color: #9b9b9b;
|
|
}
|
|
|
|
.page-apps .card.app table tr td > span {
|
|
display: inline-block
|
|
}
|
|
|
|
.page-apps .card.app table tr td:last-child {
|
|
color: #1a1a1a;
|
|
width: 58%
|
|
}
|
|
|
|
|
|
.page-apps .card.app .action {
|
|
position: absolute;
|
|
padding: 20px 0 40px 40px;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%
|
|
}
|
|
|
|
.page-apps .card.app .action .el-button {
|
|
text-decoration: none;
|
|
border: 1px solid;
|
|
text-align: center;
|
|
padding: 8px 20px;
|
|
margin-right: 4px;
|
|
border-radius: 40px;
|
|
color: #9b9b9b;
|
|
-webkit-transition: all .25s;
|
|
transition: all .25s;
|
|
display: inline-block
|
|
}
|
|
|
|
.page-apps .card.app .action .el-button:hover {
|
|
color: #7e9bf8
|
|
}
|
|
|
|
.page-apps .card.app .action .el-button i {
|
|
font-size: 18px;
|
|
margin-right: 4px;
|
|
display: inline-block;
|
|
vertical-align: middle
|
|
}
|
|
|
|
|
|
.page-apps .card.app .action .btn-remove {
|
|
font-size: 0;
|
|
border: 1px solid;
|
|
background: 0;
|
|
padding: 10px;
|
|
border-radius: 50%;
|
|
vertical-align: top;
|
|
color: #9b9b9b;
|
|
}
|
|
|
|
.page-apps .card.app .action .btn-remove {
|
|
font-size: 16px
|
|
}
|
|
|
|
.page-apps .card.app .action .btn-remove:hover {
|
|
background-color: #ec4242;
|
|
color: #fff
|
|
}
|
|
|
|
.page-apps .card-android .type-mark {
|
|
height: 0;
|
|
width: 0;
|
|
border-top: 48px solid #a4c639;
|
|
border-left: 48px solid transparent
|
|
}
|
|
|
|
.page-apps .card-ios .type-mark {
|
|
height: 0;
|
|
width: 0;
|
|
border-top: 48px solid #c6c7c9;
|
|
/*border-top-right-radius: 10px;*/
|
|
border-left: 48px solid transparent;
|
|
}
|
|
|
|
|
|
.page-apps .card-ios {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.page-apps .card.card-invite .appname {
|
|
color: #4a4a4a;
|
|
margin-top: 0
|
|
}
|
|
|
|
|
|
.page-apps .card.card-invite .actions button {
|
|
display: block;
|
|
padding: 8px;
|
|
width: 120px;
|
|
border: 1px solid #4a4a4a;
|
|
border-radius: 20px;
|
|
background-color: transparent
|
|
}
|
|
|
|
.page-apps .card.card-invite .actions button:first-child {
|
|
position: absolute;
|
|
bottom: 44px;
|
|
margin: 0;
|
|
background-color: #4a4a4a;
|
|
color: #fff
|
|
}
|
|
|
|
.page-apps .card.card-invite .actions button:last-child {
|
|
position: absolute;
|
|
bottom: 44px;
|
|
left: 170px;
|
|
border-color: transparent
|
|
}
|
|
|
|
.page-apps .card.card-invite .actions button:last-child:hover {
|
|
color: #4a4a4a
|
|
}
|
|
|
|
/*最外层容器样式*/
|
|
.wrap {
|
|
width: 100px;
|
|
height: 100px;
|
|
/*margin: 119px;*/
|
|
margin: 120px auto 119px auto;
|
|
position: relative;
|
|
z-index: 9999;
|
|
}
|
|
|
|
/*包裹所有容器样式*/
|
|
.cube {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 0 auto;
|
|
transform-style: preserve-3d;
|
|
transform: rotateX(-30deg) rotateY(-80deg);
|
|
animation: rotate linear 20s infinite;
|
|
}
|
|
|
|
@-webkit-keyframes rotate {
|
|
from {
|
|
transform: rotateX(0deg) rotateY(0deg);
|
|
}
|
|
to {
|
|
transform: rotateX(360deg) rotateY(360deg);
|
|
}
|
|
}
|
|
|
|
.cube div {
|
|
position: absolute;
|
|
width: 200px;
|
|
height: 200px;
|
|
opacity: 0.8;
|
|
transition: all .4s;
|
|
}
|
|
|
|
/*定义所有图片样式*/
|
|
.pic {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.cube .out_front {
|
|
transform: rotateY(0deg) translateZ(100px);
|
|
}
|
|
|
|
.cube .out_back {
|
|
transform: translateZ(-100px) rotateY(180deg);
|
|
}
|
|
|
|
.cube .out_left {
|
|
transform: rotateY(-90deg) translateZ(100px);
|
|
}
|
|
|
|
.cube .out_right {
|
|
transform: rotateY(90deg) translateZ(100px);
|
|
}
|
|
|
|
.cube .out_top {
|
|
transform: rotateX(90deg) translateZ(100px);
|
|
}
|
|
|
|
.cube .out_bottom {
|
|
transform: rotateX(-90deg) translateZ(100px);
|
|
}
|
|
|
|
/*定义小正方体样式*/
|
|
.cube span {
|
|
display: block;
|
|
width: 100px;
|
|
height: 100px;
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 50px;
|
|
}
|
|
|
|
.cube .in_pic {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.cube .in_front {
|
|
transform: rotateY(0deg) translateZ(50px);
|
|
}
|
|
|
|
.cube .in_back {
|
|
transform: translateZ(-50px) rotateY(180deg);
|
|
}
|
|
|
|
.cube .in_left {
|
|
transform: rotateY(-90deg) translateZ(50px);
|
|
}
|
|
|
|
.cube .in_right {
|
|
transform: rotateY(90deg) translateZ(50px);
|
|
}
|
|
|
|
.cube .in_top {
|
|
transform: rotateX(90deg) translateZ(50px);
|
|
}
|
|
|
|
.cube .in_bottom {
|
|
transform: rotateX(-90deg) translateZ(50px);
|
|
}
|
|
|
|
/*鼠标移入后样式*/
|
|
.cube:hover .out_front {
|
|
transform: rotateY(0deg) translateZ(200px);
|
|
}
|
|
|
|
.cube:hover .out_back {
|
|
transform: translateZ(-200px) rotateY(180deg);
|
|
}
|
|
|
|
.cube:hover .out_left {
|
|
transform: rotateY(-90deg) translateZ(200px);
|
|
}
|
|
|
|
.cube:hover .out_right {
|
|
transform: rotateY(90deg) translateZ(200px);
|
|
}
|
|
|
|
.cube:hover .out_top {
|
|
transform: rotateX(90deg) translateZ(200px);
|
|
}
|
|
|
|
.cube:hover .out_bottom {
|
|
transform: rotateX(-90deg) translateZ(200px);
|
|
}
|
|
|
|
.text-gift {
|
|
color: #8E7BF8;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.package-item .unit {
|
|
font-size: 14px;
|
|
color: #869096;
|
|
}
|
|
|
|
.package-item .times {
|
|
font-size: 24px;
|
|
line-height: 28px;
|
|
color: #4F5156;
|
|
}
|
|
|
|
.package-item .money {
|
|
font-size: 30px;
|
|
color: #7e5ef8;
|
|
line-height: 42px;
|
|
}
|
|
|
|
.package-item .package-content {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.package-item {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
border-right: 1px solid transparent;
|
|
padding: 8px 48px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.package-item:not(:last-child) {
|
|
border-right-color: #DBE0E3;
|
|
}
|
|
|
|
.packages {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.package-actions .btn:hover {
|
|
color: #fff;
|
|
background-color: #7CB1F8;
|
|
border-color: #7CB1F8;
|
|
cursor: pointer;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.package-actions .btn {
|
|
background-color: #fff;
|
|
border: 1px solid #B6BDC1;
|
|
border-radius: 30px;
|
|
min-width: 120px;
|
|
height: 40px;
|
|
}
|
|
|
|
.arraw-badge {
|
|
position: absolute;
|
|
background-color: #1dcaf8;
|
|
color: #fff;
|
|
left: -1px;
|
|
top: 0;
|
|
width: 30px;
|
|
height: 40px;
|
|
text-align: center;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.arraw-badge .arraw {
|
|
width: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
border: 15px solid transparent;
|
|
border-bottom: 10px solid #fff;
|
|
border-top: none;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.canvas {
|
|
position: absolute;
|
|
margin-top: -58px;
|
|
z-index: 999;
|
|
}
|
|
|
|
.pay-current {
|
|
width: 18px;
|
|
height: 19px;
|
|
position: absolute;
|
|
bottom: -1px;
|
|
right: -1px;
|
|
}
|
|
|
|
.pay-icon {
|
|
width: 120px;
|
|
height: 30px;
|
|
background-size: 100%;
|
|
position: absolute;
|
|
top: 6px;
|
|
left: 15px;
|
|
}
|
|
|
|
</style>
|
|
|