A: hi! ~ Hello everyone, I am YK bacteria 🐷, a microsystem front-end ✨, love to think, love to summarize, love to record, love to share 🏹, welcome to follow me 😘 ~ [wechat account: Yk2012Yk2012, wechat public account: ykyk2012]

“This is the 13th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

The address of the project: https://gitee.com/ykang2020/vue_shop

Today, I continue to use Vue and Element to do the project of background management system. Today, I mainly realize the module of order management.

1. Branch git operations

Create the Git branch order for order management

git checkout -b order
git push -u origin order
Copy the code

2. Mount components and basic layout

As in the previous steps, put together the main frame

<template>
  <div>
    <! Breadcrumb navigation area -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">Home page</el-breadcrumb-item>
      <el-breadcrumb-item>The order management</el-breadcrumb-item>
      <el-breadcrumb-item>The order list</el-breadcrumb-item>
    </el-breadcrumb>
    <! -- Card View area -->
    <el-card>
      <el-row>
        <el-col :span="8">
          <el-input placeholder="Please enter the content">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
Copy the code

3. Obtain order data

Gets the interface document for the order data list

export default {
  data() {
    return {
      queryInfo: {
        query: ' '.pagenum: 1.pagesize: 10
      },
      total: 0.orderList: []}},created() {
    this.getOrderList()
  },
  methods: {
    async getOrderList() {
      const { data: result } = await this.$http.get('orders', {
        params: this.queryInfo
      })
      if(result.meta.status ! = =200) {
        return this.$message.error('Failed to get order list')}console.log(result)
      this.total = result.total
      this.orderList = result.data.goods
    }
  }
}
Copy the code

4. Table rendering

  <! -- Order list data -->
  <el-table :data="orderList" border stripe>
    <el-table-column type="index"></el-table-column>
    <el-table-column label="Order Number" prop="order_number"></el-table-column>
    <el-table-column label="Order price" prop="order_price"></el-table-column>
    <el-table-column label="Payment or not" prop="pay_status">
      <template slot-scope="scope">
        <el-tag type="success" v-if="scope.pay_status === '1'">Payment has been</el-tag>
        <el-tag type="danger" v-else>Not paying</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="Shipped or not" prop="is_send"></el-table-column>
    <el-table-column label="Order time" prop="create_time">
      <template slot-scope="scope">
        {{ scope.row.create_time | dateFormat }}
      </template>
    </el-table-column>
    <el-table-column label="Operation">
      <template>
        <el-button
          icon="el-icon-edit"
          size="mini"
          type="primary"
        ></el-button>
        <el-button
          icon="el-icon-location"
          size="mini"
          type="success"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>
Copy the code

5. Paging

  <! -- Paging area -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="queryInfo.pagenum"
    :page-sizes="[5, 10, 15]"
    :page-size="queryInfo.pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>
Copy the code

handleSizeChange(newSize) {
  this.queryInfo.pagesize = newSize
  this.getOrderList()
},
handleCurrentChange(newPage) {
  this.queryInfo.pagenum = newPage
  this.getOrderList()
}
Copy the code

6. Realize the data linkage effect of provinces, regions and counties

<! -- Modify modify address dialog box -->
<el-dialog
  title="Modify address"
  :visible.sync="addressVisible"
  width="50%"
  @close="addressDialogClosed"
>
  <! Content body area -->
  <el-form
    :model="addressForm"
    :rules="addressFormRules"
    ref="addressFormRef"
    label-width="100px"
  >
    <el-form-item label="Province/county" prop="address1">
      <el-cascader
        :options="cityData"
        v-model="addressForm.address1"
      ></el-cascader>
    </el-form-item>
    <el-form-item label="Full address" prop="address2">
      <el-input v-model="addressForm.address2"></el-input>
    </el-form-item>
  </el-form>
  <! -- Bottom area -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="addressVisible = false">Take away</el-button>
    <el-button type="primary" @click="addressVisible = false"
      >Determine < / el - button ></span>
</el-dialog>

<el-button
  icon="el-icon-edit"
  size="mini"
  type="primary"
  @click="showBox"
></el-button>
Copy the code

// Displays a dialog box for modifying the address
showBox() {
  this.addressVisible = true
},
addressDialogClosed() {
  this.$refs.addressFormRef.resetFields()
}
Copy the code

7. Display the logistics progress dialog box

<! -- Dialog box showing logistics progress -->
<el-dialog title="Logistics Schedule" :visible.sync="progressVisible" width="50%">
  <! Content body area -->
</el-dialog>
Copy the code

7.1 Obtaining Logistics Information

Because the original API interface has problems, so we put the data in the local, import data save file db.js

export default[{time: 'the 2018-05-10 09:39:00'.ftime: 'the 2018-05-10 09:39:00'.context: Thank you for using SF Express. Look forward to serving you again..location: ' '
  },
  {
    time: 'the 2018-05-10 08:23:00'.ftime: 'the 2018-05-10 08:23:00'.context: [Beijing] Sf Express 95338 is delivering for you..location: ' '
  },
  {
    time: 'the 2018-05-10 07:32:00'.ftime: 'the 2018-05-10 07:32:00'.context: "Express delivery arrives at [Business point of Yuxin Community, Haidian district, Beijing]".location: ' '
  },
  {
    time: 'the 2018-05-10 02:03:00'.ftime: 'the 2018-05-10 02:03:00'.context: The express parcel has been loaded at [Beijing Shunyi Distribution Center] and is ready to be sent to [Business point of Beijing Haidian Yuxin Community]..location: ' '
  },
  {
    time: 'the 2018-05-09 23:05:00'.ftime: 'the 2018-05-09 23:05:00'.context: "Express delivery to [Beijing Shunyi Distribution Center]".location: ' '
  },
  {
    time: 'the 2018-05-09 21:21:00'.ftime: 'the 2018-05-09 21:21:00'.context: The express mail has been loaded at [Beijing Baosheng Office] and is ready to send to [Beijing Shunyi Distribution Center]..location: ' '
  },
  {
    time: 'the 2018-05-09 13:07:00'.ftime: 'the 2018-05-09 13:07:00'.context: 'SF Express has collected express'.location: ' '
  },
  {
    time: 'the 2018-05-09 12:25:03'.ftime: 'the 2018-05-09 12:25:03'.context: 'Seller shipping'.location: ' '
  },
  {
    time: 'the 2018-05-09 12:22:24'.ftime: 'the 2018-05-09 12:22:24'.context: 'Your order will be delivered by HLA (Qinghe Zhongjie store, Haidian District, Beijing). '.location: ' '
  },
  {
    time: 'the 2018-05-08 21:36:04'.ftime: 'the 2018-05-08 21:36:04'.context: 'Goods have been ordered'.location: ' '}]Copy the code

import db from './db.js'
Copy the code

  progressInfo: [],
  db
Copy the code

showProgressBox() {
  // const { data: result } = await this.$http.get('http://localhost:3000')
  // if (result.meta.status ! = = 200) {
  // return this.$message.error(' failed to get logistics progress ')
  // }
  this.progressInfo = this.db
  this.progressVisible = true
  console.log(this.progressInfo)
}
Copy the code

7.2 Timeline Displays the logistics page

<! -- Dialog box showing logistics progress -->
<el-dialog title="Logistics Schedule" :visible.sync="progressVisible" width="50%">
  <! -- Content body area timeline -->
  <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in progressInfo"
      :key="index"
      :timestamp="activity.time"
    >
      {{ activity.context }}
    </el-timeline-item>
  </el-timeline>
</el-dialog>
Copy the code

As is shown in

8. Order. Vue complete code

Finally, we look at the complete order management component code

<template>
  <div>
    <! Breadcrumb navigation area -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">Home page</el-breadcrumb-item>
      <el-breadcrumb-item>The order management</el-breadcrumb-item>
      <el-breadcrumb-item>The order list</el-breadcrumb-item>
    </el-breadcrumb>
    <! -- Card View area -->
    <el-card>
      <el-row>
        <el-col :span="8">
          <el-input placeholder="Please enter the content">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <! -- Order list data -->
      <el-table :data="orderList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="Order Number" prop="order_number"></el-table-column>
        <el-table-column label="Order price" prop="order_price"></el-table-column>
        <el-table-column label="Payment or not" prop="pay_status">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.pay_status === '1'"
              >Paid </el-tag ><el-tag type="danger" v-else>Not paying</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="Shipped or not" prop="is_send"></el-table-column>
        <el-table-column label="Order time" prop="create_time">
          <template slot-scope="scope">
            {{ scope.row.create_time | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="Operation">
          <template>
            <el-button
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="showBox"
            ></el-button>
            <el-button
              icon="el-icon-location"
              size="mini"
              type="success"
              @click="showProgressBox"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <! -- Paging area -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 15, 20]." "
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>

    <! -- Modify modify address dialog box -->
    <el-dialog
      title="Modify address"
      :visible.sync="addressVisible"
      width="50%"
      @close="addressDialogClosed"
    >
      <! Content body area -->
      <el-form
        :model="addressForm"
        :rules="addressFormRules"
        ref="addressFormRef"
        label-width="100px"
      >
        <el-form-item label="Province/county" prop="address1">
          <el-cascader
            :options="cityData"
            v-model="addressForm.address1"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="Full address" prop="address2">
          <el-input v-model="addressForm.address2"></el-input>
        </el-form-item>
      </el-form>
      <! -- Bottom area -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addressVisible = false">Take away</el-button>
        <el-button type="primary" @click="addressVisible = false"
          >Determine < / el - button ></span>
    </el-dialog>

    <! -- Dialog box showing logistics progress -->
    <el-dialog title="Logistics Schedule" :visible.sync="progressVisible" width="50%">
      <! -- Content body area timeline -->
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in progressInfo"
          :key="index"
          :timestamp="activity.time"
        >
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
import cityData from './citydata.js'
import db from './db.js'
export default {
  data() {
    return {
      queryInfo: {
        query: ' '.pagenum: 1.pagesize: 10
      },
      total: 0.orderList: [].addressVisible: false.addressForm: {
        address1: [].address2: ' '
      },
      addressFormRules: {
        address1: [{required: true.message: 'Please select city/province/county'.trigger: 'blur'}].address2: [{required: true.message: 'Please enter full address'.trigger: 'blur' }
        ]
      },
      cityData,
      progressVisible: false.progressInfo: [],
      db
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    async getOrderList() {
      const { data: result } = await this.$http.get('orders', {
        params: this.queryInfo
      })
      if(result.meta.status ! = =200) {
        return this.$message.error('Failed to get order list')}console.log(result)
      this.total = result.data.total
      this.orderList = result.data.goods
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getOrderList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getOrderList()
    },
    // Displays a dialog box for modifying the address
    showBox() {
      this.addressVisible = true
    },
    addressDialogClosed() {
      this.$refs.addressFormRef.resetFields()
    },
    showProgressBox() {
      // const { data: result } = await this.$http.get('http://localhost:3000')
      // if (result.meta.status ! = = 200) {
      // return this.$message.error(' failed to get logistics progress ')
      // }
      this.progressInfo = this.db
      this.progressVisible = true
      console.log(this.progressInfo)
    }
  }
}
</script>

<style scoped>
.el-cascader {
  width: 100%;
}
</style>

Copy the code

9. Branch git operations

git add .
git commit -m "Complete order management function"
git push
git checkout master
git merge order
git push
Copy the code

The address of the project: https://gitee.com/ykang2020/vue_shop

Finally, welcome to my column and make friends with YK bacteria

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

[Vue] Actual combat project: e-commerce background management system (seven) order management module

1. Branch git operations

2. Mount components and basic layout

3. Obtain order data

4. Table rendering

5. Paging

6. Realize the data linkage effect of provinces, regions and counties

7. Display the logistics progress dialog box

7.1 Obtaining Logistics Information

7.2 Timeline Displays the logistics page

8. Order. Vue complete code

9. Branch git operations

[Vue] Actual combat project: e-commerce background management system (seven) order management module

1. Branch git operations

2. Mount components and basic layout

3. Obtain order data

4. Table rendering

5. Paging

6. Realize the data linkage effect of provinces, regions and counties

7. Display the logistics progress dialog box

7.1 Obtaining Logistics Information

7.2 Timeline Displays the logistics page

8. Order. Vue complete code

9. Branch git operations

Related Posts

Eggjs + Vite + VUe3 front-end development overall architecture scheme

Javascript high-level constructors

Class array and array distinction and conversion