樱花云服务器永久免费服务器地址 樱花云商城

文章目录

• 一、网站题目
• 二、网站描述
• 三、网站演示

• 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轮播图代码说明
• 1.4购物车列表
• 2.1缩略图显示
• 3.1添加修改商品

一、网站题目

在线云商城，基于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')
    }
  }  
}`