云商城开发文档

一、网站题目

在线云商城，基于HTML+CSS+Js+Vue制作。

二、网站描述

1. 使用Webstorm开发工具
2. node版本：v14.21.0
3. npm版本：6.14.17
4. 部分组件使用element ui及AG Grid实现

三、网站演示

1.主页

1.1轮播图

主体为轮播图，默认自动播放。可点击左右方向图标手动切换。其他点击项暂未开启使用。

1.2商品九宫格

双击图片框或查看详情按键可进入商品详情页，点击加入购物车直接添加到购物车列表

1.3个人中心信息显示

1.4购物车列表

2.商品详情页

2.1缩略图选择

2.2颜色选择

3.购物车页面

3.1添加修改商品

4.支付页面

4.1选择收货地址确认信息

4.2订单提交页面

4.3支付页面

​ 输入提示框中显示的金额才会提示支付成功

4.4订单页面

已完成订单和已下单未支付的区分显示，包括下单时间和订单完成时间，以及订单号。

5.收货地址设置页面

5.1预设置修改和默认地址选择

四、部分代码说明

1.1轮播图代码说明

 <el-carousel trigger="click" height="500px">
     //创建image存放图片
      <el-carousel-item v-for="(item,i) in image" :key="i">
        <img  class="" :src="item.img"/>
      </el-carousel-item>
    </el-carousel>
data: () => ({
      goodsData,

//创建修改img
      image:[
        {
          img:'https://vueshop-1314508737.cos.ap-beijing.myqcloud.com/tianxuan.jpg'
        },{
          img:'https://vueshop-1314508737.cos.ap-beijing.myqcloud.com/lingyao.jpg'
        },{
          img:'https://vueshop-1314508737.cos.ap-beijing.myqcloud.com/adou.jpg'
        }
      ],
    }
  ),

1.4购物车列表

computed:{
    carPanelData(){ //购物车数据
      return this.$store.state.carPanelData
    },
    calTotalCount(){//购物车总数量
      return this.$store.getters.calTotalCount
    },
    calTotalPrice(){//购物车总价格
      return this.$store.getters.calTotalPrice
    },
    carShow(){//购物车是否显示
      return this.$store.state.carShow
    },
    ball(){
      return this.$store.state.ball
    }
  },
  methods: {
    delCarPanelData(data) {//删除一条数据
      this.$store.commit('delCarPanelData',data)
    },
    showCar(ev){//显示购物车
      this.$store.commit('showCar')
    },
    hideCar(ev){//隐藏购物车
      if(!this.mousetoBall){//防止鼠标移入移动的小球 导致购物车隐藏
        this.$store.commit('hideCar')
      }
      this.mousetoBall = false
    },
    ballLeave(){//移入并移出了小球
      this.mousetoBall = true
    },

2.1缩略图显示

"sku_id": 100030201,
  "title": "a豆14 Pro 12代酷睿i5标压 2.5K高色域屏",
  "sub_title": "(全新12核i5-12500H 16G 512G 莱茵护眼屏)星际银海",
  "ali_image": "https://static.asus.com.cn/store/album/images/Y1BFMHBD5QWRK9/02162899565750.jpg",
  "price": 4599,
  "limit num": 20,
  "spec_json": {
    "image": "attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/",
    "show_name": "星际银海"
  },
//引入图片
  "ali_images": [
    "https://static.asus.com.cn/store/album/images/Y1BFMHBD5QWRK9/02162899565750.jpg",
    "https://static.asus.com.cn/store/album/images/ECBVE4855HQI54/09435054100981.png",
    "https://static.asus.com.cn/store/album/images/ECBVE4855HQI54/15460056569849.jpg",
    "https://static.asus.com.cn/store/album/images/ECBVE4855HQI54/15462751100985.jpg",
    "https://static.asus.com.cn/store/album/images/ECBVE4855HQI54/15462852514848.jpg"
  ],
  "limit_num": 20,
  "sku_list": [{
    "id": 100030201,
    "image": "attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/",
    "limit_num": 1,
    "color": "星际银海",
  }]

//修改图片大小格式
<ul>
                <li
                 :class="{'on':index ==curIndex}"
                 v-for="img,index in curData.ali_images"
                 @click = "tabIndex(index)"
                >
                  <img :src="img+'?x-oss-process=image/resize,w_54/quality,Q_80/format,webp'">
                </li>
              </ul>
            </div>
            <div class="thumb">
              <ul>
                <li :class="{'on':index == curIndex}" v-for="img,index in curData.ali_images">
                  <img :src="img+'?x-oss-process=image/resize,w_440/quality,Q_80/format,webp'">
                </li>
              </ul>

3.1添加修改商品

//计算商品总价  
<div class="shipping">
            <div class="shipping-box">
              <div class="shipping-total shipping-num">
                <h4 class="">
                  已选择 <i>{{goodsCheckedCount}}</i> 件商品
                </h4>
                <h5>
                  共计 <i >{{calTotalCount}}</i> 件商品
                </h5>
              </div>
              <div class="shipping-total shipping-price">
                <h4 class="">
                  应付总额：<span>￥</span><i >{{goodsCheckedPrice}}</i> 
                </h4>
                <h5 class="shipping-tips">
                  应付总额不含运费
                </h5>
                
              </div>
            </div>

computed:{
    carPanelData(){//购物车数据
      return this.$store.state.carPanelData
    },
    calTotalCount(){//购物车总数量
      return this.$store.getters.calTotalCount
    },
    isAllChecked(){//是否全选
      return this.$store.getters.isAllChecked
    },
    goodsCheckedCount(){//被选中商品总件数
      return this.$store.getters.goodsCheckedCount
    },
    goodsCheckedPrice(){//被选中的商品总价格
      return this.$store.getters.goodsCheckedPrice
    }
  },
  methods: {
    delCarPanelData(data) {//删除一条数据
      this.$store.commit('delCarPanelData',data)
    },
    plusCount(item){//增加商品数目
      this.$store.commit('plusCount',item)
    },
    supCount(item){//减少商品数目
      this.$store.commit('supCount',item)
    },
    toogleGoods(item){ //勾选单项商品
      this.$store.commit('toogleGoods',item)
    },
    toogleAllcheck(){ //全选 & 全不选
      this.$store.commit('toogleAllcheck',this.isAllChecked)
    },
    delAllcheckGoods(){//删除所有选中的商品
      this.$store.commit('delAllcheckGoods')
    }
  }  
}`