Vue2+Vant+mock实现商城项目（下）

上次实现了，四个导航页面，这次实现下面的分页

Vue2+Vant+mock实现商城项目（上）-CSDN博客

一，登录页面

任何一个软件都有要有登录，注册的，这个简单的项目也有

注册登录界面，由上面的头部引用已经写好的SimpleHeader组件

中间部分由输入框组成，用组件封装的比较简单，自己写比较麻烦  用vant封装的form

<van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="username"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">
      提交
    </van-button>
  </div>
</van-form>

下面的验证码也是一个组件，verify是一款纯前端验证码组件，使用npm i vue2-verify命令安装

可以实现以下验证方式

常规验证码picture 常规的验证码由数字和字母构成，输入不区分大小写，可变形成汉字验证。
运算验证码compute 运算验证码主要通过给出数字的加减乘运算，填写运算结果进行验证。
滑动验证码slide 通过简单的滑动即可完成验证，应用与移动端体验很好。
拼图验证码puzzle 拼图。
选字验证码pick 通过按顺序点选图中的汉字完成验证，ie浏览器要求9或以上。

使用方式：设置success和error，分别代表验证码输入成功和输入错误时的回调

<script>
    import Verify from 'vue2-verify'
    export default {
        components: {
            Verify,
        },
        methods: {
            onVerifySuccess(obj) {
                //验证码正确回调
                console.log('verify success');
                //todo
            },
            onVerifyError(obj) {
                //验证码错误回调
                console.log('verify error');
                //错误刷新验证码
                obj.refresh();
                //todo
            }
        }
    }
</script>

二，搜索界面

搜索界面的也使用了组件，vant的List 列表

这个页面使用了无限滚动

van-pull-refresh 组件为列表下拉刷新功能，接受 refresh 属性作为触发刷新回调的方法，将刷新方法 onLoad 放置于 onRefresh 下，作用是在触发下拉刷新时，重新请求第一页的数据。 van-list 组件接受 load 属性，refreshing 为 false ，说明不是下拉刷新出发的 onLoad 函数，page 页数往上加 1，再调用 init 方法，获取列表数据。（获取的数据都是moke生成的）

<script>
import { search } from '../service/good';
import { Toast } from 'vant';
export default {
  data () {
    return {
      keyword: this.$route.query.keyword || '', // 关键词搜索
      refreshing: false, // 是否是下拉刷新
      loading: false,
      finished: false, // 是否没有更多
      productList: [], // 列表数据
      totalPage: 0, // 页码总数
      page: 1, // 页码
      orderBy: '',
    };
  },
  mounted () { },
  methods: {
    //页面初始化
    async init () {
      const { categoryId, from } = this.$route.query;
      console.log(categoryId, "categoryId");
      if (!categoryId && !this.keyword) {
        // Toast.fail('请输入关键词')
        this.finished = true;
        this.loading = false;
        return;
      }
      const {
        data,
        data: { list },
      } = await search({
        pageNumber: this.page,
        goodsCategoryId: categoryId,
        keyword: this.keyword,
        orderBy: this.orderBy,
      });
      console.log(data, list, "data");
      this.productList = this.productList.concat(list);
      // console.log(this.productList, "this.productList ");
      this.totalPage = data.totalPage;
      this.loading = false;
      if (this.page >= data.totalPage) this.finished = true;
    },
    //回退
    goBack () {
      this.$router.go(-1);
    },
    //跳转至详细商品界面
    productDetail (item) {
      console.log(`product/${item.goodsId}`, "item");
      this.$router.push({ path: `product/${item.goodsId}` });
    },
    //搜索
    getSearch () {
      this.onRefresh();
    },
    //刷新
    onLoad () {
      if (!this.refreshing && this.page < this.totalPage) {
        this.page = this.page + 1;
      }
      if (this.refreshing) {
        this.productList = [];
        this.refreshing = false;
      }
      this.init();
    },
    //下拉刷新
    onRefresh () {
      this.refreshing = true;
      this.finished = false;
      this.loading = true;
      this.page = 1;
      this.onLoad();
    },
    changeTab (name, title) {
      this.orderBy = name;
      this.onRefresh();
    },
  },
};
</script>

三，商品详情

 

从搜索页面点击商品就跳转到了商品详情页面，商品详情页面的主要功能是添加购物车，和立即购买，添加购物车，购物车上面出现数字，

使用vant的GoodsAction 商品导航组件可以出来这种效果

<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
  <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
  <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
  <van-goods-action-button
    type="danger"
    text="立即购买"
    @click="onClickButton"
  />
</van-goods-action>
import { Toast } from 'vant';

export default {
  methods: {
    onClickIcon() {
      Toast('点击图标');
    },
    onClickButton() {
      Toast('点击按钮');
    },
  },
};

点击立即购买可以跳转到购物车界面，购物车上次讲过了

四：订单界面

购物车界面点击购买就可以直接跳转到订单界面，订单界面和购物车里面的商品相通

点击生成订单，下面弹出支付,通过vant组件的popup实现

<van-cell is-link @click="showPopup">展示弹出层</van-cell>
<van-popup v-model="show">内容</van-popup>
export default {
  data() {
    return {
      show: false,
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
  },
};

在设置两个button,即上图的微信支付和支付宝支付，点击跳转到我的订单界面

五，我的订单

我的订单是结算后的界面，由于数据是生成的，所以和前面的数据看着不相同

六，地址管理

从订单界面的上面的地址栏可以跳转到地址管理，实现地址的修改，与添加还有设为默认地址

使用了vant的AddressList 地址列表

<van-address-list
  v-model="chosenAddressId"
  :list="list"
  :disabled-list="disabledList"
  disabled-text="以下地址超出配送范围"
  default-tag-text="默认"
  @add="onAdd"
  @edit="onEdit"
/>
import { Toast } from 'vant';

export default {
  data() {
    return {
      chosenAddressId: '1',
      list: [
        {
          id: '1',
          name: '张三',
          tel: '13000000000',
          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
          isDefault: true,
        },
        {
          id: '2',
          name: '李四',
          tel: '1310000000',
          address: '浙江省杭州市拱墅区莫干山路 50 号',
        },
      ],
      disabledList: [
        {
          id: '3',
          name: '王五',
          tel: '1320000000',
          address: '浙江省杭州市滨江区江南大道 15 号',
        },
      ],
    };
  },
  methods: {
    onAdd() {
      Toast('新增地址');
    },
    onEdit(item, index) {
      Toast('编辑地址:' + index);
    },
  },
};

七，修改地址

也是用了vant 的组件AddressEdit 地址编辑

<van-address-edit
  :area-list="areaList"
  show-postal
  show-delete
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="['请选择', '请选择', '请选择']"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"
/>
import { Toast } from 'vant';

export default {
  data() {
    return {
      areaList,
      searchResult: [],
    };
  },
  methods: {
    onSave() {
      Toast('save');
    },
    onDelete() {
      Toast('delete');
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区',
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
};

由于没有后端所以我们要自己调地址接口,common里面存放了全国各省市的地址

八，评价一下

使用了vant的uploader组件，文件上传

<van-uploader :after-read="afterRead" />
export default {
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
};

以及使用了Rate 评分组件

<van-rate v-model="value" />
export default {
  data() {
    return {
      value: 3,
    };
  },
};