Skip to content

B
blindBox-vue
Commit bf439380 by haojie
Options

1

parent 2699e4ab
Showing with 134 additions and 23 deletions
index.html
......@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RESDAO</title>
</head>
......
public/vue.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
src/assets/svg/empty/empty.svg 0 → 100644
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1432_6120)">
<path d="M58.2266 0H21.7734C17.6875 0 14.0078 2.49219 12.4922 6.28906L0.359375 36.6094C0.125 37.2031 0 37.8281 0 38.4688V75C0 77.7578 2.24219 80 5 80H75C77.7578 80 80 77.7578 80 75V38.4609C80 37.8281 79.875 37.1953 79.6406 36.6016L67.5156 6.28906C65.9922 2.49219 62.3203 0 58.2266 0ZM21.7734 5H58.2344C60.2813 5 62.1172 6.24219 62.875 8.14062L73.9297 35.7812C74.2578 36.6016 73.6562 37.4922 72.7656 37.4922H59.0312C57.9531 37.4922 57 38.1797 56.6562 39.2031L55.5625 42.4922L54.4688 45.7812C54.125 46.8047 53.1719 47.4922 52.0938 47.4922H27.9062C26.8281 47.4922 25.875 46.8047 25.5312 45.7812L24.4375 42.4922L23.3438 39.2031C23 38.1797 22.0469 37.4922 20.9688 37.4922H7.23438C6.35156 37.4922 5.74219 36.6016 6.07031 35.7812L17.125 8.14062C17.8906 6.24219 19.7266 5 21.7734 5ZM72.5 75H7.5C6.11719 75 5 73.8828 5 72.5V45C5 43.6172 6.11719 42.5 7.5 42.5H18.7188C18.9844 42.5 19.2266 42.6719 19.3125 42.9297L21.3672 49.0859C22.0469 51.125 23.9609 52.5078 26.1094 52.5078H53.8984C56.0469 52.5078 57.9609 51.1328 58.6406 49.0859L60.6953 42.9297C60.7813 42.6719 61.0156 42.5 61.2891 42.5H72.5C73.8828 42.5 75 43.6172 75 45V72.5C75 73.8828 73.8828 75 72.5 75Z" fill="#A5A5A5"/>
</g>
<defs>
<clipPath id="clip0_1432_6120">
<rect width="80" height="80" fill="white"/>
</clipPath>
</defs>
</svg>
\ No newline at end of file
src/components/empty/index.less 0 → 100644
.custom-empty {
width: 100% !important;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
span {
font-weight: 700;
font-size: 30px;
color: #a5a5a5;
margin-top: 12px;
}
}
src/components/empty/index.tsx 0 → 100644
import { defineComponent } from 'vue';
import './index.less';
import EmptySvg from '@/assets/svg/empty/empty.svg';
export default defineComponent({
setup() {
return () => (
<div class="custom-empty">
<EmptySvg></EmptySvg>
<span>空空如也</span>
</div>
);
},
});
src/language/cn.ts
......@@ -4,6 +4,9 @@ const cn = {
raffle: '抽奖',
lp: 'LP扫描挖矿',
},
tips: {
invite: '邀请朋友参与，可提高成功概率',
},
header: {
connect: '连接',
connectWallet: '连接钱包',
......
src/language/en.ts
......@@ -4,6 +4,10 @@ const en = {
raffle: 'raffle',
lp: 'LP Scan Mining',
},
tips: {
invite:
'Invite friends to participate to increase the probability of success',
},
header: {
connect: 'Connect',
connectWallet: 'Connect',
......
src/pages/raffle/components/Activity/index.tsx
import {
computed,
defineComponent,
onMounted,
reactive,
ref,
watch,
} from 'vue';
import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
import './index.less';
import { useI18n } from 'vue-i18n';
import CustomButton from '@/components/button';
import Card from '../card';
import ActivityDetail from '../ActivityDetail';
import { getCurrentDevice } from '@/utils/tool';
import { getBlindBoxList } from '@/utils/api/BlindBox';
import { getBlindBoxList, getReceiptAddress } from '@/utils/api/BlindBox';
import Loading from '@/components/Loading';
import { useFoxWallet } from '@/store/FoxWallet';
import Empty from '@/components/empty';
export default defineComponent({
props: {
modelValue: String,
......@@ -21,6 +16,7 @@ export default defineComponent({
emits: ['update:modelValue'],
setup(props, { emit }) {
const { t } = useI18n();
const { $state: FoxWallet } = useFoxWallet();
const loading = ref(false);
// 详情内容
const detailObj = ref({});
......@@ -64,8 +60,20 @@ export default defineComponent({
loading.value = false;
}
};
onMounted(() => {
getList();
const getAddress = async () => {
try {
let res: any = await getReceiptAddress();
if (res.code == 0) {
FoxWallet.to = res.data;
}
} catch (e) {
console.log(e);
}
};
onMounted(async () => {
await getList();
// 获取收款地址
getAddress();
});
const onUpdateTime = (item: any) => {
/**
......@@ -109,6 +117,7 @@ export default defineComponent({
</div>
</div>
<Loading v-show={loading.value}></Loading>
<Empty v-show={!activityList.list.length && !loading.value}></Empty>
</div>
);
},
......
src/pages/raffle/components/ActivityDetail/index.tsx
......@@ -12,6 +12,7 @@ import {
useCanNotBuy,
} from '@/utils/api/BlindBox';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
export default defineComponent({
props: {
info: {
......@@ -20,11 +21,9 @@ export default defineComponent({
},
},
setup(props) {
// 收款地址--先写死，之后从接口获取
let MyAddress = '0x51eF357cf7204DB2a6e31750817F709a10c86f37';
const { t } = useI18n();
const route = useRoute();
const RouteParams = route.params;
const testImg = new URL('@/assets/img/test.png', import.meta.url).href;
// 邀请弹窗状态
const InviteVisible = ref(false);
let InterVal: any = null;
......@@ -91,9 +90,13 @@ export default defineComponent({
};
// 支付
const Payment = () => {
if (!FoxWallet.to) {
MessagePlugin.warning('缺少收款账号，请刷新重试');
return;
}
let eth: any = window;
// 转换后的收款地址
let MyNewAddress = MyAddress.substring(2).padStart(64, '0');
let MyNewAddress = FoxWallet.to.substring(2).padStart(64, '0');
// 实际价格--props.price
// 测试价格
// let price = 0.01;
......@@ -221,9 +224,11 @@ export default defineComponent({
)}
<span class="text">提示：一次只能购买一次</span>
<div class="open-link">
<span onClick={openInviteDialog}>
<OpenSvg></OpenSvg>
</span>
<t-tooltip content={t('tips.invite')}>
<span onClick={openInviteDialog}>
<OpenSvg></OpenSvg>
</span>
</t-tooltip>
</div>
</div>
</div>
......
src/pages/raffle/components/card/index.tsx
......@@ -134,7 +134,7 @@ export default defineComponent({
</div>
<div class="price end" v-show={props.showEnd}>
<div class="label">中奖可得</div>
<div class="value">{props.info.canObtain}$</div>
<div class="value">{props.info.price * 3}$</div>
</div>
</div>
</div>
......
src/pages/raffle/components/myraffle/index.less
.custom-my-blind-box {
min-height: 600px;
position: relative;
width: 100%;
.header {
......@@ -16,8 +15,26 @@
justify-content: space-between;
flex-wrap: wrap;
row-gap: 16px;
position: relative;
min-height: 132px;
& > * {
width: 32%;
}
}
.pagination-box {
margin-top: 20px;
.t-pagination {
display: flex;
align-items: center;
justify-content: center;
}
.t-is-current {
background: rgba(84, 79, 161, 0.08);
border-radius: 8px;
font-weight: 400;
font-size: 14px;
color: #544fa1;
border: none;
}
}
}
src/pages/raffle/components/myraffle/index.tsx
......@@ -14,6 +14,8 @@ import Loading from '@/components/Loading';
import Card from '../card';
import { UserOrder } from '@/utils/api/BlindBox';
import { useFoxWallet } from '@/store/FoxWallet';
import { MessagePlugin } from 'tdesign-vue-next';
import Empty from '@/components/empty';
export default defineComponent({
props: {
modelValue: String,
......@@ -39,6 +41,7 @@ export default defineComponent({
const isShowEnd = ref(false);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const btnOptions = computed(() => [
{
label: t('raffle.inprogress'),
......@@ -73,6 +76,10 @@ export default defineComponent({
};
const getList = async () => {
try {
if (!FoxWallet.address) {
MessagePlugin.warning('未连接钱包');
return;
}
loading.value = true;
let res: any = await UserOrder({
page: pageNum.value,
......@@ -81,12 +88,16 @@ export default defineComponent({
address: FoxWallet.address,
});
myblindBoxList.list = res.data.data;
total.value = res.data.total;
loading.value = false;
} catch (e) {
console.log(e);
loading.value = false;
}
};
const onPageChange = () => {
getList();
};
watch(
() => loading.value,
(v) => {
......@@ -142,8 +153,19 @@ export default defineComponent({
customStatus={CustomStatus.value}
></Card>
))}
<Empty v-show={!loading.value && !myblindBoxList.list.length}></Empty>
</div>
<Loading v-show={loading.value}></Loading>
<div class="pagination-box">
<t-pagination
v-model={pageNum.value}
v-model:pageSize={pageSize.value}
total={total.value}
totalContent={false}
showPageSize={false}
onCurrentChange={onPageChange}
/>
</div>
</div>
);
},
......
src/store/FoxWallet.ts
......@@ -5,6 +5,7 @@ export const useFoxWallet = defineStore('FoxWallet', {
return {
address: '',
MaskAddress: '',
to: '',
};
},
});
src/utils/Tdesign.ts
import { Dialog as TDialog } from 'tdesign-vue-next';
import {
Dialog as TDialog,
Tooltip as TTooltip,
Pagination as TPagination,
} from 'tdesign-vue-next';
const components = [TDialog];
const components = [TDialog, TTooltip, TPagination];
// 无法循环挂载的组件--单独拎出来
const oncomponents = [];
export default {
......
src/utils/api/BlindBox.ts
......@@ -43,3 +43,8 @@ export const UserOrder = (data: any) => {
params: data,
});
};
// 获取收款地址
export const getReceiptAddress = () => {
return request.get('/api/address');
};
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