wanma-benteng
/
new-mshop-view
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复：分销海报中的分享功能被覆盖删除的问题

This commit is contained in:
wuhui_zzw 2023-12-18 09:37:16 +08:00
parent 2ceb3112a7
commit 45ba192d96
1 changed files with 535 additions and 458 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
pages/users/user_spread_code/index.vue
View File

@ -1,8 +1,8 @@
<template>
<view :style="viewColor">
<view class='distribution-posters'>
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration"
@change="bindchange" previous-margin="40px" next-margin="40px">
<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval"
:duration="duration" @change="bindchange" previous-margin="40px" next-margin="40px">
<block v-for="(item,index) in spreadData" :key="index" class="img-list">
<swiper-item class="aaa">
<div class="box" ref="bill" :class="swiperIndex == index ? 'active' : 'quiet'">
@ -19,9 +19,19 @@
</swiper-item>
</block>
</swiper>
<!-- #ifndef H5 -->
<view class="Sharebution">
<!-- #ifdef MP-WEIXIN -->
<view class='left' style="background:#f4c241;" @click='ShareImage(posterImage[swiperIndex])'>转发给好友
</view>
<view class='right b-color' @click='savePosterPath(posterImage[swiperIndex])'>保存海报</view>
<!-- #endif -->
</view>
<!-- #ifndef MP-WEIXIN -->
<view class='keep b-color' @click='savePosterPath(posterImage[swiperIndex])'>保存海报</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<div class="preserve acea-row row-center-wrapper">
<div class="line"></div>
@ -33,39 +43,43 @@
<!-- #ifdef MP -->
<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
<!-- #endif -->
<home></home>
<home style="left: -10px;"></home>
<view class="qrimg">
<zb-code ref="qrcode" :show="codeShow" :cid="cid" :val="val" :size="size" :unit="unit" :background="background"
:foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :onval="onval" :loadMake="loadMake"
@result="qrR" />
<zb-code ref="qrcode" :show="codeShow" :cid="cid" :val="val" :size="size" :unit="unit"
:background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize"
:onval="onval" :loadMake="loadMake" @result="qrR" />
</view>
</view>
</template>
<script>
import zbCode from '@/components/zb-code/zb-code.vue'
import {
import zbCode from '@/components/zb-code/zb-code.vue'
import {
getUserInfo,
spreadBanner,
spreadMsg,
imgToBase
} from '@/api/user.js';
import {
} from '@/api/user.js';
import {
toLogin
} from '@/libs/login.js';
import {
} from '@/libs/login.js';
import {
mapGetters
} from "vuex";
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
import home from '@/components/home';
// #ifdef APP-PLUS
import {HTTP_REQUEST_URL} from '@/config/app.js'
import spread from "../../../libs/spread";
// #endif
export default {
} from "vuex";
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
import home from '@/components/home';
// #ifdef APP-PLUS
import {
HTTP_REQUEST_URL
} from '@/config/app.js'
import spread from "../../../libs/spread";
import {
fail
} from 'assert';
// #endif
export default {
components: {
// #ifdef MP
authorize,
@ -118,7 +132,7 @@
onLoad(options) {
// 关系处理
if(options.spread) spread(options.spread, this.isLogin)
if (options.spread) spread(options.spread, this.isLogin)
},
computed: mapGetters({
'isLogin': 'isLogin',
@ -158,7 +172,7 @@
},
onShow() {
// #ifdef APP-PLUS
console.log(HTTP_REQUEST_URL,'=============')
console.log(HTTP_REQUEST_URL, '=============')
// #endif
this.$nextTick(() => {
let selector = uni.createSelectorQuery().select('.aaa');
@ -213,7 +227,8 @@
let img = await that.imgToBase(res.data.poster[i].pic)
arr2 = [qrCode, img]
// #endif
that.$util.userPosterCanvas(arr2, res.data.nickname, res.data.mark, i, that.wd, that.hg, (tempFilePath) => {
that.$util.userPosterCanvas(arr2, res.data.nickname, res.data.mark, i, that.wd, that.hg, (
tempFilePath) => {
that.$set(that.posterImage, i, tempFilePath);
});
uni.hideLoading();
@ -238,6 +253,22 @@
this.swiperIndex = e.detail.current;
// this.$set(this, 'poster', spreadList[e.detail.current].poster);
},
ShareImage(url) {
let that = this;
console.log(url);
wx.showShareImageMenu({
path: url,
success: (res) => {
console.log(res)
},
fail: function(res) {
console.log(res);
that.$util.Tips({
title: '分享失败'
});
}
});
},
savePosterPath(url) {
let that = this;
// #ifdef MP
@ -327,7 +358,8 @@
link: '/pages/index/index?spread=' + res.data.uid,
imgUrl: this.spreadList[0]
};
this.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"], configAppMessage)
this.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"],
configAppMessage)
});
} else {
toLogin();
@ -355,7 +387,7 @@
},
// #ifdef MP
// 分享给好友
onShareAppMessage () {
onShareAppMessage() {
let pages = getCurrentPages();
let page = pages[pages.length - 1]
let shareData = {
@ -379,25 +411,28 @@
return shareData
},
// #endif
}
}
</script>
<style lang="scss">
page {
page {
background-color: #a3a3a3 !important;
}
.canvas {
}
.canvas {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.box {
}
.box {
width: 100%;
height: 100%;
position: relative;
border-radius: 18rpx;
overflow: hidden;
.user-msg {
position: absolute;
width: 100%;
@ -405,42 +440,81 @@
display: flex;
align-items: center;
justify-content: center;
.user-code {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
justify-content: space-between;
image {
width: 100%;
}
}
}
}
.img-list {
}
.img-list {
margin-right: 40px;
}
.distribution-posters swiper {
}
.distribution-posters swiper {
width: 100%;
height: 1000rpx;
position: relative;
margin-top: 40rpx;
}
.distribution-posters .slide-image {
}
.distribution-posters .slide-image {
width: 100%;
height: 100%;
margin: 0 auto;
border-radius: 15rpx;
}
.distribution-posters /deep/.active {
}
.distribution-posters /deep/.active {
transform: none;
transition: all 0.2s ease-in 0s;
}
.distribution-posters /deep/ .quiet {
}
.distribution-posters /deep/ .quiet {
transform: scale(0.8333333);
transition: all 0.2s ease-in 0s;
}
.distribution-posters .Sharebution {
display: grid;
grid-template-columns: 1fr 1fr;
height: 80rpx;
font-size: 30rpx;
margin: 15rpx auto;
margin-top: 38rpx;
.left {
width: 350rpx;
color: #fff;
border-radius: 50rpx;
text-align: center;
line-height: 80rpx;
margin: 15rpx auto;
background: #f4c241;
background-color: var(--view-theme);
}
.distribution-posters .keep {
.right {
font-size: 30rpx;
color: #fff;
width: 350rpx;
border-radius: 50rpx;
text-align: center;
line-height: 80rpx;
margin: 15rpx auto;
background-color: var(--view-theme);
}
}
.distribution-posters .keep {
font-size: 30rpx;
color: #fff;
width: 600rpx;
@ -448,20 +522,23 @@
border-radius: 50rpx;
text-align: center;
line-height: 80rpx;
margin: 38rpx auto;
margin: 15rpx auto;
background-color: var(--view-theme);
}
.distribution-posters .preserve {
}
.distribution-posters .preserve {
color: #fff;
text-align: center;
margin-top: 38rpx;
}
.distribution-posters .preserve .line {
}
.distribution-posters .preserve .line {
width: 100rpx;
height: 1px;
background-color: #fff;
}
.distribution-posters .preserve .tip {
}
.distribution-posters .preserve .tip {
margin: 0 30rpx;
}
}
</style>