scout666/remember-word
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
553953ebaf
remember-word/pages/mine/index.vue

856 lines
21 KiB
Vue
Raw Normal View History

init
2024-04-30 10:52:30 +00:00
<template>
<view v-show="showPage">
<tabBar :currentPage="'pages/mine/index'"></tabBar>
<view class="logo">
<image src="../../static/image/home/fontree.png" mode="" class="img"></image>
</view>
<scroll-view scroll-y :scroll-anchoring="true" :style="'height:' + listHeight + 'px;'">
<view class="user-box">
<u-avatar :src="userInfo.avatar" class="avatar" size="75" fontSize="18" bg-color="#558BF2"></u-avatar>
<view class="info">
<view class="username">{{ userInfo.nickName }}</view>
<view class="blockchain">{{ $t("mine.blockchain") }}：{{ userInfo.account }}</view>
</view>
</view>
<view class="mine-icon">
<view class="message" @click="goMess">
<u-badge v-if="notReadNum > 0" class="point" numberType="overflow" max="99" :value="notReadNum">
</u-badge>
<image src="../../static/image/mine/message-icon.png" mode="" style="width: 60rpx; height: 60rpx">
</image>
<view class="value">{{ $t("mine.message") }}</view>
</view>
<view class="scan" @click="goScan" v-if="canScan">
<image src="../../static/image/mine/scan-icon.png" mode="" style="width: 60rpx; height: 60rpx"></image>
<view class="value">{{ $t("mine.scan") }}</view>
</view>
<view @click="goLang" class="tag">
<image src="../../static/image/mine/language.png" mode="" style="width: 60rpx; height: 60rpx"></image>
<view class="value">{{ $t("mine.language") }}</view>
</view>
<view class="setting" @click="goSets">
<image src="../../static/image/mine/setting-icon.png" mode="" style="width: 60rpx; height: 60rpx">
</image>
<view class="value">{{ $t("mine.setting") }}</view>
</view>
</view>
<view class="his-title-text">
<view>我的历史购买记录</view>
<view class="line"></view>
</view>
<view class="his-box">
<view class="item" v-for="(item, index) in paymentList" :key="index"
@click="goDetail(item.ID, item.artworkUid)">
<image src="../../static/image/mine/icon-logo1.png" v-if="item.artworkLevel == 'D'" mode=""
class="icon"></image>
<image src="../../static/image/mine/icon-logo2.png" v-if="item.artworkLevel == 'C'" mode=""
class="icon"></image>
<image src="../../static/image/mine/icon-logo3.png" v-if="item.artworkLevel == 'B'" mode=""
class="icon"></image>
<image src="../../static/image/mine/icon-logo4.png" v-if="item.artworkLevel == 'A'" mode=""
class="icon"></image>
<image :src="item.coverImg || item.artworkImg" mode="" class="img"> </image>
<view class="contentD content" v-if="item.artworkLevel == 'D'">{{
item.artworkName
}}</view>
<view class="contentC content" v-if="item.artworkLevel == 'C'">{{
item.artworkName
}}</view>
<view class="contentB content" v-if="item.artworkLevel == 'B'">{{
item.artworkName
}}</view>
<view class="contentA content" v-if="item.artworkLevel == 'A'">{{
item.artworkName
}}</view>
</view>
</view>
<u-empty mode="favor" v-if="!paymentList" :text="$t('mine.noData')" marginTop="100"></u-empty>
</scroll-view>
<u-popup :show="showLocale" mode="center" @close="closeLocale" @open="openLocale" bgColor="transparent">
<view class="popupLocale-box">
<view class="title">{{ $t("mine.updateLang") }}</view>
<view class="item" v-for="(item, index) in locales" :key="index"
:style="{ borderBottom: (item.code !== 'en' ? '1px solid #dedede' : 'none') }">
<view class="left">{{ item.text }}</view>
<view class="right">
<text v-if="item.code == applicationLocale">{{
$t("updateLang.done")
}}</text>
<u-tag v-else :text="$t('updateLang.change')" @click="onLocaleChange(item)" class="tag-btn"
shape="circle" bgColor="#699A70" borderColor="#699A70"></u-tag>
</view>
</view>
</view>
<u-button :text="$t('navbar.back')" color="#EDC466" @click="closeLocale" style="
width: 260rpx;
height: 56rpx;
border-radius: 40rpx;
margin-top: 30rpx;
"></u-button>
</u-popup>
<u-popup :show="showSetPass" mode="bottom" @close="closeBack" bgColor="transparent">
<view class="step-top">{{ $t("password.title") }}</view>
<view class="step-box">
<view class="title">{{ $t("password.set") }}</view>
<view class="step-pl">
{{ $t("password.name") }}
<text>{{ userInfo.telNum | disposeTel }}</text>
{{ $t("password.set") }}
</view>
<view class="verfy-box">
<view>
<view class="label">{{ $t("password.input") }}：</view>
<u-code-input v-model="setPwd" dot :maxlength="6" hairline color="#ffffff"
borderColor="transparent"></u-code-input>
</view>
</view>
<view class="verfy-box">
<view>
<view class="label">{{ $t("password.com") }}：</view>
<u-code-input v-model="confirmPwd" dot :maxlength="6" hairline color="#ffffff"
borderColor="transparent"></u-code-input>
</view>
</view>
<u-button :text="$t('password.step')" color="#699A70" @click="step2" style="
width: 484rpx;
height: 56rpx;
border-radius: 40rpx;
margin-top: 150rpx;
"></u-button>
</view>
</u-popup>
<u-popup :show="showVerfyPass" mode="bottom" @close="closeBack" bgColor="transparent">
<view class="step-top">{{ $t("password.title") }}</view>
<view class="step-box">
<view class="title">{{ $t("password.get") }}</view>
<view class="verfy-box">
<view>
<view class="label">{{ $t("password.input") }}：</view>
<u-code-input v-model="userPwd" dot :maxlength="6" hairline color="#ffffff"
borderColor="transparent"></u-code-input>
</view>
</view>
<view class="verfy-box" style="margin-top: 40upx">
<view>
<view class="label">{{ $t("password.com") }}：</view>
<u-code-input v-model="confirmUserPwd" dot :maxlength="6" hairline color="#ffffff"
borderColor="transparent"></u-code-input>
</view>
</view>
<u-button :text="$t('buyVerfy.done')" color="#699A70" @click="stepDone" style="
width: 484rpx;
height: 56rpx;
border-radius: 40rpx;
margin-top: 150rpx;
"></u-button>
</view>
</u-popup>
<u-popup :show="showAuthentication" mode="center" @close="closePass" bgColor="transparent">
<view class="pass-box">
<view class="title">{{ $t("password") }}</view>
<view class="verfy-box">
<view>
<view class="label" style="margin-top:30rpx">{{ $t("password.input") }}：</view>
<u-code-input v-model="userPwd" dot :maxlength="6" hairline color="#ffffff"
borderColor="transparent"></u-code-input>
</view>
</view>
<view class="flex-end">
{{ $t("password.vername") }}
<text>{{ userInfo.telNum | disposeTel }}</text>
{{ $t("password.username") }}
</view>
<u-button :text="$t('comfrim')" color="#699A70" @click="comPass" style="
width: 484rpx;
height: 56rpx;
border-radius: 40rpx;
margin-top:30rpx;
"></u-button>
<u-button :text="$t('payment.back')" color="#EDC466" @click="closePass" style="
width: 484rpx;
height: 56rpx;
border-radius: 40rpx;
margin-top: 30rpx;
"></u-button>
</view>
</u-popup>
<!-- 邀请码弹窗 -->
<u-popup :show="showInvite" mode="center" @close="closeInvite" bgColor="transparent">
<view class="invite-box">
<view style="margin-bottom: 20upx">{{ $t("payInfo.copyCode") }}</view>
<u-input v-model="codeSC" shape="circle" border="none" class="login-input"></u-input>
<u-button :text="$t('comfrim')" color="#558BF2" @click="sendConfirm" style="
width: 484rpx;
height: 56rpx;
border-radius: 40rpx;
margin-top: 20rpx;
"></u-button>
<u-button :text="$t('close')" color="rgb(224,119,115)" @click="closeInvite" style="
width: 484rpx;
height: 56rpx;
border-radius: 40rpx;
margin-top: 20rpx;
"></u-button>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
src: "",
showLocale: false,
applicationLocale: "",
userInfo: {},
showSetPass: false,
showVerfyPass: false,
showAuthentication: false,
setPwd: "",
confirmPwd: "",
userPwd: "",
confirmUserPwd: "",
paymentList: [],
notReadNum: 0,
showPage: false,
isAndroid: false,
canScan: false,
showInvite: false,
codeSC: "",
showPull: false,
listHeight: uni.getSystemInfoSync().windowHeight - 88 - 61,
};
},
computed: {
locales() {
return [
// {
// text: this.$t("locale.auto"),
// code: "auto",
// },
{
text: this.$t("locale.zh-hans"),
code: "zh-Hans",
},
{
text: this.$t("locale.zh-hant"),
code: "zh-Hant",
},
{
text: this.$t("locale.en"),
code: "en",
},
];
},
},
filters: {
disposeTel(phoneNum) {
return Number(phoneNum).toString().slice(0, 3) + '****' + Number(phoneNum).toString().slice(-4);
}
},
methods: {
toJSON() { },
goLang() {
this.showLocale = true;
},
closeLocale() {
this.showLocale = false;
},
closeInvite() {
this.showInvite = false;
this.codeSC = "";
},
openLocale() {
// console.log(uni.getLocale());
let systemInfo = uni.getSystemInfoSync();
this.systemLocale = systemInfo.language;
this.applicationLocale = uni.getLocale();
this.isAndroid = systemInfo.platform.toLowerCase() === "android";
uni.onLocaleChange((e) => {
this.applicationLocale = e.locale;
});
},
onLocaleChange(e) {
// console.log(e)
if (this.isAndroid) {
uni.showModal({
content: this.$t("index.language-change-confirm"),
success: (res) => {
if (res.confirm) {
uni.setLocale(e.code);
}
},
});
} else {
uni.setLocale(e.code);
this.$i18n.locale = e.code;
}
// console.log(this.$refs.tabbarRef);
this.$refs.tabbarRef.tabBarList = [{
pagePath: "pages/index/index",
iconPath: "../../static/image/tabbar/home.png",
selectedIconPath: "../../static/image/tabbar/home_check.png",
text: this.$t("tabbar.home"),
customIcon: false,
},
{
pagePath: "pages/mine/index",
iconPath: "../../static/image/tabbar/mine.png",
selectedIconPath: "../../static/image/tabbar/mine_check.png",
text: this.$t("tabbar.mine"),
customIcon: false,
},
];
},
goDetail(ID, artworkUid) {
uni.navigateTo({
url: "/pages/mine/detail/detail?ID=" + ID + "&artworkUid=" + artworkUid,
});
},
goMess() {
uni.navigateTo({
url: "/pages/mine/notice/notice",
});
},
goSets() {
uni.navigateTo({
url: "/pages/mine/setting/setting",
});
},
// 唤起扫描二维码
goScan() {
this.showInvite = true;
// 判断当前页面是不是H5
// try {
// uni.scanCode({
// success: (res) => {
// if (res.result) {
// console.log(res.result, "res.result");
// uni.navigateTo({
// url: `/pages/mine/confirmOrder/confirmOrder?code=${res.result}`,
// });
// }
// },
// });
// } catch (error) {
// console.log(123123);
// }
},
sendConfirm() {
uni.navigateTo({
url: `/pages/mine/confirmOrder/confirmOrder?code=${this.codeSC}`,
});
this.closeInvite();
},
// 获取未读消息
async getNotReadMsg() {
let res = await this.$api.airdrop.checkPoint();
if (res.status === 0) {
this.notReadNum = res.data.Count;
}
},
// 设置密码
step2() {
if (!this.setPwd || !this.confirmPwd) {
this.$common.msgToast(this.$t("password.inputPass"), null, "error");
return;
}
if (this.setPwd !== this.confirmPwd) {
this.$common.msgToast(this.$t("password.messError"), null, "error");
return;
}
this.setPassword();
},
// 设置密码接口
async setPassword() {
let res = await this.$api.mine.update({
password: this.confirmPwd,
});
if (res.status === 0) {
uni.$u.toast(this.$t("password.setSucc"));
this.showSetPass = false;
this.showVerfyPass = true;
} else {
uni.$u.toast(res.msg || this.$t("password.setError"));
}
},
// 验证密码接口
async verifyPwd(setFlag) {
let res = await this.$api.mine.verifyPwd({
password: this.userPwd,
});
if (res.status === 0) {
uni.$u.toast(this.$t("password.verSucc"));
this.showVerfyPass = false;
this.showAuthentication = false;
// 如果有setFlag 说明是验证操作密码,在localStorage中存储一个标识
if (setFlag) {
uni.setStorageSync("isSetPass", 1);
}
} else {
uni.$u.toast(res.msg || this.$t("password.verError"));
}
},
// 第一次验证操作密码
async stepDone() {
if (!this.userPwd || !this.confirmUserPwd) {
this.$common.msgToast(this.$t("password.inputPass"), null, "error");
return;
}
if (this.userPwd !== this.confirmUserPwd) {
this.$common.msgToast(this.$t("password.messError"), null, "error");
return;
}
await this.verifyPwd();
this.showVerfyPass = false;
},
// 验证操作密码
async comPass() {
let vef = this.$common.vefEmpty(
this.userPwd,
this.$t("password.inputPass")
);
if (!vef) return;
await this.verifyPwd(true);
this.userPwd = "";
//
},
// 返回
closePass() {
this.showAuthentication = false;
uni.switchTab({
url: "/pages/index/index",
});
},
// 返回主页
closeBack() {
this.showSetPass = false;
this.showVerfyPass = false;
uni.switchTab({
url: "/pages/index/index",
});
},
// 获取信息
async getInfo() {
uni.showLoading();
await this.$api.mine
.getInfo()
.then(async (res) => {
if (res.status === 0) {
this.userInfo = res.data;
this.showPage = true;
await this.getPaymentInfo();
await this.getNotReadMsg();
} else if (res.status === 401) {
uni.navigateTo({
url: "/pages/login/login",
});
uni.clearStorageSync();
} else {
this.$common.msgToast(res.msg, null, "error");
}
})
.catch((err) => {
uni.showToast({
title: this.$t("load.failed"),
icon: "none"
});
});
uni.hideLoading();
/* let res = await this.$api.mine.getInfo();
if (res.status === 0) {
this.userInfo = res.data;
} else {
this.$common.msgToast(res.msg , null, "error");
} */
},
// 获取藏品
async getPaymentInfo() {
let res = await this.$api.mine.paymentList();
console.log(1111, res)
if (res.status === 0) {
this.paymentList = res.data.data;
} else {
this.$common.msgToast(res.msg || this.$t("load.failed"), null, "error");
}
},
},
async onShow() {
this.showPage = false;
await this.getInfo();
this.canScan = uni.getStorageSync("mall-user-info")?.canScan;
// 判断是否是第一次设置
if (this.userInfo.isNeedChange === 1) {
this.showSetPass = true;
} else {
this.userPwd = "";
// 如果localStorage中有isSetPass 说明已经设置过操作密码,不需要再次验证
this.showAuthentication = uni.getStorageSync("isSetPass") !== 1;
}
},
};
</script>
<style lang="scss">
page {
background: url("@/static/image/home/mine-bg.png") no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
height: 100vh;
box-sizing: border-box;
// border: 1px solid red;696.1123
}
.login-input {
height: 68upx;
background-color: rgba(255, 255, 255, 0.6);
padding: 0 20rpx;
/deep/ .uni-input-placeholder {
padding: 0 20rpx;
}
/deep/ .uni-input-input {
color: #E4E4E4;
padding: 0 20rpx;
}
}
.logo {
width: 100vw;
height: 122rpx;
background: #FFFFFF;
overflow: hidden;
.img {
width: 188rpx;
height: 56rpx;
margin-top: 36rpx;
margin-left: 48rpx;
}
}
.user-box {
background: #FFFFFF;
border-radius: 20rpx;
height: 210rpx;
margin: 20rpx 28rpx 20rpx 28rpx;
padding: 22rpx 20rpx;
display: flex;
box-sizing: border-box;
align-items: center;
.avatar {
margin-left: 50rpx;
}
.info {
flex: 1;
display: flex;
flex-direction: column;
margin-left: 10rpx;
.username {
width: 75%;
color: #000000;
font-size: 34rpx;
fixbug
2024-05-07 02:53:46 +00:00
// 超出一行显示省略号
init
2024-04-30 10:52:30 +00:00
overflow: hidden;
text-overflow: ellipsis;
fixbug
2024-05-07 02:53:46 +00:00
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
init
2024-04-30 10:52:30 +00:00
}
.blockchain {
color: #699A70;
font-size: 20rpx;
margin-top: 10rpx;
width: 75%;
fixbug
2024-05-07 02:53:46 +00:00
// 超出一行显示省略号
init
2024-04-30 10:52:30 +00:00
overflow: hidden;
text-overflow: ellipsis;
fixbug
2024-05-07 02:53:46 +00:00
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
init
2024-04-30 10:52:30 +00:00
}
}
}
.mine-icon {
background: #FFFFFF;
border-radius: 20rpx;
height: 130rpx;
margin: 0rpx 28rpx 40rpx 28rpx;
padding: 20rpx 20rpx;
display: flex;
box-sizing: border-box;
justify-content: space-around;
align-items: center;
.value {
color: #000000;
font-size: 12px;
}
.tag,
.message,
.scan,
.setting {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.message {
position: relative;
.point {
position: absolute;
z-index: 999;
left: 35rpx;
top: 0rpx;
}
}
// .scan {
// width: 60rpx;
// font-size: 20rpx;
// }
}
.his-title-text {
font-size: 24rpx;
margin: 28rpx;
padding-bottom: 4upx;
color: #959595;
display: flex;
align-items: center;
&>.line {
flex: 1;
height: 0.5rpx;
background: #D0D0D0;
margin-left: 5rpx;
}
}
.his-box {
margin: 0 8rpx;
display: flex;
flex-wrap: wrap;
.item {
width: 332rpx;
height: 418rpx;
// background: #000000;
// border-radius: 8rpx;
overflow: hidden;
position: relative;
margin: 20rpx 10rpx 0 18rpx;
box-sizing: border-box;
.icon {
width: 28rpx;
height: 28rpx;
position: absolute;
top: 16rpx;
right: 18rpx;
z-index: 10;
}
.img {
width: 100%;
height: 324rpx;
}
.content {
height: 96rpx;
width: 100%;
position: absolute;
bottom: 0;
font-size: 32rpx;
text-align: center;
line-height: 96rpx;
background-position: center center;
background-size:cover !important;
}
.contentD {
background: url("../../static/image/mine/item-bg1.png") no-repeat;
}
.contentC {
background: url("../../static/image/mine/item-bg2.png") no-repeat;
}
.contentB {
background: url("../../static/image/mine/item-bg3.png") no-repeat;
}
.contentA {
background: url("../../static/image/mine/item-bg4.png") no-repeat;
}
}
}
.invite-box {
text-align: center;
}
.popupLocale-box {
background: rgba(0, 0, 0, 0.8);
width: 582rpx;
overflow: hidden;
padding: 30rpx 42rpx;
.content3 {
background: url("../../static/image/mine/item-bg3.png") no-repeat;
}
.content4 {
background: url("../../static/image/mine/item-bg4.png") no-repeat;
}
.content {
height: 96rpx;
width: 100%;
background-size: 100% 100%;
position: absolute;
bottom: 0;
font-size: 32rpx;
text-align: center;
line-height: 96rpx;
}
}
.popupLocale-box {
background: rgba(0, 0, 0, 0.8);
width: 582rpx;
overflow: hidden;
padding: 30rpx 42rpx 0 42rpx;
.title {
font-size: 40rpx;
text-align: center;
margin-bottom: 40rpx;
}
.u-button {
width: 260rpx;
height: 56rpx;
border-radius: 40rpx;
}
.item {
display: flex;
justify-content: space-between;
padding: 34rpx 50rpx 38rpx 0;
// border-bottom: 1px solid #dedede;
align-items: center;
.right {
font-size: 20rpx;
.tag-btn {
width: 100rpx;
/deep/ .u-tag {
justify-content: center;
}
/deep/ .u-tag__text--medium {
font-size: 20rpx;
text-align: center;
height: 40rpx;
line-height: 40rpx;
}
}
}
}
}
.u-popup__content {
border-radius: 8rpx;
}
.step-top {
width: 466rpx;
padding: 16rpx 40rpx;
background: #699A70;
margin: auto;
text-align: center;
}
.step-box {
width: 100%;
margin-top: 26rpx;
background: #FFFFFF;
padding-bottom: 80rpx;
.title {
font-size: 40rpx;
text-align: center;
margin: 46rpx 0 34rpx 0;
color: #434343;
}
.step-pl {
text-align: center;
color: #878787;
font-size: 28rpx;
}
}
.verfy-box {
display: flex;
justify-content: center;
.label {
font-size: 24rpx;
text-align: left;
margin-bottom: 20rpx;
margin-top: 90rpx;
color: #878787;
}
/deep/ .u-code-input__item {
background: rgba(228, 228, 228, 0.7);
width: 60rpx !important;
height: 60rpx !important;
}
}
.pass-box {
width: 582rpx;
height: 484rpx;
background: #FFFFFF;
.title {
font-size: 40rpx;
text-align: center;
margin: 46rpx 0 34rpx 0;
color: #434343;
}
.flex-end {
margin-top: 70rpx;
padding: 58rpx;
text-align: right;
font-size: 24rpx;
color: #878787;
}
}</style>
Reference in New Issue Copy Permalink