400 lines
8.6 KiB
Vue
400 lines
8.6 KiB
Vue
<script setup lang="ts" name="Home">
|
||
import { ref, computed } from "vue";
|
||
import { showToast } from "vant";
|
||
import pinia from "../store/pinia";
|
||
import { pay } from "../store";
|
||
import { getQueryString } from "@/lib/util";
|
||
|
||
const payStore = pay(pinia);
|
||
const locateObj = getQueryString();
|
||
// console.log("locateObj", locateObj);
|
||
const { openId, data, channel } = locateObj;
|
||
|
||
const searchKeyword = ref<string>("");
|
||
|
||
payStore.getChargeprod();
|
||
|
||
payStore.initParams({
|
||
openId,
|
||
data,
|
||
channel
|
||
});
|
||
|
||
const prizeList = computed(() => {
|
||
return payStore.prizeList;
|
||
});
|
||
|
||
const selectItemIndex = computed(() => {
|
||
return payStore.selectItemIndex;
|
||
});
|
||
|
||
const selectItem = computed(() => {
|
||
return payStore.selectItem;
|
||
});
|
||
|
||
const selectHandler = (index: number) => {
|
||
payStore.setSelectIndex(index);
|
||
};
|
||
|
||
|
||
const regUser = /^[0-9]*$/;
|
||
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;
|
||
if(!keyword) return;
|
||
// 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);
|
||
if(isPhone) data.phone = searchKeyword.value;
|
||
else data.erban_no = userInfoErbanNo.value;
|
||
payStore.payRequest(data);
|
||
};
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div class="wechat-home">
|
||
<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 class="wechat-middle">选择充值金额</h3>
|
||
<div class="wechat-home-prize-list">
|
||
<div
|
||
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>
|
||
<span>{{ item.prodName }}</span>
|
||
</p>
|
||
<p class="prize-item-line2">¥ {{ item.money }}元</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wechat-home-text1 wechat-middle">
|
||
<p>本平台禁止使用不合法信用卡和储蓄卡充值，一经发现封禁账号及设备，情节严重将报警处理!</p>
|
||
</div>
|
||
<div class="wechat-home-text2 wechat-middle">
|
||
<p>
|
||
本平台严厉打击刷单类诈骗行为，一旦发现我平台将追究其法律责任，同时保留追究损失的权利;我们呼吁用户如有收到以兼职赚钱为名义诱骗刷单的行为，请联系客服举报!情节严重者我们将交于警方处理，如执意配合刷单行为造成的损失我们平台概不负责!
|
||
</p>
|
||
</div>
|
||
|
||
<div class="wechat-home-btn wechat-middle">
|
||
<van-button
|
||
class="wechat-home-btn-sumb"
|
||
type="default"
|
||
round
|
||
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;
|
||
box-sizing: border-box;
|
||
|
||
&-search {
|
||
padding-top: 20px;
|
||
|
||
&-input {
|
||
height: 50px;
|
||
padding: 0;
|
||
--van-search-input-height: 50px;
|
||
// padding-left: 0;
|
||
// padding-right: 0;
|
||
}
|
||
}
|
||
|
||
&-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: 16px;
|
||
width: 100%;
|
||
|
||
&>h3 {
|
||
font-size: 18px;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 400;
|
||
color: #222222;
|
||
line-height: 46px;
|
||
}
|
||
|
||
&-list {
|
||
display: flex;
|
||
// justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
padding-left: 10px;
|
||
}
|
||
}
|
||
|
||
&-text1 {
|
||
margin-top: 35px;
|
||
font-size: 12px;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9E9E9E;
|
||
line-height: 20px;
|
||
}
|
||
|
||
&-text2 {
|
||
margin-top: 10px;
|
||
font-size: 12px;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 400;
|
||
color: #EC424D;
|
||
line-height: 20px;
|
||
}
|
||
|
||
&-btn {
|
||
margin-top: 20px;
|
||
|
||
&-sumb {
|
||
color: #222222 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.prize-item {
|
||
width: 105px;
|
||
height: 80px;
|
||
background: #FFFFFF;
|
||
border-radius: 20px;
|
||
border: 2px solid #DCDCDC;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
margin: 5px;
|
||
|
||
&-line1 {
|
||
display: flex;
|
||
height: 20px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
|
||
&>i {
|
||
width: 16px;
|
||
height: 16px;
|
||
display: inline-block;
|
||
background-image: url(../assets/images/jinbi.png);
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
&>span {
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 400;
|
||
color: #222222;
|
||
line-height: 20px;
|
||
padding-left: 3px;
|
||
}
|
||
}
|
||
|
||
&-line2 {
|
||
color: #666666;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
|
||
.prize-item-active {
|
||
background: #FFF6DC;
|
||
border: 2px solid #FFAC39;
|
||
|
||
.prize-item-line1 {
|
||
&>span {
|
||
color: #FFAC39;
|
||
}
|
||
}
|
||
|
||
.prize-item-line2 {
|
||
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> |