275 lines
8.1 KiB
JavaScript
275 lines
8.1 KiB
JavaScript
|
|
|
|
import Util from '../utils/util.js';
|
|
export default {
|
|
init: function () {
|
|
Dialog.injectStyle(shop_css);
|
|
},
|
|
selected_item: 0,
|
|
close: function () {
|
|
this.element.remove();
|
|
this.isShow = false;
|
|
}, onData: function (data) {
|
|
if (data.money) {
|
|
let ms = data.money ?? [0, 0];
|
|
this.money = ms[0];
|
|
this.cash_money = ms[1];
|
|
if (ms.length > 2) {
|
|
this.footers = ["黄金", "元宝", '活动'];
|
|
this.act_money = ms[2];
|
|
this.act_name = data.mtype ?? "<hic>积分</hic>";
|
|
}
|
|
this.create_footer();
|
|
}
|
|
if (data.remove) {
|
|
let item = this.get_item(data.remove);
|
|
if (item) item.removed = true;
|
|
return this.show_items();
|
|
}
|
|
if (data.item) {
|
|
let [id, count] = data.item;
|
|
let item = this.get_item(id);
|
|
if (item) {
|
|
item.count = count;
|
|
this.show_items();
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (!data.idx) return;
|
|
this.idx = data.idx;
|
|
this.list0 = this.format_items(data.selllist[0], 0);
|
|
this.list1 = this.format_items(data.selllist[1], 1);
|
|
if (data.selllist.length > 2)
|
|
this.list2 = this.format_items(data.selllist[2], 2);
|
|
|
|
this.show_items();
|
|
},
|
|
footerChanged: function (index) {
|
|
|
|
this.selected_item = parseInt(index);
|
|
this.show_items();
|
|
this.create_footer();
|
|
}, footers: ["黄金", "元宝"],
|
|
create_footer: function () {
|
|
if (!this.isShow) return;
|
|
var html = [];
|
|
for (var i = 0; i < this.footers.length; i++) {
|
|
html.push("<span class='footer-item" + (i == this.selected_item
|
|
? " select" : "") + "' for='" + i + "''>"
|
|
+ this.footers[i] + "</span>");
|
|
}
|
|
if (this.selected_item === 0) {
|
|
html.push('<div class="obj-money">',
|
|
this.money > 0 ? "你身上有" + Util.moneyToStr(this.money) : "你身上没有银两"
|
|
, '</div>');
|
|
} else if (this.selected_item === 1) {
|
|
html.push('<div class="obj-money">',
|
|
this.cash_money > 0 ? "你身上有" + this.cash_money
|
|
+ "<hij>元宝</hij>" : "你身上没有元宝"
|
|
, '<span cmd="transmoney">账号转入</span></div>');
|
|
} else if (this.selected_item === 2) {
|
|
html.push('<div class="obj-money">',
|
|
"你身上有", this.act_money > 0 ? this.act_money : 0
|
|
, this.act_name);
|
|
}
|
|
Dialog.footer(html.join(""));
|
|
},
|
|
format_items: function (ary, mtype) {
|
|
let items = [];
|
|
for (let data of ary) {
|
|
if (!data) continue;
|
|
let item = {
|
|
id: data[0], name: data[1],
|
|
desc: data[2], value: data[3], grade: data[4],
|
|
discount: data[5]
|
|
};
|
|
if (data[6]) {
|
|
item.limit = data[6];
|
|
item.count = data[7];
|
|
}
|
|
if (item.discount < 1) {
|
|
if (mtype === 0)
|
|
item.price0 = "<del>" + item.value + "两黄金</del>";
|
|
else if (mtype === 1)
|
|
item.price0 = "<del>" + item.value + "元宝</del>";
|
|
else if (mtype === 2)
|
|
item.price0 = "<del>" + item.value + this.act_name + "</del>";
|
|
item.value = item.value * item.discount;
|
|
}
|
|
if (mtype === 0) {
|
|
if (item.value >= 1)
|
|
item.price = "<hiy>" + item.value + "两黄金</hiy>";
|
|
else
|
|
item.price = "<wht>" + (item.value * 100) + "两白银</wht>";
|
|
} else if (mtype === 1) {
|
|
item.price = "<hij>" + item.value + "元宝</hij>";
|
|
} else if (mtype === 2) {
|
|
item.price = item.value + this.act_name;
|
|
|
|
}
|
|
|
|
items.push(item);
|
|
}
|
|
return items;
|
|
}
|
|
, show_items: function () {
|
|
if (!this.isShow) return;
|
|
this.create_items([this.list0, this.list1, this.list2][this.selected_item]);
|
|
}, get_item: function (id) {
|
|
|
|
if (this.list0) for (let item of this.list0) if (item.id === id) return item;
|
|
if (this.list1) for (let item of this.list1) if (item.id === id) return item;
|
|
if (this.list2) for (let item of this.list2) if (item.id === id) return item;
|
|
},
|
|
show: function (data) {
|
|
if (!this.element) {
|
|
this.element = $("<div class='dialog-shop-content'><div class='dialog-shop'></div></div>");
|
|
}
|
|
Dialog.title("商品列表");
|
|
Dialog.icon("shopping-cart");
|
|
this.isShow = true;
|
|
this.element.appendTo(Dialog.contentElement);
|
|
if (!this.idx) SendCommand("shop");
|
|
else SendCommand("shop " + this.idx);
|
|
}, create_items: function (items) {
|
|
let str = [];
|
|
for (let i = 0; i < items.length; i++) {
|
|
let item = items[i];
|
|
if (item.removed) {
|
|
items.splice(i, 1);
|
|
i--;
|
|
continue;
|
|
}
|
|
str.push("<div class='shop-item");
|
|
str.push(' grade', item.grade);
|
|
str.push("'><div class='flex-1'><div class='shop-item-title'>");
|
|
|
|
str.push('<div class="shop-item-name">', item.name, '</div>');
|
|
if (item.limit > 0)
|
|
str.push("(", item.count, "/", item.limit, ")");
|
|
|
|
str.push("</div>");
|
|
str.push("<pre class='shop-desc'>");
|
|
str.push(item.desc)
|
|
str.push("</pre></div>");
|
|
str.push("<div class='shop-btn' ");
|
|
str.push('cmd="_confirm shop ', item.id);
|
|
if (item.limit > 0) {
|
|
str.push(' ', item.limit - item.count);
|
|
}
|
|
str.push('">');
|
|
if (item.price0) {
|
|
str.push(' ', item.price0, ' ');
|
|
}
|
|
str.push(item.price);
|
|
str.push("</div>");
|
|
str.push("</div>");
|
|
}
|
|
this.element.find('.dialog-shop').html(str.join(""));
|
|
}
|
|
};
|
|
|
|
const shop_css = `
|
|
|
|
.dialog-shop-content {
|
|
height: 25em;
|
|
}
|
|
|
|
.dialog-shop {
|
|
max-height: 32em;
|
|
padding-bottom: 0.5em;
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.dialog-shop>.shop-item {
|
|
border-radius: 6px;
|
|
background-color: #111111;
|
|
border-left-width: 4px;
|
|
border-left-style: solid;
|
|
position: relative;
|
|
margin-bottom: 0.5em;
|
|
padding-left: 0.5em;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.shop-item-title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
line-height: 2em;
|
|
place-items: 1em;
|
|
}
|
|
|
|
.shop-item-title>.shop-item-name {
|
|
margin: 0px;
|
|
color: var(--border-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.shop-item-title>.discount-tag {
|
|
|
|
background: linear-gradient(135deg, #ff3e3e 0%, #ff9100 100%);
|
|
color: white;
|
|
width: 4em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
border-radius: 0.5em;
|
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
|
|
|
|
.dialog-shop>.shop-item .shop-desc {
|
|
margin: 0;
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.dialog-shop>.shop-item .shop-label {
|
|
background: linear-gradient(110deg, transparent 0%, rgba(255, 159, 28, 0.8) 50%, transparent 100%);
|
|
|
|
animation: shine 3s infinite linear;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
.dialog-shop>.shop-item>.shop-btn {
|
|
width: 8em;
|
|
display: inline-block;
|
|
border-left: 1px solid var(--border-color);
|
|
text-align: center;
|
|
font-weight: bold;
|
|
background-color: transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
background-color: #222;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dialog-shop-footer {
|
|
text-align: right;
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
.dialog-shop-footer>span {
|
|
line-height: 1.8em;
|
|
margin-left: 1em;
|
|
color: #808000;
|
|
display: inline-block;
|
|
padding-right: 1em;
|
|
text-align: center;
|
|
text-decoration: underline;
|
|
border-right: 1px solid #808000;
|
|
}
|
|
|
|
`;
|