665 lines
16 KiB
Vue
665 lines
16 KiB
Vue
<template>
|
|
<view class="index" :style="[theme]">
|
|
<view class="onecontent" v-if="listswiper.length != 0">
|
|
<u-swiper indicator :list="listswiper" indicatorMode='dot' height='144' radius='12'></u-swiper>
|
|
</view>
|
|
<!-- clothingmetals服装金刚区 -->
|
|
<clothingmetals v-if="list.goods_type.length != 0 && model_type == 'Dress'" :list='list.goods_type'>
|
|
</clothingmetals>
|
|
<!-- clothingmetals鲜花服装金刚区 -->
|
|
<flower v-if="list.goods_type.length != 0 && model_type == 'Flower'" :list='list.goods_type'></flower>
|
|
<!-- 每日特价 -->
|
|
<specials v-if="list.special.data.length != 0" :img='list.special.img' :list='list.special.data'
|
|
:title='list.special.title'></specials>
|
|
<!-- 限时抢购 -->
|
|
<flashsale v-if="list.panic.data.length != 0" :title='list.panic.title' :list='list.panic.data'></flashsale>
|
|
<!-- 热榜推荐-->
|
|
<view class="contentclothing" v-if="list.is_re.img != null" style="margin-top: 16rpx;">
|
|
<view class="contentclothingimage" v-if="list.is_re.img != null">
|
|
<image :src="list.is_re.img" mode="aspectFill"></image>
|
|
</view>
|
|
<clothing v-if="list.is_re.data.length != 0" :list='list.is_re.data'></clothing>
|
|
</view>
|
|
<!-- 优秀好员工第一份 -->
|
|
<view v-if="list.people.length != 0" style="margin-top: 16rpx;">
|
|
<view class="contenttext">
|
|
<text class="contenttexttext">{{list.position_nickname || ''}}</text>
|
|
</view>
|
|
<employees :list='list.people' :bgbutton='theme.bgbutton'></employees>
|
|
</view>
|
|
<!-- 优秀好员工第二份 -->
|
|
<view v-if="list.people_two.length != 0">
|
|
<view class="contenttext">
|
|
<text class="contenttexttext">{{list.position_nickname_two || ''}}</text>
|
|
</view>
|
|
<employees :list='list.people_two' :bgbutton='theme.bgbutton'></employees>
|
|
</view>
|
|
<!-- 会员卡 -->
|
|
<vipclass v-if="list.vip.length != 0" :list='list.vip'></vipclass>
|
|
<!-- 热门推荐 -->
|
|
<recommend :title='list.mother_goods_type.title' :list='list.mother_goods_type.data'
|
|
v-if="list.mother_goods_type.data.length != 0"></recommend>
|
|
<!-- 秒杀专区 -->
|
|
<salezone :title='list.goods.title' :list='list.goods.data' v-if="list.goods.data.length != 0"></salezone>
|
|
<!-- 热门项目 -->
|
|
<view v-if="list.service.length != 0" style="margin-top: 16rpx;">
|
|
<view class="contenttext">
|
|
<text class="contenttexttext">热门项目</text>
|
|
</view>
|
|
<popula :list='list.service'></popula>
|
|
</view>
|
|
|
|
<bottombbar :valuebbar='0'></bottombbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import dayjs from 'dayjs'
|
|
import bottombbar from '@/components/bottombbar.vue'
|
|
import clothingmetals from './components/clothingmetals/index.vue'
|
|
import employees from './components/employees/index.vue'
|
|
import clothing from './components/clothing/index.vue'
|
|
import flower from './components/flower/index.vue'
|
|
import vipclass from './components/vipclass/index.vue'
|
|
import recommend from './components/recommend/index.vue'
|
|
import salezone from './components/salezone/index.vue'
|
|
import popula from './components/popula/index.vue'
|
|
import specials from './components/specials/index.vue'
|
|
import flashsale from './components/flashsale/index.vue'
|
|
export default {
|
|
components: {
|
|
bottombbar,
|
|
clothingmetals,
|
|
employees,
|
|
clothing,
|
|
flower,
|
|
recommend,
|
|
salezone,
|
|
popula,
|
|
vipclass,
|
|
specials,
|
|
flashsale
|
|
},
|
|
data() {
|
|
return {
|
|
model_type: '',
|
|
indicators: false,
|
|
list: {
|
|
vip: [],
|
|
service: [],
|
|
people: [],
|
|
people_two: [],
|
|
goods_type: [],
|
|
mother_goods_type: {
|
|
data: [],
|
|
img: null
|
|
},
|
|
goods: {
|
|
data: [],
|
|
img: null
|
|
},
|
|
special: {
|
|
data: [],
|
|
img: '',
|
|
title: '每日特价'
|
|
},
|
|
panic: {
|
|
data: [],
|
|
title: '限时抢购'
|
|
},
|
|
theme_re: {
|
|
data: [],
|
|
img: null
|
|
},
|
|
is_re: {
|
|
data: [],
|
|
img: null
|
|
},
|
|
new: {
|
|
data: [],
|
|
img: null
|
|
}
|
|
},
|
|
listswiper: []
|
|
}
|
|
},
|
|
computed: {
|
|
theme() {
|
|
return this.$store.getters.theme
|
|
},
|
|
},
|
|
async onLoad(e) {
|
|
// #ifdef H5
|
|
await this.$onLaunched
|
|
// #endif
|
|
try {
|
|
if (e.scene) {
|
|
uni.cache.set('store_id', e.scene) // 判断显示哪家的作品
|
|
this.userloginss() //刷新初始数据
|
|
} else {
|
|
// #ifdef MP-WEIXIN || MP-ALIPAY
|
|
if (!uni.cache.get('loginuser').userinfo) {
|
|
this.userloginss() //刷新初始数据
|
|
} else {
|
|
this.indexnewappclassindex()
|
|
}
|
|
// #endif
|
|
}
|
|
} catch (e) {}
|
|
// #ifdef H5
|
|
let res = await this.api.userlogin({
|
|
code: '0c3KOzFa1lkuMF0enAHa1Eu2xG1KOzFJ',
|
|
store_id: 65, // 判断显示哪家的作品
|
|
//【2,美容】【62,美发】【63,健身】【65,口腔】【66,足疗按摩】【89,社区】
|
|
//【72,宠物生活】【74,婚纱摄影】【79,服装】【80,鲜花】【82, 送水】【88, 母婴】【99, 酒店】
|
|
})
|
|
if (res) {
|
|
if (res.model_type == 'Hotel') {
|
|
uni.reLaunch({
|
|
url: '/pages/index/hotel'
|
|
});
|
|
}
|
|
uni.cache.set('loginuser', res);
|
|
uni.cache.set('store_id', res.store_id) // 判断显示哪家的2
|
|
uni.cache.set('openId', res.userinfo.open_id);
|
|
this.indexnewappclassindex()
|
|
}
|
|
// #endif
|
|
},
|
|
onShow() {
|
|
if (uni.getStorageSync('loginuser').model_type == 'Hotel') {
|
|
uni.reLaunch({
|
|
url: '/pages/index/hotel'
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
click1(a, e) { //优秀员工跳转
|
|
uni.pro.navigateTo('order/orderInfos', {
|
|
id: a.id,
|
|
})
|
|
},
|
|
async userloginss() {
|
|
// #ifdef MP-WEIXIN || MP-ALIPAY
|
|
uni.login({ //alipay weixin
|
|
// #ifdef MP-ALIPAY
|
|
provider: 'alipay',
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
provider: 'weixin',
|
|
// #endif
|
|
success: async (data) => {
|
|
console.log(data)
|
|
try {
|
|
uni.cache.set('weixincode', data.code);
|
|
let res = await this.api.userlogin({
|
|
code: uni.cache.get('weixincode'),
|
|
store_id: uni.cache.get('store_id') // 判断显示哪家的作品
|
|
})
|
|
if (res) {
|
|
if (res.model_type == 'Hotel') {
|
|
uni.reLaunch({
|
|
url: '/pages/index/hotel'
|
|
});
|
|
}
|
|
uni.cache.set('loginuser', res);
|
|
uni.cache.set('store_id', res.store_id) // 判断显示哪家的作品
|
|
uni.cache.set('openId', res.userinfo.open_id);
|
|
// uni.pro.navigateTo('order/orderInfos')
|
|
this.indexnewappclassindex()
|
|
}
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
});
|
|
// #endif
|
|
|
|
},
|
|
async clickmemberinfos(e) { //购买会员卡
|
|
if (e.is_user_sec == 0) {
|
|
uni.pro.navigateTo('my/member/memberinfos', {
|
|
id: e.id,
|
|
})
|
|
// async toworder() { //会员卡
|
|
// let res = await this.api.userreceivebalancecar({
|
|
// store_id: uni.cache.get('store_id') // 判断显示哪家的作品
|
|
// })
|
|
// uni.showToast({
|
|
// title: '领取成功',
|
|
// icon: 'none'
|
|
// });
|
|
// setTimeout(() => {
|
|
// uni.pro.navigateTo('my/member/index')
|
|
// }, 1500);
|
|
// },
|
|
} else {
|
|
uni.pro.navigateTo('my/member/memberinfo', {
|
|
id: e.id,
|
|
})
|
|
}
|
|
|
|
},
|
|
mallInfoInfo(e) { //查看订单详情
|
|
uni.pro.navigateTo('mall/mallInfo', {
|
|
id: e.id,
|
|
})
|
|
},
|
|
|
|
eeInfoseries(e) {
|
|
uni.pro.navigateTo('mall/series', {
|
|
id: e.goods_type_id,
|
|
})
|
|
},
|
|
async indexnewappclassindex() { //首页数据
|
|
let res = await this.api.indexnewappclassindex({
|
|
store_id: uni.cache.get('store_id')
|
|
})
|
|
try {
|
|
if (res) {
|
|
//前端模拟数据
|
|
this.list = res
|
|
if (res.vip) { //会员卡
|
|
this.list.vip = res.vip
|
|
} else {
|
|
this.list.vip = []
|
|
}
|
|
if (res.people_two) { ///优秀员工2
|
|
this.list.people_two = res.people_two
|
|
} else {
|
|
this.list.people_two = []
|
|
}
|
|
if (res.service) { //热门项目
|
|
this.list.service = res.service
|
|
} else {
|
|
this.list.service = []
|
|
}
|
|
if (res.people) { //优秀员工1
|
|
this.list.people = res.people
|
|
} else {
|
|
this.list.people = []
|
|
}
|
|
if (res.store.bananer) { //轮播
|
|
this.listswiper = res.store.bananer
|
|
} else {
|
|
this.listswiper = []
|
|
}
|
|
if (res.mother_goods_type) { //热门推荐 母婴
|
|
this.list.mother_goods_type = res.mother_goods_type
|
|
} else {
|
|
this.$set(this.list, 'mother_goods_type', {
|
|
img: null,
|
|
data: []
|
|
})
|
|
}
|
|
if (res.goods) { //秒杀专区
|
|
this.list.goods = res.goods
|
|
} else {
|
|
this.$set(this.list, 'goods', {
|
|
img: null,
|
|
data: []
|
|
})
|
|
}
|
|
if (res.special) { //每日特价
|
|
this.list.special = res.special
|
|
this.list.special.data = res.special.data.slice(0, 4)
|
|
} else {
|
|
this.$set(this.list, 'special', {
|
|
img: null,
|
|
title: '每日特价',
|
|
data: []
|
|
})
|
|
}
|
|
if (res.panic) { //限时抢购
|
|
this.list.panic = res.panic
|
|
var dates = new Date().getTime();
|
|
let recommendList = this.list.panic.data;
|
|
recommendList.forEach((item, index) => {
|
|
var leftTime = item.end_time - dates; //计算两日期之间相差的毫秒数
|
|
if (leftTime >= 0) {
|
|
let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
|
|
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
|
|
let m = Math.floor(leftTime / 1000 / 60 % 60);
|
|
let s = Math.floor(leftTime / 1000 % 60);
|
|
item.end_times = {
|
|
d: d,
|
|
h: h,
|
|
m: m,
|
|
s: s
|
|
}
|
|
} else {
|
|
item.end_times = 0
|
|
}
|
|
})
|
|
this.list.panic.data = recommendList
|
|
} else {
|
|
this.$set(this.list, 'panic', {
|
|
title: '限时抢购',
|
|
data: []
|
|
})
|
|
}
|
|
if (res.theme_re) { //服装
|
|
this.list.theme_re = res.theme_re
|
|
} else {
|
|
this.$set(this.list, 'theme_re', {
|
|
img: null,
|
|
data: []
|
|
})
|
|
}
|
|
if (res.discount) { //服装
|
|
this.list.discount = res.discount
|
|
} else {
|
|
this.$set(this.list, 'new', {
|
|
discount: null,
|
|
})
|
|
}
|
|
if (res.new) { //服装
|
|
this.list.new = res.new
|
|
} else {
|
|
this.$set(this.list, 'new', {
|
|
img: null,
|
|
data: []
|
|
})
|
|
}
|
|
if (res.goods_type) { //服装金刚区
|
|
this.list.goods_type = res.goods_type
|
|
} else {
|
|
this.$set(this.list, 'goods_type', [])
|
|
}
|
|
if (res.is_re) { //服装
|
|
this.list.is_re = res.is_re
|
|
} else {
|
|
this.$set(this.list, 'is_re', {
|
|
img: null,
|
|
data: []
|
|
})
|
|
}
|
|
uni.cache.set('store_id', res.store.id) // 返回的id
|
|
if (uni.cache.get('store_id')) { //store_id 行业id
|
|
this.$store.dispatch("actionsclassification");
|
|
}
|
|
uni.setNavigationBarTitle({ //定义标题
|
|
title: res.store.title
|
|
});
|
|
this.model_type = uni.cache.get('loginuser').model_type //类别分类
|
|
|
|
// this.list.describe = res.describe.replace(/\<img/g,
|
|
// '<img style="max-width:100%;height:auto" ');
|
|
}
|
|
} catch (e) {
|
|
//TODO handle the exception
|
|
}
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
::v-deep .u-scroll-list__indicator {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.index {
|
|
.onecontent {
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
.contentclothing {
|
|
padding: 8rpx 32rpx;
|
|
width: 100%;
|
|
|
|
.contentclothingimageclassimagebuya {
|
|
width: auto;
|
|
margin: 48rpx 0;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.contentclothingimageclass {
|
|
margin-top: 50rpx;
|
|
|
|
.contentclothingclassimage {
|
|
width: 224.35rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.contentclothingimageclassbox {
|
|
position: relative;
|
|
margin-top: 18rpx;
|
|
width: 100%;
|
|
background: #ABAD98;
|
|
border-radius: 18rpx;
|
|
border: 2rpx solid #404136;
|
|
padding: 28rpx 18rpx;
|
|
|
|
.contentclothingimageclassboxitem:nth-child(1) {
|
|
border: none;
|
|
}
|
|
|
|
.contentclothingimageclassboxitem {
|
|
position: relative;
|
|
border-left: 1rpx dashed #fff;
|
|
padding: 0 18rpx;
|
|
|
|
.contentclothingimageclassboxitemone {
|
|
font-size: 48rpx;
|
|
font-family: Roboto, Roboto;
|
|
font-weight: bold;
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
.contentclothingimageclassboxitemtow {
|
|
margin-left: 10rpx;
|
|
|
|
text:nth-child(1) {
|
|
font-size: 16rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
text:nth-child(2) {
|
|
font-size: 20rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #1A1A1A;
|
|
}
|
|
}
|
|
|
|
.contentclothingimageclassboxitemabsolute {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 18rpx;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
text-align: center;
|
|
font-size: 16rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
background: #7e8a83;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contentclothingimageclassbox::after {
|
|
z-index: 10;
|
|
position: absolute;
|
|
content: '';
|
|
display: inline-block;
|
|
left: -11px;
|
|
bottom: 50%;
|
|
transform: translateY(50%);
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 0 11px 11px 0;
|
|
background: #fff;
|
|
}
|
|
|
|
.contentclothingimageclassbox::before {
|
|
z-index: 10;
|
|
position: absolute;
|
|
content: '';
|
|
display: inline-block;
|
|
right: -11px;
|
|
bottom: 50%;
|
|
transform: translateY(50%);
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 11px 0 0 11px;
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
.contentclothingimage {
|
|
width: 130rpx;
|
|
height: 52rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.contentclothingbox {
|
|
.fourcontents {
|
|
.scrollfourcontents {
|
|
padding: 22rpx 0;
|
|
|
|
.scrollfourcontenttitems {
|
|
width: 246rpx;
|
|
height: 296rpx;
|
|
margin-left: 30rpx;
|
|
position: relative;
|
|
|
|
.scrolltowcontentitem_images {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 18rpx;
|
|
}
|
|
|
|
.scrolltowcontentitem_ones {
|
|
position: absolute;
|
|
padding: 8rpx 10rpx;
|
|
bottom: 12rpx;
|
|
left: 14rpx;
|
|
background: rgba(0, 0, 0, 0.32);
|
|
border-radius: 20rpx;
|
|
font-size: 18rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.contentclothingboxoone {
|
|
.fourcontentsoneitem {
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
|
|
.fourcontentsoneitemimage {
|
|
width: 278rpx;
|
|
border-radius: 18rpx;
|
|
height: 194rpx;
|
|
}
|
|
|
|
.fourcontentsoneitemtext {
|
|
flex: 1;
|
|
height: 194rpx;
|
|
margin-left: 10rpx;
|
|
|
|
.fourcontentsoneitemtextone {
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.fourcontentsoneitemtexttow {
|
|
margin-top: 20rpx;
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
color: #1A1A1A;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fourcontentsoneitemtow {
|
|
width: 100%;
|
|
|
|
.fourcontentsoneitemtowitem {
|
|
margin-top: 32rpx;
|
|
width: 330rpx;
|
|
|
|
.fourcontentsoneitemtowitemimage {
|
|
border-radius: 18rpx;
|
|
width: 330rpx;
|
|
height: 356rpx;
|
|
}
|
|
|
|
.fourcontentsoneitemtowitemone {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-top: 16rpx;
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
|
|
.fourcontentsoneitemtowitemtow {
|
|
margin-top: 10rpx;
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
color: #1A1A1A;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.contenttext {
|
|
padding: 0 32rpx;
|
|
|
|
.contenttexttext {
|
|
width: auto;
|
|
position: relative;
|
|
font-size: 32rpx;
|
|
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.contenttexttext::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -5rpx;
|
|
right: -6rpx;
|
|
z-index: 0;
|
|
display: inline-block;
|
|
width: 118rpx;
|
|
height: 10rpx;
|
|
background: var(--bgbuttonbackground);
|
|
border-radius: 8rpx;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |