<template>
|
<view class="main-container user-home">
|
<view class="bg-top-green"></view>
|
<!-- 顶部，可能 -->
|
<view class="school" :style="{'padding-top':(StatusBar)+'px'
|
,height:CustomBar+'rpx','line-height':CustomBar+'rpx' }">
|
<!-- <picker @change="PickerChangeSchool" :value="areaIndex" :range="schools" range-key="name">
|
<view class="picker flex">
|
<uni-icons type="location" class="m-r-5" size="18"></uni-icons>
|
<view>
|
{{ areaIndex >= 0 && schools[areaIndex].name ? schools[areaIndex].name : '选择位置' }}
|
</view>
|
</view>
|
</picker> -->
|
<view class="picker flex" @click.stop="goToAddress">
|
<uni-icons type="location" class="m-r-5" size="18"></uni-icons>
|
<view>
|
{{ address&&address.id?address.address: '选择地址' }}
|
</view>
|
</view>
|
</view>
|
<view class="search-container m-t-12 flex" @click="goto('/pages/home/components/home-search',false)">
|
<view class="flex1 input">
|
<u-input placeholder="请输入花名或店铺名" disabled v-model="search_flow">
|
<template slot="suffix">
|
<!-- @click="buttonSearchFlow" -->
|
<uni-icons color="#20613D" type="search" size="24"></uni-icons>
|
</template>
|
</u-input>
|
</view>
|
</view>
|
|
<!-- banner -->
|
<!-- <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="currentBanner"
|
:mode="'dot'" :dots-styles="dotsStyles[0]" field="content"> -->
|
<swiper class="swiper-box" @change="changeBanner" :interval="10000" :circular="true" :current="0"
|
v-if="banners&&banners.length>0" :autoplay="true">
|
<swiper-item v-for="(item, index) in banners" :key="index">
|
<view class="swiper-item" :class="'swiper-item' + index">
|
<!-- @click="previewImg(item.url||item.image)" -->
|
<image class="home-banner-image" mode="scaleToFill" @click="clickBanner(item)"
|
:src="item.url||item.image">
|
</image>
|
</view>
|
</swiper-item>
|
</swiper>
|
<swiper class="swiper-box" @change="changeBanner" :current="0" v-if="!banners||banners.length==0">
|
<swiper-item v-for="(item, index) in 1" :key="index">
|
<view class="swiper-item" :class="'swiper-item' + index">
|
<image class="home-banner-image" mode="scaleToFill"
|
src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/62/62ddac6297104e369aba646be704064dbanner@2x.png">
|
</image>
|
</view>
|
</swiper-item>
|
</swiper>
|
<!-- </uni-swiper-dot> -->
|
<!-- tip -->
|
<view class="m-t-12" @click="getNoticeMore">
|
<uni-notice-bar class="notice-bar" color="#333" background-color="#fff" show-get-more show-icon
|
:scrollable="scrollable" :text="currentNotice.title||'暂无公告'" :key="currentNotice.id" />
|
<span v-if="!currentNotice||!currentNotice.id"> </span>
|
</view>
|
<!-- 当前分类 -->
|
<home-category ref="home_category"></home-category>
|
<!-- 特别的几个公告图片 -->
|
<home-banner-imgs ref="home_banner"></home-banner-imgs>
|
<!-- 均价情况 -->
|
<!-- <home-price></home-price> -->
|
<!-- 几个专区 -->
|
<home-zones ref="home_zeros"></home-zones>
|
<!-- 置顶的花列表 -->
|
<home-top-flow ref="home_top_flow"></home-top-flow>
|
|
<view style="min-height:140rpx">
|
</view>
|
<common-footer flg="0"></common-footer>
|
|
<uni-popup ref="coupon_home" type="center" border-radius="10px 10px 0 0">
|
<view class="coupon-container" style="width: 690rpx;">
|
<view v-if="dto_home_coupon.imageUrl" class="coupont-item all" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
|
<view @click="getCoupon(dto_home_coupon)"
|
:style="{
|
backgroundImage: `url(${dto_home_coupon.imageUrl})`,
|
backgroundSize: 'contain',
|
backgroundPosition: 'center',
|
backgroundRepeat: 'no-repeat' ,
|
width: '600px', // 设置宽度
|
height: '600px' // 设置高度
|
}">
|
</view>
|
</view>
|
|
<view class="coupont-item all" v-else>
|
<view class="flex container img100">
|
|
<view class="info-price">
|
<view class="price1">
|
{{dto_home_coupon.maxDiscountAmount?(`${dto_home_coupon.maxDiscountAmount}折`):(`￥${dto_home_coupon.couponDiscountValue}`)}}
|
</view>
|
<view class="price2">
|
{{dto_home_coupon.minOrderAmount?(`满￥${dto_home_coupon.minOrderAmount}可用`):'无门槛'}}
|
</view>
|
</view>
|
<view class="info flex1">
|
<view class="title">
|
{{dto_home_coupon.couponName||'-'}}
|
</view>
|
<view class="time" v-if="dto_home_coupon.getEndDate">
|
<!-- 领取后{{dto_home_coupon.usageTimeNum||''}}{{dto_home_coupon.usageTimeTypeName||''}}有效 -->
|
{{dto_home_coupon.getEndDate|| '-'}}前有效
|
</view>
|
<view class="button" @click="getCoupon(dto_home_coupon)">
|
立即领取
|
</view>
|
</view>
|
</view>
|
|
<view class="tip">
|
<span class="t-red">*</span>{{dto_home_coupon.couponDescription || '此券每人限领1张。仅限用于花满芫鲜花交易平台鲜切花花款满额使用，不可与其他优惠同享、不可叠加使用'}}
|
</view>
|
</view>
|
</view>
|
</uni-popup>
|
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from 'vuex'
|
import homePrice from './components/home-price.vue'
|
import homeBannerImgs from './components/home-banner-imgs.vue'
|
import homeZones from './components/home-zones.vue'
|
import homeTopFlow from './components/home-top-flow.vue'
|
import homeCategory from './components/home-category.vue'
|
|
export default {
|
computed: {
|
...mapState({
|
address: state => {
|
return state.defaultaddress || {}
|
},
|
currentInfo: state => {
|
return state.currentInfo || {}
|
},
|
}),
|
},
|
components: {
|
homeCategory,
|
homePrice,
|
homeBannerImgs,
|
homeZones,
|
homeTopFlow
|
},
|
onPullDownRefresh() {
|
// 下拉刷新方法
|
this.init()
|
this.$message.showLoading()
|
this.init_children()
|
setTimeout(() => {
|
this.$message.hideLoading()
|
uni.stopPullDownRefresh()
|
}, 2000)
|
},
|
data() {
|
return {
|
search_flow: '',
|
CustomBar: uni.getStorageSync('CustomBar'),
|
StatusBar: uni.getStorageSync('StatusBar'),
|
// StatusBar:0,
|
color: '#fff',
|
schools: [],
|
areaIndex: -1,
|
scrollable: false,
|
|
info: [{
|
colorClass: 'uni-bg-red',
|
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
|
content: '内容 A'
|
},
|
{
|
colorClass: 'uni-bg-green',
|
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
|
content: '内容 B'
|
},
|
{
|
colorClass: 'uni-bg-blue',
|
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
|
content: '内容 C'
|
}
|
],
|
dotStyle: [{
|
backgroundColor: 'rgba(0, 0, 0, .3)',
|
border: '1px rgba(0, 0, 0, .3) solid',
|
color: '#fff',
|
selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
|
selectedBorder: '1px rgba(0, 0, 0, .9) solid'
|
},
|
{
|
backgroundColor: 'rgba(255, 90, 95,0.3)',
|
border: '1px rgba(255, 90, 95,0.3) solid',
|
color: '#fff',
|
selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
|
selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
|
},
|
{
|
backgroundColor: 'rgba(83, 200, 249,0.3)',
|
border: '1px rgba(83, 200, 249,0.3) solid',
|
color: '#fff',
|
selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
|
selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
|
}
|
],
|
currentBanner: 0,
|
banners: [],
|
tripList: [],
|
tuangouList: [],
|
hide_footer: false,
|
noticeList: [],
|
currentNoticeIndex: 0,
|
currentNotice: {},
|
dto_home_coupon: {}
|
};
|
},
|
onShareAppMessage() {
|
let that = this;
|
var name = that.currentInfo.customerDTO && that.currentInfo.customerDTO.name || that.currentInfo.supplierDTO &&
|
that.currentInfo.supplierDTO.name || that.currentInfo.partnerDTO && that.currentInfo.partnerDTO.name || ''
|
var url =
|
`/pages/home/home?shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数
|
return {
|
title: "花满芫",
|
path: url,
|
}
|
},
|
onShareTimeline() {
|
let that = this;
|
var name = that.currentInfo.customerDTO && that.currentInfo.customerDTO.name || that.currentInfo.supplierDTO &&
|
that.currentInfo.supplierDTO.name || that.currentInfo.partnerDTO && that.currentInfo.partnerDTO.name || ''
|
var url =
|
`/pages/home/home?shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数
|
return {
|
title: "花满芫",
|
path: url,
|
}
|
},
|
onReachBottom() {
|
console.log('onReachBottom')
|
if (this.$refs && this.$refs.home_top_flow) {
|
// console.log(this.$refs.home_top_flow)
|
this.$refs.home_top_flow.fun_GetMore()
|
}
|
},
|
onLoad(options) {
|
this.init()
|
},
|
methods: {
|
async getCoupon(item) {
|
if (!this.currentInfo.id) {
|
await this.$message.confirm('请先前往登录')
|
this.$storage.removeItem('cache_home_show_coupon')
|
return
|
}
|
this.$message.showLoading()
|
const {
|
code,
|
data
|
} = await this.$http.request('post', '/api/v2/coupon/app/receive', {
|
data: {
|
couponId: item.id,
|
num: 1
|
}
|
})
|
if (code == 0) {
|
this.$refs.coupon_home.close()
|
|
this.$message.showToast('领取成功')
|
}
|
},
|
init_children() {
|
this.$refs.home_top_flow && this.$refs.home_top_flow.init && this.$refs.home_top_flow.init()
|
this.$refs.home_category && this.$refs.home_category.init && this.$refs.home_category.init()
|
this.$refs.home_banner && this.$refs.home_banner.init && this.$refs.home_banner.init()
|
this.$refs.home_zeros && this.$refs.home_zeros.init && this.$refs.home_zeros.init()
|
},
|
init() {
|
// if(options.partnerUserId){
|
// //需要前往注册了
|
// uni.navigateTo({
|
// url: '/pages/login/supplier-login'
|
// })
|
// }
|
// console.log('home created')
|
//这里进行一次初始化即可
|
// this.$http.request('get', '/api/school/area/list', {
|
|
// }).then(res => {
|
// if (res.code == 0) {
|
// this.schools = res.data || []
|
// }
|
// })
|
|
// uni.navigateTo({
|
// url: '/sub_pages/customer/trade/detail'
|
// })
|
|
//获取banner图
|
this.$http.request('get', '/api/pub/banner/list', {}).then(res => {
|
if (res.code == 0) {
|
this.banners = []
|
|
var tarr = res.data || []
|
if (tarr.length == 0) {
|
// tarr.push({
|
// url: 'https://hmy-flower.oss-cn-shanghai.aliyuncs.com/62/62ddac6297104e369aba646be704064dbanner@2x.png'
|
// })
|
this.banners = tarr
|
} else {
|
var result = []
|
for (var item of tarr) {
|
// http://106.14.123.210/files/group1/e8/e1c17f7229514e5da211d8d47b09906b.jpeg
|
try {
|
if (item.url) {
|
var t = JSON.parse(item.url)
|
if (Array.isArray(t)) {
|
// item.url = t[0] || ''
|
for (var url of t) {
|
result.push({
|
...item,
|
url: url || ''
|
})
|
}
|
} else {
|
// item.url = t.url || ''
|
result.push({
|
...item,
|
url: t.url || ''
|
})
|
}
|
}
|
|
} catch (e) {
|
// console.log('error',e)
|
}
|
}
|
this.banners = result
|
}
|
console.log('this.banners', this.banners)
|
}
|
})
|
|
var areaIndex = uni.getStorageSync('areaIndex')
|
if (!areaIndex && areaIndex !== 0) {
|
|
} else {
|
this.areaIndex = areaIndex
|
}
|
//如果已经登录，加载一下默认地址
|
let that = this
|
setTimeout(() => {
|
if (that.currentInfo.id && !that.address.id) {
|
that.$http.request('get', '/api/address/default/detail').then(res => {
|
if (res.data) {
|
that.$store.commit('setDefaultAddress', {
|
...res.data
|
})
|
|
}
|
})
|
}
|
|
}, 2000)
|
//公告
|
var type = ''
|
// #ifdef PUB_CUSTOMER
|
type = 'customer'
|
// #endif
|
// #ifdef PUB_SUPPLIER
|
type = 'supplier'
|
// #endif
|
// #ifdef PUB_PARTNER
|
type = 'partner'
|
// #endif
|
|
this.$http.request('get', '/api/pub/announcement/list/' + type, {
|
params: {
|
size: 5,
|
status: 'A'
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
// (res.data && res.data.records || [])
|
this.noticeList = res.data || []
|
console.log('this.noticeList', this.noticeList)
|
if (this.noticeList.length > 0) {
|
this.currentNotice = this.noticeList[0]
|
if (this.currentNotice.title && this.currentNotice.title.length >= 30) {
|
this.scrollable = true
|
} else {
|
this.scrollable = false
|
}
|
let that = this
|
if (this.noticeList.length >= 1) {
|
setInterval(() => {
|
console.log('interval,1')
|
that.currentNoticeIndex += 1
|
that.currentNoticeIndex %= that.noticeList.length
|
that.currentNotice = that.noticeList[that.currentNoticeIndex]
|
that.scrollable = false
|
that.$nextTick(() => {
|
if (that.currentNotice.title && that.currentNotice.title
|
.length >= 30) {
|
that.scrollable = true
|
} else {
|
that.scrollable = false
|
}
|
})
|
|
}, 8000)
|
}
|
|
}
|
}
|
})
|
|
|
let tmp = this
|
//延迟2秒
|
setTimeout(() => {
|
if (tmp.currentInfo.id) {
|
var value = tmp.$storage.getItem('cache_home_show_coupon')
|
if (!value) {
|
//首页优惠券
|
tmp.$storage.setItem('cache_home_show_coupon', '1')
|
var u = '/api/v2/coupon/app/home/alert'
|
// u = '/api/v2/coupon/app/home/list'
|
tmp.$http.request('get', u).then(res => {
|
if (res.code == 0) {
|
// var list = res.data || {}
|
// var dto = list.length >= 1 ? list[0] : undefined
|
var dto = res.data || undefined
|
if (dto) {
|
// 显示弹窗图片
|
tmp.dto_home_coupon = dto
|
tmp.$refs.coupon_home.open()
|
}
|
}
|
})
|
}
|
}
|
}, 1200)
|
|
},
|
|
clickBanner(item) {
|
if (item.id) {
|
uni.navigateTo({
|
url: '/pages/home/components/home-banner-detail?id=' + item.id
|
})
|
} else if (item.url) {
|
this.previewImg(item.url)
|
}
|
},
|
goToAddress() {
|
if (!this.currentInfo.id) {
|
this.$message.showToast('请先前往登录')
|
return
|
}
|
uni.navigateTo({
|
url: '/pages/user/address/address?source=select'
|
})
|
},
|
buttonSearchFlow() {
|
console.log('buttonSearchFlow')
|
uni.navigateTo({
|
url: '/sub_pages/customer/trade/list?name=' + this.search_flow
|
})
|
},
|
pop(status) {
|
this.hide_footer = !!status
|
},
|
changeBanner(e) {
|
this.currentBanner = e.detail.current
|
},
|
|
getNoticeMore() {
|
uni.navigateTo({
|
url: '/pages/notice/list?id=' + this.currentNotice.id
|
})
|
},
|
PickerChangeSchool(e) {
|
if (e.detail.value == '-1') {
|
this.$message.showToast('未选择位置')
|
return
|
}
|
console.log(' this.schools', this.schools, parseInt(e.detail.value), e);
|
|
|
this.areaIndex = parseInt(e.detail.value)
|
uni.setStorageSync('areaId', this.schools[parseInt(e.detail.value)].id);
|
uni.setStorageSync('areaIndex', parseInt(e.detail.value));
|
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "./home.scss";
|
|
/* #ifdef PUB_CUSTOMER */
|
@import "@/sub_pages/customer/coupon/coupon.scss";
|
/* #endif */
|
</style>
|
