feat(shareRegister): 分享注册功能
This commit is contained in:
woody
parent
66558d876f
commit
bbcbd9ef97
13
App.vue
13
App.vue
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
<script>
|
||||
import { setToken } from '@/config/auth.js'
|
||||
export default {
|
||||
|
|
@ -9,7 +8,7 @@ export default {
|
|||
setToken(options.query?.token)
|
||||
}
|
||||
const whiteList = [
|
||||
// 'pages/shareRegist/index',
|
||||
'pages/shareRegist/index',
|
||||
// 'pages/shareRegist/success',
|
||||
'pages/login/index',
|
||||
// 'pages/wechatPay/bfPay/',
|
||||
|
|
@ -31,13 +30,13 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
body{
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
body {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
/*每个页面公共css */
|
||||
@import '@/uni_modules/uview-ui/index.scss';
|
||||
|
||||
::v-deep .uni-picker-container{
|
||||
z-index: 100000!important;
|
||||
::v-deep .uni-picker-container {
|
||||
z-index: 100000 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
const http = uni.$u.http
|
||||
|
||||
// 获取分享码
|
||||
export const getShareCode = params =>
|
||||
http.get('/member/api/share/share-code', { params })
|
||||
|
||||
// 根据短码获取memberCode
|
||||
export const getMemberCode = code =>
|
||||
http.get(`/member/api/share/find-share-code/${code}`)
|
||||
|
||||
// 获取手机验证码
|
||||
export const getPhoneCode = params =>
|
||||
http.get('/member/api/share/share-sms-code', { params })
|
||||
|
||||
// 注册
|
||||
|
||||
export const getRegister = data =>
|
||||
http.post('/member/api/share/share-register', data)
|
||||
|
||||
// 自动登录
|
||||
export const autoLogin = data =>
|
||||
http.post('/retail-member/api/retail-auth/auto-login', data)
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
"js-cookie": "^3.0.5",
|
||||
"qrcodejs2": "0.0.2",
|
||||
"swiper": "^3.4.2",
|
||||
"uqrcodejs": "^4.0.7",
|
||||
"vue-clipboard2": "^0.3.3",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-tree-color": "^2.3.2",
|
||||
|
|
@ -6373,6 +6374,12 @@
|
|||
"yarn": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/uqrcodejs": {
|
||||
"version": "4.0.7",
|
||||
"resolved": "https://registry.npmjs.org/uqrcodejs/-/uqrcodejs-4.0.7.tgz",
|
||||
"integrity": "sha512-84+aZmD2godCVI+93lxE3YUAPNY8zAJvNA7xRS7R7U+q57KzMDepBSfNCwoRUhWOfR6eHFoAOcHRPwsP6ka1cA==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/uri-js": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/uri-js/-/uri-js-4.4.1.tgz",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"js-cookie": "^3.0.5",
|
||||
"qrcodejs2": "0.0.2",
|
||||
"swiper": "^3.4.2",
|
||||
"uqrcodejs": "^4.0.7",
|
||||
"vue-clipboard2": "^0.3.3",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-tree-color": "^2.3.2",
|
||||
|
|
|
|||
|
|
@ -265,6 +265,13 @@
|
|||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/share/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人推广二维码",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shareRegist/success",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -403,6 +403,13 @@ export default {
|
|||
menuKey: 'selfHelp',
|
||||
ifshow: false,
|
||||
},
|
||||
{
|
||||
url: '/pages/mine/share/index',
|
||||
name: '个人推广',
|
||||
imgurl: '../../static/images/promotion.svg',
|
||||
menuKey: 'share',
|
||||
ifshow: true,
|
||||
},
|
||||
{
|
||||
url: '/pages/userSecure/index',
|
||||
name: '账号安全',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,456 @@
|
|||
<template>
|
||||
<view class="share-container">
|
||||
<!-- This is the content that will be shared as an image -->
|
||||
<view class="share-content" :class="{ 'is-loaded': isLoaded }">
|
||||
<view class="title">扫码注册</view>
|
||||
<image
|
||||
class="qr-code"
|
||||
:src="qrCodeImage"
|
||||
mode="aspectFit"
|
||||
v-if="qrCodeImage"
|
||||
></image>
|
||||
<view v-else class="qr-code-placeholder">
|
||||
<view class="loader"></view>
|
||||
</view>
|
||||
<view class="tip">扫描二维码，即可完成操作</view>
|
||||
</view>
|
||||
|
||||
<button
|
||||
class="share-button"
|
||||
:class="{ 'is-loaded': isLoaded }"
|
||||
@click="sharePage"
|
||||
>
|
||||
保存图片并分享
|
||||
</button>
|
||||
|
||||
<!-- Canvas for generating the share image, positioned off-screen -->
|
||||
<canvas
|
||||
canvas-id="shareCanvas"
|
||||
:style="{
|
||||
width: canvasWidth + 'px',
|
||||
height: canvasHeight + 'px',
|
||||
position: 'fixed',
|
||||
left: '200%',
|
||||
}"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getShareCode } from '@/config/share'
|
||||
|
||||
export default {
|
||||
name: 'ShareQRCode',
|
||||
data() {
|
||||
return {
|
||||
qrCodeImage: '',
|
||||
// Set canvas dimensions. It's better to get device screen width for this.
|
||||
canvasWidth: 375,
|
||||
canvasHeight: 550,
|
||||
isLoaded: false,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.handleGetShareCode()
|
||||
// Get screen width to set canvas width dynamically
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
this.canvasWidth = res.windowWidth
|
||||
// Adjust height proportionally or keep it fixed
|
||||
this.canvasHeight = res.windowWidth * 1.4
|
||||
},
|
||||
})
|
||||
},
|
||||
onReady() {
|
||||
// Use a short timeout to ensure the initial render is complete before animation
|
||||
setTimeout(() => {
|
||||
this.isLoaded = true
|
||||
}, 100)
|
||||
},
|
||||
methods: {
|
||||
handleGetShareCode() {
|
||||
// Don't show loading toast, use the placeholder loader instead
|
||||
// uni.showLoading({ title: '加载中...' })
|
||||
getShareCode()
|
||||
.then(res => {
|
||||
// The screenshot shows the base64 string is in data.datStr
|
||||
if (res.code === 200 && res.data && res.data.dataStr) {
|
||||
this.qrCodeImage = 'data:image/png;base64,' + res.data.dataStr
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '获取分享码失败',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('getShareCode error:', err)
|
||||
uni.showToast({
|
||||
title: '网络错误，请稍后再试',
|
||||
icon: 'none',
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
async sharePage() {
|
||||
if (!this.qrCodeImage) {
|
||||
uni.showToast({
|
||||
title: '二维码尚未生成',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading({ title: '正在生成图片...' })
|
||||
|
||||
try {
|
||||
const tempImagePath = await this.base64ToTempFilePath(this.qrCodeImage)
|
||||
if (!tempImagePath) {
|
||||
throw new Error('图片处理失败')
|
||||
}
|
||||
|
||||
const ctx = uni.createCanvasContext('shareCanvas', this)
|
||||
this.drawShareImage(ctx, tempImagePath)
|
||||
|
||||
ctx.draw(false, () => {
|
||||
this.saveCanvasToAlbum()
|
||||
})
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: error.message || '图片生成失败', icon: 'none' })
|
||||
console.error('sharePage error:', error)
|
||||
}
|
||||
},
|
||||
|
||||
drawShareImage(ctx, tempImagePath) {
|
||||
const canvasWidth = this.canvasWidth
|
||||
const canvasHeight = this.canvasHeight
|
||||
|
||||
// White background
|
||||
ctx.fillStyle = '#FFFFFF'
|
||||
ctx.fillRect(0, 0, canvasWidth, canvasHeight)
|
||||
|
||||
// Title
|
||||
ctx.setFontSize(22)
|
||||
ctx.fillStyle = '#1e1e1e'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.fillText('扫码注册', canvasWidth / 2, 70)
|
||||
|
||||
// QR Code Image
|
||||
const qrCodeSize = canvasWidth * 0.7
|
||||
const qrCodeX = (canvasWidth - qrCodeSize) / 2
|
||||
const qrCodeY = 120
|
||||
ctx.drawImage(tempImagePath, qrCodeX, qrCodeY, qrCodeSize, qrCodeSize)
|
||||
|
||||
// Tip text
|
||||
ctx.setFontSize(15)
|
||||
ctx.fillStyle = '#888'
|
||||
ctx.textAlign = 'center'
|
||||
ctx.fillText(
|
||||
'扫描二维码，即可完成操作',
|
||||
canvasWidth / 2,
|
||||
qrCodeY + qrCodeSize + 50
|
||||
)
|
||||
},
|
||||
|
||||
saveCanvasToAlbum() {
|
||||
uni.canvasToTempFilePath(
|
||||
{
|
||||
canvasId: 'shareCanvas',
|
||||
success: res => {
|
||||
// #ifdef H5
|
||||
// For H5, trigger download instead of saving to album
|
||||
const link = document.createElement('a')
|
||||
link.href = res.tempFilePath
|
||||
link.download = `share_qrcode_${Date.now()}.png`
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '图片已开始下载',
|
||||
icon: 'success',
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
// For App and Mini Programs
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '图片已保存到相册',
|
||||
icon: 'success',
|
||||
})
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading()
|
||||
if (
|
||||
err.errMsg &&
|
||||
(err.errMsg.includes('auth deny') ||
|
||||
err.errMsg.includes('auth denied'))
|
||||
) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '需要您授权保存相册',
|
||||
showCancel: false,
|
||||
success: () => {
|
||||
uni.openSetting({
|
||||
success(settingdata) {
|
||||
if (
|
||||
settingdata.authSetting['scope.writePhotosAlbum']
|
||||
) {
|
||||
uni.showToast({
|
||||
title: '授权成功，请重试',
|
||||
icon: 'none',
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '获取权限失败',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
})
|
||||
} else {
|
||||
uni.showToast({ title: '保存失败', icon: 'none' })
|
||||
console.error('saveImageToPhotosAlbum fail:', err)
|
||||
}
|
||||
},
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '图片转换失败', icon: 'none' })
|
||||
console.error('canvasToTempFilePath fail:', err)
|
||||
},
|
||||
},
|
||||
this
|
||||
)
|
||||
},
|
||||
|
||||
base64ToTempFilePath(base64) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// #ifdef H5
|
||||
// For H5, we load the base64 into an Image to ensure it's valid,
|
||||
// but resolve with the base64 string to avoid Uniapp's internal errors
|
||||
// when its functions expect a string path instead of an Image object.
|
||||
const image = new Image()
|
||||
// Resolve CORS issue for QR code from different origin
|
||||
image.crossOrigin = 'Anonymous'
|
||||
image.src = base64
|
||||
image.onload = () => {
|
||||
// Resolve with the string, not the object.
|
||||
resolve(base64)
|
||||
}
|
||||
image.onerror = err => {
|
||||
console.error('Failed to load image for canvas on H5', err)
|
||||
reject(new Error('H5图片加载失败'))
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
// For App and Mini Programs, write to a temp file and return the path.
|
||||
const formattedBase64 = base64.replace(/^data:image\/\w+;base64,/, '')
|
||||
// Use a standard path for user data directory.
|
||||
const filePath = `${uni.env.USER_DATA_PATH}/share_${Date.now()}.png`
|
||||
uni.getFileSystemManager().writeFile({
|
||||
filePath,
|
||||
data: formattedBase64,
|
||||
encoding: 'base64',
|
||||
success: () => {
|
||||
resolve(filePath)
|
||||
},
|
||||
fail: err => {
|
||||
console.error('Failed to write temp file', err)
|
||||
reject(new Error('临时文件写入失败'))
|
||||
},
|
||||
})
|
||||
// #endif
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.share-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx;
|
||||
background: linear-gradient(to bottom, #e0f7fa 0%, #ffffff 100%);
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translateY(0px) scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) scale(1.03);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.share-container::before,
|
||||
.share-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 198, 255, 0.05),
|
||||
rgba(0, 114, 255, 0.1)
|
||||
);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.share-container::before {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
top: -150rpx;
|
||||
left: -150rpx;
|
||||
animation: float 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.share-container::after {
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
bottom: -200rpx;
|
||||
right: -200rpx;
|
||||
animation: float 15s ease-in-out infinite -5s;
|
||||
}
|
||||
|
||||
.share-content {
|
||||
background: radial-gradient(
|
||||
circle at 50% 0%,
|
||||
rgba(220, 235, 255, 0.9),
|
||||
#ffffff 80%
|
||||
);
|
||||
border-radius: 30rpx;
|
||||
padding: 80rpx 50rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-shadow:
|
||||
0 16rpx 48rpx rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 60rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
transform: translateY(40rpx);
|
||||
transition:
|
||||
transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
|
||||
opacity 0.6s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.share-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6rpx;
|
||||
background-image: linear-gradient(90deg, #00c6ff, #0072ff);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.share-content.is-loaded {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 44rpx;
|
||||
font-weight: 500;
|
||||
color: #1e1e1e;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
width: 450rpx;
|
||||
height: 450rpx;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.qr-code-placeholder {
|
||||
width: 450rpx;
|
||||
height: 450rpx;
|
||||
background-color: #f0f2f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border: 8rpx solid rgba(0, 0, 0, 0.1);
|
||||
border-left-color: #0072ff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 30rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.share-button {
|
||||
margin-top: 0;
|
||||
width: 90%;
|
||||
background-image: linear-gradient(90deg, #0072ff, #00c6ff);
|
||||
color: white;
|
||||
border-radius: 50rpx;
|
||||
font-size: 34rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 114, 255, 0.25);
|
||||
border: none;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
transform: translateY(40rpx);
|
||||
transition:
|
||||
transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.1s,
|
||||
opacity 0.6s ease 0.1s;
|
||||
}
|
||||
|
||||
.share-button.is-loaded {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.share-button:active {
|
||||
transform: translateY(2rpx);
|
||||
box-shadow: 0 6rpx 12rpx rgba(0, 114, 255, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,55 +10,48 @@
|
|||
<!-- <view class="index_header">
|
||||
<view>注册</view>
|
||||
</view> -->
|
||||
<view class="title">欢迎注册</view>
|
||||
<!-- <view class="tit" v-if="!pkCountry">{{ '嗨粉扫天下' }}</view> -->
|
||||
<!-- 海粉 -->
|
||||
<view class="formed1">
|
||||
<u-form :model="form" labelWidth="80px" ref="uForm" :rules="rules">
|
||||
<u-form-item label="" prop="memberCode">
|
||||
<u-input v-model="form.memberCode" type="number" disabled>
|
||||
<u--text
|
||||
:text="howHeader"
|
||||
slot="prefix"
|
||||
margin="0 3px 0 0"
|
||||
type="tips"
|
||||
></u--text>
|
||||
</u-input>
|
||||
<u-form :model="form" labelWidth="90px" ref="uForm" :rules="rules">
|
||||
<u-form-item label="推荐编号" prop="parentCode">
|
||||
<u-input v-model="form.parentCode" disabled> </u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label="" prop="memberName">
|
||||
<u-form-item label="会员姓名" prop="memberName">
|
||||
<u-input
|
||||
v-model="form.memberName"
|
||||
:placeholder="'请输入会员姓名'"
|
||||
/>
|
||||
</u-form-item>
|
||||
<u-form-item label="" prop="phone">
|
||||
<u-form-item label="联系方式" prop="phone">
|
||||
<u-input
|
||||
v-model="form.phone"
|
||||
@blur="setMemberCode"
|
||||
:placeholder="'请输入联系方式'"
|
||||
type="number"
|
||||
maxlength="20"
|
||||
/>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="" prop="loginPassword">
|
||||
<u-form-item label="登录密码" prop="loginPwd">
|
||||
<u-input
|
||||
:password="isPwd"
|
||||
:placeholder="'请输入登录密码'"
|
||||
v-model="form.loginPassword"
|
||||
v-model="form.loginPwd"
|
||||
>
|
||||
<template slot="suffix">
|
||||
<template #suffix>
|
||||
<u-icon name="eye" @tap="isPwd = !isPwd" v-if="!isPwd"></u-icon>
|
||||
<u-icon name="eye-off" @tap="isPwd = !isPwd" v-else></u-icon>
|
||||
</template>
|
||||
</u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label="" prop="payPassword">
|
||||
<u-form-item label="支付密码" prop="payPwd">
|
||||
<u-input
|
||||
:password="isPwd2"
|
||||
:placeholder="'请输入支付密码'"
|
||||
v-model="form.payPassword"
|
||||
v-model="form.payPwd"
|
||||
>
|
||||
<template slot="suffix">
|
||||
<template #suffix>
|
||||
<u-icon
|
||||
name="eye"
|
||||
@tap="isPwd2 = !isPwd2"
|
||||
|
|
@ -68,9 +61,9 @@
|
|||
</template>
|
||||
</u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label="" prop="code">
|
||||
<u-input v-model="form.code" :placeholder="'请输入验证码'">
|
||||
<template slot="suffix">
|
||||
<u-form-item label="验证码" prop="smsCode">
|
||||
<u-input v-model="form.smsCode" :placeholder="'请输入验证码'">
|
||||
<template #suffix>
|
||||
<view class="getCode" @tap="getVilCode">{{ getCode }}</view>
|
||||
</template>
|
||||
</u-input>
|
||||
|
|
@ -137,10 +130,10 @@
|
|||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item label=""
|
||||
prop="loginPassword">
|
||||
prop="loginPwd">
|
||||
<u-input :password="isPwd1"
|
||||
:placeholder="'请输入登录密码'"
|
||||
v-model="form.loginPassword">
|
||||
v-model="form.loginPwd">
|
||||
<template slot="suffix">
|
||||
<u-icon name="eye"
|
||||
@tap="isPwd1=!isPwd1"
|
||||
|
|
@ -152,10 +145,10 @@
|
|||
</u-input>
|
||||
</u-form-item>
|
||||
<u-form-item label=""
|
||||
prop="payPassword">
|
||||
prop="payPwd">
|
||||
<u-input :password="isPwd2"
|
||||
:placeholder="'请输入支付密码'"
|
||||
v-model="form.payPassword">
|
||||
v-model="form.payPwd">
|
||||
<template slot="suffix">
|
||||
<u-icon name="eye"
|
||||
@tap="isPwd2=!isPwd2"
|
||||
|
|
@ -183,12 +176,50 @@
|
|||
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="mask" v-if="isTrue"> </view>
|
||||
<u-modal
|
||||
:show="showSuccessModal"
|
||||
title="注册成功"
|
||||
:show-cancel-button="true"
|
||||
cancel-text="复制"
|
||||
confirm-text="自动登录"
|
||||
@confirm="onModalConfirm"
|
||||
@cancel="onModalCancel"
|
||||
@close="showSuccessModal = false"
|
||||
>
|
||||
<view class="slot-content" v-if="successData">
|
||||
<view class="success-item">
|
||||
<text class="item-label">会员编号:</text>
|
||||
<text class="item-value">{{ successData.memberCode }}</text>
|
||||
</view>
|
||||
<view class="success-item">
|
||||
<text class="item-label">会员姓名:</text>
|
||||
<text class="item-value">{{ successData.memberName }}</text>
|
||||
</view>
|
||||
<view class="success-item">
|
||||
<text class="item-label">联系方式:</text>
|
||||
<text class="item-value">{{ successData.phone }}</text>
|
||||
</view>
|
||||
<view class="success-item">
|
||||
<text class="item-label">登录密码:</text>
|
||||
<text class="item-value">{{ successData.loginPassword }}</text>
|
||||
</view>
|
||||
<view class="success-item">
|
||||
<text class="item-label">支付密码:</text>
|
||||
<text class="item-value">{{ successData.payPassword }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as api from '@/config/goods'
|
||||
import {
|
||||
getMemberCode,
|
||||
getPhoneCode,
|
||||
getRegister,
|
||||
autoLogin,
|
||||
} from '@/config/share'
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
|
|
@ -198,6 +229,11 @@ export default {
|
|||
pkParent: '',
|
||||
form: {
|
||||
memberName: '',
|
||||
smsCode: '',
|
||||
loginPwd: '',
|
||||
payPwd: '',
|
||||
parentCode: '',
|
||||
phone: '',
|
||||
},
|
||||
isLoading: false,
|
||||
getCode: '获取验证码',
|
||||
|
|
@ -210,11 +246,13 @@ export default {
|
|||
isPwd: true,
|
||||
isPwd1: true,
|
||||
isPwd2: true,
|
||||
showSuccessModal: false,
|
||||
successData: null,
|
||||
rules: {
|
||||
memberCode: [
|
||||
parentCode: [
|
||||
{
|
||||
required: true,
|
||||
asyncValidator: this.memberCodeRule,
|
||||
message: '请输入推荐编号',
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
|
|
@ -232,21 +270,21 @@ export default {
|
|||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
code: [
|
||||
smsCode: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
loginPassword: [
|
||||
loginPwd: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入登录密码',
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
payPassword: [
|
||||
payPwd: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入支付密码',
|
||||
|
|
@ -276,14 +314,14 @@ export default {
|
|||
trigger: ['change', 'blur'],
|
||||
},
|
||||
],
|
||||
loginPassword: [
|
||||
loginPwd: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入登录密码',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
],
|
||||
payPassword: [
|
||||
payPwd: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入支付密码',
|
||||
|
|
@ -299,7 +337,7 @@ export default {
|
|||
this.pkCountry = options.country || ''
|
||||
this.getGenerate()
|
||||
if (this.pkCountry) {
|
||||
this.getCountry()
|
||||
// this.getCountry()
|
||||
this.form.pkCountry = this.pkCountry
|
||||
uni.setStorageSync('pkCountry', this.pkCountry)
|
||||
uni.redirectTo({
|
||||
|
|
@ -315,10 +353,6 @@ export default {
|
|||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
setMemberCode() {
|
||||
// this.form.memberCode = this.form.phone
|
||||
this.$set(this.form, 'memberCode', this.form.phone)
|
||||
},
|
||||
selCountry() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
|
|
@ -348,12 +382,9 @@ export default {
|
|||
}
|
||||
},
|
||||
getHeader() {
|
||||
api.checkShare().then(res => {
|
||||
if (res.code != 200) {
|
||||
this.isTrue = true
|
||||
} else {
|
||||
this.isTrue = false
|
||||
}
|
||||
getMemberCode(this.pkParent).then(res => {
|
||||
this.$set(this.form, 'parentCode', res.data)
|
||||
console.log(this.form)
|
||||
})
|
||||
// api.prefix(this.pkParent).then((res) => {
|
||||
// this.howHeader = res.msg
|
||||
|
|
@ -365,24 +396,81 @@ export default {
|
|||
})
|
||||
},
|
||||
toLogin() {
|
||||
this.$refs.uForm.validate().then(res => {
|
||||
this.$refs.uForm.validate().then(() => {
|
||||
this.isLoading = true
|
||||
api
|
||||
.regShareMember(
|
||||
Object.assign({}, this.form, { parent: this.pkParent })
|
||||
)
|
||||
getRegister(Object.assign({}, this.form, { parentCode: this.pkParent }))
|
||||
.then(res => {
|
||||
this.isLoading = false
|
||||
if (res.code == 200) {
|
||||
uni.redirectTo({
|
||||
url:
|
||||
'/pages/shareRegist/success?allData=' +
|
||||
JSON.stringify(res.data),
|
||||
this.successData = res.data
|
||||
this.showSuccessModal = true
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg || '注册失败',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.isLoading = false
|
||||
uni.showToast({
|
||||
title: '注册请求失败',
|
||||
icon: 'none',
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
onModalConfirm() {
|
||||
if (this.successData) {
|
||||
this.handleAutoLogin(this.successData)
|
||||
}
|
||||
},
|
||||
onModalCancel() {
|
||||
if (this.successData) {
|
||||
const modalContent = `会员编号: ${this.successData.memberCode}\n会员姓名: ${this.successData.memberName}\n联系方式: ${this.successData.phone}\n登录密码: ${this.successData.loginPassword}\n支付密码: ${this.successData.payPassword}`
|
||||
uni.setClipboardData({
|
||||
data: modalContent,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success',
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
},
|
||||
handleAutoLogin(loginData) {
|
||||
autoLogin({
|
||||
username: loginData.memberCode,
|
||||
password: loginData.loginPassword,
|
||||
uuid: loginData.uuid,
|
||||
})
|
||||
.then(loginRes => {
|
||||
if (loginRes.code === 200) {
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
icon: 'success',
|
||||
duration: 1500,
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index',
|
||||
})
|
||||
}, 1500)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: loginRes.msg || '自动登录失败',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
uni.showToast({
|
||||
title: '自动登录请求失败',
|
||||
icon: 'none',
|
||||
})
|
||||
})
|
||||
},
|
||||
hiLogin() {
|
||||
this.$refs.uForm1.validate().then(res => {
|
||||
this.isLoading = true
|
||||
|
|
@ -426,10 +514,10 @@ export default {
|
|||
// 获取验证码
|
||||
getVilCode() {
|
||||
this.startTime()
|
||||
api
|
||||
.verification({
|
||||
phone: this.form.phone,
|
||||
})
|
||||
getPhoneCode({
|
||||
phone: this.form.phone,
|
||||
parentCode: this.pkParent,
|
||||
})
|
||||
.then(res => {})
|
||||
.catch(err => {
|
||||
this.beginTime = 0
|
||||
|
|
@ -458,11 +546,11 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.content1 {
|
||||
background-color: #fff;
|
||||
// background-image: url('@/static/images/haiRgeiest1.jpg');
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background: linear-gradient(-45deg, #005bac, #0077c2, #0099e0, #00bfff);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 15s ease infinite;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
.content {
|
||||
background-image: url('@/static/images/huan.jpg');
|
||||
|
|
@ -472,14 +560,13 @@ export default {
|
|||
background-position: center;
|
||||
height: 100vh;
|
||||
}
|
||||
.tit {
|
||||
font-size: 48px;
|
||||
font-family: PangMenZhengDao-Regular, PangMenZhengDao;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
.title {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
padding-top: 80px;
|
||||
margin-bottom: 20px;
|
||||
padding-top: 120rpx;
|
||||
padding-bottom: 80rpx;
|
||||
}
|
||||
.index_header {
|
||||
background: #f9f9f9;
|
||||
|
|
@ -498,8 +585,10 @@ export default {
|
|||
padding: 0 120rpx;
|
||||
}
|
||||
.formed1 {
|
||||
padding: 0 120rpx;
|
||||
padding-top: 550rpx;
|
||||
margin: 0 40rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.getCode {
|
||||
font-size: 10px;
|
||||
|
|
@ -533,4 +622,37 @@ export default {
|
|||
height: 100vh;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.slot-content {
|
||||
padding: 30rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.success-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
.item-label {
|
||||
color: #606266;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.item-value {
|
||||
color: #303133;
|
||||
word-break: break-all;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749519102102" class="icon" viewBox="128 128 768 768" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4253" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><path d="M435.456 128h-256a51.2 51.2 0 0 0-51.2 51.2v256a51.2 51.2 0 0 0 51.2 51.2h256a51.2 51.2 0 0 0 51.2-51.2v-256a51.2 51.2 0 0 0-51.2-51.2zM435.456 537.6h-256a51.2 51.2 0 0 0-51.2 51.2v256a51.2 51.2 0 0 0 51.2 51.2h256a51.2 51.2 0 0 0 51.2-51.2v-256a51.2 51.2 0 0 0-51.2-51.2zM844.544 128h-256a51.2 51.2 0 0 0-51.2 51.2v256a51.2 51.2 0 0 0 51.2 51.2h256a51.2 51.2 0 0 0 51.2-51.2v-256a51.2 51.2 0 0 0-51.2-51.2zM591.9744 610.9696a24.4736 24.4736 0 0 0-24.5248 24.5248v224.0512a24.576 24.576 0 0 0 49.0496 0v-224.0512a24.576 24.576 0 0 0-24.5248-24.5248zM716.544 680.5504a24.576 24.576 0 0 0-24.5248 24.5248v154.4704a24.576 24.576 0 0 0 49.0496 0v-154.4704a24.576 24.576 0 0 0-24.5248-24.5248zM842.3936 547.0208a24.576 24.576 0 0 0-24.5248 24.5248v288a24.576 24.576 0 0 0 49.0496 0v-288a24.576 24.576 0 0 0-24.5248-24.5248z" p-id="4254" fill="#f52a10"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in New Issue