first commit

历届学生/front-end-team/项目练习/上课项目/电商app/fontend/src/pages/Account.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="account">
+
+    <div class="welcome" v-if="type == 1">
+      <img src="../../public/img/welcome_login.png" alt="">
+      <div class="login_but" @click="type = 3">登 录</div>
+      <div class="tips">还没有账号？快来 <span @click="type = 2">注册</span> </div>
+    </div>
+
+   <div v-else>
+     <div class="login_title">
+       <div class="back">
+         <div class="title">{{ type == 3 ? '登 录' : '注 册' }}</div>
+       </div>
+       <van-row type="flex" justify="center">
+         <van-col v-for="(item,index) in tabsTitle"
+                  :class="item.type == type ? 'active' : '' "
+                  @click="type = item.type" span="12" class="tabs_title">
+           <span>{{ item.title }}</span>
+         </van-col>
+       </van-row>
+     </div>
+     <div class="reg" v-if="type == 2">
+
+       <div class="input_filed">
+         <div class="tips">用户名</div>
+         <input type="text" v-model="params.name"/>
+       </div>
+
+       <div class="input_filed">
+         <div class="tips">密码</div>
+         <input type="password" v-model="params.pwd"/>
+       </div>
+
+       <div class="input_filed">
+         <div class="tips">手机号</div>
+         <input type="number" v-model="params.phone"/>
+       </div>
+
+       <div class="sub_filed" @click="addUser">注 册</div>
+     </div>
+
+     <div class="login" v-else-if="type == 3">
+
+       <div class="input_filed">
+         <div class="tips">用户名</div>
+         <input type="text" v-model="params.name"/>
+       </div>
+
+       <div class="input_filed">
+         <div class="tips">密码</div>
+         <input type="password" v-model="params.pwd"/>
+       </div>
+
+       <div class="sub_filed" @click="loginUser">登 录</div>
+
+     </div>
+   </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "account",
+  data() {
+    return {
+      params: {
+        name: '',
+        pwd: '',
+        phone: ''
+      },
+      tabsTitle: [
+        { title: '登 录', type: 3 },
+        { title: '注 册', type: 2 },
+      ],
+      type: 3, // 1 欢迎页面，2 注册，3 登录
+    }
+  },
+  methods: {
+    async addUser() {
+      if (this.params.name.length == 0) {
+        this.$toast.fail({
+          message: '用户名不能为空'
+        })
+        return false;
+      }
+
+      if (this.params.pwd.length == 0) {
+        this.$toast.fail({
+          message: '密码不能为空'
+        })
+        return false;
+      }
+
+      if (!this.$utils.checkPhone(this.params.phone)) {
+        this.$toast.fail({
+          message: '手机号不正确'
+        })
+        return false;
+      }
+
+      let res = await this.$http.user.add(this.params)
+      this.$toast.success({
+        message: '恭喜，注册成功！',
+        onClose: () => {
+          this.type = 3
+        }
+      })
+
+    },
+    async loginUser() {
+      if (this.params.name.length == 0) {
+        this.$toast.fail({
+          message: '用户名不能为空'
+        })
+        return false;
+      }
+
+      if (this.params.pwd.length == 0) {
+        this.$toast.fail({
+          message: '密码不能为空'
+        })
+        return false;
+      }
+
+      let res = await this.$http.user.login(this.params)
+      localStorage.setItem("token", res.token);
+      if (this.$route.query.hasOwnProperty("from")) {
+        this.$router.replace({
+          path: this.$route.query.from
+        })
+      } else {
+        this.$router.replace({
+          path: '/home'
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "~@page/account.less";
+</style>

历届学生/front-end-team/项目练习/上课项目/电商app/fontend/src/pages/Car.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="Car">
+    <van-nav-bar
+        title="购物车"
+        fixed
+        :right-text="status ? '管理' : '完成'"
+        left-arrow
+        @click-left="$router.back()"
+        @click-right="status = !status"
+    />
+
+
+    <div class="list">
+      <van-checkbox-group v-model="YouSelectCar" ref="checkboxGroup" @change="changeSelect">
+        <div class="item" v-for="(item,index) in getCarArr" :key="index">
+          <van-checkbox :name="item.car_id"></van-checkbox>
+          <van-card
+              :price="item.wares_nowprice"
+              :desc="item.wares_info"
+              :title="item.wares_title"
+              :thumb="item.wares_masterimg[0]">
+            <template #num>
+              <van-stepper :name="item.car_id" v-model="item.car_num" @change="numChange"/>
+            </template>
+          </van-card>
+        </div>
+      </van-checkbox-group>
+
+    </div>
+
+    <van-submit-bar :price="totalMoney">
+      <template #button>
+        <van-button v-if="status" type="danger" round @click="saveOrder"> 结 算 </van-button>
+        <van-button v-else type="warning" round @click="deleteCar"> 删 除 </van-button>
+      </template>
+      <van-checkbox v-model="isChecked" @click="checkAll">全选</van-checkbox>
+    </van-submit-bar>
+
+
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations, mapActions } from 'vuex'
+
+export default {
+  name: "Car",
+  data() {
+    return {
+      status: true,
+      YouSelectCar: [], // 你选中的购物车商品的集合
+      isChecked: false
+    }
+  },
+  async created() {
+    if (this.getCarArr.length == 0) {
+      await this.getCarList()
+    }
+  },
+  methods: {
+    ...mapMutations([
+        'setOrderList'
+    ]),
+    saveOrder() {
+      let order = []
+      this.getCarArr.forEach(v => {
+        this.YouSelectCar.forEach(j => {
+          if (v.car_id == j) {
+            order.push(v)
+          }
+        })
+      });
+
+      this.setOrderList(order)
+      this.$router.push('/order')
+    },
+    async numChange(nums, { name }) {
+      await this.$http.car.updateCarNum({
+        carid: name,
+        quantity: nums
+      })
+    },
+    async deleteCar() {
+      await this.$http.car.deleteCar({
+        carid: this.YouSelectCar
+      })
+      setTimeout(async ()=> await this.getCarList(), 300)
+    },
+    checkAll() {
+      if (this.isChecked) {
+        this.$refs.checkboxGroup.toggleAll(true);
+      } else {
+        this.$refs.checkboxGroup.toggleAll();
+      }
+    },
+    changeSelect(checked) {
+      if (this.getCarArr.length == this.YouSelectCar.length) {
+        this.isChecked = true
+      } else {
+        this.isChecked = false
+      }
+    },
+    ...mapActions([
+      'getCarList'
+    ]),
+  },
+  computed: {
+    totalMoney() {
+      let money = 0;
+      this.getCarArr.forEach(v => {
+        this.YouSelectCar.forEach(j => {
+          if (v.car_id == j) {
+            money += v.car_num * v.wares_nowprice
+          }
+        })
+      })
+      return money * 100
+    },
+    ...mapGetters([
+      'getCarArr'
+    ])
+  },
+}
+</script>
+
+<style scoped lang="less">
+@import "~@page/car.less";
+</style>

历届学生/front-end-team/项目练习/上课项目/电商app/fontend/src/pages/Home.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="home">
+
+    <div class="search">
+      <img src="../../public/img/logo.png" alt="">
+      <input type="text" placeholder="" >
+      <van-icon name="friends-o" color="#fff"/>
+    </div>
+
+    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+      <van-swipe-item>
+        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/102902bca7a9ccba097cc07d8b9dd65e.png?thumb=1&w=720&h=360" alt="">
+      </van-swipe-item>
+      <van-swipe-item>
+        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3b88e01cd560ff4fc2ec5b54dc81d630.jpg?thumb=1&w=720&h=360" alt="">
+      </van-swipe-item>
+    </van-swipe>
+
+
+    <van-grid :border="false">
+      <van-grid-item text="限时白嫖">
+        <template #icon>
+            <img src="../../public/img/type_1.png" />
+        </template>
+      </van-grid-item>
+      <van-grid-item text="新品推荐">
+        <template #icon>
+          <img src="../../public/img/type_2.png" />
+        </template>
+      </van-grid-item>
+      <van-grid-item text="低价高配">
+        <template #icon>
+          <img src="../../public/img/type_3.png" />
+        </template>
+      </van-grid-item>
+      <van-grid-item text="超值特卖">
+        <template #icon>
+          <img src="../../public/img/type_4.png" />
+        </template>
+      </van-grid-item>
+    </van-grid>
+
+    <van-row>
+      <van-col span="12">
+        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/16305100fd7913dd727e8906b97e8998.png?f=webp&w=537&h=762&bg=DDE2E6" alt="">
+      </van-col>
+      <van-col span="12">
+        <van-row>
+          <van-col span="24">
+            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f8a28a90c3c449ba422a10e40085d2e9.png?f=webp&w=537&h=378&bg=DBDEEF" alt="">
+          </van-col>
+          <van-col span="24">
+            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/200a6f45d1ccbf7d8fd92f4bbe2842d4.jpeg?f=webp&w=537&h=378&bg=F3E7E7" alt="">
+          </van-col>
+        </van-row>
+      </van-col>
+    </van-row>
+
+    <van-row>
+      <van-col span="24">
+        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/051b383d45f1fad5aa3bfae8851af7c4.png?f=webp&w=1080&h=660&bg=FFFFFF" alt="">
+      </van-col>
+    </van-row>
+
+    <van-row class="shop_list" gutter="5">
+      <van-col class="shop_item" span="12" v-for="(item,index) in list" :key="index">
+        <router-link :to="{ name: 'info', query: { id: item.wares_id } }">
+          <img :src="item.wares_masterimg[0]" alt="">
+          <div class="title">{{ item.wares_title }}</div>
+          <div class="desc">{{ item.wares_info }}</div>
+          <div class="price">{{ item.wares_nowprice }}</div>
+        </router-link>
+      </van-col>
+    </van-row>
+
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'HomeView',
+  data() {
+    return {
+      list: []
+    }
+  },
+  created() {
+    this.getIndex()
+  },
+  methods: {
+    async getIndex() {
+      let res = await this.$http.index.home();
+      this.list = res;
+      console.log(res)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "~@page/home.less";
+
+</style>

历届学生/front-end-team/项目练习/上课项目/电商app/fontend/src/pages/Info.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="info">
+
+    <div class="header_back" :style="{ background: `rgba(255,255,255,${opacity})` }">
+      <van-icon size="18" :class="isHidden ? 'default' : 'theme' " name="arrow-left" />
+      <van-icon size="18" :class="isHidden ? 'default' : 'theme' " name="shopping-cart-o" />
+    </div>
+
+    <van-tabs ref="mytab" :class=" isHidden ? 'hidden' : '' " v-model="active" scrollspy sticky>
+      <van-tab title="商品">
+        <SwipeComponents ref="mySwipe" :list="infoData.wares_masterimg">
+          <template #default="{ item }">
+            <img @click="showImgPri(item.index)" :src="item.src" alt="">
+          </template>
+
+        </SwipeComponents>
+        <div class="text">
+          <div class="price">￥5399</div>
+          <div class="title">小米12</div>
+          <div class="desc">「24期免息，信用卡分期至高立减500元；+99元得50W立式无线充；【全款支付套装】赠蓝牙耳机Air2 SE」</div>
+          <ul class="point_desc">
+            <li>【性能跃升】全新一代 骁龙8 移动平台</li>
+            <li>【性能跃升】全新一代 骁龙8 移动平台</li>
+            <li>【性能跃升】全新一代 骁龙8 移动平台</li>
+          </ul>
+
+          <van-contact-card
+              type="edit"
+              name="bmy"
+              tel="15155145354"
+          />
+
+        </div>
+      </van-tab>
+      <van-tab title="详情">
+        <div class="info_img">
+          <img v-for="(item,index) in infoData.wares_infoimg"
+               :key="index"
+               :src="item" @click="infoPreview(index)" alt="">
+        </div>
+      </van-tab>
+    </van-tabs>
+
+    <van-goods-action>
+      <van-goods-action-icon icon="chat-o" text="收藏" dot />
+      <van-goods-action-icon icon="cart-o" to="/car" text="购物车" :badge="getCarArr.length" />
+      <van-goods-action-button :class="isAddCar ? 'noclick' : '' " type="warning" @click="isAddCar ? '' : addCar() " text="加入购物车" />
+      <van-goods-action-button type="danger" text="立即购买" />
+    </van-goods-action>
+
+  </div>
+</template>
+
+<script>
+import SwipeComponents from "@/components/Swipe"
+import { ImagePreview } from 'vant';
+import { mapGetters, mapMutations, mapActions } from 'vuex'
+
+export default {
+  name: "info",
+  data() {
+    return {
+      active: 0,
+      opacity: 0,
+      infoData: {},
+      isHidden: true,
+      isAddCar: true
+    }
+  },
+  async created() {
+    await this.getCarList()
+    this.getInfo();
+    this.checkCar();
+  },
+  mounted() {
+    window.addEventListener("scroll", this.handleScroll);
+  },
+  destroyed() {
+    window.removeEventListener("scroll", this.handleScroll)
+  },
+  methods: {
+    ...mapActions([
+        'getCarList'
+    ]),
+    ...mapMutations([
+        'setCount'
+    ]),
+    async checkCar() {
+      let res = await this.$http.car.checkCar({
+        waresid: this.$route.query.id
+      });
+      this.isAddCar = res.isAddCar
+    },
+    async addCar() {
+      let res = await this.$http.car.addCar({
+        waresid: this.$route.query.id
+      });
+      this.isAddCar = true
+      await this.getCarList()
+    },
+    infoPreview(index) {
+      ImagePreview({
+        images: this.infoData.wares_infoimg,
+        startPosition: index
+      });
+    },
+    showImgPri(index) {
+      ImagePreview({
+        images: this.infoData.wares_masterimg,
+        startPosition: index,
+        onChange: (index) => {
+          this.$refs.mySwipe.to(index)
+        }
+      });
+    },
+    handleScroll() {
+      const scrollTop = window.pageYOffset;
+      this.opacity = scrollTop / 412
+      // 显示tab切换
+      if (scrollTop >= 50) {
+        this.isHidden = false
+        this.$refs.mytab.resize()
+      // 隐藏tab切换
+      } else {
+        this.isHidden = true
+      }
+    },
+    async getInfo() {
+      let res = await this.$http.index.info({
+        id: this.$route.query.id
+      });
+      this.infoData = res;
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCarArr',
+        'getTheme'
+    ])
+  },
+  components: {
+    SwipeComponents
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "~@page/info.less";
+</style>
+

历届学生/front-end-team/项目练习/上课项目/电商app/fontend/src/pages/Me.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="Me">
+    Me
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Me",
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

历届学生/front-end-team/项目练习/上课项目/电商app/fontend/src/pages/Order.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="order">
+
+    <van-nav-bar
+        title="确认订单"
+        fixed
+        left-arrow
+        @click-left="$router.back()"
+    />
+    <div class="content">
+      <van-contact-card
+          type="edit"
+          name="bmy"
+          tel="15155145354"/>
+
+      <van-card
+          v-for="(item,index) in getOrderArr"
+          :key="index"
+          :num="item.car_num"
+          :price="item.wares_nowprice"
+          :desc="item.wares_info"
+          :title="item.wares_title"
+          :thumb="item.wares_masterimg[0]">
+      </van-card>
+
+      <van-submit-bar :price="totalMoney" button-text=" 付 款 " @submit="onSubmit" />
+
+      <van-popup v-model="show" position="bottom" :style="{ height: '60%' }">
+        <van-button type="default" @click="changeOrderStatus"> 付 款 </van-button>
+      </van-popup>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations, mapActions } from 'vuex'
+
+export default {
+  name: "order",
+  data() {
+    return {
+      show: true
+    }
+  },
+  created() {
+    console.log(this.getOrderArr)
+  },
+  methods: {
+    async changeOrderStatus() {
+      let res = await this.$http.car.allOrder({
+        status: 0
+      });
+
+      let param = []
+
+      res.forEach(v => param.push(v.goods_id))
+
+      console.log(param)
+
+      let orderStatus = await this.$http.car.buyOrder({
+        goodsid: param
+      });
+
+      this.$toast.success({
+        message: '支付成功',
+        onClose: () => {
+          this.$router.replace('/status')
+        }
+      })
+
+      console.log(orderStatus)
+    },
+    async onSubmit() {
+      let param = []
+      this.getOrderArr.forEach(v => {
+        param.push({
+          waresid: v.wares_id,
+          goodsnum: v.car_num,
+          goodsprice: v.wares_nowprice,
+        })
+      })
+
+      let res = await this.$http.car.submitCar({
+        carList: param
+      });
+      this.show = true
+      console.log(res)
+    }
+  },
+  computed: {
+    totalMoney() {
+      let money = 0;
+      this.getOrderArr.forEach(v => {
+          money += v.car_num * v.wares_nowprice
+      })
+      return money * 100
+    },
+    ...mapGetters([
+      'getOrderArr'
+    ])
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "~@page/order.less";
+</style>

历届学生/front-end-team/项目练习/上课项目/电商app/fontend/src/pages/Type.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="Type">Type</div>
+</template>
+
+<script>
+export default {
+  name: "Type.vue",
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

历届学生/front-end-team/项目练习/上课项目/电商app/fontend/src/pages/layout.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="layout">
+    <router-view/>
+    <van-tabbar v-model="active" route>
+      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
+      <van-tabbar-item icon="search" to="/type">分类</van-tabbar-item>
+      <van-tabbar-item icon="friends-o" to="/car">购物车</van-tabbar-item>
+      <van-tabbar-item icon="setting-o" to="/me">我的</van-tabbar-item>
+    </van-tabbar>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      active: 0,
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+
+</style>

历届学生/front-end-team/项目练习/上课项目/电商app/fontend/src/pages/orderStatus.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="orderStatus">
+    <van-nav-bar
+        title="我的订单"
+
+        left-arrow
+        @click-left="$router.back()"
+    />
+    <van-tabs v-model="active" @change="tabsChange">
+      <van-tab :title="item.title" v-for="(item, index) in tabList" :key="index">
+        <van-card
+            v-for="(val,ix) in item.content"
+            :key="ix"
+            :num="val.car_num"
+            :price="val.wares_nowprice"
+            :desc="val.wares_info"
+            :title="val.wares_title"
+            :thumb="val.wares_masterimg[0]">
+        </van-card>
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "orderStatus",
+  data() {
+    return {
+      active: 0,
+      tabList: [
+        { type: -1, title: '全部', page: 1, totalPage: 0, content: [] },
+        { type: 0, title: '待付款', page: 1, totalPage: 0, content: [] },
+        { type: 1, title: '待发货', page: 1, totalPage: 0, content: [] },
+        { type: 2, title: '待收货', page: 1, totalPage: 0, content: [] },
+        { type: 3, title: '退款/售后', page: 1, totalPage: 0, content: [] },
+      ]
+    }
+  },
+  created() {
+    this.active = Number(this.$route.query.active) || 0
+    this.allOrder()
+  },
+  methods: {
+    tabsChange(index) {
+      this.active = index;
+      this.allOrder()
+    },
+    async allOrder() {
+      if (this.tabList[this.active].content.length == 0 ) {
+
+        let res = await this.$http.car.allOrder({
+          status: this.tabList[this.active].type
+        });
+
+        console.log(res)
+
+
+        this.tabList[this.active].content = [
+          ...this.tabList[this.active].content,
+          ...res
+        ]
+      }
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>