<template>
<view class="container">
<view class="carousel-section">
<!-- 背景色区域 -->
<view class="bg"></view>
<!-- 标题栏和状态栏占位符 -->
<!-- #ifdef H5 -->
<view class="titleNview-placing"></view>
<!-- #endif -->
<!-- 搜素栏 -->
<view class="search flex">
<view class="input-box flex" @click.stop="clickSearch">
<view class=" input-content flex">
<view class="iconfont iconsearch"></view>
<view class="input"><input type="text" disabled value="好物从搜索开始" /></view>
</view>
</view>
</view>
<u-notice-bar :volume-icon="false" :list="['售后电话：18088138806']" speed="50" @click="tocall"></u-notice-bar>
<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange"
:indicator-dots="true" indicator-active-color="#FFFFFF">
<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
<image :src="item.pic" mode="aspectFill" @click="bannerNavToUrl(item)"></image>
</swiper-item>
</swiper>
</view>
<seckill></seckill>
<sx :list="firstList"></sx>
<!-- #ifdef MP-WEIXIN -->
<image src="https://hy.qiniu1314.com/static/image/living.png" mode="widthFix" style="display: block;width: 690rpx;margin: 20rpx auto;" @click="navTo('/pages/index/living')"></image>
<!-- #endif -->
<!-- <view class="ss" @click="srwj">
写入文件
</view>
<view class="ss" @click="dqwj">
读取文件
</view> -->
<template v-for="item in flist">
<view class="cate-item" v-if="item.pic" @click="navTo('/pages/product/list?fid='+item.id)">
<image :src="item.pic" mode="widthFix"></image>
</view>
</template>
<store></store>
</view>
</template>
<script>
// #ifdef H5
import jWeixin from "@/plugin/jweixin-module/index.js";
// #endif
import {
shareFun
} from '@/utils/wxAuthorized.js'
import {
lookSubpoints,
lookOneself
} from '../../api/user.js';
import seckill from '../../components/seckill/seckill.vue';
import sx from '../../components/sx/index.vue';
import store from '../../components/store/store.vue';
import {
loadIndexs,
getVip,
mer,
getZbList
} from '@/api/index.js';
import {
getUserInfo,
spread
} from '@/api/user.js';
import {
setCoupons
} from '@/api/functionalUnit.js';
import {
getBargainList,
getCategoryList
} from '@/api/product.js';
import {
interceptor
} from '@/utils/loginUtils';
import {
mapState,
mapMutations
} from 'vuex';
import {
tabbar
} from '@/utils/tabbar.js';
// #ifdef H5
import {
weixindata,
shareLoad
} from '@/utils/wxAuthorized';
// #endif
export default {
components: {
seckill,
sx,
store
},
data() {
return {
flist: [],
// isDa:true,
tabbar: tabbar,
current: 0,
shareShow: false, //分享海报
pageProportion: 0, //保存页面基于750宽度的比例
swiperHeight: 0,
checkid: 0,
titleNViewBackground: '',
longitude: 0, //经度
latitude: 0, //纬度
swiperCurrent: 0,
swiperLength: 0,
carouselList: [], //轮播列表
bastList: [], //会员礼包
shoplist: [], //商店列表
page: 1,
limit: 5,
vipList: [], //vip商品
firstList: [],
};
},
computed: {
...mapState(['loginInterceptor', 'baseURL']),
...mapState('user', ['hasLogin', 'userInfo'])
},
onLoad: function(option) {
this.getZhiboList()
// #ifdef MP-WEIXIN
wx.showShareMenu({
withShareTicket: true,
menus: ["shareAppMessage", "shareTimeline"]
})
//#endif
// #ifdef MP
if (option.scene) {
// 存储小程序邀请人
uni.setStorageSync('puid', option.scene)
}
// #endif
// #ifdef H5
if (option.spread) {
console.log(option.spread, "邀请人2")
uni.setStorageSync('spread', option.spread)
if (this.hasLogin) {
spread({
puid: option.spread
}).then(res => {
console.log(res);
})
}
}
// #endif
// #ifdef MP-WEIXIN
if (option.spread) {
console.log(option.spread, "邀请人2")
uni.setStorageSync('spread', option.spread)
if (this.hasLogin) {
spread({
puid: option.spread
}).then(res => {
console.log(res);
})
}
}
// #endif
if (option.mer_id) {
console.log(option.mer_id, "商户id")
uni.setStorageSync('mid', option.mer_id)
}
},
// #ifdef MP-WEIXIN
onShareAppMessage(res) {
console.log(888888)
let path = 'spread=' + this.userInfo.uid;
return {
title: this.userInfo.nickname + '邀请您进入玲卿加', //分享的名称
path: 'pages/index/index?' + path,
imageUrl: "https://hy.liuniu946.com/index/logo.jpg",
}
console.log('pages/index/index?' + path, '分享数据');
},
//分享到朋友圈
onShareTimeline(res) {
let path = 'spread=' + this.userInfo.uid;
return {
title: this.userInfo.nickname + '邀请您进入玲卿加', //分享的名称
path: 'pages/index/index?' + path,
imageUrl: "https://hy.liuniu946.com/index/logo.jpg"
}
},
//#endif
onShow: function() {
let uid = uni.getStorageSync('spread');
if (uid && (typeof(uid) != 'undefined') && this.hasLogin) {
spread({
puid: uid
}).then(res => {
console.log(res);
})
}
let mid = uni.getStorageSync('mid')
console.log(mid, '9090')
if (mid) {
mer({
mid: mid
}).then(e => {});
}
getVip({
page: 1,
limit: 3,
is_vip: 3
}).then(res => {
this.vipList = res.data
res.data.forEach(e => {
e.isVip = e.store_type ? "3" : "0"
})
console.log(res.data, 'vip商品');
})
this.loadData();
this.loadDatas();
this.getBargainList();
// #ifdef H5
this.IndexShare();
//#endif
},
//下拉刷新
onPullDownRefresh() {
this.loadData();
},
// #ifndef MP
// 监听导航栏输入框点击事件
onNavigationBarSearchInputClicked(e) {
//跳转到搜索页面
this.clickSearch();
},
//点击导航栏 buttons 时触发
onNavigationBarButtonTap(e) {
const index = e.index;
if (index === 0) {
this.$api.msg('点击了扫描');
} else if (index === 1) {
// #ifdef APP-PLUS
const pages = getCurrentPages();
const page = pages[pages.length - 1];
const currentWebview = page.$getAppWebview();
currentWebview.hideTitleNViewButtonRedDot({
index
});
// #endif
uni.navigateTo({
url: '/user/page/notice'
});
}
},
// #endif
methods: {
...mapMutations(['setLat', 'setLon']),
srwj() {
},
dqwj() {
},
tocall() {
uni.makePhoneCall({
phoneNumber: '18088138806'
})
},
getZhiboList() {
getZbList().then(res => {
console.log(res,'zblist')
})
},
async loadDatas() {
let obj = this;
getCategoryList({})
.then(({
data
}) => {
obj.flist = data.map(function(s) {
return s;
});
// obj.getProducts()
})
.catch(err => {
console.log(err);
});
},
cl() {
uni.setClipboardData({
data: 'Bearer ' + uni.getStorageSync('token'),
success: function() {
console.log('复制成功');
}
});
},
// #ifdef H5
IndexShare() {
let obj = this;
let pages = getCurrentPages();
if (this.userInfo && this.userInfo.uid) {
let path = 'https://hy.liuniu946.com/index/#/pages/index/index?spread=' + this.userInfo.uid
let data = {
link: path,
title: this.userInfo.nickname + '邀请您进入玲卿加',
desc: '欢迎加入玲卿加',
imgUrl: 'https://hy.liuniu946.com/static/image/hylogo.jpg'
};
console.log(data, '分享数据');
shareLoad(data);
} else {
let path = 'https://hy.liuniu946.com/index/#/pages/index/index'
let data = {
link: path,
title: '玲卿加',
desc: '欢迎加入玲卿加',
imgUrl: 'https://hy.liuniu946.com/static/image/hylogo.jpg'
};
console.log(data, '分享数据');
shareLoad(data);
}
},
// #endif
getaddress() {
console.log('dizhi+++++++++++');
let obj = this;
weixindata().then(wxOjb => {
console.log(wxOjb, '获取微信');
wxOjb.getLocation({
type: 'gcj02',
success: res => {
console.log(res, 123456);
obj.setLat(res.latitude);
obj.setLon(res.longitude);
},
fail: err => {
console.log(err, 'shi+++++++++++++++');
openMap().then(e => {
this.getaddress();
});
}
});
});
},
//砍价商品推荐详情页
navToDetailPages(item) {
let id = item.product_id;
//let type = 2;
uni.navigateTo({
url: '/pages/product/product?id=' + id
});
},
navTo(url) {
if (url == '') {
this.$api.msg('暂未开通，敬请期待');
} else {
uni.navigateTo({
url
});
}
},
openSubscribe: function(e) {
let page = e;
// #ifndef MP
uni.navigateTo({
url: page
});
// #endif
// #ifdef MP
uni.showLoading({
title: '正在加载'
});
openBargainSubscribe()
.then(res => {
uni.hideLoading();
uni.navigateTo({
url: page
});
})
.catch(err => {
uni.hideLoading();
});
// #endif
},
getBargainList() {
let that = this;
getBargainList({
page: that.page,
limit: that.limit
})
.then(function(res) {
// that.$set(that, 'bargainlist', res.data.slice(0, 2));
})
.catch(res => {
console.log(res, 'getBargainList');
});
},
Mask() {
this.MaskShow = false;
this.shareShow = true;
uni.setStorage({
key: 'FirstEntry',
data: true,
success: function() {
console.log(uni.getStorageSync('FirstEntry'), 'Mask');
}
});
},
Toshare() {
if (this.userInfo == '') {
getUserInfo({})
.then(({
data
}) => {
this.setUserInfo(data);
this.userInfo = data;
})
.catch(e => {});
} else {
this.shareShow = false;
uni.navigateTo({
url: '/user/page/shareQrCode?spread=' + this.userInfo.uid
});
}
},
Tocancel() {
this.shareShow = false;
},
// 监听切换事件
listChange(e) {
this.checkid = e.detail.current;
},
// 點擊搜索框
clickSearch() {
uni.navigateTo({
url: '/pages/product/search'
});
},
// 点击触发领取优惠券
setCoupons(item) {
// 判断是否已经领取了优惠券
let obj = this;
uni.showModal({
title: '领取提示',
content: '是否领取优惠券',
success(e) {
if (e.confirm) {
setCoupons({
couponId: item.id
}).then(e => {
item.is_use = true;
uni.showToast({
title: '领取成功',
type: 'top',
duration: 2000
});
});
}
}
});
},
//商品种类切换
change(item) {
let id = item;
this.checkid = id;
if (this.checkid == 1) {
// console.log(1);
this.detail = this.selected_detail;
} else if (this.checkid == 2) {
// console.log(2);
this.detail = this.new_product;
} else {
this.detail = this.cheap_good;
}
},
// 监听图片加载完成
onImageError(key, index) {
this[key][index].image = '/static/error/errorImage.jpg';
},
// 请求载入数据
async loadData() {
loadIndexs({})
.then(({
data
}) => {
let goods = data.info;
console.log(goods, '商品信息');
this.carouselList = data.banner;
this.swiperLength = this.carouselList.length;
this.bastList = data.giftInfo; //会员礼包
data.info.firstList.forEach(e => {
e.isVip = e.store_type ? "3" : "0"
})
this.firstList = data.info.firstList //首页商品
uni.stopPullDownRefresh();
console.log(data, '0000000000000')
})
.catch(e => {
uni.stopPullDownRefresh();
});
},
//轮播图切换修改背景色
swiperChange(e) {
const index = e.detail.current;
this.swiperCurrent = index;
this.titleNViewBackground = this.carouselList[index].background;
},
//详情页
navToDetailPage(item) {
let id = item.id;
uni.navigateTo({
url: '/pages/product/product?id=' + id + '&isVip=' + 0
});
},
// 轮播图跳转
bannerNavToUrl(item) {
// #ifdef H5
console.log(item.wap_url.indexOf('http'), 'banner');
if (item.wap_url.indexOf('http') >= 0) {
window.location.href = item.wap_url;
}
// #endif
//测试数据没有写id，用title代替
uni.navigateTo({
url: item.wap_url
});
}
}
};
</script>
<style lang="scss">
page {
// background: #EEEFEE;
background-color: #fff;
}
.yuezhuan {
text-align: center;
z-index: 99;
position: absolute;
text-align: center;
width: 40%;
}
.yuezhuan image {
margin-top: -12rpx;
float: right;
width: 120rpx;
height: 120rpx;
}
.yuezhuan>view {
width: 60rpx;
top: 5rpx;
height: 40rpx;
text-align: center !important;
font-size: 22rpx;
color: #AD0B04;
margin-left: 206rpx;
position: absolute;
}
.carousel-section {
position: relative;
/* #ifdef H5 */
padding-top: 10px;
/* #endif */
.bg {
position: absolute;
top: 0;
left: 0;
width: 750rpx;
height: 378rpx;
image {
width: 100%;
height: 100%;
}
}
.titleNview-placing {
height: var(--status-bar-height);
box-sizing: content-box;
}
.search {
// margin-bottom: 12rpx;
background-color: #F75022;
justify-content: flex-start;
padding: 10rpx 32rpx 20rpx;
align-items: center;
.address {
width: 32rpx;
height: 38rpx;
}
.shop-name {
height: 38rpx;
position: relative;
top: -4rpx;
z-index: 100;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 500;
padding-left: 10rpx;
}
.shop-jt {
margin-left: 8rpx;
width: 16rpx;
height: 10rpx;
}
.input-box {
margin-left: 10rpx;
position: relative;
z-index: 99;
width: 710rpx;
height: 60rpx;
background: #EEEEEE;
border-radius: 30rpx;
.input-content {
position: relative;
z-index: 11;
border-radius: 99rpx;
flex-grow: 1;
padding: 5rpx 30rpx;
background: #EEEEEE;
.iconsearch {
font-size: 50rpx;
color: #CBCBCB;
}
.input {
margin-left: 19rpx;
flex-grow: 1;
color: #CBCBCB;
input {
font-size: 28rpx;
color: #CBCBCB;
}
}
}
.input-button {
padding-left: 20rpx;
font-size: $font-base;
height: 100%;
}
}
}
}
.carousel {
position: relative;
z-index: 3;
width: 100%;
height: 360rpx;
.carousel-item {
width: 100%;
height: 100%;
padding: 0 28rpx;
overflow: hidden;
}
image {
width: 100%;
height: 100%;
border-radius: $border-radius-sm;
}
}
.navbar {
position: relative;
z-index: 2;
padding: 0 50rpx;
margin-top: -200rpx;
width: 750rpx;
height: 420rpx;
background: #ffffff;
border-radius: 40rpx;
.navbar-box {
padding-top: 250rpx;
.navbar-item {
display: flex;
flex-direction: column;
align-items: center;
width: 20%;
.nitem-image {
width: 90rpx;
height: 90rpx;
}
.nitem-font {
margin-top: 22rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
}
}
}
}
.jx {
background: #fff;
width: 750rpx;
}
.jx-box {
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
width: 750rpx;
.jx-box-title {
margin: 50rpx 0;
width: 610rpx;
height: 30rpx;
image {
width: 100%;
height: 100%;
}
}
.jx-box-img {
width: 750rpx;
height: 220rpx;
image {
width: 100%;
height: 100%;
}
}
}
.cai {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 20rpx;
font-size: 28rpx;
font-weight: 500;
color: #999999;
}
.jx-box-content {
display: flex;
.content-left {
margin: 20rpx 15rpx;
width: 236rpx;
height: 236rpx;
background: #E2E2E2;
border-radius: 10rpx;
image {
width: 100%;
height: 100%;
}
}
.content-right {
display: flex;
flex-direction: column;
justify-content: space-around;
.shop-name {
width: 382rpx;
font-size: 32rpx;
font-weight: bold;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.shop-content {
width: 455rpx;
display: flex;
justify-content: space-between;
.shop-content-left {
display: flex;
flex-direction: column;
.price-box {
display: flex;
align-items: center;
.yuan-price {
font-size: 26rpx;
font-weight: 500;
text-decoration: line-through;
color: #999999;
}
image {
margin: 0 10rpx;
width: 16rpx;
height: 18rpx;
}
.j-price {
font-size: 24rpx;
font-weight: bold;
color: #B59467;
}
}
.price-x {
font-size: 36rpx;
font-weight: bold;
color: #FF4C4C;
}
}
.shop-content-right {
margin-top: 20rpx;
align-items: center;
text-align: center;
width: 137rpx;
height: 52rpx;
font-size: 26rpx;
font-weight: 500;
color: #fff;
background: #f75022;
border-radius: 26rpx;
line-height: 52rpx;
}
}
}
}
.product-box {
margin-top: 20rpx;
background: #ffffff;
padding: 26rpx 30rpx 20rpx;
.product-title {
display: flex;
align-items: center;
justify-content: center;
.pt-image {
width: 36rpx;
height: 36rpx;
}
.bb {
width: 120rpx;
height: 1rpx;
background: #989898;
}
.pt-title {
margin: 0 28rpx;
font-size: 30rpx;
font-weight: 500;
color: #363636;
}
.pt-tip {
margin-left: 16rpx;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: bold;
color: #95a0b1;
}
}
.hotgoods {
margin-top: 38rpx;
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 0 0 30rpx;
.hotgoods-item {
width: 44%;
background: #FFFFFF;
margin: 20rpx;
box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
border-radius: 10px;
.image-wrapper {
width: 100%;
height: 330rpx;
border-radius: 3px;
overflow: hidden;
position: relative;
.image-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 1;
border-radius: 12rpx 12rpx 0 0;
z-index: 2;
}
.image {
width: 100%;
height: 100%;
opacity: 1;
border-radius: 12rpx 12rpx 0 0;
}
}
.title {
margin-top: 20rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
}
.hotgoods-box {
height: 100rpx;
}
.titlee {
margin-left: 15rpx;
font-size: 26rpx;
font-weight: 500;
color: #666666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hot-price {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 14rpx 0 30rpx;
.hotPrice-box {
width: 70rpx;
height: 28rpx;
background: linear-gradient(90deg, #c79a4c, #f9df7f);
border-radius: 5rpx;
text-align: center;
line-height: 28rpx;
font-size: 20rpx;
font-weight: 400;
color: #ffffff;
}
.price {
margin-left: 10rpx;
font-size: 36rpx;
color: #ff0000;
font-weight: 500;
}
.yuanPrice {
margin-left: 10rpx;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
text-decoration: line-through;
color: #999999;
}
.cart-icon {
image {
width: 44rpx;
height: 44rpx;
}
}
}
}
}
}
.shop {
margin-top: 20rpx;
background: #ffffff;
padding: 0 12rpx;
.shop-title {
padding: 30rpx 0 20rpx;
display: flex;
align-items: center;
border-bottom: 1px solid #e3e6e7;
.shop-item {
width: 25%;
display: flex;
align-items: center;
justify-content: center;
.sitem-font {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
.jt-down {
width: 10rpx;
height: 8rpx;
margin-left: 12rpx;
}
}
}
}
.shop-main {
padding: 32rpx 18rpx 0 12rpx;
align-items: flex-start;
justify-content: flex-start;
.main-left {
width: 180rpx;
height: 180rpx;
border-radius: 10rpx;
}
.main-right {
width: 500rpx;
justify-content: space-between;
align-items: flex-start;
margin-left: 20rpx;
padding: 13rpx 0 35rpx;
border-bottom: 1px solid #eaeced;
.shopm-info {
max-width: 60%;
line-height: 1;
.shopm-title {
display: flex;
justify-content: flex-start;
.shopmt-font {
font-size: 34rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
.shopmt-good {
margin-left: 6rpx;
width: 30rpx;
height: 30rpx;
border: 1px solid #ff4c4c;
border-radius: 5rpx;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
color: #ff4c4c;
text-align: center;
line-height: 30rpx;
}
}
.address {
margin-top: 16rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
.shopmt-tip {
position: relative;
display: inline-block;
flex-grow: 0;
margin-top: 52rpx;
padding: 8rpx;
background: #fcf3f0;
border-radius: 16rpx 16rpx 16rpx 0px;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
color: #ff440d;
}
}
.right {
height: 100%;
margin-top: 5rpx;
display: flex;
flex-direction: column;
.mright-top {
display: flex;
justify-content: flex-end;
align-items: center;
.mrt-image {
width: 20rpx;
height: 28rpx;
}
.mrt-font {
margin-left: 8rpx;
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
}
}
.mright-bottom {
margin-top: 80rpx;
display: flex;
justify-content: flex-end;
.mrb-item {
width: 46rpx;
height: 46rpx;
margin-left: 14rpx;
}
}
}
}
}
.cate-item {
width: 717rpx;
margin: 0 auto 30rpx;
image {
width: 100%;
border-radius: 15rpx;
}
}
.ss {
height: 120rpx;
}
</style>