apk 一文带你使用Vue完成移动端项目( 四 ) _Vue

<ul>
<li
v-for="item in otherFurnishing"
:key="item.id"
@click="detailshop(item.id)"
>
<img :src=https://www.isolves.com/it/cxkf/bk/2021-06-16/"item.shop_img" />
<p>
{{ item.shop_title }}
</p>
</li>
</ul>
</div>
</van-tab>
</van-tabs>
</div>
</div>
</template>
<script>
export default {
data () {
return {
value: '',
actives: 0,
time: '',
// 轮播图图片
images: [
'http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/165251/27/8980/194778/60409b0aE6d2ff3df/ca0c808809dbbfa8.jpg!q70.jpg.dpg',
'http://imgcps.jd.com/ling4/10027168852797/54mb5LuU6KOk5Zyw5pa554m56Imy/6ZKc5oOg55av5oqi/p-5c17126882acdd181dd53cf1/018cd345/cr_1125x445_0_171/s1125x690/q70.jpg',
'http://m.360buyimg.com/mobilecms/s700x280_jfs/t1/163716/23/16055/97374/6066f2cfEe720735f/3f4d05450bc1f7fc.jpg!q70.jpg.dpg'
],
// 宫格
gird: [
{ id: 1, icon: 'iconfont icon-shouji', name: '手机' },
{ id: 2, icon: 'iconfont icon-bingxiang', name: '冰箱' },
{ id: 3, icon: 'iconfont icon-xiyiji', name: '洗衣机' },
{ id: 4, icon: 'iconfont icon-dianshi', name: '电视' },
{ id: 5, icon: 'iconfont icon-youyanjiB', name: '油烟机' },
{ id: 6, icon: 'iconfont icon-reshuiqi', name: '热水器' },
{ id: 7, icon: 'iconfont icon-jiaju', name: '家居' },
{ id: 8, icon: 'iconfont icon-dianfanbao', name: '电饭煲' },
{ id: 9, icon: 'iconfont icon-deng', name: '台灯' },
{ id: 10, icon: 'iconfont
icon-chufangyongpin-ranqizao', name: '燃气灶' }
],
// 秒杀商品
supplyShop: [],
// 其他商品
otherShop: [],
// 手机页
phoneimg: [],
// 其他手机商品
otherPhone: [],
// 运动页
motionimg: [],
// 其他运动商品
othermotion: [],
// 美妆页
Makeupimg: [],
// 其他美妆商品
otherMakeup: [],
// 男鞋页
Menshopimg: [],
// 其他男鞋商品
otherMenshop: [],
// 女鞋页
WoMenshopimg: [],
// 其他女鞋商品
otherWoMenshop: [],
// 家居业
FurnishingImg: [],
// 其他家居商品
otherFurnishing: []
}
},
created () {
this.CountDown()
this.loadershop()
},
methods: {
// 搜索商品
search (value) {
this.$router.push({ name: 'SchCont', params: { value } })
},
// 倒计时
CountDown () {
var myDate = new Date()
var hour = 24 - myDate.getHours()
this.time = hour * 60 * 60 * 1000
},
// 获取商品信息
async loadershop () {
// 获取所有商品赋值给优选页模块
const Allshop = await this.$http.get('list?id=100')
this.otherShop = Allshop.data.data
// 获取手机商品赋值给手机页模块
const phone = await this.$http.get('details?id=2')
this.otherPhone = phone.data.data
// 获取运动商品赋值给运动页模块
const play = await this.$http.get('details?id=3')
this.othermotion = play.data.data
// 获取美妆商品赋值给美妆页模块
const Makeup = await this.$http.get('details?id=4')
this.otherMakeup = Makeup.data.data
// 获取男鞋商品赋值给男鞋页模块
const Menshop = await this.$http.get('details?id=5')
this.otherMenshop = Menshop.data.data
// 获取女鞋商品赋值给女鞋页模块
const WoMenshop = await this.$http.get('details?id=6')
this.otherWoMenshop = WoMenshop.data.data
// 获取家居家具商品赋值给家居家具页模块
const Furnishing = await this.$http.get('details?id=7')
this.otherFurnishing = Furnishing.data.data
// 获取秒杀商品赋值给秒杀模块
const miaosha = await this.$http.get('list_m')
this.supplyShop = miaosha.data.data
},
// 跳转详情页
detailshop (id) {
this.$router.push({ name: 'Details', params: { id: id, urls: '/home' } })
},
// 跳转优选宫格详情
xxx (id) {
this.$router.push({ name: 'SchCont', params: { value: id } })
}
}
}
</script>
<style lang="less" scoped>
.home {
width: 100%;
height: 100%;
.header {
.van-tabs {
margin-top: -5px;
}
}
}
.van-tabbar {
.van-tabbar-item {
display: flex;

apk 一文带你使用Vue完成移动端项目( 四 )

推荐阅读

公司|扭转颓势美股强劲反弹——道达早评

「青岛日报」青岛港：加速迈向世界第一流海洋港

「谷翠说娱乐」学生时代她用智能机郑爽用翻盖，娱乐圈女星景甜的神秘背景

青年|神秘商店还有1天下架，这款皮肤没买玩家会后悔，特效远超白龙吟

热刺|球迷狂欢！热刺夏窗补强完成50%未完待续，刺迷期待3个惊喜

爱笑的康小喵|幽默笑话：我摸起来也不像

「文化艺术潮流时尚」这双皮鞋居然是 Nike！，藤原浩又晒鞋了

恐龙|《侏罗纪世界3》曝光主线，新恐龙区被发现，还有别人在复活恐龙

华菱钢铁|华菱钢铁：子公司拟投资4.5亿元实施冷轧镀锌机组技术改造工程项目

出国旅行50句旅行常用的英语口语出国旅行！

作为人类文化主要源泉的海洋，在文学和电影中有哪些呈现？

高山雪菊的四大功效和作用禁忌

怀孕一个月不想要孩子该怎么办

睡眠质量不好怎样改善睡眠质量该怎么改善

八佰|破10亿了！同样长发演军人，为何魏晨靠《八佰》翻红，鹿晗却遭群嘲

姐姐|原创15年后，逆风翻盘的张含韵，终于敢直视镜头说：你们闺女能耐了

用发膜还用护发素吗发膜护发素能不能一起使用

龟头增生性红斑

绿萝放在室内就能活，错，这些地方空着也不能放

朋友给我的手机开热点用了200块话费，我应该赔吗