Compare commits
merge into: Leadfyy.co:master
Leadfyy.co:dev
Leadfyy.co:master
Leadfyy.co:new
Leadfyy.co:threedate
Leadfyy.co:twodate
pull from: Leadfyy.co:twodate
Leadfyy.co:dev
Leadfyy.co:master
Leadfyy.co:new
Leadfyy.co:threedate
Leadfyy.co:twodate
46 Commits
邓平艺
32 changed files with 2225 additions and 330 deletions
-
30App.vue
-
12common/api.js
-
10common/styles/iconfont.css
-
2manifest.json
-
44pages.json
-
350pages/bill/bill.vue
-
168pages/center/bestar.vue
-
124pages/center/fans.vue
-
52pages/center/index.vue
-
337pages/center/invite.vue
-
217pages/center/wallet.vue
-
43pages/center/widthdraw.vue
-
26pages/collect/index.vue
-
2pages/contactService/index.vue
-
541pages/goodsDetail/index.vue
-
160pages/index/index.vue
-
6pages/login/index.vue
-
2pages/order/apply-details.vue
-
2pages/order/apply-refund.vue
-
4pages/order/confirm-atonce.vue
-
31pages/order/confirm-order.vue
-
202pages/order/index.vue
-
8pages/order/order-details.vue
-
12pages/order/pay-success.vue
-
1pages/order/unpay-details.vue
-
26pages/route/index.vue
-
143pages/shopOrder/index.vue
-
BINstatic/center/fans.png
-
BINstatic/center/invite.png
-
BINstatic/center/wallet.png
-
BINstatic/images/bill.png
-
BINstatic/images/poster-1.jpg
@ -0,0 +1,350 @@ |
|||
<template> |
|||
<view> |
|||
<button class='zfbtn m_l' @tap='formSubmit()'> |
|||
分享 |
|||
</button> |
|||
<button class='zfbtn m_l' @tap='saveAvatar()'> |
|||
保存头像 |
|||
</button> |
|||
|
|||
|
|||
<image :src="info.avatar" mode="aspectFill"></image> |
|||
|
|||
<tki-qrcode v-if="info.avatar" ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff" |
|||
foreground="#000" pdground="#000" :onval="true" :loadMake="true" :icon="info.avatar" /> |
|||
|
|||
<tki-qrcode v-else ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff" |
|||
foreground="#000" pdground="#000" :onval="true" :loadMake="true" :icon="require('@/static/images/system/payfail.png')" /> |
|||
|
|||
<view class="canvas-box"> |
|||
<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" /> |
|||
</view> |
|||
|
|||
<view class='imagePathBox' v-if="maskHidden == true && imagePath" @click="maskHidden = false "> |
|||
<image :src="imagePath" class='shengcheng' mode="aspectFill"></image> |
|||
<button class='baocun' @click.stop="saveBill()">保存相册，分享到朋友圈</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import tkiQrcode from "tki-qrcode"; // 二维码生成器 |
|||
export default { |
|||
components: { |
|||
tkiQrcode |
|||
}, |
|||
data() { |
|||
return { |
|||
base64Img: '', |
|||
checkArea: 'Cannot find module', |
|||
inputValue: "", |
|||
maskHidden: false, |
|||
name: "kk", |
|||
info: { |
|||
avatar: '', |
|||
nickname: '', |
|||
id: '', |
|||
tel: '', |
|||
tags: [] |
|||
}, |
|||
showLogin: true, |
|||
imagePath: '', |
|||
|
|||
userToken: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
saveAvatar() { |
|||
var that = this |
|||
console.log(that.info.avatar) |
|||
wx.saveImageToPhotosAlbum({ |
|||
filePath: that.info.avatar, |
|||
success(res) { |
|||
wx.showModal({ |
|||
content: '图片已保存到相册，赶紧晒一下吧~', |
|||
showCancel: false, |
|||
confirmText: '好的', |
|||
confirmColor: '#333', |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
console.log('用户点击确定'); |
|||
that.maskHidden = false |
|||
} |
|||
}, |
|||
fail: function(res) { |
|||
that.maskHidden = false |
|||
console.log(res) |
|||
} |
|||
}) |
|||
}, |
|||
fail(err) { |
|||
console.log(err) |
|||
} |
|||
}) |
|||
}, |
|||
qrR(data) { |
|||
this.base64Img = data; |
|||
console.log('base64',this.base64Img) |
|||
}, |
|||
verifyUserInfo() { |
|||
let userInfo = uni.getStorageSync('userinfo') || {}; |
|||
if (!userInfo.id || !userInfo.nickname || !userInfo.avatar) { |
|||
if (this.showLogin) { |
|||
this.showLogin = false; |
|||
this.$url('/pages/login/index?type=userinfo'); |
|||
} else { |
|||
this.showLogin = true; |
|||
this.$url('/pages/index/index', { |
|||
type: 'switch' |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
getData() { |
|||
let userinfo = uni.getStorageSync('userinfo') || {}; |
|||
if (userinfo) { |
|||
this.info = userinfo |
|||
console.log('用户数据缓存',this.info) |
|||
} else { |
|||
this.$http(this.API.API_USER_CENTER).then(res => { |
|||
this.info = res.data; |
|||
console.log('用户数据接口',this.info) |
|||
}) |
|||
} |
|||
}, |
|||
createNewImg() { |
|||
var that = this; |
|||
var context = wx.createCanvasContext('mycanvas'); |
|||
var path = "../../static/images/poster-1.jpg"; |
|||
context.drawImage(path, 0, 0, 375, 667); |
|||
//绘制二维码 |
|||
context.drawImage(that.base64Img, 24, 530,120, 120); |
|||
//绘制名字 |
|||
// context.setFontSize(24); |
|||
// context.setFillStyle('#fff'); |
|||
// context.setTextAlign('center'); |
|||
// context.fillText(name, 34, 620); |
|||
context.stroke(); |
|||
context.draw(); |
|||
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时 |
|||
setTimeout(function() { |
|||
wx.canvasToTempFilePath({ |
|||
canvasId: 'mycanvas', |
|||
success: function(res) { |
|||
that.imagePath = res.tempFilePath; |
|||
if(that.imagePath) { |
|||
that.canvasHidden = true |
|||
that.maskHidden = true |
|||
} |
|||
console.log('海报生成成功') |
|||
console.log(res) |
|||
console.log('图片链接', that.imagePath) |
|||
}, |
|||
fail: function(res) { |
|||
console.log(res); |
|||
} |
|||
}); |
|||
}, 200); |
|||
}, |
|||
saveBill() { |
|||
var that = this |
|||
wx.saveImageToPhotosAlbum({ |
|||
filePath: that.imagePath, |
|||
success(res) { |
|||
wx.showModal({ |
|||
content: '图片已保存到相册，赶紧晒一下吧~', |
|||
showCancel: false, |
|||
confirmText: '好的', |
|||
confirmColor: '#333', |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
console.log('用户点击确定'); |
|||
that.maskHidden = false |
|||
} |
|||
}, |
|||
fail: function(res) { |
|||
that.maskHidden = false |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
formSubmit() { |
|||
var that = this; |
|||
wx.showToast({ |
|||
title: '生成海报中...', |
|||
icon: 'loading', |
|||
duration: 1000 |
|||
}); |
|||
wx.hideToast() |
|||
that.createNewImg() |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.qrcode = 'dadaa' |
|||
|
|||
this.verifyUserInfo(); |
|||
this.getData(); |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.bgImg { |
|||
display: block; |
|||
width: 100%; |
|||
height: 366rpx; |
|||
} |
|||
|
|||
.mine { |
|||
display: block; |
|||
text-align: center; |
|||
color: #333; |
|||
margin-top: 44rpx; |
|||
} |
|||
|
|||
.code { |
|||
display: block; |
|||
text-align: center; |
|||
color: #333; |
|||
font-size: 76rpx; |
|||
font-weight: bold; |
|||
margin-top: 30rpx; |
|||
} |
|||
|
|||
.who { |
|||
display: block; |
|||
margin-top: 80rpx; |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
text-align: center; |
|||
} |
|||
|
|||
.inputBox { |
|||
text-align: center; |
|||
margin-top: 44rpx; |
|||
} |
|||
|
|||
.input { |
|||
text-align: center; |
|||
width: 440rpx; |
|||
height: 88rpx; |
|||
border-radius: 44rpx; |
|||
background: #f5f5f5; |
|||
font-size: 32rpx; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.btn { |
|||
width: 160rpx; |
|||
height: 88rpx; |
|||
border-radius: 44rpx; |
|||
background: linear-gradient(90deg, rgba(255, 226, 0, 1), rgba(255, 200, 11, 1)); |
|||
box-shadow: 0px 4px 8px 0px rgba(255, 200, 11, 0.5); |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
display: inline-block; |
|||
line-height: 88rpx; |
|||
margin-left: 40rpx; |
|||
} |
|||
|
|||
button[class="btn"]::after { |
|||
border: 0; |
|||
} |
|||
|
|||
.tishi { |
|||
display: block; |
|||
text-align: center; |
|||
color: #999; |
|||
margin-top: 30rpx; |
|||
} |
|||
|
|||
.shareText { |
|||
display: block; |
|||
text-align: center; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
margin-top: 100rpx; |
|||
} |
|||
|
|||
.imgBox { |
|||
text-align: center; |
|||
width: 100%; |
|||
margin-top: 60rpx; |
|||
padding-bottom: 120rpx; |
|||
} |
|||
|
|||
.img { |
|||
display: inline-block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.m_l { |
|||
margin-left: 180rpx; |
|||
} |
|||
|
|||
.zfbtn { |
|||
display: inline-block; |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 50%; |
|||
background: transparent; |
|||
outline: none; |
|||
border: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
button[class="zfbtn"]::after { |
|||
border: 0; |
|||
} |
|||
|
|||
button[class="zfbtn m_l"]::after { |
|||
border: 0; |
|||
} |
|||
|
|||
.imagePathBox { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgba(0, 0, 0, 0.7); |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.shengcheng { |
|||
width: 80%; |
|||
height: 80%; |
|||
position: fixed; |
|||
top: 50rpx; |
|||
left: 50%; |
|||
margin-left: -40%; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.baocun { |
|||
display: block; |
|||
width: 80%; |
|||
height: 80rpx; |
|||
padding: 0; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
position: fixed; |
|||
bottom: 50rpx; |
|||
left: 10%; |
|||
background: #ffe200; |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
border-radius: 44rpx; |
|||
} |
|||
|
|||
button[class="baocun"]::after { |
|||
border: 0; |
|||
} |
|||
</style> |
|||
} |
|||
</style> |
|||
@ -0,0 +1,168 @@ |
|||
<template> |
|||
<view> |
|||
<view class="flex lf-p-30"> |
|||
<view> |
|||
<image :src="info.avatar" style="height: 120rpx;width: 120rpx;border-radius: 50%;" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="flex flex-direction lf-p-l-20 justify-center"> |
|||
<view class="lf-font-32 lf-m-b-10 text-black1 lf-line-2">{{info.nickname}}</view> |
|||
<view class="lf-font-28 lf-color-gray" v-if="!info.isTalnet">会员未开通</view> |
|||
<view class="lf-font-28 lf-color-gray" v-else>会员已开通</view> |
|||
</view> |
|||
</view> |
|||
<self-line/> |
|||
<view> |
|||
<view class="lf-p-t-30 lf-p-l-32 lf-flex-wrap"> |
|||
<view class="paynum" style="overflow: hidden;"> |
|||
<view class="lf-color-white flex justify-center" style="background-color: #F93A3A;border-radius: 0 0 10rpx 0;width: 168rpx;height: 46rpx;"> |
|||
<text class="lf-font-24" style="padding: 6rpx 12rpx;">成为分销达人</text> |
|||
</view> |
|||
<view class="lf-m-t-28 text-black lf-font-24 lf-m-l-20"> |
|||
需要支付 |
|||
</view> |
|||
<view class="lf-m-l-20 lf-m-t-16">￥<text class="lf-font-60 lf-font-bold">9.9</text></view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-32 lf-m-t-40 lf-font-32 text-black1 solid-bottom lf-p-b-20"> |
|||
支付方式 |
|||
</view> |
|||
<view class="flex justify-between align-center text-center lf-p-l-32 lf-p-r-32 lf-p-t-30 lf-p-b-30 solid-bottom"> |
|||
<view class="flex justify-around align-center text-center"> |
|||
<view class="lf-row-center"> |
|||
<text class="lf-iconfont lf-icon-weixinzhifu lf-font-48" style="color: #09BB07;"></text> |
|||
</view> |
|||
<view class="lf-font-36 lf-m-l-20 lf-w-100 text-black1">微信支付</view> |
|||
</view> |
|||
<view> |
|||
<view> |
|||
<checkbox-group @change="checkboxChangepay" style="display: inline-block;"> |
|||
<checkbox class="lf-text-vertical" style="" :checked="checkedpay"></checkbox> |
|||
</checkbox-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<view class="btn-bottom" style="bottom: 60rpx;"> |
|||
<view class="padding-lr-lg lf-m-b-18"> |
|||
<checkbox-group @change="checkboxChange" style="display: inline-block;"> |
|||
<checkbox class="lf-text-vertical" style="" :checked="checked"></checkbox> |
|||
</checkbox-group> |
|||
<view class="lf-m-l-10 lf-font-24 lf-color-gray" style="display: inline-block;"> |
|||
<text>已阅读并同意</text> |
|||
<text @click="enterAgree" class="text-orange">《{{agreement.title}}》</text> |
|||
</view> |
|||
</view> |
|||
<view class="padding-lr-lg"> |
|||
<button class="cu-btn block bg-orange lg" style="border-radius: 42rpx;" @tap="subimitApply()"> |
|||
<text class="lf-font-32 text-white">购买并支付¥9.9</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
checked: false, // 是否勾选协议 |
|||
info: {}, |
|||
ifPay: true, |
|||
checkedpay: true, |
|||
agreement: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
// 勾选协议发生变化 |
|||
checkboxChange(event){ |
|||
this.checked = event.detail.value.length > 0; |
|||
}, |
|||
//勾选支付方式 |
|||
checkboxChangepay(event){ |
|||
this.checkedpay = event.detail.value.length > 0; |
|||
}, |
|||
getAgree(){ |
|||
this.$http(this.API.API_WXLOGIN_VIEW,{type: 'vip'}).then(res => { |
|||
this.agreement = res.data.agreement; |
|||
}) |
|||
}, |
|||
// 进入查看协议 |
|||
enterAgree(){ |
|||
this.$url('/pages/agreement/agreement?id='+ this.agreement.article_id); |
|||
}, |
|||
getData(){ |
|||
this.$http(this.API.API_USER_CENTER).then(res => { |
|||
this.info = res.data; |
|||
}) |
|||
}, |
|||
subimitApply() { |
|||
if(!this.checkedpay) { |
|||
this.$msg('请选择付款方式!') |
|||
return |
|||
} |
|||
if(!this.checked) { |
|||
this.$msg('请认真阅读并同意协议!') |
|||
return |
|||
} |
|||
if(!this.ifPay) return; |
|||
this.ifPay = false; |
|||
this.$http(this.API.API_PRPAID, { |
|||
goods_id: 0, |
|||
goods_specs_id: 0, |
|||
number: 1, |
|||
payment_desc: 3, |
|||
share_one: this.info.id |
|||
}).then(res => { |
|||
this.order_id = res.data.order_id |
|||
uni.requestPayment({ |
|||
orderInfo: res.data.order_num, |
|||
timeStamp: res.data.timeStamp, |
|||
nonceStr: res.data.nonceStr, |
|||
package: res.data.package, |
|||
signType: res.data.signType, |
|||
paySign: res.data.paySign, |
|||
success: (res) => { |
|||
this.ifPay = true |
|||
this.$url('/pages/order/pay-success?ifSuccess=1&type=3&order_id='+this.order_id,{type: 'redirect'}) |
|||
}, |
|||
fail: (err) => { |
|||
this.ifPay = true |
|||
this.$url('/pages/order/pay-success?ifSuccess=2&type=3&order_id='+this.order_id,{type: 'redirect'}) |
|||
}, |
|||
}) |
|||
|
|||
}).catch(err => { |
|||
this.ifPay = true |
|||
if(err.code == 9997) { |
|||
uni.showModal({ |
|||
title: '提示', |
|||
content: '是否同意前往手机授权？', |
|||
success: e => { |
|||
if (!e.confirm) return; |
|||
this.$routerGo('/pages/login/index?type=phone') |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
} |
|||
}, |
|||
onLoad() { |
|||
this.getData() |
|||
this.getAgree() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.paynum { |
|||
width: 280rpx; |
|||
height: 280rpx; |
|||
border: 1px solid #FE9903; |
|||
background-color: #FFF4E4; |
|||
border-radius: 10rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,124 @@ |
|||
<template> |
|||
<view> |
|||
<view class="bg-white lf-p-t-40 lf-p-b-40 flex justify-around align-center text-center solid-bottom"> |
|||
<view class="tab-item" |
|||
:class="current==index?'text-orange':'text-black1'" |
|||
v-for="(item, index) in tab_list" :key="index" |
|||
@click="changeTab(index)">{{ item.name }} |
|||
</view> |
|||
</view> |
|||
|
|||
<scroll-view :style="{height: 'calc('+ windowHeight +'px - 120rpx)'}" |
|||
:scroll-y="true" :refresher-enabled="true" |
|||
:refresher-triggered="isRefresher" |
|||
@scrolltolower="onScrolltolower" |
|||
@refresherrefresh="onRefresherrefresh" |
|||
v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex" |
|||
v-if="tabIndex == current"> |
|||
<view class="flex lf-p-30 solid-bottom" v-for="(item, index) in tabItem.list" :key="index"> |
|||
<view> |
|||
<image :src="item.avatar" style="height: 120rpx;width: 120rpx;" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="flex flex-direction justify-around lf-p-l-20"> |
|||
<view class="lf-font-32 text-black1">{{item.username}} <text class="bg-red lf-font-24 lf-m-l-10" style="border-radius: 30rpx;padding: 5rpx 16rpx;">{{item.state}}</text></view> |
|||
<view class="lf-font-24 lf-color-gray">{{item.created_at}}</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<!-- 空数据的情况 --> |
|||
<view class="loading-more"> |
|||
<text v-if="tabItem.list.length" :class="{'loading-more-text': tabItem.loadingClass}">{{ tabItem.loadingText }}</text> |
|||
<my-nocontent v-else></my-nocontent> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
current: 0, // tab下标 |
|||
pageSize: 10, |
|||
isRefresher: false, // scroll-view下拉刷新状态，当前默认没有触发 |
|||
windowHeight: 0, |
|||
tab_list: [{ |
|||
name: '内部粉丝', |
|||
list: [], |
|||
page: 1, |
|||
isPage: false, |
|||
loadingClass: false, |
|||
loadingText: '已加载全部数据' |
|||
},{ |
|||
name: '外部粉丝', |
|||
list: [], |
|||
page: 1, |
|||
isPage: false, |
|||
loadingClass: true, |
|||
loadingText: '正在加载中' |
|||
}] |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
this.windowHeight = uni.getSystemInfoSync().windowHeight; |
|||
this.getInFans() |
|||
}, |
|||
methods: { |
|||
changeTab(index) { |
|||
if(this.current == index) { |
|||
return |
|||
}else { |
|||
this.current = index |
|||
this.getInFans() |
|||
} |
|||
}, |
|||
getInFans() { |
|||
let per_page = this.pageSize; |
|||
let tab_item = this.tab_list[this.current]; |
|||
let fansType = this.current+1 |
|||
this.$http(this.API.API_FANS, { |
|||
page: tab_item.page, |
|||
limit: per_page, |
|||
type: fansType |
|||
}).then(res => { |
|||
this.isRefresher = false; |
|||
let isPage = res.data.has_more_page; |
|||
tab_item.isPage = isPage; |
|||
if(!isPage){ |
|||
tab_item.loadingClass = false; |
|||
tab_item.loadingText = '没有更多数据啦~'; |
|||
} |
|||
if(tab_item.page == 1){ |
|||
tab_item.list = res.data.items; |
|||
}else{ |
|||
tab_item.list.push(...res.data.items); |
|||
} |
|||
}) |
|||
}, |
|||
// 页面触底，加载下一页 |
|||
onScrolltolower(){ |
|||
let tab_item = this.tab_list[this.current]; |
|||
if(tab_item.isPage){ |
|||
tab_item.page = tab_item.page + 1; |
|||
this.getInFans() |
|||
} |
|||
}, |
|||
// scroll-view 下拉刷新 |
|||
onRefresherrefresh(){ |
|||
this.isRefresher = true; |
|||
this.getInFans() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.tab-item{ |
|||
width: 50%; |
|||
box-sizing: border-box; |
|||
font-size: 32rpx; |
|||
&:first-child{ |
|||
border-right: 2rpx solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,337 @@ |
|||
<template> |
|||
<view> |
|||
<view class="flex justify-center lf-m-t-20"> |
|||
<!-- <image src="../../static/images/bill.png" mode="widthFix" style="height: 1220rpx;width: 686rpx;"></image> --> |
|||
<image v-if="imagePath" :src="imagePath" mode="widthFix"></image> |
|||
</view> |
|||
|
|||
<view class="canvas-box"> |
|||
<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" /> |
|||
</view> |
|||
|
|||
<view class="btn-bottom" style="bottom: 40rpx;"> |
|||
<view class="padding-lr-lg"> |
|||
<button class="cu-btn block bg-orange lg" style="border-radius: 42rpx;" @tap="saveBill()"> |
|||
<text class="lf-font-32 text-white">保存</text> |
|||
</button> |
|||
</view> |
|||
|
|||
<!-- <view class="flex justify-center align-center lf-m-t-30"> |
|||
<view class="lf-color-gray lf-font-28">https：//hbdsufiewhuifusikj.com</view> |
|||
<view class="lf-font-24 text-orange lf-m-l-30" @click="copy('https：//hbdsufiewhuifusikj.com')">复制</view> |
|||
</view> --> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
base64Img: '', |
|||
checkArea: 'Cannot find module', |
|||
maskHidden: false, |
|||
info: { |
|||
avatar: '', |
|||
nickname: '', |
|||
id: '', |
|||
tel: '', |
|||
tags: [] |
|||
}, |
|||
showLogin: true, |
|||
imagePath: '', |
|||
|
|||
userToken: '', |
|||
wxCode: '', |
|||
onceCode: '', |
|||
backgroundImg: '' |
|||
} |
|||
}, |
|||
onLoad() { |
|||
wx.showToast({ |
|||
title: '生成海报中...', |
|||
icon: 'loading', |
|||
duration: 1000 |
|||
}); |
|||
this.getWxCode() |
|||
this.getBackground() |
|||
}, |
|||
methods: { |
|||
getBackground() { |
|||
let _this = this |
|||
_this.$http(_this.API.API_BILLBACKGROUND, { |
|||
type: 'telent_share' |
|||
}).then(res => { |
|||
let img = res.data.img_url |
|||
if (img) { |
|||
wx.getImageInfo({ |
|||
src: img, |
|||
success: function(sres) { |
|||
_this.backgroundImg = sres.path |
|||
console.log('临时路径',_this.backgroundImg) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
getWxCode() { |
|||
this.$http(this.API.API_WXBILL, { |
|||
scene: 'route=home&id=2&pt=2', |
|||
page: 'pages/route/index', |
|||
width: '2800' |
|||
}).then(res => { |
|||
this.wxCode = res.data.base_url |
|||
if (this.wxCode) { |
|||
this.getwxCodeImg() |
|||
} |
|||
}) |
|||
}, |
|||
//保存二维码 |
|||
getwxCodeImg() { |
|||
var imgSrc = this.wxCode; //base64编码 |
|||
var save = wx.getFileSystemManager(); |
|||
var number = Math.random(); |
|||
save.writeFile({ |
|||
filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.jpg', |
|||
data: imgSrc, |
|||
encoding: 'base64', |
|||
success: res => { |
|||
this.onceCode = wx.env.USER_DATA_PATH + '/pic' + number + '.jpg' |
|||
console.log(this.onceCode) |
|||
if (this.onceCode && this.backgroundImg) { |
|||
this.createNewImg() |
|||
}else if(!this.onceCode){ |
|||
this.$msg('小程序码生成失败!') |
|||
}else if(!this.backgroundImg){ |
|||
this.$msg('海报背景图生成失败!') |
|||
} |
|||
}, |
|||
fail: err => { |
|||
console.log(err) |
|||
} |
|||
}) |
|||
}, |
|||
createNewImg() { |
|||
var that = this; |
|||
var context = wx.createCanvasContext('mycanvas'); |
|||
console.log('画布', that.backgroundImg) |
|||
var path = that.backgroundImg; |
|||
context.drawImage(path, 0, 0, 375, 667); |
|||
//绘制二维码 |
|||
let wxcode = that.onceCode |
|||
context.drawImage(wxcode, 18, 530, 120, 120); |
|||
//绘制名字 |
|||
// context.setFontSize(24); |
|||
// context.setFillStyle('#fff'); |
|||
// context.setTextAlign('center'); |
|||
// context.fillText(name, 34, 620); |
|||
context.stroke(); |
|||
context.draw(); |
|||
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时 |
|||
setTimeout(function() { |
|||
wx.canvasToTempFilePath({ |
|||
canvasId: 'mycanvas', |
|||
success: function(res) { |
|||
that.imagePath = res.tempFilePath; |
|||
if (that.imagePath) { |
|||
that.canvasHidden = true |
|||
that.maskHidden = true |
|||
} |
|||
console.log('海报生成成功,图片链接', that.imagePath) |
|||
}, |
|||
fail: function(res) { |
|||
console.log(res); |
|||
} |
|||
}); |
|||
}, 900); |
|||
}, |
|||
saveBill() { |
|||
var that = this |
|||
wx.saveImageToPhotosAlbum({ |
|||
filePath: that.imagePath, |
|||
success(res) { |
|||
wx.showModal({ |
|||
content: '图片已保存到相册，赶紧晒一下吧~', |
|||
showCancel: false, |
|||
confirmText: '好的', |
|||
confirmColor: '#333', |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
console.log('用户点击确定'); |
|||
that.maskHidden = false |
|||
} |
|||
}, |
|||
fail: function(res) { |
|||
that.maskHidden = false |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
// 点击复制 |
|||
copy(text) { |
|||
uni.setClipboardData({ |
|||
data: text |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.bgImg { |
|||
display: block; |
|||
width: 100%; |
|||
height: 366rpx; |
|||
} |
|||
|
|||
.mine { |
|||
display: block; |
|||
text-align: center; |
|||
color: #333; |
|||
margin-top: 44rpx; |
|||
} |
|||
|
|||
.code { |
|||
display: block; |
|||
text-align: center; |
|||
color: #333; |
|||
font-size: 76rpx; |
|||
font-weight: bold; |
|||
margin-top: 30rpx; |
|||
} |
|||
|
|||
.who { |
|||
display: block; |
|||
margin-top: 80rpx; |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
text-align: center; |
|||
} |
|||
|
|||
.inputBox { |
|||
text-align: center; |
|||
margin-top: 44rpx; |
|||
} |
|||
|
|||
.input { |
|||
text-align: center; |
|||
width: 440rpx; |
|||
height: 88rpx; |
|||
border-radius: 44rpx; |
|||
background: #f5f5f5; |
|||
font-size: 32rpx; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.btn { |
|||
width: 160rpx; |
|||
height: 88rpx; |
|||
border-radius: 44rpx; |
|||
background: linear-gradient(90deg, rgba(255, 226, 0, 1), rgba(255, 200, 11, 1)); |
|||
box-shadow: 0px 4px 8px 0px rgba(255, 200, 11, 0.5); |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
display: inline-block; |
|||
line-height: 88rpx; |
|||
margin-left: 40rpx; |
|||
} |
|||
|
|||
button[class="btn"]::after { |
|||
border: 0; |
|||
} |
|||
|
|||
.tishi { |
|||
display: block; |
|||
text-align: center; |
|||
color: #999; |
|||
margin-top: 30rpx; |
|||
} |
|||
|
|||
.shareText { |
|||
display: block; |
|||
text-align: center; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
margin-top: 100rpx; |
|||
} |
|||
|
|||
.imgBox { |
|||
text-align: center; |
|||
width: 100%; |
|||
margin-top: 60rpx; |
|||
padding-bottom: 120rpx; |
|||
} |
|||
|
|||
.img { |
|||
display: inline-block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.m_l { |
|||
margin-left: 180rpx; |
|||
} |
|||
|
|||
.zfbtn { |
|||
display: inline-block; |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 50%; |
|||
background: transparent; |
|||
outline: none; |
|||
border: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
button[class="zfbtn"]::after { |
|||
border: 0; |
|||
} |
|||
|
|||
button[class="zfbtn m_l"]::after { |
|||
border: 0; |
|||
} |
|||
|
|||
.imagePathBox { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgba(0, 0, 0, 0.7); |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.shengcheng { |
|||
width: 80%; |
|||
height: 80%; |
|||
position: fixed; |
|||
top: 50rpx; |
|||
left: 50%; |
|||
margin-left: -40%; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.baocun { |
|||
display: block; |
|||
width: 80%; |
|||
height: 80rpx; |
|||
padding: 0; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
position: fixed; |
|||
bottom: 50rpx; |
|||
left: 10%; |
|||
background: #ffe200; |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
border-radius: 44rpx; |
|||
} |
|||
|
|||
button[class="baocun"]::after { |
|||
border: 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,217 @@ |
|||
<template> |
|||
<view> |
|||
<!-- 钱包余额信息 --> |
|||
<view class="wallet-top"> |
|||
<view class="bg-white wallet-wraptop flex-direction flex justify-around align-center text-center"> |
|||
<view class="text-black1 text-price1" style="font-size: 72rpx;">{{walletBalance}}</view> |
|||
<view class="text-gray lf-font-24 lf-m-b-20">佣金（元）</view> |
|||
<view> |
|||
<button class="btn" @click="$url('/pages/center/widthdraw')">提取佣金</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<!-- tabs --> |
|||
<view class="bg-white lf-p-t-40 lf-p-b-40 flex justify-around align-center text-center solid-bottom"> |
|||
<view class="tab-item" :class="current==index?'text-orange':'text-black1'" |
|||
v-for="(item, index) in tab_list" :key="index" |
|||
@click="changeTab(index)">{{ item.name }} |
|||
</view> |
|||
</view> |
|||
<!-- scroll page --> |
|||
<block v-if="current == 0"> |
|||
<scroll-view :style="{height: 'calc('+ windowHeight +'px - 530rpx)'}" |
|||
class="scroll-view" |
|||
:scroll-y="true" :refresher-enabled="true" |
|||
:refresher-triggered="isRefresher" |
|||
@scrolltolower="onScrolltolower" |
|||
@refresherrefresh="onRefresherrefresh"> |
|||
<view class="flex flex-direction justify-between lf-p-t-20 lf-p-b-20 lf-p-l-32 lf-p-r-32 solid-bottom" v-for="(item, index) in tab_list[current].list" :key="item"> |
|||
<view class="flex align-center text-center justify-between"> |
|||
<view class="lf-font-36 lf-color-price">+¥{{item.add_price}}</view> |
|||
<view class="lf-font-32 text-black1">结余 ¥{{item.final_price}}</view> |
|||
</view> |
|||
<view class="flex align-center text-center justify-between lf-m-t-10"> |
|||
<view class="lf-font-24 lf-color-999">{{item.reffer}}</view> |
|||
<view class="lf-font-24 lf-color-999">{{item.created_at}}</view> |
|||
</view> |
|||
</view> |
|||
<!-- 空数据的情况 --> |
|||
<view class="loading-more"> |
|||
<text v-if="tab_list[0].list.length" :class="{'loading-more-text': tab_list[0].loadingClass}">{{ tab_list[0].loadingText }}</text> |
|||
<my-nocontent v-else></my-nocontent> |
|||
</view> |
|||
</scroll-view> |
|||
</block> |
|||
|
|||
<block v-else> |
|||
<scroll-view :style="{height: 'calc('+ windowHeight +'px - 524rpx)'}" |
|||
:scroll-y="true" :refresher-enabled="true" |
|||
:refresher-triggered="isRefresher" |
|||
@scrolltolower="onScrolltolower" |
|||
@refresherrefresh="onRefresherrefresh"> |
|||
<view class="flex flex-direction justify-between lf-p-t-20 lf-p-b-20 lf-p-l-32 lf-p-r-32 solid-bottom" v-for="(item, index) in tab_list[current].list" :key="item"> |
|||
<view class="flex align-center text-center justify-between"> |
|||
<view class="lf-font-36 lf-color-price">+¥{{item.extract_price}}</view> |
|||
<view class="lf-font-28 text-orange">{{item.state}}</view> |
|||
</view> |
|||
<view class="flex align-center text-center justify-between lf-m-t-10"> |
|||
<view class="lf-font-24 lf-color-999">流水号 {{item.order_no}}</view> |
|||
<view class="lf-font-24 lf-color-999">{{item.created_at}}</view> |
|||
</view> |
|||
</view> |
|||
<!-- 空数据的情况 --> |
|||
<view class="loading-more"> |
|||
<text v-if="tab_list[1].list.length" :class="{'loading-more-text': tab_list[1].loadingClass}">{{ tab_list[1].loadingText }}</text> |
|||
<my-nocontent v-else></my-nocontent> |
|||
</view> |
|||
</scroll-view> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
current: 0, |
|||
pageSize: 10, |
|||
isRefresher: false, // scroll-view下拉刷新状态，当前默认没有触发 |
|||
tab_list: [{ |
|||
name: '佣金记录', |
|||
list: [], |
|||
page: 1, |
|||
isPage: false, |
|||
loadingClass: false, |
|||
loadingText: '已加载全部数据' |
|||
},{ |
|||
name: '提取记录', |
|||
list: [], |
|||
page: 1, |
|||
isPage: false, |
|||
loadingClass: true, |
|||
loadingText: '正在加载中' |
|||
}], |
|||
windowHeight: 0, |
|||
walletBalance: 0 |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
this.windowHeight = uni.getSystemInfoSync().windowHeight; |
|||
this.getIncomeList() |
|||
}, |
|||
methods: { |
|||
changeTab(index) { |
|||
if(this.current == index) { |
|||
return |
|||
}else { |
|||
this.current = index |
|||
if(index == 0) { |
|||
this.getIncomeList() |
|||
}else { |
|||
this.getWidthList() |
|||
} |
|||
} |
|||
}, |
|||
//提取记录 |
|||
getWidthList() { |
|||
let per_page = this.pageSize; |
|||
let tab_item = this.tab_list[this.current]; |
|||
this.$http(this.API.API_EXTRACTLIST, { |
|||
page: tab_item.page, |
|||
limit: per_page |
|||
}).then(res => { |
|||
this.isRefresher = false; |
|||
let isPage = res.data.has_more_page; |
|||
tab_item.isPage = isPage; |
|||
if(!isPage){ |
|||
tab_item.loadingClass = false; |
|||
tab_item.loadingText = '没有更多数据啦~'; |
|||
} |
|||
if(tab_item.page == 1){ |
|||
tab_item.list = res.data.items; |
|||
}else{ |
|||
tab_item.list.push(...res.data.items); |
|||
} |
|||
}) |
|||
}, |
|||
//佣金记录 |
|||
getIncomeList() { |
|||
let per_page = this.pageSize; |
|||
let tab_item = this.tab_list[this.current]; |
|||
this.$http(this.API.API_INCOMELIST, { |
|||
page: tab_item.page, |
|||
limit: per_page |
|||
}).then(res => { |
|||
this.isRefresher = false; |
|||
this.walletBalance = res.data.income || 0 |
|||
let isPage = res.data.has_more_page; |
|||
tab_item.isPage = isPage; |
|||
if(!isPage){ |
|||
tab_item.loadingClass = false; |
|||
tab_item.loadingText = '没有更多数据啦~'; |
|||
} |
|||
if(tab_item.page == 1){ |
|||
tab_item.list = res.data.items; |
|||
}else{ |
|||
tab_item.list.push(...res.data.items); |
|||
} |
|||
}) |
|||
}, |
|||
// 页面触底，加载下一页 |
|||
onScrolltolower(){ |
|||
let tab_item = this.tab_list[this.current]; |
|||
if(tab_item.isPage){ |
|||
tab_item.page = tab_item.page + 1; |
|||
this.getIncomeList() |
|||
} |
|||
console.log('加载下一页') |
|||
}, |
|||
// scroll-view 下拉刷新 |
|||
onRefresherrefresh(){ |
|||
this.isRefresher = true; |
|||
this.getIncomeList() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.tab-item{ |
|||
font-size: 32rpx; |
|||
width: 50%; |
|||
box-sizing: border-box; |
|||
&:first-child{ |
|||
border-right: 2rpx solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
} |
|||
|
|||
.com { |
|||
height: 900rpx; |
|||
} |
|||
.wallet-top { |
|||
height: 404rpx; |
|||
width: 100%; |
|||
padding: 28rpx 32rpx; |
|||
background-color: #FE9903; |
|||
} |
|||
.wallet-wraptop { |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 10rpx; |
|||
padding: 46rpx 0 44rpx 0; |
|||
} |
|||
.btn{ |
|||
margin: 0; |
|||
padding: 0; |
|||
width: 320rpx; |
|||
height: 84rpx; |
|||
background-color: #FE9903; |
|||
color: #FFFFFF; |
|||
line-height: 84rpx; |
|||
font-size: 32rpx; |
|||
border-radius: 42rpx; |
|||
} |
|||
.scroll-view{ |
|||
padding-bottom: constant(safe-area-inset-bottom); |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,43 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<web-view :src="'http://192.168.3.14:8080/?token='+userInfoToken"></web-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
userInfoToken: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
onLoad(e) { |
|||
let userInfo = uni.getStorageSync('userinfo') || {}; |
|||
this.userInfoToken = userInfo.token |
|||
console.log(this.userInfoToken) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
page{ |
|||
background-color: #F5F5F5; |
|||
} |
|||
</style> |
|||
<style scoped> |
|||
.wrap { |
|||
height: 100%; |
|||
width: 100%; |
|||
background-color: #F5F5F5; |
|||
} |
|||
.unit{ |
|||
display: flex; |
|||
height: 100rpx; |
|||
align-items: flex-end; |
|||
box-sizing: border-box; |
|||
padding-bottom: 10rpx; |
|||
} |
|||
</style> |
|||
|
After Width: 50 | Height: 50 | Size: 1.9 KiB |
|
After Width: 50 | Height: 50 | Size: 1.9 KiB |
|
After Width: 50 | Height: 50 | Size: 1.2 KiB |
|
After Width: 686 | Height: 920 | Size: 343 KiB |
|
After Width: 549 | Height: 984 | Size: 185 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue