Kg.SeaTime/Web/src/pages/prop/goods.vue

<template>
    <div class="content">
        <div class="common" v-if="data.img != ''">
            <Aimage :url="data.img" _alt="."></Aimage>
        </div>
        名称:{{ data.goodsName }}<br>
        <div class="common" v-if="data.code == 'Card'">
            等级:{{ data.lev }}星
        </div>
        获取途径:{{ data.source }}<br>
        说明:{{ data.tips }}<br>
        交易:{{ data.isDeal == 1 ? "可交易" : "不可交易" }}<br>
        赠送:{{ data.isGive == 1 ? "可赠送" : "不可赠送" }}<br>
        负重:{{ data.weight }}<br>
    </div>
    <div class="content" v-if="count > 0">
        <div class="common">
            数量:{{ count }}
        </div>
        <div class="common" v-if="data.code == 'Drug'">
            <Abutton @click="ShowDrugBar">添加药品栏</Abutton>
        </div>
        <div class="common" v-if="useState == 1">
            <Abutton @click="showUseNumView = true">使用物品</Abutton>
        </div>
        <div class="common" v-if="useState == 2">
            <Abutton @click="showUse">使用物品</Abutton>
        </div>
        <div class="common" v-if="useState == 3">
            <Abutton @click="btnChoice">使用物品</Abutton>
        </div>
        <div class="common" v-if="data.isDeal == 1">
            <Abutton @click="saleState = true">寄售</Abutton>
        </div>
    </div>


    <GamePopup v-model:show="showDrugView" title="【添加药品栏】">
        <!-- 自定义内容 -->
        <div class="common" style="margin-top: 10px;">
            药品名称：{{ data.goodsName }}<br>
            说明：{{ data.tips }}<br>
        </div>
        <div class="common" style="text-align: left;">
            添加数量：<input type="number" class="search-ipt" v-model="AddDrugCount"><br>
        </div>
        <div class="common" style="text-align: center;">
            <button class="ipt-btn" name="serch" @click="AddDrugBar" style="margin-top: 15px;">确认</button>
        </div>
    </GamePopup>
    <GamePopup v-model:show="showUseNumView" title="使用物品">
        <!-- 自定义内容 -->
        <div class="common" style="margin-top: 10px;">
            物品名称：{{ data.goodsName }}<br>
            物品数量：{{ count }}<br>
        </div>
        <div class="common" style="text-align: center;">
            <span style="font-size: 16px;">使用数量：</span><input type="number" class="search-ipt" v-model="useCount"><br>
            <button class="ipt-btn" name="serch" @click="UseGoods" style="margin-top: 15px;">确认</button>
        </div>
    </GamePopup>
    <GamePopup v-model:show="showUseView" title="使用物品">
        <!-- 自定义内容 -->
        <div class="common" style="margin-top: 10px;">
            物品名称：{{ data.goodsName }}<br>
            物品数量：{{ count }}<br>
        </div>
        <div class="common" style="text-align: center;">
            <button class="ipt-btn" name="serch" @click="UseGoods" style="margin-top: 15px;">确认</button>
        </div>
    </GamePopup>
    <GamePopup v-model:show="showChoiceView" title="选择物品" style="min-width: 60%;">
        <!-- 自定义内容 -->
        <div class="common" style="margin-top: 15px;">
            <div class="item border-btm" v-for="item in choiceData">
                <div>
                    {{ item.id }}.{{ item.name }}
                    <Abutton @click="btnChoiceOk(item.id)">选择</Abutton>
                </div>
                <div v-html="GameTool.GetPropHtml(item.award, 1, 2)"></div>
            </div>
        </div>
    </GamePopup>
    <!-- 寄售 -->
    <GamePopup v-model:show="saleState" title="【寄售物品】" style="width: 60%;">
        <div class="common" style="margin-top: 10px;">
            物品名称：{{ data.goodsName }}<br>
            物品数量：{{ count }}<br>
            <span style="font-size: 16px;">寄售价格:</span><input type="number" class="search-ipt"
                v-model="salePrice" />铜贝<br>
            <span style="font-size: 16px;">寄售数量:</span><input type="number" class="search-ipt" v-model="saleCount" />
        </div>
        <div class="common" style="text-align: center;">
            <button class="ipt-btn" name="serch" @click="SaleOk" style="margin-top: 15px;">寄售</button>
        </div>
    </GamePopup>
</template>
<script setup lang="ts">

definePageMeta({
    layout: layout.default,
    middleware: 'page-loading'
})
const data = ref<any>({});
const count = ref(0);
const useState = ref(0);
const useCount = ref(1);
let goodsId = PageExtend.QueryString("id");
onMounted(async () => {
    try {
        await BindData();
    }
    finally {
        PageLoading.Close();
    }
})



const BindData = async (): Promise<void> => {
    let result = await GoodsService.GetGoodsInfo(Number(goodsId));
    if (result.code == 0) {
        data.value = result.data.goods;
        count.value = result.data.count;
        useState.value = result.data.use;
    }
    else {
        MessageExtend.ShowDialog("提示", result.msg);
    }
};

/**添加到药品栏 */
const showDrugView = ref(false);
const AddDrugCount = ref(1);
const ShowDrugBar = async () => {
    showDrugView.value = true;
}

const AddDrugBar = async () => {
    if (AddDrugCount.value < 1 || AddDrugCount.value > 999) {
        MessageExtend.ShowToast("每次添加数量在1~999哦.");
        return;
    }
    MessageExtend.LoadingToast("添加中...");
    let result = await UserService.AddUserDrug(Number(goodsId), AddDrugCount.value)
    MessageExtend.LoadingClose();
    if (result.code == 0) {
        showDrugView.value = false;
        await BindData();
        MessageExtend.Notify(`成功添加${data.value.goodsName}×${AddDrugCount.value}到药品栏!`, "success");
    }
    else {
        MessageExtend.ShowDialog("提示", result.msg);
    }
}
const showUseView = ref(false);

const showUse = () => {
    useCount.value = 1;
    showUseView.value = true;
}

const showUseNumView = ref(false);

const UseGoods = async () => {
    if (useCount.value <= 0) {
        MessageExtend.ShowToast("使用数量不能小于0!", "fail")
        return;
    }
    MessageExtend.LoadingToast("使用中...");
    let result = await GoodsService.UseGoods(Number(goodsId), useCount.value);
    MessageExtend.LoadingClose();
    if (result.code == 0) {
        showUseNumView.value = false;
        showUseView.value = false;
        await BindData();
        MessageExtend.Notify(result.msg, "success", 5000);
    }
    else {
        MessageExtend.ShowDialog("提示", result.msg);
    }
}

const showChoiceView = ref(false);
const choiceData = ref<Array<any>>([]);
const btnChoice = () => {
    choiceData.value = JSON.parse(data.value.content);
    console.log(choiceData.value);
    showChoiceView.value = true;
}

const btnChoiceOk = async (id: number) => {
    MessageExtend.LoadingToast("使用中...");
    let result = await GoodsService.UseChoiceGoods(Number(goodsId), id);
    MessageExtend.LoadingClose();
    if (result.code == 0) {
        showChoiceView.value = false;
        await BindData();
        MessageExtend.Notify(result.msg, "success", 5000);
    }
    else {
        MessageExtend.ShowDialog("提示", result.msg);
    }
}


const saleState = ref(false);
const salePrice = ref(1);
const saleCount = ref(1);
const SaleOk = async () => {
    if (saleCount.value <= 0) {
        MessageExtend.ShowToast("寄售数量不能小于0!", "fail")
        return;
    }
    if (salePrice.value <= 0) {
        MessageExtend.ShowToast("寄售价格不能小于0!", "fail")
        return;
    }
    MessageExtend.LoadingToast("寄售中...");
    let result = await TradeService.Trade(1, goodsId, salePrice.value, saleCount.value);
    MessageExtend.LoadingClose();
    if (result.code == 0) {
        saleState.value = false;
        await BindData();
        MessageExtend.Notify("寄售成功!", "success");
    }
    else {
        MessageExtend.ShowDialog("寄售装备", result.msg);
    }
}
</script>