first commit

历届学生/逯帅帅/项目开发/上课项目/电商/src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

历届学生/逯帅帅/项目开发/上课项目/电商/src/views/Activity.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="activity">
+    <div class="header">
+      <div class="h-text">
+        <van-icon name="arrow-left" @click='$router.back()' />
+        <p>限时白嫖</p>
+      </div>
+    </div>
+    <ul class="content">
+      <item :item-list="activityList"></item>
+    </ul>
+  </div>
+
+
+
+</template>
+
+<script>
+export default {
+  name: 'Activity',
+  data() {
+    return {
+      activityList: []
+    }
+  },
+  created() {
+    this.getActivity();
+  },
+  methods: {
+    async getActivity() {
+      this.activityList = await this.$http.index.activity({
+        id: this.$route.query.id
+      });
+      console.log(this.activityList)
+    }
+  }
+}
+</script>
+
+<style scoped lang="stylus">
+@import "~@page/Activity.styl";
+</style>

历届学生/逯帅帅/项目开发/上课项目/电商/src/views/Car.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="car">
+    <van-nav-bar
+      fixed
+      title="购物车"
+      left-text="返回"
+      :right-text="isDelete ? '管理' : '完成'"
+      left-arrow
+      @click-right="isDelete = !isDelete"
+      @click-left="$router.back()"
+    />
+
+    <div class="content">
+      <!-- carChange是用户点击选中事件 -->
+      <van-checkbox-group
+        v-model="result"
+        @change="carChange"
+        ref="checkboxGroup"
+      >
+        <van-checkbox
+          style="margin-bottom: 10px"
+          :name="item.car_id"
+          v-for="(item, index) in list"
+          :key="index"
+        >
+          <transition name="fade">
+            <div @click.stop="">
+              <van-card
+                :price="item.wares_nowprice"
+                :desc="item.wares_info"
+                :title="item.wares_title"
+                @click="
+                  $router.push({ path: '/info', query: { id: item.wares_id } })
+                "
+                :thumb="item.wares_masterimg[0]"
+              >
+                <template #num>
+                  <div @click.stop="">
+                    <van-stepper v-model="item.car_num" integer />
+                  </div>
+                </template>
+              </van-card>
+            </div>
+          </transition>
+        </van-checkbox>
+      </van-checkbox-group>
+
+      <transition name="fade">
+        <van-submit-bar
+          v-show="isDelete == true"
+          :price="totalMoney"
+          button-text="提交订单"
+          @submit="onSubmit"
+        >
+          <van-checkbox v-model="ischeck" @click="test">全选</van-checkbox>
+        </van-submit-bar>
+      </transition>
+
+      <transition name="fade">
+        <van-submit-bar
+          v-show="isDelete == false"
+          class="delete"
+          button-text="删除"
+          @submit="deleteCarItem"
+        >
+          <van-checkbox v-model="ischeck" @click="test">全选</van-checkbox>
+        </van-submit-bar>
+      </transition>
+    </div>
+
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@c/Footer.vue";
+import { mapGetters, mapActions } from "vuex";
+
+export default {
+  data() {
+    return {
+      result: [],
+      ischeck: false,
+      isDelete: true,
+      //保存的是用户点击选中的商品id
+      ckeak: [],
+    };
+  },
+  created() {
+    this.getCarlist();
+  },
+  methods: {
+    //删除接口---------------------------------------------------------------
+    async deleteCarItem() {
+      await this.$http.index.deleteCar({
+        carid: this.result,
+      });
+      this.result = [];
+      this.getCarlist();
+    },
+    async getCarlist() {
+      await this.carAction("car");
+      console.log(this.list);
+      //打印的是购物车列表
+    },
+    //左边小圆点点击事件-----------------------------------------------------
+    carChange(selectArr) {
+      if (this.list.length == selectArr.length) {
+        this.ischeck = true;
+      } else {
+        this.ischeck = false;
+      }
+      // console.log(selectArr);
+      //赋值保存给空数组ckeak
+      this.ckeak = selectArr;
+    },
+    test() {
+      if (this.ischeck) {
+        this.$refs.checkboxGroup.toggleAll(true);
+      } else {
+        this.$refs.checkboxGroup.toggleAll();
+      }
+    },
+    ...mapActions({
+      carAction: "PUT_SET_CARLIST",
+    }),
+    // 点击提交按钮提交订单，需要自己构建carList对象，里面包含三个字段--------------------------------
+    async onSubmit() {
+      //提交给后端
+      let payList = {
+          carList: [],
+        },
+        //保存的是用户选中的商品，保存至vuex中
+        payment = [];
+      //购物车列表,是个数组
+      console.log(this.list);
+      //用户选中商品的id
+      console.log(this.ckeak);
+      // 遍历购物车列表
+      this.list.forEach((item, index) => {
+        // 判断购物车列表里面的商品id是否包含用户选中的商品id
+        if (this.ckeak.includes(item.car_id)) {
+          //相等就保存至payment
+          payment.push(item);
+          console.log(item);
+          //这里面是用户选中的商品信息，构造好返回给payLists,然后提交给后端
+          payList.carList.push({
+            waresid: item.wares_id,
+            goodsnum: item.car_num,
+            goodsprice: item.wares_nowprice,
+          });
+        }
+      });
+      //2.payment保存至vuex
+      //调用提交接口，把payList转换成字符串上传上去。
+      let res = await this.$http.index.submitCar(JSON.stringify(payList));
+      console.log(res);
+
+      //把payment提交给vuex
+      this.$store.commit("submit", payment);
+      //跳转至支付页面
+      this.$router.push("/payment");
+    },
+  },
+  components: {
+    Footer,
+  },
+  computed: {
+    totalMoney() {
+      let money = 0;
+
+      var chiooseList = [];
+
+      this.list.forEach((item) => {
+        this.result.forEach((v) => {
+          if (item.car_id == v) {
+            chiooseList.push(item);
+          }
+        });
+      });
+
+      chiooseList.forEach((v) => (money += v.wares_nowprice * v.car_num));
+
+      return money * 100;
+    },
+    ...mapGetters({
+      list: "GET_CARLIST",
+    }),
+  },
+};
+</script>
+
+<style scoped lang="stylus">
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+.van-card {
+  background #fff !important;
+}
+.delete .van-submit-bar__bar{
+  justify-content: space-between !important;
+}
+/deep/ .van-checkbox__label {
+  flex 1;
+  margin-left 0;
+}
+/deep/ .van-checkbox__icon {
+  width: 39px;
+  text-align center;
+}
+/deep/ .van-checkbox__icon .van-icon {
+  display inline-block;
+}
+/deep/ .van-card {
+  padding-left 0 !important;
+}
+/deep/ .van-card__bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+/deep/ .van-card__desc {
+  width: 222px;
+}
+  /deep/ .van-submit-bar {
+    bottom 50px
+  }
+.content {
+  margin-bottom 100px;
+  margin-top 45px;
+}
+</style>

历届学生/逯帅帅/项目开发/上课项目/电商/src/views/Home.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="home">
+    <Footer></Footer>
+    <div class="top">
+      <van-icon name="manager-o" class="icon" size=".5rem" />
+      <router-link tag="div" :to="{ path: 'Search' }" class="serch">
+        <van-icon name="search" size=".3rem" class="sou" />
+        <p>请输入关键字</p>
+      </router-link>
+    </div>
+
+    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+      <van-swipe-item>
+        <img src="/img/mi10.jpg" alt="" />
+      </van-swipe-item>
+      <van-swipe-item>
+        <img src="/img/mi10.jpg" alt="" />
+      </van-swipe-item>
+      <van-swipe-item>
+        <img src="/img/mi10.jpg" alt="" />
+      </van-swipe-item>
+    </van-swipe>
+
+    <ul class="banner">
+      <router-link
+        tag="li"
+        :to="{ path: '/activity', query: { id: item.id } }"
+        v-for="(item, index) in activity"
+        :key="index"
+      >
+        <img :src="item.img" alt="" />
+        <p>{{ item.title }}</p>
+      </router-link>
+    </ul>
+
+    <div class="girdes">
+      <img src="/img/left_1.jpg" alt="" />
+      <div class="imggird">
+        <img src="/img/left_2.jpg" alt="" />
+        <img src="/img/left_3.jpg" alt="" />
+      </div>
+    </div>
+
+    <img src="/img/mi10.jpg" alt="" class="banimg" />
+
+    <item :item-list="list"></item>
+  </div>
+</template>
+
+<script>
+import Footer from "@c/Footer.vue";
+export default {
+  data() {
+    return {
+      list: [],
+      activity: [
+        { id: 1, img: "/img/type_1.png", title: "限时白嫖" },
+        { id: 2, img: "/img/type_2.png", title: "新品推荐" },
+        { id: 3, img: "/img/type_3.png", title: "低价高配" },
+        { id: 4, img: "/img/type_4.png", title: "超值特卖" },
+      ],
+    };
+  },
+  created() {
+    this.getHome();
+  },
+  methods: {
+    async getHome() {
+      this.list = await this.$http.index.home();
+      console.log(this.list);
+    },
+  },
+  components: {
+    Footer,
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+@import '~@page/Home.styl';
+</style>

历届学生/逯帅帅/项目开发/上课项目/电商/src/views/Info.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="Info" ref="infos">
+    <div
+      class="header_top"
+      :style="{ background: `rgba(255, 255, 255, ${backColor})` }"
+    >
+      <van-icon
+        name="arrow-left"
+        :style="{ color: iconColor }"
+        @click="$router.back()"
+      />
+      <van-icon name="cart-o" :style="{ color: iconColor }" />
+    </div>
+
+    <van-swipe class="my-swipe" @change="onChange" :autoplay="3000">
+      <van-swipe-item
+        v-for="(item, index) in info.wares_masterimg"
+        :key="index"
+      >
+        <img :src="item" @click="showSwiper(index)" alt="" />
+      </van-swipe-item>
+
+      <template #indicator>
+        <div class="custom-indicator">{{ current + 1 }}/3</div>
+      </template>
+    </van-swipe>
+
+    <div class="content_info">
+      <div class="price">￥{{ info.wares_nowprice }}</div>
+      <div class="tite">{{ info.wares_title }}</div>
+      <div class="desc">{{ info.wares_info }}</div>
+    </div>
+
+    <div class="img">
+      <img
+        v-for="(v, i) in info.wares_infoimg"
+        @click="showImg(i)"
+        :key="i"
+        :src="v"
+        alt=""
+      />
+    </div>
+
+    <van-goods-action>
+      <van-goods-action-icon icon="chat-o" text="收藏" />
+      <van-goods-action-icon
+        @click="$router.push('/car')"
+        icon="cart-o"
+        text="购物车"
+        :badge="count"
+      />
+      <van-goods-action-button
+        type="warning"
+        :style="{
+          background: isAddCar
+            ? 'linear-gradient(to right,#c4c1b4,#c8c7c6)'
+            : '',
+        }"
+        @click="isAddCar ? '' : addCar()"
+        text="加入购物车"
+      />
+      <van-goods-action-button type="danger" text="立即购买" />
+    </van-goods-action>
+
+    <Preview
+      :images="info.wares_infoimg"
+      :is-show="showStatus"
+      @status="changeShowStatus"
+      :idx="infoIndex"
+    ></Preview>
+  </div>
+</template>
+
+<script>
+import Preview from "@c/Preview.vue";
+import { ImagePreview } from "vant";
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "Info",
+  data() {
+    return {
+      showStatus: false,
+      infoIndex: 0,
+      id: this.$route.query.id,
+      current: 0,
+      backColor: 0,
+      iconColor: "#fff",
+      info: {},
+      isAddCar: false, // false 可以添加，true 不可以添加
+    };
+  },
+  created() {
+    this.getInfoData();
+    this.checkCar();
+  },
+  mounted() {
+    window.addEventListener("scroll", this.paperScroll);
+  },
+  methods: {
+    ...mapMutations({
+      addCount: "SET_COUNT",
+    }),
+    // 添加购物车
+    async addCar() {
+      await this.$http.index.addCar({
+        waresid: this.id,
+      });
+      this.addCount();
+      this.$toast("加入成功");
+      this.isAddCar = true;
+    },
+    async checkCar() {
+      let res = await this.$http.index.checkCar({
+        waresid: this.id,
+      });
+      this.isAddCar = res.isAddCar;
+      console.log(this.isAddCar);
+    },
+    showSwiper(index) {
+      ImagePreview({
+        images: this.info.wares_masterimg,
+        startPosition: index,
+      });
+    },
+    changeShowStatus(status) {
+      this.showStatus = status;
+    },
+    showImg(i) {
+      this.infoIndex = i;
+      this.showStatus = true;
+    },
+    async getInfoData() {
+      let res = await this.$http.index.info({
+        id: this.id,
+      });
+      this.info = res;
+    },
+    onChange(index) {
+      this.current = index;
+    },
+    paperScroll() {
+      var top = document.documentElement.scrollTop;
+      var scrollTop = (top / 412).toFixed(1);
+      if (top >= 367) {
+        this.iconColor = "#000";
+      } else {
+        this.iconColor = "#fff";
+      }
+
+      if (scrollTop >= 1) {
+        this.backColor = 255;
+      } else {
+        this.backColor = scrollTop;
+      }
+    },
+  },
+  computed: {
+    ...mapGetters({
+      count: "GET_CARCOUNT",
+    }),
+  },
+  components: {
+    Preview,
+  },
+};
+</script>
+
+<style scoped lang="stylus">
+@import '~@page/Info.styl';
+</style>

历届学生/逯帅帅/项目开发/上课项目/电商/src/views/Login.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="login">
+    <img class="top" src="/img/topbacks.png" alt="" />
+    <div class="login_form">
+      <h2>{{ currentPage ? "登录" : "注册" }}</h2>
+
+      <div class="phone" v-if="!currentPage">
+        <img class="left" src="/img/phone.png" alt="" />
+        <input
+          type="text"
+          v-model="userform.phone"
+          placeholder="请收入手机号"
+        />
+        <img class="right" src="/img/zk.png" alt="" />
+      </div>
+
+      <div class="phone">
+        <img class="left" src="/img/phone.png" alt="" />
+        <input type="text" v-model="userform.name" placeholder="请输入用户名" />
+        <img class="right" src="/img/zk.png" alt="" />
+      </div>
+      <div class="pwd">
+        <img class="left" src="/img/pwd.png" alt="" />
+        <input
+          :type="isShow ? 'text' : 'password'"
+          v-model="userform.pwd"
+          placeholder="请输入密码"
+        />
+        <img
+          @click="isShow = !isShow"
+          class="right"
+          src="/img/eye.png"
+          alt=""
+        />
+      </div>
+
+      <div class="login_submit" @click="currentPage ? UserLogin() : UserReg()">
+        {{ currentPage ? "登录" : "注册" }}
+      </div>
+
+      <p class="tips">
+        {{ currentPage ? "还没有账号？" : "已有账号？" }}
+        <span @click="currentPage = !currentPage">{{
+          !currentPage ? "登录" : "注册"
+        }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentPage: true, // true login  false reg
+      isShow: false,
+      userform: {
+        name: "",
+        pwd: "",
+        phone: "",
+      },
+    };
+  },
+  created() {},
+  methods: {
+    async UserLogin() {
+      if (this.userform.name.length == 0) {
+        this.$toast.fail("用户必填");
+        return false;
+      }
+
+      if (this.userform.pwd.length == 0) {
+        this.$toast.fail("密码必填");
+        return false;
+      }
+
+      let res = await this.$http.user.login(this.userform);
+      console.log(res);
+      localStorage.setItem("token", res.token);
+      this.$router.replace("/");
+    },
+    async UserReg() {
+      if (!this.$util.checkPhone(this.userform.phone)) {
+        this.$toast.fail("手机号必须正确");
+        return false;
+      }
+
+      if (this.userform.name.length == 0) {
+        this.$toast.fail("用户必填");
+        return false;
+      }
+
+      if (this.userform.pwd.length == 0) {
+        this.$toast.fail("密码必填");
+        return false;
+      }
+      let res = await this.$http.user.reg(this.userform);
+
+      this.currentPage = true;
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+@import "~@page/Login.styl";
+</style>

历届学生/逯帅帅/项目开发/上课项目/电商/src/views/Me.vue

@@ -0,0 +1,74 @@
+<template lang="html">
+  <div class="me">
+    <div class="header">
+      <img class="set" src="/img/me_settin_2.png" alt="" />
+      <div class="user">
+        <img class="portrait" src="/img/user_head.png" alt="" />
+        <p>编码猿Code</p>
+      </div>
+    </div>
+    <div class="content">
+      <ul class="c-list">
+        <router-link
+          tag="li"
+          v-for="(item,index) in orderList"
+          :key="index"
+          :to="{ name: 'OrderForm', query: { active: index } }"
+        >
+          <img :src="item.img" alt="" />
+          <p>{{ item.title }}</p>
+        </router-link>
+      </ul>
+      <ul class="c-bottom">
+        <li class="address">
+          <div class="li-left">
+            <img src="/img/me_address.png" alt="" />
+            <p>收货地址</p>
+          </div>
+        </li>
+        <li class="collection">
+          <div class="li-left">
+            <img class="like" src="/img/me_like.png" alt="" />
+            <p>我的收藏</p>
+          </div>
+          <van-icon name="arrow" />
+        </li>
+        <router-link :to="{path:'Setting'}">
+          <li class="setting">
+            <div class="li-left">
+              <img src="/img/me_settin_2.png" alt="" />
+              <p>我的设置</p>
+            </div>
+            <van-icon name="arrow" />
+          </li>
+        </router-link>
+      </ul>
+    </div>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script src="http://at.alicdn.com/t/font_1929483_9rn8kpfc5av.css"></script>
+<script>
+import Footer from "@c/Footer.vue";
+export default {
+  data() {
+    return {
+      orderList: [
+        { title: '全部订单', img: '/img/me_1.png' },
+        { title: '待付款', img: '/img/me_2.png' },
+        { title: '待发货', img: '/img/me_3.png' },
+        { title: '待收货', img: '/img/me_4.png' },
+        { title: '退款/售后', img: '/img/me_5.png' }
+      ]
+    };
+  },
+  components: {
+    Footer,
+  },
+};
+</script>
+
+<style scoped lang="stylus">
+@import "~@page/Me.styl";
+</style>

历届学生/逯帅帅/项目开发/上课项目/电商/src/views/OrderForm.vue

@@ -0,0 +1,73 @@
+<template lang="pug">
+  .orderstatus
+    van-tabs(v-model='active' @change="StatusChange")
+      van-tab(:title='v.title' v-for="(v,i) in OrderList" , :v-if='activeList',:key="i")
+        van-card(v-for="(v,i) in res" :num='v.goods_num',
+          :price='v.goods_price',
+          :desc="v.wares_info.substring(0, 20) + '...'",
+          :title='v.wares_title',
+          :key="i"
+          :thumb='v.wares_masterimg[0]')
+          template(#footer)
+            van-tag(type='danger' v-if="v.goods_status == 0") 待付款
+            van-tag(type='warning' v-if="v.goods_status == 1") 待发货
+            van-tag(type='success' v-if="v.goods_status == 2") 待收货
+            van-tag(type='primary' v-if="v.goods_status == 3") 退款/售后
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      active: 0,
+      resStatus: [],
+      res: [],
+      OrderList: [
+        { title: "所有订单", id: -1, content: [] },
+        { title: "待付款", id: 0, content: [] },
+        { title: "待发货", id: 1, content: [] },
+        { title: "待收货", id: 2, content: [] },
+        { title: "退款/售后", id: 3, content: [] },
+      ],
+    };
+  },
+  created() {
+    console.log(this.$route.query.active);
+    if (this.$route.query.active) {
+      this.active = Number(this.$route.query.active);
+    }
+    this.allOrder();
+    this.StatusChange();
+  },
+  methods: {
+    StatusChange() {
+      if (this.activeList == undefined) {
+      } else {
+        this.allOrder();
+      }
+    },
+    async allOrder() {
+      this.res = await this.$http.index.allOrder({
+        status: this.OrderList[this.active].id,
+      });
+      this.res.forEach((v, i) => {
+        this.resStatus = v.goods_status;
+        console.log("v", this.resStatus);
+      });
+      // console.log("订单数据为：",this.OrderList)
+      console.log("数据res：", this.res);
+      // console.log("数据+++：",this.OrderList[this.active].content)
+    },
+  },
+  computed: {
+    activeList() {
+      return this.res.filter((val) => {
+        return val.goods_status;
+      });
+    },
+  },
+};
+</script>
+
+<style scoped></style>

历届学生/逯帅帅/项目开发/上课项目/电商/src/views/Payment.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <van-nav-bar left-text="返回" left-arrow @click-left="$router.back()" />
+
+    <van-card
+      v-for="(item, index) in zhifulist"
+      :price="item.goods_price"
+      :desc="item.wares_info.substring(0, 20) + '...'"
+      :title="item.wares_title"
+      :key="index"
+      :thumb="item.wares_masterimg[0]"
+    ></van-card>
+
+    <van-cell-group>
+      <van-cell title="配送方式" value="顺丰配送（免运费）" />
+      <van-cell title="发票类型" value="电子发票" />
+      <van-cell title="优惠卷" value="无" />
+    </van-cell-group>
+
+    <van-cell-group title="支付方式" class="bottom">
+      <van-cell title="余额" icon="paid">
+        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
+        <template #right-icon>
+          <van-checkbox v-model="checked"></van-checkbox>
+        </template>
+      </van-cell>
+    </van-cell-group>
+
+    <!-- 总价格 -->
+    <van-submit-bar :price="allMoney" button-text="支付" @submit="onSubmit" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //复选框是否为选中状态
+      checked: true,
+      //拿到购物车页面用户选中的商品
+      payList: this.$store.state.car.payList,
+      //不同状态的订单
+      zhifulist: [],
+    };
+  },
+  computed: {
+    allMoney() {
+      let price = 0;
+      this.zhifulist.forEach((item) => {
+        price += item.goods_num * item.wares_nowprice;
+      });
+      return price * 100;
+    },
+  },
+  mounted() {
+    this.byAllOrder();
+  },
+  created() {},
+  methods: {
+    //获取不同状态的订单接口
+    async byAllOrder() {
+      this.zhifulist = await this.$http.index.allOrder({
+        status: 0,
+      });
+      console.log(this.zhifulist);
+    },
+    //支付接口
+    async bybuyOrder() {
+      let infolist = [];
+      this.zhifulist.forEach((item) => {
+        infolist.push(item.goods_id);
+      });
+
+      let res = await this.$http.index.buyOrder({
+        goodsid: JSON.stringify(infolist),
+      });
+      console.log(res);
+      //只有支付完成才能跳转页面
+      this.$router.push("/OrderForm");
+    },
+    //支付按钮事件
+    onSubmit() {
+      this.bybuyOrder();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.van-nav-bar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 99;
+}
+.van-card:nth-child(2) {
+  margin-top: 1.3rem;
+}
+.bottom {
+  margin-bottom: 1.2rem;
+}
+</style>

历届学生/逯帅帅/项目开发/上课项目/电商/src/views/Search.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <div class="search">
+      <van-search show-action placeholder="请输入搜索关键词" v-model="value">
+        <template #action>
+          <div @click="Search">搜索</div>
+        </template>
+      </van-search>
+    </div>
+    <item :item-list="record"></item>
+  </div>
+</template>
+
+<script>
+import item from "@c/Item.vue";
+export default {
+  data() {
+    return {
+      record: [],
+      value: [],
+    };
+  },
+  created() {},
+  methods: {
+    async Search() {
+      this.record = await this.$http.index.search({
+        keyword: this.value,
+      });
+      console.log(this.record);
+    },
+  },
+  comments: {
+    item,
+  },
+};
+</script>
+<style scoped lang="stylus">
+@import "~@page/Search.styl";
+</style>

历届学生/逯帅帅/项目开发/上课项目/电商/src/views/Setting.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="setting">
+    <div class="header">
+      <img src="/img/logo_s.png" alt="" />
+      <div class="text">
+        <p class="text1">基友汇</p>
+        <p class="text2">v2.1.1</p>
+      </div>
+    </div>
+    <ul class="content">
+      <li @click="ContactUs()">
+        <div class="contact">
+          <van-cell icon="phone-o"></van-cell>
+          <p>联系我们</p>
+        </div>
+        <van-icon name="arrow" />
+      </li>
+      <li @click="AboutUs()">
+        <div class="about">
+          <van-cell icon="friends-o"></van-cell>
+          <p>关于我们</p>
+        </div>
+        <van-icon name="arrow" />
+      </li>
+      <li @click="CheckUpdate()">
+        <div class="contact">
+          <van-cell icon="upgrade"></van-cell>
+          <p>检测升级</p>
+        </div>
+        <van-icon name="arrow" />
+      </li>
+    </ul>
+    <van-button class="bt1" color="#f8d14b" @click="UserLogOut">退 出 登 录</van-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Setting",
+  methods: {
+    ContactUs () {
+      this.$dialog.alert({
+        title: '联系我们',
+        message: '平台客服电话：0551-7397727'
+      })
+    },
+    AboutUs () {
+      this.$dialog.alert({
+        title: '关于我们',
+        message: '一款专业的手机交易平台，让您买到更加安心放心的高质量手机！'
+      })
+    },
+    CheckUpdate () {
+      this.$toast("当前已是最新版");
+    },
+    UserLogOut () {
+      this.$dialog.confirm({
+        title: '退出登录',
+        message: '确定退出登录吗？'
+      }).then(() => {
+        localStorage.clear();
+        this.$router.push("/")
+      }).catch(() => {
+
+      });
+
+    },
+  }
+};
+</script>
+
+<style scoped lang="stylus">
+@import "~@page/Setting.styl";
+</style>

历届学生/逯帅帅/项目开发/上课项目/电商/src/views/Type.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="type">
+    <van-tree-select height="100vh" @click-nav="MenuClick" :items="items" :main-active-index.sync="active">
+      <template #content>
+        <div v-for="(v,i) in items">
+          <Item v-if="i == active" :item-list="items[active].content"></Item>
+        </div>
+      </template>
+    </van-tree-select>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Footer from "@c/Footer.vue"
+import Item from "@c/Item.vue";
+
+export default {
+
+  data() {
+    return {
+      active: 0,
+      items: [
+        {
+          text: '小米',
+          content: []
+        },
+        {
+          text: '魅族',
+          content: []
+        },
+        {
+          text: '华为',
+          content: []
+        },
+        {
+          text: 'Iphone',
+          content: []
+        },
+        {
+          text: '三星',
+          content: []
+        },
+        {
+          text: '锤子',
+          content: []
+        }
+      ],
+    };
+  },
+  created() {
+    this.getTypeList()
+  },
+  methods: {
+    MenuClick(index) {
+      if (this.items[this.active].content == 0) {
+        this.getTypeList()
+      }
+    },
+    async getTypeList() {
+      let res = await this.$http.type.type({
+        typename: this.items[this.active].text
+      })
+      this.items[this.active].content = res
+      console.log(res);
+    }
+  },
+  components: {
+    Footer,
+    Item,
+  }
+};
+</script>
+
+<style scoped lang="stylus">
+.van-tree-select__content{
+  padding-bottom 45px;
+}
+</style>