433 lines
11 KiB
Vue
433 lines
11 KiB
Vue
<template>
|
|
<!-- 首页 -->
|
|
<view class="content bg_F2F2F2 w-100 h-100">
|
|
<view class='bg-linear-gradient is_top d-flex'>
|
|
<view class="top_info w-90 x_margin0auto d-flex j-sb a-center">
|
|
<view class="is_top_search x-bg-white h-100 flex-1" @click="search()">
|
|
<image src="../../static/home/search.png" mode="" class="search_img"></image>
|
|
<input type="text" value="" placeholder="搜索" class="search_input h-100" />
|
|
</view>
|
|
<image src="../../static/my/message.png" mode="" class="message"></image>
|
|
</view>
|
|
</view>
|
|
<view class="banner margin-shu20">
|
|
<swiper :indicator-dots="true" :autoplay="true" :interval="1000" :duration="100" :circular="true" indicator-color="rgba(255, 255, 255, 0.8)"
|
|
indicator-active-color="#fff" class="h-100">
|
|
<swiper-item v-for="(item,index) in banner" :key="index">
|
|
<!-- <image src="../../static/home/homebanner.png" mode="" class="h-100"></image> -->
|
|
<image class="h-100" :src="'https://'+item.app_pic_url" />
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="info x_margin0auto padding-sx30">
|
|
<!-- 专题 -->
|
|
<view class="x-bg-white is_box d-flex j-around a-center padding-sx30 margin-shu20 border_radius20">
|
|
<view class="" v-for="(item,index) of activity_icons" :key='index' @tap='productList(item)'>
|
|
<view class="text-center">
|
|
<image :src="'../../static/home/b'+ index +'.png'" mode="" class='menu_img'></image>
|
|
</view>
|
|
<view>{{item.activity_name}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 广告 文字滚动 -->
|
|
<view class="adv margin-shu20 x-bg-white d-flex a-center padding-zy30 border_radius20">
|
|
<img class="mr-2" src="../../static/home/laba.png" alt="" style='height:24upx; width:27upx;'>
|
|
<!-- v-for="(item,index) of activity" :key='index' -->
|
|
<swiper autoplay circular :interval="3000" class="tui-swiper">
|
|
<swiper-item v-for="(item,index) of activity" :key='index' class="tui-swiper-item">
|
|
<view class="tui-news-item text-danger" @tap='detail(item.id)'>{{item.description}}</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="bannerNew margin-shu20">
|
|
<image src="../../static/home/bannernew.png" mode="" class="banner_img h-100 w-100"></image>
|
|
</view>
|
|
<!-- <view v-for="(item,index) of activity_self_true" :key="index">
|
|
<view class="newren margin-shu20">{{item.activity_name}}</view>
|
|
</view> -->
|
|
|
|
<!-- 测试 -->
|
|
<!-- <view v-for="(item,index) of activity_self_true">
|
|
|
|
<view style="border: 1rpx solid red;" v-for="(item2,index2) in item.goods_list.data" :key="index2">
|
|
<view>{{item2.name}}</view>
|
|
</view>
|
|
|
|
</view> -->
|
|
|
|
<!-- end -->
|
|
|
|
<view class=" margin-shu20" v-for="(item,index) of activity_self_true" :key="index">
|
|
<view class="newren margin-shu20">{{item.activity_name}}</view>
|
|
<view class="d-flex new_goods">
|
|
<view class="new_goods_info x-bg-white border_radius20" v-for="(item2,index2) in activity_goods_list" :key="index2"
|
|
@click="openDetail(item2)">
|
|
<view class="text-center">
|
|
<image :src="'https://'+item2.pc_thumb" class="newren_img"></image>
|
|
</view>
|
|
<view class="font-weight text-center">{{item2.name}}</view>
|
|
<view class="x_text_hui text-center font-20">{{item2.spec_desc}}</view>
|
|
<view class="x-text-159 text-center">¥ {{item2.cost_price}}</view>
|
|
<view class="x_text_hui text-center" style="text-decoration: line-through;">¥ {{item2.price}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="d-flex j-sb threetip">
|
|
<image src="../../static/shoppingCart/fenlan1.jpg" mode="" class='threetip_img'></image>
|
|
<img src="../../static/shoppingCart/fenlan2.jpg" alt="" class='threetip_img'>
|
|
<img src="../../static/shoppingCart/fenlan3.jpg" alt="" class='threetip_img'>
|
|
</view>
|
|
|
|
|
|
<!-- 热卖 -->
|
|
<view class="last_goods" style="border:1px solid red;">
|
|
<!-- <view v-for='(item,index) of activity_self_false' :key='index'>
|
|
<view class="d-flex j-sb " style="border:1px solid red;">
|
|
<view>{{item.activity_name}}</view>
|
|
</view>
|
|
<view class="d-flex j-sb margin-shu20 the_lastGoods">
|
|
<view class="the_lastGoods_item padding-30 margin-shu20 x-bg-white" v-for="(item,index) of 3" :key="index">
|
|
<img :src="'https://'+item.pc_thumb" alt="" class="last_img">
|
|
<view>uuuuuuu</view>
|
|
<view>uuuuuuu</view>
|
|
<view>uuuuuuu</view>
|
|
<view class="d-flex j-sb">
|
|
<view>登陆后看价格</view>
|
|
<image src="../../static/font/cart_icon.png" mode="" style="height:40upx; width:40upx;"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="d-flex j-sb">
|
|
<view class=" text-center d-flex j-around margin-shu20" style="border:1px solid green;" v-for="(item,index) of activity_self_false" :key='index'>
|
|
<view class="d-flex font-weight" :class='{three_active:index==three_index}' @click="to_chooseThree(index)">{{item.activity_name}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="d-flex j-sb margin-shu20 the_lastGoods">
|
|
<view class="the_lastGoods_item padding-30 margin-shu20 x-bg-white" v-for="(item,index) of activity_self_false[this.three_index]" :key="index">
|
|
<!-- <img :src="'https://'+item.pc_thumb" alt="" class="last_img"> -->
|
|
<view>uuuuuuu</view>
|
|
<view>uuuuuuu</view>
|
|
<view>uuuuuuu</view>
|
|
<view class="d-flex j-sb">
|
|
<view>登陆后看价格</view>
|
|
<image src="../../static/font/cart_icon.png" mode="" style="height:40upx; width:40upx;"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- <view class="w-100 d-flex goods_same" style="border:1px solid red;">
|
|
<view class="mr-2 tab_goods" v-for="(item,index) of goods_list" :key="index">
|
|
<image
|
|
style="width: 263upx;height: 150upx;"
|
|
class="img_list ml-3 mt-2 " :src="'https://'+item.pc_thumb" mode="widthFix"></image>
|
|
<view class="p-2 pt-1">
|
|
<view class="font-md">{{item.name}}</view>
|
|
<text class="d-block font text-light-muted">{{item.manufacturer_name}}</text>
|
|
<text class="d-block font text-light-muted">¥ {{item.spec_desc}}</text>
|
|
<view class="d-flex my-1">
|
|
<view class="x-text-159 text-center">¥ {{item.cost_price}}</view>
|
|
<view class="x_text_hui text-center" style="text-decoration: line-through;">{{item.price}}</view>
|
|
<image class="ml-auto" src="../../static/font/cart_icon.png" style="width: 40upx;height: 40upx;" @tap="addCart()"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import X_index from '../../utils/models/index.js';
|
|
import uniNoticeBar from '../../components/components/uni-notice-bar/uni-notice-bar.vue'
|
|
|
|
|
|
|
|
|
|
// import {Config} from '@/utils/config'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
banner: [], //轮播图
|
|
activity: [], //消息
|
|
activity_icons: [],
|
|
activity_self_true: [],
|
|
activity_goods_list: '',
|
|
activity_self_false: [],
|
|
activity_self_false_index: 0,
|
|
three_index: 0,
|
|
goods_list: [], //商品列表
|
|
|
|
limit: 6,
|
|
page: 1,
|
|
}
|
|
},
|
|
components: {
|
|
uniNoticeBar,
|
|
|
|
},
|
|
onLoad() {
|
|
|
|
|
|
},
|
|
onShow() {
|
|
this.getData();
|
|
|
|
},
|
|
created() {
|
|
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
// tab转换商品
|
|
async to_chooseThree(index) {
|
|
|
|
this.three_index = index
|
|
let res = await X_index.x_activity(this.activity_self_false[this.three_index].id, this.limit, this.page);
|
|
this.handleError(res, res => {
|
|
this.goods_list = res.data.goods_list.data
|
|
})
|
|
|
|
},
|
|
|
|
// 跳转搜索页
|
|
search() {
|
|
uni.navigateTo({
|
|
url: 'search'
|
|
})
|
|
},
|
|
// 跳转详情页
|
|
openDetail(item) {
|
|
|
|
uni.navigateTo({
|
|
url: '../shoppingCart/goodsDetail?sku_id=' + item.gba_id
|
|
})
|
|
},
|
|
// 滚动消息
|
|
detail(e) {
|
|
|
|
|
|
},
|
|
// 商品列表
|
|
productList(e) {
|
|
|
|
uni.navigateTo({
|
|
url: 'search-list?activity_id=' + e.id
|
|
})
|
|
},
|
|
// 加入购物车
|
|
addCart() {
|
|
|
|
},
|
|
async getData() {
|
|
let res = await X_index.x_index();
|
|
this.handleError(res, res => {
|
|
|
|
|
|
|
|
var banner = res.data.banner
|
|
this.banner = banner
|
|
var activity = res.data.activity_icons
|
|
this.activity_icons = activity
|
|
var activity_self = res.data.activity_self_true
|
|
this.activity_self_true = activity_self
|
|
this.activity_goods_list = activity_self[0].goods_list.data
|
|
var articleInfo = res.data.article
|
|
this.activity = articleInfo
|
|
var activity_self_false = res.data.activity_self_false
|
|
this.activity_self_false = activity_self_false
|
|
|
|
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
overflow-y: auto;
|
|
|
|
.the_lastGoods {
|
|
// border: 1px solid red;
|
|
flex-wrap: wrap;
|
|
|
|
.the_lastGoods_item {
|
|
border-radius: 20upx;
|
|
overflow: hidden;
|
|
width: 49%;
|
|
// border: 1px solid green;
|
|
|
|
.last_img {
|
|
height: 150upx;
|
|
width: 262upx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.tui-swiper {
|
|
font-size: 28upx;
|
|
height: 50upx;
|
|
flex: 1;
|
|
}
|
|
|
|
.tui-swiper-item {
|
|
display: flex;
|
|
align-items: center
|
|
}
|
|
|
|
.tui-news-item {
|
|
line-height: 28upx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.img_list {
|
|
width: 263upx;
|
|
height: 150upx;
|
|
}
|
|
|
|
.tab_goods {
|
|
width: 340upx;
|
|
height: 420upx;
|
|
margin: 4upx;
|
|
border-radius: 20upx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
|
|
.is_top {
|
|
height: 299.4upx;
|
|
padding-top: 66upx;
|
|
overflow: hidden;
|
|
|
|
|
|
.top_info {
|
|
|
|
height: 56upx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
|
|
|
|
.is_top_search {
|
|
overflow: hidden;
|
|
border-radius: 20upx;
|
|
|
|
.search_img {
|
|
position: absolute;
|
|
left: 40upx;
|
|
top: 16upx;
|
|
height: 27upx;
|
|
width: 27upx;
|
|
}
|
|
|
|
.search_input {
|
|
margin-left: 70upx;
|
|
width: 70%;
|
|
|
|
}
|
|
}
|
|
|
|
.message {
|
|
margin-left: 20upx;
|
|
height: 43upx;
|
|
width: 50upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.banner {
|
|
height: 387upx;
|
|
width: 696upx;
|
|
margin: -140upx auto 0;
|
|
|
|
.banner_img {
|
|
height: 337upx;
|
|
width: 696upx;
|
|
}
|
|
}
|
|
|
|
|
|
.info {
|
|
width: 696upx;
|
|
|
|
.is_box {
|
|
.menu_img {
|
|
height: 89upx;
|
|
width: 88upx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.dong_txt {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bannerNew {
|
|
height: 235upx;
|
|
width: 696upx;
|
|
}
|
|
|
|
.newren {
|
|
font-size: 32upx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.new_goods {
|
|
|
|
overflow-x: auto;
|
|
|
|
.new_goods_info {
|
|
padding: 40upx;
|
|
width: 234upx;
|
|
margin-right: 30upx;
|
|
|
|
.newren_img {
|
|
height: 94upx;
|
|
width: 175upx;
|
|
|
|
}
|
|
}
|
|
|
|
.last_goodsItem {
|
|
padding: 40upx;
|
|
width: 350upx;
|
|
margin-right: 30upx;
|
|
|
|
.newren_img {
|
|
height: 94upx;
|
|
width: 175upx;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.threetip_img {
|
|
height: 158upx;
|
|
width: 224upx;
|
|
}
|
|
|
|
.three_active {
|
|
color: #018EEA;
|
|
border-bottom: 4upx solid #018EEA;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|