338 lines
7.1 KiB
Vue
338 lines
7.1 KiB
Vue
<template>
|
|
<view class="invite">
|
|
<view class="placeholder"></view>
|
|
|
|
<view class="qrcode">
|
|
<view class="title">
|
|
shop_{{uid}}
|
|
</view>
|
|
<view class="qrcode-img">
|
|
<image :src="qrcodeUrl"></image>
|
|
</view>
|
|
<view class="save" @longpress="handleSavePic">
|
|
<image
|
|
src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_active_mer/new_active_mer_qrcode_save.webp">
|
|
</image>
|
|
<text>长按保存二维码</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="con">
|
|
<image class="record"
|
|
src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_active_mer/new_active_mer_qrcode_record.webp">
|
|
</image>
|
|
|
|
<view class="table" v-if="list.length > 0">
|
|
<view class="table-title">
|
|
<view class="table-title-cell">用户名称</view>
|
|
<view class="table-title-cell">用户ID</view>
|
|
<view class="table-title-cell">采购金额</view>
|
|
<view class="table-title-cell">销售金额</view>
|
|
</view>
|
|
|
|
<scroll-view scroll-y id="scrollView" @scrolltolower="scrolltolower">
|
|
<view class="scrollView-wrap">
|
|
<block v-for="(item,index) in list" :key="index">
|
|
<view class="table-con">
|
|
<view class="table-con-cell">{{item.real_name}}</view>
|
|
<view class="table-con-cell">{{item.uid}}</view>
|
|
<view class="table-con-cell red">￥{{item.buy_amount}}</view>
|
|
<view class="table-con-cell green">￥{{item.sale_amount}}</view>
|
|
</view>
|
|
</block>
|
|
<view class='loadings' @click="getList">
|
|
<text class="iconfont icon-jiazai" v-if="!loadend"></text>{{loadTitle}}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view v-if="list.length == 0">
|
|
<emptyPage title="暂无邀请好友记录哦～" mt="60rpx"></emptyPage>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import emptyPage from '@/components/emptyPage.vue';
|
|
import {
|
|
qrcode,
|
|
merchantRecord
|
|
} from "@/api/activity.js";
|
|
import {
|
|
Toast
|
|
} from '../../../libs/uniApi';
|
|
|
|
export default {
|
|
components: {
|
|
emptyPage
|
|
},
|
|
data() {
|
|
return {
|
|
qrcodeUrl: "",
|
|
list: [],
|
|
page: 1,
|
|
limit: 10,
|
|
loadend: false,
|
|
loading: false,
|
|
loadTitle: '加载更多',
|
|
isAuto: false, //没有授权的不会自动授权
|
|
isShowAuth: false, //是否隐藏授权
|
|
uid: ''
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getQrcode();
|
|
this.getList();
|
|
this.getUserInfo();
|
|
},
|
|
|
|
methods: {
|
|
scrolltolower(e) {
|
|
this.getList();
|
|
},
|
|
|
|
// 获取二维码
|
|
getQrcode() {
|
|
qrcode().then(res => {
|
|
this.qrcodeUrl = res.data.url;
|
|
}).catch(err => {
|
|
uni.showModal({
|
|
content: '暂未开通邀请码，需开通邀请码请联系管理员',
|
|
showCancel: false,
|
|
success: (res) => {
|
|
uni.navigateBack();
|
|
}
|
|
})
|
|
})
|
|
},
|
|
|
|
// 获取好友列表
|
|
getList() {
|
|
let that = this;
|
|
if (that.loading) return;
|
|
if (that.loadend) return;
|
|
that.loading = true;
|
|
merchantRecord({
|
|
page: that.page,
|
|
limit: that.limit
|
|
}).then(res => {
|
|
let list = res.data.list,
|
|
loadend = list.length < that.limit;
|
|
that.list = that.list.concat(list);
|
|
that.page = that.page + 1;
|
|
that.loading = false;
|
|
that.loadend = loadend;
|
|
that.loadTitle = loadend ? '我也是有底线的~' : "加载更多";
|
|
}, function(res) {
|
|
this.loading = false;
|
|
that.loadTitle = '加载更多';
|
|
})
|
|
},
|
|
|
|
getUserInfo() {
|
|
let userInfo = this.$Cache.get("USER_INFO");
|
|
if (userInfo) {
|
|
userInfo = JSON.parse(userInfo);
|
|
this.uid = userInfo.uid;
|
|
}
|
|
},
|
|
|
|
handleSavePic() {
|
|
// 获取要保存的图片路径或URL
|
|
let imageUrl = this.qrcodeUrl; // 这里使用了网络上的图片作为示例
|
|
|
|
// #ifdef H5
|
|
var a = document.createElement("a");
|
|
a.download = imageUrl;
|
|
a.href = imageUrl;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
// #endif
|
|
|
|
// #ifndef H5
|
|
let that = this;
|
|
uni.downloadFile({
|
|
url: imageUrl,
|
|
success(res) {
|
|
if (res.statusCode === 200) {
|
|
let tempFilePath = res.tempFilePath; // 临时文件路径
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: tempFilePath,
|
|
success() {
|
|
return that.$util.Tips({
|
|
title: '图片已保存至相册!'
|
|
});
|
|
},
|
|
fail(err) {
|
|
console.error('保存失败', err);
|
|
}
|
|
});
|
|
} else {
|
|
console.error('下载失败', res.statusCode);
|
|
}
|
|
},
|
|
fail(err) {
|
|
console.error('下载失败', err);
|
|
}
|
|
});
|
|
// #endif
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #FFF3EF;
|
|
}
|
|
|
|
.invite {
|
|
.placeholder {
|
|
height: 544rpx;
|
|
}
|
|
|
|
.qrcode {
|
|
position: fixed;
|
|
top: 30rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 690rpx;
|
|
height: 666rpx;
|
|
background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_active_mer/new_active_mer_qrcode_bg.webp);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
padding-top: 54rpx;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #7A7A7A;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.qrcode-img {
|
|
margin-bottom: 96rpx;
|
|
|
|
image {
|
|
width: 396rpx;
|
|
height: 396rpx;
|
|
}
|
|
}
|
|
|
|
.save {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.con {
|
|
background-color: #FFF3EF;
|
|
padding: 192rpx 30rpx 0;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 45rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.table {
|
|
#scrollView {
|
|
height: calc(100vh - 544rpx - 350rpx);
|
|
overflow: auto;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
@keyframes rotateAnimation {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.loadings {
|
|
display: block;
|
|
margin-top: 30rpx;
|
|
color: #bdbdbd;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
|
|
.iconfont {
|
|
margin-right: 4rpx;
|
|
display: inline-block;
|
|
animation: rotateAnimation 2s linear infinite;
|
|
}
|
|
}
|
|
|
|
.table-title {
|
|
display: flex;
|
|
margin-bottom: 24rpx;
|
|
|
|
.table-title-cell {
|
|
width: 25%;
|
|
font-size: 26rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #2E2E2E;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.table-con {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 68rpx;
|
|
line-height: 68rpx;
|
|
text-align: center;
|
|
background: #FFFFFF;
|
|
border-radius: 12rpx;
|
|
margin-bottom: 12rpx;
|
|
|
|
.table-con-cell {
|
|
width: 25%;
|
|
height: 68rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #2E2E2E;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.red {
|
|
color: #F13B3B;
|
|
}
|
|
|
|
.green {
|
|
color: #20A162;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |