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

[接接口] 我的收藏列表页面 

[完善] 商品详情页
[新增] 路由分发页面
master
LAPTOP-D7TKRI82\邓 4 years ago
parent
a92693e789
commit
f9e589e1cd
7 changed files with 118 additions and 22 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. 2
      App.vue
  2. 3
      common/api.js
  3. 9
      pages.json
  4. 4
      pages/center/index.vue
  5. 74
      pages/collect/index.vue
  6. 38
      pages/goodsDetail/index.vue
  7. 8
      pages/route/index.vue

2
App.vue
View File

@ -44,7 +44,7 @@
uni.checkSession({
complete: result => {
if(result.errMsg == 'checkSession:ok'){ // 处于登录状态 session未过期
let login_token = uni.getStorageSync();
let login_token = uni.getStorageSync('login_token');
if(login_token){
resolve(login_token);
}else{

3
common/api.js
View File

@ -21,4 +21,7 @@ export const API_COFIRMORDER_DETAILS = '/api/order/confirm';
export const API_GOODS_DETAIL = '/api/goods/detail'; // 商品详情
export const API_COLLECT_DEAL = '/api/collect/deal'; // 商品收藏
/* 个人中心相关 */
export const API_COLLECT_LIST = '/api/collect/list'; // 我的收藏列表
export const TEST = '/api/order/deal';

9
pages.json
View File

@ -62,7 +62,8 @@
{
"path": "pages/collect/index",
"style": {
"navigationBarTitleText": "我的收藏"
"navigationBarTitleText": "我的收藏",
"enablePullDownRefresh": true
}
},
{
@ -82,6 +83,12 @@
"style": {
"navigationBarTitleText": "绑定"
}
},
{
"path": "pages/route/index",
"style": {
"navigationBarTitleText": "时空网"
}
}
],
"globalStyle": {

4
pages/center/index.vue
View File

@ -15,7 +15,7 @@
</view>
</view>
<view class="list">
<view class="lf-row-between list-item" hover-class="lf-opacity">
<view class="lf-row-between list-item" hover-class="lf-opacity" @click="$url('/pages/collect/index')">
<view>
<u-icon name="heart" size="50" class="lf-text-vertical"></u-icon>
<text class="lf-text-vertical lf-m-l-16 lf-font-32">我的收藏</text>
@ -24,7 +24,7 @@
<u-icon name="arrow-right" size="40" color="#777777"></u-icon>
</view>
</view>
<view class="lf-row-between list-item" hover-class="lf-opacity">
<view class="lf-row-between list-item" hover-class="lf-opacity" @click="$url('/pages/contactService/index')">
<view>
<u-icon name="heart" size="50" class="lf-text-vertical"></u-icon>
<text class="lf-text-vertical lf-m-l-16 lf-font-32">联系客服</text>

74
pages/collect/index.vue
View File

@ -1,20 +1,21 @@
<template>
<view>
<view class="list-box">
<view class="lf-row-between list-item" v-for="(item, index) in list" :key="index" hover-class="lf-opacity">
<image class="goods-img"></image>
<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">网红辣椒棒魔鬼辣椒挑战全网第</view>
<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"></image>
<view class="lf-m-l-10 lf-font-28 lf-line-1 shop-name">李大叔家的店</view>
<image class="shop-img" :src="item.goods.store.cover"></image>
<view class="lf-m-l-10 lf-font-28 lf-line-1 shop-name">{{ item.goods.store.name }}</view>
</view>
<view>
<u-icon name="heart-fill" color="#ff0f00"></u-icon>
<view @click="switchCollect(index)">
<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">收藏时间 2021-6-17 12:37:54</view>
<view class="lf-m-t-20 lf-font-24 lf-color-gray">{{ item.created_at_text }}</view>
</view>
</view>
</view>
@ -30,16 +31,63 @@
export default {
data(){
return {
list: [1, 2],
loadingClass: false,
loadingText: '已显示全部数据~'
list: [],
loadingClass: true,
loadingText: '正在加载中',
page: 1,
isPage: true,
pageSize: 20
}
},
onLoad(){
this.getCollectList();
},
methods: {
getCollectList(){
// TODO 接口传参
this.$http(this.API.API_COLLECT_LIST).then(res => {
this.isPage = res.data.has_more_page;
let list = res.data.items.map(item => {
item.is_collect = true; // 默认都收藏了
return item;
});
if(!res.data.has_more_page){
this.loadingClass = false;
this.loadingText = '已显示全部数据~';
}
if(this.page == 1){
this.list = list;
}else{
this.list.push(...list);
}
})
},
// 切换收藏状态
switchCollect(index){
let goods_id = this.list[index].goods_id;
this.$http(this.API.API_COLLECT_DEAL, {goods_id}).then(res => {
this.list[index].is_collect = Boolean(res.data.user.is_collect);
})
},
// 进入商品详情页
enterDetail(index){
let goods_id = this.list[index].goods_id;
this.$url('/pages/goodsDetail/index?id='+ goods_id);
}
},
onReachBottom(){
if(this.isPage){
this.page = this.page + 1;
this.getCollectList();
}
},
onPullDownRefresh(){
this.page = 1;
this.isPage = true;
this.loadingClass = true;
this.loadingText = '正在加载中';
this.getCollectList();
uni.stopPullDownRefresh();
}
}
</script>

38
pages/goodsDetail/index.vue
View File

@ -14,7 +14,7 @@
<view class="lf-flex price">
<view>¥{{ goods_detail.specs[0].selling_price }}</view>
<view>¥{{ goods_detail.specs[0].original_price }}</view>
<view>{{ goods_detail.specs[0].cost }}</view>
<view v-if="goods_detail.specs[0].cost">{{ goods_detail.specs[0].cost }}</view>
</view>
<view>
<view class="lf-color-gray">{{ goods_detail.specs[0].sold_stock_text }}</view>
@ -33,9 +33,11 @@
<image class="lf-fle shop-img" :src="goods_detail.store.cover"></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)">
<u-icon name="phone" color="#3A62FF" size="46"></u-icon>
</view>
<view class="lf-flex lf-m-t-20">
</view>
<view class="lf-flex lf-m-t-20" @click="openMap">
<u-icon name="map-fill" size="60"></u-icon>
<view class="lf-m-l-20 lf-font-32">{{ goods_detail.store.address }}</view>
</view>
@ -68,7 +70,7 @@
<view class="lf-m-t-1">分享</view>
</button>
</view>
<button class="btn">立即抢购</button>
<button class="btn" @click="addCart">立即抢购</button>
</view>
</view>
</template>
@ -101,11 +103,39 @@
console.log("res", res);
this.is_collect = Boolean(res.data.user.is_collect);
})
},
// 拨打电话
makePhoneCall(phoneStr){
uni.makePhoneCall({
phoneNumber: String(phoneStr)
})
},
// 打开地图
openMap(){
return;
uni.openLocation({
longitude: 108.36637,
latitude: 22.817746,
scale: 18
})
},
// 立即抢购加入购物车
addCart(){
// this.$http(this.API.).then(res => {
// })
}
},
onShareAppMessage(){
let goods = this.goods_detail;
let title = goods.name;
let imageUrl = goods.cover;
let path = '/pages/route/index';
return {
title: '测试'
title,
path,
imageUrl
}
}
}

8
pages/route/index.vue
View File

@ -0,0 +1,8 @@
<script>
/* 路由分发页面仅供跳转页面 */
export default {
onLoad(options){
this.$url('/pages/index/index', {type: 'switch'});
}
}
</script>
Write Preview
Loading…
Cancel
Save