first commit

项目合集/电商App/shop_fontend/src/views/.pydio

@@ -0,0 +1 @@
+1f66d30c-a642-41c3-a077-836c81e9106d

项目合集/电商App/shop_fontend/src/views/Account.vue

@@ -0,0 +1,193 @@
+<template>
+  <div :class="showPage ? 'account backWhile' : 'account' ">
+    <!--登录欢迎页面-->
+    <div class="account_welcome" v-if="showPage">
+      <img src="img/welcome_login.png" alt="">
+      <van-button
+        :round="true"
+        :style="{ background: currentTheme }"
+        @click="hiddenWelcome"
+        type="default">
+        立 即 登 录
+      </van-button>
+      <p>
+        还没有账号？快来<span @click="nowAdd"> 注册</span>
+      </p>
+    </div>
+
+    <!--登录注册页面-->
+    <div v-else class="account_action">
+
+      <van-tabs
+        :line-height="7"
+        :line-width="30"
+        :border="false"
+        :color="textColor"
+        @change="changeAction"
+        :title-active-color="textColor"
+        v-model="AccountAction">
+        <van-tab title="登 录">
+
+          <!--登录页面-->
+          <div class="login">
+            <div class="username_input input">
+              <div class="tips">用户名</div>
+              <input v-model="UserInfo.name" :style="{ color: textColor}" type="text">
+            </div>
+            <div class="userpwd_input">
+              <div class="tips">密码</div>
+              <input v-model="UserInfo.pwd" :style="{ color: textColor}" type="password">
+            </div>
+            <van-button
+              :round="true"
+              @click="UserLogin"
+              :style="{ background: currentTheme }"
+              type="default">登 录</van-button>
+          </div>
+
+        </van-tab>
+
+
+        <van-tab title="注 册">
+
+          <!--注册页面-->
+          <div class="login">
+            <div class="username_input input">
+              <div class="tips">用户名</div>
+              <input v-model="UserInfo.name" :style="{ color: textColor}" type="text">
+            </div>
+            <div class="userpwd_input">
+              <div class="tips">手机号</div>
+              <input v-model="UserInfo.phone" :style="{ color: textColor}" type="text">
+            </div>
+            <div class="userpwd_input">
+              <div class="tips">密码</div>
+              <input v-model="UserInfo.pwd" :style="{ color: textColor}" type="password">
+            </div>
+            <van-button
+              :round="true"
+              :style="{ background: currentTheme }"
+              type="default" @click="addUser">注 册</van-button>
+          </div>
+
+        </van-tab>
+
+
+      </van-tabs>
+
+      <van-grid :border="false">
+        <van-grid-item
+          v-for="(item,index) in themeColor"
+          :key="index"
+          @click="changeTheme(item)">
+          <div class="color-item" :style="{ background: item.backgroundColor }"></div>
+        </van-grid-item>
+      </van-grid>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        UserInfo: {
+            name: "lb",
+            pwd: "1234567890",
+            phone: "15155145354"
+        },
+        showPage: true,
+        // 提示滑块移动号距离
+        left: 50,
+        // 默认显示第一个tabs
+        AccountAction: 0,
+        // 默认主题
+        currentTheme: 'linear-gradient(to right, #efe5f2 0%, #cd6cf2 100%)',
+        // 默认字体色
+        textColor: '#9a99f6',
+        // 默认标题
+        titleName: '登 录',
+        // 主题色
+        themeColor: [
+          {
+            textColor: '#9a99f6',
+            backgroundColor: 'linear-gradient(to right, #efe5f2 0%, #cd6cf2 100%)'
+          },
+          {
+            textColor: 'rgb(250, 108, 159)',
+            backgroundColor: 'linear-gradient(to right,#fa6c9f 0%,#ffe140 80%,#ffe140 100%)'
+          },
+          {
+            textColor: 'rgb(68, 234, 118)',
+            backgroundColor: 'linear-gradient(to right,#44ea76 0%,#39fad7 80%,#39fad7 100%)'
+          },
+        ]
+      }
+    },
+    inject: ["close", "open"],
+    beforeRouteEnter(to, from, next) {
+      next(vm => vm.close())
+    },
+    beforeRouteLeave(to, from, next) {
+      this.open()
+      next()
+    },
+    methods: {
+      async UserLogin() {
+         if(this.UserInfo.name.length === 0
+             || this.UserInfo.pwd.length === 0) {
+              this.$toast.fail('信息不完整，请检查');
+          } else {
+            console.log(this.$route.query.from)
+              var data = await this.$http.userService.UserLogin(this.UserInfo);
+              if(data !== undefined) {
+                this.$router.push({
+                    path: '/'
+                });
+                localStorage.setItem("token", data.token)
+              }
+          }
+      },
+      // 注册用户
+      async addUser() {
+          if(this.UserInfo.name.length === 0
+             || this.UserInfo.pwd.length === 0
+             || this.UserInfo.phone.length === 0) {
+              this.$toast.fail('信息不完整，请检查');
+          } else {
+              var data = await this.$http.userService.UserAdd(this.UserInfo);
+              console.log(data)
+              this.$toast.success('注册成功请登录');
+              this.AccountAction = 0
+          }
+      },
+
+      hiddenWelcome() {
+        this.showPage = false
+      },
+      nowAdd() {
+        this.showPage = false
+        this.AccountAction = 1
+      },
+      changeTheme(item) {
+        this.textColor = item.textColor
+        this.currentTheme = item.backgroundColor
+      },
+      changeAction(index) {
+        if(index == 0) {
+          this.left = 50
+          this.titleName = "登 录"
+        } else {
+          this.left = 240
+          this.titleName = "注 册"
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="stylus">
+  @import "~!/account.styl"
+</style>

项目合集/电商App/shop_fontend/src/views/Car.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="car">
+    <NavbarComponents title="购物车">
+      <span slot="right-icon" @click="EditCar">{{ showEdit ? '编辑' : '完成' }}</span>
+    </NavbarComponents>
+
+    <div class="content">
+
+      <van-checkbox-group v-if="carListData.length != 0" v-model="ChoiceCarList" ref="checkboxGroup">
+        <div class="car_item" v-for="(item,index) in carListData" :key="index">
+          <van-checkbox :name="item.car_id"></van-checkbox>
+          <van-card
+            :price="item.wares_nowprice"
+            :desc="item.wares_info.substring(0,10)+'..' "
+            :title="item.wares_title"
+            :thumb="item.wares_masterimg">
+            <p slot="num">x {{item.car_num}}</p>
+            <van-stepper slot="num"
+                         @plus="updateCarNumber('plus',item.car_id,item.car_num)"
+                         @minus="updateCarNumber('minus',item.car_id,item.car_num)"
+                         v-model="item.car_num" />
+          </van-card>
+        </div>
+      </van-checkbox-group>
+
+      <div class="no-data" v-else>
+        <van-icon size="30" color="#d1d1d1" name="shopping-cart-o" />
+        <p>
+          购物车为空，<router-link to="/">买！</router-link>
+        </p>
+      </div>
+
+      <van-submit-bar v-if="showEdit" :price="TotalMoney" button-text="买买买" @submit="submitOrder">
+        <p @click="checkAll">{{ isChoiceStatus ? '全选' : '取消' }}</p>
+      </van-submit-bar>
+
+      <van-submit-bar v-else button-text="删除" @submit="deleteShop">
+         <p @click="checkAll">{{ isChoiceStatus ? '全选' : '取消' }}</p>
+      </van-submit-bar>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import NavbarComponents from "@/components/Navbar";
+
+export default {
+  data() {
+    return {
+      isChoiceStatus: true,
+      ChoiceCarList: [], // 购物车数据的id，就是car_id
+      showEdit: true,
+      carListData: [],
+      submitOrderList: []
+    };
+  },
+  components: {
+    NavbarComponents
+  },
+  computed: {
+    TotalMoney:function () {
+      if(this.ChoiceCarList.length != 0) {
+        var price = 0, data = [];
+
+        this.carListData.forEach(val => {
+           if(this.ChoiceCarList.indexOf(val.car_id) != -1) {
+             data.push(val)
+           }
+        })
+
+        data.forEach(val => {
+          price += val.wares_nowprice * val.car_num
+        })
+
+        return price * 100
+      } else {
+        return 0
+      }
+
+    }
+  },
+  created() {
+    this.getCarList()
+  },
+  methods: {
+    // 提交购物车商品
+    async submitOrder() {
+      for(var i = this.carListData.length - 1; i >=0; i--) {
+        if(this.ChoiceCarList.indexOf(this.carListData[i].car_id) != -1) {
+          this.submitOrderList.push({
+            waresid: this.carListData[i].wares_id,
+            goodsnum: this.carListData[i].car_num,
+            goodsprice:  this.carListData[i].wares_nowprice
+          })
+        }
+      }
+
+      let data = await this.$http.carService.submitCar({
+        carList: JSON.stringify(this.submitOrderList)
+      })
+
+      this.submitOrderList = []
+      this.deleteShop()
+
+      this.$router.push({ name: 'order'})
+
+    },
+    // 更新购物车需要购买的商品数量
+    async updateCarNumber(status, carid,nums) {
+      status == "plus" ? nums += 1 :  nums -= 1
+      await this.$http.carService.updateCarNumber({
+        carid: carid,
+        quantity: nums
+      })
+    },
+    // 删除商品
+    async deleteShop() {
+      await this.$http.carService.deteteCar({
+        carid: JSON.stringify(this.ChoiceCarList)
+      })
+      this.getCarList();
+    },
+    checkAll() {
+      if(this.isChoiceStatus) {
+        this.$refs.checkboxGroup.toggleAll(true);
+        this.isChoiceStatus = false
+      } else {
+        this.$refs.checkboxGroup.toggleAll();
+        this.isChoiceStatus = true
+      }
+    },
+    async getCarList() {
+      var carList = await this.$http.carService.getCarList({});
+      if (JSON.stringify(carList) == "{}") {
+        this.carListData = []
+      } else {
+        carList.forEach((val) => {
+          val.wares_masterimg = JSON.parse(val.wares_masterimg)[0]
+          val.checked = false
+        });
+        this.carListData = carList
+      }
+
+    },
+    EditCar() {
+      this.showEdit = !this.showEdit;
+    }
+  }
+};
+</script>
+
+<style scoped lang="stylus">
+.no-data
+ text-align center
+ padding-top  60px
+ p
+  font-size 13px
+  color #d1d1d1
+  margin-top 10px
+  a
+   color #ff7d7d
+.content {
+  margin-top: 46px;
+}
+
+.van-checkbox {
+  margin: 10px 0;
+}
+
+.van-submit-bar {
+  bottom: 50px;
+}
+.van-card__num
+  p
+    float right
+  .van-stepper
+    clear both
+    margin-top 29px;
+.van-submit-bar__bar
+  justify-content space-between
+  p
+    padding-left 20px
+
+.car_item
+  display flex
+  .van-card
+    flex 1
+    background-color #fff
+</style>

项目合集/电商App/shop_fontend/src/views/Home.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="home content">
+    <div class="home_banner">
+      <div class="search_top">
+        <img src="img/logo.png" alt="">
+
+        <van-search class="search_input"
+                    @click="$router.push({ name: 'search' })"
+                    show-action
+                    :clearable="true"
+                    placeholder="请输入搜索关键词"
+                    shape="round"
+                    v-model="value">
+          <div slot="action">搜索</div>
+        </van-search>
+      </div>
+      <SwiperComponents :list="swiperList"></SwiperComponents>
+    </div>
+
+    <van-grid class="type" clickable :column-num="4" :border="false">
+      <van-grid-item v-for="(item,index) in typeList" 
+                    :key="index" 
+                    :text="item.title" 
+                    :to="{ name: 'list', params: { id: item.id } }">
+        <van-image slot="icon" :src="item.src"/>
+      </van-grid-item>
+    </van-grid>
+
+    <van-row>
+      <van-col span="12">
+        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/32b5d24417b673008f386592c4d17046.jpg?thumb=1&w=358&h=508"
+             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/1480d862e1f5a41e5adae8c030eef511.jpg?thumb=1&w=358&h=252"
+              alt="">
+          </van-col>
+          <van-col span="24">
+            <img
+              src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1480d862e1f5a41e5adae8c030eef511.jpg?thumb=1&w=358&h=252"
+              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/3ca39ff880dfbcbc0e45314782c39fff.jpg?thumb=1&w=720&h=280"
+             alt="">
+      </van-col>
+    </van-row>
+
+    <div class="list_item">
+      <van-row type="flex" justify="space-around" style="flex-wrap: wrap">
+        <van-col v-for="(i,index) in listData" class="item" span="11" :key=index>
+          <router-link :to="{ name: 'info', params: { id: i.wares_id } }">
+            <img :src="i | FirstImage" :alt="i.wares_title">
+            <h3 class="title">{{i.wares_title}}</h3>
+            <p class="info">{{ i.wares_info | LineText }}</p>
+            <p class="pice">1299</p>
+          </router-link>
+        </van-col>
+      </van-row>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+    import SwiperComponents from "@/components/Swiper"
+    export default {
+        data() {
+            return {
+                value: '',
+                listData: [],
+                typeList: [
+                  { id: 1, title: '限时白嫖', href: '/list', src: 'img/type_1.png' },
+                  { id: 2, title: '新品推荐', href: '/list', src: 'img/type_2.png' },
+                  { id: 3, title: '低价高配', href: '/list', src: 'img/type_3.png' },
+                  { id: 4, title: '超值特卖', href: '/list', src: 'img/type_4.png' }
+                ],
+                swiperList: [
+                    { src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5008839c212fa55a475af26dca8e80f.jpg?thumb=1&w=720&h=360" },
+                    { src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5008839c212fa55a475af26dca8e80f.jpg?thumb=1&w=720&h=360" },
+                    { src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5008839c212fa55a475af26dca8e80f.jpg?thumb=1&w=720&h=360" },
+                    { src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5008839c212fa55a475af26dca8e80f.jpg?thumb=1&w=720&h=360" },
+                    { src: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5008839c212fa55a475af26dca8e80f.jpg?thumb=1&w=720&h=360" }
+                ]
+            }
+        },
+        filters: {
+          // 手机介绍太长，截短
+          LineText(text) {
+            return text.substring(0,10)+'..'
+          },
+          // 取出 wares_masterimg 主图第一张图片，作为缩略图
+          FirstImage(par) {
+            return JSON.parse(par.wares_masterimg)[0]
+          }
+        },
+        async created() {
+            // ajax封装基本案例
+            var data = await this.$http.homeService.getHomeData({});
+            this.listData = data
+        },
+        components: {
+            SwiperComponents
+        }
+    }
+</script>
+
+<style lang="stylus" scoped>
+  @import "~!/home.styl"
+</style>

项目合集/电商App/shop_fontend/src/views/Info.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="info">
+    <div class="info_header">
+      <div class="header_action">
+        <van-icon size="25" name="arrow-left" @click="$router.back()" />
+        <van-icon size="25" name="shopping-cart-o" @click="$router.push({ name: 'car' })"/>
+      </div>
+      <SwiperComponents :list="InfoList.wares_masterimg | getArray"></SwiperComponents>
+    </div>
+
+    <div class="info_message">
+      <h2 class="title">{{InfoList.wares_title}}</h2>
+      <p class="cont">{{InfoList.wares_info}}</p>
+      <p class="price">
+        ￥
+        {{InfoList.wares_nowprice}}
+      </p>
+    </div>
+
+    <div class="norms" @click="isShow = !isShow">
+      <p class="status">已选</p>
+      <p class="conf">全网公开版，碳纤黑，6+128...</p>
+      <p class="right">
+        <span>x1</span>
+        <van-icon name="arrow" />
+      </p>
+    </div>
+
+    <div class="quality" @click="openQuality">
+      <div class="left">
+        <div class="item_1">
+          <img src="img/icon_1.png" alt />
+          <span>品质保障</span>
+        </div>
+        <div class="item_1">
+          <img src="img/icon_1.png" alt />
+          <span>顺丰发货</span>
+        </div>
+        <div class="item_1">
+          <img src="img/icon_1.png" alt />
+          <span>7天无理由退货</span>
+        </div>
+      </div>
+      <van-icon name="arrow" />
+    </div>
+
+    <van-popup v-model="showQuality" round closeable position="bottom" :style="{ height: '50%' }">
+      <p>服务说明</p>
+      <van-collapse :border="false" v-model="activeCollapse" accordion>
+        <van-collapse-item name="1">
+          <div slot="title">
+            <img src="img/icon_1.png" alt />
+            品质保障
+          </div>官方旗舰店品质保障，提供最专业的服务
+        </van-collapse-item>
+        <van-collapse-item name="2">
+          <div slot="title">
+            <img src="img/icon_1.png" alt />
+            顺丰发货
+          </div>该商品顺丰发货，顺丰无法到达的地区会安排其他转递其他快递
+        </van-collapse-item>
+        <van-collapse-item name="3">
+          <div slot="title">
+            <img src="img/icon_1.png" alt />
+            7天无理由退货
+          </div>自您的订单签收7个自然日之内（含），在商品完好（手机产品未激活）的情况下，可进行无理由退货
+        </van-collapse-item>
+      </van-collapse>
+    </van-popup>
+
+    <div class="info_img">
+      <img v-for="(item,index) in InfoList.wares_infoimg" :key="index" :src="item" alt />
+    </div>
+
+    <van-goods-action>
+      <van-goods-action-icon icon="star-o" text="收藏" @click="addLike" />
+      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push({ name: 'car' })" />
+      <van-goods-action-button :disabled="closeAddShop" type="warning" text="加入购物车" @click="addCarShop" />
+      <van-goods-action-button type="danger" text="立即购买" @click />
+    </van-goods-action>
+
+    <!--    商品规格的弹窗-->
+    <div class="sku"></div>
+  </div>
+</template>
+
+<script>
+import SwiperComponents from "@/components/Swiper";
+
+export default {
+  data() {
+    return {
+      closeAddShop: false,
+      id: this.$route.params.id,
+      showQuality: false,
+      InfoList: {},
+      active: 0,
+      isShow: false,
+      activeCollapse: ["1"]
+    };
+  },
+  inject: ["close", "open"],
+  beforeRouteEnter(to, from, next) {
+    next(vm => vm.close());
+  },
+  beforeRouteLeave(to, from, next) {
+    this.open();
+    next();
+  },
+  created() {
+    this.checkCarShop()
+    this.getInfoData();
+  },
+  methods: {
+    async checkCarShop() {
+      var checkCar = await this.$http.carService.checkCar({
+        waresid: this.id
+      });
+
+      this.closeAddShop = checkCar.isAddCar
+    },
+    async addCarShop() {
+      var car = await this.$http.carService.addCar({
+        waresid: this.id
+      });
+
+      this.closeAddShop = true
+
+    },
+    async addLike() {
+      var like = await this.$http.userService.addLike({
+        shopid: this.id
+      });
+      if (JSON.stringify(like) == "{}") {
+        this.$toast.success("收藏成功");
+      }
+    },
+    async getInfoData() {
+      var data = await this.$http.homeService.getInfoData({
+        id: this.id
+      });
+      console.log(data.wares_infoimg);
+      data.wares_infoimg = JSON.parse(data.wares_infoimg);
+      this.InfoList = data;
+    },
+    openQuality() {
+      this.showQuality = !this.showQuality;
+    }
+  },
+  filters: {
+    getArray(val) {
+      return val !== undefined ? JSON.parse(val) : [];
+    }
+  },
+  components: {
+    SwiperComponents
+  }
+};
+</script>
+
+<style scoped lang="stylus">
+@import '~!/info.styl';
+
+.home_swiper {
+  margin-top: 0 !important;
+}
+</style>

项目合集/电商App/shop_fontend/src/views/List.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="list">
+    <NavbarComponents :title="currentTitle"></NavbarComponents>
+    <div class="content">
+      <div class="list_item">
+        <van-row type="flex" style="flex-wrap: wrap">
+          <van-col v-for="(i,index) in listData" class="item" span="11" :key="index">
+            <router-link :to="{ name: 'info', params: { id: i.wares_id } }">
+              <img :src="i | FirstImage" :alt="i.wares_title" />
+              <h3 class="title">{{i.wares_title}}</h3>
+              <p class="info">{{ i.wares_info | LineText }}</p>
+              <p class="pice">{{ i.wares_nowprice}}</p>
+            </router-link>
+          </van-col>
+        </van-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import NavbarComponents from "@/components/Navbar";
+export default {
+  data() {
+    return {
+      id: this.$route.params.id,
+      currentTitle: "",
+      listData: [],
+      typeList: [
+        { id: 1, title: "限时白嫖" },
+        { id: 2, title: "新品推荐" },
+        { id: 3, title: "低价高配" },
+        { id: 4, title: "超值特卖" }
+      ]
+    };
+  },
+  inject: ["close", "open"],
+  beforeRouteEnter(to, from, next) {
+    next(vm => vm.close());
+  },
+  beforeRouteLeave(to, from, next) {
+    this.open();
+    next();
+  },
+  created() {
+    this.currentTitle = this.typeList[this.id - 1].title;
+    this.getListData();
+  },
+  methods: {
+    async getListData() {
+      var data = await this.$http.homeService.getListData({
+        id: this.id
+      });
+      console.log(data);
+      this.listData = data;
+    }
+  },
+  components: {
+    NavbarComponents
+  },
+  filters: {
+    // 手机介绍太长，截短
+    LineText(text) {
+      return text.substring(0, 10) + "..";
+    },
+    // 取出 wares_masterimg 主图第一张图片，作为缩略图
+    FirstImage(par) {
+      return JSON.parse(par.wares_masterimg)[0];
+    }
+  }
+};
+</script>
+
+<style lang="stylus" scoped>
+.van-row--flex
+  justify-content space-between
+  padding 12px
+.content
+    margin-top 46px
+</style>

项目合集/电商App/shop_fontend/src/views/Me.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="me">
+    <div class="header">
+      <img class="setting" src="img/me_settin_2.png" alt="">
+      <div class="user">
+        <img class="user_head" src="img/user_head.png" alt="">
+        <p>编码猿Code</p>
+      </div>
+    </div>
+
+    <van-grid class="type" clickable :column-num="5" :border="false" >
+      <router-link v-for="(item,index) in orderList" :key="index"  :to="{ name: 'OrderStatus', query: { active: index } }">
+        <van-grid-item :text="item.title">
+          <img slot="icon" :src="item.img" />
+        </van-grid-item>
+      </router-link>
+    </van-grid>
+
+
+    <div class="setting">
+      <van-cell :clickable="true" :center="true" title="收货地址">
+        <img slot="icon" src="img/me_address.png" alt="">
+      </van-cell>
+      <van-cell :clickable="true" :center="true" title="我的收藏" icon="location-o" >
+        <img slot="icon" src="img/me_like.png" alt="">
+      </van-cell>
+      <van-cell :clickable="true" :center="true" title="我的设置" icon="location-o" >
+        <img slot="icon" src="img/me_settin_2.png" alt="">
+      </van-cell>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  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'},
+        ]
+      }
+    },
+    methods: {}
+  }
+</script>
+
+<style scoped lang="stylus">
+@import "~!/me"
+.van-grid
+  justify-content space-around
+
+</style>

项目合集/电商App/shop_fontend/src/views/Order.vue

@@ -0,0 +1,342 @@
+<template>
+  <div class="order">
+    <NavbarComponents title="订单结算"></NavbarComponents>
+
+    <div class="content">
+
+      <div class="wxpay-page" v-if="HiddedWxPage">
+        <div class="wxpay-page-dialog">
+          <div class="dialog-title">
+            <van-icon size="15" name="cross" @click="HiddedWxPage = false"/>
+            <span>请输入支付密码</span>
+          </div>
+          <div class="dialog-price">
+            <p class="price-title">付款给创想网络科技</p>
+            <p class="price-info">
+              <span class="info-1">￥</span>
+              <span class="info-2">{{TotalMoney / 100}}.00</span>
+            </p>
+          </div>
+          <div class="dialog-chooise">
+            <p>支付方式</p>
+            <div class="chooise-right">
+              <img src="img/wxPay/ye.png" alt="">
+              <span>零钱</span>
+              <van-icon size="15" name="arrow" />
+            </div>
+          </div>
+
+          <van-password-input
+            :value="PayPassword"
+            :focused="showKeyboard"
+            @focus="showKeyboard = true" />
+
+        </div>
+        <div class="wxpay-page-password">
+          <van-number-keyboard
+            :show="true"
+            @blur="show = false"
+            @input="onInput"
+            @delete="onDelete">
+            <template slot="delete">
+              <img class="delete" src="img/wxPay/jftc_18.jpg" alt="">
+            </template>
+          </van-number-keyboard>
+        </div>
+      </div>
+
+      <div class="order-page" v-else>
+
+        <!--地址选择-->
+        <div class="address">
+          <van-contact-card
+            :type="cardType"
+            :name="currentContact.name"
+            :tel="currentContact.tel"
+            add-text="请添加收货地址"
+            @click="showList = true"/>
+
+          <!--地址编辑添加弹窗-->
+          <van-popup closeable v-model="showList" :style="{ height : '100%' }" position="bottom">
+            <van-address-edit
+              :area-list="areaList"
+              show-delete
+              show-search-result
+              :search-result="searchResult"
+              :area-columns-placeholder="['请选择', '请选择', '请选择']"
+              @save="onSave"
+              @delete="onDelete"
+            />
+          </van-popup>
+        </div>
+
+        <div class="order-list">
+
+          <!--代付款订单列表-->
+          <van-card
+
+            v-for="(item,index) in waitPayOrderList"
+            :num="item.goods_num"
+            :key="index"
+            :price="item.wares_nowprice"
+            :desc="item.wares_info"
+            :title="item.wares_title"
+            :thumb="item.wares_masterimg"/>
+
+          <van-cell-group>
+            <van-cell title="配送方式" value="顺丰配送货（免运费）" />
+            <van-cell title="发票类型" value="电子发票" />
+            <van-cell title="优惠券" value="无" />
+          </van-cell-group>
+
+          <van-cell-group title="支付方式">
+
+            <van-cell title="微信支付">
+              <template slot="icon">
+                <img src="img/pay_wx.png" alt="微信支付">
+              </template>
+              <template slot="right-icon">
+                <van-radio checked></van-radio>
+              </template>
+            </van-cell>
+
+            <van-cell title="支付宝支付">
+              <template slot="icon">
+                <img src="img/pay_zfb2.png" alt="支付宝支付">
+              </template>
+              <template slot="right-icon">
+                <van-radio disabled></van-radio>
+              </template>
+            </van-cell>
+
+            <van-cell title="花呗分期">
+              <template slot="icon">
+                <img src="img/pay_antinstalment.png" alt="花呗分期">
+              </template>
+              <template slot="right-icon">
+                <van-radio disabled></van-radio>
+              </template>
+            </van-cell>
+
+            <van-cell title="银联支付">
+              <template slot="icon">
+                <img src="img/pay_yl1.png" alt="银联支付">
+              </template>
+              <template slot="right-icon">
+                <van-radio disabled></van-radio>
+              </template>
+            </van-cell>
+
+          </van-cell-group>
+
+        </div>
+
+        <!--底部固定的付款按钮-->
+        <van-submit-bar
+          :price="TotalMoney"
+          button-text="去付款"
+          @submit="GoPlay"
+        />
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+  import NavbarComponents from "@/components/Navbar";
+  import areaList from "@/assets/js/area"
+  export default {
+    data() {
+      return {
+        areaList,
+        searchResult: [],
+        HiddedWxPage: false, // 控制微信支付页面是否显示
+        PayPassword: '',     // 记录用户输入的密码
+        showKeyboard: true,  // 控制密码输入框是否聚焦
+        waitPayOrderList: [], // 等待付款的订单数组
+        showList: false,     // 是否展示地址编辑框
+        chosenContactId: null, // 记录当前是编辑还是添加的状态
+        list: []
+      }
+    },
+    created(){
+      this.getAllOrder()
+    },
+    methods: {
+      onSave(content) {
+        this.list.push(content)
+        this.showList = false
+        this.chosenContactId = content.id;
+        console.log("onSave content: ", content)
+      },
+      onDelete() {
+        Toast('delete');
+      },
+      GoPlay() {
+        this.HiddedWxPage = true
+      },
+      async onInput(key) {
+        this.PayPassword = (this.PayPassword + key).slice(0, 6);
+        // 输完密码，开始购买
+        if(this.PayPassword.length >= 6) {
+          console.log("购买成功");
+
+          var waitParams = [];
+          this.waitPayOrderList.forEach(val => {
+            waitParams.push(val.goods_id)
+          })
+
+          var data = await this.$http.orderService.buyOrder({
+            goodsid: JSON.stringify(waitParams)
+          })
+
+          this.$router.push({
+            name: 'OrderStatus'
+          })
+
+
+        } else {
+          console.log("正在输入密码");
+        }
+      },
+      onDelete() {
+        this.PayPassword = this.PayPassword.slice(0, this.PayPassword.length - 1);
+      },
+      async getAllOrder() {
+        let waitPayOrder = await this.$http.orderService.allOrder({
+          status: 0
+        });
+
+        if(waitPayOrder == undefined) {
+          this.$router.back()
+        } else {
+          waitPayOrder.forEach(val => {
+            val.wares_masterimg = JSON.parse(val.wares_masterimg)[0]
+          });
+          this.waitPayOrderList = waitPayOrder
+        }
+
+
+      }
+    },
+    computed: {
+      TotalMoney () {
+        var price = 0
+        this.waitPayOrderList.forEach(val=>{
+          price += val.goods_price * val.goods_num
+        })
+        return price * 100
+      },
+      cardType() {
+        return this.chosenContactId !== null ? 'edit' : 'add';
+      },
+      currentContact() {
+        const id = this.chosenContactId;
+        return id !== null ? this.list.filter(item => item.id === id)[0] : {};
+      }
+    },
+    inject: ["close", "open"],
+    beforeRouteEnter(to, from, next) {
+      next(vm => vm.close());
+    },
+    beforeRouteLeave(to, from, next) {
+      this.open();
+      next();
+    },
+    components: {
+      NavbarComponents
+    },
+  }
+</script>
+
+<style scoped lang="stylus">
+.wxpay-page-dialog
+  width 330px
+  height 280px
+  position absolute
+  background #f8f8f8
+  left 50%
+  margin-left -165px
+  top 10%
+  padding: 0 10px;
+  box-sizing: border-box;
+  .dialog-title
+    display flex
+    align-items center
+    height 50px
+    position relative
+    .van-icon
+      position absolute
+      left 10px
+      color #aca6a8
+    span
+     font-size 14px
+     color #000
+     margin 0 auto
+  .dialog-price
+    margin-top 10px
+    text-align center
+    border-bottom: 1px solid #ececec;
+    padding-bottom: 15px;
+    .price-title
+      font-size 16px
+      margin-bottom 15px
+      color #000
+    .price-info
+      font-weight bolder
+      .info-1
+        vertical-align middle
+        font-size 17px
+  .dialog-chooise
+    display flex
+    justify-content space-between
+    height 45px
+    align-items center
+    padding 0 4px
+    p
+      font-size 14px
+      color #686169
+    .chooise-right
+      display: flex;
+      align-items: center;
+      img
+        width 20px
+      span
+        font-size 13px
+        margin-left 8px
+        margin-right 8px
+  .van-password-input
+    margin 5px 0 0 0
+
+.wxpay-page
+ position fixed
+ width 100%
+ background #000000b3
+ z-index 9999
+ height 100%
+ top 0
+ left 0
+ right 0
+ bottom 0
+.delete
+  width 40px
+  margin-top 15px
+
+.content
+  margin-top 46px
+.order-list
+  margin-top 20px
+  .van-card
+    background #fff
+.van-cell
+  align-items center
+  img
+    width 30px
+    margin-right 10px
+.van-submit-bar__bar
+  justify-content space-between
+  padding-left 20px
+  .van-submit-bar__text
+   text-align left
+</style>

项目合集/电商App/shop_fontend/src/views/OrderStatus.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="orderstatus">
+    <NavbarComponents title="订单状态"></NavbarComponents>
+    <div class="content">
+      <van-tabs v-model="active" @click="changeTabs">
+        <van-tab title="全部订单">
+          <OrderCardComponents :list="OrderList"></OrderCardComponents>
+        </van-tab>
+        <van-tab title="待付款">
+          <OrderCardComponents :list="OrderList"></OrderCardComponents>
+        </van-tab>
+        <van-tab title="待发货">
+          <OrderCardComponents :list="OrderList"></OrderCardComponents>
+        </van-tab>
+        <van-tab title="待收货">
+          <OrderCardComponents :list="OrderList"></OrderCardComponents>
+        </van-tab>
+        <van-tab title="退款/售后">
+          <OrderCardComponents :list="OrderList"></OrderCardComponents>
+        </van-tab>
+      </van-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import NavbarComponents from "@/components/Navbar";
+import OrderCardComponents from "@/components/OrderCard";
+export default {
+  data() {
+    return {
+      OrderList: [],
+      active: this.$route.query.active == undefined ? 0 : Number(this.$route.query.active),
+      list: [
+          { index: 0, key: -1 },
+          { index: 1, key: 0 },
+          { index: 2, key: 1 },
+          { index: 3, key: 2 },
+          { index: 4, key: 3 },
+      ]
+    };
+  },
+  created() {
+    this.getOrderStatus(this.list[this.active].key)
+  },
+  methods: {
+    changeTabs(index, title) {
+      this.getOrderStatus(this.list[index].key)
+    },
+    async getOrderStatus(status) {
+
+      var data = await this.$http.orderService.allOrder({
+        status: status
+      });
+      console.log(data)
+      if (JSON.stringify(data) == "{}") {
+        this.OrderList = []
+      } else {
+        data.forEach(val => val.wares_masterimg = JSON.parse(val.wares_masterimg)[0])
+        this.OrderList = data
+      }
+
+    }
+  },
+  components: {
+    OrderCardComponents,
+    NavbarComponents
+  },
+  inject: ["close", "open"],
+  beforeRouteEnter(to, from, next) {
+    next(vm => vm.close());
+  },
+  beforeRouteLeave(to, from, next) {
+    this.open();
+    next();
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.content
+ margin-top 46px
+</style>

项目合集/电商App/shop_fontend/src/views/Search.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="search">
+    <div class="search_top">
+      <van-icon size="20" @click="$router.back()" name="arrow-left" />
+      <van-search
+        class="search_input"
+        show-action
+        @focus="InputFocus"
+        @blur="InputBlur"
+        :clearable="true"
+        placeholder="请输入搜索关键词"
+        shape="round"
+        v-model="SearchKeyword">
+        <div slot="action" @click="getSearch">搜索</div>
+      </van-search>
+    </div>
+
+    <div class="content">
+      <div class="search_tj" v-if="ShowHot">
+        <p>热门搜索</p>
+        <van-tag
+          plain
+          size="large"
+          v-for="(item,index) in tagList"
+          @click="HotClick(item)"
+          :key="index"
+        >{{item.text}}</van-tag>
+      </div>
+
+      <div class="list_item" v-else>
+        <van-row type="flex" style="flex-wrap: wrap">
+          <van-col v-for="(i,index) in searchList" class="item" span="11" :key="index">
+            <router-link :to="{ name: 'info', params: { id: i.wares_id } }">
+              <img :src="i | FirstImage" :alt="i.wares_title" />
+              <h3 class="title">{{i.wares_title}}</h3>
+              <p class="info">{{ i.wares_info | LineText }}</p>
+              <p class="pice">{{ i.wares_nowprice}}</p>
+            </router-link>
+          </van-col>
+        </van-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ShowHot: true,
+      SearchKeyword: "",
+      searchList: [],
+      tagList: [
+        { text: "小米" },
+        { text: "华为" },
+        { text: "16t" },
+        { text: "11Pro" },
+        { text: "锤子" },
+        { text: "三星" }
+      ]
+    };
+  },
+  watch: {
+      SearchKeyword (newVal, oldVal) {
+          if(newVal.length == 0) {
+              this.searchList = []
+          }
+      }
+  },
+  methods: {
+    InputBlur() {
+        if(this.searchList.length != 0) {
+            this.ShowHot = false
+        }
+    },
+    InputFocus() {
+        this.ShowHot = true
+    },
+    HotClick(data) {
+      this.SearchKeyword = "";
+      this.SearchKeyword = data.text;
+      this.getSearch();
+    },
+    async getSearch() {
+      var list = await this.$http.searchService.getSearchList({
+        keyword: this.SearchKeyword
+      });
+
+      this.ShowHot = false
+
+      this.searchList = list;
+    }
+  },
+  filters: {
+    // 手机介绍太长，截短
+    LineText(text) {
+      return text.substring(0, 10) + "..";
+    },
+    // 取出 wares_masterimg 主图第一张图片，作为缩略图
+    FirstImage(par) {
+      return JSON.parse(par.wares_masterimg)[0];
+    }
+  },
+  inject: ["close", "open"],
+  beforeRouteEnter(to, from, next) {
+    next(vm => vm.close());
+  },
+  beforeRouteLeave(to, from, next) {
+    this.open();
+    next();
+  }
+};
+</script>
+
+<style lang="stylus" scoped>
+.van-icon-arrow-left {
+  margin: 0 auto;
+  margin-left: 10px;
+}
+
+.search_top .search_input {
+  width: 93%;
+}
+
+.content {
+  margin-top: 46px;
+}
+
+.van-tag {
+  margin-right: 10px;
+}
+
+.search_tj {
+  padding: 10px;
+  padding-top: 26px;
+
+  p {
+    margin-bottom: 10px;
+    font-size: 18px;
+  }
+}
+</style>

项目合集/电商App/shop_fontend/src/views/Type.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="type">
+
+    <NavbarComponents title="分类" :show-left="false">
+        <van-icon slot="right-icon" @click="$router.push({ name: 'search' })" name="search"/>
+    </NavbarComponents>
+
+    <div class="content">
+      <van-tree-select
+        class="type_list"
+        height="85%"
+        @click-nav="changeNav"
+        :items="items"
+        :main-active-index.sync="activeIndex">
+        <template slot="content">
+          <div class="lis" v-for="(i,index) in items" v-show="activeIndex === index" :key="index">
+            <van-row type="flex" style="flex-wrap: wrap">
+              <van-col v-for="(it,ke) in i.content" span="11" :key="ke">
+                <router-link class="type_item" tag="div" :to="{ name: 'info', params: { id: it.wares_id } }">
+                    <van-image :src="it.wares_masterimg"/>
+                    <p>{{it.wares_title}}</p>
+                </router-link>
+              </van-col>
+            </van-row>
+          </div>
+        </template>
+      </van-tree-select>
+    </div>
+
+  </div>
+</template>
+
+<script>
+    import NavbarComponents from "@/components/Navbar"
+
+    export default {
+        data() {
+            return {
+                activeIndex: 0,
+                currentTypeName: '小米',
+                items: [
+                    { text: '小米', content: []  },
+                    { text: '魅族', content: [] },
+                    { text: '华为', content: [] },
+                    { text: 'iphone', content: [] },
+                    { text: '三星', content: [] },
+                    { text: '锤子', content: [] },
+                    { text: '诺基亚', content: []  },
+                ]
+            }
+        },
+        created() {
+            this.getTypeList(0)
+        },
+        components: {
+            NavbarComponents
+        },
+        methods: {
+            async getTypeList(index) {
+                if (this.items[index].content.length == 0) {
+                    var typeList = await this.$http.typeService.getTypeList({
+                        typename: this.currentTypeName
+                    });
+                    this.items[index].content = typeList
+                }
+            },
+            onClickLeft() {
+                this.$router.back()
+            },
+            changeNav(index) {
+                this.currentTypeName = this.items[index].text
+                this.getTypeList(index)
+            }
+        }
+    }
+</script>
+
+<style lang="stylus" scoped>
+  @import "~!/type.styl"
+  .content {
+    margin-top 46px
+  }
+  .van-nav-bar .van-icon {
+    color: #a2a2a2;
+  }
+  .van-sidebar
+    width 20%
+  .van-sidebar,
+  .van-tree-select__content
+    flex none
+  .van-tree-select__content
+    width 80%
+  .type_item
+    text-align center
+    font-size 13px
+    color #000
+    margin-bottom 15px
+  .van-row--flex
+    justify-content space-between
+    padding 10px
+</style>