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

完善商品详情页UI，判断显示普通商品，秒杀商品，兑换商品

master
邓平艺 4 years ago
parent
0400da6b86
commit
e5943b0f4a
7 changed files with 88 additions and 14 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
      components/lf-shopGoodsCard/lf-shopGoodsCard.vue
  2. 2
      components/lf-waterfall-pointgoods/lf-waterfall.vue
  3. 2
      components/lf-waterfall-shopdetails/lf-waterfall.vue
  4. 2
      pages/index/list/monthlyList.vue
  5. 2
      pages/index/list/selected.vue
  6. 90
      pages/shop/goodsdetail.vue
  7. 2
      pages/shop/seckillList.vue

2
components/lf-shopGoodsCard/lf-shopGoodsCard.vue
View File

@ -5,7 +5,7 @@
</view>
<scroll-view class="scroll-view" :scroll-x="true">
<view class="scroll-content">
<view class="goods-item" v-for="(item, index) in 5" :key="index" @click="$url('/pages/shop/goodsdetail')">
<view class="goods-item" v-for="(item, index) in 5" :key="index" @click="$url('/pages/shop/goodsdetail?type=mail')">
<image class="goods-img"></image>
<view class="goods-info">
<view class="lf-line-1">猪大肠卖咯 5毛钱一斤咯</view>

2
components/lf-waterfall-pointgoods/lf-waterfall.vue
View File

@ -119,7 +119,7 @@
},
methods: {
onClick(id){
this.$url('/pages/shop/goodsdetail?goods_id='+id);
this.$url('/pages/shop/goodsdetail?type=point&goods_id='+id);
this.$emit('click');
},
goAd(type,url){

2
components/lf-waterfall-shopdetails/lf-waterfall.vue
View File

@ -121,7 +121,7 @@
},
methods: {
onClick(id){
this.$url('/pages/shop/goodsdetail?goods_id='+id);
this.$url('/pages/shop/goodsdetail?type=mail&goods_id='+id);
this.$emit('click');
},
goAd(type,url){

2
pages/index/list/monthlyList.vue
View File

@ -6,7 +6,7 @@
<view class="title">热销榜单</view>
</view>
<view class="content">
<view class="card" v-for="(item, index) in 7" :key="index" @click="$url('/pages/shop/goodsdetail')">
<view class="card" v-for="(item, index) in 7" :key="index" @click="$url('/pages/shop/goodsdetail?type=mail')">
<view class="goods-img">
<image class="img" src="https://picsum.photos/200/300"></image>
<view class="ranking">{{ item+1 }}</view>

2
pages/index/list/selected.vue
View File

@ -10,7 +10,7 @@
<view class="title" @click="$url('/pages/index/list/monthlyList')">灯具榜 ></view>
<scroll-view class="scroll-view" :scroll-x="true">
<view class="scroll-content">
<view class="goods-item" v-for="(item, index) in 5" :key="index" @click="$url('/pages/shop/goodsdetail')">
<view class="goods-item" v-for="(item, index) in 5" :key="index" @click="$url('/pages/shop/goodsdetail?type=mail')">
<view class="goods-img">
<image class="img"></image>
<view class="ranking">{{ item+1 }}</view>

90
pages/shop/goodsdetail.vue
View File

@ -7,23 +7,46 @@
<swiper :current="current" :indicator-dots="2 > 1 ? false : true" :circular="true" class="swiper-box" indicator-active-color="#1998FE">
<swiper-item v-for="(item, index) in pictures" :key="index">
<image mode="aspectFill" :src="item" style="width: 100%; height: 100%;" @click="lookImg(index)"></image>
<view class="seckill-box" v-if="type == 'seckill'">
<view>距离结束还剩余</view>
<view>
<countdown-timer :time="time" :autoStart="true">
<template v-slot="{hour, minute, second}">
<view class="lf-flex">
<view>{{ hour >= 10 ? hour : "0" + hour }}</view>
<view>时</view>
<view>{{ minute >= 10 ? minute : "0" + minute }}</view>
<view>分</view>
<view>{{ second >= 10 ? second : "0" + second }}</view>
<view>秒</view>
</view>
</template>
</countdown-timer>
</view>
</view>
</swiper-item>
</swiper>
<!-- 商品主要信息 -->
<view class="head-info">
<view class="lf-row-between">
<lf-price :iftext="false" :price="111"></lf-price>
<view v-if="type == 'point'">
<text class="lf-font-48 lf-color-primary lf-font-bold">8493</text>
<text class="lf-font-28 lf-color-777 lf-m-l-10">个兑换</text>
</view>
<lf-price :iftext="false" :price="111" v-else></lf-price>
<text class="lf-iconfont icon-fenxiang lf-font-40" @click="shareGraphic()"></text>
</view>
<view class="lf-row-between lf-font-24 lf-m-t-20 lf-p-b-20">
<view class="lf-font-bold lf-font-32 lf-color-222">颐莲喷雾 500ml</view>
</view>
<view class="lf-row-between lf-font-24 lf-p-b-30">
<view class="lf-font-28 lf-color-777">门店自提</view>
<view class="lf-font-28 lf-color-777" v-if="type == 'self'">门店自提</view>
<view class="lf-font-28 lf-color-777 lf-row-between" v-else>可自提/可邮寄</view>
<view v-if="type == 'seckill'">已有38人购买</view>
</view>
</view>
<self-line></self-line>
<view class="bg-white">
<view class="bg-white" v-if="type == 'self'">
<view class="cu-bar padding-lr">
<view class="lf-flex">
<text class="lf-color-777 lf-font-28">优惠</text>
@ -40,7 +63,7 @@
</view>
</view>
<self-line></self-line>
<view class="bg-white">
<view class="bg-white" v-if="type == 'self'">
<view class="cu-bar padding-lr">
<view class="lf-flex">
<text class="lf-color-777 lf-font-28">服务</text>
@ -56,6 +79,30 @@
</view>
</view>
</view>
<block v-else>
<view class="bg-white">
<view class="cu-bar padding-lr">
<view class="lf-flex">
<view class="lf-color-777 lf-font-28">送至</view>
<view class="lf-color-222 lf-font-26 lf-m-l-30" style="width: 550rpx;">广西壮族自治区-南宁市-青秀区-民族大道180号</view>
</view>
<view>
<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
</view>
</view>
</view>
<view class="bg-white">
<view class="cu-bar padding-lr">
<view class="lf-flex">
<view class="lf-color-777 lf-font-28">运费</view>
<view class="lf-color-222 lf-font-26 lf-m-l-30 lf-line-1" style="width: 550rpx;">在5kg～10kg内，包含5kg；重量在5kg以内按3kg</view>
</view>
<view>
<text class="lf-font-24 lf-color-777 lf-iconfont icon-xiangyou"></text>
</view>
</view>
</view>
</block>
<view class="bg-white">
<view class="cu-bar padding-lr" @click="shoot(2)">
<view class="lf-flex">
@ -90,7 +137,7 @@
</view>
<scroll-view class="scroll-view" :scroll-x="true">
<view class="scroll-content">
<view class="goods-item" v-for="(item, index) in 5" :key="index" @click="$url('/pages/shop/goodsdetail')">
<view class="goods-item" v-for="(item, index) in 5" :key="index" @click="$url('/pages/shop/goodsdetail?type='+ this.type)">
<image class="goods-img"></image>
<view class="goods-info">
<view class="lf-line-1">猪大肠卖咯 5毛钱一斤咯</view>
@ -131,7 +178,13 @@
<view class="lf-m-t-1">购物车</view>
</button>
</view>
<view class="lf-flex">
<view v-if="type == 'seckill'">
<button class="btn" style="width: 349rpx;">立即秒杀</button>
</view>
<view v-else-if="type == 'point'">
<button class="btn" style="width: 349rpx;">立即兑换</button>
</view>
<view class="lf-flex" v-else>
<button class="btn1" @click="shoot(1)">加入购物车</button>
<button class="btn lf-m-l-15" @click="shoot(2)">立即购买</button>
</view>
@ -190,7 +243,11 @@
</template>
<script>
import countdownTimer from '@/components/countdown-timer/countdown-timer';
export default {
components: {
countdownTimer
},
data(){
return {
current: 0, // 轮播下标
@ -205,12 +262,14 @@
],
show_popup: false, // 是否显示选规格模态框
spec_current: null, // 规格下标
click_type: null // 当前点击的是加入购物车[1]还是立即购买[2]
click_type: null, // 当前点击的是加入购物车[1]还是立即购买[2]
type: 'mail', // 页面显示类型，mail普通可邮寄商品，self自提商品，point积分商品，seckill秒杀商品
time: new Date('2021/09/8 14:15:00').getTime() - new Date('2021/09/8 13:10:00').getTime()
}
},
onLoad(options){
this.goods_id = options.goods_id;
this.type = options.type || 'mail';
console.log('商品',this.goods_id)
// this.getGoodsDetail();
},
@ -495,6 +554,21 @@
width: 750rpx;
height: 750rpx;
background-color: #FFFFFF;
position: relative;
.seckill-box{
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 32rpx;
width: 100%;
height: 77rpx;
background-color: #15716E;
color: #FFFFFF;
font-size: 26rpx;
}
}
.head-info{

2
pages/shop/seckillList.vue
View File

@ -2,7 +2,7 @@
<view>
<lf-nav title="秒杀专场" :showIcon="true" bgColor="#fff"></lf-nav>
<view class="content">
<view class="card" v-for="(item, index) in 7" :key="index" @click="$url('/pages/shop/goodsdetail')">
<view class="card" v-for="(item, index) in 7" :key="index" @click="$url('/pages/shop/goodsdetail?type=seckill')">
<view class="goods-img">
<image class="img" src="https://picsum.photos/200/300"></image>
<view class="tips">已有0人购买</view>

Write Preview
Loading…
Cancel
Save