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)
|
setToken(options.query?.token)
|
||||||
}
|
}
|
||||||
const whiteList = [
|
const whiteList = [
|
||||||
// 'pages/shareRegist/index',
|
'pages/shareRegist/index',
|
||||||
// 'pages/shareRegist/success',
|
// 'pages/shareRegist/success',
|
||||||
'pages/login/index',
|
'pages/login/index',
|
||||||
// 'pages/wechatPay/bfPay/',
|
// 'pages/wechatPay/bfPay/',
|
||||||
// 'pages/wechatPay/hfPay/',
|
// 'pages/wechatPay/hfPay/',
|
||||||
// 'pages/shareArea/hiList',
|
'pages/shareArea/hiList',
|
||||||
// 'pages/shareArea/hiOrder',
|
// 'pages/shareArea/hiOrder',
|
||||||
// 'pages/pay/hiPay'
|
// 'pages/pay/hiPay'
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -1,65 +1,159 @@
|
||||||
<!--
|
|
||||||
* @Descripttion:
|
|
||||||
* @version:
|
|
||||||
* @Author: kBank
|
|
||||||
* @Date: 2022-11-21 15:11:22
|
|
||||||
-->
|
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<!-- v-if="user.skin == 0" -->
|
<u-tabbar
|
||||||
<u-tabbar v-if="systemSkin === 0" :value="current ? current : 0" @change="tabbarChange" :fixed="true" :placeholder="false"
|
v-if="systemSkin === 0"
|
||||||
:border="false" :safeAreaInsetBottom="true" inactiveColor="#666666" activeColor="#333333">
|
:value="current ? current : 0"
|
||||||
|
@change="tabbarChange"
|
||||||
|
:fixed="true"
|
||||||
|
:placeholder="false"
|
||||||
|
:border="false"
|
||||||
|
:safeAreaInsetBottom="true"
|
||||||
|
inactiveColor="#666666"
|
||||||
|
activeColor="#333333"
|
||||||
|
>
|
||||||
<u-tabbar-item :text="'首页'">
|
<u-tabbar-item :text="'首页'">
|
||||||
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/one1.png"></image>
|
<image
|
||||||
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/one2.png"></image>
|
class="u-page__item__slot-icon"
|
||||||
</u-tabbar-item>
|
slot="active-icon"
|
||||||
<u-tabbar-item :text="'站内信'">
|
src="@/static/images/one1.png"
|
||||||
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/two1.png"></image>
|
></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="inactive-icon"
|
||||||
|
src="@/static/images/one2.png"
|
||||||
|
></image>
|
||||||
</u-tabbar-item>
|
</u-tabbar-item>
|
||||||
<u-tabbar-item :text="'会员专区'">
|
<u-tabbar-item :text="'会员专区'">
|
||||||
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/five1.jpg"></image>
|
<image
|
||||||
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/five2.jpg"></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>
|
||||||
|
<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">
|
<u-tabbar-item :text="'购物车'" :badge="shopCarLength">
|
||||||
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/three1.png"></image>
|
<image
|
||||||
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/three2.png"></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>
|
||||||
|
|
||||||
<u-tabbar-item :text="'我的'">
|
<u-tabbar-item :text="'我的'">
|
||||||
<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/images/fore1.png"></image>
|
<image
|
||||||
<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/images/fore2.png"></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-item>
|
||||||
</u-tabbar>
|
</u-tabbar>
|
||||||
<u-tabbar :value="current ? current : 0" class="greenEd" v-if="systemSkin === 2" @change="tabbarChange" :fixed="true"
|
<u-tabbar
|
||||||
:placeholder="false" :border="false" :safeAreaInsetBottom="true" inactiveColor="#666666" activeColor="#333333">
|
: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="'首页'">
|
<u-tabbar-item :text="'首页'">
|
||||||
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/one11.jpg"></image>
|
<image
|
||||||
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/one11.jpg"></image>
|
class="u-page__item__slot-icon1"
|
||||||
</u-tabbar-item>
|
slot="active-icon"
|
||||||
<u-tabbar-item :text="'站内信'">
|
src="@/static/images/one11.jpg"
|
||||||
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/two11.jpg"></image>
|
></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="inactive-icon"
|
||||||
|
src="@/static/images/one11.jpg"
|
||||||
|
></image>
|
||||||
</u-tabbar-item>
|
</u-tabbar-item>
|
||||||
<u-tabbar-item :text="'会员专区'">
|
<u-tabbar-item :text="'会员专区'">
|
||||||
<image class="u-page__item__slot-icon2" slot="active-icon" src="@/static/images/five11.jpg"></image>
|
<image
|
||||||
<image class="u-page__item__slot-icon2" slot="inactive-icon" src="@/static/images/five11.jpg"></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>
|
||||||
|
<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">
|
<u-tabbar-item :text="'购物车'" :badge="shopCarLength">
|
||||||
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/three11.jpg"></image>
|
<image
|
||||||
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/three11.jpg"></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>
|
||||||
|
|
||||||
<u-tabbar-item :text="'我的'">
|
<u-tabbar-item :text="'我的'">
|
||||||
<image class="u-page__item__slot-icon1" slot="active-icon" src="@/static/images/fore11.jpg"></image>
|
<image
|
||||||
<image class="u-page__item__slot-icon1" slot="inactive-icon" src="@/static/images/fore11.jpg"></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-item>
|
||||||
</u-tabbar>
|
</u-tabbar>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapGetters } from "vuex";
|
import { mapGetters } from 'vuex'
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
current: Number,
|
current: Number,
|
||||||
|
|
@ -71,14 +165,15 @@ export default {
|
||||||
text: '首页',
|
text: '首页',
|
||||||
path: 'pages/index/index',
|
path: 'pages/index/index',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
text: '站内信',
|
|
||||||
path: 'pages/email/index',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
text: '会员专区',
|
text: '会员专区',
|
||||||
path: 'pages/specialArea/index',
|
path: 'pages/specialArea/index',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
text: '个人推广',
|
||||||
|
path: 'pages/mine/share/index',
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
text: '购物车',
|
text: '购物车',
|
||||||
path: 'pages/shoppingCar/index',
|
path: 'pages/shoppingCar/index',
|
||||||
|
|
@ -94,8 +189,8 @@ export default {
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(['shopCarLength', 'user']),
|
...mapGetters(['shopCarLength', 'user']),
|
||||||
systemSkin() {
|
systemSkin() {
|
||||||
return this.user.skin || 0
|
return this.user?.skin || 0
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
tabbarChange(e) {
|
tabbarChange(e) {
|
||||||
|
|
@ -131,11 +226,40 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .u-tabbar__content__item-wrapper {
|
::v-deep .u-tabbar__content__item-wrapper {
|
||||||
height: 80px
|
height: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .u-tabbar-item {
|
::v-deep .u-tabbar-item {
|
||||||
// margin-bottom: 30px;
|
// 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>
|
</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:
|
* @Descripttion:
|
||||||
* @version:
|
* @version:
|
||||||
* @Author: kBank
|
* @Author: kBank
|
||||||
* @Date: 2022-11-23 11:10:29
|
* @Date: 2022-11-23 11:10:29
|
||||||
*/
|
*/
|
||||||
/*
|
/*
|
||||||
* @Descripttion:
|
* @Descripttion:
|
||||||
* @version:
|
* @version:
|
||||||
* @Author: kBank
|
* @Author: kBank
|
||||||
* @Date: 2022-11-23 11:10:29
|
* @Date: 2022-11-23 11:10:29
|
||||||
*/
|
*/
|
||||||
const http = uni.$u.http
|
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粉注册
|
//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元注册时
|
//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粉确认订单
|
//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粉确认订单
|
//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扫码使用）
|
//海粉默认登录（H5扫码使用）
|
||||||
export const autoLogin = params =>
|
export const autoLogin = params =>
|
||||||
http.post('/member/auth/api/auto-login', params)
|
http.post('/member/auth/api/auto-login', params)
|
||||||
//海粉商品
|
//分享列表商品
|
||||||
export const queryWares = 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 =>
|
export const saveGiftAddress = params =>
|
||||||
http.post('/member/api/member-gift/update-gift', params)
|
http.post('/member/api/member-gift/update-gift', params)
|
||||||
|
|
|
||||||
|
|
@ -9,62 +9,61 @@
|
||||||
const http = uni.$u.http
|
const http = uni.$u.http
|
||||||
|
|
||||||
//考核明细接口
|
//考核明细接口
|
||||||
export const getAssessList = (params) => http.get('/member/api/assess/assessList', {
|
export const getAssessList = params =>
|
||||||
params
|
http.get('/member/api/assess/assessList', {
|
||||||
})
|
params,
|
||||||
|
})
|
||||||
|
|
||||||
//考核分红积分
|
//考核分红积分
|
||||||
export const getAssAchieve = (params) => http.get('/member/api/assess/assAchieve', {
|
export const getAssAchieve = params =>
|
||||||
params
|
http.get('/member/api/assess/assAchieve', {
|
||||||
})
|
params,
|
||||||
|
})
|
||||||
|
|
||||||
//考核状态复购考核
|
//考核状态复购考核
|
||||||
export const getAssessStatusList = (params) => http.get('/system/pub/enums/member-assess-status', {
|
export const getAssessStatusList = params =>
|
||||||
params
|
http.get('/system/pub/enums/member-assess-status', {
|
||||||
})
|
params,
|
||||||
|
})
|
||||||
|
|
||||||
//注册等级下拉选
|
//注册等级下拉选
|
||||||
export const getGradeList = (params) => http.get('/system/api/grade/list', {
|
export const getGradeList = params =>
|
||||||
params
|
http.get('/system/api/grade/list', {
|
||||||
})
|
params,
|
||||||
|
})
|
||||||
|
|
||||||
//注册列表
|
//注册列表
|
||||||
export const getRegList = (params) => http.get('/member/api/market-news/reg-list', {
|
export const getRegList = params =>
|
||||||
params
|
http.get('/member/api/market-news/reg-list', {
|
||||||
})
|
params,
|
||||||
|
})
|
||||||
|
|
||||||
//招商列表
|
//招商列表
|
||||||
export const tripleCycleList = (params) => http.get('/member/api/market-news/triple_cycle_list', {
|
export const tripleCycleList = params =>
|
||||||
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 menuList = (params) => http.get('/system/api/menu/list', {
|
export const menuList = params =>
|
||||||
params
|
http.get('/system/api/menu/list', {
|
||||||
})
|
params,
|
||||||
|
})
|
||||||
//直推列表
|
//直推列表
|
||||||
export const parentList = (params) => http.get('/member/api/member/parent-list', {
|
export const parentList = params =>
|
||||||
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', {
|
export const treeList = params =>
|
||||||
params
|
http.get('/activity/api/tree-rule-pick/member-info-list', {
|
||||||
})
|
params,
|
||||||
|
})
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ export const bindTlConfirm = params =>
|
||||||
//汇付绑卡
|
//汇付绑卡
|
||||||
export const bindHfConfirm = params =>
|
export const bindHfConfirm = params =>
|
||||||
http.post('/pay/ada-fast/bind-confirm', params)
|
http.post('/pay/ada-fast/bind-confirm', params)
|
||||||
//银行卡支付获取验证码
|
|
||||||
export const unifiedorder = params => http.post('/pay/unifiedorder', params)
|
export const unifiedorder = params => http.post('/pay/unifiedorder', params)
|
||||||
//汇付银行卡确认
|
//汇付银行卡确认
|
||||||
export const payConfirmHf = params =>
|
export const payConfirmHf = params =>
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ module.exports = vm => {
|
||||||
|
|
||||||
//#ifdef DEV_SERVER
|
//#ifdef DEV_SERVER
|
||||||
console.log('DEV_SERVER')
|
console.log('DEV_SERVER')
|
||||||
config.baseURL = 'http://192.168.0.86:8080'
|
config.baseURL = 'http://localhost:8080'
|
||||||
//#endif
|
//#endif
|
||||||
|
|
||||||
//#ifdef QA_SERVER
|
//#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",
|
"version": "1.0.0",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@zumer/snapdom": "^1.9.6",
|
||||||
"axios": "^1.5.0",
|
"axios": "^1.5.0",
|
||||||
"echarts": "^4.9.0",
|
"echarts": "^4.9.0",
|
||||||
"file-saver": "^2.0.5",
|
"file-saver": "^2.0.5",
|
||||||
|
|
@ -766,6 +767,12 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"peer": 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": {
|
"node_modules/acorn": {
|
||||||
"version": "6.4.2",
|
"version": "6.4.2",
|
||||||
"resolved": "https://mirrors.cloud.tencent.com/npm/acorn/-/acorn-6.4.2.tgz",
|
"resolved": "https://mirrors.cloud.tencent.com/npm/acorn/-/acorn-6.4.2.tgz",
|
||||||
|
|
@ -3557,7 +3564,7 @@
|
||||||
},
|
},
|
||||||
"node_modules/html2canvas": {
|
"node_modules/html2canvas": {
|
||||||
"version": "1.4.1",
|
"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==",
|
"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
"description": "h5",
|
"description": "h5",
|
||||||
"main": "main.js",
|
"main": "main.js",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@zumer/snapdom": "^1.9.6",
|
||||||
"axios": "^1.5.0",
|
"axios": "^1.5.0",
|
||||||
"echarts": "^4.9.0",
|
"echarts": "^4.9.0",
|
||||||
"file-saver": "^2.0.5",
|
"file-saver": "^2.0.5",
|
||||||
|
|
|
||||||
|
|
@ -821,6 +821,13 @@
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/mine/share/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarHidden": true,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/mine/honorHall/honorHall",
|
"path": "pages/mine/honorHall/honorHall",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
@ -881,7 +888,7 @@
|
||||||
"pagePath": "pages/shoppingCar/index"
|
"pagePath": "pages/shoppingCar/index"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"pagePath": "pages/email/index"
|
"pagePath": "pages/mine/share/index"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"pagePath": "pages/mine/index"
|
"pagePath": "pages/mine/index"
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
<direct v-if="navIndex == 0" ref="sgsyData" />
|
<direct v-if="navIndex == 0" ref="sgsyData" />
|
||||||
<circulation v-if="navIndex == 1" ref="sgsyData" />
|
<circulation v-if="navIndex == 1" ref="sgsyData" />
|
||||||
<hignFans v-if="navIndex == 2" ref="sgsyData" />
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -24,10 +23,9 @@
|
||||||
import * as mar from '@/config/market.js'
|
import * as mar from '@/config/market.js'
|
||||||
import direct from '@/components/invest/direct.vue'
|
import direct from '@/components/invest/direct.vue'
|
||||||
import circulation from '@/components/invest/circulation.vue'
|
import circulation from '@/components/invest/circulation.vue'
|
||||||
import hignFans from '@/components/invest/hignFans.vue'
|
|
||||||
import { formatMsToDate } from '@/util/index'
|
import { formatMsToDate } from '@/util/index'
|
||||||
export default {
|
export default {
|
||||||
components: { direct, hignFans, circulation },
|
components: { direct, circulation },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
navIndex: 0,
|
navIndex: 0,
|
||||||
|
|
@ -122,7 +120,7 @@ export default {
|
||||||
.styles {
|
.styles {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
background: #005BAC;
|
background: #005bac;
|
||||||
}
|
}
|
||||||
.top-lists {
|
.top-lists {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -202,7 +200,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.seatch_r {
|
.seatch_r {
|
||||||
background: #005BAC;
|
background: #005bac;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
padding: 8rpx;
|
padding: 8rpx;
|
||||||
margin-left: 24rpx;
|
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">
|
<view class="tit1">
|
||||||
￥{{ paramsPost.orderAmount | numberToCurrency }}
|
￥{{ paramsPost.orderAmount | numberToCurrency }}
|
||||||
</view>
|
</view>
|
||||||
<view class="tit2"
|
<!-- <view class="tit2"
|
||||||
>{{ '请在' }} <view class="tit3">{{ countDown }}</view
|
>{{ '请在' }} <view class="tit3">{{ countDown }}</view
|
||||||
>{{ '内完成支付，否则订单将会被自动取消' }}
|
>{{ '内完成支付，否则订单将会被自动取消' }}
|
||||||
</view>
|
</view> -->
|
||||||
</template>
|
</template>
|
||||||
<!-- 暂时隐藏 -->
|
<!-- 暂时隐藏 -->
|
||||||
<view v-if="false" class="kuang">
|
<view class="kuang">
|
||||||
<u-collapse
|
<view>
|
||||||
:value="activeNames"
|
<view slot="title" class="pf">
|
||||||
ref="collapse"
|
<img src="@/static/images/under_pay.png" alt="" />
|
||||||
@open="change"
|
<view>{{ '在线支付' }}</view>
|
||||||
@close="close"
|
</view>
|
||||||
accordion
|
<view
|
||||||
:border="false"
|
class="flex_ac"
|
||||||
>
|
v-show="payList[PAY_AUTH[PAY_TYPE.BAO_FU_WECHAT]]"
|
||||||
<u-collapse-item name="1">
|
>
|
||||||
<view slot="title" class="pf">
|
<view class="flex_ac_i">
|
||||||
<img src="@/static/images/under_pay.png" alt="" />
|
<img src="@/static/images/pay_i2.png" alt="" />
|
||||||
<view>{{ '在线支付' }}</view>
|
<view>{{ '宝付微信支付' }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="flex_ac" v-show="this.payList.pay11">
|
<u-radio-group v-model="whatPay">
|
||||||
<view class="flex_ac_i">
|
<u-radio
|
||||||
<img src="@/static/images/pay_i2.png" alt="" />
|
activeColor="#005BAC"
|
||||||
<view>{{ '宝付微信支付' }}</view>
|
size="18"
|
||||||
</view>
|
label=""
|
||||||
<u-radio-group v-model="whatPay">
|
:name="PAY_TYPE.BAO_FU_WECHAT"
|
||||||
<u-radio activeColor="red" size="14" label="" :name="11">
|
>
|
||||||
</u-radio>
|
</u-radio>
|
||||||
</u-radio-group>
|
</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>
|
||||||
<view class="flex_ac" v-show="this.payList.pay12">
|
<u-radio-group v-model="whatPay">
|
||||||
<view class="flex_ac_i">
|
<u-radio
|
||||||
<img src="@/static/images/pay_i2.png" alt="" />
|
activeColor="#005BAC"
|
||||||
<view>{{ '宝付微信扫码' }}</view>
|
size="18"
|
||||||
</view>
|
label=""
|
||||||
<u-radio-group v-model="whatPay">
|
:name="PAY_TYPE.BAO_FU_WECHAT_SCAN"
|
||||||
<u-radio activeColor="red" size="14" label="" :name="12">
|
>
|
||||||
</u-radio>
|
</u-radio>
|
||||||
</u-radio-group>
|
</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>
|
</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">
|
<u-radio-group v-model="whatPay">
|
||||||
<view class="flex_ac_i">
|
<u-radio
|
||||||
<img src="@/static/images/pay_i2.png" alt="" />
|
activeColor="#005BAC"
|
||||||
<view>{{ '汇付微信支付' }}</view>
|
size="18"
|
||||||
|
label=""
|
||||||
|
:name="PAY_TYPE.HUI_FU_BANK_CARD + index"
|
||||||
|
>
|
||||||
|
</u-radio>
|
||||||
|
</u-radio-group>
|
||||||
</view>
|
</view>
|
||||||
<u-radio-group v-model="whatPay">
|
<view class="pay_flax flax_i" @click="bindBank('hf')">
|
||||||
<u-radio activeColor="red" size="14" label="" :name="13">
|
<img class="img1" src="@/static/images/addto.png" alt="" />
|
||||||
</u-radio>
|
<view>{{ '绑定银行卡' }}</view>
|
||||||
</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>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="flex_ac" v-show="this.payList.pay32">
|
</view>
|
||||||
<view class="flex_ac_i">
|
<view
|
||||||
<img src="@/static/images/pay_i2.png" alt="" />
|
class="flex_ac"
|
||||||
<view>通联微信支付</view>
|
v-show="payList[PAY_AUTH[PAY_TYPE.TONG_LIAN_WECHAT]]"
|
||||||
</view>
|
>
|
||||||
<u-radio-group v-model="whatPay">
|
<view class="flex_ac_i">
|
||||||
<u-radio activeColor="red" size="14" label="" :name="32">
|
<img src="@/static/images/pay_i2.png" alt="" />
|
||||||
</u-radio>
|
<view>通联微信支付</view>
|
||||||
</u-radio-group>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="flex_ac1" v-show="this.payList.pay33">
|
<u-radio-group v-model="whatPay">
|
||||||
<view class="flex_ac_i">
|
<u-radio
|
||||||
<img src="@/static/images/jdBank.jpg" alt="" />
|
activeColor="#005BAC"
|
||||||
<view>{{ '通联银行卡' }} ({{ '暂不支持信用卡' }})</view>
|
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>
|
||||||
<view class="pad">
|
<view class="pay_flax flax_i" @click="bindBank('jd')">
|
||||||
<view
|
<img class="img1" src="@/static/images/addto.png" alt="" />
|
||||||
v-for="(item, index) in tlList"
|
<view>{{ '绑定银行卡' }}</view>
|
||||||
: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>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="flex_ac1" v-show="this.payList.pay4">
|
</view>
|
||||||
<view class="flex_ac_i">
|
<view
|
||||||
<img src="@/static/images/jdBank.jpg" alt="" />
|
class="flex_ac"
|
||||||
<view>{{ '京东银行卡' }} ({{ '暂不支持信用卡' }})</view>
|
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>
|
||||||
<view class="pad">
|
<view class="pay_flax flax_i" @click="bindBank('tl')">
|
||||||
<view
|
<img class="img1" src="@/static/images/addto.png" alt="" />
|
||||||
v-for="(item, index) in jdList"
|
<view>{{ '绑定银行卡' }}</view>
|
||||||
: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>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</u-collapse-item>
|
</view>
|
||||||
</u-collapse>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 底部 -->
|
<!-- 底部 -->
|
||||||
|
|
@ -225,7 +308,10 @@
|
||||||
<div ref="qrCodeUrlWx" class="qrcode"></div>
|
<div ref="qrCodeUrlWx" class="qrcode"></div>
|
||||||
</view>
|
</view>
|
||||||
</u-popup>
|
</u-popup>
|
||||||
<hiSuccess @successClose="successClose" ref="hiSuccess"></hiSuccess>
|
<successDialog
|
||||||
|
@successClose="successClose"
|
||||||
|
ref="successDialog"
|
||||||
|
></successDialog>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -234,15 +320,23 @@ import * as api from '@/config/pay.js'
|
||||||
import QRCode from 'qrcodejs2'
|
import QRCode from 'qrcodejs2'
|
||||||
import { removeToken } from '@/config/auth.js'
|
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 * as act from '@/config/activity.js'
|
||||||
|
import {
|
||||||
|
PAY_REDIRECT_URL,
|
||||||
|
PAY_TYPE,
|
||||||
|
PAY_CHANEL,
|
||||||
|
PAY_AUTH,
|
||||||
|
} from '@/util/constant.js'
|
||||||
var payStatus
|
var payStatus
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
hiSuccess,
|
successDialog,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
PAY_TYPE,
|
||||||
|
PAY_AUTH,
|
||||||
payList: {},
|
payList: {},
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
clockTime: '',
|
clockTime: '',
|
||||||
|
|
@ -257,12 +351,12 @@ export default {
|
||||||
},
|
},
|
||||||
paramsPost: '',
|
paramsPost: '',
|
||||||
isShare: false, //分享用户第一次爆单
|
isShare: false, //分享用户第一次爆单
|
||||||
userInfo: '',
|
userInfo: uni.getStorageSync('User'),
|
||||||
activeNames: 1,
|
activeNames: 1,
|
||||||
whatPay: '',
|
whatPay: '',
|
||||||
hfList: [],
|
hfList: [],
|
||||||
jdList: [],
|
jdList: [],
|
||||||
businessType: '',
|
businessType: 1,
|
||||||
isBank: '',
|
isBank: '',
|
||||||
isPw: false,
|
isPw: false,
|
||||||
codeValue: '',
|
codeValue: '',
|
||||||
|
|
@ -271,9 +365,7 @@ export default {
|
||||||
sucPay: 0,
|
sucPay: 0,
|
||||||
content: '支付成功',
|
content: '支付成功',
|
||||||
wxPopup: false,
|
wxPopup: false,
|
||||||
luckydrawData: {},
|
|
||||||
isRecharge: false,
|
isRecharge: false,
|
||||||
czJe: '',
|
|
||||||
tlList: [],
|
tlList: [],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -286,51 +378,12 @@ export default {
|
||||||
)
|
)
|
||||||
|
|
||||||
this.pkCountry = uni.getStorageSync('pkCountry')
|
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.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.getPayConfig()
|
||||||
this.downTime()
|
// this.downTime()
|
||||||
// clearInterval(this.clockTime)
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onShow() {
|
onShow() {
|
||||||
|
|
@ -338,22 +391,6 @@ export default {
|
||||||
// this.getBankList()
|
// this.getBankList()
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
closewxPopup() {
|
||||||
this.wxPopup = false
|
this.wxPopup = false
|
||||||
this.$refs.qrCodeUrlWx.innerHTML = ''
|
this.$refs.qrCodeUrlWx.innerHTML = ''
|
||||||
|
|
@ -387,7 +424,7 @@ export default {
|
||||||
this.isLoading = false
|
this.isLoading = false
|
||||||
this.isPw = false
|
this.isPw = false
|
||||||
removeToken()
|
removeToken()
|
||||||
this.$refs.hiSuccess.showSuccess(res.data)
|
this.$refs.successDialog.showSuccess(res.data)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
payPw() {
|
payPw() {
|
||||||
|
|
@ -411,7 +448,7 @@ export default {
|
||||||
url(obj).then(res => {
|
url(obj).then(res => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
// this.isPw = false
|
// this.isPw = false
|
||||||
// this.$refs.hiSuccess.showSuccess(res.data)
|
// this.$refs.successDialog.showSuccess(res.data)
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: res.msg,
|
title: res.msg,
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
|
|
@ -431,66 +468,52 @@ export default {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
quickPay(cz) {
|
async quickPay() {
|
||||||
// 非银行卡
|
if (
|
||||||
if (typeof this.whatPay == 'number') {
|
![
|
||||||
if (this.whatPay == 12) {
|
PAY_TYPE.HUI_FU_BANK_CARD,
|
||||||
this.scanPayBfWx(5)
|
PAY_TYPE.JING_DONG_BANK_CARD,
|
||||||
} else if (this.whatPay == 13) {
|
PAY_TYPE.TONG_LIAN_BANK_CARD,
|
||||||
this.scanPayBfWx(6)
|
].includes(this.whatPay.slice(0, 2))
|
||||||
} else if (this.whatPay == 11) {
|
) {
|
||||||
this.scanPayBfWxJump(5)
|
if ([PAY_TYPE.JING_DONG_H5].includes(this.whatPay)) {
|
||||||
} else if (this.whatPay == 32) {
|
this.redirectPay(PAY_CHANEL[this.whatPay])
|
||||||
this.scanPayTlWxJump(3)
|
} 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 {
|
} else {
|
||||||
if (this.whatPay.slice(0, 2) == 'hf') {
|
const indexed = this.whatPay.slice(2, 4)
|
||||||
let indexed = this.whatPay.slice(2, 4)
|
const payTypeEnum = this.whatPay.slice(0, 2)
|
||||||
let params = {
|
const bankListMap = {
|
||||||
businessType: 1, //订单类型
|
[PAY_TYPE.HUI_FU_BANK_CARD]: this.hfList[indexed].bindCode,
|
||||||
businessCode: this.orderCode,
|
[PAY_TYPE.JING_DONG_BANK_CARD]: this.jdList[indexed].bindCode,
|
||||||
payChannel: 6, //汇付
|
[PAY_TYPE.TONG_LIAN_BANK_CARD]: this.tlList[indexed].bindCode,
|
||||||
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)
|
|
||||||
}
|
}
|
||||||
|
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)
|
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) {
|
scanPayBfWx(val) {
|
||||||
let params = {
|
let params = {
|
||||||
businessType: 1,
|
businessType: 1,
|
||||||
|
|
@ -567,9 +631,7 @@ export default {
|
||||||
getPayConfig() {
|
getPayConfig() {
|
||||||
api.payConfig().then(res => {
|
api.payConfig().then(res => {
|
||||||
this.payList = res.data
|
this.payList = res.data
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.collapse.init()
|
|
||||||
})
|
|
||||||
this.$forceUpdate()
|
this.$forceUpdate()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
@ -753,10 +815,9 @@ export default {
|
||||||
.flex_ac {
|
.flex_ac {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
padding: 18rpx 0;
|
padding: 18rpx 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex_ac1 {
|
.flex_ac1 {
|
||||||
|
|
@ -766,7 +827,7 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
padding: 18rpx 0;
|
// padding: 18rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex_ac_i {
|
.flex_ac_i {
|
||||||
|
|
@ -786,10 +847,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .u-collapse-item__content__text {
|
|
||||||
padding: 0px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pad {
|
.pad {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,52 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view class="contain">
|
<view class="contain">
|
||||||
<view class="zhan"></view>
|
<!-- 头部营销区域 -->
|
||||||
<view class="goodList">
|
<view class="header-section">
|
||||||
<view v-for="item in goodList"
|
<view class="hero-content">
|
||||||
:key="item.waresCode"
|
<view class="hero-title">
|
||||||
class="goodList_i"
|
<text class="hero-main">新人专享特惠</text>
|
||||||
>
|
<text class="hero-sub">精选好物·品质优选</text>
|
||||||
<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>
|
</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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -40,138 +55,476 @@ import * as api from '@/config/login.js'
|
||||||
import { setToken } from '@/config/auth.js'
|
import { setToken } from '@/config/auth.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data() {
|
||||||
return{
|
return {
|
||||||
pkParent:'',
|
pkParent: '',
|
||||||
goodList:[],
|
goodList: [],
|
||||||
placeParent:''
|
placeParent: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
filters:{
|
filters: {
|
||||||
seles(value){
|
seles(value) {
|
||||||
|
if (value > 999) {
|
||||||
if(value>999){
|
return 999 + '+'
|
||||||
return 999 + '+'
|
} else {
|
||||||
}else{
|
return value
|
||||||
return value
|
}
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
this.pkParent = options.pkParent
|
this.pkParent = options.pkParent
|
||||||
this.getToken()
|
this.getToken()
|
||||||
|
|
||||||
},
|
},
|
||||||
methods:{
|
methods: {
|
||||||
getToken(){
|
getToken() {
|
||||||
api.autoLogin({
|
api
|
||||||
pkParent:this.pkParent
|
.autoLogin({
|
||||||
}).then(res=>{
|
pkParent: this.pkParent,
|
||||||
setToken(res.data.access_token, res.data.expires_in)
|
})
|
||||||
this.getList()
|
.then(res => {
|
||||||
this.getCode()
|
setToken(res.data.access_token, res.data.expires_in)
|
||||||
})
|
this.getList()
|
||||||
|
this.getCode()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
getCode(){
|
getCode() {
|
||||||
api.fansConvertCode(
|
api.fansConvertCode(this.pkParent).then(res => {
|
||||||
this.pkParent
|
|
||||||
).then(res=>{
|
|
||||||
this.placeParent = res.msg
|
this.placeParent = res.msg
|
||||||
uni.setStorageSync('placeParent', this.placeParent)
|
uni.setStorageSync('placeParent', this.placeParent)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
getList(){
|
getList() {
|
||||||
api.queryWares({
|
api
|
||||||
shareMemberCode:this.pkParent
|
.queryWares({
|
||||||
}).then(res=>{
|
shareMemberCode: this.pkParent,
|
||||||
this.goodList = res.data
|
})
|
||||||
|
.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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.contain{
|
.contain {
|
||||||
background: #fff;
|
background: linear-gradient(
|
||||||
height: 100vh;
|
135deg,
|
||||||
background: url('~@/static/images/hf1.jpg') no-repeat;
|
#005bac 0%,
|
||||||
background-size: cover;
|
#0066cc 50%,
|
||||||
padding: 0 20px;
|
#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 {
|
.goodList {
|
||||||
padding: 40rpx;
|
height: calc(100vh - 400rpx);
|
||||||
height: 55vh;
|
padding: 0 8rpx;
|
||||||
overflow-y: auto;
|
|
||||||
background: url('~@/static/images/hf2.png') no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
.goodList_i {
|
.goodList_i {
|
||||||
display: flex;
|
display: flex;
|
||||||
border-bottom: 1px solid #eee;
|
background: #ffffff;
|
||||||
padding: 60rpx 60rpx 30rpx 60rpx;
|
border-radius: 20rpx;
|
||||||
// background: url('~@/static/images/hf3.png') no-repeat;
|
margin-bottom: 24rpx;
|
||||||
// background-size: cover;
|
padding: 24rpx;
|
||||||
border-radius: 20rpx;
|
box-shadow: 0 4rpx 16rpx rgba(0, 91, 172, 0.06);
|
||||||
background-image: linear-gradient(to bottom, #fefbf8, #fadf97);
|
border: 1rpx solid rgba(0, 91, 172, 0.1);
|
||||||
margin-bottom: 20rpx;
|
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 {
|
.goodList_ir {
|
||||||
margin-left: 40rpx;
|
margin-left: 24rpx;
|
||||||
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-size: 24rpx;
|
|
||||||
font-family: Microsoft YaHei;
|
.tit1 {
|
||||||
font-weight: 400;
|
color: #1e293b;
|
||||||
color: #333333;
|
font-size: 32rpx;
|
||||||
.goodList_ib {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 24px;
|
|
||||||
font-family: Source Han Sans CN;
|
|
||||||
font-weight: 600;
|
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 {
|
img {
|
||||||
width: 56rpx;
|
width: 56rpx;
|
||||||
height: 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;
|
.list-bottom {
|
||||||
height: 200rpx;
|
|
||||||
background: #ffffff;
|
|
||||||
border: 1px solid #eeeeee;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
.toBuy{
|
|
||||||
color: #fff;
|
|
||||||
background: #005BAC;
|
|
||||||
padding: 10rpx 0;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 10rpx;
|
padding: 40rpx 0 60rpx;
|
||||||
font-size: 20px;
|
|
||||||
|
.bottom-text {
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tit1{
|
|
||||||
color: #93561f;
|
// 动画定义
|
||||||
font-size: 16px;
|
@keyframes slideDown {
|
||||||
font-weight: 700;
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-50rpx);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.sales{
|
|
||||||
color: #923f32;
|
@keyframes fadeIn {
|
||||||
font-size: 10px;
|
from {
|
||||||
font-weight: 700;
|
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="subTxt">
|
||||||
<view class="subTxt1">{{ '会员信息' }}</view>
|
<view class="subTxt1">{{ '会员信息' }}</view>
|
||||||
</view>
|
</view>
|
||||||
<u-form
|
<u-form :model="form" labelWidth="75" :rules="rules" ref="uForm">
|
||||||
:model="form"
|
|
||||||
labelAlign="right"
|
|
||||||
labelWidth="75"
|
|
||||||
:rules="rules"
|
|
||||||
ref="uForm"
|
|
||||||
>
|
|
||||||
<view class="kuang">
|
<view class="kuang">
|
||||||
<u-form-item :label="'会员姓名'" prop="memberName">
|
<u-form-item
|
||||||
|
:label="'会员姓名'"
|
||||||
|
prop="memberName"
|
||||||
|
borderBottom
|
||||||
|
required
|
||||||
|
>
|
||||||
<u-input
|
<u-input
|
||||||
:placeholder="'请输入会员姓名'"
|
:placeholder="'请输入会员姓名'"
|
||||||
v-model.trim="form.memberName"
|
v-model.trim="form.memberName"
|
||||||
|
border="none"
|
||||||
/>
|
/>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item :label="'联系方式'" prop="phone">
|
<u-form-item :label="'联系方式'" prop="phone" borderBottom required>
|
||||||
<u-input
|
<u-input
|
||||||
:placeholder="'请输入联系方式'"
|
:placeholder="'请输入联系方式'"
|
||||||
type="number"
|
type="number"
|
||||||
v-model.trim="form.phone"
|
v-model.trim="form.phone"
|
||||||
:maxlength="user.pkSettleCountry == 1 ? 11 : 20"
|
:maxlength="user.pkSettleCountry == 1 ? 11 : 20"
|
||||||
|
border="none"
|
||||||
/>
|
/>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item :label="'自然国家'" @tap="changeCountry(0)">
|
|
||||||
<view class="disFlex justBwn ge">
|
<u-form-item :label="'运输方式'" borderBottom>
|
||||||
<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="'运输方式'">
|
|
||||||
<view class="pickerHui">
|
<view class="pickerHui">
|
||||||
<u-input
|
<u-input
|
||||||
v-model="form.transTypeVal"
|
v-model="form.transTypeVal"
|
||||||
disabled
|
disabled
|
||||||
border="none"
|
border="none"
|
||||||
></u-input>
|
></u-input>
|
||||||
<u-icon name="arrow-down"></u-icon>
|
|
||||||
</view>
|
</view>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item :label="'发货方式'">
|
<u-form-item :label="'发货方式'" borderBottom>
|
||||||
<view class="pickerHui">
|
<view class="pickerHui">
|
||||||
<u-input
|
<u-input
|
||||||
v-model="form.deliveryName"
|
v-model="form.deliveryName"
|
||||||
|
|
@ -72,7 +55,6 @@
|
||||||
:placeholder="'请选择发货方式'"
|
:placeholder="'请选择发货方式'"
|
||||||
border="none"
|
border="none"
|
||||||
></u-input>
|
></u-input>
|
||||||
<u-icon name="arrow-down"></u-icon>
|
|
||||||
</view>
|
</view>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -82,23 +64,29 @@
|
||||||
<view class="kuang">
|
<view class="kuang">
|
||||||
<view class="disFlex tit_t">
|
<view class="disFlex tit_t">
|
||||||
<view></view>
|
<view></view>
|
||||||
<!-- <view class="lan" @click="addAdress">新增收货人地址</view> -->
|
|
||||||
</view>
|
</view>
|
||||||
<u-form-item :label="'收货人'" prop="recName">
|
<u-form-item :label="'收货人'" prop="recName" borderBottom>
|
||||||
<u-input
|
<u-input
|
||||||
v-model.trim="form.recName"
|
v-model.trim="form.recName"
|
||||||
:placeholder="'请输入收货人'"
|
:placeholder="'请输入收货人'"
|
||||||
|
border="none"
|
||||||
/>
|
/>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item :label="'收货电话'" prop="recPhone">
|
<u-form-item :label="'收货电话'" prop="recPhone" borderBottom>
|
||||||
<u-input
|
<u-input
|
||||||
v-model.trim="form.recPhone"
|
v-model.trim="form.recPhone"
|
||||||
type="number"
|
type="number"
|
||||||
maxlength="20"
|
maxlength="20"
|
||||||
:placeholder="'请输入收货电话'"
|
:placeholder="'请输入收货电话'"
|
||||||
|
border="none"
|
||||||
/>
|
/>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item :label="'收货地址'" prop="diqu" @click="getDiqu">
|
<u-form-item
|
||||||
|
:label="'收货地址'"
|
||||||
|
prop="diqu"
|
||||||
|
@click="getDiqu"
|
||||||
|
borderBottom
|
||||||
|
>
|
||||||
<view class="picker">
|
<view class="picker">
|
||||||
<u-input
|
<u-input
|
||||||
v-model.trim="form.diqu"
|
v-model.trim="form.diqu"
|
||||||
|
|
@ -108,17 +96,17 @@
|
||||||
<u-icon name="arrow-down"></u-icon>
|
<u-icon name="arrow-down"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item :label="'详细地址'" prop="recAddress">
|
<u-form-item :label="'详细地址'" prop="recAddress" borderBottom>
|
||||||
<u--textarea
|
<u--textarea
|
||||||
v-model.trim="form.recAddress"
|
v-model.trim="form.recAddress"
|
||||||
maxlength="200"
|
maxlength="200"
|
||||||
:placeholder="'请输入详细地址'"
|
:placeholder="'请输入详细地址'"
|
||||||
></u--textarea>
|
></u--textarea>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item :label="'邮费'">
|
<u-form-item :label="'邮费'" borderBottom>
|
||||||
<u-input disabled v-model="form.postage" />
|
<u-input disabled v-model="form.postage" />
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item :label="'备注'">
|
<u-form-item :label="'备注'" borderBottom>
|
||||||
<u--textarea
|
<u--textarea
|
||||||
v-model="form.remark"
|
v-model="form.remark"
|
||||||
:placeholder="'请输入备注'"
|
:placeholder="'请输入备注'"
|
||||||
|
|
@ -126,36 +114,6 @@
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
</view>
|
</view>
|
||||||
</u-form>
|
</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="subTxt">
|
||||||
<view class="subTxt1">商品信息</view>
|
<view class="subTxt1">商品信息</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -205,19 +163,6 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</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>
|
||||||
<!-- 占空 -->
|
<!-- 占空 -->
|
||||||
<view style="height: 150rpx"></view>
|
<view style="height: 150rpx"></view>
|
||||||
|
|
@ -256,7 +201,6 @@
|
||||||
:columns="countryList"
|
:columns="countryList"
|
||||||
keyName="label"
|
keyName="label"
|
||||||
></u-picker>
|
></u-picker>
|
||||||
<agreement ref="agreement"></agreement>
|
|
||||||
<v-address
|
<v-address
|
||||||
ref="address"
|
ref="address"
|
||||||
:defaultCode="defaultCode"
|
:defaultCode="defaultCode"
|
||||||
|
|
@ -270,11 +214,9 @@ import address from '@/components/address.vue'
|
||||||
import * as api from '@/config/goods'
|
import * as api from '@/config/goods'
|
||||||
import * as regiest from '@/config/regiest'
|
import * as regiest from '@/config/regiest'
|
||||||
|
|
||||||
import agreement from '@/components/agreement.vue'
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
'v-address': address,
|
'v-address': address,
|
||||||
agreement,
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -450,10 +392,7 @@ export default {
|
||||||
// url: '/pages/address/index',
|
// url: '/pages/address/index',
|
||||||
// })
|
// })
|
||||||
// },
|
// },
|
||||||
toAgree() {
|
|
||||||
// agreeMent
|
|
||||||
this.$refs.agreement.openDig()
|
|
||||||
},
|
|
||||||
getGenerate() {
|
getGenerate() {
|
||||||
api.generate().then(res => {
|
api.generate().then(res => {
|
||||||
uni.setStorageSync('mToken', res.msg)
|
uni.setStorageSync('mToken', res.msg)
|
||||||
|
|
@ -461,14 +400,6 @@ export default {
|
||||||
},
|
},
|
||||||
goBuy() {
|
goBuy() {
|
||||||
this.$refs.uForm.validate().then(res => {
|
this.$refs.uForm.validate().then(res => {
|
||||||
if (this.agreementShow.length == 0) {
|
|
||||||
uni.showToast({
|
|
||||||
title: '请阅读并同意购买协议',
|
|
||||||
icon: 'none',
|
|
||||||
duration: 1500,
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.isLoading = true
|
this.isLoading = true
|
||||||
api
|
api
|
||||||
.fansConfirm(
|
.fansConfirm(
|
||||||
|
|
@ -492,9 +423,14 @@ export default {
|
||||||
pkWares: this.allData.pkId,
|
pkWares: this.allData.pkId,
|
||||||
skuList: [],
|
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({
|
carList.skuList.push({
|
||||||
pkWaresSku: item.pkWaresSpecsSku,
|
pkWaresSku: item.pkSkuId,
|
||||||
quantity: item.quantity,
|
quantity: item.quantity,
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
@ -547,7 +483,7 @@ export default {
|
||||||
}
|
}
|
||||||
.kuang {
|
.kuang {
|
||||||
// margin-top: 20rpx;
|
// margin-top: 20rpx;
|
||||||
padding: 20rpx 40rpx;
|
// padding: 20rpx 40rpx;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
// box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
|
// box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
|
||||||
// border-radius: 10px 10px 10px 10px;
|
// border-radius: 10px 10px 10px 10px;
|
||||||
|
|
@ -573,22 +509,16 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-width: 0.5px !important;
|
|
||||||
border-color: #dadbde !important;
|
|
||||||
border-style: solid;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 6px 9px;
|
padding: 6px 9px;
|
||||||
}
|
}
|
||||||
.pickerHui {
|
.pickerHui {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-width: 0.5px !important;
|
|
||||||
border-color: #dadbde !important;
|
|
||||||
border-style: solid;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 6px 9px;
|
// padding: 6px 9px;
|
||||||
background: #f5f7fa;
|
// background: #f5f7fa;
|
||||||
}
|
}
|
||||||
.kuang_t {
|
.kuang_t {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -784,4 +714,9 @@ export default {
|
||||||
background: #f6f6f6;
|
background: #f6f6f6;
|
||||||
padding: 0 28rpx 28rpx 28rpx;
|
padding: 0 28rpx 28rpx 28rpx;
|
||||||
}
|
}
|
||||||
|
.u-form-item {
|
||||||
|
::v-deep .u-form-item__body {
|
||||||
|
padding: 20rpx 30rpx !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,97 +1,95 @@
|
||||||
<!--
|
<!--
|
||||||
* @Descripttion:
|
* @Descripttion:
|
||||||
* @version:
|
* @version:
|
||||||
* @Author: kBank
|
* @Author: kBank
|
||||||
* @Date: 2022-11-21 15:11:22
|
* @Date: 2022-11-21 15:11:22
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<view >
|
<view>
|
||||||
<view v-if="!pkCountry" class="content1">
|
<view v-if="!pkCountry" class="content1">
|
||||||
<!-- <view class="index_header">
|
<!-- <view class="index_header">
|
||||||
<view>注册</view>
|
<view>注册</view>
|
||||||
</view> -->
|
</view> -->
|
||||||
<!-- <view class="tit" v-if="!pkCountry">{{ '嗨粉扫天下' }}</view> -->
|
<!-- <view class="tit" v-if="!pkCountry">{{ '嗨粉扫天下' }}</view> -->
|
||||||
<!-- 海粉 -->
|
<!-- 海粉 -->
|
||||||
<view class="formed1"
|
<view class="formed1">
|
||||||
>
|
<u-form :model="form" labelWidth="80px" ref="uForm" :rules="rules">
|
||||||
<u-form :model="form"
|
<u-form-item label="" prop="memberCode">
|
||||||
labelWidth="80px"
|
<u-input v-model="form.memberCode" type="number" disabled>
|
||||||
ref="uForm"
|
<u--text
|
||||||
:rules="rules">
|
:text="howHeader"
|
||||||
<u-form-item label=""
|
slot="prefix"
|
||||||
prop="memberCode">
|
margin="0 3px 0 0"
|
||||||
<u-input v-model="form.memberCode"
|
type="tips"
|
||||||
type="number"
|
></u--text>
|
||||||
disabled>
|
</u-input>
|
||||||
<u--text :text="howHeader"
|
</u-form-item>
|
||||||
slot="prefix"
|
<u-form-item label="" prop="memberName">
|
||||||
margin="0 3px 0 0"
|
<u-input
|
||||||
type="tips"></u--text>
|
v-model="form.memberName"
|
||||||
</u-input>
|
:placeholder="'请输入会员姓名'"
|
||||||
</u-form-item>
|
/>
|
||||||
<u-form-item label=""
|
</u-form-item>
|
||||||
prop="memberName">
|
<u-form-item label="" prop="phone">
|
||||||
<u-input v-model="form.memberName"
|
<u-input
|
||||||
:placeholder="'请输入会员姓名'" />
|
v-model="form.phone"
|
||||||
</u-form-item>
|
@blur="setMemberCode"
|
||||||
<u-form-item label=""
|
:placeholder="'请输入联系方式'"
|
||||||
prop="phone">
|
type="number"
|
||||||
<u-input v-model="form.phone" @blur="setMemberCode"
|
maxlength="20"
|
||||||
:placeholder="'请输入联系方式'" type="number" maxlength="20" />
|
/>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
|
||||||
<u-form-item label=""
|
<u-form-item label="" prop="loginPassword">
|
||||||
prop="loginPassword">
|
<u-input
|
||||||
<u-input :password="isPwd"
|
:password="isPwd"
|
||||||
:placeholder="'请输入登录密码'"
|
:placeholder="'请输入登录密码'"
|
||||||
v-model="form.loginPassword">
|
v-model="form.loginPassword"
|
||||||
<template slot="suffix">
|
>
|
||||||
<u-icon name="eye"
|
<template slot="suffix">
|
||||||
@tap="isPwd=!isPwd"
|
<u-icon name="eye" @tap="isPwd = !isPwd" v-if="!isPwd"></u-icon>
|
||||||
v-if="!isPwd"></u-icon>
|
<u-icon name="eye-off" @tap="isPwd = !isPwd" v-else></u-icon>
|
||||||
<u-icon name="eye-off"
|
</template>
|
||||||
@tap="isPwd=!isPwd"
|
</u-input>
|
||||||
v-else></u-icon>
|
</u-form-item>
|
||||||
</template>
|
<u-form-item label="" prop="payPassword">
|
||||||
</u-input>
|
<u-input
|
||||||
</u-form-item>
|
:password="isPwd2"
|
||||||
<u-form-item label=""
|
:placeholder="'请输入支付密码'"
|
||||||
prop="payPassword">
|
v-model="form.payPassword"
|
||||||
<u-input :password="isPwd2"
|
>
|
||||||
:placeholder="'请输入支付密码'"
|
<template slot="suffix">
|
||||||
v-model="form.payPassword">
|
<u-icon
|
||||||
<template slot="suffix">
|
name="eye"
|
||||||
<u-icon name="eye"
|
@tap="isPwd2 = !isPwd2"
|
||||||
@tap="isPwd2=!isPwd2"
|
v-if="!isPwd2"
|
||||||
v-if="!isPwd2"></u-icon>
|
></u-icon>
|
||||||
<u-icon name="eye-off"
|
<u-icon name="eye-off" @tap="isPwd2 = !isPwd2" v-else></u-icon>
|
||||||
@tap="isPwd2=!isPwd2"
|
</template>
|
||||||
v-else></u-icon>
|
</u-input>
|
||||||
</template>
|
</u-form-item>
|
||||||
</u-input>
|
<u-form-item label="" prop="code">
|
||||||
</u-form-item>
|
<u-input v-model="form.code" :placeholder="'请输入验证码'">
|
||||||
<u-form-item label=""
|
<template slot="suffix">
|
||||||
prop="code">
|
<view class="getCode" @tap="getVilCode">{{ getCode }}</view>
|
||||||
<u-input v-model="form.code"
|
</template>
|
||||||
:placeholder="'请输入验证码'">
|
</u-input>
|
||||||
<template slot="suffix">
|
</u-form-item>
|
||||||
<view class="getCode"
|
</u-form>
|
||||||
@tap="getVilCode">{{ getCode }}</view>
|
<u-button
|
||||||
</template>
|
type="success"
|
||||||
</u-input>
|
class="uBtn"
|
||||||
</u-form-item>
|
shape="circle"
|
||||||
</u-form>
|
color="linear-gradient(to right, #005BAC, #005BAC )"
|
||||||
<u-button type="success"
|
:loading="isLoading"
|
||||||
class="uBtn"
|
:loadingText="'注册中'"
|
||||||
shape="circle"
|
@click="toLogin"
|
||||||
color="linear-gradient(to right, #005BAC, #005BAC )"
|
>{{ '立即注册' }}</u-button
|
||||||
:loading="isLoading"
|
>
|
||||||
:loadingText="'注册中'"
|
</view>
|
||||||
@click="toLogin">{{ '立即注册' }}</u-button>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<view v-else class="content">
|
||||||
<view v-else class="content">
|
<!-- <view class="tit" >{{ '海粉扫天下' }}</view>
|
||||||
<!-- <view class="tit" >{{ '海粉扫天下' }}</view>
|
|
||||||
<view class="formed"
|
<view class="formed"
|
||||||
>
|
>
|
||||||
<u-form :model="form"
|
<u-form :model="form"
|
||||||
|
|
@ -184,11 +182,9 @@
|
||||||
:columns="countryList"></u-picker>
|
:columns="countryList"></u-picker>
|
||||||
|
|
||||||
</view> -->
|
</view> -->
|
||||||
|
</view>
|
||||||
|
<view class="mask" v-if="isTrue"> </view>
|
||||||
</view>
|
</view>
|
||||||
<view class="mask" v-if="isTrue">
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -197,7 +193,7 @@ export default {
|
||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isTrue:false,
|
isTrue: false,
|
||||||
howHeader: 'HF',
|
howHeader: 'HF',
|
||||||
pkParent: '',
|
pkParent: '',
|
||||||
form: {
|
form: {
|
||||||
|
|
@ -225,15 +221,15 @@ export default {
|
||||||
memberName: [
|
memberName: [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message:'请输入会员姓名',
|
message: '请输入会员姓名',
|
||||||
trigger: [ 'blur'],
|
trigger: ['blur'],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
phone: [
|
phone: [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入联系方式',
|
message: '请输入联系方式',
|
||||||
trigger: [ 'blur'],
|
trigger: ['blur'],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
code: [
|
code: [
|
||||||
|
|
@ -254,7 +250,7 @@ export default {
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入支付密码',
|
message: '请输入支付密码',
|
||||||
trigger: [ 'blur'],
|
trigger: ['blur'],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
@ -300,14 +296,15 @@ export default {
|
||||||
onReady() {},
|
onReady() {},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
this.pkParent = options.code
|
this.pkParent = options.code
|
||||||
this.pkCountry = options.country || ''
|
this.pkCountry = 1
|
||||||
this.getGenerate()
|
this.getGenerate()
|
||||||
if (this.pkCountry) {
|
if (this.pkCountry) {
|
||||||
|
|
||||||
this.getCountry()
|
this.getCountry()
|
||||||
this.form.pkCountry = this.pkCountry
|
this.form.pkCountry = this.pkCountry
|
||||||
uni.setStorageSync('pkCountry',this.pkCountry)
|
uni.setStorageSync('pkCountry', this.pkCountry)
|
||||||
uni.redirectTo({ url: '/pages/shareArea/hiList?pkParent=' + this.pkParent})
|
uni.redirectTo({
|
||||||
|
url: '/pages/shareArea/hiList?pkParent=' + this.pkParent,
|
||||||
|
})
|
||||||
// this.$refs.uForm1.setRules(this.rules1)
|
// this.$refs.uForm1.setRules(this.rules1)
|
||||||
} else {
|
} else {
|
||||||
// 获取前缀
|
// 获取前缀
|
||||||
|
|
@ -318,21 +315,11 @@ export default {
|
||||||
},
|
},
|
||||||
onShow() {},
|
onShow() {},
|
||||||
methods: {
|
methods: {
|
||||||
setMemberCode(){
|
setMemberCode() {
|
||||||
// this.form.memberCode = this.form.phone
|
// this.form.memberCode = this.form.phone
|
||||||
this.$set(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
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
|
|
||||||
memberCodeRule(rule, value, callback) {
|
memberCodeRule(rule, value, callback) {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
callback(new Error('请输入会员编号'))
|
callback(new Error('请输入会员编号'))
|
||||||
|
|
@ -340,7 +327,7 @@ export default {
|
||||||
if (value.length < 10 || value.length > 20) {
|
if (value.length < 10 || value.length > 20) {
|
||||||
callback(new Error('请输入10-20位数字'))
|
callback(new Error('请输入10-20位数字'))
|
||||||
} else {
|
} else {
|
||||||
api.validateMember(value).then((res) => {
|
api.validateMember(value).then(res => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
callback()
|
callback()
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -351,30 +338,33 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getHeader() {
|
getHeader() {
|
||||||
api.checkShare().then((res) => {
|
api.checkShare().then(res => {
|
||||||
if(res.code != 200){
|
if (res.code != 200) {
|
||||||
this.isTrue = true
|
this.isTrue = true
|
||||||
}else{
|
} else {
|
||||||
this.isTrue = false
|
this.isTrue = false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
// api.prefix(this.pkParent).then((res) => {
|
// api.prefix(this.pkParent).then((res) => {
|
||||||
// this.howHeader = res.msg
|
// this.howHeader = res.msg
|
||||||
// })
|
// })
|
||||||
},
|
},
|
||||||
getGenerate() {
|
getGenerate() {
|
||||||
api.generate().then((res) => {
|
return new Promise((resolve, reject) => {
|
||||||
uni.setStorageSync('mToken', res.msg)
|
api.generate().then(res => {
|
||||||
|
resolve(res)
|
||||||
|
uni.setStorageSync('mToken', res.msg)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
toLogin() {
|
toLogin() {
|
||||||
this.$refs.uForm.validate().then((res) => {
|
this.$refs.uForm.validate().then(res => {
|
||||||
this.isLoading = true
|
this.isLoading = true
|
||||||
api
|
api
|
||||||
.regShareMember(
|
.regShareMember(
|
||||||
Object.assign({}, this.form, { parent: this.pkParent })
|
Object.assign({}, this.form, { parent: this.pkParent })
|
||||||
)
|
)
|
||||||
.then((res) => {
|
.then(res => {
|
||||||
this.isLoading = false
|
this.isLoading = false
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
|
|
@ -387,11 +377,11 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
hiLogin() {
|
hiLogin() {
|
||||||
this.$refs.uForm1.validate().then((res) => {
|
this.$refs.uForm1.validate().then(res => {
|
||||||
this.isLoading = true
|
this.isLoading = true
|
||||||
api
|
api
|
||||||
.hiRegister(Object.assign({}, this.form, { pkParent: this.pkParent }))
|
.hiRegister(Object.assign({}, this.form, { pkParent: this.pkParent }))
|
||||||
.then((res) => {
|
.then(res => {
|
||||||
this.isLoading = false
|
this.isLoading = false
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
|
|
@ -409,16 +399,16 @@ export default {
|
||||||
this.isCountry = false
|
this.isCountry = false
|
||||||
},
|
},
|
||||||
getCountry() {
|
getCountry() {
|
||||||
api.getCountry().then((res) => {
|
api.getCountry().then(res => {
|
||||||
this.countryList = [
|
this.countryList = [
|
||||||
res.data.map((item) => {
|
res.data.map(item => {
|
||||||
return {
|
return {
|
||||||
label: item.shortName,
|
label: item.shortName,
|
||||||
id: item.pkId,
|
id: item.pkId,
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
]
|
]
|
||||||
this.countryList[0].forEach((item) => {
|
this.countryList[0].forEach(item => {
|
||||||
if (this.pkCountry == item.id) {
|
if (this.pkCountry == item.id) {
|
||||||
this.form.jsName = item.label
|
this.form.jsName = item.label
|
||||||
this.form.pkCountryName = item.label
|
this.form.pkCountryName = item.label
|
||||||
|
|
@ -433,8 +423,8 @@ export default {
|
||||||
.verification({
|
.verification({
|
||||||
phone: this.form.phone,
|
phone: this.form.phone,
|
||||||
})
|
})
|
||||||
.then((res) => {})
|
.then(res => {})
|
||||||
.catch((err) => {
|
.catch(err => {
|
||||||
this.beginTime = 0
|
this.beginTime = 0
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
@ -460,35 +450,37 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.content1{
|
.content1 {
|
||||||
background-image: url('@/static/images/haiRgeiest1.jpg');
|
background-image: url('@/static/images/haiRgeiest1.jpg');
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
.content{
|
.content {
|
||||||
background-image: url('@/static/images/huan.jpg');
|
background-image: url('@/static/images/huan.jpg');
|
||||||
// background-image: url('@/static/images/regiestBg.jpg');
|
// background-image: url('@/static/images/regiestBg.jpg');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
.tit{
|
.tit {
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
font-family: PangMenZhengDao-Regular, PangMenZhengDao;
|
font-family: PangMenZhengDao-Regular, PangMenZhengDao;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 80px;
|
padding-top: 80px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.index_header {
|
.index_header {
|
||||||
background: #f9f9f9;;
|
background: #f9f9f9;
|
||||||
height: 330rpx;
|
height: 330rpx;
|
||||||
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-family: PingFang SC-Semibold, PingFang SC;
|
font-family:
|
||||||
|
PingFang SC-Semibold,
|
||||||
|
PingFang SC;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -503,9 +495,11 @@ margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.getCode {
|
.getCode {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-family: PingFang SC-Regular, PingFang SC;
|
font-family:
|
||||||
|
PingFang SC-Regular,
|
||||||
|
PingFang SC;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #005BAC;
|
color: #005bac;
|
||||||
}
|
}
|
||||||
.uBtn {
|
.uBtn {
|
||||||
margin-top: 120rpx;
|
margin-top: 120rpx;
|
||||||
|
|
@ -519,14 +513,14 @@ margin-bottom: 20px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 6px 9px;
|
padding: 6px 9px;
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
::v-deep .u-input{
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
.mask{
|
::v-deep .u-input {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.mask {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background: rgba(0,0,0,0.5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
top: 0;
|
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