229 lines
4.8 KiB
Vue
229 lines
4.8 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="userblock">
|
||
<u-avatar class="avatar" :src="userinfo.url" size="60"></u-avatar>
|
||
<view class="userinfo">
|
||
<view class="phone"><text>{{userinfo.phone}}</text></view>
|
||
<view class="integral"><text>剩余积分：{{userinfo.integral}}</text></view>
|
||
</view>
|
||
</view>
|
||
<view class="buy-list">
|
||
<view class="label">
|
||
<text>购买记录</text>
|
||
</view>
|
||
<view class="listcontainer">
|
||
<view v-for="(item,index) in buy_list" :key="item.id">
|
||
<couponitem :data="item"></couponitem>
|
||
</view>
|
||
<u-loadmore :status="status" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import couponitem from '@/pages/simpleshop/components/couponitem.vue'
|
||
import api from '@/api/api.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
userinfo: {
|
||
url: require("@/static/images/avatar.png"),
|
||
phone: "",
|
||
integral: 0
|
||
},
|
||
buy_list: [
|
||
// {
|
||
// id: 1,
|
||
// price: 15,
|
||
// title: "15元微信立减金",
|
||
// expiration_time: "2024-5-27 12:00:00",
|
||
// status:1,
|
||
// },
|
||
// {
|
||
// id: 2,
|
||
// price: 15,
|
||
// title: "15元微信立减金",
|
||
// expiration_time: "2024-5-27 12:00:00",
|
||
// status:2,
|
||
// },
|
||
// {
|
||
// id: 3,
|
||
// price: 15,
|
||
// title: "15元微信立减金",
|
||
// expiration_time: "2024-1-27 12:00:00",
|
||
// status:3,
|
||
// },
|
||
],
|
||
status: 'loadmore',
|
||
list: 15,
|
||
page: 1,
|
||
pagesize:8,
|
||
total: 0,
|
||
}
|
||
},
|
||
components: {
|
||
couponitem
|
||
},
|
||
methods: {
|
||
getAccountInfo(){
|
||
api.getAccountInfo().then((res)=>{
|
||
if(res.data.code == 200){
|
||
const userinfo = res.data.data
|
||
this.userinfo.phone = this.maskPhoneNumber(userinfo.phone)
|
||
this.userinfo.integral= userinfo.integral_Count
|
||
if(userinfo.flag == false){
|
||
uni.navigateTo({
|
||
url:"/pages/simpleshop/notinwl/notinwl"
|
||
})
|
||
}
|
||
}else{
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: "none"
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getorderlist(){
|
||
api.getorderlist({
|
||
page:this.page,
|
||
pageSize:this.pagesize
|
||
}).then((res)=>{
|
||
if(res.data.code == 200){
|
||
const orderlist = res.data.data.data
|
||
this.total = res.data.data.total
|
||
this.buy_list = this.buy_list.concat(orderlist)
|
||
}else{
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: "none"
|
||
})
|
||
}
|
||
})
|
||
},
|
||
maskPhoneNumber(phoneNumber) {
|
||
// 判断手机号是否合法
|
||
if (/^1\d{10}$/.test(phoneNumber)) {
|
||
// 将手机号中间四位数字替换为星号
|
||
return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
|
||
} else {
|
||
return 'Invalid phone number';
|
||
}
|
||
}
|
||
},
|
||
onShow(){
|
||
this.buy_list = []
|
||
this.page = 1
|
||
this.total = 0
|
||
this.getAccountInfo()
|
||
this.getorderlist()
|
||
},
|
||
onReachBottom() {
|
||
if (this.page * this.pagesize >= this.total) return;
|
||
this.status = 'loading';
|
||
this.page = ++this.page;
|
||
this.getorderlist()
|
||
if (this.page * this.pagesize >= this.total) this.status = 'nomore';
|
||
else this.status = 'loadmore';
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: start;
|
||
height: calc(100vh - 180rpx);
|
||
background: #FAFAFA;
|
||
padding: 21rpx;
|
||
gap: 22rpx;
|
||
}
|
||
|
||
.userblock {
|
||
min-height: 200rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
/* padding-top: 48rpx; */
|
||
gap: 22rpx;
|
||
/* background-image: url('@/static/images/usercenterblock.png'); */
|
||
background-repeat: no-repeat;
|
||
background-size: 100% auto;
|
||
background-position: bottom;
|
||
border-radius: 28rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.userinfo {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.avatar {
|
||
margin-left: 28rpx;
|
||
}
|
||
|
||
.phone {
|
||
font-family: D-DIN, D-DIN;
|
||
font-weight: 700;
|
||
font-size: 48rpx;
|
||
color: #1A1A1A;
|
||
line-height: 39rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.integral {
|
||
font-weight: normal;
|
||
font-size: 28rpx;
|
||
color: #00A8EA;
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
margin-top: 20rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.label {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #1A1A1A;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
width: 100%;
|
||
margin-top: 56rpx;
|
||
margin-left: 126rpx;
|
||
margin-bottom: 20rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.buy-list {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding-bottom: 64rpx;
|
||
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 3 9rpx 0rpx rgba(0,0,0,0.06);
|
||
border-radius: 28rpx;
|
||
}
|
||
|
||
.listcontainer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
gap: 24rpx;
|
||
padding-bottom: 128rpx;
|
||
}
|
||
</style> |