image.png
cart
<template>
<div class="cart">
<div class="cart-list">
<div
class="cart-list-item"
v-for="item in $store.state.cart.cart"
:key="item.id"
>
<div class="cart-l center">
<van-switch v-model="item.isShow" />
</div>
<van-card
class="cart-c center"
:price="item.price+'.00'"
:title="item.title"
:thumb="item.src"
/>
<div class="cart-r center">
<van-stepper
v-model="item.count"
theme="round"
/>
</div>
</div>
</div>
<van-submit-bar
:price="getAllPrice*100"
button-text="提交订单"
/>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
}
},
computed: {
// ...mapState({
// cart: 'cart/cart'
// }),
...mapGetters({
getAllPrice: 'cart/getAllPrice'
})
}
}
</script>
<style lang="scss" scoped>
.cart {
padding: 10px;
.cart-list {
.cart-list-item {
display: flex;
align-items: center;
border: 1px solid #eee;
padding: 6px;
box-sizing: border-box;
margin-bottom: 10px;
.van-card {
background-color: #fff;
}
.center {
display: flex;
justify-content: center;
}
.cart-l {
flex: 1;
}
.cart-c {
flex: 2;
.van-card__price-integer {
font-size: 12px;
}
}
.cart-r {
flex: 2;
}
}
}
}
</style>
friends
<template>
<div class="friends">
this is friends page
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
</style>
goodsinfo
<template>
<div class="goods-info">
<Swiper
class="my-panel"
:lunbolist="lunbolist"
></Swiper>
<van-panel
class="my-panel"
:title="goodsinfo.title"
>
<div class="content">
<p class="price">
<span class="new">现价：￥{{goodsinfo.sell_price}}</span>
<span class="old">原价：￥{{goodsinfo.market_price}}</span>
</p>
<p class="number">
<span>购买数量：</span>
<van-stepper v-model="value" />
</p>
<p class="btn-group">
<van-button
type="primary"
size="small"
class="pay"
>立即购买</van-button>
<van-button
type="danger"
size="small"
@click="addCart"
>加入购物车</van-button>
</p>
</div>
</van-panel>
<van-panel
class="my-panel"
title="商品信息"
>
<div class="content">
<p>商品货号:{{goodsinfo.goods_no}}</p>
<p>库存情况:{{goodsinfo.stock_quantity}}件</p>
<p>上架时间:{{goodsinfo.add_time | datefmt}}</p>
</div>
</van-panel>
<Comment :id="id"></Comment>
</div>
</template>
<script>
import { getThumImages } from '@/api/photos'
import { getGoodsInfo } from '@/api/goods'
import Swiper from '@/components/Swiper'
import Comment from '@/components/Comment'
export default {
props: ['id'],
data() {
return {
lunbolist: [],
goodsinfo: {},
value: 1
}
},
methods: {
async getThumImages() {
const res = await getThumImages(this.id)
this.lunbolist = res.data.message
},
async getGoodsInfo() {
const res = await getGoodsInfo(this.id)
this.goodsinfo = res.data.message
},
addCart() {
const goodsInfo = {
id: this.id,
title: this.goodsinfo.title,
src: this.lunbolist[0].src,
isShow: true,
price: this.goodsinfo.sell_price,
count: this.value,
timer: null
}
this.$store.dispatch('cart/addCart', goodsInfo)
}
},
created() {
this.getThumImages()
this.getGoodsInfo()
},
mounted() {
},
components: {
Swiper,
Comment
}
}
</script>
<style lang="scss" >
.goods-info {
padding: 10px;
.my-swipe {
height: 150px;
text-align: center;
img {
width: 50%;
height: 100%;
}
}
.my-panel {
border: 1px solid #ddd;
margin-bottom: 10px;
.content {
margin-left: 15px;
font-size: 12px;
.price {
display: flex;
.new {
margin-right: 20px;
color: red;
}
.old {
text-decoration: line-through;
}
}
.number {
display: flex;
align-items: center;
}
.btn-group {
.pay {
margin-right: 20px;
}
}
}
.van-cell__title {
font-size: 14px;
font-weight: 600;
}
}
}
</style>
goodslist
<template>
<div>
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
class="goods-list"
offset="0"
>
<div
class="goods-list-item"
v-for="(good,index) in goods"
:key="index"
@click="goDetail('/home/goodsinfo',good.id)"
>
<div class="img-box">
<img v-lazy="good.img_url">
</div>
<h2 class="title">
{{good.title}}
</h2>
<div class="info">
<p class="price">
<span
class="new"
v-price="'现价:￥'"
>{{good.sell_price}}</span>
<span
class="old"
v-price="'原价:￥'"
>{{good.market_price}}</span>
</p>
<p class="sell">
<span>热卖中</span>
<span>剩余{{good.stock_quantity}}件</span>
</p>
</div>
</div>
</van-list>
</div>
</template>
<script>
import { getGoods } from '@/api/goods'
// import mixins from '@/mixins'
export default {
// mixins: [mixins],
data() {
return {
page: 0,
limit: 6,
goods: [],
loading: false,
finished: false,
count: 0
}
},
methods: {
async getGoods() {
++this.page
const res = await getGoods({ page: this.page, limit: this.limit })
this.goods = this.goods.concat(res.data.message)
this.count = res.data.count
},
async onLoad() {
// 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(async () => {
await this.getGoods()
// 加载状态结束
this.loading = false
console.log(this.count)
// 数据全部加载完成
if (this.goods.length >= this.count) {
this.finished = true
}
}, 500)
}
}
}
</script>
<style lang="scss">
.goods-list {
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.goods-list-item {
width: 48%;
border: 1px solid #ddd;
padding: 10px 10px 0 10px;
box-sizing: border-box;
margin-bottom: 10px;
.img-box {
width: 149px;
height: 149px;
img {
width: 100%;
}
}
.title {
font-size: 16px;
}
.info {
font-size: 12px;
.price {
display: flex;
justify-content: space-between;
.new {
color: red;
}
.old {
text-decoration: line-through;
}
}
.sell {
display: flex;
justify-content: space-between;
}
}
}
.van-list__error-text,
.van-list__finished-text,
.van-list__loading {
width: 100%;
}
}
</style>
newsinfo
<template>
<div class="news-info">
<van-panel
:title="newsinfo.zhaiyao"
:status="'阅读'+newsinfo.click+'次'"
>
<div class="content">{{newsinfo.content}}</div>
</van-panel>
<Comment :id="id"></Comment>
</div>
</template>
<script>
import { getNewsInfo } from '@/api/news'
import Comment from '@/components/Comment'
export default {
props: ['id'],
data() {
return {
newsinfo: {}
}
},
methods: {
async getNewsInfo() {
const res = await getNewsInfo(this.id)
this.newsinfo = res.data.message
}
},
created() {
this.getNewsInfo()
},
components: {
Comment
}
}
</script>
<style lang="scss">
.news-info {
padding: 0 10px;
.van-cell__title {
font-size: 16px;
font-weight: 600;
flex: 2;
}
.content {
text-indent: 2em;
}
}
</style>
newslist
<template>
<div class="news-list">
<van-card
v-for="item in newslist"
:key="item.id"
:title="item.title"
:thumb="item.img_url"
:thumb-link="'#/home/newsinfo/'+item.id"
>
<template #bottom>
<div class="btn-group">
<span class="add-time">{{item.add_time}}</span>
<span>点击{{item.click}}次</span>
</div>
</template>
</van-card>
</div>
</template>
<script>
// @ 相当于 绝对路径src
import { getNewsList } from '@/api/news'
export default {
name: 'NewsList',
data() {
return {
newslist: []
}
},
methods: {
async getNewsList() {
const res = await getNewsList()
this.newslist = res.data.message
}
},
created() {
this.getNewsList()
console.log(this.$route.meta.keepAlive)
}
}
</script>
<style lang="scss" scoped>
.news-list {
.van-card__content {
min-height: 55px;
}
.van-card__thumb {
height: 55px;
}
.van-card__title {
// overflow: hidden;
// text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.btn-group {
display: flex;
justify-content: space-between;
.add-time {
font-size: 12px;
color: red;
}
}
}
</style>
photosinfo
<template>
<div class="photo-info">
<van-panel
:title="photoInfo.title"
:status="'阅读'+photoInfo.click+'次'"
>
<div class="img-box">
<img
v-for="(item,index) in thumImages"
:key="item.id"
:src="item.src"
@click="imagePreview(index)"
>
</div>
<div class="content">{{photoInfo.content}}</div>
</van-panel>
<Comment :id="id"></Comment>
</div>
</template>
<script>
import { getImageInfo, getThumImages } from '@/api/photos'
import { ImagePreview } from 'vant'
import Comment from '@/components/Comment'
export default {
props: ['id'],
data() {
return {
photoInfo: {},
thumImages: []
}
},
methods: {
async getImageInfo() {
const res = await getImageInfo(this.id)
this.photoInfo = res.data.message
},
async getThumImages() {
const res = await getThumImages(this.id)
this.thumImages = res.data.message
},
imagePreview(startPosition) {
const images = []
this.thumImages.forEach(item => {
images.push(item.src)
})
ImagePreview({
images,
startPosition
})
}
},
created() {
this.getImageInfo()
this.getThumImages()
},
components: {
Comment
}
}
</script>
<style lang="scss" scoped>
.photo-info {
padding: 0 10px;
.van-cell__title {
font-size: 16px;
font-weight: 600;
flex: 2;
}
.content {
text-indent: 2em;
}
.img-box {
display: flex;
justify-content: space-between;
margin: 10px 0;
img {
width: 100px;
height: 100px;
}
}
}
</style>
photolist
<template>
<div class="photo-list">
<!-- <van-tabs animated> -->
<van-tabs>
<van-tab
v-for="cate in cates"
:key="cate.id"
>
<template #title>
<span @click="getImages(cate.id)">
{{cate.title}}
</span>
</template>
<div
class="image-list"
v-if="images.length > 0"
>
<img
v-for="image in images"
:key="image.id"
v-lazy="image.img_url"
@click="goDetail('/home/photoinfo',image.id)"
>
</div>
<div v-else>
暂无数据
</div>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import { getImageCategory, getImages } from '@/api/photos'
// import mixins from '@/mixins'
export default {
// mixins: [mixins],
data() {
return {
cates: [],
images: []
}
},
methods: {
async getImageCategory() {
const res = await getImageCategory()
res.data.message.unshift({
id: 0,
title: '全部'
})
this.cates = res.data.message
},
async getImages(id) {
const res = await getImages(id)
this.images = res.data.message
}
},
created() {
this.getImageCategory()
// 默认显示全部
this.getImages(0)
}
}
</script>
<style lang="scss" scoped>
.photo-list {
padding: 10px;
.image-list {
img {
width: 100%;
padding: 4px;
box-sizing: border-box;
}
}
}
</style>
home index
<template>
<div class="home">
<Swiper
:lunbolist="lunbolist"
:autoplay="3000"
>
</Swiper>
<!-- grid -->
<van-grid :column-num="3">
<van-grid-item
v-for="grid in grids"
:key="grid.id"
:icon="grid.src"
:text="grid.title"
:to="grid.to"
/>
</van-grid>
</div>
</template>
<script>
import { getLunbo, getGrids } from '../../api/home'
import Swiper from '@/components/Swiper'
export default {
data() {
return {
lunbolist: [],
grids: []
}
},
created() {
this.getLunbo()
this.getGrids()
},
methods: {
async getLunbo() {
const res = await getLunbo()
this.lunbolist = res.data.message
},
async getGrids() {
const res = await getGrids()
this.grids = res.data.message
}
},
components: {
Swiper
}
}
</script>
<style lang="scss" >
// lang 使用指定的预编译语言
// scoped 限制样式只能在当前组件使用
.home {
.my-swipe {
height: 200px;
img {
width: 100%;
height: 100%;
display: block;
}
}
.van-grid-item__icon {
font-size: 60px;
}
}
</style>
search
<template>
<div class="search">
this is search page
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
</style>
