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

[接接口] 商品详情页

master
LAPTOP-D7TKRI82\邓 5 years ago
parent
ebe4e0e0a5
commit
3ffc84b0e6
3 changed files with 61 additions and 31 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. 3
      App.vue
  2. 3
      common/api.js
  3. 86
      pages/goodsDetail/index.vue

3
App.vue
View File

@ -4,7 +4,7 @@
},
onLaunch: function() {
// this.login(); // 校验登录态 TODO 等待与后端对接
this.login(); // 校验登录态 TODO 等待与后端对接
},
onShow: function() {
// #ifdef MP-WEIXIN
@ -17,6 +17,7 @@
methods: {
// 接口code换取用户信息
userCode(code){
return console.log("code", code);
this.$http('', { code }).then(res => {
console.log("获得用户信息", res);
})

3
common/api.js
View File

@ -17,3 +17,6 @@ export const API_ORDER_DETAILS = '/api/order/detail';
//确认订单详情
export const API_COFIRMORDER_DETAILS = '/api/order/confirm';
/* 商品详情相关 */
export const API_GOODS_DETAIL = '/api/goods/detail'; // 商品详情
export const API_COLLECT_DEAL = '/api/collect/deal'; // 商品收藏

86
pages/goodsDetail/index.vue
View File

@ -2,31 +2,27 @@
<view>
<!-- 商品图片轮播 -->
<swiper :current="current" :indicator-dots="true" :circular="true" class="swiper-box">
<swiper-item>
<image src="../../static/tu.png" style="width: 100%; height: 100%;"></image>
</swiper-item>
<swiper-item>
<image src="../../static/tu.png" style="width: 100%; height: 100%;"></image>
<swiper-item v-for="item in goods_detail.banners" :key="item.id">
<image :src="item.cover" style="width: 100%; height: 100%;"></image>
<!-- <image :src="item.cover" mode="aspectFit"></image> -->
</swiper-item>
</swiper>
<!-- 商品主要信息 -->
<view class="head-info">
<view class="lf-font-40">网红辣椒棒 魔鬼辣椒挑战全网第一辣 网红优惠季 网红优惠季 网红优惠季 </view>
<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>¥ 19.90</view>
<view>¥ 39.00</view>
<view>2.9折</view>
<view>¥{{ goods_detail.specs[0].selling_price }}</view>
<view>¥{{ goods_detail.specs[0].original_price }}</view>
<view>{{ goods_detail.specs[0].cost }}</view>
</view>
<view>
<view class="lf-color-gray">已售4.5万份</view>
<view class="lf-color-primary">库存仅剩98份</view>
<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>
<view class="label-box">
<view class="label-item">过期退</view>
<view class="label-item">满减优惠</view>
<view class="label-item">信用付</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>
<!-- 地址信息 -->
@ -34,43 +30,43 @@
<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="../../static/tu.png"></image>
<view class="lf-font-32 lf-m-l-20" style="max-width: 512rpx;">李大叔家的店的店的店的店的店</view>
<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>
<u-icon name="phone" color="#3A62FF" size="46"></u-icon>
</view>
<view class="lf-flex lf-m-t-20">
<u-icon name="map-fill" size="60"></u-icon>
<view class="lf-m-l-20 lf-font-32">南宁市青秀区 金湖广场 金浦路 地铁1号线A出口 右转200米</view>
<view class="lf-m-l-20 lf-font-32">{{ goods_detail.store.address }}</view>
</view>
</view>
<!-- 商品详情 -->
<view class="goods-detail">
<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
<image class="goods-img" src="../../static/tu.png"></image>
<image class="goods-img" src="../../static/tu.png"></image>
<image class="goods-img" :src="item" v-for="(item, index) in goods_detail.content" :key="index"></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">
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/index/index', {type: 'switch'})">
<u-icon name="home" size="50"></u-icon>
<view class="lf-m-t-1">首页</view>
</view>
<view class="lf-flex-column lf-row-center icon-item">
<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/contactService/index')">
<u-icon name="server-fill" size="50"></u-icon>
<view class="lf-m-t-1">客服</view>
</view>
<view class="lf-flex-column lf-row-center icon-item">
<u-icon name="heart" size="50"></u-icon>
<view class="lf-m-t-1">收藏</view>
<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
<u-icon name="heart-fill" size="50" color="#FF0000" v-if="is_collect"></u-icon>
<u-icon name="heart" size="50" v-else></u-icon>
<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
</view>
<view class="lf-flex-column lf-row-center icon-item">
<button class="lf-flex-column lf-row-center icon-item" open-type="share">
<u-icon name="share" size="50"></u-icon>
<view class="lf-m-t-1">分享</view>
</view>
</button>
</view>
<button class="btn">立即抢购</button>
</view>
@ -82,14 +78,35 @@
data(){
return {
current: 0, // 轮播下标
goods_id: 0
goods_id: 0,
goods_detail: {},
is_collect: 0 // 1为当前收藏商品了，0为否
}
},
onLoad(options){
this.goods_id = options.id;
this.getGoodsDetail();
},
methods: {
getGoodsDetail(){
this.$http(this.API.API_GOODS_DETAIL, {goods_id: this.goods_id}).then(res => {
console.log("res", res);
this.goods_detail = res.data;
this.is_collect = Boolean(res.data.user.is_collect);
})
},
// 切换商品收藏
switchCollect(){
this.$http(this.API.API_COLLECT_DEAL, {goods_id: this.goods_id}).then(res => {
console.log("res", res);
this.is_collect = Boolean(res.data.user.is_collect);
})
}
},
onShareAppMessage(){
return {
title: '测试'
}
}
}
</script>
@ -169,6 +186,7 @@
width: 60rpx;
height: 60rpx;
border-radius: 10rpx;
background-color: #EEEEEE;
}
}
@ -204,8 +222,16 @@
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.icon-item{
padding: 0 10rpx;
padding: 0 14rpx;
margin-right: 16rpx;
background-color: transparent;
margin: 0;
line-height: initial;
font-size: 28rpx;
font-weight: inherit;
&:first-child{
padding-left: 0;
}
}
.btn{
margin: 0;

Write Preview
Loading…
Cancel
Save