第三篇 Scrum冲刺博客
一、会议图片
二、项目进展
成员 | 完成情况 | 今日任务 |
冯荣新 | 商品列表,商品详情轮播图 | 商品底部工具栏,购物车列表 |
陈泽佳 | 历史足迹,静态页面 | 渲染搜索结果,防抖的实现 |
徐伟浩 | 未完成 | 商品信息录入 |
谢佳余 | 未完成 | 商品信息录入 |
邓帆涛 | 未完成 | 意见反馈 |
三、部分代码
import {request} from '../../request/http.js';
import regeneratorRuntime from '../../lib/runtime/runtime.js'; /*图片预料:
1. 调用小程序的api wx.previewImage(Object object)
加入购物车
1. 绑定事件
2. 获取缓存中的购物车数据, 数组格式
3. 判断当前商品已经存在, 则修改该商品数据
1. 商品收藏
1。 onshow 的时候需要加载缓存中的数据,判断当前商品是否收藏,
* */
Page({
/**
* 页面的初始数据
*/
data: {
// 商品详情信息
goodsInfo:{},
// 商品是否被收藏
isCollect:true
},
// 商品id
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const {goods_id}=options;
this.getGoodsInfo(goods_id);
}, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { },
// 获取商品详情
async getGoodsInfo(goodsId){
const result=await request({name:'goodsInfo',data:{goods_id:goodsId}});
let collect=wx.getStorageSync('collect')||[];
// 判断当前商品是否被收藏
let {goods_id}=result.data.message;
let isCollect=collect.some(v=>v.goods_id==goods_id)
this.setData({
goodsInfo:result.data.message,isCollect
})
},
// 轮播图预料
handlePreviewImage(e){
let newArr=this.data.goodsInfo.pics.map(item=>item.pics_mid)
wx.previewImage({
current:e.currentTarget.dataset.url,
urls: newArr
})
},
// 点击加入购物车
handCartAdd(){
// 获取缓存中购物车数组 [{goods_id:Number,goods_count:Number},...]
let cart=wx.getStorageSync('cart') || [];
let i=cart.findIndex(v=>v.goods_id == this.data.goodsInfo.goods_id)
if (i !==- 1){
// 存在
cart[i].goods_count+=1;
}else {
// 新商品
let {goods_id,goods_name,goods_price,goods_small_logo}=this.data.goodsInfo;
let obj={goods_id,goods_name,goods_price,goods_small_logo,checked:false,goods_count:1}
cart.push(obj)
}
wx.setStorageSync('cart', cart);
wx.showToast({
title: '加入成功',
mask:true
})
},
// 商品收藏
handleAddCollect(){
let collect=wx.getStorageSync('collect')||[];
// 判断该商品是否被收藏过
let {goods_id,goods_name,goods_price,goods_small_logo}=this.data.goodsInfo;
let index=collect.findIndex(v=>v.goods_id ==goods_id);
if(index != -1){
// 移除收藏
collect.splice(index,1)
}else {
collect.push({goods_id,goods_name,goods_price,goods_small_logo})
}
wx.showToast({title: "操作成功", icon: 'success', mask:true})
this.setData({isCollect:index==-1})
wx.setStorageSync('collect', collect);
},
/* pages/goods_detail/index.scss */
page{
padding-bottom: 90rpx;
}
.detail_swiper{
swiper{
height: 65vw;
text-align: center;
image{
width: 60%;
}
}
}
.goods_info{
.goods_price{
padding: 15rpx;
font-size: 35rpx;
font-weight: 600;
color: var(--themeColor);
}
.row{
display: flex;
.goods_name{
flex: 5;
color: black;
font-size: 30rpx;
padding: 0 10rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
}
.goods_collect{
flex: 1;
text-align: center;
border-left: 1px solid #ccc;
}
}
} .goods_introduce{
.title{
font-size: 32rpx;
color: var(--themeColor);
font-weight: 600;
padding: 20rpx;
border-bottom: 1px solid black;
margin: 20rpx 0;
}
.content{}
} .btm_tool{
position: fixed;
bottom: 0;
width: 100%;
height: 90rpx;
background-color: white;
display: flex;
text-align: center;
border-top: 1px solid #ccc;
.item{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
button{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
}
.btn_cart{
flex: 2;
background-color: orange;
color: white;
font-size: 30rpx;
font-weight: 600;
}
.btn_buy{
flex: 2;
color: white;
background-color: red;
font-size: 30rpx;
font-weight: 600;
}
}
<!--pages/goods_detail/index.wxml-->
<view>
<!--轮播图-->
<view class="detail_swiper">
<swiper indicator-dots autoplay circular>
<swiper-item wx:for="{{goodsInfo.pics}}" wx:key="pics_id" bindtap="handlePreviewImage" data-url="{{item.pics_mid}}">
<image src="{{item.pics_mid}}" mode="widthFix"></image>
</swiper-item>
</swiper>
</view>
<!--商品详情-->
<view class="goods_info">
<view class="goods_price">¥{{goodsInfo.goods_price}}</view>
<view class="row">
<view class="goods_name">{{goodsInfo.goods_name}}</view>
<view class="goods_collect" bindtap="handleAddCollect">
<text class="iconfont {{isCollect?'icon-xing':'icon-xingxu'}}" style="color: red"></text>
<view class="collect_text">收藏</view>
</view>
</view>
</view>
<!--商品介绍-->
<view class="goods_introduce">
<view class="title">图文详情</view>
<view class="content">
<rich-text nodes="{{goodsInfo.goods_introduce}}"></rich-text>
</view>
</view>
<!--工具栏-->
<view class="btm_tool">
<view class="item">
<text class="iconfont icon-kefu"></text>
<view>客服</view>
<button open-type="contact"></button>
</view>
<view class="item">
<text class="iconfont icon-fenxiang"></text>
<view>分享</view>
<button open-type="share"></button>
</view>
<navigator class="item" url="/pages/cart/index" open-type="switchTab">
<text class="iconfont icon-gouwuche"></text>
<view>购物车</view>
</navigator>
<view class="item btn_cart" bindtap="handCartAdd">
<text>加入购物车</text>
</view>
<view class="item btn_buy">
<text>立即购买</text>
</view>
</view>
</view>
四、截图
五、每日总结
成员 | 总结 |
冯荣新 | 今天的任务还是有点难度的,花费了不少时间 |
陈泽佳 | 通过学习,前端知识运用更加熟练 |
徐伟浩 | 对数据库的理解更加深刻 |
谢佳余 | 很轻松的录入数据【狗头】 |
邓帆涛 | 意见反馈难度很大,内容有点多 |
第三篇 Scrum冲刺博客的更多相关文章
- 第三篇Scrum冲刺博客
第三篇Scrum冲刺博客 一.站立式会议 提供当天站立式会议照片一张 二.每个人的工作 成员 已完成工作 明天计划完成的工作 遇到的困难 林剑峰 初步完成用户界面 用户界面跳转到用户信息页面的按钮,设 ...
- 第三篇Scrum冲刺博客--Interesting-Corps
第三篇Scrum冲刺博客 站立式会议 1.会议照片 2.队友完成情况 团队成员 昨日完成 今日计划 鲍鱼铭 主页页面跳转社区功能及社区设计及布局实现 搜索页面跳转.设计及布局实现 叶学涛 编写个人页面 ...
- Beta阶段——第三篇 Scrum 冲刺博客
i. 提供当天站立式会议照片一张: ii. 每个人的工作 (有work item 的ID) (1) 昨天已完成的工作: 账单与舍费余额数据库关联,删除功能 (2) 今天计划完成的工作: 账单排序显示 ...
- 团队作业4:第三篇Scrum冲刺博客(歪瑞古德小队)
目录 一.Daily Scrum Meeting 1.1 会议照片 1.2 项目进展 二.项目燃尽图 三.签入记录 3.1 代码/文档签入记录 3.2 Code Review 记录 3.3 issue ...
- 2020.5.23 第三篇 Scrum冲刺博客
Team:银河超级无敌舰队 Project:招新通 项目冲刺集合贴:链接 目录 一.每日站立会议 二.项目燃尽图 三.签入记录 3.1 代码/文档签入记录 3.2 主要代码截图 3.3 程序运行截图 ...
- 第三篇 Scrum 冲刺博客
一.站立式会议 1. 会议照片 2. 工作汇报 团队成员名称 昨日(24日)完成的工作 今天(25日)计划完成的工作 工作中遇到的困难 陈锐基 - 个人信息编辑后与组件关联- 表白墙数据用 Vuex ...
- Beta阶段第三篇Scrum冲刺博客-Day2
1.站立式会议 提供当天站立式会议照片一张 2.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 张晨晨:熟悉代码 郭琪容:了解复习模块需要的部分知识 ...
- Beta阶段——第2篇 Scrum 冲刺博客
Beta阶段--第2篇 Scrum 冲刺博客 标签:软件工程 一.站立式会议照片 二.每个人的工作 (有work item 的ID) 昨日已完成的工作 人员 工作 林羽晴 完成https安全连接的问题 ...
- Beta阶段——第3篇 Scrum 冲刺博客
Beta阶段--第3篇 Scrum 冲刺博客 标签:软件工程 一.站立式会议照片 二.每个人的工作 (有work item 的ID) 昨日已完成的工作 人员 工作 林羽晴 完成了报表数据的接口函数 顾 ...
随机推荐
- abp框架Excel导出——基于vue
abp框架Excel导出--基于vue 目录 abp框架Excel导出--基于vue 1.技术栈 1.1 前端采用vue,官方提供 1.2 后台是abp--aspnetboilerplate 2. E ...
- PHP curl_share_init函数
(PHP 5 >= 5.5.0) curl_share_init — 初始化一个 cURL 共享句柄 说明 resource curl_share_init ( void ) 允许两个 cURL ...
- PDO::lastInsertId
PDO::lastInsertId — 返回最后插入行的ID或序列值(PHP 5 >= 5.1.0, PECL pdo >= 0.1.0) 说明 语法 string PDO::lastIn ...
- PDOStatement::fetchColumn
PDOStatement::fetchColumn — 从结果集中的下一行返回单独的一列.(PHP 5 >= 5.1.0, PECL pdo >= 0.9.0)高佣联盟 www.cgewa ...
- Skill 脚本演示 ycFloatUpLayer.il
https://www.cnblogs.com/yeungchie/ ycFloatUpLayer.il 将选中 instance 中的指定 lpp "上浮". 回到目录
- ZR 提高十连 DAY 4
哇 这题目怎么一次比一次毒瘤 当然这次还好 有会做的题目. T1 一眼看上去 毒瘤!再看一眼 我真不想看了 扔了. T2 哇感觉能写 哇这不是 随便都有40分了么 二分?优化一下65到手了.然后剩下的 ...
- 基于深度学习的人脸识别系统Win10 环境安装与配置(python+opencv+tensorflow)
一.需要下载的软件.环境及文件 (由于之前见识短浅,对Anaconda这个工具不了解,所以需要对安装过程做出改变:就是Python3.7.2的下载安装是可选的,因为Anaconda已经为我们解决Pyt ...
- BiMPM:Bilateral Multi-Perspctive Matching for Natural Language Sentences
导言 本论文的工作主要是在 'matching-aggregation'的sentence matching的框架下,通过增加模型的特征(实现P与Q的双向匹配和多视角匹配),来增加NLSM(Natur ...
- java web Session会话技术(原理图解+功能+与Cookie的区别+基本使用)
java web Session会话技术(原理图解+功能+与Cookie的区别+基本使用) 这是我关于会话技术的第二篇文章,对 Cookie有不了解的兄弟可以点击下方的Cookie跳转 Cookie链 ...
- ArrayList继承关系分析
目录 继承关系 Iterable Collection List AbstractCollection AbstractList RandomAccess Serializable Cloneable ...