644 lines
15 KiB
Vue
644 lines
15 KiB
Vue
<template>
|
|
<view>
|
|
<view class="top_head pr" :style="'background-color: #fff;'">
|
|
<!-- #ifndef MP-WEIXIN -->
|
|
<view class="state_top"></view>
|
|
<!-- #endif -->
|
|
<view class="head_top" :style="'height:' + topBarTop() + 'px;'"></view>
|
|
<view class="d-b-c pb20" :style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;'">
|
|
<view class="fb">
|
|
<view class="t-i-j f22">
|
|
GLOBALIZATION
|
|
<text class="jus-null"></text>
|
|
</view>
|
|
<view class="t-i-j f26">
|
|
{{ $t("w_0024") }}
|
|
<text class="jus-null"></text>
|
|
</view>
|
|
</view>
|
|
<view class="d-c-c">
|
|
<!-- <view
|
|
class="mr20"
|
|
@click="
|
|
gotoWeb(
|
|
'https://im1c5366d.7x24cc.com/phone_webChat.html?accountId=N000000033467&chatId=302384fb-eda1-436e-a5e9-c03a2dbd6e97&visitorId=' +
|
|
getUserId() +
|
|
'&nickName=' +
|
|
getUserId()
|
|
)
|
|
"
|
|
>
|
|
<u-icon name="kefu-ermai" size="32rpx" color="#333"></u-icon>
|
|
</view> -->
|
|
<view class="f26 gray3 d-c-c" @click="changelang()">
|
|
<text class="mr10">{{ getlang() }}</text>
|
|
<u-icon name="arrow-down" size="30rpx" color="#333"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 轮播 -->
|
|
<view class="diy-banner-box pr mb20" :style="'background-color:none;'">
|
|
<swiper class="swiper" :autoplay="true" :interval="2000" :duration="500" @change="changeSwiper">
|
|
<swiper-item v-for="(item, index) in advertBannerList" :key="index">
|
|
<image :src="item.picture"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="swiper-dots ww100 d-c-c">
|
|
<view :class="current == index ? 'swiper-dot active' : 'swiper-dot'"
|
|
v-for="(item, index) in advertBannerList" :key="index"></view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="time-box f26">{{$t('fn_313')+': '}}<text class="domation">{{nowDate}}</text></view> -->
|
|
<annuity :userInfo="userInfo"></annuity>
|
|
<view class="nav-list">
|
|
<view class="nav-item" v-for="(item, index) in recommendSpecialAreaList" :key="index" v-if="
|
|
(!isClockMore || index < 6) &&
|
|
item.waresList &&
|
|
item.waresList.length > 0
|
|
" @click="gotoPage('/pages/product/list?cid=' + item.specialArea)">
|
|
<view class="nav-item-name text-ellipsis">{{
|
|
item.specialAreaName
|
|
}}</view>
|
|
<view class="nav-item-product d-b-c">
|
|
<view class="nav-i-p-item" v-for="(pitem, pindex) in item.waresList" :key="pindex"
|
|
v-if="pindex < 6">
|
|
<image class="nav-i-p-item-image" :src="pitem.cover1" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <image class="nav-item" src="/static/temp/nav1.png" mode=""></image> -->
|
|
<!-- <image class="nav-item" src="/static/temp/nav2.png" mode=""></image> -->
|
|
<!-- <image class="nav-item" src="/static/temp/nav3.png" mode=""></image> -->
|
|
<!-- <image class="nav-item" src="/static/temp/nav4.png" mode=""></image> -->
|
|
</view>
|
|
<view class="d-c-c" v-if="recommendSpecialAreaList.length > 6">
|
|
<button class="more-btn" v-if="isClockMore" @click="isClockMore = false">
|
|
{{ $t("S_L_11") }}
|
|
</button>
|
|
<button class="more-btn" v-else @click="isClockMore = true">
|
|
{{ $t("w_0400") }}
|
|
</button>
|
|
</view>
|
|
<view class="d-b-s product-list">
|
|
<!-- <view class="pr packAdswiper-box">
|
|
<swiper :autoplay="false" :current="thIndex" class="packAdswiper" :interval="2000" :duration="500"
|
|
@change="changepackAd">
|
|
<swiper-item v-for="(item, index) in waresCoverInfoList" :key="index">
|
|
<image :src="item.cover"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="swiper-dots ww100 d-c-c">
|
|
<view :class="thIndex == index ? 'swiper-dot active' : 'swiper-dot'"
|
|
v-for="(item, index) in waresCoverInfoList" :key="index"></view>
|
|
</view>
|
|
</view> -->
|
|
<view class="product-item" v-for="(item, index) in waresVoList" :key="index" @click="
|
|
gotoPage(
|
|
'/pages/product/detail?pkCountry=' +
|
|
userInfo.pkCountry +
|
|
'&cid=' +
|
|
item.specialArea +
|
|
(item.specialArea != 21
|
|
? '&waresCode=' + item.waresCode
|
|
: '&pkId=' + item.pkId)
|
|
)
|
|
">
|
|
<image :src="item.cover1" mode="aspectFill" class="product-img"></image>
|
|
<view class="product-info">
|
|
<view class="text-ellipsis mb10 f26 gray3">{{ item.waresName }}</view>
|
|
<view class="price-color f22">
|
|
{{ currencyIcon() }}
|
|
<text class="f30 fb">{{ formatNum(item.waresPrice) }}</text>
|
|
</view>
|
|
<view class="gray9 mt10" v-if="item.sales > 0">{{ $t("w_0252")
|
|
}}{{ item.sales * 1 > 999 ? "999+" : item.sales }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<template v-if="isPop && !isTree">
|
|
<view class="pop-bg" @click.stop="isPop = false"></view>
|
|
<view class="pop-content">
|
|
<view class="pop-content-box">
|
|
<view class="d-e-c" @click.stop="isPop = false"><u-icon name="close" size="28rpx"
|
|
color="#999999"></u-icon></view>
|
|
<view class="tc fb f32 p20 border-b">{{
|
|
$t("ENU_NOTICE_FUNCTION_TYPE_1")
|
|
}}</view>
|
|
<view class="pop-list">
|
|
<view class="f28 tc p20">{{ pop_title }}</view>
|
|
<u-parse :content="pop_content"></u-parse>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template v-if="isBank">
|
|
<view class="pop-bg" @click.stop="isPop = false"></view>
|
|
<view class="pop-content">
|
|
<view class="pop-content-box1">
|
|
<view class="d-e-c" @click.stop="closeBank()"><u-icon name="close" size="28rpx"
|
|
color="#999999"></u-icon></view>
|
|
<view class="tc fb f32">{{ $t("w_0034") }}</view>
|
|
<view class="pop-list">
|
|
<view class="f28 tc p20">{{ $t("fn_311") }}</view>
|
|
<view style="text-align: center">
|
|
<button class="bankbtn" @click="toBank">
|
|
{{ $t("w_0343") }}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<treeActive v-if="isTree" :isPop="isTree" :num="treeNum" :treeModel="treeModel" @close="closeTree"></treeActive>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import treeActive from "@/components/treeActive/treeActive.vue";
|
|
import annuity from "@/components/annuity/index.vue";
|
|
export default {
|
|
components: {
|
|
treeActive,
|
|
annuity,
|
|
},
|
|
data() {
|
|
return {
|
|
isTree: false,
|
|
isPop: false,
|
|
isBank: false,
|
|
userInfo: {
|
|
pkGradeId: 0,
|
|
pkAwardsId: 0,
|
|
memberGrade: "",
|
|
},
|
|
pop_title: "",
|
|
pop_content: "",
|
|
advertBannerList: [],
|
|
recommendSpecialAreaList: [],
|
|
waresCoverInfoList: [],
|
|
waresVoList: [],
|
|
current: 0,
|
|
thIndex: 0,
|
|
adList: [{
|
|
link_url: "",
|
|
file_path: "/static/temp/banner1.png",
|
|
},
|
|
{
|
|
link_url: "",
|
|
file_path: "/static/temp/banner2.png",
|
|
},
|
|
],
|
|
adList2: [{
|
|
link_url: "",
|
|
file_path: "/static/temp/ban1.png",
|
|
},
|
|
{
|
|
link_url: "",
|
|
file_path: "/static/temp/ban2.png",
|
|
},
|
|
],
|
|
isClockMore: true,
|
|
treeModel: {},
|
|
treePop: false,
|
|
treeNum: 1,
|
|
timer: null,
|
|
nowDate: ''
|
|
};
|
|
},
|
|
created() {
|
|
this.getData();
|
|
this.getCartNum();
|
|
this.getUserInfoData();
|
|
// this.getTree();
|
|
this.getBank();
|
|
},
|
|
beforeDestroy() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer);
|
|
}
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
setTimer(timeString) {
|
|
let self = this;
|
|
let currentTime = new Date(timeString);
|
|
this.timer = setInterval(() => {
|
|
currentTime.setSeconds(currentTime.getSeconds() + 1);
|
|
timeString = self.formatDate(currentTime);
|
|
self.nowDate = timeString;
|
|
}, 1000);
|
|
},
|
|
formatDate(date) {
|
|
return date.getFullYear() + '-' +
|
|
(date.getMonth() + 1).toString().padStart(2, '0') + '-' +
|
|
date.getDate().toString().padStart(2, '0') + ' ' +
|
|
date.getHours().toString().padStart(2, '0') + ':' +
|
|
date.getMinutes().toString().padStart(2, '0') + ':' +
|
|
date.getSeconds().toString().padStart(2, '0');
|
|
},
|
|
getTime() {
|
|
const time1 = this.userInfo.nowDate;
|
|
if (this.nowDate == '') {
|
|
this.nowDate = time1;
|
|
}
|
|
let currentTime = new Date(this.nowDate);
|
|
this.setTimer(currentTime);
|
|
},
|
|
toBank() {
|
|
uni.navigateTo({
|
|
url: "/pages/user/card/list",
|
|
});
|
|
this.isBank = false;
|
|
uni.setStorageSync("openBank", false);
|
|
},
|
|
closeBank() {
|
|
this.isBank = false;
|
|
uni.setStorageSync("openBank", false);
|
|
},
|
|
getBank() {
|
|
let self = this;
|
|
self._get("member/api/bank/default-bank", {}, (res) => {
|
|
console.log(uni.getStorageSync("openBank"), "123");
|
|
if (
|
|
Object.keys(res.data).length === 0 &&
|
|
uni.getStorageSync("openBank")
|
|
) {
|
|
self.isBank = true;
|
|
}
|
|
});
|
|
},
|
|
closeTree() {
|
|
this.isTree = false;
|
|
},
|
|
getTree() {
|
|
let self = this;
|
|
self._get("activity/api/sa-tree-order/queryTreeActivity", {}, (res) => {
|
|
if (res.data && res.code == 200) {
|
|
self.treeModel = res.data;
|
|
self.treeNum = self.treeModel.quantity;
|
|
console.log(self.treeModel.quantity);
|
|
self.isTree = true;
|
|
console.log("isTree");
|
|
}
|
|
});
|
|
},
|
|
// 获取用户信息
|
|
getUserInfoData() {
|
|
let self = this;
|
|
self.loadding = true;
|
|
self._get("member/api/member/get-info", {}, function(res) {
|
|
if (res.code == 200) {
|
|
self.userInfo = res.data;
|
|
if (!self.timer) {
|
|
self.getTime();
|
|
};
|
|
uni.setStorageSync("currencyIcon", res.data.currencyIcon);
|
|
self.getPop();
|
|
}
|
|
self.loadding = false;
|
|
uni.hideLoading();
|
|
});
|
|
},
|
|
getPop() {
|
|
let self = this;
|
|
self._get(
|
|
"system/api/notice/index-pop-screen", {
|
|
grade: self.userInfo.pkGradeId,
|
|
awards: self.userInfo.pkAwardsId,
|
|
},
|
|
(res) => {
|
|
if (res.data && res.data.length > 0) {
|
|
self.isPop = true;
|
|
self.pop_content = res.data ? res.data[0].content : "";
|
|
self.pop_title = res.data ? res.data[0].title : "";
|
|
}
|
|
}
|
|
);
|
|
},
|
|
getCartNum() {
|
|
let self = this;
|
|
self._get(
|
|
"sale/api/shopping/getShoppingCount", {
|
|
specialArea: "",
|
|
pkCountry: "",
|
|
},
|
|
(res) => {
|
|
uni.setTabBarBadge({
|
|
index: 2,
|
|
text: res.data.cont + "",
|
|
});
|
|
}
|
|
);
|
|
},
|
|
getData() {
|
|
let self = this;
|
|
self._get("sale/api/wares/get-app-index", {}, (res) => {
|
|
console.log(res);
|
|
self.advertBannerList = res.data.advertBannerList;
|
|
self.recommendSpecialAreaList = res.data.recommendSpecialAreaList;
|
|
self.waresCoverInfoList = res.data.waresCoverInfoList;
|
|
self.waresVoList = res.data.waresVoList;
|
|
});
|
|
},
|
|
changeSwiper(e) {
|
|
this.current = e.detail.current;
|
|
},
|
|
changepackAd(e) {
|
|
this.thIndex = e.detail.current;
|
|
},
|
|
gotoWeb(url) {
|
|
this.gotoPage("/pages/webview/webview?url=" + encodeURIComponent(url));
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.bankbtn {
|
|
width: auto;
|
|
background: #f94856;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
line-height: 60rpx;
|
|
border-radius: 25px;
|
|
}
|
|
|
|
.product-list {
|
|
padding: 0 26rpx 0 23rpx;
|
|
}
|
|
|
|
.diy-banner-box {
|
|
// margin-bottom: 30rpx;
|
|
}
|
|
|
|
.diy-banner-box {
|
|
padding-top: 25rpx;
|
|
}
|
|
|
|
.diy-banner-box .swiper {
|
|
width: 750rpx;
|
|
height: 310rpx;
|
|
}
|
|
|
|
.diy-banner-box image {
|
|
width: 702rpx;
|
|
height: 310rpx;
|
|
margin: 0 auto;
|
|
border-radius: 25rpx;
|
|
}
|
|
|
|
.diy-banner-box .swiper-dots {
|
|
position: absolute;
|
|
bottom: 15rpx;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.swiper-dots .swiper-dot {
|
|
width: 28rpx;
|
|
height: 6rpx;
|
|
border-radius: 3rpx;
|
|
background: #ffffff;
|
|
opacity: 0.75;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.swiper-dots .swiper-dot.active {
|
|
background: #f94856;
|
|
opacity: 1;
|
|
}
|
|
|
|
.top_head {
|
|
z-index: 1;
|
|
padding: 0 26rpx;
|
|
width: 750rpx;
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 100;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.head_top {
|
|
width: 100%;
|
|
height: var(--status-bar-height);
|
|
}
|
|
|
|
.t-i-j {
|
|
width: 180rpx;
|
|
white-space: nowrap;
|
|
text-align: justify;
|
|
height: 36rpx;
|
|
overflow: hidden;
|
|
line-height: 1;
|
|
}
|
|
|
|
.jus-null {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-list {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding: 0 24rpx;
|
|
}
|
|
|
|
.nav-item {
|
|
width: 344rpx;
|
|
// height: 222rpx;
|
|
background: #ffffff;
|
|
border-radius: 15rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.nav-item-name {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
padding: 0 20rpx;
|
|
height: 68rpx;
|
|
line-height: 68rpx;
|
|
background: linear-gradient(-120deg,
|
|
rgba(252, 231, 228, 0.85) 0%,
|
|
rgba(255, 235, 224, 0.45) 38%,
|
|
rgba(253, 247, 235, 0.45) 99%);
|
|
}
|
|
|
|
.nav-item-product {
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
|
|
.nav-i-p-item {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
margin-right: 20rpx;
|
|
|
|
image {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.packAdswiper-box {
|
|
width: 340rpx;
|
|
// width: 702rpx;
|
|
height: 506rpx;
|
|
position: relative;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.packAdswiper-box .swiper-dots {
|
|
position: absolute;
|
|
bottom: 15rpx;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.packAdswiper-box .swiper-dots .swiper-dot {
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
opacity: 0.75;
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
.packAdswiper-box .swiper-dots .swiper-dot.active {
|
|
background: #f94856;
|
|
opacity: 1;
|
|
}
|
|
|
|
.packAdswiper {
|
|
width: 344rpx;
|
|
// width: 702rpx;
|
|
height: 506rpx;
|
|
// border-radius: 25rpx;
|
|
margin: 0 auto;
|
|
border-radius: 15rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.packAdswiper image {
|
|
width: 344rpx;
|
|
height: 506rpx;
|
|
margin: 0 auto;
|
|
border-radius: 15rpx;
|
|
}
|
|
|
|
.product-item {
|
|
width: 340rpx;
|
|
height: 506rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 15rpx;
|
|
margin-bottom: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.product-item .product-img {
|
|
width: 100%;
|
|
height: 340rpx;
|
|
display: block;
|
|
}
|
|
|
|
.product-info {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.pop-bg {
|
|
z-index: 101;
|
|
}
|
|
|
|
.pop-content {
|
|
position: fixed;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 102;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.pop-content-box {
|
|
width: 90%;
|
|
background-color: #ffffff;
|
|
border-radius: 15rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.pop-content-box1 {
|
|
width: 70%;
|
|
background-color: #ffffff;
|
|
border-radius: 15rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.pop-list {
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.pop-list::-webkit-scrollbar {
|
|
/*滚动条整体样式*/
|
|
/*高宽分别对应横竖滚动条的尺寸*/
|
|
display: block;
|
|
width: 5rpx !important;
|
|
height: 1rpx !important;
|
|
-webkit-appearance: default-button;
|
|
}
|
|
|
|
.pop-list::-webkit-scrollbar-thumb {
|
|
/*滚动条里面小方块*/
|
|
border-radius: 10px;
|
|
background-color: #909399;
|
|
// background-image: -webkit-linear-gradient(45deg,
|
|
// rgba(255, 255, 255, 0.2) 25%,
|
|
// transparent 25%,
|
|
// transparent 50%,
|
|
// rgba(255, 255, 255, 0.2) 50%,
|
|
// rgba(255, 255, 255, 0.2) 75%,
|
|
// transparent 75%,
|
|
// transparent);
|
|
}
|
|
|
|
.pop-list::-webkit-scrollbar-track {
|
|
/*滚动条里面轨道*/
|
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
background: #ededed;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.more-btn {
|
|
margin: 0 auto;
|
|
margin-bottom: 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 15rpx;
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
width: 702rpx;
|
|
}
|
|
|
|
.counter-box {
|
|
width: 168rpx;
|
|
height: 50rpx;
|
|
border-radius: 30rpx;
|
|
border: 1rpx solid #eeeeee;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
}
|
|
.time-box {
|
|
padding: 24rpx;
|
|
}
|
|
</style> |