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

对接首页为你推荐和tips，完善购物车页面部分逻辑

master
邓平艺 4 years ago
parent
16b7a6e1f3
commit
de967a172c
8 changed files with 184 additions and 106 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-indexFind/lf-indexFind.vue
  2. 2
      components/lf-nav/lf-nav.vue
  3. 19
      components/lf-seckill/lf-seckill.vue
  4. 10
      pages/index/category/category.vue
  5. 83
      pages/index/index/index.vue
  6. 1
      pages/shop/search.vue
  7. 17
      pages/shop/seckillList.vue
  8. 156
      pages/store/cart/cart.vue

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

@ -8,7 +8,7 @@
@click="$url('/pages/discover/discoverdetails')"
v-for="(item, index) in list" :key="index">
<image class="img" :src="item.image"></image>
<view class="lf-line-2 info">{{ item.associate.title }}</view>
<view class="lf-line-2 info">{{ item.associate.content }}</view>
</view>
</view>
<view style="height: 10rpx;"></view>

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

@ -155,7 +155,7 @@
top: 0;
left: 0;
z-index: 99999;
transition: all .2;
transition: all .2s;
}
.head .head-nav{
position: absolute;

19
components/lf-seckill/lf-seckill.vue
View File

@ -6,12 +6,12 @@
<view class="desc">低价不等人，快来秒杀啦～</view>
<scroll-view class="scroll-view" :scroll-x="true">
<view class="lf-flex">
<view class="goods-item" v-for="(item, index) in 4" :key="index">
<image class="goods-img"></image>
<view class="lf-line-1 goods-title">日本sk-ll小灯跑</view>
<view class="goods-item" v-for="(item, index) in list" :key="index">
<image class="goods-img" :src="item.associate.goods.img"></image>
<view class="lf-line-1 goods-title">{{ item.associate.goods.name }}</view>
<view class="goods-price">
<text>¥888</text>
<text>¥888</text>
<text>¥{{ item.associate.goods.market_price }}</text>
<text>¥{{ item.associate.goods.max_price }}</text>
</view>
</view>
</view>
@ -36,9 +36,6 @@
return {
}
},
onLoad(){
},
methods: {
@ -106,12 +103,14 @@
}
.goods-price>text:nth-child(1n){
font-size: 28rpx;
font-weight: #F63434;
color: #F63434;
font-weight: bold;
}
.goods-price>text:nth-child(2n){
font-size: 24rpx;
font-weight: #777777;
color: #777777;
margin-left: 15rpx;
text-decoration: line-through;
}
}
}

10
pages/index/category/category.vue
View File

@ -40,7 +40,7 @@
<view class="lf-filter" :class="{'lf-filter-after': filter_active == ''}">
<view v-for="(value, key) in filter_list" :key="key"
:class="{'filter-active': filter_active == key}"
@click="filter_active = key">{{ value.name }}
@click="clickFilterTab(key)">{{ value.name }}
</view>
</view>
<view class="filter-modal-mask" :style="{height: otherHeight}" v-if="filter_active != ''" @click="filter_active = ''">
@ -306,6 +306,14 @@
// })
// }).exec()
// console.log('ttscrollH',this.$refs.left_0)
},
// 品牌筛选tab被点击
clickFilterTab(key){
if(this.filter_active == key){
this.filter_active = '';
}else{
this.filter_active = key;
}
}
}
}

83
pages/index/index/index.vue
View File

@ -83,10 +83,10 @@
</view>
<!-- 今日头条 TODO 暂时借用快捷导航字段判断 -->
<view class="fuwu-tips" v-if="item.name == 'micro_page_componet_nav' && item.value && item.value.length">
<view class="fuwu-tips" v-if="item.name == 'micro_page_componet_tips'">
<view class="fuwu-tips-title">今日头条</view>
<view>
<text class="fuwu-tips-desc1">来自太阳的宝石-8月生辰石</text>
<text class="fuwu-tips-desc1">{{ item.title }}</text>
<!-- <text class="fuwu-tips-desc1">线上商城全场限时包邮</text>
<text class="fuwu-tips-desc2">(部分品牌满额包邮)</text> -->
</view>
@ -104,7 +104,7 @@
<lf-multi-column-ad :cube-data="item.value"></lf-multi-column-ad>
</view>
<!-- TODO 首页发现推荐模块，根据大咖推荐文章修改 -->
<view v-if="item.name == 'micro_page_componet_article_-' && item.value && item.value.length">
<view v-if="item.name == 'micro_page_componet_discovery' && item.value && item.value.length">
<lf-index-find :list="item.value"></lf-index-find>
</view>
<!-- TODO 大牌不停推模块 - 店铺矩阵 -->
@ -129,10 +129,10 @@
<indexGrouping :grouping-data="item.value" :meta="item.meta"></indexGrouping>
</view> -->
<!-- TODO 为你推荐模块 -->
<view v-if="item.name == 'micro_page_componet_category' && item.value && item.value.length">
<view v-if="item.name == 'micro_page_componet_recommended' && item.value && item.value.length">
<view class="lf-module-title">为你推荐</view>
<view style="padding: 0 11px;">
<lf-waterfall :list="recommend_list"></lf-waterfall>
<lf-waterfall :list="transformList(item.value)"></lf-waterfall>
</view>
</view>
</view>
@ -462,49 +462,7 @@
is_login:'',// 是否是登陆状态
show_ad: false, // 是否显示ad广告
ad_modal_list: [], // ad广告列表
nav_bg_color: 'transparent' ,// 导航背景颜色
recommend_list: [
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
},
{
id: 10,
original_price: "4111.00",
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
price: "2412.00",
product_id: 1008,
sale: 0,
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
}
]
nav_bg_color: 'rgba(255,255,255,0)' ,// 导航背景颜色
};
},
// 注册组件
@ -533,7 +491,24 @@
lfMultiColumnAd,
lfSeckill
},
computed: {
transformList(){
return function(list=[]){
let new_list = list.map(item => {
return {
original_price: item.associate.market_price,
picture: item.associate.img,
pictures: [item.associate.img],
price: item.associate.max_price,
product_id: item.associate.id,
sale: item.associate.sale_count,
title: item.associate.name
}
});
return new_list;
}
}
},
onShow(e) {
@ -595,13 +570,13 @@
// 页面滚动
onPageScroll(event){
if(event.scrollTop >= 100){
this.nav_bg_color = '#ffffff';
this.nav_bg_color = 'rgba(255,255,255,1)';
uni.setNavigationBarColor({
frontColor: "#000000",
backgroundColor: "#0000000"
})
}else{
this.nav_bg_color = 'transparent';
this.nav_bg_color = 'rgba(255,255,255,0)';
uni.setNavigationBarColor({
frontColor: "#ffffff",
backgroundColor: "#FFFFFF"
@ -1193,21 +1168,23 @@
}
.fuwu-tips{
width: 686rpx;
height: 70rpx;
min-height: 70rpx;
background-color: #eff6f7;
margin: 60rpx auto 0;
display: flex;
// justify-content: space-between;
box-sizing: border-box;
align-items: center;
padding: 0 30rpx;
padding: 12rpx 30rpx;
border-radius: 40rpx;
line-height: 1.2;
.fuwu-tips-title{
font-size: 36rpx;
color: #186c6b;
margin-right: 15rpx;
font-weight: bold;
font-family: '华文行楷';
white-space: nowrap;
}
.fuwu-tips-desc1{
font-size: 28rpx;

1
pages/shop/search.vue
View File

@ -94,6 +94,7 @@
},
// 点击了搜索按钮
customClick(value){
if(!value || !value.trim()) return this.$msg('搜索内容不能为空');
this.updateHistory(value).then(() => {
this.$url('/pages/shop/searchList?value='+ value);
})

17
pages/shop/seckillList.vue
View File

@ -2,25 +2,27 @@
<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?type=seckill')">
<view class="card" v-for="(item, index) in list" :key="index"
@click="$url('/pages/shop/goodsdetail?type=seckill&id='+ item.goods.id)">
<view class="goods-img">
<image class="img" src="https://picsum.photos/200/300"></image>
<view class="tips">已有0人购买</view>
<image class="img" :src="item.goods.img"></image>
<view class="tips">TODO已有0人购买</view>
</view>
<view class="goods-info">
<view>
<view class="lf-line-2 title">SK-II秋日宠粉体验套装</view>
<view class="lf-line-2 title">{{ item.goods.name }}</view>
<view class="desc">距离开始还剩余 20:34:18</view>
</view>
<view class="lf-row-between">
<view class="price">
<text>¥888</text>
<text>¥10000</text>
<text>¥{{ item.goods.max_price }}</text>
<text>¥{{ item.goods.market_price }}</text>
</view>
<view class="btn" hover-class="lf-opacity">立即秒杀</view>
</view>
</view>
</view>
<lf-nocontent src="/static/images/empty.png" v-if="list.length <= 0"></lf-nocontent>
</view>
<u-back-top :scrollTop="pageScrollTop"></u-back-top>
</view>
@ -30,7 +32,7 @@
export default {
data(){
return {
list: []
}
},
onLoad(){
@ -42,6 +44,7 @@
api: 'api/seckill/all'
}).then(res => {
console.log("----", res);
this.list = res.data.data;
})
}
}

156
pages/store/cart/cart.vue
View File

@ -3,34 +3,30 @@
<lf-nav :spreadOut="true" :showIcon="true" bgColor="white" title="购物车"></lf-nav>
<view style="height: 1rpx;"></view>
<view>
<view v-for="i of 4" class="online-card">
<view class="lf-m-b-20">
<view v-for="(s_item, s_index) in list" :key="s_index" class="online-card">
<view class="lf-m-b-20" @click="$url('/pages/shop/shopdetail')">
<text class="lf-iconfont icon-Group- lf-font-28"></text>
<text class="lf-color-black lf-font-28 lf-font-bold lf-m-l-10">精品超市</text>
<text class="lf-color-black lf-font-28 lf-font-bold lf-m-l-10">{{ s_item.name }}</text>
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text>
</view>
<view class="lf-row-between">
<view class="lf-flex">
<view class="gray-tag">
满减
</view>
<view class="lf-m-l-15 lf-font-24 lf-color-333">母婴产品教师节满1200减200</view>
<view class="gray-tag">满减</view>
<view class="lf-m-l-15 lf-font-24 lf-color-333">{{s_item.full_minus}}</view>
</view>
<view class="red-tag">去凑单</view>
<view class="red-tag" @click="$msg('敬请期待')">去凑单</view>
</view>
<view v-for="i of 2" class="lf-row-between">
<view>
<u-checkbox-group>
<u-checkbox shape="circle" active-color="#15716E" @change="checkboxChange" v-model="checked"></u-checkbox>
</u-checkbox-group>
</view>
<view v-for="(g_item, g_index) in s_item.goods" :key="g_index" class="lf-row-between">
<u-checkbox-group>
<u-checkbox shape="circle" active-color="#15716E" @change="goodsCheckChange($event, s_index, g_index)" v-model="g_item.checked"></u-checkbox>
</u-checkbox-group>
<view class="lf-m-t-30" style="display: flex;">
<image class="content-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
<view class="lf-m-l-15">
<view class="lf-color-333 lf-font-26 lf-line-2" style="max-width: 480rpx;">爱他美较大婴儿配方奶粉较大婴儿配方奶粉较大婴儿配方奶粉2段 900g</view>
<image class="content-img" :src="g_item.img" mode="aspectFill" @click="$url('/pages/shop/goodsdetail')"></image>
<view class="lf-m-l-15 content-info">
<view class="lf-color-333 lf-font-26 lf-line-2" style="max-width: 480rpx;">{{g_item.name}}</view>
<view class="lf-font-24 lf-color-777 lf-m-t-14 lf-row-between">
<view>1件；900g</view>
<view class="lf-font-32 lf-color-price">￥385</view>
<view>{{g_item.count}}件；{{g_item.spec}}</view>
<view class="lf-font-32 lf-color-price">￥{{ g_item.price }}</view>
</view>
</view>
</view>
@ -39,20 +35,18 @@
</view>
<view style="height: 60rpx;"></view>
<view class="cart-bottom">
<view class="lf-flex">
<u-checkbox-group>
<u-checkbox shape="circle" active-color="#15716E" @change="checkboxChange" v-model="checked"></u-checkbox>
</u-checkbox-group>
<view class="lf-font-28 lf-color-777" style="margin-left: -20rpx;">
全选
</view>
</view>
<u-checkbox-group>
<u-checkbox shape="circle" active-color="#15716E" @change="allCheckChange" v-model="allChecked">
<text class="lf-font-28 lf-color-777">全选</text>
</u-checkbox>
</u-checkbox-group>
<view class="lf-row-between">
<view class="lf-font-32 lf-color-222 lf-font-bold lf-m-r-30">
合计: ￥1150
合计: ￥{{ total_price || 0 }}
</view>
<view class="cart-btn">
结算 (6)
<view class="cart-btn" hover-class="lf-opacity" @click="submit">
<text>结算</text>
<text v-if="total_count">({{ total_count }})</text>
</view>
</view>
</view>
@ -63,12 +57,105 @@
export default {
data() {
return {
checked: false
token: '', // 用户token
allChecked: false, // 全选
list: [], // 购物车列表
total_price: '', // 总金额
total_count: '' // 总数量
}
},
watch: {
list: {
deep: true,
handler: function(val){
let total_count = 0;
let total_price = 0;
// TODO 真正对接接口时，使用精度计算
val.map(s => {
s.goods.map(g => {
if(g.checked){
total_count++;
total_price += (g.price * g.count)
}
})
})
this.total_count = total_count;
this.total_price = total_price;
}
}
},
onLoad(){
this.token = this.$cookieStorage.get('user_token');
this.getCartList();
},
methods: {
checkboxChange(e) {
console.log(e)
getCartList(){
this.$http.get({
api: 'api/cart',
header: {
Authorization: this.token
}
}).then(res => {
console.log("===", res);
// TODO 此处为假数据 ------------------
let list = [{
name: '精品超市',
full_minus: '母婴产品教师节满1200减200',
goods: [{
checked: false,
img: 'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
name: '爱他美较大婴儿配方奶粉较大婴儿配方奶粉较大婴儿配方奶粉2段 900g',
count: 1,
spec: '900g',
price: '385'
},{
checked: false,
img: 'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
name: '基尼泰煤2000G',
count: 2,
spec: '900g',
price: '197'
}]
},{
name: '精品超市',
full_minus: '母婴产品教师节满1200减200',
goods: [{
checked: false,
img: 'https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png',
name: '爱他美较大婴儿配方奶粉较大婴儿配方奶粉较大婴儿配方奶粉2段 900g',
count: 4,
spec: '900g',
price: '99'
}]
}]
this.list = list;
// TODO 此处为假数据 end --------------
})
},
// 商品被勾选
goodsCheckChange(event, parentIndex, childIndex) {
this.list[parentIndex].goods[childIndex].checked = event.value;
let check_list = this.list.map(item => {
return item.goods.every(g => g.checked);
});
this.allChecked = check_list.every(a => a);
},
// 全选被改变
allCheckChange(event){
this.allChecked = event.value;
this.list.forEach(s => {
s.goods.forEach(g => {
g.checked = event.value;
})
})
},
// 结算
submit(){
if(this.total_count){
this.$url('/pages/order/confirm/confirm');
}else{
this.$msg('您未选择需要结算的商品');
}
}
}
}
@ -119,6 +206,9 @@
height: 130rpx;
border-radius: 5rpx;
}
.content-info{
width: 410rpx;
}
.online-card {
width: 686rpx;
height: auto;

Write Preview
Loading…
Cancel
Save