Delicate girl蘑菇街女装 精品时尚等你来

概述

你是不是也想像上图那样，坐在家里悠哉悠哉，美衣靓装买不停，我就是一枚这样的宅女。这不，学了微信小程序也快两个月了，正发愁做个什么项目练练手，日常逛淘宝京东了解下，这时候就想着要不就做个电商平台吧。解释一下，这个项目专为美铝量身定做的哦，至于帅锅嘛，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 发送给后台解码出 unionId
        app.globalData.userInfo = res.userInfo;
        app.globalData.iv = res.iv;
        app.globalData.encryptedData = res.encryptedData;
        this.setData({
          userInfo:app.globalData.userInfo
        })
      }
    })
  }
复制代码

好了，就这样吧，后续持续更新中，欢迎关注。如果您还满意的话，就请给个赞咯，谢谢！github上也可以给个小星星！

附上我的github地址：失忆三叶草

转载于:https://juejin.im/post/5b1e50ac6fb9a01e66165707