503 lines
14 KiB
Vue
503 lines
14 KiB
Vue
<template>
|
|
<!-- 首页 -->
|
|
<view class="content bg_F2F2F2 w-100 h-100 home">
|
|
<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 margin-zy20">
|
|
<image src="../../static/home/search.png" mode="" class="search_img"></image>
|
|
<input type="text" value="" placeholder="请输入药名/厂家" class="search_input h-100" @input="changeInput($event)" v-model="keyword"
|
|
@click="search" />
|
|
<!-- <input type="text" value="" placeholder="搜索" class="search_input h-100" @input="changeInput($event)" v-model="keyword" @focus="to_search()" /> -->
|
|
</view>
|
|
<image src="../../static/my/message.png" mode="" class="message" @click="to_mes()"></image>
|
|
</view>
|
|
</view>
|
|
<!-- <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" @click="toMes()"></image>
|
|
</view>
|
|
</view> -->
|
|
<view class="is_content padding-zy30">
|
|
<view class="banner margin-shu20">
|
|
|
|
<swiper :speed='5000' :autoplay="true" :indicator-dots="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 class="h-100" :src="'https://'+item.app_pic_url" @click="dump(item.app_controller_name)" />
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="info x_margin0auto">
|
|
<!-- 专题 -->
|
|
<view class="x-bg-white is_box d-flex j-around a-center padding-sx30 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="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;'> -->
|
|
<image class="mr-2" src="../../static/home/laba.png" alt="" style='height:24upx; width:27upx;'></image>
|
|
<!-- 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" @tap='detail(item)'>{{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> -->
|
|
<image src="../../static/home/renzheng.jpg" mode="" class="banner_img h-100 w-100" @tap='to_renzheng()'></image>
|
|
</view>
|
|
<!-- 新人优惠 -->
|
|
<view class=" margin-shu20" v-for="(item,index) of activity_self_true" :key="index" v-if='activity_self_true'>
|
|
<view class="newren margin-shu20 d-flex a-center">
|
|
<image src="../../static/home/shu.png" mode="" style="height:30upx; width:6upx;"></image>
|
|
<view class="" style="color: #FB6246; margin:0 15upx 0 15upx;">{{item.activity_name}}</view>
|
|
</view>
|
|
<view class=" new_goods">
|
|
<view class="new_goods_info x-bg-white border_radius20 a-center text-center j-center" v-for="(item2,index2) in item.goods_list.data"
|
|
:key="index2" @click="openDetail(item2)">
|
|
<!-- <view class="text-center w-100 margin-shu20" style="height:94upx;">
|
|
<image :src="'https://'+item2.pc_thumb" class="newren_img h-100 w-100"></image>
|
|
</view> -->
|
|
<view class="text-center w-100 margin-shu20" style="height:174upx; background-repeat: no-repeat;" :style="{backgroundImage: 'url(' + 'https://'+item2.pc_thumb + ')', backgroundSize:'contain',backgroundPosition:'center'}">
|
|
|
|
</view>
|
|
<view class=" text-center some_txt font-weight d-flex a-center textOVerFlow w-100">
|
|
<image src="../../static/shoppingCart/zheng.png" style="height:30upx; width:30upx; margin-right:15upx;" mode="" v-if='item2.retail_flag==1'></image>
|
|
<image src="../../static/shoppingCart/ling.png" style="height:30upx; width:30upx; margin-right:15upx;" mode="" v-if='item2.retail_flag==0'></image>
|
|
<image src="../../static/shoppingCart/xian.png" mode="" style="height:30upx; width:30upx;" v-if='item2.is_limit==1'></image>
|
|
<view class="textOVerFlow" style="max-width: 72%;">{{item2.goods_name}}</view>
|
|
</view>
|
|
<view class="text-center some_txt textOVerFlow">{{item2.manufacturer_name}}</view>
|
|
<view class="x_text_hui text-center font-20 d-flex j-sb">
|
|
{{item2.spec_desc}}
|
|
|
|
</view>
|
|
<view class="x-text-159 text-center font-weight font_28 d-flex j-sb">
|
|
￥{{item2.price}}
|
|
</view>
|
|
</view>
|
|
<view style="clear: both;"></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="x_list">
|
|
<view class="list_menu d-flex j-around margin-shu20">
|
|
<view class="newren" v-for="(item,index) of activity_self_false" :key='index' @click="to_chooseThree(index)" :class='{three_active:index==three_index}'>{{item.activity_name}}</view>
|
|
</view>
|
|
<view class="list_box">
|
|
<view class="d-flex j-sb the_lastGoods">
|
|
<view class="the_lastGoods_item padding-30 x-bg-white" style="margin-bottom: 15upx;" v-for="(item,index) of goods_list"
|
|
:key="index" @click="openDetail(item)">
|
|
<!-- <view class="last_img">
|
|
<img :src="'https://'+item.pc_thumb" alt="" class='h-100 w-100'>
|
|
</view> -->
|
|
<view class="last_img" :style="{backgroundImage: 'url(' + 'https://'+item.pc_thumb + ')', backgroundSize:'contain',backgroundPosition:'center'}">
|
|
|
|
</view>
|
|
|
|
<view class="font-weight font_26 dian d-flex a-center">
|
|
<image src="../../static/shoppingCart/zheng.png" style="height:30upx; width:30upx; margin-right:15upx;" mode="" v-if='item.retail_flag==1'></image>
|
|
<image src="../../static/shoppingCart/ling.png" style="height:30upx; width:30upx; margin-right:15upx;" mode="" v-if='item.retail_flag==0'></image>
|
|
<image src="../../static/shoppingCart/xian.png" mode="" style="height:30upx; width:30upx;margin-right:15upx;" v-if='item.is_limit==1'></image>
|
|
{{item.goods_name}}
|
|
</view>
|
|
<view class="x_text_hui zhuyi_title dian">{{item.manufacturer_name}}</view>
|
|
<view class="x_text_hui text-center font-20 d-flex j-sb">
|
|
{{item.spec_desc}}
|
|
|
|
</view>
|
|
<view class="x-text-159 text-center font-weight font_28 d-flex j-sb">
|
|
￥{{item.price}}
|
|
|
|
</view>
|
|
<!-- <view class="dian">{{item.spec_desc}}</view>
|
|
<view class="d-flex j-sb x_price">
|
|
<view class="x-text-159 font-weight font_28">{{item.price}}</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<uni-popup ref="showimage" type="center" :mask-click="true">
|
|
<view class="uni-image advertisement">
|
|
<image class="advertisement__image" src="https://img14.360buyimg.com/mcoss/jfs/t1/116140/21/8057/91328/5ec77230E4e8381be/60b7c090733c5ebb.gif" mode="scaleToFill" />
|
|
<view class="uni-image-close" @click="cancelAdvertisement()">
|
|
<uni-icons type="clear" color="#fff" size="30" />
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
|
|
<!-- <TabBar page_title=''></TabBar> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import X_index from '../../utils/models/index.js';
|
|
import uniNoticeBar from '../../components/components/uni-notice-bar/uni-notice-bar.vue'
|
|
import TabBar from '../../common/tabBar/tabBar.vue'
|
|
import uniPopup from '../../components/uni-popup/uni-popup.vue'
|
|
// import {Config} from '@/utils/config'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
keyword: '',
|
|
the_show: true,
|
|
banner: [], //轮播图
|
|
activity: [], //消息
|
|
activity_icons: [],
|
|
activity_self_true: [],
|
|
activity_goods_list: '',
|
|
activity_self_false: [],
|
|
activity_self_false_index: 0,
|
|
three_index: 0,
|
|
goods_list: [], //商品列表
|
|
the_Authentication: '', // 缓存里面的token 有值代表是登录状态，没值代表用户没有登陆
|
|
limit: 6,
|
|
page: 1,
|
|
loading: false,
|
|
}
|
|
},
|
|
components: {
|
|
uniNoticeBar,
|
|
TabBar,
|
|
uniPopup
|
|
},
|
|
onLoad(option) {
|
|
|
|
},
|
|
onShow() {
|
|
|
|
this.loading = false
|
|
this.getData()
|
|
},
|
|
created() {
|
|
|
|
},
|
|
mounted() {
|
|
this.$refs.showimage.open()
|
|
},
|
|
methods: {
|
|
// 关闭开屏弹窗
|
|
cancelAdvertisement() {
|
|
this.$refs.showimage.close()
|
|
},
|
|
// 去认证
|
|
to_renzheng(){
|
|
uni.navigateTo({
|
|
url: '../auth/is_Authentication'
|
|
})
|
|
},
|
|
//to_search
|
|
to_search() {
|
|
|
|
uni.navigateTo({
|
|
url: './search'
|
|
})
|
|
},
|
|
// 进入消息页面
|
|
dump(url) {
|
|
if (url) {
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
}
|
|
},
|
|
// 进入消息页面
|
|
|
|
to_mes() {
|
|
uni.navigateTo({
|
|
url: '../my/is_message'
|
|
})
|
|
},
|
|
// tab转换商品
|
|
async to_chooseThree(index) {
|
|
|
|
this.activity_self_false_index = index
|
|
this.the_show = false
|
|
this.three_index = index;
|
|
let res = await X_index.x_activity(this.activity_self_false[this.three_index].id, this.limit, this.page, this.loading);
|
|
this.loading = true
|
|
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.sku_id +'&the_index='+this.three_index
|
|
})
|
|
},
|
|
// 跳转详情页
|
|
lastOpenDetail(item) {
|
|
uni.navigateTo({
|
|
url: '../shoppingCart/goodsDetail?sku_id=' + item.gba_id
|
|
})
|
|
},
|
|
// 滚动消息
|
|
detail(e) {
|
|
uni.navigateTo({
|
|
url: `MessageDetails?mess_id=${JSON.stringify(e)}`
|
|
})
|
|
},
|
|
// 商品列表
|
|
productList(item) {
|
|
|
|
uni.navigateTo({
|
|
url: 'search-list?activity_id=' + item.id
|
|
})
|
|
},
|
|
async getData() {
|
|
uni.getStorage({
|
|
key: 'isAuthentication',
|
|
success: function(res) {
|
|
if (res.data == '') {
|
|
|
|
} else {
|
|
|
|
this.the_Authentication = res.data
|
|
}
|
|
}
|
|
});
|
|
let res = await X_index.x_index();
|
|
this.handleError(res, res => {
|
|
if (res.data.banner) {
|
|
this.banner = res.data.banner
|
|
}
|
|
this.activity_icons = res.data.activity_icons
|
|
if (res.data.activity_self_true) {
|
|
this.activity_self_true = res.data.activity_self_true
|
|
}
|
|
if (res.data.article) {
|
|
this.activity = res.data.article
|
|
}
|
|
if (res.data.activity_self_false) {
|
|
this.activity_self_false = res.data.activity_self_false
|
|
}
|
|
|
|
if (this.activity_self_false.length > 0) {
|
|
this.to_chooseThree(0)
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
overflow-y: auto;
|
|
|
|
|
|
.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;
|
|
color: #018EEA;
|
|
}
|
|
|
|
.img_list {
|
|
width: 263upx;
|
|
height: 150upx;
|
|
}
|
|
|
|
.tab_goods {
|
|
width: 340upx;
|
|
height: 420upx;
|
|
margin: 4upx;
|
|
border-radius: 20upx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
|
|
.is_top {
|
|
height: 200.4upx;
|
|
padding-top: 90upx;
|
|
overflow: hidden;
|
|
align-items: center;
|
|
.top_info {
|
|
height: 56upx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.is_top_search {
|
|
overflow: hidden;
|
|
border-radius: 50upx;
|
|
|
|
.search_img {
|
|
position: absolute;
|
|
left: 60upx;
|
|
top: 16upx;
|
|
height: 27upx;
|
|
width: 27upx;
|
|
}
|
|
|
|
.search_input {
|
|
margin-left: 55upx;
|
|
width: 70%;
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.message {
|
|
margin-left: 20upx;
|
|
height: 43upx;
|
|
width: 50upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.banner {
|
|
height: 387upx;
|
|
// width: 696upx;
|
|
margin: 10upx auto 30upx;
|
|
|
|
.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;
|
|
|
|
|
|
margin: 30upx auto;
|
|
}
|
|
|
|
.newren {
|
|
font-size: 32upx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.new_goods {
|
|
overflow-x: auto;
|
|
display: flex;
|
|
|
|
|
|
.new_goods_info {
|
|
flex: 0 0 280upx;
|
|
border-right: solid 1px #e5e5e5;
|
|
color: #5d2a05;
|
|
margin-right: 15upx;
|
|
padding: 20upx;
|
|
|
|
.some_txt {
|
|
width: 280upx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.newren_img {
|
|
// height: 94upx;
|
|
// width: 175upx;
|
|
// max-height: 112upx;
|
|
// max-width: 190upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.threetip_img {
|
|
height: 158upx;
|
|
width: 224upx;
|
|
}
|
|
|
|
.three_active {
|
|
color: #018EEA;
|
|
border-bottom: 4upx solid #018EEA;
|
|
}
|
|
|
|
.the_lastGoods {
|
|
|
|
flex-wrap: wrap;
|
|
|
|
.the_lastGoods_item {
|
|
position: relative;
|
|
|
|
border-radius: 20upx;
|
|
width: 49%;
|
|
|
|
.last_img {
|
|
// width: 263upx;
|
|
width: 100%;
|
|
height: 250upx;
|
|
margin-bottom: 20upx;
|
|
background-repeat: no-repeat;
|
|
|
|
}
|
|
|
|
.x_price {
|
|
position: absolute;
|
|
bottom: 25upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.is_content {
|
|
height: calc(100% - 200.4upx);
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|