angelo
/
web-store-retail-h5
forked from angelo/web-retail-h5
3
0
Fork 0
Code Pull Requests Activity

feat(shareRegiest): 分享注册逻辑迁移

This commit is contained in:
woody 2025-09-01 18:00:47 +08:00
parent 7563c45987
commit f6387859cf
11 changed files with 1920 additions and 1171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
App.vue
View File

@ -14,9 +14,9 @@ export default {
'pages/login/index',
// 'pages/wechatPay/bfPay/',
// 'pages/wechatPay/hfPay/',
// 'pages/shareArea/hiList',
// 'pages/shareArea/hiOrder',
// 'pages/pay/hiPay'
'pages/shareArea/hiList',
'pages/shareArea/hiOrder',
'pages/pay/hiPay',
]
if (whiteList.indexOf(options.path) !== -1) return
this.$store.dispatch('GetInfo')

311
components/share/DefaultSharePage.vue Normal file
View File

@ -0,0 +1,311 @@
<template>
<view class="default-share-page">
<!-- 背景图片，替代CSS background -->
<img
class="share-bg-image"
src="/static/images/share-bg.jpg"
mode="scaleToFill"
crossorigin="anonymous"
@load="onBackgroundImageLoad"
@error="onBackgroundImageError"
/>
<view class="share-wrapper">
<view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
<!-- 二维码样式区域 - 用户自定义样式位置 -->
<view class="qr-code-outer">
<img
class="qr-code"
:src="qrCodeImage"
mode="aspectFit"
v-if="qrCodeImage"
/>
<view v-else class="qr-code-placeholder">
<view class="loader"></view>
</view>
</view>
<!-- 会员编号样式区域 - 用户自定义样式位置 -->
<text
class="member-code-text"
style="
font-size: 30rpx;
color: #fff;
font-weight: bold;
margin-top: 20rpx;
"
>{{ desensitization(userInfo.memberCode) }}</text
>
</view>
</view>
</view>
</template>
<script>
import html2canvas from 'html2canvas'
export default {
name: 'DefaultSharePage',
props: {
qrCodeImage: {
type: String,
default: '',
},
userInfo: {
type: Object,
default: () => ({}),
},
isWechat: {
type: Boolean,
default: false,
},
isLoaded: {
type: Boolean,
default: false,
},
},
data() {
return {
backgroundImageLoaded: false,
shareButtonShow: true,
}
},
methods: {
desensitization(str) {
if (!str) return ''
if (str.length <= 8) return str.slice(0, 4) + '****'
const len = str.length - 6
const placeholder = '*'.repeat(len)
return str.slice(0, 4) + placeholder + str.slice(-2)
},
// 背景图片加载成功
onBackgroundImageLoad() {
this.backgroundImageLoaded = true
console.log('默认场景背景图片加载成功')
},
// 背景图片加载失败
onBackgroundImageError(e) {
console.error('默认场景背景图片加载失败:', e)
},
async sharePage() {
if (!this.qrCodeImage) {
uni.showToast({
title: '二维码尚未生成',
icon: 'none',
})
return
}
uni.showLoading({ title: '加载中...' })
try {
this.shareButtonShow = false
await this.$nextTick()
await this.capturePageWithHtml2Canvas()
} catch (error) {
uni.hideLoading()
uni.showToast({ title: '图片生成失败，请稍后重试', icon: 'none' })
console.error('sharePage error:', error)
} finally {
// 恢复按钮显示
this.shareButtonShow = true
}
},
// 使用html2canvas截取整个页面
async capturePageWithHtml2Canvas() {
console.log('开始使用html2canvas截取页面')
return new Promise((resolve, reject) => {
// 确保所有图片都已加载完成
const waitForImages = () => {
if (!this.backgroundImageLoaded || !this.qrCodeImage) {
setTimeout(waitForImages, 100)
return
}
// 额外等待确保渲染完成
setTimeout(() => {
const element = this.$el
if (!element) {
reject(new Error('找不到组件容器'))
return
}
console.log(
'开始html2canvas截取，容器尺寸:',
element.offsetWidth,
'x',
element.offsetHeight
)
html2canvas(element, {
useCORS: true,
allowTaint: true,
backgroundColor: null,
scale: 2,
dpi: 400,
logging: true,
width: element.offsetWidth,
height: element.offsetHeight,
windowWidth: element.offsetWidth,
windowHeight: element.offsetHeight,
scrollX: 0,
scrollY: 0,
x: 0,
y: 0,
})
.then(canvas => {
const dataUrl = canvas.toDataURL('image/jpeg', 1)
this.$emit('share-generated', dataUrl)
resolve()
})
.catch(err => {
console.error('html2canvas截取失败:', err)
reject(err)
})
}, 1000)
}
// 开始等待图片加载
waitForImages()
})
},
},
}
</script>
<style lang="scss" scoped>
.default-share-page {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* 背景图片样式 */
.share-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.share-wrapper {
position: absolute;
z-index: 2;
top: 320rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.portal-frame {
padding: 32rpx;
width: 520rpx;
border-radius: 40rpx;
display: flex;
box-sizing: border-box;
flex-direction: column;
align-items: center;
margin: 0 auto;
opacity: 0;
transform: translateY(20rpx);
transition: all 0.3s ease;
}
.portal-frame.is-loaded {
opacity: 1;
transform: translateY(0);
}
/* 二维码样式区域 - 用户自定义样式位置 */
.qr-code-outer {
width: 300rpx;
height: 300rpx;
background: rgba(255, 255, 255, 0.98);
border-radius: 20rpx;
box-shadow: 0px 8rpx 20rpx rgba(50, 50, 90, 0.06);
border: 1px solid #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
padding: 12rpx;
box-sizing: border-box;
}
.qr-code,
.qr-code-placeholder {
width: 100%;
height: 100%;
}
.qr-code {
border-radius: 16rpx;
}
.qr-code-placeholder {
display: flex;
align-items: center;
justify-content: center;
}
.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);
}
}
/* 会员编号样式区域 - 用户自定义样式位置 */
.member-code-text {
/* 用户可以在这里自定义会员编号的样式 */
}
/* 下载按钮样式 */
.share-button {
margin-top: 28rpx;
width: 280rpx;
height: 72rpx;
line-height: 72rpx;
color: #fff;
border-radius: 36rpx;
font-size: 26rpx;
font-weight: 500;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 5rpx 12rpx 0 rgba(102, 126, 234, 0.2);
border: none;
padding: 0;
text-align: center;
transition: all 0.3s ease;
letter-spacing: 1rpx;
}
button.share-button {
padding: 0;
line-height: 72rpx;
border: none;
}
.share-button:active {
transform: translateY(1rpx);
box-shadow: 0 4rpx 10rpx rgba(102, 126, 234, 0.4);
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}
</style>

501
components/share/SpecialSharePage.vue Normal file
View File

@ -0,0 +1,501 @@
<template>
<view ref="specialSharePage" class="special-share-page">
<!-- 特殊场景背景图片 -->
<image
class="share-bg-image"
:src="specialBackgroundImage"
mode="scaleToFill"
crossorigin="anonymous"
@load="onBackgroundImageLoad"
@error="onBackgroundImageError"
v-if="specialBackgroundImage"
></image>
<!-- 加载状态 -->
<view
class="loading-container"
v-if="!specialBackgroundImage || isLoadingBackground"
>
<view class="loader"></view>
<text class="loading-text">{{
isLoadingBackground ? '正在获取背景图片...' : '正在加载分享背景...'
}}</text>
</view>
<view
class="share-wrapper"
v-if="specialBackgroundImage && !isLoadingBackground"
>
<view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
<view class="qr-code-outer special-qr-style">
<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>
<text
class="member-code-text special-member-code-style"
style="
font-size: 30rpx;
color: #005bac;
font-weight: bold;
margin-top: 20rpx;
"
>{{ desensitization(userInfo.memberCode) }}</text
>
</view>
</view>
</view>
</template>
<script>
import { snapdom } from '@zumer/snapdom'
import html2canvas from 'html2canvas'
import { getSharedImg } from '@/config/login'
export default {
name: 'SpecialSharePage',
props: {
qrCodeImage: {
type: String,
default: '',
},
userInfo: {
type: Object,
default: () => ({}),
},
isWechat: {
type: Boolean,
default: false,
},
isLoaded: {
type: Boolean,
default: false,
},
// 移除specialBackgroundImage prop，改为接口获取
// 调试用：跳过图片验证
skipImageVerification: {
type: Boolean,
default: false,
},
},
data() {
return {
backgroundImageLoaded: false,
imageLoadRetryCount: 0,
maxRetryCount: 3,
specialBackgroundImage: '', // 存储接口返回的背景图
isLoadingBackground: false, // 是否正在加载背景图
}
},
created() {
this.getBackgroundImage()
},
methods: {
desensitization(str) {
if (!str) return ''
if (str.length <= 8) return str.slice(0, 4) + '****'
const len = str.length - 6
const placeholder = '*'.repeat(len)
return str.slice(0, 4) + placeholder + str.slice(-2)
},
// 背景图片加载成功
onBackgroundImageLoad() {
this.backgroundImageLoaded = true
console.log('特殊场景背景图片加载成功')
},
// 背景图片加载失败
onBackgroundImageError(e) {
console.error('特殊场景背景图片加载失败:', e)
this.backgroundImageLoaded = false
this.imageLoadRetryCount++
// 如果重试次数未达到上限，可以通知父组件重试
if (this.imageLoadRetryCount < this.maxRetryCount) {
console.log(
`图片加载失败，重试中 (${this.imageLoadRetryCount}/${this.maxRetryCount})`
)
this.$emit('background-image-retry', this.imageLoadRetryCount)
} else {
this.$emit('background-image-error', e)
}
},
// 获取特殊场景背景图片
async getBackgroundImage() {
if (this.skipImageVerification) {
this.specialBackgroundImage = '' // 跳过验证时清空背景图
this.backgroundImageLoaded = true
return
}
if (this.specialBackgroundImage) {
// 如果背景图已加载，则直接使用
this.backgroundImageLoaded = true
return
}
this.isLoadingBackground = true
try {
const result = await getSharedImg()
if (result && result.code === 200 && result.data) {
this.specialBackgroundImage =
'data:image/png;base64,' + result.data.base64
this.backgroundImageLoaded = true
} else {
this.backgroundImageLoaded = false
this.imageLoadRetryCount++
}
} catch (error) {
this.backgroundImageLoaded = false
this.imageLoadRetryCount++
if (this.imageLoadRetryCount < this.maxRetryCount) {
this.$emit('background-image-retry', this.imageLoadRetryCount)
} else {
this.$emit('background-image-error', error)
}
} finally {
this.isLoadingBackground = false
}
return this.specialBackgroundImage
},
async generateShareImage() {
// await this.getBackgroundImage()
try {
this.$nextTick(() => {
const info = uni.getSystemInfoSync()
console.log(info.platform, '.....info')
if (info.platform === 'ios') {
console.log('iOS detected, using html2canvas for capturing.')
this.capturePageWithHtml2Canvas()
} else {
console.log('Non-iOS detected, using snapdom for capturing.')
this.capturePageWithSnapDom()
}
})
} catch (error) {
uni.hideLoading()
uni.showToast({ title: '图片生成失败，请稍后重试', icon: 'none' })
}
},
// 新增：使用html2canvas截取整个页面 (For iOS)
async capturePageWithHtml2Canvas() {
return new Promise(async (resolve, reject) => {
// 确保所有图片都已加载完成
const waitForImages = async () => {
// 检查是否正在加载背景图片
if (this.isLoadingBackground) {
console.log('等待背景图片接口调用完成...')
setTimeout(waitForImages, 100)
return
}
// 检查背景图片是否加载完成
if (!this.backgroundImageLoaded) {
console.log('等待背景图片加载完成...')
setTimeout(waitForImages, 100)
return
}
// 检查二维码是否存在
if (!this.qrCodeImage) {
console.log('等待二维码生成...')
setTimeout(waitForImages, 100)
return
}
// 检查特殊背景图片参数是否存在
if (!this.specialBackgroundImage) {
console.log('等待特殊背景图片参数...')
setTimeout(waitForImages, 100)
return
}
console.log('所有图片准备就绪，开始使用html2canvas截图...')
// 等待确保渲染完成
setTimeout(() => {
const element = this.$el
if (!element) {
uni.hideLoading()
reject(new Error('找不到组件容器'))
return
}
html2canvas(element, {
useCORS: true,
allowTaint: true,
backgroundColor: null,
scale: 2, // 提高清晰度
dpi: 300,
width: element.offsetWidth,
height: element.offsetHeight,
})
.then(canvas => {
const dataUrl = canvas.toDataURL('image/jpeg', 1.0)
uni.hideLoading()
// this.handleShareGenerated(dataUrl)
this.$emit('share-generated', dataUrl)
resolve()
})
.catch(err => {
uni.hideLoading()
console.error('html2canvas截取失败:', err)
uni.showToast({
title: '图片生成失败，请稍后重试',
icon: 'none',
})
reject(err)
})
}, 1000)
}
// 开始等待图片加载
waitForImages()
})
},
// 使用snapDOM截取整个页面
async capturePageWithSnapDom() {
return new Promise(async (resolve, reject) => {
// 确保所有图片都已加载完成
const waitForImages = async () => {
// 检查是否正在加载背景图片
if (this.isLoadingBackground) {
console.log('等待背景图片接口调用完成...')
setTimeout(waitForImages, 100)
return
}
// 检查背景图片是否加载完成
if (!this.backgroundImageLoaded) {
console.log('等待背景图片加载完成...')
setTimeout(waitForImages, 100)
return
}
// 检查二维码是否存在
if (!this.qrCodeImage) {
console.log('等待二维码生成...')
setTimeout(waitForImages, 100)
return
}
// 检查特殊背景图片参数是否存在
if (!this.specialBackgroundImage) {
console.log('等待特殊背景图片参数...')
setTimeout(waitForImages, 100)
return
}
console.log('所有图片准备就绪，开始截图...')
// 等待确保渲染完成
setTimeout(async () => {
const element = this.$el
if (!element) {
reject(new Error('找不到组件容器'))
return
}
try {
// 获取元素的所有可能尺寸
const rect = element.getBoundingClientRect()
const offsetWidth = element.offsetWidth
const offsetHeight = element.offsetHeight
const scrollWidth = element.scrollWidth
const scrollHeight = element.scrollHeight
const clientWidth = element.clientWidth
const clientHeight = element.clientHeight
// 计算实际需要的尺寸（取最大值确保完整）
const elementWidth = Math.max(
offsetWidth,
scrollWidth,
clientWidth,
rect.width
)
const elementHeight = Math.max(
offsetHeight,
scrollHeight,
clientHeight,
rect.height
)
setTimeout(async () => {
try {
const result = await snapdom(element, {
width: elementWidth,
height: elementHeight,
quality: 1,
compress: false,
// useProxy: true,
})
const canvas = await result.toCanvas()
const dataUrl = canvas.toDataURL('image/jpeg')
uni.hideLoading()
// this.handleShareGenerated(dataUrl)
this.$emit('share-generated', dataUrl)
resolve()
} catch (err) {
uni.hideLoading()
console.error('snapDOM截取失败:', err)
uni.showToast({
title: '图片生成失败，请稍后重试',
icon: 'none',
})
reject(err)
}
}, 500)
} catch (err) {
uni.hideLoading()
console.error('snapDOM初始化失败:', err)
uni.showToast({
title: '图片生成失败，请稍后重试',
icon: 'none',
})
reject(err)
}
}, 1000)
}
// 开始等待图片加载
waitForImages()
})
},
},
}
</script>
<style lang="scss" scoped>
.special-share-page {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* 背景图片样式 */
.share-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* 加载状态 */
.loading-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 2;
}
.loading-text {
margin-top: 20rpx;
font-size: 28rpx;
color: #666;
}
.share-wrapper {
position: absolute;
z-index: 2;
bottom: 22%;
display: flex;
flex-direction: column;
align-items: center;
}
.portal-frame {
padding: 32rpx;
width: 520rpx;
border-radius: 40rpx;
display: flex;
box-sizing: border-box;
flex-direction: column;
align-items: center;
margin: 0 auto;
opacity: 0;
transform: translateY(20rpx);
transition: all 0.3s ease;
}
.portal-frame.is-loaded {
opacity: 1;
transform: translateY(0);
}
/* 特殊场景二维码样式区域 - 用户自定义样式位置 */
.qr-code-outer {
width: 400rpx;
height: 400rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 12rpx;
box-sizing: border-box;
}
.qr-code,
.qr-code-placeholder {
width: 100%;
height: 100%;
}
.qr-code {
border-radius: 16rpx;
}
.qr-code-placeholder {
display: flex;
align-items: center;
justify-content: center;
}
.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);
}
}
/* 特殊场景会员编号样式区域 - 用户自定义样式位置 */
.member-code-text {
/* 用户可以在这里自定义会员编号的样式 */
}
/* 特殊场景下的会员编号样式 */
.special-member-code-style {
/* 用户可以在这里自定义特殊场景下的会员编号样式 */
/* 例如：不同的位置、颜色、字体等 */
}
</style>

2
config/goods.js
View File

@ -110,7 +110,7 @@ export const waresinfo = params =>
//hi粉确认订单
export const fansConfirm = params =>
http.post('/sale/api/order/fans-confirm-order', params)
http.post('/sale/api/retail-order/fans-confirm-order', params)
//购物车注册下单校验弹框
export const energyShop = params =>
http.post('/sale/api/wares/query-energy-silo', params)

12
config/login.js
View File

@ -6,9 +6,12 @@ export const captchaImage = params => http.get('/code', { params })
export const login = params =>
http.post('/retail-member/api/retail-auth/login', params)
export const autoLogin = params =>
http.post('/member/api/retail-auth/auto-login', params)
//用户信息
export const getInfo = params =>
http.get('/retail-member/api/retail-member/get-info', { params })
http.get('/member/api/retail-member/get-info', { params })
//获取个人资料
export const getData = params =>
@ -99,12 +102,9 @@ export const indexPopScreen = params =>
export const getMenuList = params =>
http.get('/system/api/menu/list', { params })
//海粉默认登录（H5扫码使用）
export const autoLogin = params =>
http.post('/retail-member/auth/api/auto-login', params)
//海粉商品
export const queryWares = params =>
http.post('/sale/api/wares/query-spe-wares-copy', params)
http.get('/sale/api/wares/list-wares-share', { params })
//保存礼品地址
export const saveGiftAddress = params =>
http.post('/retail-member/api/retail-member-gift/update-gift', params)
@ -117,7 +117,7 @@ export const getUserAwards = params =>
//获取安置人编号
export const fansConvertCode = params =>
http.get('/retail-member/api/retail-member/fans-convert-code/' + params)
http.get('/member/api/member/fans-convert-code/' + params)
//获取荣誉奖衔
export const getIndexAwards = params =>

2
config/request.js
View File

@ -19,7 +19,7 @@ module.exports = vm => {
//#ifdef DEV_SERVER
console.log('DEV_SERVER')
config.baseURL = 'https://t-bl.beida777.com/prod-api'
config.baseURL = 'http://192.168.0.86:8080'
//#endif
//#ifdef QA_SERVER

453
pages/mine/share/index.vue
View File

@ -4,77 +4,28 @@
style="display: flex; flex-direction: column; height: 100vh"
>
<view id="shareContainer" class="share-container">
<!-- 微信环境：只有在未生成分享图时才显示原始内容 -->
<template v-if="!isWechat || (isWechat && !generatedImageUrl)">
<!-- 背景图片，替代CSS background -->
<img
class="share-bg-image"
src="/static/images/share-bg.jpg"
mode="scaleToFill"
crossorigin="anonymous"
@load="onBackgroundImageLoad"
@error="onBackgroundImageError"
<!-- 默认场景 -->
<DefaultSharePage
:qrCodeImage="qrCodeImage"
:userInfo="userInfo"
:isWechat="isWechat"
:isLoaded="isLoaded"
@share-generated="handleShareGenerated"
ref="defaultSharePage"
/>
<view class="share-wrapper">
<view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
<view class="qr-code-outer">
<img
class="qr-code"
:src="qrCodeImage"
mode="aspectFit"
v-if="qrCodeImage"
/>
<view v-else class="qr-code-placeholder">
<view class="loader"></view>
</view>
</view>
<div
style="
font-size: 18rpx;
color: #fff;
font-weight: bold;
margin-top: 10rpx;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
"
>
{{ desensitization(userInfo.memberCode) }}
</div>
<div v-if="!isWechat" class="share-button" @click="sharePage">
保存图片并分享
</div>
<img
v-if="isWechat"
class="share-btn"
style="margin-top: 30rpx"
src="/static/images/share-btn.svg"
mode="scaleToFill"
/>
</view>
<!-- <image
class="share-bg-logo"
src="/static/images/share-logo.png"
mode="scaleToFill"
></image> -->
</view>
</template>
<!-- 微信环境全屏图片显示 -->
<view
class="wechat-fullscreen-overlay"
v-show="isWechat && generatedImageUrl"
@click="closeFullscreenImage"
v-show="(isWechat || userInfo.sharePosterImage) && generatedImageUrl"
>
<image
<img
class="fullscreen-image"
:src="generatedImageUrl"
mode="scaleToFill"
@load="onGeneratedImageLoad"
@error="onGeneratedImageError"
width="100%"
height="100%"
@click.stop=""
></image>
/>
</view>
</view>
<cl-tabbar class="tabbar" :current="2" />
@ -82,54 +33,58 @@
</template>
<script>
import html2canvas from 'html2canvas'
import { getShareCode } from '@/config/share'
import { fansCode as getShareCode } from '@/config/goods'
import clTabbar from '@/components/cl-tabbar.vue'
import DefaultSharePage from '@/components/share/DefaultSharePage.vue'
export default {
name: 'ShareQRCode',
components: {
'cl-tabbar': clTabbar,
DefaultSharePage,
},
data() {
return {
qrCodeImage: '',
// Set canvas dimensions. It's better to get device screen width for this.
canvasWidth: 375,
canvasHeight: 800,
isLoaded: false,
shareButtonShow: true,
isWechat: false, // 是否微信环境
generatedImageUrl: '', // 生成的图片URL，用于微信长按保存
backgroundImageLoaded: false, // 背景图片是否加载完成
isWechat: false,
generatedImageUrl: '',
userInfo: uni.getStorageSync('User'),
sourceVisible: true,
}
},
computed: {
isSpecialScene() {
return this.userInfo && this.userInfo.sharePosterImage
},
isDefaultScene() {
return !this.isSpecialScene
},
},
onLoad() {
this.checkWechatEnvironment()
this.handleGetShareCode()
// Get screen width to set canvas width dynamically
// 获取屏幕尺寸
uni.getSystemInfo({
success: res => {
this.canvasWidth = res.windowWidth
this.canvasHeight = res.windowHeight
},
})
uni.showLoading({
title: '加载中...',
mask: true,
})
},
onReady() {
// Use a short timeout to ensure the initial render is complete before animation
// 短暂延迟后启用加载动画
setTimeout(() => {
this.isLoaded = true
}, 100)
},
methods: {
desensitization(str) {
if (!str) return ''
if (str.length <= 8) return str.slice(0, 4) + '****'
const len = str.length - 6
const placeholder = '*'.repeat(len)
return str.slice(0, 4) + placeholder + str.slice(-2)
},
// 检测微信环境
checkWechatEnvironment() {
const ua = navigator.userAgent.toLowerCase()
@ -137,18 +92,14 @@ export default {
console.log('微信环境检测:', this.isWechat)
},
// 获取分享二维码
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
this.$nextTick(() => {
if (this.isWechat) {
this.sharePage()
}
this.generateShareImage()
})
} else {
uni.showToast({
@ -166,162 +117,38 @@ export default {
})
},
async sharePage() {
if (!this.qrCodeImage) {
uni.showToast({
title: '二维码尚未生成',
icon: 'none',
})
return
}
// 统一使用html2canvas生成图片
uni.showLoading({ title: '加载中...' })
// 生成分享图片
async generateShareImage() {
try {
// 隐藏按钮，等待DOM更新
this.shareButtonShow = false
await this.$nextTick()
// 使用html2canvas截取页面
await this.capturePageWithHtml2Canvas()
if (this.isSpecialScene) {
await this.$refs.specialSharePage.generateShareImage()
} else {
// 默认场景生成图片
await this.$refs.defaultSharePage.sharePage()
}
} catch (error) {
console.error('生成分享图片失败:', error)
}
},
// 处理分享图片生成完成
handleShareGenerated(dataUrl) {
uni.hideLoading()
uni.showToast({ title: '图片生成失败，请稍后重试', icon: 'none' })
console.error('sharePage error:', error)
} finally {
// 恢复按钮显示
this.shareButtonShow = true
}
},
// 生成的图片加载成功
onGeneratedImageLoad() {
console.log('生成的图片加载成功')
},
// 生成的图片加载失败
onGeneratedImageError(e) {
console.error('生成的图片加载失败:', e)
uni.showToast({
title: '图片显示失败',
icon: 'none',
this.$nextTick(() => {
this.sourceVisible = false
})
},
uni.hideLoading()
// 关闭全屏图片
closeFullscreenImage() {
this.generatedImageUrl = ''
console.log('关闭全屏图片')
},
// 背景图片加载成功
onBackgroundImageLoad() {
this.backgroundImageLoaded = true
console.log('背景图片加载成功')
},
// 背景图片加载失败
onBackgroundImageError(e) {
console.error('背景图片加载失败:', e)
},
// 使用html2canvas截取整个页面
async capturePageWithHtml2Canvas() {
console.log('开始使用html2canvas截取页面')
return new Promise((resolve, reject) => {
// 确保所有图片都已加载完成
const waitForImages = () => {
if (!this.backgroundImageLoaded || !this.qrCodeImage) {
setTimeout(waitForImages, 100)
return
}
// 额外等待确保渲染完成
setTimeout(() => {
const element = document.getElementById('shareContainer')
if (!element) {
reject(new Error('找不到页面容器'))
return
}
console.log(
'开始html2canvas截取，容器尺寸:',
element.offsetWidth,
'x',
element.offsetHeight
)
html2canvas(element, {
useCORS: true,
allowTaint: true,
backgroundColor: null,
scale: 2,
dpi: 400,
logging: true, // 开启日志便于调试
width: element.offsetWidth,
height: element.offsetHeight,
windowWidth: element.offsetWidth,
windowHeight: element.offsetHeight,
scrollX: 0,
scrollY: 0,
x: 0,
y: 0,
})
.then(canvas => {
const dataUrl = canvas.toDataURL('image/jpeg', 1)
// 根据环境处理结果
if (this.isWechat) {
// 微信环境：设置图片供长按保存
this.generatedImageUrl = dataUrl
uni.hideLoading()
} else {
// 普通浏览器：直接下载图片
this.downloadImage(dataUrl)
uni.hideLoading()
uni.showToast({
title: '图片已开始下载',
icon: 'success',
})
// 普通浏览器环境
if (this.isSpecialScene) {
// 特殊场景：设置图片供长按保存（没有下载按钮）
this.generatedImageUrl = dataUrl
}
resolve()
})
.catch(err => {
console.error('html2canvas截取失败:', err)
reject(err)
})
}, 1000) // 增加等待时间到1000ms
}
// 开始等待图片加载
waitForImages()
})
},
// 原生图片加载器
loadImage(src) {
return new Promise((resolve, reject) => {
const img = new Image()
img.crossOrigin = 'anonymous'
img.onload = () => {
console.log(
`图片加载成功: ${src.substring(0, 50)}...`,
`${img.width}x${img.height}`
)
resolve(img)
}
img.onerror = error => {
console.error(`图片加载失败: ${src}`, error)
reject(new Error(`图片加载失败: ${src}`))
}
img.src = src
})
},
// 下载图片
@ -349,172 +176,33 @@ export default {
align-items: center;
}
/* 背景图片样式 */
.share-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.share-bg {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.share-wrapper {
position: absolute;
z-index: 2;
top: 370rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.share-bg-logo {
width: 100%;
height: 360rpx;
// margin-top: -60rpx;
}
.portal-frame {
padding: 32rpx;
width: 520rpx;
border-radius: 40rpx;
display: flex;
box-sizing: border-box;
flex-direction: column;
align-items: center;
margin: 0 auto;
text-align: center;
}
.portal-frame.is-loaded {
opacity: 1;
transform: translateY(0);
}
/* The single white card for the QR code */
.qr-code-outer {
width: 300rpx; /* 从400rpx缩小到320rpx */
height: 300rpx; /* 从400rpx缩小到320rpx */
background: rgba(255, 255, 255, 0.98);
border-radius: 20rpx; /* 从24rpx减小到20rpx */
box-shadow: 0px 8rpx 20rpx rgba(50, 50, 90, 0.06);
border: 1px solid #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
padding: 12rpx; /* 从16rpx减小到12rpx */
box-sizing: border-box;
}
/* The image and the placeholder both live inside the outer card */
.qr-code,
.qr-code-placeholder {
width: 100%;
height: 100%;
}
.qr-code {
border-radius: 16rpx;
}
.qr-code-placeholder {
display: flex;
align-items: center;
justify-content: center;
}
.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: 58rpx; /* 从32rpx减小到28rpx */
width: 380rpx; /* 设置固定宽度 */
color: #fff;
border-radius: 36rpx; /* 从44rpx减小到36rpx */
font-size: 16rpx; /* 从30rpx减小到26rpx */
font-weight: 500;
padding: 12rpx 0;
display: flex;
align-items: flex-start;
justify-content: center;
background: linear-gradient(
135deg,
#d4af37 0%,
#ffd700 30%,
#b8860b 70%,
#8b7355 100%
);
// box-shadow: 0 5rpx 12rpx 0 rgba(102, 126, 234, 0.2);
border: none;
border-radius: 70rpx;
text-align: center;
letter-spacing: 1rpx;
}
/* 微信环境全屏覆盖样式 */
.wechat-fullscreen-overlay {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%; /* 减去tab栏高度 */
background-color: transparent; /* 移除背景色 */
height: 100%;
background-color: transparent;
z-index: 999;
display: flex;
flex-direction: column;
align-items: stretch; /* 拉伸对齐 */
justify-content: stretch; /* 拉伸对齐 */
align-items: stretch;
justify-content: stretch;
padding: 0;
margin: 0;
}
.fullscreen-image {
width: 100vw;
height: 100%; /* 减去tab栏高度 */
object-fit: cover; /* 覆盖整个容器，可能会裁剪 */
height: 100%;
object-fit: cover;
margin: 0;
padding: 0;
border: none;
display: block;
}
@media screen and (max-height: 667px) {
.tabbar {
height: 70px !important;
}
}
@media screen and (min-height: 812px) {
/* iPhone X及以上机型 */
.tabbar {
height: 80px !important;
}
}
.tabbar {
position: static;
bottom: 0;
@ -524,8 +212,17 @@ export default {
:v-deep .u-tabbar--fixed {
height: 100px !important;
}
// ::v-deep .u-safe-area-inset-bottom {
// display: none !important;
// }
}
@media screen and (max-height: 667px) {
.tabbar {
height: 70px !important;
}
}
@media screen and (min-height: 812px) {
.tabbar {
height: 80px !important;
}
}
</style>

465
pages/pay/hiPay.vue
View File

@ -11,63 +11,113 @@
<template>
<view class="tit">{{ '待支付金额' }}</view>
<view class="tit1">
￥{{ paramsPost.orderAmount | numberToCurrency }}
{{ paramsPost.orderAmount | numberToCurrency }}
</view>
<view class="tit2"
<!-- <view class="tit2"
>{{ '请在' }} <view class="tit3">{{ countDown }}</view
>{{ '内完成支付，否则订单将会被自动取消' }}
</view>
</view> -->
</template>
<!-- 暂时隐藏 -->
<view v-if="false" class="kuang">
<u-collapse
:value="activeNames"
ref="collapse"
@open="change"
@close="close"
accordion
:border="false"
>
<u-collapse-item name="1">
<view class="kuang">
<view>
<view slot="title" class="pf">
<img src="@/static/images/under_pay.png" alt="" />
<view>{{ '在线支付' }}</view>
</view>
<view class="flex_ac" v-show="this.payList.pay11">
<view
class="flex_ac"
v-show="payList[PAY_AUTH[PAY_TYPE.BAO_FU_WECHAT]]"
>
<view class="flex_ac_i">
<img src="@/static/images/pay_i2.png" alt="" />
<view>{{ '宝付微信支付' }}</view>
</view>
<u-radio-group v-model="whatPay">
<u-radio activeColor="red" size="14" label="" :name="11">
<u-radio
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.BAO_FU_WECHAT"
>
</u-radio>
</u-radio-group>
</view>
<view class="flex_ac" v-show="this.payList.pay12">
<view
class="flex_ac"
v-show="payList[PAY_AUTH[PAY_TYPE.BAO_FU_WECHAT_SCAN]]"
>
<view class="flex_ac_i">
<img src="@/static/images/pay_i2.png" alt="" />
<view>{{ '宝付微信扫码' }}</view>
</view>
<u-radio-group v-model="whatPay">
<u-radio activeColor="red" size="14" label="" :name="12">
<u-radio
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.BAO_FU_WECHAT_SCAN"
>
</u-radio>
</u-radio-group>
</view>
<view class="flex_ac" v-show="this.payList.pay13">
<view
class="flex_ac"
v-show="payList[PAY_AUTH[PAY_TYPE.HUI_FU_WECHAT]]"
>
<view class="flex_ac_i">
<img src="@/static/images/pay_i2.png" alt="" />
<view>{{ '汇付微信支付' }}</view>
</view>
<u-radio-group v-model="whatPay">
<u-radio activeColor="red" size="14" label="" :name="13">
<u-radio
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.HUI_FU_WECHAT"
>
</u-radio>
</u-radio-group>
</view>
<view class="flex_ac1" v-show="this.payList.pay15">
<!-- 微信支付 -->
<view class="flex_ac" v-show="payList[PAY_AUTH[PAY_TYPE.WECHAT_PAY]]">
<view class="flex_ac_i">
<img src="@/static/images/pay_i2.png" alt="" />
<view>{{ '微信支付' }}</view>
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.WECHAT_PAY"
>
</u-radio>
</u-radio-group>
</view>
<!-- 支付宝支付 -->
<view class="flex_ac" v-show="payList[PAY_AUTH[PAY_TYPE.ALI_PAY]]">
<view class="flex_ac_i">
<img src="@/static/images/pay_i3.png" alt="" />
<view>{{ '支付宝支付' }}</view>
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.ALI_PAY"
>
</u-radio>
</u-radio-group>
</view>
<view
class="flex_ac1"
v-show="payList[PAY_AUTH[PAY_TYPE.HUI_FU_BANK_CARD]]"
>
<view class="flex_ac_i">
<img src="@/static/images/jdBank.jpg" alt="" />
<view>{{ '汇付银行卡' }} ({{ '暂不支持信用卡' }})</view>
<view>{{ '汇付银行卡' }} </view>
</view>
<view class="pad">
<view
@ -77,14 +127,16 @@
@click.prevent="selPayRadio('hf' + index)"
>
<view class="flax_i">
{{ item.bankName }} ({{ item.bankNo }})
<view>{{ item.bankName }} ({{ item.bankNo }})</view>
<view class="fixBind" @click="fixBind(item)">解绑</view>
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="red"
size="14"
activeColor="#005BAC"
size="18"
label=""
:name="'hf' + index"
:name="PAY_TYPE.HUI_FU_BANK_CARD + index"
>
</u-radio>
</u-radio-group>
@ -95,51 +147,31 @@
</view>
</view>
</view>
<view class="flex_ac" v-show="this.payList.pay32">
<view
class="flex_ac"
v-show="payList[PAY_AUTH[PAY_TYPE.TONG_LIAN_WECHAT]]"
>
<view class="flex_ac_i">
<img src="@/static/images/pay_i2.png" alt="" />
<view>通联微信支付</view>
</view>
<u-radio-group v-model="whatPay">
<u-radio activeColor="red" size="14" label="" :name="32">
</u-radio>
</u-radio-group>
</view>
<view class="flex_ac1" v-show="this.payList.pay33">
<view class="flex_ac_i">
<img src="@/static/images/jdBank.jpg" alt="" />
<view>{{ '通联银行卡' }} ({{ '暂不支持信用卡' }})</view>
</view>
<view class="pad">
<view
v-for="(item, index) in tlList"
:key="index"
class="pay_flax flex_bet"
@click.prevent="selPayRadio('tl' + index)"
>
<view class="flax_i">
{{ item.bankName }} ({{ item.bankNo }})
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="red"
size="14"
activeColor="#005BAC"
size="18"
label=""
:name="'tl' + index"
:name="PAY_TYPE.TONG_LIAN_WECHAT"
>
</u-radio>
</u-radio-group>
</view>
<view class="pay_flax flax_i" @click="bindBank('tl')">
<img class="img1" src="@/static/images/addto.png" alt="" />
<view>{{ '绑定银行卡' }}</view>
</view>
</view>
</view>
<view class="flex_ac1" v-show="this.payList.pay4">
<view
class="flex_ac1"
v-show="payList[PAY_AUTH[PAY_TYPE.JING_DONG_BANK_CARD]]"
>
<view class="flex_ac_i">
<img src="@/static/images/jdBank.jpg" alt="" />
<view>{{ '京东银行卡' }} ({{ '暂不支持信用卡' }})</view>
<view>{{ '京东银行卡' }}</view>
</view>
<view class="pad">
<view
@ -153,10 +185,10 @@
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="red"
size="14"
activeColor="#005BAC"
size="18"
label=""
:name="'jd' + index"
:name="PAY_TYPE.JING_DONG_BANK_CARD + index"
>
</u-radio>
</u-radio-group>
@ -167,8 +199,59 @@
</view>
</view>
</view>
</u-collapse-item>
</u-collapse>
<view
class="flex_ac"
v-show="payList[PAY_AUTH[PAY_TYPE.JING_DONG_H5]]"
>
<view class="flex_ac_i">
<img src="@/static/images/jdBank.jpg" alt="" />
<view>京东收银台</view>
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.JING_DONG_H5"
>
</u-radio>
</u-radio-group>
</view>
<view
class="flex_ac1"
v-show="payList[PAY_AUTH[PAY_TYPE.TONG_LIAN_BANK_CARD]]"
>
<view class="flex_ac_i">
<img src="@/static/images/jdBank.jpg" alt="" />
<view>{{ '通联银行卡' }}</view>
</view>
<view class="pad">
<view
v-for="(item, index) in tlList"
:key="index"
class="pay_flax flex_bet"
@click.prevent="selPayRadio('tl' + index)"
>
<view class="flax_i">
{{ item.bankName }} ({{ item.bankNo }})
</view>
<u-radio-group v-model="whatPay">
<u-radio
activeColor="#005BAC"
size="18"
label=""
:name="PAY_TYPE.TONG_LIAN_BANK_CARD + index"
>
</u-radio>
</u-radio-group>
</view>
<view class="pay_flax flax_i" @click="bindBank('tl')">
<img class="img1" src="@/static/images/addto.png" alt="" />
<view>{{ '绑定银行卡' }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 底部 -->
@ -225,7 +308,10 @@
<div ref="qrCodeUrlWx" class="qrcode"></div>
</view>
</u-popup>
<hiSuccess @successClose="successClose" ref="hiSuccess"></hiSuccess>
<successDialog
@successClose="successClose"
ref="successDialog"
></successDialog>
</view>
</template>
@ -234,15 +320,24 @@ import * as api from '@/config/pay.js'
import QRCode from 'qrcodejs2'
import { removeToken } from '@/config/auth.js'
import hiSuccess from '@/components/hiSuccess.vue'
import successDialog from '@/components/successDialog.vue'
import * as act from '@/config/activity.js'
import {
PAY_REDIRECT_URL,
PAY_TYPE,
PAY_CHANEL,
PAY_AUTH,
} from '@/util/constant.js'
var payStatus
let getRegisterInfoTimeoutFlag = null
export default {
components: {
hiSuccess,
successDialog,
},
data() {
return {
PAY_TYPE,
PAY_AUTH,
payList: {},
isLoading: false,
clockTime: '',
@ -257,12 +352,12 @@ export default {
},
paramsPost: '',
isShare: false, //分享用户第一次爆单
userInfo: '',
userInfo: uni.getStorageSync('User'),
activeNames: 1,
whatPay: '',
hfList: [],
jdList: [],
businessType: '',
businessType: 1,
isBank: '',
isPw: false,
codeValue: '',
@ -271,9 +366,7 @@ export default {
sucPay: 0,
content: '支付成功',
wxPopup: false,
luckydrawData: {},
isRecharge: false,
czJe: '',
tlList: [],
}
},
@ -286,74 +379,22 @@ export default {
)
this.pkCountry = uni.getStorageSync('pkCountry')
// if (this.paramsPost.isRecharge) {
// this.isRecharge = this.paramsPost.isRecharge
// this.businessType = 3
// uni.setNavigationBarTitle({
// title: '充值'
// });
// } else {
// uni.setNavigationBarTitle({
// title: '订单支付'
// });
// this.isRecharge = false
// if (JSON.parse(options.paramsPost).orderType == 4) {
this.orderCode = this.paramsPost.orderCode
// this.luckydrawData = this.paramsPost.luckydrawData
// // 抽奖支付处理（查询订单支付信息以及显示等）
// this.businessType = 4 //抽奖
// this.specialArea = this.paramsPost.specialArea
// this.getLuckdrawDetail()
// } else {
// this.userInfo = uni.getStorageSync('User')
// if (
// this.userInfo.registerFans == 0
// ) {
// this.isShare = true
// }
// this.specialArea =
// this.paramsPost.specialArea || this.paramsPost.orderType
// this.orderCode = this.paramsPost.orderCode
// this.businessType = options.businessType
// // this.getInfo()
// // 获取订单信息
// this.getOrderInfo()
// if (!this.isShare) {
// // 获取消费信息
// this.getSpendInfo()
// }
// }
// }
// 获取支付配置
this.getPayConfig()
this.downTime()
// clearInterval(this.clockTime)
},
onShow() {
// 获取银行卡
// this.getBankList()
},
methods: {
//查询充值抽奖次数
getLuckdrawDetail() {
// 抽奖支付处理（查询订单支付信息以及显示等）
act
.getLuckdrawDetail({
pkBaseId: this.luckydrawData.pkBaseId,
payNum: this.luckydrawData.payNum,
})
.then(res => {
if (res.code == 200) {
this.orderData.orderAmount = res.data.toBePaidMoney
this.payDetail = res.data
// this.downTime()
}
})
onUnload() {
clearTimeout(getRegisterInfoTimeoutFlag)
clearInterval(payStatus)
},
methods: {
closewxPopup() {
this.wxPopup = false
this.$refs.qrCodeUrlWx.innerHTML = ''
@ -384,10 +425,18 @@ export default {
},
fansOrder() {
api.fansOrder(this.orderCode).then(res => {
if (res.data) {
this.isLoading = false
this.isPw = false
uni.hideLoading()
removeToken()
this.$refs.hiSuccess.showSuccess(res.data)
this.$refs.successDialog.showSuccess(res.data)
} else {
getRegisterInfoTimeoutFlag = setTimeout(() => {
this.fansOrder()
}, 3000)
}
})
},
payPw() {
@ -411,7 +460,7 @@ export default {
url(obj).then(res => {
if (res.code == 200) {
// this.isPw = false
// this.$refs.hiSuccess.showSuccess(res.data)
// this.$refs.successDialog.showSuccess(res.data)
uni.showToast({
title: res.msg,
icon: 'none',
@ -431,66 +480,50 @@ export default {
}
})
},
quickPay(cz) {
// 非银行卡
if (typeof this.whatPay == 'number') {
if (this.whatPay == 12) {
this.scanPayBfWx(5)
} else if (this.whatPay == 13) {
this.scanPayBfWx(6)
} else if (this.whatPay == 11) {
this.scanPayBfWxJump(5)
} else if (this.whatPay == 32) {
this.scanPayTlWxJump(3)
async quickPay() {
if (
![
PAY_TYPE.HUI_FU_BANK_CARD,
PAY_TYPE.JING_DONG_BANK_CARD,
PAY_TYPE.TONG_LIAN_BANK_CARD,
].includes(this.whatPay.slice(0, 2))
) {
if ([PAY_TYPE.JING_DONG_H5].includes(this.whatPay)) {
this.redirectPay(PAY_CHANEL[this.whatPay])
} else if (
[PAY_TYPE.BAO_FU_WECHAT_SCAN, PAY_TYPE.HUI_FU_WECHAT].includes(
this.whatPay
)
) {
this.scanPayBfWx(PAY_CHANEL[this.whatPay])
} else if (this.whatPay == PAY_TYPE.WECHAT_PAY) {
this.scanPayWx(PAY_CHANEL[this.whatPay])
} else if (this.whatPay == PAY_TYPE.ALI_PAY) {
this.scanPayAl(PAY_CHANEL[this.whatPay])
}
} else {
if (this.whatPay.slice(0, 2) == 'hf') {
let indexed = this.whatPay.slice(2, 4)
let params = {
businessType: 1, //订单类型
businessCode: this.orderCode,
payChannel: 6, //汇付
const indexed = this.whatPay.slice(2, 4)
const payTypeEnum = this.whatPay.slice(0, 2)
const bankListMap = {
[PAY_TYPE.HUI_FU_BANK_CARD]: this.hfList[indexed].bindCode,
[PAY_TYPE.JING_DONG_BANK_CARD]: this.jdList[indexed].bindCode,
[PAY_TYPE.TONG_LIAN_BANK_CARD]: this.tlList[indexed].bindCode,
}
this.bindCode = bankListMap[payTypeEnum]
const params = {
businessType: this.businessType, //订单类型
payChannel: PAY_CHANEL[payTypeEnum],
payType: 3, //银行卡
bindCode: this.hfList[indexed].bindCode,
bindCode: bankListMap[payTypeEnum],
}
api.unifiedorder(params).then(response => {
this.isBank = 'hf'
this.bindCode = this.hfList[indexed].bindCode
this.isPw = true
})
this.checkPayStatus(params)
} else if (this.whatPay.slice(0, 2) == 'jd') {
let indexed = this.whatPay.slice(2, 4)
let params = {
businessType: 1, //订单类型
Object.assign(params, {
businessCode: this.orderCode,
payChannel: 4, //京东
payType: 3, //银行卡
bindCode: this.jdList[indexed].bindCode,
}
api.unifiedorder(params).then(response => {
this.isBank = 'jd'
this.bindCode = this.jdList[indexed].bindCode
this.isPw = true
})
this.checkPayStatus(params)
} else if (this.whatPay.slice(0, 2) == 'tl') {
let indexed = this.whatPay.slice(2, 4)
let params = {
businessType: 1, //订单类型
businessCode: this.orderCode,
payChannel: 3, //通联
payType: 3, //银行卡
bindCode: this.tlList[indexed].bindCode,
}
api.unifiedorder(params).then(response => {
this.isBank = 'tl'
this.bindCode = this.tlList[indexed].bindCode
this.isBank = this.whatPay.slice(0, 2)
this.isPw = true
})
this.checkPayStatus(params)
}
})
}
},
// 宝付微信支付
@ -527,6 +560,47 @@ export default {
})
this.checkPayStatus(params)
},
redirectPay(payChannel) {
this.getPayAuthToken(payChannel).then(url => {
if (navigator.userAgent.includes('MicroMessenger')) {
window.location.href = url
} else {
window.open(url)
}
})
},
getPayAuthToken(payChannel) {
return new Promise((resolve, reject) => {
const extParam = {
isRecharge: false,
orderCode: this.orderCode,
specialArea: 1,
isSharePay: true,
}
// 将extParam对象转换为JSON字符串，再转换为base64编码
const extParamBase64 = btoa(JSON.stringify(extParam))
const params = {
payChannel: payChannel,
payType: 2,
appletFlag: 0,
businessType: this.businessType,
businessCode: this.orderCode,
extParam: extParamBase64,
}
api.unifiedorder(params).then(res => {
if (res.code === 200) {
resolve(res.data)
this.checkPayStatus(params)
} else {
uni.showToast({
title: res.msg,
icon: 'none',
})
reject(res.msg)
}
})
})
},
scanPayBfWx(val) {
let params = {
businessType: 1,
@ -567,9 +641,7 @@ export default {
getPayConfig() {
api.payConfig().then(res => {
this.payList = res.data
this.$nextTick(() => {
this.$refs.collapse.init()
})
this.$forceUpdate()
})
},
@ -588,18 +660,7 @@ export default {
})
this.$forceUpdate()
},
getOrderInfo() {
api
.orderInfo({
specialArea: this.specialArea,
orderCode: this.orderCode,
pkSettleCountry: this.pkCountry,
})
.then(res => {
this.orderData = res.data
this.downTime()
})
},
downTime() {
let that = this
this.clockTime = setInterval(() => {
@ -639,7 +700,12 @@ export default {
clearInterval(payStatus)
this.wxPopup = false
// this.showSucce = true
uni.showLoading({
title: '正在获取注册信息，请不要关闭当前页面',
})
setTimeout(() => {
this.fansOrder()
}, 2000)
} else {
api.payStatus(data).then(res => {
that.sucPay = res.data
@ -753,10 +819,9 @@ export default {
.flex_ac {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 18rpx 0;
padding: 18rpx 20rpx;
}
.flex_ac1 {
@ -766,7 +831,7 @@ export default {
width: 100%;
justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 18rpx 0;
// padding: 18rpx 0;
}
.flex_ac_i {
@ -786,10 +851,6 @@ export default {
}
}
::v-deep .u-collapse-item__content__text {
padding: 0px 15px;
}
.pad {
width: 100%;
display: flex;

512
pages/shareArea/hiList.vue
View File

@ -1,36 +1,50 @@
<template>
<view class="contain">
<view class="zhan"></view>
<view class="goodList">
<view v-for="item in goodList"
:key="item.waresCode"
class="goodList_i"
<!-- 头部营销区域 -->
<view class="header-section">
<view class="hero-content">
<view class="hero-title">
<text class="hero-main">新人专享特惠</text>
<text class="hero-sub">精选好物·品质优选</text>
</view>
<!-- <view class="promotion-banner">
<text class="promo-text">限时优惠·新人福利</text>
</view> -->
</view>
</view>
<view class="goods-container">
<scroll-view
class="goodList"
scroll-y="true"
enhanced
:show-scrollbar="false"
>
<img :src="item.cover1"
class="cover"
alt="">
<view v-for="item in goodList" :key="item.waresCode" class="goodList_i">
<img :src="item.cover1" class="cover" alt="" />
<view class="goodList_ir">
<view class="tit1">
{{ item.waresName }}
</view>
<view class="sales">
销量:{{ item.sales |seles}}
</view>
<view class="goodList_ib">
<view>
￥{{ item.waresPrice | numberToCurrency}}
<view class="price-container">
<!-- <text class="currency">￥</text> -->
<text class="price">{{
item.waresPrice | numberToCurrency
}}</text>
</view>
<!-- <img @click.stop="addCar(item)"
src="@/static/images/cart.png"
alt=""> -->
</view>
<view class="toBuy" @click.stop="goBuy(item)">立即购买</view>
</view>
</view>
<view class="zhan2"></view>
<view class="list-bottom">
<text class="bottom-text">— 已显示全部商品 —</text>
</view>
</scroll-view>
</view>
</view>
</template>
@ -44,134 +58,464 @@ export default {
return {
pkParent: '',
goodList: [],
placeParent:''
placeParent: '',
}
},
filters: {
seles(value) {
if (value > 999) {
return 999 + '+'
} else {
return value
}
}
},
},
onLoad(options) {
this.pkParent = options.pkParent
this.getToken()
},
methods: {
getToken() {
api.autoLogin({
pkParent:this.pkParent
}).then(res=>{
api
.autoLogin({
pkParent: this.pkParent,
})
.then(res => {
setToken(res.data.access_token, res.data.expires_in)
this.getList()
this.getCode()
})
},
getCode() {
api.fansConvertCode(
this.pkParent
).then(res=>{
this.placeParent = res.msg
api.fansConvertCode(this.pkParent).then(res => {
this.placeParent = res.data
uni.setStorageSync('placeParent', this.placeParent)
})
},
getList() {
api.queryWares({
shareMemberCode:this.pkParent
}).then(res=>{
api
.queryWares({
shareMemberCode: this.pkParent,
})
.then(res => {
this.goodList = res.data
})
},
goBuy(item) {
uni.navigateTo({ url: '/pages/shareArea/hiOrder?allData=' + JSON.stringify(item)})
}
const params = {
...item,
pkParent: this.pkParent,
}
uni.navigateTo({
url: '/pages/shareArea/hiOrder?allData=' + JSON.stringify(item),
})
},
},
}
</script>
<style lang="scss" scoped>
.contain {
background: #fff;
height: 100vh;
background: url('~@/static/images/hf1.jpg') no-repeat;
background-size: cover;
padding: 0 20px;
background: linear-gradient(
135deg,
#005bac 0%,
#0066cc 50%,
#f5f7fa 50%,
#e8f4f8 100%
);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.zhan{
height: 36%;
// 头部营销区域
.header-section {
background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
padding: 50rpx 32rpx 60rpx;
animation: slideDown 0.6s ease-out;
.hero-content {
text-align: center;
.hero-title {
margin-bottom: 24rpx;
.hero-main {
display: block;
color: #fff;
font-size: 40rpx;
font-weight: 700;
margin-bottom: 8rpx;
animation: fadeInUp 0.8s ease-out 0.2s both;
}
.hero-sub {
display: block;
color: rgba(255, 255, 255, 0.9);
font-size: 26rpx;
font-weight: 400;
animation: fadeInUp 0.8s ease-out 0.4s both;
}
}
.promotion-banner {
background: linear-gradient(
135deg,
#ff6b35 0%,
#f7931e 50%,
#ffd700 100%
);
border-radius: 30rpx;
padding: 18rpx 36rpx;
box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.4);
animation:
fadeInUp 0.8s ease-out 0.6s both,
promoBreathe 3s ease-in-out infinite 1s;
position: relative;
overflow: hidden;
border: 2rpx solid rgba(255, 255, 255, 0.3);
&::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
animation: shimmer 2.5s ease-in-out infinite;
}
.promo-text {
color: #fff;
font-size: 28rpx;
font-weight: 700;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 2;
}
}
}
}
// 商品容器区域
.goods-container {
flex: 1;
background: #f8fafc;
border-radius: 40rpx 40rpx 0 0;
margin-top: -40rpx;
position: relative;
z-index: 3;
padding: 32rpx 24rpx 0;
animation: fadeIn 0.8s ease-out 0.3s both;
.section-title {
text-align: center;
margin-bottom: 24rpx;
padding: 20rpx 0;
.title-text {
display: block;
color: #1e293b;
font-size: 32rpx;
font-weight: 600;
margin-bottom: 8rpx;
}
.title-desc {
display: block;
color: #64748b;
font-size: 24rpx;
}
}
}
// 商品列表滚动区域
.goodList {
padding: 40rpx;
height: 55vh;
overflow-y: auto;
background: url('~@/static/images/hf2.png') no-repeat;
background-size: cover;
height: calc(100vh - 400rpx);
padding: 0 8rpx;
.goodList_i {
display: flex;
border-bottom: 1px solid #eee;
padding: 60rpx 60rpx 30rpx 60rpx;
// background: url('~@/static/images/hf3.png') no-repeat;
// background-size: cover;
background: #ffffff;
border-radius: 20rpx;
background-image: linear-gradient(to bottom, #fefbf8, #fadf97);
margin-bottom: 20rpx;
.goodList_ir {
margin-left: 40rpx;
margin-bottom: 24rpx;
padding: 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 91, 172, 0.06);
border: 1rpx solid rgba(0, 91, 172, 0.1);
transition: all 0.3s ease;
animation: slideInUp 0.6s ease-out both;
opacity: 0;
&:hover {
transform: translateY(-4rpx);
box-shadow: 0 12rpx 32rpx rgba(0, 91, 172, 0.15);
}
.cover {
width: 240rpx;
height: 240rpx;
background: #f8fafc;
border: 1rpx solid #e2e8f0;
border-radius: 16rpx;
flex-shrink: 0;
overflow: hidden;
}
.goodList_ir {
margin-left: 24rpx;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 24rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333333;
.goodList_ib {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 24px;
font-family: Source Han Sans CN;
.tit1 {
color: #1e293b;
font-size: 32rpx;
font-weight: 600;
color: #a36b28;
line-height: 1.4;
margin-bottom: 16rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sales {
color: #64748b;
font-size: 24rpx;
font-weight: 400;
margin-bottom: 16rpx;
}
.goodList_ib {
margin-bottom: 24rpx;
.price-container {
display: flex;
align-items: baseline;
.currency {
color: #ff6b35;
font-size: 24rpx;
font-weight: 600;
margin-right: 4rpx;
}
.price {
color: #ff6b35;
font-size: 36rpx;
font-weight: 700;
}
}
img {
width: 56rpx;
height: 56rpx;
}
}
.toBuy {
background: #005bac;
color: #ffffff;
padding: 20rpx 0;
text-align: center;
border-radius: 12rpx;
font-size: 28rpx;
font-weight: 600;
border: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s;
}
&:hover {
background: #0066cc;
transform: translateY(-2rpx);
box-shadow: 0 6rpx 16rpx rgba(0, 91, 172, 0.3);
&::before {
left: 100%;
}
}
&:active {
transform: scale(0.98);
}
}
}
}
.list-bottom {
text-align: center;
padding: 40rpx 0 60rpx;
.bottom-text {
color: #64748b;
font-size: 24rpx;
}
}
}
// 动画定义
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-50rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(40rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
@keyframes promoBreathe {
0%,
100% {
transform: scale(1);
box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 12rpx 32rpx rgba(255, 107, 53, 0.6);
}
}
@keyframes shimmer {
0% {
left: -100%;
}
50% {
left: -100%;
}
100% {
left: 100%;
}
}
// 商品卡片延迟动画
.goodList_i:nth-child(1) {
animation-delay: 0.1s;
}
.goodList_i:nth-child(2) {
animation-delay: 0.2s;
}
.goodList_i:nth-child(3) {
animation-delay: 0.3s;
}
.goodList_i:nth-child(4) {
animation-delay: 0.4s;
}
.goodList_i:nth-child(5) {
animation-delay: 0.5s;
}
.goodList_i:nth-child(n + 6) {
animation-delay: 0.6s;
}
// 响应式优化
@media (max-width: 750rpx) {
.header-section {
padding: 40rpx 24rpx 50rpx;
.hero-content {
.hero-title .hero-main {
font-size: 36rpx;
}
}
}
.goodList {
.goodList_i {
padding: 20rpx;
.cover {
width: 200rpx;
height: 200rpx;
background: #ffffff;
border: 1px solid #eeeeee;
border-radius: 10rpx;
margin-bottom: 40px;
}
.toBuy{
color: #fff;
background: #005BAC;
padding: 10rpx 0;
text-align: center;
border-radius: 10rpx;
font-size: 20px;
}
}
.goodList_ir {
margin-left: 20rpx;
.tit1 {
color: #93561f;
font-size: 16px;
font-weight: 700;
font-size: 28rpx;
}
.goodList_ib {
.price-container {
.price {
font-size: 32rpx;
}
}
}
.toBuy {
padding: 18rpx 0;
font-size: 26rpx;
}
}
}
}
.sales{
color: #923f32;
font-size: 10px;
font-weight: 700;
}
</style>

263
pages/shareArea/hiOrder.vue
View File

@ -1,9 +1,3 @@
<!--
* @Descripttion:
* @version:
* @Author: kBank
* @Date: 2022-11-21 15:11:22
-->
<template>
<view class="content">
<!-- <view class="index_header">
@ -14,67 +8,50 @@
<view class="subTxt">
<view class="subTxt1">{{ '会员信息' }}</view>
</view>
<u-form
:model="form"
labelAlign="right"
labelWidth="75"
:rules="rules"
ref="uForm"
>
<u-form :model="form" labelWidth="75" :rules="rules" ref="uForm">
<view class="kuang">
<u-form-item :label="'会员姓名'" prop="memberName">
<u-form-item
:label="'会员姓名'"
prop="memberName"
borderBottom
required
>
<u-input
:placeholder="'请输入会员姓名'"
v-model.trim="form.memberName"
border="none"
/>
</u-form-item>
<u-form-item :label="'联系方式'" prop="phone">
<u-form-item :label="'联系方式'" prop="phone" borderBottom required>
<u-input
:placeholder="'请输入联系方式'"
type="number"
v-model.trim="form.phone"
:maxlength="user.pkSettleCountry == 1 ? 11 : 20"
border="none"
/>
</u-form-item>
<u-form-item :label="'自然国家'" @tap="changeCountry(0)">
<view class="disFlex justBwn ge">
<view class="disFlex">
<img class="countImg" :src="form.pkCountryImg" alt="" />
<view>{{ form.pkCountryLabel }}</view>
<!-- <u-form-item
v-if="[80, 90].includes(gradeValue) && provinceList.length"
@click="regionSelectHandle"
required
label="会员区域"
borderBottom
prop="regionProvince"
>
<view class="disFlex justBwn">
<view v-if="regionAddress.length">
{{ regionAddress.map(item => item.name).join('-') }}
</view>
<u-icon name="arrow-down"></u-icon>
<view
v-else
class="uni-input-placeholder input-placeholder"
style="position: relative !important"
>请选择区域</view
>
<u-icon name="arrow-right"></u-icon>
</view>
</u-form-item>
<u-form-item :label="'结算国家'">
<view class="disFlex justBwn ge hui">
<view class="disFlex">
<img class="countImg" :src="form.pkSettleCountryImg" alt="" />
<view>{{ form.pkSettleCountryLabel }}</view>
</view>
<u-icon name="arrow-down"></u-icon>
</view>
</u-form-item>
<u-form-item :label="'运输方式'">
<view class="pickerHui">
<u-input
v-model="form.transTypeVal"
disabled
border="none"
></u-input>
<u-icon name="arrow-down"></u-icon>
</view>
</u-form-item>
<u-form-item :label="'发货方式'">
<view class="pickerHui">
<u-input
v-model="form.deliveryName"
disabled
:placeholder="'请选择发货方式'"
border="none"
></u-input>
<u-icon name="arrow-down"></u-icon>
</view>
</u-form-item>
</u-form-item> -->
</view>
<view class="subTxt">
<view class="subTxt1">收货人信息</view>
@ -82,23 +59,35 @@
<view class="kuang">
<view class="disFlex tit_t">
<view></view>
<!-- <view class="lan" @click="addAdress">新增收货人地址</view> -->
</view>
<u-form-item :label="'收货人'" prop="recName">
<u-form-item :label="'收货人'" prop="recName" borderBottom required>
<u-input
v-model.trim="form.recName"
:placeholder="'请输入收货人'"
border="none"
/>
</u-form-item>
<u-form-item :label="'收货电话'" prop="recPhone">
<u-form-item
:label="'收货电话'"
prop="recPhone"
borderBottom
required
>
<u-input
v-model.trim="form.recPhone"
type="number"
maxlength="20"
:placeholder="'请输入收货电话'"
border="none"
/>
</u-form-item>
<u-form-item :label="'收货地址'" prop="diqu" @click="getDiqu">
<u-form-item
:label="'收货地址'"
prop="diqu"
@click="getDiqu"
required
borderBottom
>
<view class="picker">
<u-input
v-model.trim="form.diqu"
@ -108,17 +97,22 @@
<u-icon name="arrow-down"></u-icon>
</view>
</u-form-item>
<u-form-item :label="'详细地址'" prop="recAddress">
<u-form-item
required
:label="'详细地址'"
prop="recAddress"
borderBottom
>
<u--textarea
v-model.trim="form.recAddress"
maxlength="200"
:placeholder="'请输入详细地址'"
></u--textarea>
</u-form-item>
<u-form-item :label="'邮费'">
<u-form-item :label="'邮费'" borderBottom>
<u-input disabled v-model="form.postage" />
</u-form-item>
<u-form-item :label="'备注'">
<u-form-item :label="'备注'" borderBottom>
<u--textarea
v-model="form.remark"
:placeholder="'请输入备注'"
@ -126,36 +120,6 @@
</u-form-item>
</view>
</u-form>
<!-- <view class="kuang">
<view class="kuang_t">
<view class="kuang_tl">
<view class="sTit">{{'商品主图'}}</view>
<img :src="allData.cover1"
alt="">
<view class="sTit">{{'商品名称'}}</view>
<view class="cTit">{{ allData.waresName }}</view>
</view>
<view class="kuang_tr">
<view class="sTit">{{'产品'}}</view>
<view v-for="item,index in allData.specsSkuParamsList"
:key="index">
<view class="cTit">
{{ item.productName }}{{ item.specsName }}*{{ item.quantity }}
</view>
</view>
</view>
</view>
<view class="kuang_t">
<view class="kuang_tl">
<view class="sTit">{{'商品价格'}}(￥)</view>
<view class="cTit">{{ allData.waresPrice | numberToCurrency }}</view>
</view>
<view class="kuang_tr">
<view class="sTit">{{'商品数量'}}</view>
<view class="cTit">{{ allData.quantity }}</view>
</view>
</view>
</view> -->
<view class="subTxt">
<view class="subTxt1">商品信息</view>
</view>
@ -172,7 +136,7 @@
</view>
<view class="goodList_ib">
<view class="tit2">
￥{{ allData.waresPrice | numberToCurrency }}
{{ allData.waresPrice | numberToCurrency }}
</view>
<!-- <view class="tit3">业绩: {{ item.achieve | numberToCurrency | isLocal}}</view> -->
</view>
@ -205,19 +169,6 @@
</view>
</view>
</view>
<view class="kuang disFlex">
<u-checkbox-group
v-model="agreementShow"
shape="circle"
activeColor="#005BAC"
@change="checkboxChange"
>
<u-checkbox :name="1"> </u-checkbox>
</u-checkbox-group>
<view class="tit3">{{ '请阅读并同意' }}</view>
<view class="tit2" @click="toAgree"> 《{{ '购买协议' }}》</view>
</view>
</view>
<!-- 占空 -->
<view style="height: 150rpx"></view>
@ -226,8 +177,8 @@
<view class="footer">
<view class="footer_l">
<view class="disFlex">
<view class="h1">{{ '总价' }}</view>
<view class="r1">¥{{ allData.waresPrice | numberToCurrency }}</view>
<view class="h1">总价</view>
<view class="r1">{{ allData.waresPrice | numberToCurrency }}</view>
</view>
<!-- <view class="disFlex">
<view class="h1">{{'业绩'}}</view>
@ -256,12 +207,18 @@
:columns="countryList"
keyName="label"
></u-picker>
<agreement ref="agreement"></agreement>
<v-address
ref="address"
:defaultCode="defaultCode"
@addressData="addressData"
></v-address>
<RegionAddress
ref="regionAddress"
:provinceList="provinceList"
:cityList="cityList"
:countyList="countyList"
@setAddress="setRegionAddress"
></RegionAddress>
</view>
</template>
@ -269,15 +226,18 @@
import address from '@/components/address.vue'
import * as api from '@/config/goods'
import * as regiest from '@/config/regiest'
import regionSelect from '@/pages/commonMixins/regionSelect'
import RegionAddress from '@/components/region-address.vue'
import agreement from '@/components/agreement.vue'
export default {
mixins: [regionSelect],
components: {
'v-address': address,
agreement,
RegionAddress,
},
data() {
return {
regionAddress: [],
specialArea: 7,
isCountry: false,
defaultCode: [],
@ -293,6 +253,12 @@ export default {
pkCountry: '',
pkCountryLabel: '',
pkCountryImg: '',
pkGradeVal: '',
memberName: 'windsword',
phone: 13333332211,
recName: '啊啊啊',
recPhone: '123333321221',
recAddress: '3123',
},
deliList: [],
diqu: '',
@ -356,6 +322,7 @@ export default {
countryList: [],
placeParent: '',
user: '',
gradeValue: '',
}
},
onLoad(options) {
@ -378,6 +345,23 @@ export default {
},
onShow() {},
methods: {
getRegiestLevel() {
const params = {
firstCheck: 0,
specialArea: this.specialArea,
shopList: this.shoppingArr.map(id => {
return {
shoppingId: id,
}
}),
}
},
regionSelectHandle() {
this.$refs.regionAddress.setShow(this.provinceList[0].pkId)
},
setRegionAddress(area) {
this.regionAddress = area
},
phonePass(rule, value, callback) {
if (!value) {
callback(new Error('请输入联系电话'))
@ -386,21 +370,8 @@ export default {
if (value.length < 6 || value.length > 20) {
callback(new Error('请输入正确联系方式'))
return false
} else {
regiest
.validPhone({
memberName: this.form.memberName,
phone: this.form.phone,
placeParent: this.placeParent,
})
.then(res => {
if (res.code == 200) {
}
callback()
} else {
callback(new Error(res.msg))
}
})
}
},
getCountry() {
regiest.countryList().then(res => {
@ -450,29 +421,31 @@ export default {
// url: '/pages/address/index',
// })
// },
toAgree() {
// agreeMent
this.$refs.agreement.openDig()
},
getGenerate() {
api.generate().then(res => {
uni.setStorageSync('mToken', res.msg)
})
},
goBuy() {
this.$refs.uForm.validate().then(res => {
if (this.agreementShow.length == 0) {
const extParams = {}
if ([80, 90].includes(this.gradeValue) && this.provinceList.length) {
if (!this.regionAddress.length) {
uni.showToast({
title: '请阅读并同意购买协议',
title: '请选择会员区域',
icon: 'none',
duration: 1500,
})
return
}
extParams.regionProvince = this.regionAddress[0]?.pkId || -1
extParams.regionCity = this.regionAddress[1]?.pkId || -1
extParams.regionCounty = this.regionAddress[2]?.pkId || -1
}
this.$refs.uForm.validate().then(res => {
this.isLoading = true
api
.fansConfirm(
Object.assign({}, this.form, {
Object.assign({}, this.form, extParams, {
waresList: this.waresList,
})
)
@ -492,9 +465,14 @@ export default {
pkWares: this.allData.pkId,
skuList: [],
}
this.allData.specsSkuParamsList.forEach(item => {
console.log(
'%c [ carList ]-419',
'font-size:13px; background:#b131b9; color:#f575fd;',
this.allData
)
this.allData.productGroup.forEach(item => {
carList.skuList.push({
pkWaresSku: item.pkWaresSpecsSku,
pkWaresSku: item.pkSkuId,
quantity: item.quantity,
})
})
@ -547,7 +525,7 @@ export default {
}
.kuang {
// margin-top: 20rpx;
padding: 20rpx 40rpx;
// padding: 20rpx 40rpx;
background: #fff;
// box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
// border-radius: 10px 10px 10px 10px;
@ -573,22 +551,16 @@ export default {
display: flex;
justify-content: space-between;
width: 100%;
border-width: 0.5px !important;
border-color: #dadbde !important;
border-style: solid;
border-radius: 4px;
padding: 6px 9px;
}
.pickerHui {
display: flex;
justify-content: space-between;
width: 100%;
border-width: 0.5px !important;
border-color: #dadbde !important;
border-style: solid;
border-radius: 4px;
padding: 6px 9px;
background: #f5f7fa;
// padding: 6px 9px;
// background: #f5f7fa;
}
.kuang_t {
display: flex;
@ -784,4 +756,9 @@ export default {
background: #f6f6f6;
padding: 0 28rpx 28rpx 28rpx;
}
.u-form-item {
::v-deep .u-form-item__body {
padding: 20rpx 30rpx !important;
}
}
</style>

288
pages/shareRegist/index.vue
View File

@ -10,48 +10,55 @@
<!-- <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="90px" ref="uForm" :rules="rules">
<u-form-item label="推荐编号" prop="parentCode">
<u-input v-model="form.parentCode" disabled> </u-input>
<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-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="loginPwd">
<u-form-item label="" prop="loginPassword">
<u-input
:password="isPwd"
:placeholder="'请输入登录密码'"
v-model="form.loginPwd"
v-model="form.loginPassword"
>
<template #suffix>
<template slot="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="payPwd">
<u-form-item label="" prop="payPassword">
<u-input
:password="isPwd2"
:placeholder="'请输入支付密码'"
v-model="form.payPwd"
v-model="form.payPassword"
>
<template #suffix>
<template slot="suffix">
<u-icon
name="eye"
@tap="isPwd2 = !isPwd2"
@ -61,9 +68,9 @@
</template>
</u-input>
</u-form-item>
<u-form-item label="验证码" prop="smsCode">
<u-input v-model="form.smsCode" :placeholder="'请输入验证码'">
<template #suffix>
<u-form-item label="" prop="code">
<u-input v-model="form.code" :placeholder="'请输入验证码'">
<template slot="suffix">
<view class="getCode" @tap="getVilCode">{{ getCode }}</view>
</template>
</u-input>
@ -130,10 +137,10 @@
</view>
</u-form-item>
<u-form-item label=""
prop="loginPwd">
prop="loginPassword">
<u-input :password="isPwd1"
:placeholder="'请输入登录密码'"
v-model="form.loginPwd">
v-model="form.loginPassword">
<template slot="suffix">
<u-icon name="eye"
@tap="isPwd1=!isPwd1"
@ -145,10 +152,10 @@
</u-input>
</u-form-item>
<u-form-item label=""
prop="payPwd">
prop="payPassword">
<u-input :password="isPwd2"
:placeholder="'请输入支付密码'"
v-model="form.payPwd">
v-model="form.payPassword">
<template slot="suffix">
<u-icon name="eye"
@tap="isPwd2=!isPwd2"
@ -176,52 +183,12 @@
</view> -->
</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 class="mask" v-if="isTrue"> </view>
</view>
</template>
<script>
import * as api from '@/config/goods'
import {
getMemberCode,
getPhoneCode,
getRegister,
autoLogin,
} from '@/config/share'
import { setToken } from '@/config/auth.js'
import store from '@/store'
export default {
components: {},
data() {
@ -231,11 +198,6 @@ export default {
pkParent: '',
form: {
memberName: '',
smsCode: '',
loginPwd: '',
payPwd: '',
parentCode: '',
phone: '',
},
isLoading: false,
getCode: '获取验证码',
@ -248,13 +210,11 @@ export default {
isPwd: true,
isPwd1: true,
isPwd2: true,
showSuccessModal: false,
successData: null,
rules: {
parentCode: [
memberCode: [
{
required: true,
message: '请输入推荐编号',
asyncValidator: this.memberCodeRule,
trigger: ['blur'],
},
],
@ -272,21 +232,21 @@ export default {
trigger: ['blur'],
},
],
smsCode: [
code: [
{
required: true,
message: '请输入验证码',
trigger: ['blur'],
},
],
loginPwd: [
loginPassword: [
{
required: true,
message: '请输入登录密码',
trigger: ['blur'],
},
],
payPwd: [
payPassword: [
{
required: true,
message: '请输入支付密码',
@ -316,14 +276,14 @@ export default {
trigger: ['change', 'blur'],
},
],
loginPwd: [
loginPassword: [
{
required: true,
message: '请输入登录密码',
trigger: ['change', 'blur'],
},
],
payPwd: [
payPassword: [
{
required: true,
message: '请输入支付密码',
@ -336,9 +296,10 @@ export default {
onReady() {},
onLoad(options) {
this.pkParent = options.code
this.pkCountry = options.country || ''
this.pkCountry = 1
this.getGenerate()
if (this.pkCountry) {
// this.getCountry()
this.getCountry()
this.form.pkCountry = this.pkCountry
uni.setStorageSync('pkCountry', this.pkCountry)
uni.redirectTo({
@ -354,22 +315,11 @@ export default {
},
onShow() {},
methods: {
getUseInfo() {
getUseInfo().then(res => {
this.userInfo = res.data
})
},
selCountry() {
uni.showModal({
title: '提示',
content: '确认更换自然国',
success: res => {
if (res.confirm) {
this.isCountry = true
}
},
})
setMemberCode() {
// this.form.memberCode = this.form.phone
this.$set(this.form, 'memberCode', this.form.phone)
},
memberCodeRule(rule, value, callback) {
if (!value) {
callback(new Error('请输入会员编号'))
@ -388,99 +338,42 @@ export default {
}
},
getHeader() {
getMemberCode(this.pkParent).then(res => {
this.$set(this.form, 'parentCode', res.data)
console.log(this.form)
api.checkShare().then(res => {
if (res.code != 200) {
this.isTrue = true
} else {
this.isTrue = false
}
})
// api.prefix(this.pkParent).then((res) => {
// this.howHeader = res.msg
// })
},
getGenerate() {
return new Promise((resolve, reject) => {
api.generate().then(res => {
resolve(res)
uni.setStorageSync('mToken', res.msg)
})
})
},
toLogin() {
this.$refs.uForm.validate().then(() => {
this.$refs.uForm.validate().then(res => {
this.isLoading = true
getRegister(Object.assign({}, this.form, { parentCode: this.pkParent }))
api
.regShareMember(
Object.assign({}, this.form, { parent: this.pkParent })
)
.then(res => {
this.isLoading = false
if (res.code == 200) {
this.successData = res.data
this.showSuccessModal = true
} else {
uni.showToast({
title: res.msg || '注册失败',
icon: 'none',
uni.redirectTo({
url:
'/pages/shareRegist/success?allData=' +
JSON.stringify(res.data),
})
}
})
.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,
})
setToken(loginRes.data.access_token)
store.dispatch('GetInfo').then(res => {
uni.switchTab({ url: '/pages/index/index' })
})
// setTimeout(() => {
// uni.reLaunch({
// url: '/pages/index/index',
// })
// }, 1500)
} else {
uni.showToast({
title: loginRes.msg || '自动登录失败',
icon: 'none',
})
}
})
.catch(err => {
console.log(err)
uni.showToast({
title: '自动登录请求失败',
icon: 'none',
})
})
},
hiLogin() {
@ -526,9 +419,9 @@ export default {
// 获取验证码
getVilCode() {
this.startTime()
getPhoneCode({
api
.verification({
phone: this.form.phone,
parentCode: this.pkParent,
})
.then(res => {})
.catch(err => {
@ -558,11 +451,10 @@ export default {
<style lang="scss" scoped>
.content1 {
background: linear-gradient(-45deg, #005bac, #0077c2, #0099e0, #00bfff);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
background-image: url('@/static/images/haiRgeiest1.jpg');
background-size: 100%;
background-repeat: no-repeat;
height: 100vh;
overflow: auto;
}
.content {
background-image: url('@/static/images/huan.jpg');
@ -572,13 +464,14 @@ export default {
background-position: center;
height: 100vh;
}
.title {
font-size: 48rpx;
font-weight: bold;
color: #333;
.tit {
font-size: 48px;
font-family: PangMenZhengDao-Regular, PangMenZhengDao;
font-weight: 400;
color: #ffffff;
text-align: center;
padding-top: 120rpx;
padding-bottom: 80rpx;
padding-top: 80px;
margin-bottom: 20px;
}
.index_header {
background: #f9f9f9;
@ -597,10 +490,8 @@ export default {
padding: 0 120rpx;
}
.formed1 {
margin: 0 40rpx;
padding: 40rpx 30rpx;
background-color: rgba(255, 255, 255, 0.85);
border-radius: 16rpx;
padding: 0 120rpx;
padding-top: 550rpx;
}
.getCode {
font-size: 10px;
@ -634,37 +525,4 @@ 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>