web-3x/UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
hiyu 2024-06-19 17:34:51 +07:00
parent 144feb66a6
commit e8ee371974
16 changed files with 279 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -7,6 +7,7 @@
name="viewport" name="viewport"
content="width=device-width,initial-scale=1,shrink-to-fit=no,maximum-scale=1,minimum-scale=1,user-scalable=0,minimal-ui,viewport-fit=cover" content="width=device-width,initial-scale=1,shrink-to-fit=no,maximum-scale=1,minimum-scale=1,user-scalable=0,minimal-ui,viewport-fit=cover"
/> />
<meta name="google" content="notranslate">
<title>Web</title> <title>Web</title>
</head> </head>
<body> <body>

2
src/api/index.js
View File

@ -14,6 +14,8 @@ export default {
// user // user
USER_INFO: "/user/info", USER_INFO: "/user/info",
USER_SET_FULLNAME: "/user/set-fullname", USER_SET_FULLNAME: "/user/set-fullname",
USER_SET_GENDER: "/user/set-gender",
USER_MONEY_LOGS: "user/money-logs",
// game // game
GAME_INFO: "/product/info", GAME_INFO: "/product/info",

6
src/components/deposit/Recharge.vue
View File

@ -16,7 +16,7 @@ const submit = () => {
if (amount.value > 0) { if (amount.value > 0) {
router.push({ name: "Channel", query: { money: amount.value } }); router.push({ name: "Channel", query: { money: amount.value } });
} else { } else {
showFailToast("Số tiền sai"); showFailToast("Số điểm sai");
} }
}; };
</script> </script>
@ -45,7 +45,7 @@ const submit = () => {
<div class="content recharge"> <div class="content recharge">
<form class="van-form" @submit.prevent="submit"> <form class="van-form" @submit.prevent="submit">
<div class="form-item"> <div class="form-item">
<div class="form-item-title">Vui lòng nhập số tiền nạp</div> <div class="form-item-title">Vui lòng nhập số điểm nạp</div>
<div> <div>
<div <div
class="van-cell van-field" class="van-cell van-field"
@ -59,7 +59,7 @@ const submit = () => {
v-model.number="amount" v-model.number="amount"
type="text" type="text"
name="money" name="money"
placeholder="Vui lòng nhập số tiền nạp" placeholder="Vui lòng nhập số điểm nạp"
class="van-field__control" class="van-field__control"
style="color: #323233" style="color: #323233"
/> />

4
src/components/deposit/RechargeRecord.vue
View File

@ -94,10 +94,10 @@ onRefresh();
>Trả tiền</span >Trả tiền</span
> >
<span v-else-if="item.status == 0">Chưa thanh toán</span> <span v-else-if="item.status == 0">Chưa thanh toán</span>
<span style="color: rgb(7, 193, 96)" v-else <span style="color: #ff253f" v-else
>Thanh toán thất bại</span >Thanh toán thất bại</span
> >
<span>Số tiền：{{ formatNumber(item.amount) }}Đ</span> <span>Số điểm: {{ formatNumber(item.amount) }}Đ</span>
</div> </div>
<div class="desc"> <div class="desc">
<span>Minh họa：{{ item.note }}</span> <span>Minh họa：{{ item.note }}</span>

47
src/components/home/HomePage.vue
View File

@ -1,10 +1,30 @@
<script setup> <script setup>
import { ref } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
import { EffectCoverflow } from "swiper/modules"; import { EffectCoverflow } from "swiper/modules";
import { dataGirl, dataBoPhieu } from "./index.js" import { dataGirl, dataBoPhieu } from "./index.js";
import "swiper/css"; import "swiper/css";
import "swiper/css/effect-coverflow"; import "swiper/css/effect-coverflow";
import axios from "@/axios";
import API from "@/api";
import { handleRequest } from "@/helpers/request";
const gameList = ref([]);
const getGameIcon = (idx) => {
return dataBoPhieu[idx % dataBoPhieu.length]?.ico
}
const getGameList = () => {
handleRequest(axios.get(API.PRODUCT_LIST)).then((res) => {
if (res.success) {
gameList.value = res.data;
}
});
};
getGameList();
</script> </script>
<template> <template>
<div class="home-container"> <div class="home-container">
@ -78,21 +98,19 @@ import "swiper/css/effect-coverflow";
<div class="hot-items-div"> <div class="hot-items-div">
<div class="van-grid"> <div class="van-grid">
<router-link <router-link
to="/Lottery" :to="{ path: 'Lottery', query: { id: item.id }}"
class="van-grid-item" class="van-grid-item"
style="flex-basis: 25%" style="flex-basis: 25%"
v-for="bp in dataBoPhieu" v-for="item, index in gameList"
:key="index"
> >
<div <div
class="van-grid-item__content van-grid-item__content--center" class="van-grid-item__content van-grid-item__content--center"
> >
<div class="game_item_img van-image"> <div class="game_item_img van-image">
<img <img class="van-image__img" :src="getGameIcon(index)" />
class="van-image__img"
:src="bp.ico"
/>
</div> </div>
<span>{{bp.name}}</span> <span>{{ item.name }}</span>
</div> </div>
</router-link> </router-link>
</div> </div>
@ -108,9 +126,14 @@ import "swiper/css/effect-coverflow";
</div> </div>
<div role="feed" class="van-list"> <div role="feed" class="van-list">
<div class="movie_list_n"> <div class="movie_list_n">
<router-link :to="`/HomeDetail/${girl.id}`" class="movie-list-n-item" v-for="girl in dataGirl" :key="girl.id"> <router-link
:to="`/HomeDetail/${girl.id}`"
class="movie-list-n-item"
v-for="girl in dataGirl"
:key="girl.id"
>
<div class="movie-list-n-title"> <div class="movie-list-n-title">
{{girl.name}} {{ girl.name }}
</div> </div>
<div class="movie-list-n-img"> <div class="movie-list-n-img">
<div class="movie-list-n-img van-image" lazy="loading"> <div class="movie-list-n-img van-image" lazy="loading">
@ -122,7 +145,7 @@ import "swiper/css/effect-coverflow";
/> />
</div> </div>
<div class="movie-list-n-lab"> <div class="movie-list-n-lab">
{{girl.address}} {{ girl.address }}
</div> </div>
</div> </div>
<div class="movie-list-n-item-bottomm"> <div class="movie-list-n-item-bottomm">

34
src/components/lottery/Game.vue
View File

@ -1,22 +1,20 @@
<script setup> <script setup>
const games = [ import { ref } from "vue";
{ import axios from "@/axios";
id: 1, import API from "@/api";
name: "BỎ PHIẾU 1", import { handleRequest } from "@/helpers/request";
},
{ const games = ref([]);
id: 2, const getGameList = () => {
name: "BỎ PHIẾU 2", handleRequest(axios.get(API.PRODUCT_LIST)).then((res) => {
}, if (res.success) {
{ games.value = res.data;
id: 3, }
name: "BỎ PHIẾU 3", });
}, };
{
id: 4, getGameList();
name: "ĐẶC BIỆT",
},
];
</script> </script>
<template> <template>

4
src/components/lottery/LotteryGame.vue
View File

@ -114,7 +114,7 @@ const confirmOrder = () => {
} }
if (!amount.value) { if (!amount.value) {
return showFailToast("Vui lòng nhập số tiền."); return showFailToast("Vui lòng nhập số điểm.");
} }
isShowConfirmOrder.value = true; isShowConfirmOrder.value = true;
@ -320,7 +320,7 @@ const formatResultText2 = (r) => {
v-model.number="amount" v-model.number="amount"
type="number" type="number"
inputmode="numeric" inputmode="numeric"
placeholder="Vui lòng nhập số tiền" placeholder="Vui lòng nhập số điểm"
class="van-field__control" class="van-field__control"
/> />
</div> </div>

2
src/components/mine/GameRecord.vue
View File

@ -107,7 +107,7 @@ onRefresh();
<span style="color: rgb(7, 193, 96)"></span> <span style="color: rgb(7, 193, 96)"></span>
</div> </div>
<div class="time topInfoSp"> <div class="time topInfoSp">
<span>Số tiền đặt cược：{{ formatNumber(item.amount )}} Đ</span> <span>Số điểm đặt cược：{{ formatNumber(item.amount )}} Đ</span>
</div> </div>
<div class="time"> <div class="time">
<span>Thời gian phục vụ：{{ formatDateTime(item.createdAt) }}</span> <span>Thời gian phục vụ：{{ formatDateTime(item.createdAt) }}</span>

50
src/components/mine/Mine.vue
View File

@ -6,12 +6,18 @@ import { storeToRefs } from "pinia";
import { formatNumber } from "@/helpers/format"; import { formatNumber } from "@/helpers/format";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import axios from "@/axios";
import API from "@/api";
import { handleRequest } from "@/helpers/request";
import VipTableImage from "@/assets/images/common/vip-table.jpg"; import VipTableImage from "@/assets/images/common/vip-table.jpg";
const router = useRouter(); const router = useRouter();
const userStore = useUserStore(); const userStore = useUserStore();
const { userInfo, isLogin } = storeToRefs(userStore); const { userInfo, isLogin } = storeToRefs(userStore);
const loadingMoney = ref(false);
const loadingScore = ref(false);
const showVipTable = ref(false); const showVipTable = ref(false);
const withdrawLink = computed(() => { const withdrawLink = computed(() => {
@ -21,6 +27,32 @@ const withdrawLink = computed(() => {
const vipImgeSrc = computed(() => { const vipImgeSrc = computed(() => {
return `/vip/vip${userInfo?.value?.vip ?? 1}.png`; return `/vip/vip${userInfo?.value?.vip ?? 1}.png`;
}); });
const loadMoney = () => {
loadingMoney.value = true;
handleRequest(axios.get(API.USER_INFO + "/" + "money"))
.then((res) => {
userStore.updateUserInfo({ money: res.data })
})
.finally(() => {
setTimeout(() => {
loadingMoney.value = false;
}, 500);
});
};
const loadScore = () => {
loadingScore.value = true;
handleRequest(axios.get(API.USER_INFO + "/" + "score"))
.then((res) => {
userStore.updateUserInfo({ score: res.data })
})
.finally(() => {
setTimeout(() => {
loadingScore.value = false;
}, 500);
});
};
</script> </script>
<template> <template>
<div class="mine page"> <div class="mine page">
@ -121,16 +153,28 @@ const vipImgeSrc = computed(() => {
<span class="font-28 font-gray" style="font-size: 14px" <span class="font-28 font-gray" style="font-size: 14px"
>(100 Đ=100,000 VND)</span >(100 Đ=100,000 VND)</span
> >
<div class="refresh-btn"> <div
class="refresh-btn"
:class="[
loadingMoney
? 'van-loading__spinner van-loading__spinner--circular'
: '',
]"
@click="loadMoney"
>
<i class="van-icon van-icon-replay"></i> <i class="van-icon van-icon-replay"></i>
</div> </div>
</div> </div>
<div class="part-2"> <div class="part-2">
<p class="balance van-ellipsis" style="font-size: 24px">100/100</p> <p class="balance van-ellipsis" style="font-size: 24px"> {{ userInfo?.score }}/100</p>
<span class="font-28 font-gray" style="font-size: 14px"> <span class="font-28 font-gray" style="font-size: 14px">
Điểm tín nhiệm</span Điểm tín nhiệm</span
> >
<div class="refresh-btn"> <div class="refresh-btn" :class="[
loadingScore
? 'van-loading__spinner van-loading__spinner--circular'
: '',
]" @click="loadScore">
<i class="van-icon van-icon-replay"></i> <i class="van-icon van-icon-replay"></i>
</div> </div>
</div> </div>

6
src/components/mine/Personalreport.vue
View File

@ -27,7 +27,7 @@ const { userInfo } = storeToRefs(userStore);
<p class="title">Số lượng nhiệm vụ(Đ)</p> <p class="title">Số lượng nhiệm vụ(Đ)</p>
<p class="value">{{ formatNumber(userInfo.money) }}Đ</p> <p class="value">{{ formatNumber(userInfo.money) }}Đ</p>
<p class="tip"> <p class="tip">
Công thức tính lợi nhuận: số tiền thắng - số tiền nhiệm vụ Công thức tính lợi nhuận: số điểm thắng - số điểm nhiệm vụ
</p> </p>
</div> </div>
<div class="content"> <div class="content">
@ -39,7 +39,7 @@ const { userInfo } = storeToRefs(userStore);
</div> </div>
<div class="datalistitem"> <div class="datalistitem">
<div class="datalistitemValue">{{ formatNumber(userInfo?.moneyDeposit ?? 0) }}Đ</div> <div class="datalistitemValue">{{ formatNumber(userInfo?.moneyDeposit ?? 0) }}Đ</div>
<div class="datalistitemKey">Số tiền nạp</div> <div class="datalistitemKey">Số điểm nạp</div>
<div class="datalistitemRightLine"></div> <div class="datalistitemRightLine"></div>
</div> </div>
<div class="datalistitem"> <div class="datalistitem">
@ -49,7 +49,7 @@ const { userInfo } = storeToRefs(userStore);
</div> </div>
<div class="datalistitem"> <div class="datalistitem">
<div class="datalistitemValue">{{ formatNumber(userInfo?.moneyWin ?? 0) }}Đ</div> <div class="datalistitemValue">{{ formatNumber(userInfo?.moneyWin ?? 0) }}Đ</div>
<div class="datalistitemKey">Số tiền chiến thắng</div> <div class="datalistitemKey">Số điểm chiến thắng</div>
<div class="datalistitemRightLine"></div> <div class="datalistitemRightLine"></div>
</div> </div>
</div> </div>

4
src/components/setting/Info.vue
View File

@ -43,14 +43,14 @@ const { userInfo } = storeToRefs(userStore);
<router-link to="/Setsex" class="item van-hairline--bottom"> <router-link to="/Setsex" class="item van-hairline--bottom">
<div class="left">Giới tính</div> <div class="left">Giới tính</div>
<div class="right"> <div class="right">
<span class="desc">Không xác định</span <span class="desc">{{ userInfo.gender == 1 ? 'Nam giới' : userInfo.gender == 2 ? 'Nữ giới' : 'Không xác định'}}</span
><i class="van-icon van-icon-arrow"></i> ><i class="van-icon van-icon-arrow"></i>
</div> </div>
</router-link> </router-link>
<router-link to="/Setbank" class="item van-hairline--bottom"> <router-link to="/Setbank" class="item van-hairline--bottom">
<div class="left">Liên kết thông tin thẻ ngân hàng</div> <div class="left">Liên kết thông tin thẻ ngân hàng</div>
<div class="right"> <div class="right">
<span class="desc">Không có</span <span class="desc">{{ userInfo.isSetBank ? 'Ràng buộc': 'Không có' }}</span
><i class="van-icon van-icon-arrow"></i> ><i class="van-icon van-icon-arrow"></i>
</div> </div>
</router-link> </router-link>

100
src/components/setting/Moneylog.vue
View File

@ -1,3 +1,60 @@
<script setup>
import { reactive, ref } from "vue";
import axios from "@/axios";
import API from "@/api";
import { handleRequest } from "@/helpers/request";
import { formatNumber, formatDateTime } from "@/helpers/format";
import { showToast } from "vant";
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const params = reactive({
page: 1,
size: 10,
});
const onLoad = async () => {
const data = await getData();
loading.value = false;
if (refreshing.value) {
list.value = data;
refreshing.value = false;
return showToast("Làm mới thành công.");
}
list.value.unshift(...data);
if (data.length < params.size) {
finished.value = true;
}
};
const onRefresh = () => {
params.page = 1;
finished.value = false;
loading.value = true;
onLoad();
};
const getData = async () => {
const res = await handleRequest(axios.get(API.USER_MONEY_LOGS, { params }));
if (res.success) {
params.page += 1;
return res.data;
}
return [];
};
const colorStyle = (amount) => {
return amount > 0 ? {
color: "#07c160"
} : {}
}
onRefresh();
</script>
<template> <template>
<div class="container page"> <div class="container page">
<div class="header"> <div class="header">
@ -14,11 +71,48 @@
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="van-pull-refresh"> <van-pull-refresh
<div class="van-pull-refresh__track" style="transition-duration: 0ms"> v-model="refreshing"
<div class="van-pull-refresh__head"></div> @refresh="onRefresh"
pulling-text="Kéo lên để làm mới..."
loading-text="Đang tải..."
loosing-text="Phát hiện có thể làm mới được"
style="height: 100%; overflow: auto"
>
<van-empty description="Dữ liệu trống" v-if="!list.length" />
<van-list
v-else
v-model:loading="loading"
error-text="Lỗi"
loading-text="Đang tải..."
:finished="finished"
finished-text=""
@load="onLoad"
>
<div v-for="item in list" :key="item" class="listItem">
<div>
<div class="listTitle">{{ item.note }}</div>
<div class="listTime">
<div class="listTimeText">{{ formatDateTime(item.createAt) }}</div>
</div> </div>
</div> </div>
<div style="flex: 1 1 0%"></div>
<div class="listMoney" :style="colorStyle(item.amount > 0)">{{ formatNumber(item.amount) }}Đ</div>
</div>
</van-list>
</van-pull-refresh>
</div> </div>
</div> </div>
</template> </template>
<style scoped>
.listItem {
margin-bottom: 2.667vw;
padding: 2.667vw;
position: relative;
color: #000;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
</style>

32
src/components/setting/SetBank.vue
View File

@ -1,18 +1,35 @@
<script setup> <script setup>
import { ref } from "vue";
import { showFailToast } from "vant"; import { showFailToast } from "vant";
import { useUserStore } from "@/store/user"; import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
import { formatNumber } from "@/helpers/format" import { formatNumber } from "@/helpers/format";
import { computed } from "vue"; import { computed } from "vue";
// const router = useRouter(); // const router = useRouter();
import axios from "@/axios";
import API from "@/api";
import { handleRequest } from "@/helpers/request";
const userStore = useUserStore(); const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore); const { userInfo } = storeToRefs(userStore);
const banks = ref([]);
const setBankLink = computed(() => { const setBankLink = computed(() => {
return userInfo.value.isSetPayPass ? "/BindCard" : "/SetPayPassword"; return userInfo.value.isSetPayPass ? "/BindCard" : "/SetPayPassword";
}); });
const getBankList = () => {
handleRequest(axios.get(API.BANK_LIST)).then(res => {
if(res.success) {
banks.value = res.data;
}
});
};
getBankList();
</script> </script>
<template> <template>
<div class="container page"> <div class="container page">
@ -28,10 +45,21 @@ const setBankLink = computed(() => {
</div> </div>
</div> </div>
<div class="wrapper" style="background-color: #f2f2f5"> <div class="wrapper" style="background-color: #f2f2f5">
<router-link :to="setBankLink" class="add-card"> <router-link
:to="setBankLink"
class="add-card"
v-if="!userInfo.isSetBank"
>
<i class="van-icon van-icon-plus"></i <i class="van-icon van-icon-plus"></i
><span>Thêm tài khoản ngân hàng</span> ><span>Thêm tài khoản ngân hàng</span>
</router-link> </router-link>
<div class="bank" v-else>
<div class="info" v-for="item, index in banks" :key="index">
<div class="row-content">{{ item.bankName }}</div>
<div class="row-content">{{ item.holder }}</div>
<div class="row-content"></div>
</div>
</div>
<div class="tips"> <div class="tips">
Nhắc nhở: Vui lòng liên kết với ngân hàng. Nếu cần sửa đổi, vui lòng Nhắc nhở: Vui lòng liên kết với ngân hàng. Nếu cần sửa đổi, vui lòng
liên hệ bộ phận chăm sóc khách hàng trực tuyến liên hệ bộ phận chăm sóc khách hàng trực tuyến

33
src/components/setting/Setsex.vue
View File

@ -1,6 +1,31 @@
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
const checked = ref("1"); import { useRouter } from 'vue-router'
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";
import axios from "@/axios";
import API from "@/api";
import { handleRequest } from "@/helpers/request";
import { showFailToast } from "vant";
const router = useRouter();
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const checked = ref(userInfo.value?.gender ?? 0);
const onChangeGender = (e) => {
handleRequest(axios.post(API.USER_SET_GENDER, { gender: e })).then((res) => {
if (res.success) {
showFailToast('Thành công.')
router.push("/Infomation")
} else {
showFailToast(res.message ?? "Lỗi")
}
});
};
</script> </script>
<template> <template>
<div class="container page"> <div class="container page">
@ -16,9 +41,9 @@ const checked = ref("1");
</div> </div>
</div> </div>
<div class="sex"> <div class="sex">
<van-radio-group v-model="checked"> <van-radio-group v-model="checked" @change="onChangeGender">
<van-radio name="1">Nam giới</van-radio> <van-radio :name="1">Nam giới</van-radio>
<van-radio name="2">Nữ giới</van-radio> <van-radio :name="2">Nữ giới</van-radio>
</van-radio-group> </van-radio-group>
</div> </div>
</div> </div>

6
src/components/withdraw/Withdraw.vue
View File

@ -21,14 +21,14 @@ const formData = reactive({
const submit = () => { const submit = () => {
if (isNaN(formData.amount) || formData.amount <= 0) { if (isNaN(formData.amount) || formData.amount <= 0) {
return showFailToast("Vui lòng điền số tiền chính xác."); return showFailToast("Vui lòng điền số điểm chính xác.");
} }
if (!formData.password_withdraw) { if (!formData.password_withdraw) {
return showFailToast("Vui lòng nhập mật khẩu rút tiền"); return showFailToast("Vui lòng nhập mật khẩu rút");
} }
handleRequest(axios.post(API.TRANSACTION_WITHDRAW, formData)).then((res) => { handleRequest(axios.post(API.TRANSACTION_WITHDRAW, formData)).then((res) => {
if (res.success) { if (res.success) {
showFailToast("Rút tiền thành công."); showFailToast("Rút thành công.");
router.push("/mine"); router.push("/mine");
} else { } else {
showFailToast(res.message ?? "Lỗi"); showFailToast(res.message ?? "Lỗi");

6
src/components/withdraw/WithdrawRecord.vue
View File

@ -89,13 +89,13 @@ onRefresh();
<div v-for="item in list" :key="item" class="item_list"> <div v-for="item in list" :key="item" class="item_list">
<div class="topInfo"> <div class="topInfo">
<span style="color: rgb(7, 193, 96)" v-if="item.status == 1" <span style="color: rgb(7, 193, 96)" v-if="item.status == 1"
>Trả tiền</span >Trả điểm</span
> >
<span v-else-if="item.status == 0">Chưa thanh toán</span> <span v-else-if="item.status == 0">Chưa thanh toán</span>
<span style="color: rgb(7, 193, 96)" v-else <span style="color: #ff253f" v-else
>Thanh toán thất bại</span >Thanh toán thất bại</span
> >
<span>Số tiền：{{ formatNumber(item.amount) }}Đ</span> <span>Số điểm: {{ formatNumber(item.amount) }}Đ</span>
</div> </div>
<div class="desc"> <div class="desc">
<span>Minh họa：{{ item.note }}</span> <span>Minh họa：{{ item.note }}</span>