web-base-h5/pages/index/index.vue

1115 lines
26 KiB
Vue

<!--
* @Descripttion:
* @version:
* @Author: kBank
* @Date: 2022-11-21 15:11:22
-->
<template>
<view :class="userInfo.skin ? 'content1' : 'content'">
<view class="content_a">
<!-- 商品专区入口 先别删 -->
<!-- <view @tap="goSpecialArea">会员专区</view> -->
<view :class="userInfo.skin ? 'index-top1' : 'index-top'">
<view class="index_t">
<view class="index-left">
<view class="english">GLOBALIZATION</view>
<view class="text">{{ $t("w_0024") }}</view>
</view>
<view class="index-right">
<view
class="changeLanguages"
v-if="isEmpty(getLanguageList) == false"
>
<picker
:range="getLanguageList"
:value="index"
range-key="label"
@change="bindPickerChange"
>
<view class="select-text">
<view class="texts">{{ getLanguageList[index].label }}</view>
<view class="">
<!-- <image class="selIcon"
src="../../static/images/drop-666.png"></image> -->
</view>
</view>
</picker>
</view>
</view>
</view>
</view>
<floating></floating>
<!-- <view class="kf_A">
<view class="kf" @click="openKf">
<image src="../../static/images/kf.png"></image>
<view>{{ $t("w_0023") }}</view>
</view>
</view> -->
<view class="banner" v-if="isEmpty(goodsList.advertBannerList) == false">
<view class="uni-margin-wrap">
<swiper
class="swiper"
circular
:indicator-dots="indicatorDots"
:autoplay="autoplay"
:interval="interval"
:duration="duration"
>
<swiper-item
v-for="item in goodsList.advertBannerList"
@click="bannerTap(item.link)"
>
<view class="swiper-item uni-bg-red">
<image :src="item.picture"></image>
</view>
</swiper-item>
</swiper>
</view>
</view>
<view class="goods-sort">
<view class="goods-flexs">
<view
class="goods-view"
@click="navTap(item)"
v-for="(item, index) in goodsList.recommendSpecialAreaList"
v-if="item.waresList != false && (index < 8 || moreFlag == true)"
>
<view :class="userInfo.skin ? 'bg-color1' : 'bg-color'"></view>
<view class="goods-top">
<view class="title">{{ item.specialAreaName }}</view>
<!-- <view class="lables">限时抢</view> -->
</view>
<template v-if="item.waresList">
<view class="goods-cen">
<view
class="goods-list"
v-for="(items, indexs) in item.waresList"
v-if="indexs < 2"
>
<view class="goods-content">
<view class="goods">
<image :src="items.cover1"></image>
</view>
<!-- <view class="price">
{{items.waresPrice | numberToCurrency | isLocal}}
</view> -->
</view>
</view>
</view>
</template>
</view>
</view>
<view v-if="isEmpty(goodsList.recommendSpecialAreaList) == false">
<view
class="more"
@click="more"
v-if="!moreFlag && goodsList.recommendSpecialAreaList.length > 6"
>
{{ $t("S_L_11") }}
</view>
</view>
<view class="goods_content">
<!-- banner图!-->
<!-- <view class="goods-lists"-->
<!-- v-if="isEmpty(goodsList.waresCoverInfoList)==false">-->
<!-- <view class="uni-margin-wrap"-->
<!-- v-if="goodsList.waresCoverInfoList[0]">-->
<!-- <swiper class="swiper swiper-s"-->
<!-- circular-->
<!-- :indicator-dots="indicatorDots"-->
<!-- :autoplay="autoplay"-->
<!-- :interval="interval"-->
<!-- :duration="duration">-->
<!-- <swiper-item v-for="item in goodsList.waresCoverInfoList[0].coverList">-->
<!-- <view class="swiper-items uni-bg-red">-->
<!-- <image :src="item"></image>-->
<!-- </view>-->
<!-- </swiper-item>-->
<!-- </swiper>-->
<!-- </view>-->
<!-- </view>-->
<view
class="goods-center-lists"
v-for="item in goodsList.waresVoList"
@click="goDetails(item)"
>
<view
class="fly"
v-show="item.preSaleStatus == 3 || item.isSale == 1"
></view>
<view class="goods-flex-s">
<view class="goods-img">
<image :src="item.cover1"></image>
</view>
<view class="padding_s">
<view class="goods-name">{{ item.waresName }}</view>
<view
class="goods-price"
v-if="item.specialArea == 31 && userInfo.isMakerSpace == 1"
><span>{{ item.vipPrice | numberToCurrency | isLocal }}</span>
</view>
<view class="goods-price" v-if="item.specialArea != 31"
><span>{{
item.waresPrice | numberToCurrency | isLocal
}}</span>
</view>
<view
class="goods-price"
v-if="item.specialArea == 31 && userInfo.isMakerSpace == 0"
>
{{ item.waresPrice | numberToCurrency | isLocal }}
</view>
<!-- <view class="goods-price1" v-show="item.specialArea == 31"
>统一零售价:<span>{{
item.retailPrice | numberToCurrency | isLocal
}}</span>
</view> -->
<view class="goods-sales"
>{{ $t("w_0252") }}{{ item.sales | seles }}</view
>
</view>
</view>
</view>
</view>
</view>
<cl-tabbar :current="0"></cl-tabbar>
<div>
<!-- 公告弹窗 -->
<notice-popup
@getTree="getTree"
:userInfo="userInfo"
ref="child"
:publishLocationIndex="10"
></notice-popup>
<!-- 植树弹窗
<getTree ref="tree"></getTree>
-->
<!-- 站内信弹窗 -->
<znNewsPopup
ref="child2"
@childMethodTrigger="callChildMethod"
></znNewsPopup>
<!-- 直推排行弹窗
<directrank-popup
@callznMethodTrigger="callznMethod"
></directrank-popup>
-->
<u-modal
:show="promptFlag"
title="提示"
:closeOnClickOverlay="true"
showCancelButton
:confirmText="confirmText"
confirmColor="#DE3932"
@close="promptFlag = false"
@cancel="promptFlag = false"
@confirm="toDel"
:content="promptMsg"
></u-modal>
</div>
</view>
</view>
</template>
<script>
// import titleLine from '@/components/titleLine.vue'
import * as api from "@/config/login.js";
import * as apis from "@/config/index.js";
import * as ban from "@/config/balance.js";
import clTabbar from "@/components/cl-tabbar.vue";
import noticePopup from "@/components/noticePopup.vue";
import getTree from "@/components/getTree.vue";
import znNewsPopup from "@/components/znNewsPopup.vue";
// import directrankPopup from "@/components/directrankPopup.vue";
export default {
components: {
noticePopup,
znNewsPopup,
"cl-tabbar": clTabbar,
getTree,
// directrankPopup,
},
filters: {
seles(value) {
if (value > 999) {
return 999 + "+";
} else {
return value;
}
},
},
data() {
return {
promptFlag: false,
promptMsg: "",
confirmText: "",
userInfo: uni.getStorageSync("User"),
getLanguageList: [],
moreFlag: false,
index: 0,
indicatorDots: true,
interval: 5000,
autoplay: true,
duration: 500,
goodsList: [],
zoneList: [
{
label: this.$t("ENU_SPECIAL_A_1"),
value: 1,
name: "regiest",
children: [
{
label: this.$t("ENU_MENU_311"),
value: 1,
name: "regiestArea",
isShow: true,
},
{
label: "乐学易考",
value: 24,
name: "ezLearnReg",
isShow: true,
},
],
},
{
label: this.$t("ENU_MENU_320"),
value: 2,
name: "upgrade",
children: [
{
label: this.$t("ENU_MENU_311"),
value: 2,
name: "upgradeArea",
isShow: true,
},
{
label: this.$t("ENU_SPECIAL_A_7"),
value: 27,
name: "haiFunUpd",
isShow: true,
},
{
label: "乐学易考",
value: 25,
name: "ezLearnUp",
isShow: true,
},
],
},
{
label: this.$t("ENU_MENU_330"),
value: 3,
name: "repurchase",
children: [
{
label: this.$t("ENU_MENU_311"),
value: 3,
name: "self",
isShow: true,
},
{
label: "乐学易考",
value: 26,
name: "ezLearnRep",
isShow: true,
},
{
label: this.$t("ENU_MENU_303"),
value: 21,
name: "haiFans",
isShow: true,
},
{
label: this.$t("ENU_MENU_332"),
value: 22,
name: "cooperation",
isShow: true,
},
{
label: this.$t("ENU_MENU_334"),
value: 14,
name: "live",
isShow: true,
},
{
label: this.$t("ENU_MENU_333"),
value: 12,
name: "gongju",
isShow: true,
},
],
},
{
label: this.$t("ENU_MENU_340"),
value: 13,
children: [],
name: "welfare",
},
{
label: this.$t("ENU_MENU_350"),
value: 11,
children: [],
name: "integral",
},
{
label: this.$t("ENU_MENU_360"),
value: 10,
children: [],
name: "rescission",
},
{
label: "专供专区",
value: 31,
children: [],
name: "wolesaleArea",
},
{
label: "续约专区",
value: 30,
children: [],
name: "renewalArea",
},
{
label: this.$t("w_1014"),
value: 28,
children: [],
name: "makerArea",
},
{
label: this.$t("MN_F_T_42"),
value: 6,
name: "frame",
children: [
{
label: this.$t("MN_F_T_43"),
value: 6,
name: "architecture",
isShow: true,
},
{
label: this.$t("MN_F_T_44"),
value: 7,
name: "recommend",
isShow: true,
},
],
},
{
label: this.$t("N_I_1"),
value: 7,
name: "share",
children: [
{
label: this.$t("N_I_2"),
value: 7,
name: "hiFans",
isShow: true,
},
{
label: this.$t("N_I_3"),
value: 21,
name: "haiFans",
isShow: true,
},
],
},
{
label: this.$t("ENU_ORDER_T_18"),
value: 18,
isShow: true,
children: [
{
label: this.$t("ENU_ORDER_T_18"),
value: 18,
isShow: true,
children: [],
},
{
label: this.$t("ENU_ORDER_T_19"),
value: 19,
isShow: true,
children: [],
},
],
},
],
};
},
onLoad() {
if (
uni.getStorageSync("showInfo") == undefined ||
uni.getStorageSync("showInfo") == 0
) {
this.getRepurchase();
}
this.getGoodsInfo();
this.getLanguage();
this.getService();
},
onShow() {
this.$store.dispatch("getCarLength");
},
onPullDownRefresh() {
let that = this;
setTimeout(() => {
that.getGoodsInfo();
uni.stopPullDownRefresh(); //停止刷新
}, 1000);
},
methods: {
getRepurchase() {
// api.index_repurchase().then((res) => {
// if (res.msg) {
// uni.showModal({
// title: "提示",
// content: res.msg,
// showCancel: false,
// confirmColor: "#f82c1a",
// success: function (res) {
// if (res.confirm) {
// uni.setStorageSync("showInfo", 1);
// }
// },
// });
// }
// });
},
// index_repurchase
goAreaUrl() {
ban.agreementName().then((res) => {
if (res.data == 0) {
uni.navigateTo({
url:
"/pages/specialArea/list?label=续约专区" +
"&specialArea=30" +
"&children=[]",
});
} else {
uni.showModal({
title: this.$t("w_0034"),
content: this.$t("MY_WAL_50"),
success: (res) => {
if (res.confirm) {
uni.navigateTo({
url: "/pages/selfService/realName/realName",
});
}
},
});
}
});
},
toDel() {
this.promptFlag = false;
if (this.jumpPage == 1) {
uni.navigateTo({
url: "/pages/selfService/realName/realName",
});
} else {
uni.navigateTo({
url:
"/pages/specialArea/list?label=续约专区" +
"&specialArea=30" +
"&children=[]",
});
}
},
getService() {
api.agreement_expire().then((res) => {
if (res.code == 200) {
this.promptFlag = res.data.promptFlag ? false : true;
this.promptMsg = res.data.promptMsg;
this.jumpPage = res.data.jumpPage;
// confirmText
if (this.jumpPage == 1) {
this.confirmText = "实名认证";
} else {
this.confirmText = "立即续约";
}
}
});
},
callChildMethod() {
this.$refs.child.getUserTc();
},
callznMethod() {
this.$refs.child2.getUserTc2();
},
// 植树弹层
getTree() {
this.$refs.tree.getData();
},
isEmpty(v) {
switch (typeof v) {
case "undefined":
return true;
case "string":
if (v.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, "").length == 0)
return true;
break;
case "boolean":
if (!v) return true;
break;
case "number":
if (0 === v || isNaN(v)) return true;
break;
case "object":
if (null === v || v.length === 0) return true;
for (var i in v) {
return false;
}
return true;
}
return false;
},
more() {
this.moreFlag = true;
},
openKf() {
let userInfo = uni.getStorageSync("User");
let src =
"https://im1c5366d.7x24cc.com/phone_webChat.html?accountId=N000000033467&chatId=302384fb-eda1-436e-a5e9-c03a2dbd6e97&visitorId=" +
userInfo.memberCode +
"&nickName=" +
userInfo.memberCode;
window.open(src, "_blank");
},
bannerTap(urls) {
if (urls) {
window.location.href = urls;
}
},
getGoodsInfo() {
apis.userIndex().then((res) => {
this.goodsList = res.data;
});
},
bindPickerChange(e) {
this.index = e.detail.value;
uni.setStorageSync("lang", this.getLanguageList[e.detail.value].field);
this.$i18n.locale = this.getLanguageList[e.detail.value].field;
window.location.reload();
},
goUrl(item) {
ban.agreementName().then((res) => {
if (res.data == 0) {
uni.navigateTo({
url:
"/pages/specialArea/details?waresCode=" +
item.waresCode +
"&specialArea=" +
item.specialArea,
});
} else {
uni.showModal({
title: this.$t("w_0034"),
content: this.$t("MY_WAL_50"),
success: (res) => {
if (res.confirm) {
uni.navigateTo({
url: "/pages/selfService/realName/realName",
});
}
},
});
}
});
},
goDetails(item) {
if (item.preSaleStatus == 3 || item.isSale == 1) {
} else {
if (item.specialArea == 30) {
this.goUrl(item);
} else {
uni.navigateTo({
url:
"/pages/specialArea/details?waresCode=" +
item.waresCode +
"&specialArea=" +
item.specialArea,
});
}
}
},
navTap(item) {
let tapx = -1;
this.zoneList.forEach((items, index) => {
if (items.value == item.specialArea) {
tapx = index;
}
});
if (tapx == -1) {
this.zoneList.forEach((items, index) => {
items.children.forEach((ctem) => {
if (ctem.value == item.specialArea) {
if (item.specialArea == 21) {
uni.navigateTo({
url:
"/pages/specialArea/haIndex?label=" +
item.specialAreaName +
"&specialArea=21&diff=1",
});
} else {
uni.navigateTo({
url:
"/pages/specialArea/list?label=" +
items.label +
"&specialArea=" +
items.value +
"&childArea=" +
item.specialArea +
"&children=" +
JSON.stringify(items.children) +
"&diff=1",
});
}
}
});
});
} else {
if (item.specialArea == 30) {
this.goAreaUrl();
} else {
uni.navigateTo({
url:
"/pages/specialArea/list?label=" +
item.specialAreaName +
"&specialArea=" +
item.specialArea +
"&children=" +
JSON.stringify(this.zoneList[tapx].children) +
"&diff=1",
});
}
}
},
goSpecialArea() {
uni.navigateTo({
url: "/pages/index/specialArea/index",
});
},
getLanguage() {
api.getLanguages().then((res) => {
if (res.code == 200) {
res.data.forEach((item, index) => {
if (item.field == uni.getStorageSync("lang")) {
this.index = index;
}
});
if (
uni.getStorageSync("lang") == undefined ||
uni.getStorageSync("lang") == "undefined"
) {
uni.setStorageSync("lang", "zh-CN");
}
this.getLanguageList = res.data;
}
});
},
},
};
</script>
<style lang="scss" scoped>
.content {
// background: url('~@/static/images/fBgd.jpg') no-repeat;
background-size: 100% 100%;
height: 100vh;
.content_a {
overflow: auto;
height: 100%;
}
}
.content1 {
background: url("~@/static/images/fBgd.jpg") no-repeat;
background-size: 100% 100%;
height: 100vh;
.content_a {
overflow: auto;
height: 100%;
}
}
.more {
color: #333;
background-color: #fff;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-radius: 30rpx;
width: 690rpx;
margin: 0 auto 30rpx auto;
}
:v-deep uni-swiper {
height: 300rpx;
}
header {
display: none !important;
}
.padding_s {
padding: 0 20rpx;
}
.goods-sales {
font-size: 24rpx;
color: #999;
margin-top: 10rpx;
}
.goods-price {
color: #f82c1a;
margin-top: 10rpx;
font-style: 22rpx;
margin-left: -7rpx;
span {
font-size: 30rpx;
font-weight: bold;
}
}
.goods-price1 {
color: #999;
// margin-top: 10rpx;
font-size: 10px;
margin-left: -7rpx;
span {
font-size: 10rpx;
}
}
.goods-name {
margin-top: 10rpx;
color: #333;
font-size: 26rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.goods-img {
image {
width: 100%;
border-radius: 10rpx 10rpx 0 0;
height: 322rpx;
}
}
.goods-center-lists:nth-child(3) {
//margin-top: 0rpx;
}
.goods-center-lists {
width: 345rpx; // height: 450rpx;
background: #ffffff;
margin-left: 20rpx;
border-radius: 15rpx;
border-bottom: 20rpx;
margin-bottom: 20rpx;
padding-bottom: 30rpx;
position: relative;
}
.goods-sort {
padding-bottom: 130rpx;
}
.swiper-s {
height: 495rpx;
}
.goods-lists {
width: 340rpx;
margin-bottom: 0rpx;
margin-left: 20rpx;
}
.goods_content {
display: flex;
padding: 0;
flex-wrap: wrap;
}
.price {
height: 40rpx;
line-height: 40rpx;
background: #fde9e9;
border-radius: 14rpx;
color: #e7141a;
font-size: 22rpx;
text-align: center;
width: max-content;
padding: 0 10rpx;
margin: 0 auto;
}
.goods-cen {
display: flex;
margin-top: 20rpx;
justify-content: space-between;
}
.goods-list {
// display: flex;
margin-right: 20rpx;
}
.goods-content {
width: 140rpx;
height: 140rpx;
text-align: center;
.goods {
image {
width: 140rpx;
height: 140rpx;
}
}
}
.goods-flexs {
display: flex;
padding: 20rpx 20rpx 10rpx 0;
position: relative;
flex-wrap: wrap; // margin-left: -25rpx;
.bg-color {
width: 343rpx;
height: 72rpx;
background: linear-gradient(
-180deg,
rgba(255, 226, 226, 0.85) 0%,
rgba(254, 240, 229, 0.45) 38%
);
border-radius: 15rpx 15rpx 0 0;
position: absolute;
top: 0;
left: 0rpx;
}
.bg-color1 {
width: 343rpx;
height: 72rpx;
background: #acfbd5;
border-radius: 15rpx 15rpx 0 0;
position: absolute;
top: 0;
left: 0rpx;
}
.goods-view {
position: relative;
width: 302rpx; // height: 180rpx;
margin-left: 20rpx;
background: #ffffff;
border-radius: 15rpx;
padding: 20rpx 20rpx 10rpx 20rpx;
margin-bottom: 20rpx;
.goods-top {
z-index: 1;
position: relative;
display: flex;
.title {
color: #333;
font-size: 32rpx;
font-weight: bold;
}
.lables {
height: 28rpx;
background: #f82c1a;
border-radius: 10rpx;
line-height: 24rpx;
font-size: 22rpx;
padding: 5rpx 15rpx;
color: #fff;
max-width: 100rpx;
margin: 5rpx 0 0 10rpx;
}
}
}
.lefts {
margin-left: 15rpx;
}
}
:v-deep .swiper-s .swiper-items uni-image {
height: 495rpx;
}
:v-deep .uni-swiper-dots-horizontal .uni-swiper-dot {
margin-right: 5rpx;
}
:v-deep .swiper-s .uni-swiper-dots .uni-swiper-dot {
width: 14rpx;
height: 14rpx;
background: #ffffff;
border-radius: 50%;
}
:v-deep uni-swiper .uni-swiper-dot {
width: 40rpx;
height: 6rpx;
background: #fff !important;
border-radius: 10rpx;
}
:v-deep uni-swiper .uni-swiper-dot-active {
width: 40rpx;
height: 6rpx;
background: #f94856 !important;
border-radius: 10rpx;
}
.swiper-items {
// height: 495rpx;
width: 340rpx;
border-radius: 12rpx;
image {
border-radius: 12rpx;
height: 450rpx;
width: 340rpx;
}
}
.swiper-item {
height: 300rpx;
text-align: center;
margin: 0 auto;
width: 690rpx;
image {
border-radius: 24rpx;
height: 300rpx;
width: 690rpx;
}
}
.banner {
padding: 140rpx 0 0 0;
text-align: center;
width: 100%;
}
.changeLanguages {
position: absolute;
right: 0rpx;
top: 45rpx;
}
.select-text {
display: flex;
margin-right: 20px;
}
.selIcon {
width: 40rpx;
height: 40rpx;
}
.paswwrod_btn {
color: #666666;
font-size: 26rpx;
margin: 40rpx auto;
text-align: center;
}
page {
background-color: #f2f2f2;
}
.index-left {
font-weight: bold;
.english {
font-size: 24rpx;
color: #333;
}
.text {
font-size: 30rpx;
color: #333;
margin-top: 2rpx;
letter-spacing: 16rpx;
}
}
.index-top {
// background: url('~@/static/images/tBgd.jpg') no-repeat;
background-size: 100% 100%;
// padding: 30rpx 20rpx; // height: 100rpx;
background-color: #fff;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 10;
width: 100%;
height: 120rpx;
.index_t {
padding: 30rpx 20rpx;
}
}
.index-top1 {
background: url("~@/static/images/tBgd.jpg") no-repeat;
background-size: 100% 100%;
// padding: 30rpx 20rpx; // height: 100rpx;
// background-color: #fff;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 10;
width: 100%;
height: 120rpx;
.index_t {
padding: 30rpx 20rpx;
}
}
.index-right {
display: flex;
}
.kf_A {
position: fixed;
background: rgba(256, 256, 256, 0.8);
width: 62px;
// height: 60px;
z-index: 10;
right: 40rpx;
top: 11%;
border-radius: 10px;
text-align: center;
padding: 20rpx 0;
}
.kf {
image {
width: 48rpx;
height: 48rpx;
margin-bottom: 10rpx;
}
font-size: 10px;
color: #333333;
}
.fly {
position: absolute;
width: 100%;
height: 100%;
top: 0;
background: #eee;
opacity: 0.5;
z-index: 1;
}
</style>