Skip to content

M
mycard
Commit 982f64a0 authored by 神楽坂玲奈's avatar 神楽坂玲奈
Browse files
Options

购买初步

parent fcb67fd4
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 65 deletions
app/app-detail.component.css
View file @ 982f64a0
......@@ -23,10 +23,6 @@ progress {
margin-right: 0.8em;
}
#news h3 {
font-size: 1.5rem;
}
#news p {
margin-bottom: 0;
}
......@@ -77,10 +73,16 @@ h2 {
margin-bottom: 0;
}
#icon {
.cover {
width: 128px;
height: 128px;
object-fit: contain;
box-shadow: 0 0 4px #ccc;
}
.banner {
width: 120px;
height:45px;
object-fit: cover;
}
#main {
......@@ -98,10 +100,14 @@ h2 {
position: relative;
}
#news h3 > .title {
font-size: 1rem;
color: inherit;
}
#news h3 {
padding-top: .8rem;
margin-bottom: 0;
font-size: 1rem;
}
#news p {
......@@ -132,12 +138,6 @@ h2 {
margin-bottom: .8rem;
}
#icon {
width: 128px;
height: 128px;
box-shadow: 0 0 4px #ccc;
}
#main {
display: flex;
flex-direction: row;
......@@ -218,4 +218,14 @@ table th, table td {
#tags {
font-size: 14px;
}
#purchase-form .form-check {
padding-right: 8px;
}
#purchase-form legend {
font-size: 1rem;
margin-bottom: 0;
margin-top: .5rem;
}
\ No newline at end of file
app/app-detail.component.html
View file @ 982f64a0
<div id="main" class="panel">
<img *ngIf="currentApp.cover" id="icon" class="rounded" [src]="currentApp.cover">
<img *ngIf="currentApp.cover" class="cover rounded" [src]="currentApp.cover">
<div id="right">
<h1>{{currentApp.name}}</h1>
<div id="time">您已玩了 2564 小时</div>
<!--应用未安装-->
<div *ngIf="!currentApp.isInstalled()">
<!--应用未购买-->
<div *ngIf="!currentApp.isBought()">
<button i18n type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#purchase-modal">{{currentApp.price.cny | currency:'CNY':true}} 购买</button>
<!--<button i18n (click)="updateInstallOption(currentApp)" type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#install-modal">我已经购买过</button>-->
</div>
<!--应用已购买，未安装-->
<div *ngIf="currentApp.isBought() && !currentApp.isInstalled()">
<button i18n (click)="updateInstallOption(currentApp)" type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#install-modal">安装</button>
<button i18n *ngIf="currentApp.runnable()" (click)="updateInstallOption(currentApp)" type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#import-modal">导入</button>
</div>
......@@ -50,45 +59,6 @@
</div>
<!--<div class="d-flex">-->
<!--<div class="panel" id="game_info">-->
<!--<p>-->
<!--《东方红魔乡 ～ the Embodiment of Scarlet Devil.》（东方红魔郷 ～ the Embodiment of Scarlet Devil.）是由同人组织上海爱丽丝幻乐团所制作的纵弹幕射击游戏，于2002年6月10日发布体验版，2002年8月11日（Comic Market62）正式发售，9月27日在各同人商店开始了委托贩卖。该作是东方Project的第6作，也是东方Project在Windows平台上的第一作。 </p>-->
<!--<div id="tags">-->
<!--<div class="btn btn-xs btn-danger" style="padding:3px 10px; margin:2px">弹幕</div>-->
<!--<div class="btn btn-xs btn-danger" style="padding:3px 10px; margin:2px">射击</div>-->
<!--<div class="btn btn-xs btn-danger" style="padding:3px 10px; margin:2px">单机</div>-->
<!--</div>-->
<!--</div>-->
<!--<div class="panel" id="game_info_2">-->
<!--<dl>-->
<!--<dt>开发</dt>-->
<!--<dd>上海爱丽丝幻乐团</dd>-->
<!--<dt>出版</dt>-->
<!--<dd>上海爱丽丝幻乐团</dd>-->
<!--<dt>发行日期</dt>-->
<!--<dd>2002年8月11日</dd>-->
<!--</dl>-->
<!--</div>-->
<!--</div>-->
<div class="d-flex">
<div class="panel" id="game_info">
<p [innerHTML]="currentApp.description"></p>
<div id="tags" *ngIf="currentApp.tags">
<div *ngFor="let tag of currentApp.tags" class="btn btn-xs btn-danger" style="padding:3px 10px; margin:2px">{{tags[tag] || tag}}</div>
</div>
</div>
<div class="panel" id="game_info_2">
<dl>
<dt>开发</dt>
<dd><a href="https://github.com/Fluorohydride/ygopro">Fluorohydride</a></dd>
<dt>发行日期</dt>
<dd>{{currentApp.released_at | date:'mediumDate'}}</dd>
</dl>
</div>
</div>
<div id="arena" class="panel panel-default" *ngIf="currentApp.id === 'ygopro' && points ">
<h2 i18n>排位成绩</h2>
<table class="table table-sm">
......@@ -134,13 +104,27 @@
<a i18n href="https://mycard.moe/ygopro/arena/" target="_blank" class="moreinfo">更多资料</a>
</div>
<!--<div class="panel panel-default" *ngIf="currentApp.id === 'ygopro'">--><!--<h2 i18n>社区</h2>--><!--<div class="d-flex">--><!--<div class="card">--><!--<img src="https://ygobbs.com/uploads/default/original/3X/7/b/7bf0d51bf506678f2660bf427526f4a71d213658.png">--><!--<p class="card-text">12月13日 MyCard更新RATE,1033.C程序。手动更新以及载入中/版本不匹配等错误解决方法。</p>--><!--</div>--><!--<ul>--><!--<li>决斗都市——ygocore战队联盟站报名贴</li>--><!--<li>七夕情侣YGOPRO联盟 夏日双打大赛</li>--><!--<li>蠢鱼的一些关于安装和更新指南</li>--><!--<li>MyCard V3 使用说明</li>--><!--</ul>--><!--</div>--><!--</div>-->
<div class="d-flex">
<div class="panel" id="game_info">
<p [innerHTML]="currentApp.description"></p>
<div id="tags" *ngIf="currentApp.tags">
<div *ngFor="let tag of currentApp.tags" class="btn btn-xs btn-danger" style="padding:3px 10px; margin:2px">{{tags[tag] || tag}}</div>
</div>
</div>
<div class="panel" id="game_info_2">
<dl>
<dt>开发</dt>
<dd><a href="https://github.com/Fluorohydride/ygopro">Fluorohydride</a></dd>
<dt>发行日期</dt>
<dd>{{currentApp.released_at | date:'mediumDate'}}</dd>
</dl>
</div>
</div>
<div class="panel panel-default" *ngIf="news && news.length">
<h2 i18n>新闻</h2>
<div id="news" *ngFor="let item of news">
<h3>{{item.title}}</h3>
<h3><a class="title" [href]="item.url" target="_blank">{{item.title}}</a></h3>
<span>{{item.updated_at | date:'shortDate'}}</span>
<p>{{item.text}}</p>
<a i18n *ngIf="item.url" [href]="item.url" target="_blank">了解更多</a>
......@@ -286,4 +270,47 @@
</div>
</form>
</div>
</div>
<div class="modal fade" id="purchase-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" *ngIf="!currentApp.isBought()">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 i18n class="modal-title">购买 {{currentApp.name}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span>&times;</span>
</button>
</div>
<div class="modal-body">
<div class="d-flex justify-content-between">
<img *ngIf="currentApp.cover" [src]="currentApp.cover" class="banner">
<span class="p-2">{{currentApp.name}}</span>
<span class="p-2 ml-auto">{{currentApp.price.cny | currency:'CNY':true}}</span>
</div>
<form id="purchase-form" class="form-inline">
<!--<fieldset class="form-group">-->
<legend>支付方式</legend>
<div class="form-check">
<input id="alipay" type="radio" class="form-check-input" name="optionsRadios" value="alipay" checked>
<label for="alipay" class="form-check-label">支付宝</label>
</div>
<div class="form-check">
<input id="wechat" type="radio" class="form-check-input" name="optionsRadios" value="alipay" checked>
<label for="wechat" class="form-check-label">微信</label>
</div>
<!--<div class="form-check">-->
<!--<input id="paypal" type="radio" class="form-check-input" name="optionsRadios" value="alipay" checked>-->
<!--<label for="paypal" class="form-check-label">PayPal</label>-->
<!--</div>-->
<!--</fieldset>-->
</form>
</div>
<div class="modal-footer">
<button i18n type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button i18n type="submit" [disabled]="import_path && !theForm.form.valid" class="btn btn-primary">购买</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
app/app.ts
View file @ 982f64a0
......@@ -78,7 +78,9 @@ export class App {
cover: string;
background: string;
static downloadUrl (app: App, platform: string, locale: string): string {
price: {[currency: string]: string}
static downloadUrl(app: App, platform: string, locale: string): string {
if (app.id === 'ygopro') {
return `https://thief.mycard.moe/metalinks/${app.id}-${process.platform}-${locale}/${app.version}`;
} else if (app.id === 'desmume') {
......@@ -88,7 +90,7 @@ export class App {
}
static checksumUrl (app: App, platform: string, locale: string): string {
static checksumUrl(app: App, platform: string, locale: string): string {
if (app.id === 'ygopro') {
return `https://thief.mycard.moe/checksums/${app.id}-${platform}-${locale}/${app.version}`;
} else if (app.id === 'desmume') {
......@@ -97,7 +99,7 @@ export class App {
return `https://thief.mycard.moe/checksums/${app.id}/${app.version}`;
}
static updateUrl (app: App, platform: string, locale: string): string {
static updateUrl(app: App, platform: string, locale: string): string {
if (app.id === 'ygopro') {
return `https://thief.mycard.moe/update/${app.id}-${platform}-${locale}/${app.version}`;
} else if (app.id === 'desmume') {
......@@ -106,6 +108,10 @@ export class App {
return `https://thief.mycard.moe/update/${app.id}/${app.version}`;
}
isBought() {
return !this.price;
}
isLanguage() {
return this.category === Category.module && this.tags.includes('language');
}
......@@ -177,6 +183,8 @@ export class App {
this.icon = app.icon;
this.cover = app.cover;
this.background = app.background;
this.price = app.price;
}
findDependencies(): App[] {
......
app/lobby.component.html
View file @ 982f64a0
......@@ -6,7 +6,6 @@
<input #search id="search-input" type="text" class="form-control search" placeholder="搜索游戏" aria-describedby="basic-addon1">
</div>
<span i18n *ngIf="grouped_apps.installed">已安装</span>
<ul *ngIf="grouped_apps.installed" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.installed" class="nav-item">
......@@ -23,6 +22,17 @@
</a>
</li>
</ul>
<span i18n *ngIf="grouped_apps.test">测试</span>
<ul *ngIf="grouped_apps.test" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.test" class="nav-item">
<a (click)="$event.preventDefault(); chooseApp(app)" [href]="'https://mycard.moe/' + app.id" class="nav-link" [class.active]="app===currentApp">
<img *ngIf="app.icon" class="icon" [src]="app.icon">
{{app.name}}
</a>
</li>
</ul>
<span i18n *ngIf="grouped_apps.recommend">推荐</span>
<ul *ngIf="grouped_apps.recommend" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.recommend" class="nav-item">
......@@ -76,7 +86,7 @@
<div id="right">
<div id="main">
<app-detail class="scroll" *ngIf="currentApp" [currentApp]="currentApp"></app-detail>
<!--<roster class="scroll"></roster>-->
<roster class="scroll"></roster>
</div>
<div id="candy-wrapper" class="resize-wrapper resize-top" style="max-height: calc( 100% - 180px )">
......
app/lobby.component.ts
View file @ 982f64a0
......@@ -154,7 +154,7 @@ export class LobbyComponent implements OnInit {
if (app.isInstalled()) {
tag = 'installed';
} else {
tag = app.tags[0];
tag = app.tags ? app.tags[0] : 'test';
}
} else {
if (app.isInstalled()) {
......
app/roster.component.ts
View file @ 982f64a0
......@@ -15,10 +15,10 @@ export class RosterComponent implements OnInit, OnChanges {
chat = new EventEmitter<string>();
ngOnInit() {
console.log(this.roster);
// console.log(this.roster);
}
ngOnChanges() {
console.log(this.roster);
// console.log(this.roster);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment