Leadfyy.co
/
uniapp-shikongwang
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[添加] 商品详情页，我的收藏页面添加骨架屏

master
邓平艺 4 years ago
parent
3e8048c124
commit
f0846a003e
2 changed files with 106 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      pages/collect/index.vue
  2. 153
      pages/goodsDetail/index.vue

50
pages/collect/index.vue
View File

@ -1,30 +1,32 @@
<template>
<view>
<view class="list-box">
<view class="lf-row-between list-item" v-for="(item, index) in list" :key="item.id">
<image class="goods-img" :src="item.goods.cover" @click="enterDetail(index)"></image>
<view style="width: 480rpx;">
<view class="lf-font-32 lf-line-1" @click="enterDetail(index)">{{ item.goods.name }}</view>
<view class="lf-row-between lf-m-t-20">
<view class="lf-flex">
<image class="shop-img" :src="item.goods.store.cover" v-if="item.goods.store.cover"></image>
<image class="shop-img" src="../../static/center/shop-logo.png" v-else></image>
<view class="lf-m-l-10 lf-font-28 lf-line-1 shop-name">{{ item.goods.store.name }}</view>
</view>
<view @click="switchCollect(index)" class="lf-font-40">
<u-icon name="heart-fill" color="#ff0f00" v-if="item.is_collect"></u-icon>
<u-icon name="heart" v-else></u-icon>
<skeleton :loading="skeletonLoading" :row="6" :showAvatar="false" :showTitle="true">
<view class="list-box">
<view class="lf-row-between list-item" v-for="(item, index) in list" :key="item.id">
<image class="goods-img" :src="item.goods.cover" @click="enterDetail(index)"></image>
<view style="width: 480rpx;">
<view class="lf-font-32 lf-line-1" @click="enterDetail(index)">{{ item.goods.name }}</view>
<view class="lf-row-between lf-m-t-20">
<view class="lf-flex">
<image class="shop-img" :src="item.goods.store.cover" v-if="item.goods.store.cover"></image>
<image class="shop-img" src="../../static/center/shop-logo.png" v-else></image>
<view class="lf-m-l-10 lf-font-28 lf-line-1 shop-name">{{ item.goods.store.name }}</view>
</view>
<view @click="switchCollect(index)" class="lf-font-40">
<u-icon name="heart-fill" color="#ff0f00" v-if="item.is_collect"></u-icon>
<u-icon name="heart" v-else></u-icon>
</view>
</view>
<view class="lf-m-t-20 lf-font-24 lf-color-gray">{{ item.created_at_text }}</view>
</view>
<view class="lf-m-t-20 lf-font-24 lf-color-gray">{{ item.created_at_text }}</view>
</view>
</view>
</view>
<!-- 加载 -->
<view class="loading-more">
<text v-if="list.length" :class="{'loading-more-text': loadingClass}">{{ loadingText }}</text>
<my-nocontent v-else></my-nocontent>
</view>
<!-- 加载 -->
<view class="loading-more">
<text v-if="list.length" :class="{'loading-more-text': loadingClass}">{{ loadingText }}</text>
<my-nocontent v-else></my-nocontent>
</view>
</skeleton>
</view>
</template>
@ -37,7 +39,8 @@
loadingText: '正在加载中',
page: 1,
isPage: true,
pageSize: 20
pageSize: 20,
skeletonLoading: true
}
},
onLoad(){
@ -46,6 +49,7 @@
methods: {
getCollectList(){
this.$http(this.API.API_COLLECT_LIST).then(res => {
this.skeletonLoading = false;
this.isPage = res.data.has_more_page;
let list = res.data.items.map(item => {
item.is_collect = true; // 默认都收藏了
@ -60,6 +64,8 @@
}else{
this.list.push(...list);
}
}).catch(err => {
this.skeletonLoading = false;
})
},
// 切换收藏状态

153
pages/goodsDetail/index.vue
View File

@ -1,99 +1,100 @@
<template>
<view>
<block v-if="isRight(goods_detail)">
<!-- 商品图片轮播 -->
<swiper :current="current" :indicator-dots="true" :circular="true" class="swiper-box" indicator-active-color="#FE9903">
<swiper-item v-for="(item, index) in goods_detail.banners" :key="item.id">
<image :src="item.cover" style="width: 100%; height: 100%;" @click="lookImg(index)"></image>
<!-- <image :src="item.cover" mode="aspectFit"></image> -->
</swiper-item>
</swiper>
<!-- 商品主要信息 -->
<view class="head-info">
<view class="lf-font-40">{{ goods_detail.name }}</view>
<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20">
<view class="lf-flex price">
<view class="lf-font-bold">
<text class="lf-font-24">¥</text>
<text class="lf-font-42">{{ goods_detail.specs[0].selling_price }}</text>
<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true">
<block v-if="isRight(goods_detail)">
<!-- 商品图片轮播 -->
<swiper :current="current" :indicator-dots="true" :circular="true" class="swiper-box" indicator-active-color="#FE9903">
<swiper-item v-for="(item, index) in goods_detail.banners" :key="item.id">
<image :src="item.cover" style="width: 100%; height: 100%;" @click="lookImg(index)"></image>
<!-- <image :src="item.cover" mode="aspectFit"></image> -->
</swiper-item>
</swiper>
<!-- 商品主要信息 -->
<view class="head-info">
<view class="lf-font-40">{{ goods_detail.name }}</view>
<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20">
<view class="lf-flex price">
<view class="lf-font-bold">
<text class="lf-font-24">¥</text>
<text class="lf-font-42">{{ goods_detail.specs[0].selling_price }}</text>
</view>
<view>¥{{ goods_detail.specs[0].original_price }}</view>
<view v-if="goods_detail.specs[0].cost">{{ goods_detail.specs[0].cost }}</view>
</view>
<view class="lf-font-24">
<view class="lf-color-gray">{{ goods_detail.specs[0].sold_stock_text }}</view>
<view class="lf-color-primary">{{ goods_detail.specs[0].stock_text }}</view>
</view>
<view>¥{{ goods_detail.specs[0].original_price }}</view>
<view v-if="goods_detail.specs[0].cost">{{ goods_detail.specs[0].cost }}</view>
</view>
<view class="lf-font-24">
<view class="lf-color-gray">{{ goods_detail.specs[0].sold_stock_text }}</view>
<view class="lf-color-primary">{{ goods_detail.specs[0].stock_text }}</view>
<view class="label-box" v-if="goods_detail.tags && goods_detail.tags.length">
<view class="label-item" v-for="(item, index) in goods_detail.tags" :key="index">{{ item }}</view>
</view>
</view>
<view class="label-box" v-if="goods_detail.tags && goods_detail.tags.length">
<view class="label-item" v-for="(item, index) in goods_detail.tags" :key="index">{{ item }}</view>
</view>
</view>
<!-- 地址信息 -->
<view class="address-box">
<view class="lf-font-32 lf-font-bold">适用门店</view>
<view class="lf-m-t-20 lf-row-between">
<view class="lf-flex">
<image class="lf-fle shop-img" :src="goods_detail.store.cover" v-if="goods_detail.store.cover"></image>
<image class="lf-fle shop-img" src="../../static/center/shop-logo.png" v-else></image>
<view class="lf-font-32 lf-m-l-20" style="max-width: 512rpx;">{{ goods_detail.store.name }}</view>
<!-- 地址信息 -->
<view class="address-box">
<view class="lf-font-32 lf-font-bold">适用门店</view>
<view class="lf-m-t-20 lf-row-between">
<view class="lf-flex">
<image class="lf-fle shop-img" :src="goods_detail.store.cover" v-if="goods_detail.store.cover"></image>
<image class="lf-fle shop-img" src="../../static/center/shop-logo.png" v-else></image>
<view class="lf-font-32 lf-m-l-20" style="max-width: 512rpx;">{{ goods_detail.store.name }}</view>
</view>
<view @click="makePhoneCall(goods_detail.store.tel)">
<text class="lf-iconfont lf-icon-dianhua lf-font-40" style="color: #3A62FF;"></text>
</view>
</view>
<view @click="makePhoneCall(goods_detail.store.tel)">
<text class="lf-iconfont lf-icon-dianhua lf-font-40" style="color: #3A62FF;"></text>
<view class="lf-flex lf-m-t-20" @click="openMap">
<view style="width: 60rpx; height: 60rpx;" class="lf-row-center">
<text class="lf-iconfont lf-icon-dizhi lf-font-40" style="color: #000000;"></text>
</view>
<view class="lf-m-l-20 lf-font-28">{{ goods_detail.store.address }}</view>
</view>
</view>
<view class="lf-flex lf-m-t-20" @click="openMap">
<view style="width: 60rpx; height: 60rpx;" class="lf-row-center">
<text class="lf-iconfont lf-icon-dizhi lf-font-40" style="color: #000000;"></text>
</view>
<view class="lf-m-l-20 lf-font-28">{{ goods_detail.store.address }}</view>
<!-- 商品详情 -->
<view class="goods-detail">
<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
<rich-text :nodes="goods_detail.content" v-if="goods_detail.content_type == 'rich_text'"></rich-text>
<image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index" v-if="goods_detail.content_type == 'img'"></image>
</view>
</view>
<!-- 商品详情 -->
<view class="goods-detail">
<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
<rich-text :nodes="goods_detail.content" v-if="goods_detail.content_type == 'rich_text'"></rich-text>
<image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index" v-if="goods_detail.content_type == 'img'"></image>
</view>
<!-- 修饰专用 -->
<view class="extra"></view>
<!-- 吸底操作按钮 -->
<view class="lf-row-between fixed-bottom">
<view class="lf-flex lf-p-t-10 lf-p-b-10">
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/index/index', {type: 'switch'})">
<image class="icon-img" src="../../static/center/home.png"></image>
<view class="lf-m-t-1">首页</view>
</view>
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/contactService/index')">
<image class="icon-img" src="../../static/center/service.png"></image>
<view class="lf-m-t-1">客服</view>
</view>
<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
<image class="icon-img" src="../../static/center/collect-active.png" v-if="is_collect"></image>
<image class="icon-img" src="../../static/center/collect.png" v-else></image>
<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
<!-- 修饰专用 -->
<view class="extra"></view>
<!-- 吸底操作按钮 -->
<view class="lf-row-between fixed-bottom">
<view class="lf-flex lf-p-t-10 lf-p-b-10">
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/index/index', {type: 'switch'})">
<image class="icon-img" src="../../static/center/home.png"></image>
<view class="lf-m-t-1">首页</view>
</view>
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/contactService/index')">
<image class="icon-img" src="../../static/center/service.png"></image>
<view class="lf-m-t-1">客服</view>
</view>
<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
<image class="icon-img" src="../../static/center/collect-active.png" v-if="is_collect"></image>
<image class="icon-img" src="../../static/center/collect.png" v-else></image>
<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
</view>
<button class="lf-flex-column lf-row-center icon-item" open-type="share">
<image class="icon-img" src="../../static/center/share.png"></image>
<view class="lf-m-t-1">分享</view>
</button>
</view>
<button class="lf-flex-column lf-row-center icon-item" open-type="share">
<image class="icon-img" src="../../static/center/share.png"></image>
<view class="lf-m-t-1">分享</view>
</button>
<button class="btn" @click="toAddOrder">立即抢购</button>
</view>
<button class="btn" @click="toAddOrder">立即抢购</button>
</view>
</block>
</block>
</skeleton>
</view>
</template>
<script>
let time = null;
export default {
data(){
return {
current: 0, // 轮播下标
goods_id: 0,
goods_detail: {},
is_collect: 0 // 1为当前收藏商品了，0为否
is_collect: 0, // 1为当前收藏商品了，0为否
skeletonLoading: true
}
},
computed: {
@ -112,11 +113,13 @@
let that = this;
this.$http(this.API.API_GOODS_DETAIL, {goods_id: this.goods_id}).then(res => {
console.log("res", res);
this.skeletonLoading = false;
this.goods_detail = res.data;
this.is_collect = Boolean(res.data.user.is_collect);
}).catch(err => {
this.skeletonLoading = false;
that.$msg(err.msg);
time = setTimeout(() => {
setTimeout(() => {
that.$toBack();
}, 1000);
})

Write Preview
Loading…
Cancel
Save