123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356 |
- <template>
- <uni-popup ref="popupRef">
- <view class="share-box">
- <view class="share-status-bar" :style="{'height': `${statusBarHeight}px`}"></view>
- <!-- statusBarHeight -->
- <view class="share-content">
- <view class="content" id="share-content">
- <view class="share-top">
- <image class="share-logo" src="@/static/share/img_02.png" mode="aspectFit"></image>
- <text class="share-title">注册会员</text>
- <text class="share-title">获取高额奖励</text>
- <view class="share-list">
- <view class="share-list-item"><text class="item-icon"></text><text
- class="item-text">安全的钱包技术</text></view>
- <view class="share-list-item"><text class="item-icon"></text><text
- class="item-text">交易流畅顶级风控</text></view>
- <view class="share-list-item"><text class="item-icon"></text><text
- class="item-text">丰富的加密资产业务</text></view>
- <view class="share-list-item"><text class="item-icon"></text><text
- class="item-text">分布在世界各地的客户</text></view>
- </view>
- </view>
- <view class="footer">
- <image class="share-code" src="@/static/share/img_03.png" mode="aspectFit"></image>
- <view class="share-btns">
- <view class="share-btn">
- 邀请您加入[币王]
- </view>
- <view class="share-btn-hint">
- <<<长按识别二维码 </view>
- </view>
- </view>
- </view>
- </view>
- <view class="share-footer">
- <view class="share-list">
- <view class="share-icons">
- <text class="share-icon iconfont" style="color: #00b1ff;"></text>
- <text class="share-text">复制链接</text>
- </view>
- <view class="share-icons">
- <text class="share-icon iconfont" style="color: #029a73;"></text>
- <text class="share-text">微信</text>
- </view>
- <view class="share-icons">
- <text class="share-icon iconfont" style="color: #02d9a2;"></text>
- <text class="share-text">朋友圈</text>
- </view>
- <view class="share-icons">
- <text class="share-icon iconfont" style="color: #1890ff;"></text>
- <text class="share-text">QQ</text>
- </view>
- <view class="share-icons" @click="my_js.onclicks">
- <text class="share-icon iconfont" style="color: #83a0e5"></text>
- <text class="share-text">保存图片</text>
- </view>
- </view>
- <view class="share-cancel" @click.stop="cancelShare">
- 取消
- </view>
- </view>
- </view>
- </uni-popup>
- </template>
- <script>
- import {
- mapGetters
- } from 'vuex'
- export default {
- name: "sharePage",
- props: {
- tabBar: {
- type: Boolean,
- default: true
- }
- },
- data() {
- return {
- };
- },
- computed: {
- ...mapGetters([
- 'statusBarHeight'
- ])
- },
- mounted() {
- // this.openShare()
- // this.$refs.popupRef.open()
- },
- methods: {
- openShare() {
- this.$nextTick(() => {
- this.showTabBar(false)
- this.$refs.popupRef.open()
- })
- },
- cancelShare() {
- this.$refs.popupRef.close()
- this.showTabBar()
- },
- showTabBar(type = true) {
- if (this.tabBar) {
- try {
- if (type) {
- uni.showTabBar();
- } else {
- uni.hideTabBar();
- }
- } catch {}
- }
- },
- saveBase64(imageStr) {
- uni.showLoading({
- title: "保存中"
- })
- try {
- let bitmap = new plus.nativeObj.Bitmap();
- bitmap.loadBase64Data(imageStr, function() {
- console.log('加载base64图片数据成功');
- //图片名称命名
- bitmap.save('_doc/' + new Date().getTime() + '.png', {
- quality: 100
- }, function(i) {
- // 将图片保存到相册
- uni.saveImageToPhotosAlbum({
- filePath: i.target,
- success: function() {
- bitmap.clear(); //销毁Bitmap图片
- // uni.$u.toast('保存图片成功')
- uni.showToast({
- title: '保存图片成功',
- duration: 2000
- });
- // that.noPhoto = true;
- }
- });
- }, function(e) {
- console.log('保存图片失败:' + JSON.stringify(e));
- });
- }, function(e) {
- console.log('截屏绘制图片失败:' + JSON.stringify(e));
- });
- } catch {
- uni.hideLoading()
- }
- },
- }
- }
- </script>
- <script module="my_js" lang="renderjs">
- import html2canvas from 'html2canvas';
- export default {
- data() {
- return {}
- },
- methods: {
- onclicks(event, ownerInstance) {
- html2canvas(document.getElementById('share-content'), {
- backgroundColor: '#fff',
- useCORS: true,
- taintTest: true,
- timeout: 2000
- }).then(canvas => {
- let imgurl = canvas.toDataURL('image/jpg');
- ownerInstance.callMethod('saveBase64', imgurl)
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .share-box {
- width: 750rpx;
- height: 100vh;
- display: flex;
- flex-direction: column;
- .share-status-bar {
- flex-shrink: 0;
- width: 100%;
- background-color: rgba(255, 255, 255, 0.5);
- }
- .share-content {
- flex: 1;
- padding: 30rpx 40rpx;
- .content {
- flex-shrink: 0;
- width: 100%;
- height: 100%;
- background: url("@/static/share/img_01.png") no-repeat center center;
- background-size: 100% 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- padding: 30rpx 30rpx 20rpx;
- .share-top {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- .share-logo {
- display: inline-block;
- width: 322rpx;
- height: 80rpx;
- // margin-bottom: 14rpx;
- }
- .share-title {
- font-size: 56rpx;
- font-family: PingFang SC, PingFang SC-Bold;
- font-weight: 700;
- color: #ffffff;
- line-height: 1.1;
- letter-spacing: 1.2px;
- }
- .share-list {
- width: 100%;
- padding-top: 20rpx;
- display: flex;
- flex-direction: column;
- .share-list-item {
- font-size: 20rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #ffffff;
- line-height: 1.5;
- // transform: scale(0.8);
- display: flex;
- align-items: center;
- justify-content: flex-start;
- .item-icon {
- display: inline-block;
- width: 14rpx;
- height: 14rpx;
- border-radius: 50%;
- background-color: #fff;
- }
- .item-text {
- padding-left: 3px;
- }
- }
- }
- }
- .footer {
- width: 100%;
- display: flex;
- align-items: center;
- padding: 0 20rpx;
- .share-code {
- width: 130rpx;
- height: 130rpx;
- }
- .share-btns {
- width: calc(100% - 130rpx);
- padding-left: 45rpx;
- color: #fff;
- .share-btn {
- width: 100%;
- height: 50rpx;
- background: linear-gradient(180deg, #faae3d, #f9d159);
- border-radius: 29rpx;
- text-align: center;
- line-height: 50rpx;
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- }
- .share-btn-hint {
- padding-top: 22rpx;
- font-size: 24rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #ffffff;
- letter-spacing: 0.56rpx;
- }
- }
- }
- }
- }
- .share-footer {
- flex-shrink: 0;
- .share-list {
- border-radius: 40rpx 40rpx 0 0;
- width: 100%;
- padding: 30rpx 30rpx;
- display: flex;
- justify-content: space-between;
- align-items: stretch;
- background-color: #f6f7fc;
- }
- .share-icons {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- .share-icon {
- font-size: 100rpx;
- color: red;
- }
- .share-text {
- font-size: 24rpx;
- padding-top: 10rpx;
- }
- }
- .share-cancel {
- width: 100%;
- height: 100rpx;
- line-height: 100rpx;
- background-color: #fff;
- text-align: center;
- font-size: 34rpx;
- color: #c0c0c0;
- }
- }
- // <view class="share-content"></view>
- // <view class="share-share"></view>
- }
- </style>
|