feat(sharePay): 分享下单支付
This commit is contained in:
woody
parent
499f07942a
commit
76a91884c9
4
App.vue
4
App.vue
|
|
@ -8,12 +8,12 @@ export default {
|
|||
setToken(options.query?.token)
|
||||
}
|
||||
const whiteList = [
|
||||
// 'pages/shareRegist/index',
|
||||
'pages/shareRegist/index',
|
||||
// 'pages/shareRegist/success',
|
||||
'pages/login/index',
|
||||
// 'pages/wechatPay/bfPay/',
|
||||
// 'pages/wechatPay/hfPay/',
|
||||
// 'pages/shareArea/hiList',
|
||||
'pages/shareArea/hiList',
|
||||
// 'pages/shareArea/hiOrder',
|
||||
// 'pages/pay/hiPay'
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,65 +1,159 @@
|
|||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: kBank
|
||||
* @Date: 2022-11-21 15:11:22
|
||||
-->
|
||||
<template>
|
||||
<view>
|
||||
<!-- v-if="user.skin == 0" -->
|
||||
<u-tabbar v-if="systemSkin === 0" :value="current ? current : 0" @change="tabbarChange" :fixed="true" :placeholder="false"
|
||||
:border="false" :safeAreaInsetBottom="true" inactiveColor="#666666" activeColor="#333333">
|
||||
<u-tabbar
|
||||
v-if="systemSkin === 0"
|
||||
:value="current ? current : 0"
|
||||
@change="tabbarChange"
|
||||
:fixed="true"
|
||||
:placeholder="false"
|
||||
:border="false"
|
||||
:safeAreaInsetBottom="true"
|
||||
inactiveColor="#666666"
|
||||
activeColor="#333333"
|
||||
>
|
||||
<u-tabbar-item :text="'首页'">
|
||||
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/one1.png"></image>
|
||||
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/one2.png"></image>
|
||||
</u-tabbar-item>
|
||||
<u-tabbar-item :text="'站内信'">
|
||||
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/two1.png"></image>
|
||||
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/two2.png"></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon"
|
||||
slot="active-icon"
|
||||
src="@/static/images/one1.png"
|
||||
></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon"
|
||||
slot="inactive-icon"
|
||||
src="@/static/images/one2.png"
|
||||
></image>
|
||||
</u-tabbar-item>
|
||||
<u-tabbar-item :text="'会员专区'">
|
||||
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/five1.jpg"></image>
|
||||
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/five2.jpg"></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon"
|
||||
slot="active-icon"
|
||||
src="@/static/images/five1.jpg"
|
||||
></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon"
|
||||
slot="inactive-icon"
|
||||
src="@/static/images/five2.jpg"
|
||||
></image>
|
||||
</u-tabbar-item>
|
||||
<u-tabbar-item :text="'个人推广'">
|
||||
<image
|
||||
class="u-page__item__slot-icon"
|
||||
slot="active-icon"
|
||||
src="@/static/images/share-act.svg"
|
||||
></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon"
|
||||
slot="inactive-icon"
|
||||
src="@/static/images/share.svg"
|
||||
></image>
|
||||
</u-tabbar-item>
|
||||
|
||||
<u-tabbar-item :text="'购物车'" :badge="shopCarLength">
|
||||
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/three1.png"></image>
|
||||
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/three2.png"></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon"
|
||||
slot="active-icon"
|
||||
src="@/static/images/three1.png"
|
||||
></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon"
|
||||
slot="inactive-icon"
|
||||
src="@/static/images/three2.png"
|
||||
></image>
|
||||
</u-tabbar-item>
|
||||
|
||||
<u-tabbar-item :text="'我的'">
|
||||
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/fore1.png"></image>
|
||||
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/fore2.png"></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon"
|
||||
slot="active-icon"
|
||||
src="@/static/images/fore1.png"
|
||||
></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon"
|
||||
slot="inactive-icon"
|
||||
src="@/static/images/fore2.png"
|
||||
></image>
|
||||
</u-tabbar-item>
|
||||
</u-tabbar>
|
||||
<u-tabbar :value="current ? current : 0" class="greenEd" v-if="systemSkin === 2" @change="tabbarChange" :fixed="true"
|
||||
:placeholder="false" :border="false" :safeAreaInsetBottom="true" inactiveColor="#666666" activeColor="#333333">
|
||||
<u-tabbar
|
||||
:value="current ? current : 0"
|
||||
class="greenEd"
|
||||
v-if="systemSkin === 2"
|
||||
@change="tabbarChange"
|
||||
:fixed="true"
|
||||
:placeholder="false"
|
||||
:border="false"
|
||||
:safeAreaInsetBottom="true"
|
||||
inactiveColor="#666666"
|
||||
activeColor="#333333"
|
||||
>
|
||||
<u-tabbar-item :text="'首页'">
|
||||
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/one11.jpg"></image>
|
||||
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/one11.jpg"></image>
|
||||
</u-tabbar-item>
|
||||
<u-tabbar-item :text="'站内信'">
|
||||
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/two11.jpg"></image>
|
||||
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/two11.jpg"></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon1"
|
||||
slot="active-icon"
|
||||
src="@/static/images/one11.jpg"
|
||||
></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon1"
|
||||
slot="inactive-icon"
|
||||
src="@/static/images/one11.jpg"
|
||||
></image>
|
||||
</u-tabbar-item>
|
||||
<u-tabbar-item :text="'会员专区'">
|
||||
<image class="u-page__item__slot-icon2" slot="active-icon" src="@/static/images/five11.jpg"></image>
|
||||
<image class="u-page__item__slot-icon2" slot="inactive-icon" src="@/static/images/five11.jpg"></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon2"
|
||||
slot="active-icon"
|
||||
src="@/static/images/five11.jpg"
|
||||
></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon2"
|
||||
slot="inactive-icon"
|
||||
src="@/static/images/five11.jpg"
|
||||
></image>
|
||||
</u-tabbar-item>
|
||||
<u-tabbar-item :text="'个人推广'">
|
||||
<image
|
||||
class="u-page__item__slot-icon1"
|
||||
slot="active-icon"
|
||||
src="@/static/images/share-act.svg"
|
||||
></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon1"
|
||||
slot="inactive-icon"
|
||||
src="@/static/images/share.svg"
|
||||
></image>
|
||||
</u-tabbar-item>
|
||||
|
||||
<u-tabbar-item :text="'购物车'" :badge="shopCarLength">
|
||||
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/three11.jpg"></image>
|
||||
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/three11.jpg"></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon1"
|
||||
slot="active-icon"
|
||||
src="@/static/images/three11.jpg"
|
||||
></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon1"
|
||||
slot="inactive-icon"
|
||||
src="@/static/images/three11.jpg"
|
||||
></image>
|
||||
</u-tabbar-item>
|
||||
|
||||
<u-tabbar-item :text="'我的'">
|
||||
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/fore11.jpg"></image>
|
||||
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/fore11.jpg"></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon1"
|
||||
slot="active-icon"
|
||||
src="@/static/images/fore11.jpg"
|
||||
></image>
|
||||
<image
|
||||
class="u-page__item__slot-icon1"
|
||||
slot="inactive-icon"
|
||||
src="@/static/images/fore11.jpg"
|
||||
></image>
|
||||
</u-tabbar-item>
|
||||
</u-tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
props: {
|
||||
current: Number,
|
||||
|
|
@ -71,14 +165,15 @@ export default {
|
|||
text: '首页',
|
||||
path: 'pages/index/index',
|
||||
},
|
||||
{
|
||||
text: '站内信',
|
||||
path: 'pages/email/index',
|
||||
},
|
||||
{
|
||||
text: '会员专区',
|
||||
path: 'pages/specialArea/index',
|
||||
},
|
||||
{
|
||||
text: '个人推广',
|
||||
path: 'pages/mine/share/index',
|
||||
},
|
||||
|
||||
{
|
||||
text: '购物车',
|
||||
path: 'pages/shoppingCar/index',
|
||||
|
|
@ -94,8 +189,8 @@ export default {
|
|||
computed: {
|
||||
...mapGetters(['shopCarLength', 'user']),
|
||||
systemSkin() {
|
||||
return this.user.skin || 0
|
||||
}
|
||||
return this.user?.skin || 0
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
tabbarChange(e) {
|
||||
|
|
@ -131,11 +226,40 @@ export default {
|
|||
}
|
||||
|
||||
::v-deep .u-tabbar__content__item-wrapper {
|
||||
height: 80px
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
::v-deep .u-tabbar-item {
|
||||
// margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPhone安全区域适配 */
|
||||
|
||||
/* 绿色主题的安全区域适配 */
|
||||
.greenEd {
|
||||
::v-deep .u-tabbar__content {
|
||||
background: linear-gradient(to bottom, #fff, #b6fdda);
|
||||
|
||||
/* 绿色主题的安全区域背景 */
|
||||
&::after {
|
||||
background: #b6fdda;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 针对不同屏幕尺寸的优化 */
|
||||
@media screen and (max-height: 667px) {
|
||||
/* iPhone SE等小屏设备 */
|
||||
::v-deep .u-tabbar__content__item-wrapper {
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height: 812px) {
|
||||
/* iPhone X及以上机型 */
|
||||
::v-deep .u-tabbar__content__item-wrapper {
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,286 +0,0 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="seach">
|
||||
<view class="seach_i">
|
||||
<u--input prefixIcon="search" v-model="queryParams.memberInfo"
|
||||
prefixIconStyle="font-size: 22px;color: #909399;height:32px" border="none"
|
||||
:placeholder="'请输入会员编号或姓名查询'" suffixIconStyle="color: #909399"></u--input>
|
||||
</view>
|
||||
<!-- <view class="neibox" @click="listShow=true">
|
||||
<view>{{thegrade?thegrade:'注册等级'}}</view>
|
||||
<u-icon name="arrow-down-fill" color="#000000" size="14"></u-icon>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
<!-- 日期区间 -->
|
||||
<view class="timeSlide">
|
||||
<view class="timeA">{{'日期区间'}}</view>
|
||||
<view class="timeB" @click="openDate(0)">
|
||||
{{ queryParams.startCreationTime?queryParams.startCreationTime:'开始时间' }}
|
||||
</view>
|
||||
<view class="timeA">{{'至'}}</view>
|
||||
<view class="timeB" @click="openDate(1)">
|
||||
{{ queryParams.endCreationTime?queryParams.endCreationTime:'结束时间' }}
|
||||
</view>
|
||||
<view class="seatch_r" @click="clickTap()">
|
||||
<u-icon name="search" size="22" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="thecontent" v-for='(item,index) in dataList' :key="index">
|
||||
<view class="line_box">
|
||||
<view class='line1'>{{'会员编号'}}</view>
|
||||
<view class='line2'>{{item.memberCode}}</view>
|
||||
</view>
|
||||
<view class="line_box">
|
||||
<view class='line1'>{{'会员姓名'}}</view>
|
||||
<view class='line2'>{{item.memberName}}</view>
|
||||
</view>
|
||||
|
||||
<view class="line_box">
|
||||
<view class='line1'>{{'联系方式'}}</view>
|
||||
<view class='line2'>{{item.phone}}</view>
|
||||
</view>
|
||||
<view class="line_box">
|
||||
<view class='line1'>
|
||||
{{'注册时间'}}</view>
|
||||
<view class='line2'>{{item.creationTime}}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<u-datetime-picker :closeOnClickOverlay="true" @close="dataShow = false" @cancel="dataShow = false"
|
||||
@confirm="getDate" :show="dataShow" v-model="value1" mode="date"></u-datetime-picker>
|
||||
<u-picker @cancel='listShow=false' :show="listShow" ref="uPicker" :columns="gradeList" @confirm="confirm"
|
||||
keyName='gradeName'></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as mar from "@/config/market.js"
|
||||
import {
|
||||
formatMsToDate
|
||||
} from '@/util/index'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navIndex:0,
|
||||
navList: [
|
||||
{ name: '直推列表',path:"0",menuKey:'' },
|
||||
{ name: '三单循环',path:"0",menuKey:''},
|
||||
{ name: '免费注册' ,path:"0",menuKey:'' },
|
||||
],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
memberInfo: "",
|
||||
startCreationTime: "",
|
||||
endCreationTime: "",
|
||||
pkRegisterGrade: ""
|
||||
},
|
||||
dataShow: false,
|
||||
timeIndex: 0,
|
||||
listShow: false,
|
||||
thegrade: "",
|
||||
value1: '',
|
||||
gradeList: [],
|
||||
dataList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDataList()
|
||||
this.value1 = Number(new Date())
|
||||
},
|
||||
onLoad() {
|
||||
// this.getOthers()
|
||||
|
||||
},
|
||||
methods: {
|
||||
clickTap(){
|
||||
this.dataList =[]
|
||||
this.getDataList()
|
||||
},
|
||||
clickHref(index){
|
||||
this.navIndex = index
|
||||
},
|
||||
getMenuLists(){
|
||||
mar.menuList().then((res) => {
|
||||
console.error(res)
|
||||
res.data.forEach((item)=>{
|
||||
if(item.menuKey == 'directList'){
|
||||
this.navList[0].menuKey = 'directList'
|
||||
}
|
||||
if(item.menuKey == 'attractDetailList'){
|
||||
this.navList[1].menuKey = 'attractDetailList'
|
||||
}
|
||||
if(item.menuKey == 'haiList'){
|
||||
this.navList[2].menuKey = 'haiList'
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
getOthers() {
|
||||
mar.getGradeList().then((res) => {
|
||||
this.gradeList = [res.data];
|
||||
});
|
||||
},
|
||||
getDataList(num) {
|
||||
this.queryParams.pageNum = num || 1
|
||||
mar.seaFlourList(this.queryParams).then(res => {
|
||||
this.dataList = [...this.dataList,...res.rows]
|
||||
|
||||
})
|
||||
},
|
||||
openDate(index) {
|
||||
this.timeIndex = index
|
||||
this.dataShow = true
|
||||
},
|
||||
confirm(e) {
|
||||
this.queryParams.pkRegisterGrade = e.value[0].pkId
|
||||
this.thegrade = e.value[0].gradeName
|
||||
this.listShow = false
|
||||
},
|
||||
getDate(e) {
|
||||
if (this.timeIndex == 1) {
|
||||
this.queryParams.endCreationTime = formatMsToDate(e.value)
|
||||
} else {
|
||||
this.queryParams.startCreationTime = formatMsToDate(e.value)
|
||||
}
|
||||
this.dataShow = false
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/*左侧分类视图*/
|
||||
.left_scrol_style{
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
.styles {
|
||||
border: none !important;
|
||||
color: #fff !important;
|
||||
background: #d61820;
|
||||
}
|
||||
.top-lists{
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
padding: 30rpx 30rpx 0 0;
|
||||
background-color: #fff;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
.nav-view{
|
||||
width: 200rpx;
|
||||
cursor: pointer;
|
||||
padding: 0 26rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #999999;
|
||||
font-size: 14rpx;
|
||||
text-align: center;
|
||||
line-height: 44rpx;
|
||||
margin-left: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
background: #F2F2F2;
|
||||
|
||||
.seach {
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
padding: 20rpx 23rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-bottom: 2rpx solid #eee;
|
||||
|
||||
.seach_i {
|
||||
padding: 0 20rpx;
|
||||
border-radius: 34rpx;
|
||||
background: #fff;
|
||||
flex: 1;
|
||||
background: #f5f6f8;
|
||||
// margin-right: 40rpx;
|
||||
}
|
||||
|
||||
.neibox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.timeSlide {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 38rpx 26rpx;
|
||||
justify-content: space-between;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.timeA {
|
||||
font-size: 26rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
margin-right: 46rpx;
|
||||
}
|
||||
|
||||
.timeB {
|
||||
font-size: 24rpx;
|
||||
font-family: Arial;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.seatch_r {
|
||||
background: #005BAC;
|
||||
border-radius: 50%;
|
||||
padding: 8rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.thecontent {
|
||||
background-color: #FFFFFF;
|
||||
margin-top: 25rpx;
|
||||
margin-bottom: 21rpx;
|
||||
padding: 10rpx 23rpx 30rpx 23rpx;
|
||||
|
||||
.line_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 25rpx;
|
||||
|
||||
.line1 {
|
||||
font-size: 26rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.line2 {
|
||||
font-size: 26rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.line3 {
|
||||
font-size: 26rpx;
|
||||
font-family: Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
color: rgba(251, 48, 36, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,320 @@
|
|||
<template>
|
||||
<view class="default-share-page">
|
||||
<!-- 背景图片，替代CSS background -->
|
||||
<image
|
||||
class="share-bg-image"
|
||||
src="/static/images/share-bg.jpg"
|
||||
mode="scaleToFill"
|
||||
crossorigin="anonymous"
|
||||
@load="onBackgroundImageLoad"
|
||||
@error="onBackgroundImageError"
|
||||
></image>
|
||||
|
||||
<view class="share-wrapper">
|
||||
<view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
|
||||
<!-- 二维码样式区域 - 用户自定义样式位置 -->
|
||||
<view class="qr-code-outer">
|
||||
<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"
|
||||
style="
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
margin-top: 20rpx;
|
||||
"
|
||||
>{{ desensitization(userInfo.memberCode) }}</text
|
||||
>
|
||||
|
||||
<!-- 下载按钮 - 仅在非微信环境显示 -->
|
||||
<button
|
||||
v-if="!isWechat && shareButtonShow"
|
||||
class="share-button"
|
||||
@click="sharePage"
|
||||
>
|
||||
保存图片并分享
|
||||
</button>
|
||||
</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;
|
||||
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;
|
||||
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>
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
# 分享组件说明
|
||||
|
||||
## SpecialSharePage 组件
|
||||
|
||||
特殊场景分享页面组件，通过接口获取base64格式的背景图片。
|
||||
|
||||
### 主要特性
|
||||
|
||||
- 📱 **响应式**：适配各种屏幕尺寸
|
||||
- 🎨 **可定制**：支持样式自定义
|
||||
- 🔄 **重试机制**：支持接口调用失败时的重试
|
||||
- 🌐 **接口获取**：自动通过接口获取背景图片
|
||||
- 🖼️ **Base64支持**：接口返回base64格式的背景图片
|
||||
|
||||
### 使用方法
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<SpecialSharePage
|
||||
:qrCodeImage="base64QrCodeImage"
|
||||
:userInfo="userInfo"
|
||||
:isLoaded="true"
|
||||
@share-generated="handleShareGenerated"
|
||||
@background-image-error="handleError"
|
||||
@background-image-retry="handleRetry"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SpecialSharePage from '@/components/share/SpecialSharePage.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SpecialSharePage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
base64QrCodeImage:
|
||||
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQAAAADK...',
|
||||
userInfo: {
|
||||
memberCode: '12345678',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleShareGenerated(dataUrl) {
|
||||
console.log('生成的分享图片:', dataUrl)
|
||||
// 处理生成的图片
|
||||
},
|
||||
handleError(error) {
|
||||
console.error('背景图片错误:', error)
|
||||
},
|
||||
handleRetry(retryCount) {
|
||||
console.log('背景图片重试:', retryCount)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 |
|
||||
| ----------------------- | ------- | ------ | ------------------------ |
|
||||
| `qrCodeImage` | String | '' | 二维码图片（base64格式） |
|
||||
| `userInfo` | Object | {} | 用户信息对象 |
|
||||
| `isWechat` | Boolean | false | 是否为微信环境 |
|
||||
| `isLoaded` | Boolean | false | 是否加载完成 |
|
||||
| `skipImageVerification` | Boolean | false | 跳过图片验证（调试用） |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 参数 | 说明 |
|
||||
| ------------------------ | ---------- | ---------------- |
|
||||
| `share-generated` | dataUrl | 分享图片生成成功 |
|
||||
| `background-image-error` | error | 背景图片加载错误 |
|
||||
| `background-image-retry` | retryCount | 背景图片重试 |
|
||||
|
||||
### 方法
|
||||
|
||||
| 方法名 | 说明 |
|
||||
| ------------------------------- | ------------------------------------ |
|
||||
| `generateShareImage()` | 生成分享图片 |
|
||||
| `retryGetBackgroundImage()` | 手动重试获取背景图 |
|
||||
| `getStatusInfo()` | 获取当前状态信息（调试用） |
|
||||
| `handleShareGenerated(dataUrl)` | 处理图片生成成功后的逻辑（内部方法） |
|
||||
|
||||
### 接口配置
|
||||
|
||||
组件使用 `getSharedImg` 接口获取背景图片：
|
||||
|
||||
```javascript
|
||||
// 在 config/login.js 中配置接口
|
||||
export const getSharedImg = () => {
|
||||
return http.get('/api/share/background')
|
||||
}
|
||||
```
|
||||
|
||||
接口应返回以下格式：
|
||||
|
||||
```javascript
|
||||
{
|
||||
code: 200,
|
||||
data: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...',
|
||||
message: 'success'
|
||||
}
|
||||
```
|
||||
|
||||
### 调试
|
||||
|
||||
```javascript
|
||||
// 生成分享图片
|
||||
this.$refs.specialSharePage.generateShareImage()
|
||||
|
||||
// 手动重试获取背景图
|
||||
this.$refs.specialSharePage.retryGetBackgroundImage()
|
||||
|
||||
// 获取当前状态信息
|
||||
const status = this.$refs.specialSharePage.getStatusInfo()
|
||||
console.log('组件状态:', status)
|
||||
/*
|
||||
输出示例：
|
||||
{
|
||||
specialBackgroundImage: '123456 bytes',
|
||||
qrCodeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEU...',
|
||||
backgroundImageLoaded: true,
|
||||
isLoadingBackground: false,
|
||||
imageLoadRetryCount: 0,
|
||||
isReady: true
|
||||
}
|
||||
*/
|
||||
```
|
||||
|
||||
### 工作流程
|
||||
|
||||
1. **组件挂载**：自动调用 `getSharedImg` 接口获取背景图
|
||||
2. **显示加载**：显示"正在获取背景图片..."状态
|
||||
3. **接口响应**：处理接口返回的base64背景图数据
|
||||
4. **准备就绪**：背景图和二维码都准备好后可以生成分享图片
|
||||
5. **生成图片**：使用html2canvas截取页面生成分享图片
|
||||
6. **处理结果**：
|
||||
- 关闭loading状态
|
||||
- 显示成功提示（"图片生成成功，请长按保存"）
|
||||
- 调用内部 `handleShareGenerated` 方法处理
|
||||
- 通过 `share-generated` 事件通知父组件
|
||||
|
||||
### 图片生成流程
|
||||
|
||||
```
|
||||
用户点击生成按钮
|
||||
↓
|
||||
检查前置条件（二维码、背景图）
|
||||
↓
|
||||
显示 "生成图片中..." loading
|
||||
↓
|
||||
使用 html2canvas 截取页面
|
||||
↓
|
||||
生成成功 → 关闭loading → 显示成功提示 → 发送事件
|
||||
↓
|
||||
生成失败 → 关闭loading → 显示错误提示
|
||||
```
|
||||
|
||||
### 错误处理
|
||||
|
||||
- **接口调用失败**：自动重试最多3次
|
||||
- **重试机制**：通过 `background-image-retry` 事件通知重试状态
|
||||
- **最终失败**：通过 `background-image-error` 事件通知错误
|
||||
|
||||
### 注意事项
|
||||
|
||||
1. 确保 `getSharedImg` 接口返回完整的base64格式图片
|
||||
2. 组件会在mounted生命周期自动调用接口
|
||||
3. 支持手动重试机制，适用于网络不稳定的情况
|
||||
4. 生成的图片为JPEG格式，质量为100%
|
||||
5. 组件支持长按保存分享图片
|
||||
6. 接口失败时会显示相应的错误状态
|
||||
7. **图片生成成功后会自动显示提示信息**，无需在父组件中重复处理
|
||||
8. **组件内部和外部都会收到图片生成事件**，可根据需要在父组件中添加额外逻辑
|
||||
|
|
@ -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>
|
||||
115
config/goods.js
115
config/goods.js
|
|
@ -1,86 +1,119 @@
|
|||
/*
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: kBank
|
||||
* @Date: 2022-11-23 11:10:29
|
||||
*/
|
||||
/*
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: kBank
|
||||
* @Date: 2022-11-23 11:10:29
|
||||
*/
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: kBank
|
||||
* @Date: 2022-11-23 11:10:29
|
||||
*/
|
||||
const http = uni.$u.http
|
||||
|
||||
//商品列表
|
||||
export const getAllGoods = (params) => http.post('/sale/api/wares/query-spe-wares', params)
|
||||
export const getAllGoods = params =>
|
||||
http.post('/sale/api/wares/query-spe-wares', params)
|
||||
//商品详情
|
||||
export const waresDetail = (params) => http.post('/sale/api/wares/query-spe-wares-detail', params)
|
||||
export const waresDetail = params =>
|
||||
http.post('/sale/api/wares/query-spe-wares-detail', params)
|
||||
//嗨粉海粉短信
|
||||
export const verification = (params) => http.get('/member/api/sms/fans-verification', { params })
|
||||
export const verification = params =>
|
||||
http.get('/member/api/sms/fans-verification', { params })
|
||||
//嗨粉选择省市区
|
||||
export const getAllAreaList = (params) => http.get('system/api/area/provinceList', { params })
|
||||
export const getAllAreaList = params =>
|
||||
http.get('system/api/area/provinceList', { params })
|
||||
//嗨粉选择国家
|
||||
export const getCountry = (params) => http.get('system/api/country/list', { params })
|
||||
export const getCountry = params =>
|
||||
http.get('system/api/country/list', { params })
|
||||
//海粉注册
|
||||
export const regShareMember = (params) => http.post('/member/api/member/reg-share-member', params)
|
||||
export const regShareMember = params =>
|
||||
http.post('/member/api/member/reg-share-member', params)
|
||||
//hi粉注册
|
||||
export const hiRegister = (params) => http.post('/member/api/fans/register', params)
|
||||
export const hiRegister = params =>
|
||||
http.post('/member/api/fans/register', params)
|
||||
//幂等性
|
||||
export const generate = (params) => http.get('/system/api/idempotent/generate', { params })
|
||||
export const generate = params =>
|
||||
http.get('/system/api/idempotent/generate', { params })
|
||||
//发货
|
||||
export const deliveryList = (params) => http.get('/system/pub/enums/delivery-list', { params })
|
||||
export const deliveryList = params =>
|
||||
http.get('/system/pub/enums/delivery-list', { params })
|
||||
//海粉渠道
|
||||
export const jxhhSource = (params) => http.get('/sale/api/t-source/list/' + params)
|
||||
export const jxhhSource = params =>
|
||||
http.get('/sale/api/t-source/list/' + params)
|
||||
//海粉分类
|
||||
export const optionList = (params) => http.post('/sale/api/twares-category-category/option-list', params )
|
||||
export const optionList = params =>
|
||||
http.post('/sale/api/twares-category-category/option-list', params)
|
||||
//海粉商品
|
||||
export const sharingWares = (params) => http.get('/sale/api/wares/sharing-zone-wares', { params })
|
||||
export const sharingWares = params =>
|
||||
http.get('/sale/api/wares/sharing-zone-wares', { params })
|
||||
//分享邮费查询
|
||||
export const queryAdressPostage = (params) => http.post('/sale/api/order/self-order-postage', params)
|
||||
export const queryAdressPostage = params =>
|
||||
http.post('/sale/api/order/self-order-postage', params)
|
||||
//嗨粉分享确认订单
|
||||
export const confirmFunShareOrder = (params) => http.post('/sale/api/order/confirm-self-fun-order', params)
|
||||
export const confirmFunShareOrder = params =>
|
||||
http.post('/sale/api/order/confirm-self-fun-order', params)
|
||||
//海粉商品详情
|
||||
export const sharingWaresDetail = (params) => http.get('/sale/api/wares/query-spe-sharing-wares-detail', { params })
|
||||
export const sharingWaresDetail = params =>
|
||||
http.get('/sale/api/wares/query-spe-sharing-wares-detail', { params })
|
||||
//海粉订单确认
|
||||
export const confirmShareOrder = (params) => http.post('/sale/api/order/confirm-share-order', params)
|
||||
export const confirmShareOrder = params =>
|
||||
http.post('/sale/api/order/confirm-share-order', params)
|
||||
|
||||
//获取购物车
|
||||
export const getShopping = (params) => http.get('/sale/api/shopping/getShopping', { params })
|
||||
export const getShopping = params =>
|
||||
http.get('/sale/api/shopping/getShopping', { params })
|
||||
//分类列表
|
||||
export const classifyList = (params) => http.get('/sale/api/area-classify/list', { params })
|
||||
export const classifyList = params =>
|
||||
http.get('/sale/api/area-classify/list', { params })
|
||||
//加减购物车
|
||||
export const plusReduceShopping = (params) => http.post('/sale/api/shopping/plusReduceShopping', params)
|
||||
export const plusReduceShopping = params =>
|
||||
http.post('/sale/api/shopping/plusReduceShopping', params)
|
||||
//多删购物车
|
||||
export const batchDelShopping = (params) => http.post('/sale/api/shopping/batchDelShopping', params)
|
||||
export const batchDelShopping = params =>
|
||||
http.post('/sale/api/shopping/batchDelShopping', params)
|
||||
//添加购物车
|
||||
export const addShopping = (params) => http.post('/sale/api/shopping/addShopping', params)
|
||||
export const addShopping = params =>
|
||||
http.post('/sale/api/shopping/addShopping', params)
|
||||
//菜单权限
|
||||
export const menuList = (params) => http.get('/system/api/menu/list', { params })
|
||||
export const menuList = params => http.get('/system/api/menu/list', { params })
|
||||
//海粉分享
|
||||
export const shareCode = (params) => http.get('/member/api/share/share-code-h5', { params })
|
||||
export const shareCode = params =>
|
||||
http.get('/member/api/share/share-code-h5', { params })
|
||||
//嗨粉分享
|
||||
export const fansCode = (params) => http.get('/member/api/share/fans-code-h5', { params })
|
||||
export const fansCode = params =>
|
||||
http.get('/member/api/share/fans-code-h5', { params })
|
||||
//获取购物车数量
|
||||
export const getShoppingCount = (params) => http.get('/sale/api/shopping/getShoppingCount', { params })
|
||||
export const getShoppingCount = params =>
|
||||
http.get('/sale/api/shopping/getShoppingCount', { params })
|
||||
//获取购物车数小
|
||||
export const getSmallCount = (params) => http.get('/sale/api/shopping/getAreaShoppingCount', { params })
|
||||
export const getSmallCount = params =>
|
||||
http.get('/sale/api/shopping/getAreaShoppingCount', { params })
|
||||
//获取分享前缀
|
||||
export const prefix = (params) => http.get('/member/api/member/query-country-prefix/' + params, )
|
||||
export const prefix = params =>
|
||||
http.get('/member/api/member/query-country-prefix/' + params)
|
||||
//校验分享编号
|
||||
export const validateMember = (params) => http.get('/member/api/member/validate-share-member/' + params, )
|
||||
export const validateMember = params =>
|
||||
http.get('/member/api/member/validate-share-member/' + params)
|
||||
|
||||
//获取国家
|
||||
export const currencyList = (params) => http.get('/system/api/country/list' , {params} )
|
||||
export const currencyList = params =>
|
||||
http.get('/system/api/country/list', { params })
|
||||
//0元注册时
|
||||
export const checkShare = (params) => http.get('/member/api/share/check-share-code' , {params} )
|
||||
export const checkShare = params =>
|
||||
http.get('/member/api/share/check-share-code', { params })
|
||||
|
||||
//海粉订单详情
|
||||
export const waresinfo = (params) => http.post('/sale/api/wares/query-confirm-waresinfo', params)
|
||||
export const waresinfo = params =>
|
||||
http.post('/sale/api/wares/query-confirm-waresinfo', params)
|
||||
|
||||
//hi粉确认订单
|
||||
export const fansConfirm = (params) => http.post('/sale/api/order/fans-confirm-order', params)
|
||||
export const fansConfirm = params =>
|
||||
http.post('/sale/api/order/fans-confirm-order', params)
|
||||
//购物车注册下单校验弹框
|
||||
export const energyShop = (params) => http.post('/sale/api/wares/query-energy-silo', params)
|
||||
export const energyShop = params =>
|
||||
http.post('/sale/api/wares/query-energy-silo', params)
|
||||
//hi粉确认订单
|
||||
export const energyShopSilo = (params) => http.post('/sale/api/order/valid-silo', params)
|
||||
export const energyShopSilo = params =>
|
||||
http.post('/sale/api/order/valid-silo', params)
|
||||
|
|
|
|||
|
|
@ -105,9 +105,9 @@ export const getMenuList = params =>
|
|||
//海粉默认登录（H5扫码使用）
|
||||
export const autoLogin = params =>
|
||||
http.post('/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('/member/api/member-gift/update-gift', params)
|
||||
|
|
|
|||
|
|
@ -9,62 +9,61 @@
|
|||
const http = uni.$u.http
|
||||
|
||||
//考核明细接口
|
||||
export const getAssessList = (params) => http.get('/member/api/assess/assessList', {
|
||||
params
|
||||
})
|
||||
export const getAssessList = params =>
|
||||
http.get('/member/api/assess/assessList', {
|
||||
params,
|
||||
})
|
||||
|
||||
//考核分红积分
|
||||
export const getAssAchieve = (params) => http.get('/member/api/assess/assAchieve', {
|
||||
params
|
||||
})
|
||||
|
||||
export const getAssAchieve = params =>
|
||||
http.get('/member/api/assess/assAchieve', {
|
||||
params,
|
||||
})
|
||||
|
||||
//考核状态复购考核
|
||||
export const getAssessStatusList = (params) => http.get('/system/pub/enums/member-assess-status', {
|
||||
params
|
||||
})
|
||||
export const getAssessStatusList = params =>
|
||||
http.get('/system/pub/enums/member-assess-status', {
|
||||
params,
|
||||
})
|
||||
|
||||
//注册等级下拉选
|
||||
export const getGradeList = (params) => http.get('/system/api/grade/list', {
|
||||
params
|
||||
})
|
||||
|
||||
export const getGradeList = params =>
|
||||
http.get('/system/api/grade/list', {
|
||||
params,
|
||||
})
|
||||
|
||||
//注册列表
|
||||
export const getRegList = (params) => http.get('/member/api/market-news/reg-list', {
|
||||
params
|
||||
})
|
||||
export const getRegList = params =>
|
||||
http.get('/member/api/market-news/reg-list', {
|
||||
params,
|
||||
})
|
||||
|
||||
//招商列表
|
||||
export const tripleCycleList = (params) => http.get('/member/api/market-news/triple_cycle_list', {
|
||||
params
|
||||
})
|
||||
|
||||
//海粉列表
|
||||
export const seaFlourList = (params) => http.get('/member/api/market-news/sea_flour_list', {
|
||||
params
|
||||
})
|
||||
export const tripleCycleList = params =>
|
||||
http.get('/member/api/market-news/triple_cycle_list', {
|
||||
params,
|
||||
})
|
||||
|
||||
//菜单列表
|
||||
export const menuList = (params) => http.get('/system/api/menu/list', {
|
||||
params
|
||||
})
|
||||
export const menuList = params =>
|
||||
http.get('/system/api/menu/list', {
|
||||
params,
|
||||
})
|
||||
//直推列表
|
||||
export const parentList = (params) => http.get('/member/api/member/parent-list', {
|
||||
params
|
||||
})
|
||||
|
||||
|
||||
export const parentList = params =>
|
||||
http.get('/member/api/member/parent-list', {
|
||||
params,
|
||||
})
|
||||
|
||||
// 抗衰能量仓列表
|
||||
export const getSiloList = (params) => http.post('/member/api/silo/list', params)
|
||||
|
||||
|
||||
export const getSiloList = params => http.post('/member/api/silo/list', params)
|
||||
|
||||
//查询能量仓明细
|
||||
export const getSiloDetail = (params) => http.post('/member/api/silo/detail', params)
|
||||
export const getSiloDetail = params =>
|
||||
http.post('/member/api/silo/detail', params)
|
||||
|
||||
// 沙棘公益列表
|
||||
export const treeList = (params) => http.get('/activity/api/tree-rule-pick/member-info-list', {
|
||||
params
|
||||
})
|
||||
export const treeList = params =>
|
||||
http.get('/activity/api/tree-rule-pick/member-info-list', {
|
||||
params,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export const bindTlConfirm = params =>
|
|||
//汇付绑卡
|
||||
export const bindHfConfirm = params =>
|
||||
http.post('/pay/ada-fast/bind-confirm', params)
|
||||
//银行卡支付获取验证码
|
||||
|
||||
export const unifiedorder = params => http.post('/pay/unifiedorder', params)
|
||||
//汇付银行卡确认
|
||||
export const payConfirmHf = params =>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ module.exports = vm => {
|
|||
|
||||
//#ifdef DEV_SERVER
|
||||
console.log('DEV_SERVER')
|
||||
config.baseURL = 'http://192.168.0.86:8080'
|
||||
config.baseURL = 'http://localhost:8080'
|
||||
//#endif
|
||||
|
||||
//#ifdef QA_SERVER
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
const http = uni.$u.http
|
||||
|
||||
export const getShareCode = params =>
|
||||
http.get('/member/api/share/get-shared-img', { params })
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@zumer/snapdom": "^1.9.6",
|
||||
"axios": "^1.5.0",
|
||||
"echarts": "^4.9.0",
|
||||
"file-saver": "^2.0.5",
|
||||
|
|
@ -766,6 +767,12 @@
|
|||
"dev": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@zumer/snapdom": {
|
||||
"version": "1.9.6",
|
||||
"resolved": "https://registry.npmjs.org/@zumer/snapdom/-/snapdom-1.9.6.tgz",
|
||||
"integrity": "sha512-JxEJKoGCZpUfai/Nboii6a0vJWoYACO7ohGjnPSGRjhv0V0Mglq8acPaZcAGy4K+Mh4at+D05NAjBKqzQNTOHA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "6.4.2",
|
||||
"resolved": "https://mirrors.cloud.tencent.com/npm/acorn/-/acorn-6.4.2.tgz",
|
||||
|
|
@ -3557,7 +3564,7 @@
|
|||
},
|
||||
"node_modules/html2canvas": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
|
||||
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
|
||||
"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
"description": "h5",
|
||||
"main": "main.js",
|
||||
"dependencies": {
|
||||
"@zumer/snapdom": "^1.9.6",
|
||||
"axios": "^1.5.0",
|
||||
"echarts": "^4.9.0",
|
||||
"file-saver": "^2.0.5",
|
||||
|
|
|
|||
|
|
@ -821,6 +821,13 @@
|
|||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/share/index",
|
||||
"style": {
|
||||
"navigationBarHidden": true,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/honorHall/honorHall",
|
||||
"style": {
|
||||
|
|
@ -881,7 +888,7 @@
|
|||
"pagePath": "pages/shoppingCar/index"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/email/index"
|
||||
"pagePath": "pages/mine/share/index"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/mine/index"
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
</scroll-view>
|
||||
<direct v-if="navIndex == 0" ref="sgsyData" />
|
||||
<circulation v-if="navIndex == 1" ref="sgsyData" />
|
||||
<hignFans v-if="navIndex == 2" ref="sgsyData" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -24,10 +23,9 @@
|
|||
import * as mar from '@/config/market.js'
|
||||
import direct from '@/components/invest/direct.vue'
|
||||
import circulation from '@/components/invest/circulation.vue'
|
||||
import hignFans from '@/components/invest/hignFans.vue'
|
||||
import { formatMsToDate } from '@/util/index'
|
||||
export default {
|
||||
components: { direct, hignFans, circulation },
|
||||
components: { direct, circulation },
|
||||
data() {
|
||||
return {
|
||||
navIndex: 0,
|
||||
|
|
@ -122,7 +120,7 @@ export default {
|
|||
.styles {
|
||||
border: none !important;
|
||||
color: #fff !important;
|
||||
background: #005BAC;
|
||||
background: #005bac;
|
||||
}
|
||||
.top-lists {
|
||||
width: 100%;
|
||||
|
|
@ -202,7 +200,7 @@ export default {
|
|||
}
|
||||
|
||||
.seatch_r {
|
||||
background: #005BAC;
|
||||
background: #005bac;
|
||||
border-radius: 50%;
|
||||
padding: 8rpx;
|
||||
margin-left: 24rpx;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,243 @@
|
|||
<template>
|
||||
<view
|
||||
class="share-page"
|
||||
style="display: flex; flex-direction: column; height: 100vh"
|
||||
>
|
||||
<view id="shareContainer" class="share-container">
|
||||
<!-- 默认场景 -->
|
||||
<DefaultSharePage
|
||||
v-if="isDefaultScene"
|
||||
:qrCodeImage="qrCodeImage"
|
||||
:userInfo="userInfo"
|
||||
:isWechat="isWechat"
|
||||
:isLoaded="isLoaded"
|
||||
@share-generated="handleShareGenerated"
|
||||
ref="defaultSharePage"
|
||||
/>
|
||||
|
||||
<!-- 特殊场景 -->
|
||||
<SpecialSharePage
|
||||
v-if="isSpecialScene && sourceVisible"
|
||||
:qrCodeImage="qrCodeImage"
|
||||
:specialBackgroundImage="userInfo.sharePosterImage"
|
||||
:userInfo="userInfo"
|
||||
:isWechat="isWechat"
|
||||
:isLoaded="isLoaded"
|
||||
@share-generated="handleShareGenerated"
|
||||
ref="specialSharePage"
|
||||
/>
|
||||
|
||||
<!-- 微信环境全屏图片显示 -->
|
||||
<view
|
||||
class="wechat-fullscreen-overlay"
|
||||
v-show="(isWechat || userInfo.sharePosterImage) && generatedImageUrl"
|
||||
>
|
||||
<img
|
||||
class="fullscreen-image"
|
||||
:src="generatedImageUrl"
|
||||
width="100%"
|
||||
height="100%"
|
||||
@click.stop=""
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<cl-tabbar class="tabbar" :current="2" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fansCode as getShareCode } from '@/config/goods'
|
||||
import clTabbar from '@/components/cl-tabbar.vue'
|
||||
import DefaultSharePage from '@/components/share/DefaultSharePage.vue'
|
||||
import SpecialSharePage from '@/components/share/SpecialSharePage.vue'
|
||||
|
||||
export default {
|
||||
name: 'ShareQRCode',
|
||||
components: {
|
||||
'cl-tabbar': clTabbar,
|
||||
DefaultSharePage,
|
||||
SpecialSharePage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
qrCodeImage: '',
|
||||
canvasWidth: 375,
|
||||
canvasHeight: 800,
|
||||
isLoaded: 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()
|
||||
// 获取屏幕尺寸
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
this.canvasWidth = res.windowWidth
|
||||
this.canvasHeight = res.windowHeight
|
||||
},
|
||||
})
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true,
|
||||
})
|
||||
},
|
||||
onReady() {
|
||||
// 短暂延迟后启用加载动画
|
||||
setTimeout(() => {
|
||||
this.isLoaded = true
|
||||
}, 100)
|
||||
},
|
||||
methods: {
|
||||
// 检测微信环境
|
||||
checkWechatEnvironment() {
|
||||
const ua = navigator.userAgent.toLowerCase()
|
||||
this.isWechat = ua.includes('micromessenger')
|
||||
console.log('微信环境检测:', this.isWechat)
|
||||
},
|
||||
|
||||
// 获取分享二维码
|
||||
handleGetShareCode() {
|
||||
getShareCode()
|
||||
.then(res => {
|
||||
if (res.code === 200 && res.data && res.data.dataStr) {
|
||||
this.qrCodeImage = 'data:image/png;base64,' + res.data.dataStr
|
||||
this.$nextTick(() => {
|
||||
this.generateShareImage()
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '获取分享码失败',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('getShareCode error:', err)
|
||||
uni.showToast({
|
||||
title: '网络错误，请稍后再试',
|
||||
icon: 'none',
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 生成分享图片
|
||||
async generateShareImage() {
|
||||
try {
|
||||
if (this.isSpecialScene) {
|
||||
await this.$refs.specialSharePage.generateShareImage()
|
||||
} else {
|
||||
// 默认场景生成图片
|
||||
await this.$refs.defaultSharePage.sharePage()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('生成分享图片失败:', error)
|
||||
}
|
||||
},
|
||||
|
||||
// 处理分享图片生成完成
|
||||
handleShareGenerated(dataUrl) {
|
||||
uni.hideLoading()
|
||||
this.$nextTick(() => {
|
||||
this.sourceVisible = false
|
||||
})
|
||||
uni.hideLoading()
|
||||
|
||||
if (this.isWechat) {
|
||||
// 微信环境：设置图片供长按保存
|
||||
this.generatedImageUrl = dataUrl
|
||||
} else {
|
||||
// 普通浏览器环境
|
||||
if (this.isSpecialScene) {
|
||||
// 特殊场景：设置图片供长按保存（没有下载按钮）
|
||||
this.generatedImageUrl = dataUrl
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 下载图片
|
||||
downloadImage(dataUrl) {
|
||||
const link = document.createElement('a')
|
||||
link.href = dataUrl
|
||||
link.download = `share_page_${Date.now()}.png`
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.share-container {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 微信环境全屏覆盖样式 */
|
||||
.wechat-fullscreen-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fullscreen-image {
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
position: static;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
:v-deep .u-tabbar--fixed {
|
||||
height: 100px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 667px) {
|
||||
.tabbar {
|
||||
height: 70px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height: 812px) {
|
||||
.tabbar {
|
||||
height: 80px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,162 +13,245 @@
|
|||
<view class="tit1">
|
||||
￥{{ 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 slot="title" class="pf">
|
||||
<img src="@/static/images/under_pay.png" alt="" />
|
||||
<view>{{ '在线支付' }}</view>
|
||||
<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="payList[PAY_AUTH[PAY_TYPE.BAO_FU_WECHAT]]"
|
||||
>
|
||||
<view class="flex_ac_i">
|
||||
<img src="@/static/images/pay_i2.png" alt="" />
|
||||
<view>{{ '宝付微信支付' }}</view>
|
||||
</view>
|
||||
<view class="flex_ac" v-show="this.payList.pay11">
|
||||
<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>
|
||||
</u-radio-group>
|
||||
<u-radio-group v-model="whatPay">
|
||||
<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="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>
|
||||
<view class="flex_ac" v-show="this.payList.pay12">
|
||||
<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>
|
||||
</u-radio-group>
|
||||
<u-radio-group v-model="whatPay">
|
||||
<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="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="#005BAC"
|
||||
size="18"
|
||||
label=""
|
||||
:name="PAY_TYPE.HUI_FU_WECHAT"
|
||||
>
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
<!-- 微信支付 -->
|
||||
<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 class="pad">
|
||||
<view
|
||||
v-for="(item, index) in hfList"
|
||||
:key="index"
|
||||
class="pay_flax flex_bet"
|
||||
@click.prevent="selPayRadio('hf' + index)"
|
||||
>
|
||||
<view class="flax_i">
|
||||
<view>{{ item.bankName }} ({{ item.bankNo }})</view>
|
||||
<view class="fixBind" @click="fixBind(item)">解绑</view>
|
||||
</view>
|
||||
|
||||
<view class="flex_ac" v-show="this.payList.pay13">
|
||||
<view class="flex_ac_i">
|
||||
<img src="@/static/images/pay_i2.png" alt="" />
|
||||
<view>{{ '汇付微信支付' }}</view>
|
||||
<u-radio-group v-model="whatPay">
|
||||
<u-radio
|
||||
activeColor="#005BAC"
|
||||
size="18"
|
||||
label=""
|
||||
:name="PAY_TYPE.HUI_FU_BANK_CARD + index"
|
||||
>
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
<u-radio-group v-model="whatPay">
|
||||
<u-radio activeColor="red" size="14" label="" :name="13">
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
<view class="flex_ac1" v-show="this.payList.pay15">
|
||||
<view class="flex_ac_i">
|
||||
<img src="@/static/images/jdBank.jpg" alt="" />
|
||||
<view>{{ '汇付银行卡' }} ({{ '暂不支持信用卡' }})</view>
|
||||
</view>
|
||||
<view class="pad">
|
||||
<view
|
||||
v-for="(item, index) in hfList"
|
||||
:key="index"
|
||||
class="pay_flax flex_bet"
|
||||
@click.prevent="selPayRadio('hf' + index)"
|
||||
>
|
||||
<view class="flax_i">
|
||||
{{ item.bankName }} ({{ item.bankNo }})
|
||||
</view>
|
||||
<u-radio-group v-model="whatPay">
|
||||
<u-radio
|
||||
activeColor="red"
|
||||
size="14"
|
||||
label=""
|
||||
:name="'hf' + index"
|
||||
>
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
<view class="pay_flax flax_i" @click="bindBank('hf')">
|
||||
<img class="img1" src="@/static/images/addto.png" alt="" />
|
||||
<view>{{ '绑定银行卡' }}</view>
|
||||
</view>
|
||||
<view class="pay_flax flax_i" @click="bindBank('hf')">
|
||||
<img class="img1" src="@/static/images/addto.png" alt="" />
|
||||
<view>{{ '绑定银行卡' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex_ac" v-show="this.payList.pay32">
|
||||
<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_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>
|
||||
<view class="flex_ac1" v-show="this.payList.pay33">
|
||||
<view class="flex_ac_i">
|
||||
<img src="@/static/images/jdBank.jpg" alt="" />
|
||||
<view>{{ '通联银行卡' }} ({{ '暂不支持信用卡' }})</view>
|
||||
<u-radio-group v-model="whatPay">
|
||||
<u-radio
|
||||
activeColor="#005BAC"
|
||||
size="18"
|
||||
label=""
|
||||
:name="PAY_TYPE.TONG_LIAN_WECHAT"
|
||||
>
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
<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 class="pad">
|
||||
<view
|
||||
v-for="(item, index) in jdList"
|
||||
:key="index"
|
||||
class="pay_flax flex_bet"
|
||||
@click.prevent="selPayRadio('jd' + 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.JING_DONG_BANK_CARD + index"
|
||||
>
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</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"
|
||||
label=""
|
||||
:name="'tl' + 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 class="pay_flax flax_i" @click="bindBank('jd')">
|
||||
<img class="img1" src="@/static/images/addto.png" alt="" />
|
||||
<view>{{ '绑定银行卡' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex_ac1" v-show="this.payList.pay4">
|
||||
<view class="flex_ac_i">
|
||||
<img src="@/static/images/jdBank.jpg" alt="" />
|
||||
<view>{{ '京东银行卡' }} ({{ '暂不支持信用卡' }})</view>
|
||||
</view>
|
||||
<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="pad">
|
||||
<view
|
||||
v-for="(item, index) in jdList"
|
||||
:key="index"
|
||||
class="pay_flax flex_bet"
|
||||
@click.prevent="selPayRadio('jd' + index)"
|
||||
>
|
||||
<view class="flax_i">
|
||||
{{ item.bankName }} ({{ item.bankNo }})
|
||||
</view>
|
||||
<u-radio-group v-model="whatPay">
|
||||
<u-radio
|
||||
activeColor="red"
|
||||
size="14"
|
||||
label=""
|
||||
:name="'jd' + index"
|
||||
>
|
||||
</u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
<view class="pay_flax flax_i" @click="bindBank('jd')">
|
||||
<img class="img1" src="@/static/images/addto.png" alt="" />
|
||||
<view>{{ '绑定银行卡' }}</view>
|
||||
</view>
|
||||
<view class="pay_flax flax_i" @click="bindBank('tl')">
|
||||
<img class="img1" src="@/static/images/addto.png" alt="" />
|
||||
<view>{{ '绑定银行卡' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</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,23 @@ 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
|
||||
export default {
|
||||
components: {
|
||||
hiSuccess,
|
||||
successDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
PAY_TYPE,
|
||||
PAY_AUTH,
|
||||
payList: {},
|
||||
isLoading: false,
|
||||
clockTime: '',
|
||||
|
|
@ -257,12 +351,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 +365,7 @@ export default {
|
|||
sucPay: 0,
|
||||
content: '支付成功',
|
||||
wxPopup: false,
|
||||
luckydrawData: {},
|
||||
isRecharge: false,
|
||||
czJe: '',
|
||||
tlList: [],
|
||||
}
|
||||
},
|
||||
|
|
@ -286,51 +378,12 @@ 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)
|
||||
// this.downTime()
|
||||
},
|
||||
|
||||
onShow() {
|
||||
|
|
@ -338,22 +391,6 @@ export default {
|
|||
// 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()
|
||||
}
|
||||
})
|
||||
},
|
||||
closewxPopup() {
|
||||
this.wxPopup = false
|
||||
this.$refs.qrCodeUrlWx.innerHTML = ''
|
||||
|
|
@ -387,7 +424,7 @@ export default {
|
|||
this.isLoading = false
|
||||
this.isPw = false
|
||||
removeToken()
|
||||
this.$refs.hiSuccess.showSuccess(res.data)
|
||||
this.$refs.successDialog.showSuccess(res.data)
|
||||
})
|
||||
},
|
||||
payPw() {
|
||||
|
|
@ -411,7 +448,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 +468,52 @@ 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, //汇付
|
||||
payType: 3, //银行卡
|
||||
bindCode: this.hfList[indexed].bindCode,
|
||||
}
|
||||
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, //订单类型
|
||||
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.isPw = true
|
||||
})
|
||||
this.checkPayStatus(params)
|
||||
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: bankListMap[payTypeEnum],
|
||||
}
|
||||
if (!isRecharge) {
|
||||
Object.assign(params, {
|
||||
businessCode: this.orderCode,
|
||||
})
|
||||
}
|
||||
api.unifiedorder(params).then(response => {
|
||||
this.isBank = this.whatPay.slice(0, 2)
|
||||
this.isPw = true
|
||||
this.checkPayStatus(params)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 宝付微信支付
|
||||
|
|
@ -527,6 +550,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 +631,7 @@ export default {
|
|||
getPayConfig() {
|
||||
api.payConfig().then(res => {
|
||||
this.payList = res.data
|
||||
this.$nextTick(() => {
|
||||
this.$refs.collapse.init()
|
||||
})
|
||||
|
||||
this.$forceUpdate()
|
||||
})
|
||||
},
|
||||
|
|
@ -753,10 +815,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 +827,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 +847,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
::v-deep .u-collapse-item__content__text {
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
.pad {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,37 +1,52 @@
|
|||
|
||||
<template>
|
||||
<view class="contain">
|
||||
<view class="zhan"></view>
|
||||
<view class="goodList">
|
||||
<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>
|
||||
<!-- <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="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"
|
||||
>
|
||||
<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 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="list-bottom">
|
||||
<text class="bottom-text">— 已显示全部商品 —</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -40,138 +55,476 @@ import * as api from '@/config/login.js'
|
|||
import { setToken } from '@/config/auth.js'
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
pkParent:'',
|
||||
goodList:[],
|
||||
placeParent:''
|
||||
data() {
|
||||
return {
|
||||
pkParent: '',
|
||||
goodList: [],
|
||||
placeParent: '',
|
||||
}
|
||||
},
|
||||
filters:{
|
||||
seles(value){
|
||||
|
||||
if(value>999){
|
||||
return 999 + '+'
|
||||
}else{
|
||||
return value
|
||||
}
|
||||
|
||||
}
|
||||
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=>{
|
||||
setToken(res.data.access_token, res.data.expires_in)
|
||||
this.getList()
|
||||
this.getCode()
|
||||
})
|
||||
methods: {
|
||||
getToken() {
|
||||
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=>{
|
||||
getCode() {
|
||||
api.fansConvertCode(this.pkParent).then(res => {
|
||||
this.placeParent = res.msg
|
||||
uni.setStorageSync('placeParent', this.placeParent)
|
||||
uni.setStorageSync('placeParent', this.placeParent)
|
||||
})
|
||||
},
|
||||
getList(){
|
||||
api.queryWares({
|
||||
shareMemberCode:this.pkParent
|
||||
}).then(res=>{
|
||||
this.goodList = res.data
|
||||
getList() {
|
||||
api
|
||||
.queryWares({
|
||||
shareMemberCode: this.pkParent,
|
||||
})
|
||||
.then(res => {
|
||||
this.goodList = res.data
|
||||
})
|
||||
},
|
||||
goBuy(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/shareArea/hiOrder?allData=' + JSON.stringify(item),
|
||||
})
|
||||
},
|
||||
goBuy(item){
|
||||
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;
|
||||
.contain {
|
||||
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;
|
||||
border-radius: 20rpx;
|
||||
background-image: linear-gradient(to bottom, #fefbf8, #fadf97);
|
||||
margin-bottom: 20rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
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: 40rpx;
|
||||
|
||||
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: #005bac;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #005bac;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
animation: priceHighlight 2s ease-in-out infinite 1s;
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
|
||||
.list-bottom {
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
font-size: 20px;
|
||||
padding: 40rpx 0 60rpx;
|
||||
|
||||
.bottom-text {
|
||||
color: #64748b;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tit1{
|
||||
color: #93561f;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
|
||||
// 动画定义
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.sales{
|
||||
color: #923f32;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@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 priceHighlight {
|
||||
0%,
|
||||
100% {
|
||||
color: #005bac;
|
||||
}
|
||||
50% {
|
||||
color: #0066cc;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.goodList_ir {
|
||||
margin-left: 20rpx;
|
||||
|
||||
.tit1 {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.goodList_ib {
|
||||
.price-container {
|
||||
.price {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toBuy {
|
||||
padding: 18rpx 0;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,57 +14,40 @@
|
|||
<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>
|
||||
</view>
|
||||
<u-icon name="arrow-down"></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="'运输方式'">
|
||||
|
||||
<u-form-item :label="'运输方式'" borderBottom>
|
||||
<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="'发货方式'">
|
||||
<u-form-item :label="'发货方式'" borderBottom>
|
||||
<view class="pickerHui">
|
||||
<u-input
|
||||
v-model="form.deliveryName"
|
||||
|
|
@ -72,7 +55,6 @@
|
|||
:placeholder="'请选择发货方式'"
|
||||
border="none"
|
||||
></u-input>
|
||||
<u-icon name="arrow-down"></u-icon>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
|
|
@ -82,23 +64,29 @@
|
|||
<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>
|
||||
<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>
|
||||
<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"
|
||||
borderBottom
|
||||
>
|
||||
<view class="picker">
|
||||
<u-input
|
||||
v-model.trim="form.diqu"
|
||||
|
|
@ -108,17 +96,17 @@
|
|||
<u-icon name="arrow-down"></u-icon>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item :label="'详细地址'" prop="recAddress">
|
||||
<u-form-item :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 +114,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>
|
||||
|
|
@ -205,19 +163,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>
|
||||
|
|
@ -256,7 +201,6 @@
|
|||
:columns="countryList"
|
||||
keyName="label"
|
||||
></u-picker>
|
||||
<agreement ref="agreement"></agreement>
|
||||
<v-address
|
||||
ref="address"
|
||||
:defaultCode="defaultCode"
|
||||
|
|
@ -270,11 +214,9 @@ import address from '@/components/address.vue'
|
|||
import * as api from '@/config/goods'
|
||||
import * as regiest from '@/config/regiest'
|
||||
|
||||
import agreement from '@/components/agreement.vue'
|
||||
export default {
|
||||
components: {
|
||||
'v-address': address,
|
||||
agreement,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -450,10 +392,7 @@ export default {
|
|||
// url: '/pages/address/index',
|
||||
// })
|
||||
// },
|
||||
toAgree() {
|
||||
// agreeMent
|
||||
this.$refs.agreement.openDig()
|
||||
},
|
||||
|
||||
getGenerate() {
|
||||
api.generate().then(res => {
|
||||
uni.setStorageSync('mToken', res.msg)
|
||||
|
|
@ -461,14 +400,6 @@ export default {
|
|||
},
|
||||
goBuy() {
|
||||
this.$refs.uForm.validate().then(res => {
|
||||
if (this.agreementShow.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请阅读并同意购买协议',
|
||||
icon: 'none',
|
||||
duration: 1500,
|
||||
})
|
||||
return
|
||||
}
|
||||
this.isLoading = true
|
||||
api
|
||||
.fansConfirm(
|
||||
|
|
@ -492,9 +423,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 +483,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 +509,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 +714,9 @@ export default {
|
|||
background: #f6f6f6;
|
||||
padding: 0 28rpx 28rpx 28rpx;
|
||||
}
|
||||
.u-form-item {
|
||||
::v-deep .u-form-item__body {
|
||||
padding: 20rpx 30rpx !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,97 +1,95 @@
|
|||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: kBank
|
||||
* @Date: 2022-11-21 15:11:22
|
||||
-->
|
||||
<template>
|
||||
<view >
|
||||
<view v-if="!pkCountry" class="content1">
|
||||
<!-- <view class="index_header">
|
||||
<view>
|
||||
<view v-if="!pkCountry" class="content1">
|
||||
<!-- <view class="index_header">
|
||||
<view>注册</view>
|
||||
</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-item>
|
||||
<u-form-item label=""
|
||||
prop="memberName">
|
||||
<u-input v-model="form.memberName"
|
||||
:placeholder="'请输入会员姓名'" />
|
||||
</u-form-item>
|
||||
<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-input :password="isPwd"
|
||||
:placeholder="'请输入登录密码'"
|
||||
v-model="form.loginPassword">
|
||||
<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="payPassword">
|
||||
<u-input :password="isPwd2"
|
||||
:placeholder="'请输入支付密码'"
|
||||
v-model="form.payPassword">
|
||||
<template slot="suffix">
|
||||
<u-icon name="eye"
|
||||
@tap="isPwd2=!isPwd2"
|
||||
v-if="!isPwd2"></u-icon>
|
||||
<u-icon name="eye-off"
|
||||
@tap="isPwd2=!isPwd2"
|
||||
v-else></u-icon>
|
||||
</template>
|
||||
</u-input>
|
||||
</u-form-item>
|
||||
<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>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
<u-button type="success"
|
||||
class="uBtn"
|
||||
shape="circle"
|
||||
color="linear-gradient(to right, #005BAC, #005BAC )"
|
||||
:loading="isLoading"
|
||||
:loadingText="'注册中'"
|
||||
@click="toLogin">{{ '立即注册' }}</u-button>
|
||||
<!-- <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-item>
|
||||
<u-form-item label="" prop="memberName">
|
||||
<u-input
|
||||
v-model="form.memberName"
|
||||
:placeholder="'请输入会员姓名'"
|
||||
/>
|
||||
</u-form-item>
|
||||
<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-input
|
||||
:password="isPwd"
|
||||
:placeholder="'请输入登录密码'"
|
||||
v-model="form.loginPassword"
|
||||
>
|
||||
<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="payPassword">
|
||||
<u-input
|
||||
:password="isPwd2"
|
||||
:placeholder="'请输入支付密码'"
|
||||
v-model="form.payPassword"
|
||||
>
|
||||
<template slot="suffix">
|
||||
<u-icon
|
||||
name="eye"
|
||||
@tap="isPwd2 = !isPwd2"
|
||||
v-if="!isPwd2"
|
||||
></u-icon>
|
||||
<u-icon name="eye-off" @tap="isPwd2 = !isPwd2" v-else></u-icon>
|
||||
</template>
|
||||
</u-input>
|
||||
</u-form-item>
|
||||
<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>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
<u-button
|
||||
type="success"
|
||||
class="uBtn"
|
||||
shape="circle"
|
||||
color="linear-gradient(to right, #005BAC, #005BAC )"
|
||||
:loading="isLoading"
|
||||
:loadingText="'注册中'"
|
||||
@click="toLogin"
|
||||
>{{ '立即注册' }}</u-button
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="content">
|
||||
<!-- <view class="tit" >{{ '海粉扫天下' }}</view>
|
||||
<view v-else class="content">
|
||||
<!-- <view class="tit" >{{ '海粉扫天下' }}</view>
|
||||
<view class="formed"
|
||||
>
|
||||
<u-form :model="form"
|
||||
|
|
@ -184,11 +182,9 @@
|
|||
:columns="countryList"></u-picker>
|
||||
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="mask" v-if="isTrue"> </view>
|
||||
</view>
|
||||
<view class="mask" v-if="isTrue">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -197,7 +193,7 @@ export default {
|
|||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isTrue:false,
|
||||
isTrue: false,
|
||||
howHeader: 'HF',
|
||||
pkParent: '',
|
||||
form: {
|
||||
|
|
@ -225,15 +221,15 @@ export default {
|
|||
memberName: [
|
||||
{
|
||||
required: true,
|
||||
message:'请输入会员姓名',
|
||||
trigger: [ 'blur'],
|
||||
message: '请输入会员姓名',
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入联系方式',
|
||||
trigger: [ 'blur'],
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
code: [
|
||||
|
|
@ -254,7 +250,7 @@ export default {
|
|||
{
|
||||
required: true,
|
||||
message: '请输入支付密码',
|
||||
trigger: [ 'blur'],
|
||||
trigger: ['blur'],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -300,14 +296,15 @@ export default {
|
|||
onReady() {},
|
||||
onLoad(options) {
|
||||
this.pkParent = options.code
|
||||
this.pkCountry = options.country || ''
|
||||
this.pkCountry = 1
|
||||
this.getGenerate()
|
||||
if (this.pkCountry) {
|
||||
|
||||
this.getCountry()
|
||||
this.form.pkCountry = this.pkCountry
|
||||
uni.setStorageSync('pkCountry',this.pkCountry)
|
||||
uni.redirectTo({ url: '/pages/shareArea/hiList?pkParent=' + this.pkParent})
|
||||
uni.setStorageSync('pkCountry', this.pkCountry)
|
||||
uni.redirectTo({
|
||||
url: '/pages/shareArea/hiList?pkParent=' + this.pkParent,
|
||||
})
|
||||
// this.$refs.uForm1.setRules(this.rules1)
|
||||
} else {
|
||||
// 获取前缀
|
||||
|
|
@ -318,21 +315,11 @@ export default {
|
|||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
setMemberCode(){
|
||||
setMemberCode() {
|
||||
// this.form.memberCode = this.form.phone
|
||||
this.$set(this.form,'memberCode',this.form.phone)
|
||||
},
|
||||
selCountry(){
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认更换自然国',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.isCountry = true
|
||||
}
|
||||
},
|
||||
})
|
||||
this.$set(this.form, 'memberCode', this.form.phone)
|
||||
},
|
||||
|
||||
memberCodeRule(rule, value, callback) {
|
||||
if (!value) {
|
||||
callback(new Error('请输入会员编号'))
|
||||
|
|
@ -340,7 +327,7 @@ export default {
|
|||
if (value.length < 10 || value.length > 20) {
|
||||
callback(new Error('请输入10-20位数字'))
|
||||
} else {
|
||||
api.validateMember(value).then((res) => {
|
||||
api.validateMember(value).then(res => {
|
||||
if (res.code == 200) {
|
||||
callback()
|
||||
} else {
|
||||
|
|
@ -351,30 +338,33 @@ export default {
|
|||
}
|
||||
},
|
||||
getHeader() {
|
||||
api.checkShare().then((res) => {
|
||||
if(res.code != 200){
|
||||
this.isTrue = true
|
||||
}else{
|
||||
this.isTrue = false
|
||||
}
|
||||
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() {
|
||||
api.generate().then((res) => {
|
||||
uni.setStorageSync('mToken', res.msg)
|
||||
return new Promise((resolve, reject) => {
|
||||
api.generate().then(res => {
|
||||
resolve(res)
|
||||
uni.setStorageSync('mToken', res.msg)
|
||||
})
|
||||
})
|
||||
},
|
||||
toLogin() {
|
||||
this.$refs.uForm.validate().then((res) => {
|
||||
this.$refs.uForm.validate().then(res => {
|
||||
this.isLoading = true
|
||||
api
|
||||
.regShareMember(
|
||||
Object.assign({}, this.form, { parent: this.pkParent })
|
||||
)
|
||||
.then((res) => {
|
||||
.then(res => {
|
||||
this.isLoading = false
|
||||
if (res.code == 200) {
|
||||
uni.redirectTo({
|
||||
|
|
@ -387,11 +377,11 @@ export default {
|
|||
})
|
||||
},
|
||||
hiLogin() {
|
||||
this.$refs.uForm1.validate().then((res) => {
|
||||
this.$refs.uForm1.validate().then(res => {
|
||||
this.isLoading = true
|
||||
api
|
||||
.hiRegister(Object.assign({}, this.form, { pkParent: this.pkParent }))
|
||||
.then((res) => {
|
||||
.then(res => {
|
||||
this.isLoading = false
|
||||
if (res.code == 200) {
|
||||
uni.redirectTo({
|
||||
|
|
@ -409,16 +399,16 @@ export default {
|
|||
this.isCountry = false
|
||||
},
|
||||
getCountry() {
|
||||
api.getCountry().then((res) => {
|
||||
api.getCountry().then(res => {
|
||||
this.countryList = [
|
||||
res.data.map((item) => {
|
||||
res.data.map(item => {
|
||||
return {
|
||||
label: item.shortName,
|
||||
id: item.pkId,
|
||||
}
|
||||
}),
|
||||
]
|
||||
this.countryList[0].forEach((item) => {
|
||||
this.countryList[0].forEach(item => {
|
||||
if (this.pkCountry == item.id) {
|
||||
this.form.jsName = item.label
|
||||
this.form.pkCountryName = item.label
|
||||
|
|
@ -433,8 +423,8 @@ export default {
|
|||
.verification({
|
||||
phone: this.form.phone,
|
||||
})
|
||||
.then((res) => {})
|
||||
.catch((err) => {
|
||||
.then(res => {})
|
||||
.catch(err => {
|
||||
this.beginTime = 0
|
||||
})
|
||||
},
|
||||
|
|
@ -460,35 +450,37 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content1{
|
||||
.content1 {
|
||||
background-image: url('@/static/images/haiRgeiest1.jpg');
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-repeat: no-repeat;
|
||||
height: 100vh;
|
||||
}
|
||||
.content{
|
||||
.content {
|
||||
background-image: url('@/static/images/huan.jpg');
|
||||
// background-image: url('@/static/images/regiestBg.jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 100vh;
|
||||
}
|
||||
.tit{
|
||||
.tit {
|
||||
font-size: 48px;
|
||||
font-family: PangMenZhengDao-Regular, PangMenZhengDao;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
padding-top: 80px;
|
||||
margin-bottom: 20px;
|
||||
font-family: PangMenZhengDao-Regular, PangMenZhengDao;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
padding-top: 80px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.index_header {
|
||||
background: #f9f9f9;;
|
||||
background: #f9f9f9;
|
||||
height: 330rpx;
|
||||
|
||||
font-size: 18px;
|
||||
font-family: PingFang SC-Semibold, PingFang SC;
|
||||
font-family:
|
||||
PingFang SC-Semibold,
|
||||
PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
|
|
@ -503,9 +495,11 @@ margin-bottom: 20px;
|
|||
}
|
||||
.getCode {
|
||||
font-size: 10px;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-family:
|
||||
PingFang SC-Regular,
|
||||
PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #005BAC;
|
||||
color: #005bac;
|
||||
}
|
||||
.uBtn {
|
||||
margin-top: 120rpx;
|
||||
|
|
@ -519,14 +513,14 @@ margin-bottom: 20px;
|
|||
border-style: solid;
|
||||
border-radius: 4px;
|
||||
padding: 6px 9px;
|
||||
background: #fff;
|
||||
}
|
||||
::v-deep .u-input{
|
||||
background: #fff;
|
||||
}
|
||||
.mask{
|
||||
::v-deep .u-input {
|
||||
background: #fff;
|
||||
}
|
||||
.mask {
|
||||
position: fixed;
|
||||
background: rgba(0,0,0,0.5);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -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="1750296507430" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4780" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M341.333333 640a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667v-170.666666a42.666667 42.666667 0 0 1 42.666667-42.666667h170.666666z m512 0a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666666a42.666667 42.666667 0 0 1-42.666667 42.666667h-170.666666a42.666667 42.666667 0 0 1-42.666667-42.666667v-170.666666a42.666667 42.666667 0 0 1 42.666667-42.666667h170.666666zM341.333333 128a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666666a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h170.666666z m512 0a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666666a42.666667 42.666667 0 0 1-42.666667 42.666667h-170.666666a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h170.666666z" fill="#f52a10" p-id="4781"></path><path d="M341.333333 597.333333a85.333333 85.333333 0 0 1 85.333334 85.333334v213.333333a85.333333 85.333333 0 0 1-85.333334 85.333333H170.666667c-47.146667 0-128-38.186667-128-85.333333v-213.333333a85.333333 85.333333 0 0 1 85.333333-85.333334h213.333333z m554.666667 0a85.333333 85.333333 0 0 1 85.333333 85.333334v213.333333a85.333333 85.333333 0 0 1-85.333333 85.333333h-213.333333a85.333333 85.333333 0 0 1-85.333334-85.333333v-213.333333a85.333333 85.333333 0 0 1 85.333334-85.333334h213.333333z m-384 0a42.666667 42.666667 0 0 1 42.666667 42.666667v298.666667a42.666667 42.666667 0 0 1-85.333334 0v-298.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z m-213.333333 85.333334H170.666667a42.666667 42.666667 0 0 0-42.666667 42.666666v128a42.666667 42.666667 0 0 0 42.666667 42.666667h128a42.666667 42.666667 0 0 0 42.666666-42.666667v-128a42.666667 42.666667 0 0 0-42.666666-42.666666z m554.666666 0h-128a42.666667 42.666667 0 0 0-42.666666 42.666666v128a42.666667 42.666667 0 0 0 42.666666 42.666667h128a42.666667 42.666667 0 0 0 42.666667-42.666667v-128a42.666667 42.666667 0 0 0-42.666667-42.666666z m42.666667-213.333334a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334zM512 42.666667a42.666667 42.666667 0 0 1 42.666667 42.666666v384h170.666666a42.666667 42.666667 0 0 1 0 85.333334H85.333333a42.666667 42.666667 0 0 1 0-85.333334h384V85.333333a42.666667 42.666667 0 0 1 42.666667-42.666666zM341.333333 42.666667a85.333333 85.333333 0 0 1 85.333334 85.333333v213.333333a85.333333 85.333333 0 0 1-85.333334 85.333334H128a85.333333 85.333333 0 0 1-85.333333-85.333334V128a85.333333 85.333333 0 0 1 85.333333-85.333333h213.333333z m554.666667 0a85.333333 85.333333 0 0 1 85.333333 85.333333v213.333333a85.333333 85.333333 0 0 1-85.333333 85.333334h-213.333333a85.333333 85.333333 0 0 1-85.333334-85.333334V128a85.333333 85.333333 0 0 1 85.333334-85.333333h213.333333zM298.666667 128H170.666667a42.666667 42.666667 0 0 0-42.666667 42.666667v128a42.666667 42.666667 0 0 0 42.666667 42.666666h128a42.666667 42.666667 0 0 0 42.666666-42.666666V170.666667a42.666667 42.666667 0 0 0-42.666666-42.666667z m554.666666 0h-128a42.666667 42.666667 0 0 0-42.666666 42.666667v128a42.666667 42.666667 0 0 0 42.666666 42.666666h128a42.666667 42.666667 0 0 0 42.666667-42.666666V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667z" fill="#f52a10" p-id="4782"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 985 KiB |
|
|
@ -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="1750296673424" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6409" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M423.836543 114.819049l0-0.274246L204.08256 114.544803c-45.911656 0-83.09451 36.932144-83.356476 82.59309l-0.023536 0 0 207.579709c0 2.468215 0.500397 4.782933 1.239224 7.000438 6.678096 39.245839 40.831964 69.164243 82.140789 69.164243L423.836543 480.882282l0-0.237407c38.877449-2.432399 70.477144-31.363312 76.798107-68.926836 0.763386-2.217505 1.289366-4.532223 1.289366-7.000438L501.924016 197.137893l-0.025583 0C501.683539 153.253406 467.244168 117.538997 423.836543 114.819049zM458.038506 393.46021c0 24.14798-19.654642 43.705408-43.88551 43.705408L208.445938 437.165618c-24.230867 0-43.858904-19.557428-43.858904-43.705408L164.587034 201.980177c0-24.149003 19.628036-43.717687 43.858904-43.717687l205.708082 0c24.230867 0 43.88551 19.569708 43.88551 43.717687L458.039529 393.46021zM902.246517 195.111746c-0.215918-42.799782-33.818223-77.644381-76.153424-80.304977l0-0.261966L634.384863 114.544803c-44.790112 0-81.040734 36.037774-81.304747 80.56592l-0.023536 0 0 202.511273c0 2.407839 0.476861 4.673439 1.240247 6.831592 6.487761 38.292118 39.830147 67.472717 80.08906 67.472717l191.70823 0 0-0.226151c37.921681-2.385327 68.734454-30.613228 74.961272-67.246567 0.738827-2.158153 1.216711-4.423753 1.216711-6.831592L902.2721 195.111746 902.246517 195.111746zM859.461061 386.638851c0 23.551392-19.152199 42.643216-42.813085 42.643216L638.678656 429.282067c-23.658839 0-42.834574-19.091824-42.834574-42.643216L595.844082 199.832258c0-23.552415 19.175735-42.643216 42.834574-42.643216l177.969321 0c23.660886 0 42.813085 19.091824 42.813085 42.643216L859.461061 386.638851zM415.680792 539.887141l0-0.260943L201.839473 539.626197c-44.670385 0-80.874959 35.94363-81.114412 80.375585l-0.023536 0 0 201.974038c0 2.420119 0.477884 4.687766 1.215688 6.821359 6.464225 38.181601 39.73498 67.316152 79.922261 67.316152L415.680792 896.113331l0-0.236384c37.824467-2.350534 68.567655-30.529317 74.744331-67.079768 0.762363-2.133593 1.24127-4.40124 1.24127-6.821359L491.666394 620.001783l-0.049119 0C491.402381 577.308425 457.919802 542.53648 415.680792 539.887141zM448.975083 811.04077c0 23.493064-19.127639 42.524512-42.691311 42.524512L212.953601 853.565283c0 0-0.022513 0-0.047072 0l-6.822382 0c-23.563672 0-42.690288-19.031449-42.690288-42.524512L163.393859 624.687502c0-23.469528 19.126616-42.525536 42.690288-42.525536l200.200648 0c23.563672 0 42.691311 19.056008 42.691311 42.525536L448.976106 811.04077zM721.154066 753.120616c-14.741749 0-26.66736 11.508102-26.66736 25.699312l0 51.395554c0 14.228049 11.924587 25.721825 26.66736 25.721825 14.736633 0 26.663266-11.492752 26.663266-25.721825l0-51.395554C747.817332 764.628718 735.891721 753.120616 721.154066 753.120616zM834.775846 727.398792c-14.739702 0-26.665313 11.494799-26.665313 25.697265l0 77.118402c0 14.214746 11.924587 25.701358 26.665313 25.701358 14.763239 0 26.688849-11.487635 26.688849-25.701358l0-77.118402C861.464695 738.894613 849.538061 727.398792 834.775846 727.398792zM834.775846 573.172221c-14.739702 0-26.665313 11.506055-26.665313 25.722848l0 51.395554c0 14.189164 11.924587 25.697265 26.665313 25.697265 14.763239 0 26.688849-11.508102 26.688849-25.697265l0-51.395554C861.464695 584.679299 849.538061 573.172221 834.775846 573.172221zM721.154066 573.195757c-14.741749 0-26.66736 11.507078-26.66736 25.709545L694.486706 701.735295c0 14.192234 11.924587 25.686009 26.66736 25.686009 14.736633 0 26.663266-11.492752 26.663266-25.686009L747.817332 598.905302C747.817332 584.702835 735.891721 573.195757 721.154066 573.195757zM606.050538 701.735295c-14.68956 0-26.640754 11.435447-26.640754 25.663496l0 102.81669c0 14.214746 11.951193 25.701358 26.640754 25.701358 14.787798 0 26.712385-11.487635 26.712385-25.701358L632.762923 727.398792C632.763946 713.170742 620.838336 701.735295 606.050538 701.735295zM606.050538 573.172221c-14.68956 0-26.640754 11.506055-26.640754 25.722848l0 25.709545c0 14.201443 11.951193 25.686009 26.640754 25.686009 14.787798 0 26.712385-11.484565 26.712385-25.686009l0-25.709545C632.763946 584.679299 620.838336 573.172221 606.050538 573.172221z" fill="#5D5D5D" p-id="6410"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
Loading…
Reference in New Issue