You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

1094 lines
25 KiB

<template>
<view class="container">
<view class="containertop">
<view class="nav">
<view @click="goSelectCity()" class="citys" style="margin-right: 5px;">
<p>{{cityname}}<u-icon name="arrow-down-fill" style="font-size: 8px;margin-left: 2px;"></u-icon>
</p>
</view>
<view class="search" style="margin-left: 2px;">
<!-- <input type="text" placeholder="请输入美食, 地点" placeholder-style="font-size: 12px;font-family: PingFang SC;margin-top:2px;"> -->
<view style="flex: 1;height: 30px;border: 1px solid #9F9F9F;border-right: none;">
<u-search :clearabled="true" :show-action="false" placeholder="请输入美食, 地点"
:input-style="{'height':'28px'}" shape="square" bg-color="#FFFFFF" height="28px"></u-search>
</view>
<view class="button">搜索</view>
</view>
</view>
<view class="banner" style="margin-top: 20px;">
<u-swiper :list="listbanner"></u-swiper>
</view>
<view class="listbox">
<view class="list">
<image src="../../static/img/home/meishi.png" class="imgs">
<p>美食小吃</p>
<image>
</view>
<view class="list">
<image src="../../static/img/home/naicha.png" class="imgs">
<p>甜点饮品</p>
<image>
</view>
<view class="list">
<image src="../../static/img/home/chaoshi.png" class="imgs">
<p>果蔬超市</p>
<image>
</view>
<view class="list">
<image src="../../static/img/home/shaokao.png" class="imgs">
<p>夜宵烧烤</p>
<image>
</view>
</view>
<view class="bill">
<view>
<image src="../../static/img/home/guanggao.png"></image>
</view>
<view>
<image src="../../static/img/home/guanggao2.png"></image>
</view>
</view>
<view class="nav2">
<view class="tabs">
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#FF4848"
:bar-style="{'border-radius':'4px'}" inactive-color="#C1C1C1">
</u-tabs>
</view>
<view class="dropdown">
<u-dropdown active-color="#FF5454" inactive-color="#C1C1C1">
<u-dropdown-item v-model="value1" :title="options1[value1].label" :options="options1">
</u-dropdown-item>
</u-dropdown>
</view>
</view>
</view>
<view class="shoplist">
<view class="shop" @click="totasks()" v-for="(item,index) in shoplist" :key="index">
<view class="message" style="position: relative;">
<view class="pic" style="position: relative;z-index:1;margin-left: 10px;margin-top: 4px;">
<image :src="shoplist.imageUrl"></image>
</view>
<view class="text" style="position: relative;z-index:1;margin-top: 6px;">
<view>
<p style="float: left;">{{shopname}}</p>
<u-tag text="虎泉" size="mini" mode="dark" type="error"
style="float: right;margin-right: 40px;margin-top: 6px;" />
</view>
<view>
<view style="float: left;">剩余</view>
<view style="float: left;color: #FF0000;margin-top: 2px;">{{endNum}}</view>
</view>
<view>222</view>
</view>
</view>
<!-- <view class="logo m"><image src="../../static/img/home/meituan.png"></image></view> -->
<!-- <view class="logo e"><image src="../../static/img/home/elme.png"></image></view> -->
<view class="logo">
<view class="top"><image src="../../static/img/home/elme.png"></image></view>
<view class="bottom"><image src="../../static/img/home/meituan.png"></image></view>
</view>
</view>
<view class="root" style="margin-top: 10upx;" v-if="filterData.length > 1">
<ren-dropdown-filter v-if="filterData.length > 1" :filterData='filterData' @click="navClick"
:defaultIndex='defaultIndex' @ed='ed' @dateChange='dateChange'></ren-dropdown-filter>
</view>
<view class="card-box" v-if="goodsHomeList.length > 0">
<task-home-list class="task-home" splitLine @click="clickItem" :list="goodsHomeList"></task-home-list>
</view>
<view v-if="goodsHomeList.length > 0">
<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
</view>
</view>
</view>
</template>
<script>
import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
import taskHomeList from "@/components/mask/task-home-list1.vue"
var QQMapWX = require('@/js_sdk/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
var qqmapsdk;
export default {
components: {
taskHomeList,
RenDropdownFilter
},
data() {
return {
endNum: 0,
shopname:'',
keyword: '',
value1: 1,
value2: 2,
cityname:'武汉',
listbanner: [{
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
title: '昨夜星辰昨夜风,画楼西畔桂堂东'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
title: '身无彩凤双飞翼,心有灵犀一点通'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
title: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳'
}
],
list: [{
name: '综合'
}, {
name: '距离'
}, {
name: '佣金',
}],
current: 0,
value1: 0,
options1: [{
label: '双平台',
value: 0,
},
{
label: '美团',
value: 1,
},
{
label: '饿了么',
value: 2,
}
],
shoplist:[
],
localCampus: '未知',
city: '',
meituanList: {},
elemeList: {},
banners: [],
latitude: '',
longitude: '',
mtelmCheck: '',
authorize: false,
weizhinames: '',
weizhidizhi: '',
categoryHeight: '320rpx', //菜单默认高度
currentPageindex: 0, //菜单滚动小点
navlist: [],
sortType: 0,
typeId: 0,
recommendList: [],
content: "",
phone: "",
isDisable: false,
tuijianList: [],
goodsHomeList: [],
page: 1,
limit: 10,
loadingType: 0,
contentText: {
contentdown: '上拉显示更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了'
},
filterData: [
[{
text: '综合分类',
value: ''
}, {
text: '返现最高',
value: 1
}, {
text: '最新发布',
value: 2
}, {
text: '距离最近',
value: 3
}]
],
defaultIndex: [0, 0],
arr: [],
showModal: true
}
},
onLoad(e) {
let that = this;
if (e.userByinvitationId) {
this.$queue.setData('userByinvitationId', e.userByinvitationId);
}
// #ifdef MP-WEIXIN
if (e.scene) {
const scene = decodeURIComponent(e.scene);
this.$queue.setData('userByinvitationId', scene.split(',')[0]);
}
// #endif
// #ifdef MP-WEIXIN
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'J5FBZ-XCUKI-UFEG2-5KOJJ-XD4L3-KNFNG'
});
that.authorizationLocation();
// #endif
// this.getBannerList();
// this.getnavlistClassify();
// this.getClassify();
//美团饿了么优惠券开关
// this.$Request.getT('/common/type/138').then(res => {
// if (res.code == 0) {
// if (res.data && res.data.value) {
// this.mtelmCheck = res.data.value;
// }
// }
// });
// this.$Request.getT('/banner/selectBannerList?classify=4&state=1').then(res => {
// if (res.code === 0) {
// this.meituanList = res.data[0];
// }
// });
// this.$Request.getT('/banner/selectBannerList?classify=4&state=2').then(res => {
// if (res.code === 0) {
// this.elemeList = res.data[0];
// }
// });
// 订单审核提醒 202
// 最新活动通知 204
// 点评提醒 205
// 活动反馈推送提醒 209
// 会员到期提醒 207
// 收益到账通知 208
// 积分变动提醒 206
// 提现审核提醒 203
// that.$Request.getT('/common/type/209').then(res => { //活动反馈推送提醒
// if (res.code == 0) {
// if (res.data && res.data.value) {
// that.arr.push(res.data.value)
// }
// }
// })
// that.$Request.getT('/common/type/208').then(res => { //收益到账通知
// if (res.code == 0) {
// if (res.data && res.data.value) {
// that.arr.push(res.data.value)
// }
// }
// })
// that.$Request.getT('/common/type/206').then(res => { //积分变动提醒
// if (res.code == 0) {
// if (res.data && res.data.value) {
// that.arr.push(res.data.value)
// }
// }
// })
},
onShow() {
let that = this;
var city = this.$queue.getData('city');
var localCampus = this.$queue.getData('localCampus');
if (city && localCampus) {
console.log(city)
this.latitude = this.$queue.getData('latitude');
this.longitude = this.$queue.getData('longitude');
this.city = city;
this.localCampus = localCampus;
this.$queue.remove('localCampus');
this.page = 1;
this.getHaoDianTuiJian1();
this.getHaoDianTuiJian();
}
let userId = this.$queue.getData('userId');
if (userId) {
//订阅
if (!uni.getStorageSync('sendindexMsg')) {
// this.openMsg()
}
}
},
methods: {
change(index) {
this.current = index;
},
//跳转到选择城市界面
goSelectCity() {
uni.navigateTo({
url: '/pages/index/citys'
})
},
//跳转到任务详情
totasks() {
uni.navigateTo({
url: '/pages/index/tasksdetails',
})
},
openMsg() {
var that = this
wx.getSetting({
withSubscriptions: true, //是否获取用户订阅消息的订阅状态,默认false不返回
success(ret) {
// console.log(ret,'------------------')
// console.log(Object.keys(ret.subscriptionsSetting.itemSettings).length)
// if (JSON.stringify(ret.subscriptionsSetting.itemSettings).indexOf('accept')!=-1) {
if (ret.subscriptionsSetting.itemSettings) {
uni.setStorageSync('sendindexMsg', true)
uni.openSetting({ // 打开设置页
success(rea) {
console.log(rea.authSetting)
}
});
} else { // 用户没有点击“总是保持以上,不再询问”则每次都会调起订阅消息
uni.setStorageSync('sendindexMsg', false)
uni.showModal({
title: '提示',
content: '为了更好的体验,请绑定消息推送',
confirmText: '确定',
cancelText: '取消',
success: function(res) {
if (res.confirm) {
uni.requestSubscribeMessage({
tmplIds: that.arr,
success(re) {
// console.log(re,'**********')
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
that.showModal = false
} else if (res.cancel) {
that.showModal = true
}
}
})
}
}
})
},
// 点击优惠券跳转小程序
gochegnxu(classify) {
let token = this.$queue.getData('token');
let userId = this.$queue.getData('userId');
if (token) {
if (uni.getStorageSync('sendindexMsg')) {
uni.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
// console.log(re,'**********')
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
if (classify == 1) { //美团
// #ifdef MP-WEIXIN
uni.navigateToMiniProgram({
appId: 'wxde8ac0a21135c07d',
path: this.meituanList.url,
fail(res) {
console.error(res)
}
})
// #endif
} else if (classify == 2) { //饿了么
// #ifdef MP-WEIXIN
uni.navigateToMiniProgram({
appId: 'wxece3a9a4c82f58c9',
path: this.elemeList.url,
fail(res) {
console.error(res)
}
})
// #endif
}
} else {
this.goLogin();
}
},
tuijianClickItem(index) {
let token = this.$queue.getData('token');
let userId = this.$queue.getData('userId');
if (token) {
if (uni.getStorageSync('sendindexMsg')) {
uni.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
// console.log(re,'**********')
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
uni.navigateTo({
url: '/pages/index/tuijianList'
});
} else {
this.goLogin();
}
},
ed(res) {
console.log(res)
},
dateChange(d) {
console.log(d)
},
getHaoDianTuiJian() {
this.loadingType = 1;
uni.showLoading({
title: '加载中...',
});
let data = {
page: 1,
limit: 4,
longitude: this.longitude,
latitude: this.latitude,
city: this.city,
search: '',
isGoods: '1'
}
this.$Request.getT('/wm/selectHomeGoodsList', data).then(res => {
if (res.code === 0) {
this.tuijianList = [];
res.data.list.forEach(d => {
d.distance = this.setMorKm(d.distance);
this.tuijianList.push(d)
});
}
uni.hideLoading();
})
},
getHaoDianTuiJian1() {
this.loadingType = 1;
uni.showLoading({
title: '加载中...',
});
let data = {
page: this.page,
limit: this.limit,
longitude: this.longitude,
latitude: this.latitude,
city: this.city,
search: '',
sort: this.sortType,
typeId: this.typeId
}
this.$Request.getT('/wm/selectHomeGoodsList', data).then(res => {
if (res.code === 0) {
if (this.page === 1) {
this.goodsHomeList = [];
}
res.data.list.forEach(d => {
d.distance = this.setMorKm(d.distance);
this.goodsHomeList.push(d)
});
if (res.data.list.length === this.limit) {
this.loadingType = 0;
} else {
this.loadingType = 3;
}
} else {
this.loadingType = 2;
}
uni.hideLoading();
})
},
setMorKm(m) {
var n = ''
if (m) {
if (m >= 1000) {
n = (m / 1000).toFixed(0) + 'km'
} else {
n = parseInt(m) + 'm'
}
} else {
n = '0m'
}
return n
},
getClassify() {
this.$Request.getT('/helpClassify/selectClassifyList').then(res => {
if (res.code === 0) {
this.navlist = res.data;
}
});
},
getnavlistClassify() {
this.$Request.getT('/banner/selectBannerList?state=-1&classify=2').then(res => {
if (res.code === 0) {
let dataList = [];
let data = {
text: '全部品类',
value: 0
}
dataList.push(data);
res.data.forEach(d => {
let data = {
text: '',
value: ''
}
data.text = d.name;
data.value = d.id;
if (d.state == 1) {
dataList.push(data);
}
});
this.filterData.push(dataList);
}
});
},
initLocation(latitude, longitude) {
var that = this;
qqmapsdk.reverseGeocoder({
location: latitude + ',' + longitude || '',
success: function(res) { //成功后的回调
if (res.status == 0) {
console.log(res)
that.authorize = false;
var res = res.result;
that.latitude = latitude;
that.longitude = longitude;
that.$queue.setData('latitude', latitude)
that.$queue.setData('longitude', longitude)
let s = res.ad_info.city.substring(0, res.ad_info.city.length - 1);
that.city = s;
that.$queue.setData('city', that.city);
that.localCampus = res.address_reference.landmark_l2.title;
that.getHaoDianTuiJian1();
that.getHaoDianTuiJian();
}
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
})
},
startSetting() {
let that = this;
// #ifdef APP-PLUS
permision.gotoAppSetting();
// #endif
// #ifdef MP-WEIXIN
uni.openSetting({
success(res3) {
console.log(res3)
if (res3.authSetting[
'scope.userLocation'
]) {
uni.hideToast();
that.initMyPosition();
} else {
that.authorizationLocation();
}
// 已授权-(获取位置信息)
}
});
// #endif
},
initMyPosition() {
let that = this;
uni.getLocation({
type: 'gcj02',
altitude: true,
success: res => {
that.initLocation(res.latitude, res.longitude);
}
});
},
authorizationLocation: function() {
let that = this;
uni.getSetting({
success(res1) {
if (!res1.authSetting['scope.userLocation']) {
// 未授权
uni.authorize({
scope: 'scope.userLocation',
success() { //1.1 允许授权
that.initMyPosition();
},
fail() { //1.2 拒绝授权
that.authorize = true; //用户是否拒绝了定位授权 true:用户拒绝 false:用户授权
}
})
} else {
// 已授权-(获取位置信息)
that.initMyPosition();
}
}
});
},
getBannerList() {
this.$Request.getT('/banner/selectBannerList?state=-1&classify=1').then(res => {
if (res.code === 0) {
this.banners = [];
res.data.forEach(d => {
if (d.state == 1) {
this.banners.push(d);
}
});
}
});
},
// 轮播图跳转小程序
toGoodsInfo: function(url) {
if (uni.getStorageSync('sendindexMsg')) {
uni.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
// console.log(re,'**********')
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
let token = this.$queue.getData('token');
let userId = this.$queue.getData('userId');
if (url.indexOf('/pages/') !== -1) {
uni.navigateTo({
url
});
} else {
//#ifndef H5
uni.navigateTo({
url: '/pages/public/webview?url=' + url
});
//#endif
//#ifdef H5
window.location.href = url;
//#endif
}
},
goSearch() {
if (uni.getStorageSync('sendindexMsg')) {
uni.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
// console.log(re,'**********')
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
uni.navigateTo({
url: '/pages/task/search'
});
},
goSelectCity() {
if (uni.getStorageSync('sendindexMsg')) {
uni.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
// console.log(re,'**********')
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
if (!this.authorize) {
uni.navigateTo({
url: '/pages/index/selectCampus?city=' + this.city
});
} else {
this.startSetting();
}
},
goLogin() {
this.$queue.setData('href', '/pages/index/index');
uni.navigateTo({
url: '/pages/public/login'
});
},
navClick: function(res) {
if (uni.getStorageSync('sendindexMsg')) {
uni.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
// console.log(re,'**********')
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
console.log('点击', res)
this.page = 1;
if (res.index1 == 0) {
this.sortType = res.index ? res.index : 0;
this.getHaoDianTuiJian1();
} else if (res.index1 == 1) {
this.typeId = res.index ? res.index : 0;
this.getHaoDianTuiJian1();
}
},
clickItem: function(options) {
let token = this.$queue.getData('token');
let userId = this.$queue.getData('userId');
if (token) {
if (uni.getStorageSync('sendindexMsg')) {
uni.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
// console.log(re,'**********')
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
uni.navigateTo({
url: '/pages/index/taskDetail?goodsId=' + options.item.goodsId + '&latitude=' + this
.latitude + '&longitude=' + this.longitude
})
} else {
this.goLogin();
}
},
toNavList: function(item) {
let token = this.$queue.getData('token');
let userId = this.$queue.getData('userId');
if (token) {
if (uni.getStorageSync('sendindexMsg')) {
uni.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
// console.log(re,'**********')
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
uni.navigateTo({
url: '/pages/task/tasklist?searchValue=&classifyId=' + item.id + '&name=' + item
.classifyName
});
} else {
this.goLogin();
}
},
// 传进数组和指定个数,进行拆分
chunk: function(array, size) {
const length = array.length
if (!length || !size || size < 1) {
return []
}
let index = 0
let resIndex = 0
let result = new Array(Math.ceil(length / size))
while (index < length) {
result[resIndex++] = array.slice(index, (index += size))
}
return result
},
topScrollTap: function() {
uni.pageScrollTo({
scrollTop: 0,
duration: 300
});
}
},
onPageScroll: function(e) {
this.scrollTop = e.scrollTop > 200;
},
onReachBottom: function() {
this.page = this.page + 1;
this.getHaoDianTuiJian1();
}
}
// this.$Request.getT('/banner/selectBannerList?classify=4&state=2').then(res => {
// if (res.code === 0) {
// this.elemeList = res.data[0];
// }
// });
</script>
<style lang="scss">
page {
width: 100%;
background-color: #F6F6F6;
}
.containertop {
background-color: #FFFFFF;
}
.banner {
margin: 0 16px;
}
.nav p {
font-size: 14px;
margin-top: 5px;
font-family: PingFang SC;
font-weight: 500;
}
.nav {
display: flex;
margin: 0 16px;
}
.nav .citys {
width:40px;
font-size: 14px;
font-weight: 500;
font-family: PingFang SC;
}
.nav .search {
flex: 1;
}
.imgs {
width: 48px;
height: 48px;
}
.list p {
font-size: 12px;
color: #2E2E2E;
}
// .banner {
// width: 344px;
// height: 131px;
// }
.listbox {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
flex-direction: row;
margin-top: 18px;
}
.list {
width: 48px;
height: 71px;
}
.bill {
display: flex;
justify-content: space-between;
width: 93%;
margin: 0 auto;
margin-top: 15px;
}
.bill image {
width: 164px;
height: 84px;
float: left;
}
.nav2 {
display: flex;
font-size: 12px;
font-family: PingFang SC;
color: #C1C1C1;
width: 100%;
background-color: #FFFFFF;
}
.nav2 .tabs {
flex: 1;
}
.nav2 .dropdown {
width: 24%;
background-color: #FFFFFF;
margin-right: 26px;
color: #C1C1C1;
}
.shoplist {
background-color: #F6F6F6;
width: 100%;
margin-top: 12px;
}
.shop {
height: 100px;
margin: 0 16px;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
border-radius: 6px;
box-shadow: 3px 3px 6px #d6d6d6;
}
.shop image {
width: 76px;
height: 76px;
}
.message {
display: flex;
flex: 1;
border-radius: 0 6px 6px 0;
}
.message .pic {
width: 77px;
display: flex;
justify-content: center;
align-items: center;
}
.message .text {
flex: 1;
display: flex;
margin-left: 8px;
flex-direction: column;
}
.message .text p {
font-size: 18px;
}
.message .text view {
flex: 1;
}
.u-dropdown__content__mask {
background: #FFFFFF !important;
}
.search {
height: 30px;
background: #FFFFFF;
opacity: 1;
border-radius: 4px;
display: flex;
}
.search .button {
width: 42px;
height: 30px;
background: linear-gradient(90deg, #F65646 0%, #FF3B27 100%);
border-radius: 4px;
color: #FFFFFF;
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
padding-left: 10px;
padding-top: 6px;
float: left;
border: 1px solid #9F9F9F;
border-left: none;
}
.logo {
width: 30px;
height: 100px;
border-radius: 0 6px 6px 0;
position: relative;
}
.logo image{
width: 24px;
height: 24px;
left: 2px;
position: absolute;
}
.m{
background-color: #FED810;
}
.e{
background-color: #349CFC;
}
.logo .top{
height: 50px;
background-color: #349CFC;
border-radius: 0 6px 0 0;
position: relative;
}
.logo .bottom{
height: 50px;
background-color: #FED810;
border-radius: 0 0 6px 0;
position: relative;
}
.logo .bottom image{
bottom:0px;
}
</style>