Create a new detail vue； (important visual components are placed in the view)

Configure index in router JS related routing information; (there are two ways of routing data, params and query, where params is used),

{
   path: "/detail/:iid",
   component: Detail
}

Add click events and corresponding methods to the product details page component

itemClick() {
      this.$router.push("/detail/" + this.goodsItem.iid);
    },

The configuration of the jump is complete. Then save the iid to the detail page component;

created() {
    this.iid = this.$route.params.iid;
    // console.log(this.$route);
  },

1. Navigation bar section

1-1 should have been in deatil Using navbar.com in Vue Vue component, but for business separation, simplicity and beauty, a navbar type component is extracted separately in the current detail Create a new sub file in Vue and separately encapsulate a new detailavbar component;

1-2 in the detailavabar component, import navbar Vue, respectively implement the title name (v-for), and click the event to dynamically bind the class

:class="{ active: index === curIndex }"
          @click="titleClick(index)"
//
methods: {
    titleClick(index) {
      this.curIndex = index;
    },
  },

1-3 add the return button on the left side of the detailnavbar

backClick() {
      this.$router.back();//this.$router.go(-1)
    },

2. Rotation chart part

The rotation chart component needs to request data from the server, so it needs to separately encapsulate the request method (detail.js) and store and operate the data. The hierarchical relationship is that when the created() of the detail component is created, it sends a network request to obtain the data and passes it to the detailwiper sub component, (click send network request in goodslistitem to get the data and pass it to the detail component. This is an error). Use the relevant swiper and swiperitem in this component.

Note that app Keep alive has been used in Vue, resulting in the same bug every time you open the details page. You need to operate keep alive, as shown below

 <keep-alive exclude="Detail">
      <router-view></router-view>
    </keep-alive>
//Detail is the deatil name attribute of Vue.

3. Basic information components;

Because the data structure returned by the server is too complex, we need to select the required content for saving.

3-1 it is necessary to process the data returned by the server and operate in the way of class. In detail JS

//detail.js
export class Goods {
    constructor(itemInfo, columns, services) {
        this.title = itemInfo.title;
        this.desc = itemInfo.desc;
        this.newPrice = itemInfo.price;
        this.oldPrice = itemInfo.oldPrice;
        this.discount = itemInfo.discountDesc;
        this.columns = columns;
        this.services = services;
        this.realPrice = itemInfo.lowNowPrice;
    }
}

//Save the selected required information, deatil vue
 this.goods = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );

Save all the requested content in the instance of goods.

Next, create a new detailbaseinfo component, implement the corresponding data presentation and layout in the component, and apply the component to detail Vue (pass the goods content to the subcomponent detailbaseinfo). It is mainly the css layout of detailbaseinfo.

Print Goods ↓

//
<div class="info-service">
      <span
        class="info-service-item"
        v-for="index in goods.services.length - 1"
        :key="index"
      >
        <img
          v-if="goods.services[index - 1].icon !== undefined"
          :src="goods.services[index - 1].icon"
          alt=""
        />
        <span>{{ goods.services[index - 1].name }}</span>
      </span>
    </div>
//<span>{{goods. Services [goods. Services. Length - 1]. Name}} < / span > / / 72 hour delivery
/*Why is index-1 here? Because of goods Services is an array, ['return and replenishment freight', 'National parcel post', 'return without reason in 7 days',' 72 hour delivery '] their displayed positions are not in the same group.
'Return and replenishment of freight ',' National parcel post ',' return without reason in 7 days' is in info other, and 72 hour delivery is in info services.*/

v-for="index in goods.services.length - 1" :key="index"
//index is 1,2,3,4

Note: there is a V-IF judgment here, which means that the DOM can be rendered only after the data is obtained. To prevent DOM from obtaining data after rendering due to network speed and other reasons, resulting in failure to achieve the expected design effect.

v-if is the rendering dom, and v-show is to set the display attribute

<div
    class="base-info"
    v-if="
      goods !== undefined &&
      goods.columns !== undefined &&
      goods.services !== undefined
    "
  >

 <div class="info-other" v-if="goods.columns[0]">

 <img v-if="goods.services[index - 1].icon !== undefined"
       :src="goods.services[index - 1].icon"
 />