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:threedate
Leadfyy.co:dev
Leadfyy.co:master
Leadfyy.co:new
Leadfyy.co:threedate
Leadfyy.co:twodate
121 Commits
39 changed files with 3026 additions and 371 deletions
-
30App.vue
-
27common/api.js
-
8common/http.js
-
5common/scene.js
-
187common/shareMD5.js
-
34common/shared.js
-
10common/styles/iconfont.css
-
3main.js
-
2manifest.json
-
47pages.json
-
350pages/bill/bill.vue
-
175pages/center/bestar.vue
-
124pages/center/fans.vue
-
52pages/center/index.vue
-
359pages/center/invite.vue
-
281pages/center/wallet.vue
-
158pages/center/widthdraw.vue
-
33pages/collect/index.vue
-
12pages/contactService/index.vue
-
692pages/goodsDetail/index.vue
-
201pages/index/index.vue
-
6pages/login/index.vue
-
4pages/order/apply-details.vue
-
25pages/order/apply-refund.vue
-
6pages/order/confirm-atonce.vue
-
58pages/order/confirm-order.vue
-
206pages/order/index.vue
-
10pages/order/order-details.vue
-
16pages/order/pay-success.vue
-
3pages/order/unpay-details.vue
-
76pages/route/index - 副本.vue
-
47pages/route/index.vue
-
144pages/shopOrder/index.vue
-
BINstatic/center/fans.png
-
BINstatic/center/invite.png
-
BINstatic/center/wallet.png
-
BINstatic/images/bill.png
-
BINstatic/images/poster-1.jpg
-
6uview-ui/components/u-tabs/u-tabs.vue
@ -0,0 +1,5 @@ |
|||
// 分享相关场景值
|
|||
export const V2_GOODS_SHAREBUTTON = "101"; |
|||
export const V2_GOODS_SHAREPOSTER = "102"; |
|||
export const V2_HOME_SHAREBUTTON = "103"; |
|||
export const V2_INVITE_SHAREPOSTER = "104"; |
|||
@ -0,0 +1,187 @@ |
|||
// 源出处:https://blog.csdn.net/lijia_yong/article/details/111641251
|
|||
export function md5(string,bit) { |
|||
function md5_RotateLeft(lValue, iShiftBits) { |
|||
return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits)); |
|||
} |
|||
function md5_AddUnsigned(lX, lY) { |
|||
var lX4, lY4, lX8, lY8, lResult; |
|||
lX8 = (lX & 0x80000000); |
|||
lY8 = (lY & 0x80000000); |
|||
lX4 = (lX & 0x40000000); |
|||
lY4 = (lY & 0x40000000); |
|||
lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF); |
|||
if (lX4 & lY4) { |
|||
return (lResult ^ 0x80000000 ^ lX8 ^ lY8); |
|||
} |
|||
if (lX4 | lY4) { |
|||
if (lResult & 0x40000000) { |
|||
return (lResult ^ 0xC0000000 ^ lX8 ^ lY8); |
|||
} else { |
|||
return (lResult ^ 0x40000000 ^ lX8 ^ lY8); |
|||
} |
|||
} else { |
|||
return (lResult ^ lX8 ^ lY8); |
|||
} |
|||
} |
|||
function md5_F(x, y, z) { |
|||
return (x & y) | ((~x) & z); |
|||
} |
|||
function md5_G(x, y, z) { |
|||
return (x & z) | (y & (~z)); |
|||
} |
|||
function md5_H(x, y, z) { |
|||
return (x ^ y ^ z); |
|||
} |
|||
function md5_I(x, y, z) { |
|||
return (y ^ (x | (~z))); |
|||
} |
|||
function md5_FF(a, b, c, d, x, s, ac) { |
|||
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_F(b, c, d), x), ac)); |
|||
return md5_AddUnsigned(md5_RotateLeft(a, s), b); |
|||
}; |
|||
function md5_GG(a, b, c, d, x, s, ac) { |
|||
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_G(b, c, d), x), ac)); |
|||
return md5_AddUnsigned(md5_RotateLeft(a, s), b); |
|||
}; |
|||
function md5_HH(a, b, c, d, x, s, ac) { |
|||
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_H(b, c, d), x), ac)); |
|||
return md5_AddUnsigned(md5_RotateLeft(a, s), b); |
|||
}; |
|||
function md5_II(a, b, c, d, x, s, ac) { |
|||
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_I(b, c, d), x), ac)); |
|||
return md5_AddUnsigned(md5_RotateLeft(a, s), b); |
|||
}; |
|||
function md5_ConvertToWordArray(string) { |
|||
var lWordCount; |
|||
var lMessageLength = string.length; |
|||
var lNumberOfWords_temp1 = lMessageLength + 8; |
|||
var lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64; |
|||
var lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16; |
|||
var lWordArray = Array(lNumberOfWords - 1); |
|||
var lBytePosition = 0; |
|||
var lByteCount = 0; |
|||
while (lByteCount < lMessageLength) { |
|||
lWordCount = (lByteCount - (lByteCount % 4)) / 4; |
|||
lBytePosition = (lByteCount % 4) * 8; |
|||
lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition)); |
|||
lByteCount++; |
|||
} |
|||
lWordCount = (lByteCount - (lByteCount % 4)) / 4; |
|||
lBytePosition = (lByteCount % 4) * 8; |
|||
lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition); |
|||
lWordArray[lNumberOfWords - 2] = lMessageLength << 3; |
|||
lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29; |
|||
return lWordArray; |
|||
}; |
|||
function md5_WordToHex(lValue) { |
|||
var WordToHexValue = "", WordToHexValue_temp = "", lByte, lCount; |
|||
for (lCount = 0; lCount <= 3; lCount++) { |
|||
lByte = (lValue >>> (lCount * 8)) & 255; |
|||
WordToHexValue_temp = "0" + lByte.toString(16); |
|||
WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length - 2, 2); |
|||
} |
|||
return WordToHexValue; |
|||
}; |
|||
function md5_Utf8Encode(string) { |
|||
string = string.replace(/\r\n/g, "\n"); |
|||
var utftext = ""; |
|||
for (var n = 0; n < string.length; n++) { |
|||
var c = string.charCodeAt(n); |
|||
if (c < 128) { |
|||
utftext += String.fromCharCode(c); |
|||
} else if ((c > 127) && (c < 2048)) { |
|||
utftext += String.fromCharCode((c >> 6) | 192); |
|||
utftext += String.fromCharCode((c & 63) | 128); |
|||
} else { |
|||
utftext += String.fromCharCode((c >> 12) | 224); |
|||
utftext += String.fromCharCode(((c >> 6) & 63) | 128); |
|||
utftext += String.fromCharCode((c & 63) | 128); |
|||
} |
|||
} |
|||
return utftext; |
|||
}; |
|||
var x = Array(); |
|||
var k, AA, BB, CC, DD, a, b, c, d; |
|||
var S11 = 7, S12 = 12, S13 = 17, S14 = 22; |
|||
var S21 = 5, S22 = 9, S23 = 14, S24 = 20; |
|||
var S31 = 4, S32 = 11, S33 = 16, S34 = 23; |
|||
var S41 = 6, S42 = 10, S43 = 15, S44 = 21; |
|||
string = md5_Utf8Encode(string); |
|||
x = md5_ConvertToWordArray(string); |
|||
a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476; |
|||
for (k = 0; k < x.length; k += 16) { |
|||
AA = a; BB = b; CC = c; DD = d; |
|||
a = md5_FF(a, b, c, d, x[k + 0], S11, 0xD76AA478); |
|||
d = md5_FF(d, a, b, c, x[k + 1], S12, 0xE8C7B756); |
|||
c = md5_FF(c, d, a, b, x[k + 2], S13, 0x242070DB); |
|||
b = md5_FF(b, c, d, a, x[k + 3], S14, 0xC1BDCEEE); |
|||
a = md5_FF(a, b, c, d, x[k + 4], S11, 0xF57C0FAF); |
|||
d = md5_FF(d, a, b, c, x[k + 5], S12, 0x4787C62A); |
|||
c = md5_FF(c, d, a, b, x[k + 6], S13, 0xA8304613); |
|||
b = md5_FF(b, c, d, a, x[k + 7], S14, 0xFD469501); |
|||
a = md5_FF(a, b, c, d, x[k + 8], S11, 0x698098D8); |
|||
d = md5_FF(d, a, b, c, x[k + 9], S12, 0x8B44F7AF); |
|||
c = md5_FF(c, d, a, b, x[k + 10], S13, 0xFFFF5BB1); |
|||
b = md5_FF(b, c, d, a, x[k + 11], S14, 0x895CD7BE); |
|||
a = md5_FF(a, b, c, d, x[k + 12], S11, 0x6B901122); |
|||
d = md5_FF(d, a, b, c, x[k + 13], S12, 0xFD987193); |
|||
c = md5_FF(c, d, a, b, x[k + 14], S13, 0xA679438E); |
|||
b = md5_FF(b, c, d, a, x[k + 15], S14, 0x49B40821); |
|||
a = md5_GG(a, b, c, d, x[k + 1], S21, 0xF61E2562); |
|||
d = md5_GG(d, a, b, c, x[k + 6], S22, 0xC040B340); |
|||
c = md5_GG(c, d, a, b, x[k + 11], S23, 0x265E5A51); |
|||
b = md5_GG(b, c, d, a, x[k + 0], S24, 0xE9B6C7AA); |
|||
a = md5_GG(a, b, c, d, x[k + 5], S21, 0xD62F105D); |
|||
d = md5_GG(d, a, b, c, x[k + 10], S22, 0x2441453); |
|||
c = md5_GG(c, d, a, b, x[k + 15], S23, 0xD8A1E681); |
|||
b = md5_GG(b, c, d, a, x[k + 4], S24, 0xE7D3FBC8); |
|||
a = md5_GG(a, b, c, d, x[k + 9], S21, 0x21E1CDE6); |
|||
d = md5_GG(d, a, b, c, x[k + 14], S22, 0xC33707D6); |
|||
c = md5_GG(c, d, a, b, x[k + 3], S23, 0xF4D50D87); |
|||
b = md5_GG(b, c, d, a, x[k + 8], S24, 0x455A14ED); |
|||
a = md5_GG(a, b, c, d, x[k + 13], S21, 0xA9E3E905); |
|||
d = md5_GG(d, a, b, c, x[k + 2], S22, 0xFCEFA3F8); |
|||
c = md5_GG(c, d, a, b, x[k + 7], S23, 0x676F02D9); |
|||
b = md5_GG(b, c, d, a, x[k + 12], S24, 0x8D2A4C8A); |
|||
a = md5_HH(a, b, c, d, x[k + 5], S31, 0xFFFA3942); |
|||
d = md5_HH(d, a, b, c, x[k + 8], S32, 0x8771F681); |
|||
c = md5_HH(c, d, a, b, x[k + 11], S33, 0x6D9D6122); |
|||
b = md5_HH(b, c, d, a, x[k + 14], S34, 0xFDE5380C); |
|||
a = md5_HH(a, b, c, d, x[k + 1], S31, 0xA4BEEA44); |
|||
d = md5_HH(d, a, b, c, x[k + 4], S32, 0x4BDECFA9); |
|||
c = md5_HH(c, d, a, b, x[k + 7], S33, 0xF6BB4B60); |
|||
b = md5_HH(b, c, d, a, x[k + 10], S34, 0xBEBFBC70); |
|||
a = md5_HH(a, b, c, d, x[k + 13], S31, 0x289B7EC6); |
|||
d = md5_HH(d, a, b, c, x[k + 0], S32, 0xEAA127FA); |
|||
c = md5_HH(c, d, a, b, x[k + 3], S33, 0xD4EF3085); |
|||
b = md5_HH(b, c, d, a, x[k + 6], S34, 0x4881D05); |
|||
a = md5_HH(a, b, c, d, x[k + 9], S31, 0xD9D4D039); |
|||
d = md5_HH(d, a, b, c, x[k + 12], S32, 0xE6DB99E5); |
|||
c = md5_HH(c, d, a, b, x[k + 15], S33, 0x1FA27CF8); |
|||
b = md5_HH(b, c, d, a, x[k + 2], S34, 0xC4AC5665); |
|||
a = md5_II(a, b, c, d, x[k + 0], S41, 0xF4292244); |
|||
d = md5_II(d, a, b, c, x[k + 7], S42, 0x432AFF97); |
|||
c = md5_II(c, d, a, b, x[k + 14], S43, 0xAB9423A7); |
|||
b = md5_II(b, c, d, a, x[k + 5], S44, 0xFC93A039); |
|||
a = md5_II(a, b, c, d, x[k + 12], S41, 0x655B59C3); |
|||
d = md5_II(d, a, b, c, x[k + 3], S42, 0x8F0CCC92); |
|||
c = md5_II(c, d, a, b, x[k + 10], S43, 0xFFEFF47D); |
|||
b = md5_II(b, c, d, a, x[k + 1], S44, 0x85845DD1); |
|||
a = md5_II(a, b, c, d, x[k + 8], S41, 0x6FA87E4F); |
|||
d = md5_II(d, a, b, c, x[k + 15], S42, 0xFE2CE6E0); |
|||
c = md5_II(c, d, a, b, x[k + 6], S43, 0xA3014314); |
|||
b = md5_II(b, c, d, a, x[k + 13], S44, 0x4E0811A1); |
|||
a = md5_II(a, b, c, d, x[k + 4], S41, 0xF7537E82); |
|||
d = md5_II(d, a, b, c, x[k + 11], S42, 0xBD3AF235); |
|||
c = md5_II(c, d, a, b, x[k + 2], S43, 0x2AD7D2BB); |
|||
b = md5_II(b, c, d, a, x[k + 9], S44, 0xEB86D391); |
|||
a = md5_AddUnsigned(a, AA); |
|||
b = md5_AddUnsigned(b, BB); |
|||
c = md5_AddUnsigned(c, CC); |
|||
d = md5_AddUnsigned(d, DD); |
|||
} |
|||
if(bit==32){ |
|||
return (md5_WordToHex(a) + md5_WordToHex(b) + md5_WordToHex(c) + md5_WordToHex(d)).toLowerCase(); |
|||
} |
|||
return (md5_WordToHex(b) + md5_WordToHex(c)).toLowerCase(); |
|||
} |
|||
@ -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,175 @@ |
|||
<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">{{prcie || 0}}</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" v-if="agreement"> |
|||
<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">购买并支付¥{{prcie || 0}}</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
checked: false, // 是否勾选协议 |
|||
info: {}, |
|||
ifPay: true, |
|||
checkedpay: true, |
|||
agreement: '', |
|||
prcie: '' |
|||
} |
|||
}, |
|||
methods: { |
|||
getPrice(){ |
|||
this.$http(this.API.API_MEMBERPRICE).then(res => { |
|||
this.prcie = res.data.price || 0 |
|||
}) |
|||
}, |
|||
// 勾选协议发生变化 |
|||
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() |
|||
this.getPrice() |
|||
} |
|||
} |
|||
</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.share_time || 0}}</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,359 @@ |
|||
<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: 600px;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: 100000 |
|||
}); |
|||
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() { |
|||
let userInfo = uni.getStorageSync('userinfo') || {}; |
|||
const token = this.$shared.createToken({user_id: userInfo.id}); |
|||
let options = { |
|||
route: 'home', |
|||
pt: 2, |
|||
share_id: userInfo.id, |
|||
scene_code: this.$scene.V2_INVITE_SHAREPOSTER |
|||
} |
|||
this.generateKooken(token, options); // 谁分享了就生成一个token |
|||
|
|||
this.$http(this.API.API_WXBILL, { |
|||
scene: token, |
|||
page: 'pages/route/index', |
|||
width: '2800' |
|||
}).then(res => { |
|||
this.wxCode = res.data.base_url |
|||
if (this.wxCode) { |
|||
this.getwxCodeImg() |
|||
} |
|||
}) |
|||
}, |
|||
generateKooken(token, options){ |
|||
options.version = this.API.VERSION; |
|||
let values = JSON.stringify(options); |
|||
values = encodeURIComponent(values); |
|||
this.$http(this.API.API_WAREHOUSE_SET, { |
|||
key: token, |
|||
value: values |
|||
}).then(res => { |
|||
console.log("res", token, res); |
|||
}); |
|||
}, |
|||
//保存二维码 |
|||
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, 600); |
|||
//绘制二维码 |
|||
let wxcode = that.onceCode |
|||
context.drawImage(wxcode, 18, 460, 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 |
|||
wx.hideToast() |
|||
} |
|||
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,281 @@ |
|||
<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="getWidthdraw()">提取佣金</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 || 0}}</view> |
|||
<view class="lf-font-32 text-black1">结余 ¥{{item.final_price || 0}}</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 || 0}}</view> |
|||
<view class="lf-font-24 lf-color-999">{{item.created_at || 0}}</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 || 0}}</view> |
|||
<view class="lf-font-28 text-orange">{{item.state || 0}}</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 || 0}}</view> |
|||
<view class="lf-font-24 lf-color-999">{{item.created_at || 0}}</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 class='imagePathBox' v-if="maskHidden == true" @click="maskHidden = false "> |
|||
<image :src="widthdrawImg" mode="widthFix" class='shengcheng'></image> |
|||
</view> |
|||
</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, |
|||
widthdrawImg: '', |
|||
maskHidden: false |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
this.windowHeight = uni.getSystemInfoSync().windowHeight; |
|||
this.getIncomeList() |
|||
}, |
|||
methods: { |
|||
getWidthdraw() { |
|||
let userInfo = uni.getStorageSync('userinfo') || {}; |
|||
this.$http(this.API.API_WIDTHDRAWIMG, { |
|||
token: userInfo.token, |
|||
type: 'extract_img' |
|||
}).then(res => { |
|||
this.widthdrawImg = res.data.img_url |
|||
console.log(this.widthdrawImg) |
|||
if(this.widthdrawImg) { |
|||
this.maskHidden = true |
|||
} |
|||
}) |
|||
}, |
|||
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; |
|||
if(this.current == 0) { |
|||
this.getIncomeList() |
|||
}else { |
|||
this.getWidthList() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.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: 240rpx; |
|||
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; |
|||
} |
|||
.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,158 @@ |
|||
<template> |
|||
<view class="wrap"> |
|||
<view class="lf-p-l-30 lf-p-r-30 lf-m-t-30" style="height: auto;"> |
|||
<view class="bg-white lf-h-100 lf-p-30 flex align-center" style="border-radius: 10rpx; box-sizing: border-box;"> |
|||
<view> |
|||
<img :src="info.avatar" mode="aspectFill" style="height: 120rpx;width: 120rpx;border-radius: 50%;"></img> |
|||
</view> |
|||
<view class="lf-m-l-20 text-black1 lf-font-32"> |
|||
{{info.nickname || ''}} |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
<view class="lf-p-l-30 lf-p-r-30 lf-m-t-30" style="height: auto;"> |
|||
<view class="bg-white lf-h-100 lf-p-l-30 lf-p-r-30 flex flex-direction" style="border-radius: 10rpx; box-sizing: border-box;padding-bottom: 50rpx;padding-top: 34rpx;"> |
|||
<view class="flex align-start flex-direction solid-bottom"> |
|||
<view class="text-black lf-font-28 lf-m-b-30">支付宝姓名</view> |
|||
<input type="text" v-model="name" placeholder="请输入您的姓名" class="lf-font-28 lf-color-999"> |
|||
</view> |
|||
<view style="margin-top: 60rpx;" class="flex align-start flex-direction solid-bottom"> |
|||
<view class="text-black lf-font-28 lf-m-b-30">支付宝账号</view> |
|||
<input type="text" v-model="account" placeholder="请输入支付宝账号" class="lf-font-28 lf-color-999"> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="lf-p-30" style="height: 408rpx;"> |
|||
<view class="bg-white lf-h-100" style="border-radius: 10rpx;"> |
|||
<view class="text-black lf-font-28 lf-p-l-30 lf-p-t-30">提取金额</view> |
|||
<view class="lf-p-l-20 flex solid-bottom align-center" style="padding-top: 90rpx;"> |
|||
<text class="text-black lf-font-48 unit">¥</text> |
|||
<!-- <u-input v-model="num" :type="type" :border="border" :height="height" :auto-height="autoHeight"/> --> |
|||
<input type="number" v-model="num" class="lf-p-l-10 text-black1" style="width: 80%;padding-right: 30rpx;font-size: 72rpx;height: 100rpx;" /> |
|||
<view v-if="num != ''"> |
|||
<u-icon @click="clearAble()" name="close-circle" color="#999999" size="40"></u-icon> |
|||
</view> |
|||
</view> |
|||
<view class="lf-font-28 lf-color-999 lf-p-t-26 lf-p-l-30" v-if="!ifshow"> |
|||
可用余额 |
|||
<text>¥{{info.income || 0}}</text> |
|||
</view> |
|||
<view v-else class="lf-color-price lf-font-28 lf-p-t-26 lf-p-l-30">输入金额超过可用余额</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="lf-p-l-30 lf-p-r-30 lf-p-b-30" style="height: auto;"> |
|||
<view class="bg-white lf-h-100 lf-p-30" style="border-radius: 10rpx; box-sizing: border-box;"> |
|||
<view class="text-black lf-font-28">提现说明</view> |
|||
<view class="flex flex-direction justify-around lf-p-t-20"> |
|||
<view class="lf-font-28" style="color: #555;"> |
|||
1、提现到账时间为T+1; |
|||
</view> |
|||
<view class="lf-font-28" style="color: #555;"> |
|||
2、提现最高单笔金额为1000元; |
|||
</view> |
|||
<view class="lf-font-28" style="color: #555;"> |
|||
3、提现手续费单笔收费10%; |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="lf-m-b-30"> |
|||
<view class="padding-lr-lg"> |
|||
<button class="cu-btn block bg-orange lg" style="border-radius: 42rpx;" @tap="submitWidthdraw()"> |
|||
<text class="lf-font-32 text-white">提现</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
userInfo: '', |
|||
info: '', |
|||
name: '', |
|||
account: '', |
|||
num: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
ifshow() { |
|||
if(Number(this.num) > Number(this.info.income)) { |
|||
return true |
|||
}else { |
|||
return false |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
getData(){ |
|||
this.$http(this.API.API_USER_CENTER).then(res => { |
|||
this.info = res.data; |
|||
console.log(this.info) |
|||
}) |
|||
}, |
|||
clearAble() { |
|||
this.num = '' |
|||
this.showClean = false |
|||
}, |
|||
submitWidthdraw() { |
|||
if(!this.name) { |
|||
this.$msg('请输入支付宝姓名!') |
|||
return |
|||
} |
|||
if(!this.account) { |
|||
this.$msg('请输入支付宝账号!') |
|||
return |
|||
} |
|||
if(!this.num) { |
|||
this.$msg('请输入提现金额!') |
|||
return |
|||
} |
|||
this.$http(this.API.API_WIDTHDRAW, { |
|||
account: this.account, |
|||
username: this.name, |
|||
extract_price:this.num, |
|||
channel:'alipay', |
|||
token: this.userInfo.token |
|||
}).then(res => { |
|||
this.$msg(res.data) |
|||
this.name = '' |
|||
this.account = '' |
|||
this.num = '' |
|||
}) |
|||
} |
|||
}, |
|||
onLoad(e) { |
|||
this.userInfo = uni.getStorageSync('userinfo') || {}; |
|||
this.getData() |
|||
} |
|||
} |
|||
</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> |
|||
@ -0,0 +1,76 @@ |
|||
<template> |
|||
<view></view> |
|||
</template> |
|||
|
|||
<script> |
|||
/* 路由分发页面仅供跳转页面 */ |
|||
export default { |
|||
onLoad(options){ |
|||
console.log('wai',options) |
|||
if(this.$shared.isValueType(options.scene) != 'undefined'){ |
|||
const scene = decodeURIComponent(options.scene); // 二维码扫码进入 |
|||
const par = this.strToObj(scene); |
|||
this.routeToPage(par); |
|||
console.log('内部',options) |
|||
console.log('====',par) |
|||
}else{ |
|||
this.routeToPage(options); // 普通小程序分享进入 |
|||
} |
|||
}, |
|||
methods: { |
|||
// 路由分发 |
|||
routeToPage(options){ |
|||
if(options.route == 'goods_detail' || options.route == 'goods'){ |
|||
options.page_url = '/pages/goodsDetail/index'; |
|||
this.joinPagePath(options); |
|||
}else if(options.route == 'home'){ |
|||
options.page_url = '/pages/index/index'; |
|||
options.is_tabbar = true; // 是否为tabbar,如果是需要多传入该参数 |
|||
this.joinPagePath(options); |
|||
}else{ |
|||
let obj = { |
|||
page_url: '/pages/index/index', // 啥都不填,默认跳转到首页 |
|||
is_tabbar: true |
|||
}; |
|||
this.joinPagePath(obj); |
|||
} |
|||
}, |
|||
// 拼接地址,并相应跳转 |
|||
joinPagePath(par){ |
|||
let path = par.page_url; |
|||
let options = {}; // 传给页面的参数,用于解决switch不能传参的问题 |
|||
let flag = true; // 标志,用于判断拼接次数,?只能出现一次 |
|||
for(let i in par){ |
|||
if(i != 'route' && i != 'page_url' && i != 'is_tabbar'){ // 跳过route、page_url、is_tabbar |
|||
options[i] = par[i]; |
|||
if(flag){ |
|||
path += '?'+ i +'='+ par[i]; |
|||
flag = false; |
|||
}else{ |
|||
path += '&'+ i +'='+ par[i]; |
|||
} |
|||
} |
|||
} |
|||
console.log(par); |
|||
if(par.is_tabbar){ |
|||
uni.setStorageSync('homePageOptions', options); |
|||
this.$url(par.page_url, {type: 'switch'}); |
|||
}else{ |
|||
this.$url(path, {type: 'redirect'}); |
|||
} |
|||
}, |
|||
// 将key=value&key=value形式的字符串转为对象 |
|||
strToObj(str){ |
|||
let obj = {}; |
|||
if(!str) return obj; |
|||
|
|||
let arr = str.split('&'); |
|||
arr.map(item => { |
|||
let a = item.split('='); |
|||
obj[a[0]] = a[1]; |
|||
}); |
|||
return obj; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
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