feat: 更新
This commit is contained in:
dengtongyu committed
1 parent
835a93a6cd
commit
6501e61ffa
10 files changed
+319
-302
No files matched your search
+217
-17
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts" name="Home">
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { ref, computed } from "vue";
|
||||
import { showToast } from "vant";
|
||||
import pinia from "../store/pinia";
|
||||
import { pay } from "../store";
|
||||
import { getQueryString } from "@/lib/util";
|
||||
@@ -8,40 +9,128 @@ const payStore = pay(pinia);
|
||||
const locateObj = getQueryString();
|
||||
const { openId, data, channel } = locateObj;
|
||||
|
||||
payStore.openId = openId || "";
|
||||
payStore.dataId = data || "";
|
||||
payStore.channel = channel || "";
|
||||
|
||||
const searchKeyword = ref<string>("");
|
||||
|
||||
payStore.getChargeprod();
|
||||
|
||||
payStore.initParams({
|
||||
openId,
|
||||
data,
|
||||
channel
|
||||
});
|
||||
|
||||
const prizeList = computed(() => {
|
||||
return payStore.prizeList;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// init();
|
||||
const selectItemIndex = computed(() => {
|
||||
return payStore.selectItemIndex;
|
||||
});
|
||||
|
||||
const selectItem = computed(() => {
|
||||
return payStore.selectItem;
|
||||
});
|
||||
|
||||
const selectHandler = (index: number) => {
|
||||
payStore.setSelectIndex(index);
|
||||
};
|
||||
|
||||
|
||||
const regUser = /^\d{7}$/;
|
||||
const regPhone = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
|
||||
|
||||
const searchHandler = () => {
|
||||
const keyword = searchKeyword.value;
|
||||
// console.log(keyword, regUser.test(keyword), regPhone.test(keyword));
|
||||
if (regUser.test(keyword) || regPhone.test(keyword)) {
|
||||
payStore.getChargeUser(keyword);
|
||||
}
|
||||
};
|
||||
|
||||
const logo = new URL(
|
||||
"@/assets/images/logo.png",
|
||||
import.meta.url
|
||||
).href;
|
||||
|
||||
const userInfo = computed(() => {
|
||||
return payStore.receiveUserInfo;
|
||||
});
|
||||
|
||||
const showUserInfo = computed(() => {
|
||||
if (userInfo.value && userInfo.value.uid) return true;
|
||||
return false;
|
||||
});
|
||||
|
||||
const userInfoImage = computed(() => {
|
||||
if (userInfo.value && userInfo.value.avatar) return userInfo.value.avatar;
|
||||
return logo;
|
||||
});
|
||||
|
||||
const userInfoNick = computed(() => {
|
||||
if (userInfo.value && userInfo.value.nick) return userInfo.value.nick;
|
||||
return "";
|
||||
});
|
||||
|
||||
const userInfoErbanNo = computed(() => {
|
||||
if (userInfo.value && userInfo.value.erbanNo) return userInfo.value.erbanNo;
|
||||
return "";
|
||||
});
|
||||
|
||||
const showDialog = ref(false);
|
||||
|
||||
const payHandler = () => {
|
||||
const isPhone = regPhone.test(searchKeyword.value);
|
||||
const isUserId = regUser.test(searchKeyword.value);
|
||||
if(!isPhone && !isUserId) {
|
||||
showToast("请输入正确的手机号或者用户ID");
|
||||
return;
|
||||
}
|
||||
if (!showUserInfo.value) {
|
||||
showToast("请搜索并确定需要充值的用户");
|
||||
return;
|
||||
}
|
||||
showDialog.value = true;
|
||||
};
|
||||
|
||||
const confirmHandler = () => {
|
||||
const data:any = {};
|
||||
const isPhone = regPhone.test(searchKeyword.value);
|
||||
const isUserId = regUser.test(searchKeyword.value);
|
||||
if(isPhone) data.phone = searchKeyword.value;
|
||||
if(isUserId) data.erban_no = searchKeyword.value;
|
||||
payStore.payRequest(data);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wechat-home">
|
||||
<div class="wechat-home-search">
|
||||
<div class="wechat-home-search wechat-middle">
|
||||
<van-search
|
||||
v-model="searchKeyword"
|
||||
class="wechat-home-search-input"
|
||||
placeholder="请输入手机号或者用户ID"
|
||||
shape="round"
|
||||
@input.stop="searchHandler"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="showUserInfo" class="wechat-home-user wechat-middle">
|
||||
<div class="wechat-home-user-image"><img :src="userInfoImage"></div>
|
||||
<div class="wechat-home-user-info">
|
||||
<p class="wechat-home-user-info-line1">昵称：{{ userInfoNick }}</p>
|
||||
<p class="wechat-home-user-info-line2">用户ID：{{ userInfoErbanNo }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wechat-home-prize">
|
||||
<h3>选择充值金额</h3>
|
||||
<h3 class="wechat-middle">选择充值金额</h3>
|
||||
<div class="wechat-home-prize-list">
|
||||
<div
|
||||
v-for="item in prizeList"
|
||||
v-for="(item, index) in prizeList"
|
||||
:key="`prize-${item.channel}`"
|
||||
class="prize-item"
|
||||
:class="index === selectItemIndex ? 'prize-item-active' : ''"
|
||||
@click="selectHandler(index)"
|
||||
>
|
||||
<p class="prize-item-line1">
|
||||
<i></i>
|
||||
@@ -52,16 +141,16 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wechat-home-text1">
|
||||
<div class="wechat-home-text1 wechat-middle">
|
||||
<p>本平台禁止使用不合法信用卡和储蓄卡充值，一经发现封禁账号及设备，情节严重将报警处理!</p>
|
||||
</div>
|
||||
<div class="wechat-home-text2">
|
||||
<div class="wechat-home-text2 wechat-middle">
|
||||
<p>
|
||||
本平台严厉打击刷单类诈骗行为，一旦发现我平台将追究其法律责任，同时保留追究损失的权利;我们呼吁用户如有收到以兼职赚钱为名义诱骗刷单的行为，请联系客服举报!情节严重者我们将交于警方处理，如执意配合刷单行为造成的损失我们平台概不负责!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="wechat-home-btn">
|
||||
<div class="wechat-home-btn wechat-middle">
|
||||
<van-button
|
||||
class="wechat-home-btn-sumb"
|
||||
type="default"
|
||||
@@ -69,17 +158,42 @@ onMounted(() => {
|
||||
block
|
||||
size="large"
|
||||
color="rgba(255, 240, 51, 1)"
|
||||
@click="payHandler"
|
||||
>立即充值</van-button>
|
||||
</div>
|
||||
|
||||
<van-dialog
|
||||
v-model:show="showDialog"
|
||||
title="充值提示"
|
||||
show-cancel-button
|
||||
theme="round-button"
|
||||
confirm-button-color="#FFF033"
|
||||
cancel-button-color="#F5F6FA"
|
||||
class-name="wechat-dialog"
|
||||
@confirm="confirmHandler"
|
||||
>
|
||||
<div class="wechat-dialog-content">
|
||||
<div class="wechat-dialog-image">
|
||||
<img :src="userInfoImage">
|
||||
</div>
|
||||
<div class="wechat-dialog-info">
|
||||
向<span>{{ userInfoNick }}</span>（用户ID;{{ userInfoErbanNo }}）充值{{ selectItem ? selectItem.money : "" }}元？
|
||||
</div>
|
||||
</div>
|
||||
</van-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wechat-middle {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.wechat-home {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
padding: 0 15px;
|
||||
// padding: 0 15px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-search {
|
||||
@@ -94,8 +208,46 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
&-user {
|
||||
display: flex;
|
||||
height: 78px;
|
||||
background: #FAFAFA;
|
||||
border-radius: 10px;
|
||||
margin-top: 16px;
|
||||
padding: 0 16px;
|
||||
align-items: center;
|
||||
|
||||
&-image {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
&>img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
padding-left: 16px;
|
||||
|
||||
&-line1 {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&-line2 {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-prize {
|
||||
margin-top: 20px;
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
|
||||
&>h3 {
|
||||
font-size: 18px;
|
||||
@@ -107,8 +259,9 @@ onMounted(() => {
|
||||
|
||||
&-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -129,8 +282,10 @@ onMounted(() => {
|
||||
color: #EC424D;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&-btn {
|
||||
margin-top: 20px;
|
||||
|
||||
&-sumb {
|
||||
color: #222222 !important;
|
||||
}
|
||||
@@ -146,7 +301,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
// margin: 10px;
|
||||
margin: 5px;
|
||||
|
||||
&-line1 {
|
||||
display: flex;
|
||||
@@ -196,4 +351,49 @@ onMounted(() => {
|
||||
color: #FFAC39;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.wechat-dialog) {
|
||||
&-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
&-image {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
&>img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
line-height: 20px;
|
||||
padding-left: 10px;
|
||||
max-width: 200px;
|
||||
|
||||
&>span {
|
||||
color: #FFAC39;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.van-dialog__confirm {
|
||||
color: #222 !important;
|
||||
}
|
||||
|
||||
.van-dialog__cancel {
|
||||
color: #626166 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user