<template>
|
<view class="pullNew-wrapper wrapperLayer">
|
<titleBar :titleText='"精选商品 助您邀新"' :pageForm='"pullNew"'></titleBar>
|
<view class="pagebottom-container pd30 colCen">
|
<view class="invite-step colCen">
|
<view class="step-title">
|
邀请步骤
|
</view>
|
<view class="step-list">
|
1. 将邀请码或海报分享给好友</br>
|
⒉ 好友注册时填写您的邀请码</br>
|
3. 好友即可0元购买改商品</br>
|
未来他/她有购物订单,您可获得佣金奖励,并自动计入您的帐户
|
</view>
|
</view>
|
|
<view class="bottomList-title">
|
精选商品 助您邀新
|
</view>
|
|
<view class="goodsList-container colCen">
|
<block v-for="(items,index) in goodsList" :key="index">
|
<view class="items-container rowCen">
|
<view class="left-image defIcon">
|
<image :src="items.mainPic" mode="aspectFill"></image>
|
</view>
|
<view class="right-info-container colCen">
|
<view class="goodsnameinfo-content rowSta">
|
<view class="typeIcon-content defIcon">
|
<image src="../../static/images/goods/tmtips.png" mode="heightFix"></image>
|
</view>
|
<view class="tradename">
|
{{items.dtitle}}
|
</view>
|
</view>
|
<view class="coupon-box rowCen">
|
<view class="coupon-box-bac rowCenCen">
|
<view>{{items.couponPrice}}元券</view>
|
</view>
|
</view>
|
<view class="btm-price-info rowCenBet">
|
<view class="leftcontent">
|
<view class="org-price">
|
原价<s>￥{{items.originalPrice}}</s>
|
</view>
|
<view class="new-price rowEnd">
|
<view class="tips">
|
新人价
|
</view>
|
<view class="price">
|
￥0
|
</view>
|
</view>
|
</view>
|
|
<view class="right-btn rowCenCen" @click="showModel(items)">
|
<view>分享</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</block>
|
<aLoadMore :status="loadstate" mode="loading3" :showTitle='true' color="#999999"></aLoadMore>
|
</view>
|
</view>
|
|
<u-popup v-model="shareShow" mode="bottom" border-radius="14" height="auto">
|
<view class="share-container colCen">
|
<view class="share-title rowCenCen">
|
<view class="title-text">
|
分享到
|
</view>
|
</view>
|
<view class="shareList rowCen">
|
<view class="items-container colCen" @tap='sharewx()'>
|
<view class="icon-box defIcon">
|
<image src="../../static/images/mine/wxshare.png" mode=""></image>
|
</view>
|
<view class="modeName">
|
微信好友
|
</view>
|
</view>
|
<view class="items-container colCen" @tap='sharepyq()'>
|
<view class="icon-box defIcon">
|
<image src="../../static/images/mine/sharefriend.png" mode=""></image>
|
</view>
|
<view class="modeName">
|
朋友圈
|
</view>
|
</view>
|
<view class="items-container colCen" @tap='shareqq()'>
|
<view class="icon-box defIcon">
|
<image src="../../static/images/mine/shareqq.png" mode=""></image>
|
</view>
|
<view class="modeName">
|
QQ
|
</view>
|
</view>
|
<view class="items-container colCen" @tap='savepic()'>
|
<view class="icon-box defIcon">
|
<image src="../../static/images/app/saveimg.png" mode=""></image>
|
</view>
|
<view class="modeName">
|
保存相册
|
</view>
|
</view>
|
</view>
|
|
<view class="cancelbox rowCenCen" @click="closeModel()">
|
<view class="canceltext">
|
取消
|
</view>
|
</view>
|
</view>
|
</u-popup>
|
|
<canvas canvas-id="qrcode" class="canvass" style="width: 260rpx;height: 260rpx;opacity: 0;" />
|
<canvas canvas-id="sharePoster" class="canvass" :style="{ width: canvasInfo.canvasW + 'px', height: canvasInfo.canvasH + 'px'}" />
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapMutations
|
} from "vuex";
|
import util from '../../utils/utils.js'
|
import uQRCode from '../../utils/qrcode.js'
|
let qrcode
|
export default {
|
data() {
|
return {
|
goodsList: [],
|
userInfo: '',
|
|
CVS: null,
|
canvasInfo: {
|
canvasW: 750,
|
canvasH: 1334,
|
},
|
codeSrc: '',
|
shareUrl: '',
|
shareShow: false,
|
|
loadstate: 'nomore',
|
pageCurrent: 0,
|
canload: false
|
}
|
},
|
onLoad() {
|
this.getData()
|
this.userInfo = util.getCacheSync('userInfo')
|
setTimeout(() => {
|
this.makeCode()
|
}, 100)
|
},
|
onReachBottom() {
|
if (this.canloadmore) {
|
this.getData()
|
}
|
},
|
methods: {
|
getData() {
|
this.$http.post('zeroBuyOrder/getZeroGoods', {
|
limit: 10,
|
offset: this.pageCurrent,
|
type: 1
|
}, 'application/json').then(res => {
|
console.log(res);
|
uni.stopPullDownRefresh();
|
if (res.length < 10) {
|
this.canload = false
|
this.loadingstates = 'nomore'
|
} else {
|
this.canload = true
|
this.loadingstates = 'loading'
|
this.pageCurrent += 10
|
}
|
this.goodsList = this.goodsList.concat(res)
|
})
|
},
|
|
showModel(items) {
|
this.$nextTick(() => {
|
this.sharegoods(items)
|
})
|
},
|
|
closeModel() {
|
this.shareShow = false
|
},
|
|
async makeCode() {
|
var txt = getApp().globalData.appinfo.appAndroidDownUrl
|
// #ifdef APP-PLUS
|
txt = plus.os.name == 'Android' ? getApp().globalData.appinfo.appAndroidDownUrl : getApp().globalData.appinfo.appIosDownUrl, // 生成内容
|
// #endif
|
qrcode = new uQRCode({
|
context: this, // 上下文环境
|
canvasId: 'qrcode', // canvas-id
|
usingComponents: false, // 是否是自定义组件
|
loadingText: '', // loading文字
|
text: txt, // 生成内容
|
size: uni.upx2px(260), // 二维码大小
|
cbResult: res => { // 生成二维码的回调
|
console.log(res);
|
this.codeSrc = res
|
},
|
});
|
},
|
|
async sharegoods(info) {
|
uni.showLoading()
|
this.CVS = uni.createCanvasContext('sharePoster', this);
|
let godsPic = await this.getImageInfo(info.mainPic) //广告图
|
let banPic = await this.getImageInfo('../../static/images/mine/sharegoodsbanner.jpg') //广告图
|
this.canvasInfo.canvasW = 750
|
this.canvasInfo.canvasH = 1334
|
this.CVS.setFillStyle('white'); //canvas背景颜色
|
this.CVS.fillRect(0, 0, 750, 1334); //canvas画布大小
|
|
this.CVS.drawImage(banPic.path, 0, 0, 750, 1334);
|
this.CVS.drawImage(godsPic.path, 20, 20, 710, 760);
|
this.CVS.drawImage(this.codeSrc, 269, 1034, 212, 212);
|
|
this.CVS.setFontSize(28); //设置标题字体大小
|
this.CVS.setFillStyle('#ffffff'); //设置标题文本颜色
|
|
this.CVS.setTextAlign('center')
|
this.CVS.fillText('邀请码：' + this.userInfo.invitation_code, 374, 1296)
|
this.CVS.draw(false, res => {
|
console.log(res);
|
uni.canvasToTempFilePath({
|
canvasId: 'sharePoster',
|
success: ress => {
|
console.log(ress);
|
uni.hideLoading()
|
this.shareShow = true
|
this.shareUrl = ress.tempFilePath
|
}
|
});
|
});
|
},
|
|
async getImageInfo(imgSrc) {
|
return new Promise((resolve, errs) => {
|
uni.getImageInfo({
|
src: imgSrc,
|
success: image => {
|
resolve(image);
|
},
|
fail: err => {
|
errs(err);
|
uni.hideLoading()
|
}
|
});
|
});
|
},
|
sharewx() {
|
uni.share({
|
provider: "weixin",
|
scene: "WXSceneSession",
|
type: 2,
|
imageUrl: this.shareUrl,
|
success: function(res) {
|
console.log("success:" + JSON.stringify(res));
|
},
|
fail: function(err) {
|
console.log("fail:" + JSON.stringify(err));
|
}
|
});
|
},
|
|
sharepyq() {
|
uni.share({
|
provider: "weixin",
|
scene: "WXSenceTimeline",
|
type: 2,
|
imageUrl: this.shareUrl,
|
success: function(res) {
|
console.log("success:" + JSON.stringify(res));
|
},
|
fail: function(err) {
|
console.log("fail:" + JSON.stringify(err));
|
}
|
});
|
},
|
|
shareqq() {
|
uni.share({
|
provider: "qq",
|
type: 2,
|
imageUrl: this.shareUrl,
|
success: function(res) {
|
console.log("success:" + JSON.stringify(res));
|
},
|
fail: function(err) {
|
console.log("fail:" + JSON.stringify(err));
|
}
|
});
|
},
|
|
savepic(){
|
uni.saveImageToPhotosAlbum({
|
filePath: this.shareUrl,
|
success: res => {
|
uni.showToast({
|
title:'保存相册成功~',
|
icon:'none'
|
})
|
this.closeModel()
|
},
|
fail(err) {
|
console.log(err);
|
},
|
});
|
},
|
},
|
onPullDownRefresh() {
|
this.pageCurrent = 0
|
this.canload = false
|
this.loadingstates = 'loading'
|
this.goodsList = []
|
this.getData()
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.pullNew-wrapper {
|
width: 100%;
|
|
.pagebottom-container {
|
width: 100%;
|
|
.invite-step {
|
width: 100%;
|
margin-top: 30rpx;
|
background-color: #FFFFFF;
|
border-radius: 16rpx;
|
padding: 30rpx;
|
|
.step-title {
|
width: 100%;
|
}
|
|
.step-list {
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #666666;
|
line-height: 38rpx;
|
margin-top: 25rpx;
|
}
|
}
|
|
.bottomList-title {
|
font-size: 30rpx;
|
font-weight: 500;
|
color: #333333;
|
margin-top: 50rpx;
|
margin-bottom: 40rpx;
|
}
|
|
.goodsList-container {
|
width: 100%;
|
|
.items-container {
|
width: 100%;
|
height: 242rpx;
|
background: #FFFFFF;
|
border-radius: 16rpx;
|
margin-bottom: 20rpx;
|
|
.left-image {
|
width: 210rpx;
|
height: 210rpx;
|
}
|
|
.right-info-container {
|
width: 450rpx;
|
margin-left: 20rpx;
|
|
.goodsnameinfo-content {
|
width: 100%;
|
margin-bottom: 15rpx;
|
|
.typeIcon-content {
|
width: 60rpx;
|
height: 24rpx;
|
margin-right: 5rpx;
|
margin-top: 8rpx;
|
}
|
|
.tradename {
|
width: 400rpx;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
|
.coupon-box {
|
width: 100%;
|
margin-top: 10rpx;
|
|
.coupon-box-bac {
|
height: 36rpx;
|
padding: 0 19rpx 0 26rpx;
|
background: url(../../static/images/app/coubac.png)no-repeat;
|
background-size: 100% 100%;
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
|
.btm-price-info {
|
width: 100%;
|
margin-top: 30rpx;
|
|
.leftcontent {
|
.org-price {
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #666666;
|
}
|
|
.new-price {
|
.tips {
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #333333;
|
line-height: 40rpx;
|
}
|
|
.price {
|
font-size: 30rpx;
|
font-weight: bold;
|
color: #F51428;
|
}
|
}
|
}
|
|
.right-btn {
|
width: 114rpx;
|
height: 56rpx;
|
background: linear-gradient(-40deg, #F51627, #FE4F04);
|
border-radius: 28rpx;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #F8F8FA;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.canvass {
|
opacity: 0;
|
position: fixed;
|
pointer-events: none;
|
bottom: 0;
|
left: 0;
|
}
|
|
.share-container {
|
width: 100%;
|
|
.share-title {
|
width: 100%;
|
height: 90rpx;
|
flex-wrap: wrap;
|
border-bottom: 1rpx solid #EFF1F7;
|
|
.title-text {
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #333333;
|
}
|
}
|
|
.shareList {
|
width: 100%;
|
flex-wrap: wrap;
|
border-bottom: 1rpx solid #EFF1F7;
|
margin-top: 45rpx;
|
|
.items-container {
|
width: 25%;
|
margin-bottom: 30rpx;
|
|
.icon-box {
|
width: 95rpx;
|
height: 95rpx;
|
}
|
|
.modeName {
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #333333;
|
margin-top: 15rpx;
|
}
|
}
|
}
|
|
.cancelbox {
|
width: 100%;
|
height: 90rpx;
|
|
.canceltext {
|
font-size: 28rpx;
|
font-weight: 500;
|
color: #333333;
|
}
|
}
|
}
|
</style>
|
