frontend_h5/treegitee/pages/mt/login.vue

234 lines
6.6 KiB
Vue
Raw Normal View History

2024-06-17 15:25:46 +08:00
<template>
<view class="plr30" v-if="istrue">
<view class="t1 flex_between flex_items mt30 pos">
<view class="flex_start flex_items">
<image :src="imgUrl+'tx.png'" style="width:128rpx;height: 128rpx;"></image>
<view class="flex_column ml30 mt10">
<text class="f32 bold" style="color: #333">{{phone}}</text>
<view class="mt20 f18 f-center plr20"
style="color: #F5373A;height: 42rpx;line-height: 42rpx; background: #FFFFFF;border-radius: 21rpx;border: 1rpx solid #F5373A;">
<text>积分:{{integral}}</text>
</view>
</view>
</view>
<view @click="goprize" class="flex_column flex_items pos" style="z-index: 1;">
<image :src="imgUrl+'qd.png'" style="width: 42rpx;height: 58rpx;" mode=""></image>
<view class="f-center f16"
style="color: #fff; width: 94rpx;height: 30rpx;background: linear-gradient(180deg, #FCAA64 0%, #FD7A39 100%);border-radius: 15rpx;">
我的奖品
</view>
</view>
<image class="abs" :src="imgUrl+'gb.png'"
style="width: 587rpx;height: 587rpx;z-index: 0;right: -166rpx;top:-122rpx;" mode=""></image>
</view>
<!-- t22 -->
<view class="t22 mt50 pos plr30 ptb20 flex_column" style="z-index: 1;">
<text class="f32 bold" style="color: #fff;">我的活动</text>
<view class="mt20 flex_start flex_items" style="overflow-x: auto;width: 100%;">
<view v-for="(item,index) in hotlist" :key="index" class="p20 mr20 f-center"
style="background: #FFFFFF;border-radius: 16rpx;" @click="getp(item.id,item.active_type)">
<image :src="item.banner" style="width: 116rpx;height: 112rpx;" mode="aspectFit"></image>
<view class="f24 one" style="color: #F53A3A;">{{item.active_name}}</view>
</view>
</view>
</view>
<!-- t -->
<view class="flex_column plr20 mt40"
style="background: #FFFFFF;box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.06);border-radius: 20rpx;">
<view class="mt40 f32 bold" style="color: #003A6E;">购买记录</view>
<view v-if="list.length!=0" class="pos" style="z-index: 1;">
<view v-for="(item,index) in list" :key="index" class="flex_between flex_items mt30 pb30 bbe9s mt30">
<view class="flex_start">
<image :src="imgUrl+'tu.png'" style="width: 108rpx;height: 108rpx;border: 12rpx;" mode="">
</image>
<view class="flex_column ml30" style="height:108rpx;">
<view class="f28 three" style="color: #1a1a1a;width:360rpx;">{{item.product_name}}</view>
<view class="flex_start flex_items">
<view class="mt20 flex_start f22 ml10" style="width:320rpx;">
<text>{{item.create_time}}</text>
<text style="color: #FE714D;">-{{item.integral}}积分</text>
</view>
<view class="flex_center flex_items mt10"
style="width: 134rpx;height:54rpx;background:linear-gradient(270deg, #F43139 0%, #FF9843 100%);;border-radius: 316rpx;margin-left:40rpx;"
@click="goorder(item.product_id)">
<text class="f24" style="color: #FFF;">查看详情</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-else class="flex_center flex_items f24" style="color: #888;height:600rpx;width: 100%;">
<text>--暂无数据--</text>
</view>
</view>
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
</view>
</template>
<script>
export default {
data() {
return {
istrue: false,
integral: "",
form: {
page: 1,
pageSize: 10
},
phone: "",
list: [],
hotlist: [],
imgUrl: ""
}
},
onLoad() {
this.imgUrl = this.api.imgUrl
this.getData()
},
methods: {
getData() {
uni.showLoading({
title: "加载中..."
})
this.api.myself(this.form).then((res) => {
console.log(res)
if (res.data.code == 200) {
//数据请求完成之后停止下拉刷新
uni.stopPullDownRefresh();
// if (res.data.data.integral > 9999) {
// this.integral = (Number(res.data.data.integral) / 10000) + "万"
// } else {
// this.integral = res.data.data.integral
// }
this.integral = res.data.data.integral
this.phone = res.data.data.phone
if (this.phone != null) {
this.phone = this.phone.substr(0, 3) + '****' + this.phone.substr(7)
}
if (res.data.data.list.data.length == 0) {
uni.showToast({
title: "暂无数据",
icon: "none"
})
this.istrue = true
return false
}
for (let i = 0; i < res.data.data.list.data.length; i++) {
this.list.push(res.data.data.list.data[i])
}
this.getactive()
} else {
uni.hideLoading()
uni.showToast({
icon: "none",
title: res.data.message
})
}
})
},
getactive() {
this.api.getactivit({
page: 1,
pageSize: 1000
}).then((res) => {
console.log(res)
if (res.data.code == 200) {
//数据请求完成之后停止下拉刷新
uni.stopPullDownRefresh();
uni.hideLoading()
this.hotlist = res.data.data.data
} else {
uni.hideLoading()
uni.showToast({
icon: "none",
title: res.data.message
})
}
this.istrue = true
})
},
getp(id, types) {
if (types == 2) {
uni.navigateTo({
url: "/pages/turntable/index?id=" + id
})
} else if (types == 3) {
uni.navigateTo({
url: "/pages/scap/scratch?id=" + id
})
} else if (types == 5) {
uni.navigateTo({
url: "/pages/around/index?id=" + id
})
} else if (types == 6) {
uni.navigateTo({
url: "/pages/answer/index?id=" + id
})
} else {}
},
goorder(id) {
uni.switchTab({
url: "/pages/order/index"
// url: "/pages/product/detail?id="+id
})
},
goprize() {
uni.navigateTo({
url: "/pages/my/prizes"
})
}
},
onReachBottom() {
uni.showLoading({
title: "加载中..."
})
this.form.page += 1
this.getData()
},
onPullDownRefresh() {
this.form.page = 1
this.list = []
this.getData()
}
}
</script>
<style>
.three {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
page {
background: linear-gradient(180deg, #FFE4E4 0%, rgba(216, 216, 216, 0) 100%) !important;
}
.t22 {
background-image: url('https://mtweb.86698.cn/static/images/t2bb.png');
background-size: 100% 100%;
width: calc(100% - 60rpx);
height: 276rpx;
}
.one {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
width: 115rpx;
}
/*隐藏滚动条*/
::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
</style>