初始化仓库
This commit is contained in:
wangxiaowei
273
components/share-popup/share-popup.vue
Normal file
273
components/share-popup/share-popup.vue
Normal file
@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<view >
|
||||
<u-popup class="share-popup" v-model="showshare" mode="bottom" border-radius="14" :closeable="true"
|
||||
:safe-area-inset-bottom="true" :mask-close-able="false" :mask-custom-style="{background: 'rgba(0, 0, 0, 0.1)'}" >
|
||||
<view class="flex row-center md bold m-t-30 m-b-30">分享至</view>
|
||||
<view class="flex row-around share-tab">
|
||||
<view class="flex-col col--center" @tap="getPoster">
|
||||
<image mode="widthFix" class="share-icon" src="/static/images/icon_generate_poster.png"></image>
|
||||
<view class="m-t-10">生成海报</view>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN-->
|
||||
<button open-type="share" class="flex-col col--center" hover-class="none">
|
||||
<image class="share-icon" src="/static/images/icon_wechat.png"></image>
|
||||
<view class="m-t-10">微信好友</view>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 || APP-PLUS -->
|
||||
<view oclass="flex-col col--center" @tap="shareWx">
|
||||
<image class="share-icon" src="/static/images/icon_wechat.png"></image>
|
||||
<view class="m-t-10">微信好友</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="flex row-center bg-body cancel xl" @tap="showshare=false">取消</view>
|
||||
</u-popup>
|
||||
<u-popup class="share-poster" v-model="showPoster" mode="center" :closeable="true"
|
||||
:safe-area-inset-bottom="true">
|
||||
<!-- #ifndef H5 -->
|
||||
<image style="width: 640rpx;" mode="widthFix" :src="poster"></image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<img style="width: 640rpx;" :src="poster" />
|
||||
<!-- #endif -->
|
||||
<button class="flex row-center save-btn" size="lg" @tap="savePoster">
|
||||
<!-- #ifndef H5 -->
|
||||
保存图片到相册
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
长按保存图片到相册
|
||||
<!-- #endif -->
|
||||
</button>
|
||||
</u-popup>
|
||||
<!-- #ifdef H5 -->
|
||||
<u-popup :custom-style="{'background': 'none'}" class="share-tips" v-model="showTips" mode="top">
|
||||
<view style="overflow: hidden;">
|
||||
<image src="/static/images/share_arrow.png" class="share-arrow" />
|
||||
<view class="white" style="text-align: center;margin-top: 280rpx;">
|
||||
<view class="bold lg">立即分享给好友吧</view>
|
||||
<view class="sm m-t-10">点击屏幕右上角将本页面分享给好友</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- #endif -->
|
||||
<poster v-if="enablePoster" :type="type" :share-id="shareId" :page-path="pagePath" :config="config"
|
||||
:qrcode="mnpQrcode" :link="getLink" @success="handleSuccess" @fail="handleFail" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
apiMnpQrCode,
|
||||
apiTtQrCode
|
||||
} from "@/api/app"
|
||||
import {
|
||||
baseURL,
|
||||
basePath
|
||||
} from '@/config/app'
|
||||
import {mapGetters} from 'vuex'
|
||||
import poster from './poster.vue'
|
||||
export default {
|
||||
components: {
|
||||
poster
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean
|
||||
},
|
||||
shareId: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
pagePath: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'goods'
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
poster: "",
|
||||
enablePoster: false,
|
||||
showPoster: false,
|
||||
showTips: false,
|
||||
mnpQrcode: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['inviteCode', 'userInfo']),
|
||||
getLink() {
|
||||
return `${baseURL}${basePath}/${this.pagePath}?id=${this.shareId}&invite_code=${this.inviteCode}`
|
||||
},
|
||||
showshare: {
|
||||
get() {
|
||||
return this.value
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
showPoster(val) {
|
||||
if (!val) {
|
||||
this.enablePoster = false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getPoster() {
|
||||
if (!this.isLogin) return this.$Router.push('/pages/login/login')
|
||||
uni.showLoading({
|
||||
title: '正在生成中'
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
if (!this.mnpQrcode) {
|
||||
// #ifdef MP-WEIXIN
|
||||
const res = await this.getMnpQrcode()
|
||||
// #endif
|
||||
this.mnpQrcode = res.data.qr_code.replaceAll("\r\n", "")
|
||||
}
|
||||
this.enablePoster = true
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS || H5
|
||||
this.enablePoster = true
|
||||
// #endif
|
||||
},
|
||||
// 获取商品页面二维码
|
||||
getMnpQrcode() {
|
||||
return new Promise((resolve, reject) => {
|
||||
apiMnpQrCode({
|
||||
id: this.shareId,
|
||||
url: this.pagePath,
|
||||
type: this.type
|
||||
}).then((res) => {
|
||||
resolve(res)
|
||||
}).catch(() => {
|
||||
reject()
|
||||
})
|
||||
})
|
||||
},
|
||||
getTtQrCode() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const sys = uni.getSystemInfoSync()
|
||||
apiTtQrCode({
|
||||
appname: TtAppNameEnum[sys.appName],
|
||||
id: this.shareId,
|
||||
page: this.pagePath
|
||||
}).then((res) => {
|
||||
resolve(res)
|
||||
}).catch(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
})
|
||||
},
|
||||
handleSuccess(val) {
|
||||
this.poster = val
|
||||
uni.hideLoading()
|
||||
this.showPoster = true
|
||||
this.showshare = false
|
||||
},
|
||||
handleFail() {
|
||||
uni.hideLoading({
|
||||
success: () => {
|
||||
this.$toast({
|
||||
title: '生成失败'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
shareWx() {
|
||||
// #ifdef H5
|
||||
this.showTips = true
|
||||
this.showshare = false
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: "WXSceneSession",
|
||||
type: 0,
|
||||
href: this.getLink,
|
||||
title: this.config.name,
|
||||
summary: '',
|
||||
imageUrl: this.config.image,
|
||||
success: (res) => {
|
||||
console.log('分享成功');
|
||||
},
|
||||
fail: (err) => {
|
||||
this.$toast({
|
||||
title: err.errMsg
|
||||
})
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
|
||||
async savePoster() {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: this.poster,
|
||||
success: res => {
|
||||
this.showPoster = false
|
||||
this.$toast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
this.$toast({
|
||||
title: '保存失败'
|
||||
});
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.share-popup {
|
||||
.share-tab {
|
||||
margin: 40rpx 0 140rpx;
|
||||
|
||||
.share-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel {
|
||||
height: 98rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.share-poster {
|
||||
.share-img {
|
||||
width: 640rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background-color: $-color-primary;
|
||||
color: #fff;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.share-tips .share-arrow {
|
||||
width: 140rpx;
|
||||
height: 250rpx;
|
||||
float: right;
|
||||
margin: 15rpx 31rpx 0 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user