下载页面

效果图要求如下：

立即邀请按钮是个动态的，上下浮动并且尺寸或大或小的改变，可以通过css3动画来实现
二维码是生成的，这个二维码是含有用户邀请码的，如果通过此二维码进行下载app。
点击保存图片按钮，可以生成另一个邀请页面，该邀请页面效果图如下：

代码实现如下：

<template><view class="invite">       <image src="https://58d.oss-cn-hangzhou.aliyuncs.com/goods/%E6%96%B0%20%E9%95%BF_1599794241000.png" mode="widthFix"></image><view class="content"><view class="top"><view class="top-con"><view>您的专属邀请码</view><view>{{userInfo.inviteCode}}<image src="../../static/invite/copy.png" mode="widthFix" @click="copyMa"></image></view></view><view class="inviteBtn" @click="share"><image src="../../static/invite/inviteBtn.png" mode="widthFix"></image></view></view><view class="bottom"><view>邀请好友攻略</view><view class="bottom-con"><view class="bottom-item"><image src="../../static/invite/invite1.png" mode="widthFix"></image><view class="item-tit">第一步</view><view class="item-sub">分享给好友</view></view><view class="bottom-item"><image src="../../static/invite/invite2.png" mode="widthFix"></image><view class="item-tit">第二步</view><view class="item-sub">好友接受邀请</view></view><view class="bottom-item"><image src="../../static/invite/invite3.png" mode="widthFix"></image><view class="item-tit">第三步</view><view class="item-sub">好友注册下载</view></view></view></view></view><view class="code"><image src="https://58d.oss-cn-hangzhou.aliyuncs.com/goods/%E4%BA%8C%E7%BB%B4%E7%A0%81%402x_1598517850000.png" mode="widthFix"></image><view class="code-tit"><tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" style="margin-top: 80upx;":val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" /><text>扫描二维码，下载APP</text></view></view><view class="btn" @click="beginCanvas">生成并保存图片</view><mosowe-canvas-image ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="lists" height="585" width="330" /></view>
</template><script>import tkiQrcode from '@/components/qrcode/tki-qrcode.vue'import {base64ToPath} from '@/utils/imageTools.js'import mosoweCanvasImage from "@/components/mosowe-canvas-image/mosowe-canvas-image"import {mapState} from 'vuex';export default {components: {mosoweCanvasImage,tkiQrcode},data() {return {isShowPhoto: true,canvasUrl: '',lists: [{type: 'image',content: 'https://58d.oss-cn-hangzhou.aliyuncs.com/goods/%E5%8A%A0%E5%85%A5%E6%88%91%E4%BB%AC_1599729052000.png',width: 330,height: 585,x: 0,y: 0,}],ifShow: true,val: '', // 要生成的二维码值size: 420, // 二维码大小unit: 'upx', // 单位background: '#fff', // 背景色foreground: '#000', // 前景色pdground: '#000', // 角标色icon: '', // 二维码图标iconsize: 20, // 二维码图标大小lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行onval: false, // val值变化时自动重新生成二维码loadMake: true, // 组件加载完成后自动生成二维码src: '' // 二维码生成后的图片地址或base64}},created() {this.val = this.registerUrl+ this.userInfo.inviteCode;},computed: {...mapState(['hasLogin', 'userInfo', 'registerUrl'])},onNavigationBarButtonTap(e){if(e.index === 0){this.share();}},methods: {share() {// 分享图文到微信聊天界面uni.share({provider: "weixin", // 服务商scene: "WXSceneSession", // 场景 微信好友WXSceneSession  朋友圈WXSceneTimeLinetype: 0, // 图文0 文字1 图片2href: this.registerUrl+this.userInfo.inviteCode, // 分享h5地址title: "加入我们",summary: "多典商城，人人分享，人人销售！赶紧跟我一起来体验！", // 描述imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/category/2020-09-02/1599009402796.jpg",success: function (res) {console.log("success:" + JSON.stringify(res));},fail: function (err) {console.log("fail:" + JSON.stringify(err));}});},creatQrcode() {this.$refs.qrcode._makeCode()},saveQrcode() {this.$refs.qrcode._saveCode()},qrR(res) {this.src = resthis.lists.push({type: 'base',content: res,x: 80,y: 330,width: 170,height: 170,// maxWidth: 100,// align: 'left',})},beginCanvas() {this.val = this.registerUrl+this.userInfo.inviteCode;console.log(this.val)this.$refs.mosoweCanvasComponents.createCanvas();},_canvasImage(e) {this.canvasUrl = e;// 网络图片需要先进行下载然后直接保存到相册// this.saveHttpImg(e);// 本地图片可以直接保存到相册this.save(e);},hidePhoto() {this.isShowPhoto = false;},saveHttpImg(url) {let _t = this;uni.downloadFile({url: url, //仅为示例，并非真实的资源success: (res) => {if (res.statusCode === 200) {let file = res.tempFilePath;_t.save(file)}}});},save(url) {let _this = this;uni.saveImageToPhotosAlbum({filePath: url,success: () => {uni.hideLoading();uni.showToast({title:"已保存至相册",duration:3000});},fail: () => {uni.hideLoading();uni.showToast({title:"图片保存失败",duration:3000});}});},copyMa() {uni.setClipboardData({data: this.userInfo.inviteCode,success: function() {uni.showToast({title: "复制成功"})},fail: function() {uni.showToast({title: "复制失败"})}});}}}
</script><style lang="scss" scoped>//用transform就流畅了@keyframes heart{0%{transform:translate(0,-10upx) scale(0.9);}50%{transform:translate(0,10upx) scale(1.2);}100%{transform:translate(0,-10upx) scale(0.9);}}.inviteBtn image{animation: heart 2s ease-in-out 1.5s infinite alternate;}page{// overflow: hidden;background: #FF28A1;width:100vw;height:100vh;}.invite {width: 100%;width:100vw;height:auto;position: relative;background: #FF28A1;padding: 0;      &>image {width: 100%;height:100%;// border:10px solid #FF28A1;}.content{width:686upx;height:428upx;background:#fff;border-radius: 10upx;margin:0 auto;position: absolute;bottom:800upx;left:50%;transform: translateX(-50%);padding:10upx;box-sizing: border-box;.bottom{&>view{width:100%;text-align: center;}&>view:first-child{color:#333333;font-size:30upx;line-height: 100upx;}.bottom-con{display: flex;align-items: center;padding:20upx auto;.bottom-item{flex:1;image{width:45upx;height:45upx;}.item-tit{color:#666666;font-size:24upx;line-height: 40upx;}.item-sub{color:#666666;font-size:20upx;line-height: 30upx;}}}}.top{height:140upx;border-bottom:2upx dashed #FF5A5C;display: flex;align-items: center;&>view:last-child{width:286upx;}.inviteBtn{display: flex;justify-content: center;align-items: center;image{width:237upx;height:93upx;}}.top-con{width:400upx;text-align: center;&>view:first-child{color:#999999;font-size:20upx;}&>view:last-child{color:#333333;font-size:52upx;font-weight: bold;image{width:45upx;height:45upx;margin-left:20upx;}}}}}.yaoqing {position: absolute;top: 760upx;left: 50%;transform: translateX(-50%);&>image {width: 640upx;height: 90upx;}.yaoqing-txt {position: absolute;top: 0;left: 0;color: #fff;line-height: 80upx;padding: 0 50upx;box-sizing: border-box;font-size: 30upx;display: flex;justify-content: space-between;width: 640upx;height: 90upx;.copy {color: #fff;}}}.code {position: absolute;bottom: 160upx;left: 50%;transform: translateX(-50%);&>image{width:600upx;padding-left:20upx;}.code-tit {position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;&>image {position: absolute;width: 400upx;top: 50%;left: 50%;transform: translate(-50%, -50%);pointer-events: auto !important;}&>text {position: absolute;width: 500upx;bottom: 30upx;left: 50%;font-size: 24upx;transform: translate(-50%, -50%);text-align: center;}}}.btn {position: absolute;bottom: 60upx;left: 50%;transform: translateX(-50%);z-index: 9;border:1px solid red;width:686upx;height:74upx;background:#fff;margin:0 auto;border-radius: 10upx;text-align: center;line-height: 74upx;.save {position: absolute;left: 50%;transform: translateX(-50%);top: 40upx;}}.share {position: absolute;bottom: 160upx;left: 50%;transform: translateX(-50%);z-index: 9;.save {position: absolute;left: 50%;transform: translateX(-50%);top: 40upx;}}}
</style>

uniapp 电商app 下载页面功能实现相关推荐

uniapp 电商app 手机充值页面
电商app支持手机充值现在很多的电商app都是支持手机充值的,我们公司也实现了这个功能. 功能很简单,写文章主要是为了记录,没有什么技术难点. 获取手机充值配置页面加载的时候,需要展示一个默认运营 ...
uniapp 电商app 步骤条功能的使用
步骤条功能原型图如下图所示: dcloud插件市场中是有现成的组件的: steps步骤条插件地址:https://ext.dcloud.net.cn/plugin?id=34 使用方法 script ...
电商APP源码功能解说
一般电商APP要包括以下功能: 1.产品展示产品展示是电商APP最为核心的部分,无论什么类型的商城,其商品都需要通过产品展示这种方式向消费者展示商城以及商品的优势. 2.产品推荐这个功能可以为热销 ...
一款出色的电商APP的必备功能
转自:https://www.cnblogs.com/apicloud/p/8980565.html 电商APP是目前人们生活中不可缺少的必备工具,除了日常购物消费外,每年的双十一双十二俨然已经成了全 ...
uniapp 电商app签到功能实现
签到功能目前公司所做的电商app要做一个签到送津贴的页面.接口还在开发中,页面已经搭完了. 页面展示如下: 在页面搭建的过程中,遇到几个小问题,下面做一下记录并汇总一下解决方法. uniapp 标题 ...
uniapp 电商app进度条组件的使用（砍价进度条处理）
最近公司的电商app需要做一个砍价的功能,具体UI如下: 下面是我开发的版本,样式基本保持一致. 可以看出,砍价最主要的部分就是砍价进度条的部分. 为了能够实现进度条的功能,我从uniapp插件市场查 ...
uniapp 电商app 富文本框的使用——添加图文功能
uniapp 富文本框的使用 uniapp中是有富文本框组件的. uniapp中的富文本框组件的使用官网链接:https://uniapp.dcloud.io/component/editor?id= ...
uniapp 电商app vivo手机进行真机调试
打开开发者选项设置-->更多设置-->关于手机-->点击版本号7次,可以打开开发者选项打开USB调试重新进入: 设置-->更多设置-->开发者选项-->usb ...
Kotlin实战案例：实现RecyclerView分页查询功能（仿照主流电商APP，可切换列表）
n实战案例:带你实现RecyclerView分页查询功能(仿照主流电商APP,可切换列表和网格效果) 随着Kotlin的推广,一些国内公司的安卓项目开发,已经从Java完全切成Kotlin了.虽然Ko ...

uniapp 电商app 下载页面功能实现

下载页面

uniapp 电商app 下载页面功能实现相关推荐

最新文章

热门文章