概述
你是不是也想像上图那样，坐在家里悠哉悠哉，美衣靓装买不停，我就是一枚这样的宅女。这不，学了微信小程序也快两个月了，正发愁做个什么项目练练手，日常逛淘宝京东了解下，这时候就想着要不就做个电商平台吧。解释一下，这个项目专为美铝量身定做的哦，至于帅锅嘛，emmmm...，还是可以进来的啦啦啦哈哈哈哈
细节介绍
1.首页
首页由swiper和图片分类以及详细信息组成，首页整体采用的是弹性布局这样的布局方式，弹性布局能更好的兼容各种移动设备，在这里也推荐各位新手使用哦
2.分类
这里我写了两个分类页面，它们的功能是一样的
分类页导航栏
wxml
<scroll-view class="container" scroll-x="true"><view class="box" wx:for="{{bodyList}}" wx:key="{{index}}"><view id="{{index}}" class="weui_hd {{activeIndex == index ? 'on' :''}}"bindtap="tabClick">{{item.title}}</view></view><view class="detail {{current == 0 ? '' : 'hide'}}">我是1</view><view class="detail {{current == 1 ? '' : 'hide'}}">我是2</view><view class="detail {{current == 2 ? '' : 'hide'}}">我是3</view></scroll-view>复制代码
wxss
.container {white-space: nowrap;}.box {display: inline-block;}.weui_hd {padding: 0 10rpx;}.on {border-bottom: 4rpx solid red;color: red;}.hide {display: none;}复制代码
js
data: {current:0,bodyList:[{id:'1',title:'女装'},{id:'2',title:'时尚套装'},{id:'3',title:'T恤'},{id:'4',title:'连衣裙'},{id:'5',title:'短裙'},{id:'6',title:'雪纺衫'},{id:'7',title:'休闲裤'},{id:'8',title:'半身裙'},{id:'9',title:'牛仔裤'},{id:'10',title:'衬衫'},{id:'11',title:'背带裤'}],activeIndex: 0,},tabClick: function(e) {var id = e.currentTarget.id;this.setData({activeIndex:id,current: id}) }复制代码
3.商品详情页
4.购物车
底部tabBar
wxml
<view class="detail-nav"><view class="nav"><image src="/image/shouye.png" /><p>首页</p></view><view class="nav"><image src="/image/kefu1.png"/><p>客服</p></view><view class="nav"><image src="/image/shoucang.png"/><p>收藏</p></view><button class="button-green" bindtap="addCart" formType="submit">加入购物车</button><button class="button-red" bindtap="immeBuy" formType="submit">立即购买</button></view>复制代码
wxss
.detail-nav {display: flex;flex-direction: row;align-items: center;float: left;background-color: #fff;position: fixed;bottom: 0;right: 0;z-index: 1;width: 100%;height: 100rpx;border: 1px solid #afa9a9;}.button-green {background-color: #4caf50; /* Green */}.button-red {background-color: #f44336; /* 红色 */}.detail-nav image {width: 60rpx;height: 60rpx;padding: 0 20rpx;}.nav {display: flex;flex-direction: column;justify-content: center;border-right: 1px solid #e9e9e9;}.nav p {font-size: 22rpx;text-align: center;}复制代码
底部弹框
js
addCart() {var that = this;var animation = wx.createAnimation({duration:500,timingFunction:'linear'})that.animation = animation;animation.translateY(200).step();that.setData({animationData:animation.export(),chooseSize:true})setTimeout(function(){animation.translateY(0).step()that.setData({animationData:animation.export()})},200)},hideModal() {var that = this;var animation = wx.createAnimation({duration:1000,timingFunction:'linear'})that.animation = animation;animation.translateY(200).step();that.setData({animationData:animation.export()})setTimeout(function(){animation.translateY(0).step()that.setData({animationData:animation.export(),chooseSize:false})},200)}复制代码
购物车中页面的数据交互
js(通过setStorage将数据存至storage)
addToCart() {var color='';this.data.activeIndex == '' ? (wx.showModal({content: '请选择颜色', success: function(res) {} }) ): color = this.data.colorList[this.data.activeIndex].title;// console.log(color);var size='';this.data.currentIndex == '' ? (wx.showModal({content: '请选择尺码', success: function(res) {} }) ): size = this.data.bodyList[this.data.currentIndex].title;// console.log(size)var num = this.data.num;var text = `已选择： ${color} ${size}`var mode = {num: num,text:text,price:this.data.price,title:this.data.title,src:this.data.src,selected:false}this.setData({mode:mode})// console.log(mode)color == '' || size == ''?'':wx.setStorage({key: 'goods',data: this.data.mode,success: function(res){wx.showToast({ title: '加入购物车成功', icon: 'success', duration: 2000 }),wx.navigateTo({url: '/pages/cart/cart'})}});// console.log(this.data.mode)this.hideModal()}复制代码
js(通过getStorage获取数据)
var that = this;var carts = [];wx.getStorage({key: 'goods',success: function(res){// console.log(res.data)carts.push(res.data)that.setData({hasList:true,cart:carts})console.log(this.data.cart)// console.log(that.data.goods)}});复制代码
5.搜索框
搜索框原始状态
搜索：
也附上代码扒
wxml
<view class="container"><input type="text" bindinput="search" value="{{input}}" placeholder="搜索"/><p bindtap="inputSearch">{{search}}</p></view><view class="row" ><navigator class="row-col" url="{{item.url}}" wx:for="{{searchList}}" wx:key="index"><image src="{{item.src}}"/><text>{{item.name}}</text><p>￥{{item.price}}元</p></navigator></view>复制代码
js
if(value != '') {let array = [];this.data.clothes.forEach(item => {// console.log(item.name.indexOf(value)==-1)item.name.indexOf(value)==-1?'':array.push(item)});this.setData({searchList: array})}复制代码
6.个人信息栏
授权登录
确认是否登录
登录成功
emmm......
这里附上代码了
wxml
<view class="weui-cells"><view class="weui-cell weui-cell_access head" wx:if="{{canIUser}}" bindtap="getUserInfo" hover-class="weui-cell_active"><view class="weui-cell__hd"><!-- <view class="images"><open-data type="userAvatarUrl"></open-data></view> --><image src="{{userInfo.avatarUrl}}"/></view><view class="weui-cell__bd"><!-- <open-data type="userNickName"></open-data> --><view class="name">{{userInfo.nickName}}</view><view class="stu_id">{{stu_id}}</view></view><view class="weui-cell__ft weui-cell__ft_in-access"></view></view><view><button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button></view></view>复制代码
js
getUserInfo: function() {wx.getUserInfo({success: res => {// 可以将 res 发送给后台解码出 unionIdapp.globalData.userInfo = res.userInfo;app.globalData.iv = res.iv;app.globalData.encryptedData = res.encryptedData;this.setData({userInfo:app.globalData.userInfo})}})}复制代码
好了，就这样吧，后续持续更新中，欢迎关注。如果您还满意的话，就请给个赞咯，谢谢！github上也可以给个小星星！
附上我的github地址：失忆三叶草
