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

Merge branch 'master' of http://8.134.10.79:3000/Leadfyy.co/ec.uniapp-master

master
Enzo 4 years ago
parent
24004f4a5d de967a172c
commit
0ce3e7355f
11 changed files with 264 additions and 378 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. 34
      components/lf-indexFind/lf-indexFind.vue
  2. 2
      components/lf-nav/lf-nav.vue
  3. 19
      components/lf-seckill/lf-seckill.vue
  4. 20
      pages/index/category/category.vue
  5. 225
      pages/index/category/testdata.js
  6. 83
      pages/index/index/index.vue
  7. 42
      pages/index/list/monthlyList.vue
  8. 43
      pages/index/list/selected.vue
  9. 1
      pages/shop/search.vue
  10. 17
      pages/shop/seckillList.vue
  11. 156
      pages/store/cart/cart.vue

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

@ -1,14 +1,14 @@
<template>
<view class="centent">
<view class="title" @click="$url('/pages/discover/discover')">精选发现好物</view>
<scroll-view class="find-scroll" :scroll-x="true">
<scroll-view class="find-scroll" :scroll-x="true" @scroll="scroll">
<view class="find-content">
<!-- :class="{'max-item': index == 0}" -->
<view class="find-item"
<view class="find-item" :id="'find_'+ (index+1)"
:class="{'max-item': index+1 == show_item}"
@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>
@ -26,14 +26,30 @@
},
data(){
return {
current: 0
current: 0,
scroll_view: 'find_1',
show_item: 1 // 当前显示的是第几个卡片
}
},
created(){
},
methods: {
scroll(event){
var currentLeft = event.detail.scrollLeft; // 当前已滚动的距离
var length = this.list.length;
var itemWidth = uni.upx2px(380); // 页面元素.find-item rpx转为px
var itemRight = uni.upx2px(20); // 页面元素.find-item 右边距
var itemTotalW = itemWidth + itemRight;
var totalW = length * itemTotalW; // 1000 200
var startW = currentLeft > itemTotalW ? currentLeft : itemTotalW;
var number = Math.ceil(startW / totalW * length); // 得到当前是第几个元素
// scrollLeft 已被滚动到元素一半宽度
if(number * itemTotalW - (itemTotalW/2) <= currentLeft){
this.show_item = number + 1; // 得到变大的元素
}else{
this.show_item = number;
}
}
}
}
</script>

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;
}
}
}

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

@ -11,11 +11,11 @@
</view>
<!-- 分类 -->
<view class="page" v-if="current == 0 && dataArr.length">
<scroll-view class="left_view p_r" scroll-y :style="{ height: autoHeight }">
<scroll-view class="left_view p_r" :scroll-into-view="left_tabview" scroll-y :style="{ height: autoHeight }">
<block v-for="(item, index) in dataArr" :key="index">
<view :class="[left_selectIndex == index ? 'left_item_s' : '', 'left_item']" :id="'left_' + index" @click="leftTap({ item, index })">{{ item.name }}</view>
</block>
<view class="seletItem" :style="{ top: left_selectIndex * 60 - 19 + 'px' }"></view>
<view class="seletItem" :id="'tab_'+ left_selectIndex" :style="{ top: left_selectIndex * 60 - 19 + 'px' }"></view>
</scroll-view>
<scroll-view @scroll="rightScroll" class="right_view" scroll-y :style="{ height: autoHeight }" :scroll-into-view="'left_' + right_selectIndex" scroll-with-animation>
@ -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 = ''">
@ -92,7 +92,6 @@
<script>
import lfNav from '@/components/lf-nav/lf-nav.vue';
import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue';
import testdata from './testdata.js';
let app = getApp();
export default {
@ -102,6 +101,7 @@
subItemW: 0,
left_selectIndex: 0,
right_selectIndex: 0,
left_tabview: 'tab_0', // 默认和left_selectIndex对应，scroll-view定位到的左侧tab元素
ttscrollH: 0, //总高度
placeholderH: 0, //占位高度
heighArr: [],
@ -271,6 +271,10 @@
// return;
// }
this.left_selectIndex = findInx;
this.left_tabview = '';
setTimeout(() => {
this.left_tabview = 'tab_'+ findInx; // TODO 待验证是否跟随滚动
}, 0);
},
// 计算高度
computerH: function() {
@ -302,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;
}
}
}
}

225
pages/index/category/testdata.js
View File

@ -1,225 +0,0 @@
export default [{
name: '面部护肤',
subArr: [{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
}
]
},
{
name: '香水彩妆',
subArr: [{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
}
]
},
{
name: '精致洗护',
subArr: [{
img: 'https://picsum.photos/200',
name: '名称2'
},
{
img: 'https://picsum.photos/200',
name: '名称2'
}
]
},
{
name: '国际精品',
subArr: [{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
},
{
img: 'https://picsum.photos/200',
name: '水果2'
}
]
},
{
name: '服装内衣',
subArr: [{
img: 'https://picsum.photos/200',
name: '悲剧2'
},
{
img: 'https://picsum.photos/200',
name: '悲剧2'
}
]
},
{
name: '首饰配饰',
subArr: [{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
},
{
img: 'https://picsum.photos/200',
name: '名称'
}
]
},
{
name: '数码家电',
subArr: [{
img: 'https://picsum.photos/200',
name: '悲剧2'
},
{
img: 'https://picsum.photos/200',
name: '悲剧2'
}
]
},
{
name: '鞋履箱包',
subArr: [{
img: 'https://picsum.photos/200',
name: '悲剧2'
},
{
img: 'https://picsum.photos/200',
name: '悲剧2'
}
]
},
{
name: '滋补保健',
subArr: [{
img: 'https://picsum.photos/200',
name: '悲剧2'
},
{
img: 'https://picsum.photos/200',
name: '悲剧2'
}
]
},
{
name: '好好说说',
subArr: [{
img: 'https://picsum.photos/200',
name: '悲剧2'
},
{
img: 'https://picsum.photos/200',
name: '悲剧2'
}
]
}
]

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;

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

@ -9,7 +9,10 @@
<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>
<view class="ranking">
<view class="top">{{ item+1 }}</view>
<view class="down"></view>
</view>
</view>
<view class="goods-info">
<view>
@ -103,23 +106,26 @@
top: 0;
left: 0;
width: 36rpx;
height: 38rpx;
background-color: #15716E;
color: #FFFFFF;
line-height: 38rpx;
text-align: center;
z-index: 9;
&::after{
content: '';
position: absolute;
bottom: -16rpx;
left: 2rpx;
width: 0rpx;
height: 0rpx;
border-left: 17rpx solid transparent;
border-right: 17rpx solid transparent;
border-top: 17rpx solid #15716E;
z-index: -1;
height: 56rpx;
overflow: hidden;
.top{
width: 36rpx;
height: 36rpx;
background-color: #15716E;
position: relative;
z-index: 3;
text-align: center;
color: #FFFFFF;
font-size: 28rpx;
}
.down{
width: 36rpx;
height: 36rpx;
background-color: #15716E;
transform: rotate(45deg);
margin-top: -26rpx;
position: relative;
z-index: 1;
}
}
}

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

@ -16,7 +16,10 @@
<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>
<view class="ranking">
<view class="top">{{ item+1 }}</view>
<view class="down"></view>
</view>
</view>
<view class="goods-info">
<view class="lf-line-1">猪大肠卖咯 5毛钱一斤咯</view>
@ -119,28 +122,32 @@
background-color: #EEEEEE;
border-radius: 10rpx;
}
.ranking{
position: absolute;
top: 0;
left: 0;
width: 36rpx;
height: 38rpx;
background-color: #15716E;
color: #FFFFFF;
line-height: 38rpx;
text-align: center;
z-index: 9;
&::after{
content: '';
position: absolute;
bottom: -16rpx;
left: 2rpx;
width: 0rpx;
height: 0rpx;
border-left: 17rpx solid transparent;
border-right: 17rpx solid transparent;
border-top: 17rpx solid #15716E;
z-index: -1;
height: 56rpx;
overflow: hidden;
.top{
width: 36rpx;
height: 36rpx;
background-color: #15716E;
position: relative;
z-index: 3;
text-align: center;
color: #FFFFFF;
font-size: 28rpx;
}
.down{
width: 36rpx;
height: 36rpx;
background-color: #15716E;
transform: rotate(45deg);
margin-top: -26rpx;
position: relative;
z-index: 1;
}
}
}

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