确认订单页(-- 郑郑日上项目【Vue2】【PC 端】【商城】)

130 阅读1分钟

一、如何为特定类型的第四个子元素、第八个子元素、第十二个子元素... 添加样式

特定类型元素:nth-of-type(4n) 选择器

二、点击当前收货地址时,为当前收货地址动态添加样式

1、声明一个变量,用来存储当前元素的索引,初始值为 0

data() {
  return {
    mark: 0;
  }
}

2、动态添加类名,条件是存储索引的变量要和当前索引相等

<div :class="{ checked: version === index }" @click="checkedAddress(index)">

3、点击时将当前元素的索引传递给存储下标的变量

checkedAddress(index) {
  this.mark = index
}

三、【BUG】el-select 不能为空的验证规则,即使有值也显示为空的问题

1、trigger 设置为 change

2、type 设置为 number(value 的值是什么类型的这里就填什么类型)

districtId: [
  { required: true, trigger: 'change', message: '不能为空', type: 'string' } // 不能为空
],

四、获取当前选中地址,并发送给创建订单的接口

原理: 通过当前选中的下标去地址列表中查找对应的地址

// 创建 订单
createOrder(i) {
  const { address, cityId, linkMan, mobile, provinceId } = this.shippingAddressList[this.currentAddress]
  this.axios.post('/order/create', {
    goodsJsonStr: this.shopCartInfo,
    address,
    cityId,
    linkMan,
    mobile,
    provinceId,
  })
},