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.

322 lines
8.3 KiB

4 months ago
<template>
<!-- 关注公众号 -->
<view>
<view :style="[followWrapStyle]">
<view :style="[followStyle]" class="follow acea-row row-between-wrapper">
<view class="picTxt acea-row row-middle">
<view class="pictrue">
<easy-loadimage mode="widthFix" :image-src="dataConfig.imgConfig.url" width="92rpx" height="92rpx" borderRadius="46rpx"></easy-loadimage>
</view>
<view class="name line1">
{{ dataConfig.titleConfig.value }}
</view>
</view>
<view :style="[buttonStyle]" class="notes acea-row row-center-wrapper" @click="followTap">
关注
<!-- #ifdef MP -->
<official-account></official-account>
<!-- #endif -->
</view>
<view class="iconfont icon-ic_close"></view>
</view>
</view>
<view class="followCode" v-if="followCode">
<view class="pictrue">
<view class="title">关注公众号</view>
<view class="tips">活动福利第一时间了解</view>
<view class="code-bg">
<image class="imgs" :src="dataConfig.codeConfig.url" mode=""></image>
</view>
<!-- #ifdef MP || APP-PLUS -->
<view class="btn" @tap="savePic">保存图片</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="btn" v-show="isWeixin" @tap="savePic">长按保存图片</view>
<view class="btn" v-show="!isWeixin" @tap="savePic">保存图片</view>
<!-- #endif -->
<view class="close acea-row row-center-wrapper" @click="closeFollowCode">
<text class="iconfont icon-ic_close"></text>
</view>
</view>
<view class="mask"></view>
</view>
</view>
</template>
<script>
import {follow} from '@/api/api.js';
import {getSubscribe} from '@/api/public';
// #ifdef H5
import Auth from '@/libs/wechat';
// #endif
export default {
name: 'follow',
props: {
dataConfig: {
type: Object,
default: () => {}
},
isSortType: {
type: String | Number,
default: 0
}
},
data() {
return {
followCode: false,
followUrl: '',
bgColor: '',
imgConfig: '',
mbConfig: 0,
themeColor: '',
titleConfig: 0,
subscribe: false,
// #ifdef H5
isWeixin: Auth.isWeixin(),
//#endif
};
},
computed: {
buttonStyle() {
return {
'border-color': this.dataConfig.themeColor.color[0].item,
'color': this.dataConfig.themeColor.color[0].item,
};
},
followStyle() {
let borderRadius = [];
if (this.dataConfig.fillet.type) {
for (let i = 0; i < this.dataConfig.fillet.valList.length; i++) {
borderRadius.push(`${this.dataConfig.fillet.valList[i].val * 2}rpx`);
}
} else {
borderRadius = [`${this.dataConfig.fillet.val * 2}rpx`];
}
return {
'border-radius': borderRadius.join(' '),
'background': `linear-gradient(90deg, ${this.dataConfig.bgColor.color[0].item} 0%, ${this.dataConfig.bgColor.color[1].item} 100%)`,
'color': this.dataConfig.themeColor.color[0].item,
};
},
followWrapStyle() {
return {
'padding': `0 ${this.dataConfig.prConfig.val * 2}rpx`,
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
};
},
},
created() {},
mounted() {
getSubscribe().then(res => {
this.subscribe = res.data.subscribe || false;
}).catch(() => {})
},
methods: {
savePic(){
// #ifdef H5
var a = document.createElement('a'); // 生成一个a元素
a.download = 'wechat'; // 设置图片名称
a.style.display = "none";
a.href = this.dataConfig.codeConfig.url; // 将生成的URL设置为a.href属性
document.body.appendChild(a); // 将a标签追加到文档对象中
a.click(); // 触发a的单击事件
a.remove(); // 一次性的,用完就删除a标签
// #endif
// #ifdef MP
let that = this;
uni.downloadFile({
url: that.dataConfig.codeConfig.url, //图片地址
success: function(response){
uni.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success() {
uni.saveImageToPhotosAlbum({
filePath: response.tempFilePath,
success: function(res) {
that.closeFollowCode();
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
}
});
}
});
} else {
uni.saveImageToPhotosAlbum({
filePath: response.tempFilePath,
success: function(res) {
that.closeFollowCode();
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
}
});
}
}
});
}
})
// #endif
//#ifdef APP-PLUS
let that = this
uni.downloadFile({
url: that.dataConfig.codeConfig.url, //图片地址
success: function(response){
uni.saveImageToPhotosAlbum({
filePath: response.tempFilePath,
success: function(res) {
that.posterImageClose();
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
}
});
}
})
// #endif
},
followTap() {
this.followCode = true;
},
closeFollowCode() {
this.followCode = false
},
}
}
</script>
<style lang="scss">
.follow {
padding: 14rpx 32rpx 14rpx 30rpx;
background: #FFFFFF;
.picTxt {
flex: 1;
.name {
flex: 1;
font-size: 30rpx;
color: #333333;
margin-left: 20rpx;
}
}
.notes {
font-weight: 500;
font-size: 24rpx;
color: var(--view-theme);
width: 112rpx;
height: 56rpx;
border: 1px solid var(--view-theme);
border-radius: 28rpx;
}
.iconfont {
margin-left: 16rpx;
font-size: 32rpx;
color: #333333;
}
}
.followCode {
.pictrue {
width: 548rpx;
height: 758rpx;
border-radius: 48rpx;
background: #FFFFFF;
left: 50%;
top: 50%;
position: fixed;
z-index: 10000;
transform: translate(-50%, -50%);
.title {
padding: 48rpx 0 46rpx;
border-top-left-radius: 48rpx;
border-top-right-radius: 48rpx;
border-bottom-right-radius: 274rpx 40rpx;
border-bottom-left-radius: 274rpx 40rpx;
background: linear-gradient(90deg, #FF7931 0%, var(--view-theme) 100%);
text-align: center;
font-weight: 500;
font-size: 40rpx;
line-height: 56rpx;
color: #FFFFFF;
}
.tips {
margin-top: 48rpx;
text-align: center;
font-size: 28rpx;
line-height: 40rpx;
color: #3D3D3D;
}
.code-bg {
width: 312rpx;
height: 312rpx;
margin: 24rpx auto 0;
}
.imgs {
width: 100%;
height: 100%;
}
.btn {
width: 420rpx;
height: 80rpx;
border-radius: 40rpx;
margin: 40rpx auto 60rpx;
background: linear-gradient(90deg, #FF7931 0%, var(--view-theme) 100%);
text-align: center;
font-weight: 500;
font-size: 28rpx;
line-height: 80rpx;
color: #FFFFFF;
}
.close {
position: absolute;
bottom: -108rpx;
left: 50%;
width: 60rpx;
height: 60rpx;
border: 2rpx solid #CCCCCC;
border-radius: 50%;
transform: translateX(-50%);
.iconfont {
font-size: 40rpx;
color: #CCCCCC;
}
}
}
.mask {
z-index: 9999;
}
}
</style>