You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
534 lines
12 KiB
534 lines
12 KiB
<template>
|
|
<view class="invite">
|
|
<view class="invite-notice">
|
|
<u-notice-bar mode="horizontal" :list="list" color="#fff" bg-color="rgba(255,255,255,0.22)"></u-notice-bar>
|
|
</view>
|
|
<view class="invite-hd">
|
|
<view class="btn" @click="openPage(1)">邀请记录</view>
|
|
<view class="rule" @click="openPage(4)">邀请规则</view>
|
|
</view>
|
|
<view class="invite-bd">
|
|
<view class="a">
|
|
<view class="title">邀请商家越多 赚越多</view>
|
|
<view class="desc">服务商权益</view>
|
|
<view class="content">
|
|
<view class="item">
|
|
<image src="https://www.amiami.com.cn/static/news1/1@2x.png"></image>
|
|
<view class="text">商家流水奖励</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.amiami.com.cn/static/news1/2@2x.png"></image>
|
|
<view class="text">服务商礼包</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.amiami.com.cn/static/news1/3@2x.png"></image>
|
|
<view class="text">权益更多</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="a">
|
|
<view class="title"><image src="https://www.amiami.com.cn/static/news1/zuo@2x.png"></image>怎么邀请好友<image src="https://www.amiami.com.cn/static/news1/you@2x.png"></image></view>
|
|
<view class="content" style="margin-top: 30rpx;">
|
|
<view class="item">
|
|
<image src="https://www.amiami.com.cn/static/news1/4@2x.png"></image>
|
|
<view class="text">点击立即邀请</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.amiami.com.cn/static/news1/5@2x.png"></image>
|
|
<view class="text">生成邀请海报</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.amiami.com.cn/static/news1/6@2x.png"></image>
|
|
<view class="text">转发邀请商家</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="a">
|
|
<view class="title"><image src="https://www.amiami.com.cn/static/news1/zuo@2x.png"></image>邀请小技巧<image src="https://www.amiami.com.cn/static/news1/you@2x.png"></image></view>
|
|
<view class="desc1">邀请成功率提高200%</view>
|
|
<view class="content">
|
|
<view class="li">邀请您的同行，跨行商家，成功率高</view>
|
|
<view class="li">授权通讯录找到您的同城商家，成功率提高200%</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="tixian" @click="openPage(2)"><image src="https://www.amiami.com.cn/static/news1/提现记录@2x.png"></image>立即提现</view> -->
|
|
</view>
|
|
<view class="invite-popup" v-if="isPopup">
|
|
<view class="popup">
|
|
<image class="bg" show-menu-by-longpress :src="qrcode"></image>
|
|
<view class="tips">
|
|
<view class="cancle" @click="download(1)">取消</view>
|
|
<view class="sure" @click="download(2)">保存到相册</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="invite-fd">
|
|
<view class="btn" @click="openPage(3)">立即邀请</view></view>
|
|
<addShuiyin />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
createQrCodeImg
|
|
} from '@/utils/qrcode'
|
|
import * as newFunApi from '@/api/newFun'
|
|
import * as Api from '@/api/help'
|
|
export default {
|
|
data() {
|
|
return {
|
|
qrcode: "",
|
|
userInfo: {},
|
|
backgroundBg: {
|
|
"background": "rgba(255,255,255,0.22)"
|
|
},
|
|
backgroundBg1: {
|
|
"background-color": "transparent"
|
|
},
|
|
isPopup: false,
|
|
info: {},
|
|
info1: {},
|
|
list: []
|
|
}
|
|
},
|
|
onReady() {
|
|
// this.getList();
|
|
this.getCarousel()
|
|
// this.getList1();
|
|
},
|
|
onShow() {
|
|
if (uni.getStorageSync("AccessToken")) {
|
|
this.userInfo = uni.getStorageSync("userInfo");
|
|
} else {
|
|
this.userInfo = {}
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取预售规则
|
|
getCarousel() {
|
|
const app = this;
|
|
app.list = []
|
|
Api.getAgreement({
|
|
type: 'invite_notice'
|
|
})
|
|
.then(result => {
|
|
if (result.data.detail.content) {
|
|
app.list.push(this.formatRichText(result.data.detail.content))
|
|
}
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
formatRichText(value) {
|
|
value = value.replace(/\s*/g, ""); //去掉空格
|
|
value = value.replace(/<[^>]+>/g, ""); //去掉所有的html标记
|
|
value = value.replace(/↵/g, ""); //去掉所有的↵符号
|
|
value = value.replace(/[\r\n]/g, "") //去掉回车换行
|
|
value = value.replace(/ /g, "") //去掉空格
|
|
value = this.convertIdeogramToNormalCharacter(value);
|
|
return value
|
|
},
|
|
convertIdeogramToNormalCharacter(val) {
|
|
const arrEntities = {
|
|
'lt': '<',
|
|
'gt': '>',
|
|
'nbsp': ' ',
|
|
'amp': '&',
|
|
'quot': '"'
|
|
};
|
|
return val.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
|
|
return arrEntities[t];
|
|
});
|
|
},
|
|
//生成海报
|
|
async InviteUserPoster() {
|
|
const {
|
|
status,
|
|
data
|
|
} = await newFunApi.InviteUserPoster({type:2});
|
|
if (status == 200) {
|
|
console.log(data)
|
|
this.isPopup = true;
|
|
this.qrcode = data.imageUrl
|
|
}
|
|
},
|
|
download(type) {
|
|
const app = this
|
|
app.isPopup = false;
|
|
if(type == 1){
|
|
return ;
|
|
}
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
})
|
|
// 下载海报图片
|
|
uni.downloadFile({
|
|
url: app.qrcode,
|
|
success(res) {
|
|
console.log(res)
|
|
uni.hideLoading()
|
|
// 图片保存到相册
|
|
app.onSaveImage(res.tempFilePath)
|
|
},
|
|
fail(res) {
|
|
console.log('fail', res)
|
|
uni.hideLoading()
|
|
app.$toast('很抱歉，自动保存失败 请点击图片后长按手动保存', 3000)
|
|
}
|
|
})
|
|
},
|
|
// 图片保存到相册
|
|
onSaveImage(tempFilePath) {
|
|
const app = this
|
|
// #ifndef H5
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: tempFilePath,
|
|
success(data) {
|
|
app.$success('保存成功')
|
|
},
|
|
fail(err) {
|
|
if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
|
|
app.$toast('请允许访问相册后重试 (右上角菜单 - 设置 - 相册)', 3000)
|
|
}
|
|
}
|
|
})
|
|
// #endif
|
|
// #ifdef H5
|
|
const names = tempFilePath.split('/')
|
|
const fileName = names[names.length - 1]
|
|
app.fileDownLoadForH5({
|
|
name: fileName,
|
|
blob: tempFilePath
|
|
})
|
|
// #endif
|
|
},
|
|
|
|
// 兼容H5端下载图片
|
|
// #ifdef H5
|
|
fileDownLoadForH5({
|
|
name,
|
|
blob
|
|
}) {
|
|
const linkElement = document.createElement('a')
|
|
linkElement.setAttribute('href', blob)
|
|
linkElement.setAttribute('downLoad', name)
|
|
linkElement.click()
|
|
},
|
|
// #endif
|
|
|
|
async getList1() {
|
|
const {
|
|
status,
|
|
data
|
|
} = await newFunApi.inviteStatistics({});
|
|
if (status == 200) {
|
|
this.info1 = data;
|
|
}
|
|
},
|
|
async getList() {
|
|
uni.showLoading({
|
|
title: "加载中"
|
|
})
|
|
const {
|
|
status,
|
|
data
|
|
} = await newFunApi.inviteInit({});
|
|
if (status == 200) {
|
|
uni.hideLoading();
|
|
this.info = data;
|
|
console.log(this.info)
|
|
}
|
|
},
|
|
openPage(index) {
|
|
if (!uni.getStorageSync("AccessToken")) {
|
|
uni.navigateTo({
|
|
url: "/pages/login/index"
|
|
})
|
|
return;
|
|
}
|
|
if (index == 1) {
|
|
uni.navigateTo({
|
|
url: "/pages/invite/list"
|
|
})
|
|
} else if (index == 2) {
|
|
uni.navigateTo({
|
|
url: "/pages/news/user/withdrawal?balance=" + this.userInfo.withdrawal_money
|
|
})
|
|
} else if (index == 3) {
|
|
this.InviteUserPoster();
|
|
} else if (index == 4) {
|
|
uni.navigateTo({
|
|
url: "/pages/invite/rule"
|
|
})
|
|
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.invite {
|
|
background: #f7e5cb url(https://www.amiami.com.cn/static/news1/bg@2x.png) center -30rpx no-repeat;
|
|
background-size: 100% auto;
|
|
min-height: 100vh;
|
|
padding-bottom: 150rpx;
|
|
&-fd{
|
|
width: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
background-color: #f7e5cb;
|
|
padding: 20rpx 30rpx 40rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: center;
|
|
.btn{
|
|
width: 642rpx;
|
|
line-height: 90rpx;
|
|
background: #F34A40;
|
|
border-radius: 90rpx;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
&-popup {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 55;
|
|
|
|
.popup {
|
|
width: 672rpx;
|
|
height: 912rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -336rpx;
|
|
top: 50%;
|
|
margin-top: -556rpx;
|
|
z-index: 2;
|
|
|
|
.bg {
|
|
width: 672rpx;
|
|
height: 100%;
|
|
border-radius: 26rpx;
|
|
}
|
|
|
|
.qrcode {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
position: absolute;
|
|
right: 25rpx;
|
|
top: 670rpx;
|
|
border: 8rpx solid #FFFFFF;
|
|
z-index: 2;
|
|
border-radius: 5rpx;
|
|
}
|
|
|
|
.tips {
|
|
width: 672rpx;
|
|
height: 80rpx;
|
|
position: absolute;
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
line-height: 80rpx;
|
|
color: #212121;
|
|
left: 50%;
|
|
margin-left: -336rpx;
|
|
bottom: -120rpx;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.cancle{
|
|
flex: 1;
|
|
background-color: #FFFFFF;
|
|
margin-right: 30rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.sure{
|
|
border-radius: 10rpx;
|
|
flex: 1;
|
|
color: #FFFFFF;
|
|
background-color: #FF4A49;
|
|
}
|
|
}
|
|
|
|
.close {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -150rpx;
|
|
color: #FFFFFF;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
}
|
|
&-hd {
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 435rpx;
|
|
position: relative;
|
|
.rule {
|
|
width: 50rpx;
|
|
height: 170rpx;
|
|
border-radius: 20rpx 0px 0px 20rpx;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
right: 0;
|
|
top: 80rpx;
|
|
z-index: 2;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn {
|
|
width: 50rpx;
|
|
height: 170rpx;
|
|
border-radius: 20rpx 0px 0px 20rpx;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
right: 0;
|
|
top: 280rpx;
|
|
z-index: 2;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&-bd {
|
|
padding: 0 24rpx 24rpx;
|
|
overflow: hidden;
|
|
.a {
|
|
width: 100%;
|
|
min-height: 290rpx;
|
|
background: #FAF4ED;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
padding-bottom: 50rpx;
|
|
overflow: hidden;
|
|
.title{
|
|
line-height: 100rpx;
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #9A372D;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
image{
|
|
width: 52rpx;
|
|
height: 24rpx;
|
|
margin: 0 20rpx;
|
|
}
|
|
}
|
|
.desc1{
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #9A372D;
|
|
position: relative;
|
|
}
|
|
.desc{
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #9A372D;
|
|
position: relative;
|
|
&::after{
|
|
content: "";
|
|
width: 100rpx;
|
|
height: 1px;
|
|
background-color: #9A372D;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 150rpx;
|
|
z-index: 2;
|
|
}
|
|
&::before{
|
|
content: "";
|
|
width: 100rpx;
|
|
height: 1px;
|
|
background-color: #9A372D;
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 150rpx;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
.content{
|
|
width: 100%;
|
|
margin-top: 45rpx;
|
|
overflow: hidden;
|
|
.item{
|
|
width: 33.3%;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #9A372D;
|
|
float: left;
|
|
image{
|
|
width: 122rpx;
|
|
height: 122rpx;
|
|
display: block;
|
|
margin: 0 auto 20rpx;
|
|
}
|
|
}
|
|
.li{
|
|
padding: 0 50rpx 0 80rpx;
|
|
position: relative;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #9A372D;
|
|
line-height: 45rpx;
|
|
&::after{
|
|
content: "";
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
background: #9A372D;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50rpx;
|
|
top: 50%;
|
|
margin-top: -5rpx;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.tixian{
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 4rpx 12rpx 0px rgba(77,13,17,0.16);
|
|
border-radius: 50%;
|
|
image{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
display: block;
|
|
margin: 15rpx auto;
|
|
}
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
color: #9A372D;
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 30%;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|