uk_front/pages/home/myDetail/index.vue

<template>
  <div class="com-main com-margin-auto com-fixationwidth-1400">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item>{{ tabName }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <el-menu
        background-color="#e8eaee"
        text-color="#4a596c"
        ref="menu"
        active-text-color="#fff"
        class="el-menu-vertical"
        :default-active="activeMenu"
        @select="handleClick">
        <el-menu-item index="profile">
          <i class="iconfont">&#xe630;</i>
          <span slot="title">My Profile</span>
        </el-menu-item>
        <!-- <el-menu-item index="enquiry">
          <i class="iconfont">&#xe610;</i>
          <span slot="title">My Enquiry</span>
        </el-menu-item> -->
        <!-- <el-menu-item index="address">
          <i class="iconfont">&#xe619;</i>
          <span slot="title">My Addresses</span>
        </el-menu-item> -->
        <el-submenu index="order">
          <template slot="title">
            <i class="iconfont">&#xe610;</i>
            <span slot="title">My Orders</span>
          </template>
          <el-menu-item index="all-orders">All Orders</el-menu-item>
          <el-menu-item index="open-orders">Open Orders</el-menu-item>
          <el-menu-item index="closed-orders">Closed Orders</el-menu-item>
        </el-submenu>
        <!-- <el-menu-item index="account">
          <i class="iconfont">&#xe638;</i>
          <span slot="title">Account And Password</span>
        </el-menu-item> -->
      </el-menu>
      <div class="content-right">
        <div v-show="activeMenu === 'profile'">
          <div class="content-form">
            <p class="content-title">{{ tabName }}</p>
            <el-form
              ref="form"
              :model="profileform"
              :rules="rules"
              label-width="220px">
              <el-row>
                <el-col :span="15">
                  <el-form-item
                    label="Email Address"
                    prop="email">
                    <el-input
                      v-model="profileform.email"
                      :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item
                    class="upload-item"
                    label="Your Logo">
                    <image-upload
                      :list.sync="profileform.logo"
                      :disablePreview="true"
                      :max="1"></image-upload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item
                label="Company Name"
                prop="company">
                <el-input v-model="profileform.company"></el-input>
              </el-form-item>
              <el-form-item
                label="First Name"
                prop="contacts">
                <el-input v-model="profileform.contacts"></el-input>
              </el-form-item>
              <el-form-item
                label="Last Name"
                prop="last_name">
                <el-input v-model="profileform.last_name"></el-input>
              </el-form-item>
              <el-form-item
                label="Contact Phone Number"
                prop="phone">
                <el-input v-model="profileform.phone"></el-input>
              </el-form-item>
              <!-- <el-form-item>
              <el-button
                class="saveBtn"
                @click="onSave('form')"
                >Save</el-button>
            </el-form-item> -->
            </el-form>
          </div>
          <div
            class="content-form"
            style="margin-top: 20px">
            <p class="content-title">Account And Password</p>
            <el-form
              ref="ruleForm"
              :model="accountPasswordForm"
              label-width="220px"
              class="accountPasswordForm">
              <el-form-item
                label="Enter the new password"
                prop="password">
                <el-input v-model="accountPasswordForm.password"></el-input>
              </el-form-item>
              <el-form-item
                label="Retype the password"
                prop="confirm_password">
                <el-input
                  v-model="accountPasswordForm.confirm_password"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  class="saveBtn"
                  @click="onSave('form')">
                  Save
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div
          v-show="activeMenu === 'enquiry'"
          class="content-form">
          <p class="content-title">{{ tabName }}</p>
          <div class="searchInput">
            <el-input
              placeholder="Search your job name"
              v-model="enquiryKeyword"
              clearable
              @keyup.enter.native="getEnquiryList"
              @clear="getEnquiryList"
              ><i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="getEnquiryList"></i>
            </el-input>
          </div>
          <el-table
            class="table-order-list"
            :data="enquiryList"
            stripe
            style="width: 100%"
            @row-click="goEnquiryDetail"
            :header-cell-style="{ background: '#00213b', color: '#ffffff' }"
            v-loading="tableLoading">
            <el-table-column
              prop="Auto_Number"
              label="Enquiry No">
            </el-table-column>
            <el-table-column
              prop="Enquiry_Title"
              label="Job Name"
              width="300">
            </el-table-column>
            <el-table-column
              prop="Customize_Pipeline_Stage"
              label="Status"></el-table-column>
            <!-- <el-table-column
          prop="Rating"
          label="Ratiing"></el-table-column> -->
            <el-table-column
              prop="Enquiry_Created"
              label="Date">
              <template slot-scope="scope">
                <div>
                  {{
                    $utils.formatTime(
                      scope.row.Sales_Order_Created,
                      'DD/MM/YYYY',
                      true
                    )
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="Action"
              width="90"
              align="center">
              <template>
                <el-button
                  size="small"
                  style="background-color: rgb(0, 33, 59); color: #fff"
                  plain
                  >View</el-button
                >
              </template>
            </el-table-column>
            <!-- <el-table-column label="Quote PDF">
          <template>
            <el-button>Download</el-button>
          </template>
        </el-table-column> -->
          </el-table>
          <pagination
            v-show="enquiryTotal > 0"
            :total="enquiryTotal"
            :page.sync="enquiryListQuery.page"
            :limit.sync="enquiryListQuery.limit"
            @pagination="getEnquiryList" />
        </div>
        <!-- <div
          v-show="activeMenu === 'address'"
          class="content-form">
          <p class="content-title">{{ tabName }}</p>
          <div class="address-content">
            <div
              class="my-addresses add-address"
              @click="addAddress(2)">
              <img
                src="@/assets/img/myAccount/add-address.png"
                alt="" />
              <p>Add address</p>
            </div>
            <div
              class="my-addresses address"
              v-for="item in addressList"
              :key="item.id">
              <div class="username">
                <p>{{ item.name }}</p>
                <span v-show="item.is_default">Default</span>
              </div>
              <div class="my-address-content">
                <p>{{ item.state }}</p>
                <p>{{ item.city }}</p>
                <p>{{ item.address }}</p>
                <p>{{ item.post_code }}</p>
                <p>{{ item.country }}</p>
                <p>Phone number: {{ item.phone }}</p>
              </div>
              <div class="edit-btns">
                <el-button
                  size="mini"
                  @click="editAddress(3, item.id)">
                  Edit
                </el-button>
                <el-button
                  size="mini"
                  @click="delAddress(item.id)">
                  Remove
                </el-button>
                <el-button
                  size="mini"
                  @click="setDefault(item.id)"
                  v-show="!item.is_default">
                  Set as Default
                </el-button>
              </div>
            </div>
          </div>
          <pagination
            v-show="addressTotal > 0"
            :total="addressTotal"
            :page.sync="addressListQuery.page"
            :limit.sync="addressListQuery.limit"
            @pagination="getAddressList" />
        </div> -->
        <!-- My Orders -->
        <div
          v-show="activeMenu.includes('orders')"
          class="content-form">
          <p class="content-title">{{ tabName }}</p>
          <div class="searchInput">
            <el-input
              placeholder="Search your job name"
              v-model="orderKeyword"
              clearable
              @keyup.enter.native="getOrdersList"
              @clear="getOrdersList"
              ><i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="getOrdersList"></i>
            </el-input>
            <el-select
              v-if="selShow"
              v-model="selword"
              filterable
              clearable
              default-first-option
              placeholder="Select the status">
              <el-option
                v-for="option in orderSelList"
                :label="option"
                :value="option"
                :key="option"></el-option>
            </el-select>
            <el-select
              v-if="$store.state.userInfo?.memberCrmcomList?.length > 1"
              v-model="accounts_id"
              filterable
              clearable
              default-first-option
              placeholder="Select the CRM">
              <el-option
                v-for="option in $store.state.userInfo?.memberCrmcomList"
                :label="option.name"
                :value="option.id"
                :key="option.id"></el-option>
            </el-select>
            <el-button
              type="primary"
              @click="getOrdersList"
              style="
                background-color: rgb(0, 33, 59);
                border-color: rgb(0, 33, 59);
              "
              >Submit</el-button
            >
          </div>
          <el-table
            class="table-order-list"
            :data="tableData"
            v-loading="tableLoading"
            stripe
            :header-cell-style="{ background: '#00213b', color: '#ffffff' }"
            style="width: 100%">
            <el-table-column
              prop="Sales_Order_Title_Job_Name"
              label="Job Name">
              <template slot-scope="scope">
                <p class="table-list-p1">
                  {{ scope.row.Sales_Order_Title_Job_Name }}
                </p>
                <!-- <p class="table-list-co2" v-if="scope.row.Emission_Total_Kg && scope.row.Emission_Total_Kg != '0'">
                  <img src="@/assets/img/esg/co2_green.png" alt="CO2" class="co2-icon" />
                  <span>{{ scope.row.Emission_Total_Kg }} kg CO₂e</span>
                </p> 
                <p class="table-list-p2">Brand Name:{{ scope.row.Brand_Name }}</p>
                <p class="table-list-p2">ETA:{{ $utils.formatTime(scope.row.Expected_Delivery_Date,'DD/MM/YYYY') }}</p> -->
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              prop="Reference"
              label="Order No">
            </el-table-column>
            <el-table-column
              width="120"
              prop="Sales_Order_Created"
              label="Order Date">
              <template slot-scope="scope">
                <div>
                  {{
                    $utils.formatTime(
                      scope.row.Sales_Order_Created,
                      'DD/MM/YYYY'
                    )
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              width="140"
              prop="Order_Stage_new"
              label="Order Status">
            </el-table-column>
            <el-table-column
              width="160"
              prop="Tracking_No_arr"
              label="Tracking No#">
              <template slot-scope="scope">
                <ul class="location">
                  <li
                    v-for="item in scope.row.Tracking_No_arr"
                    :key="item.Tracking_No"
                    @click="openTracking_URL(item.Tracking_URL)">
                    <i class="el-icon-location"></i>{{ item.Tracking_No }}
                  </li>
                </ul>
              </template>
            </el-table-column>
            <el-table-column
              width="110"
              prop="Grand_Total"
              label="Amount">
              <template slot-scope="scope">
                ${{ transformNumber(scope.row.Grand_Total) }}
              </template>
            </el-table-column>
            <el-table-column
              label="Action"
              width="100"
              align="center">
              <template slot-scope="scope">
                <!-- <el-button
                  v-if="scope.row.Order_Stage_new === 'Sales Order Created'"
                  @click="openApproved(scope.row)"
                  size="small"
                  style="
                    background-color: rgb(0, 33, 59);
                    color: #fff;
                    width: 85px;
                  "
                  plain
                  >Approved</el-button> -->
                <el-button
                  @click="goOrderDetail(scope.row)"
                  size="small"
                  style="
                    background-color: rgb(0, 33, 59);
                    color: #fff;
                    width: 85px;
                    margin: 0;
                  "
                  plain
                  >View</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="orderTotal > 0"
            :total="orderTotal"
            :page.sync="orderListQuery.page"
            :limit.sync="orderListQuery.limit"
            @pagination="getOrdersList" />
        </div>
      </div>
    </div>
    <!-- <add-address-dialog
      :dialogVisible.sync="dialogVisible"
      :data="addressDetail"
      :componentVisible="componentVisible"
      @close="closeAddressDialog"
      @update="update" /> -->
    <dialog-XX-success
      :visible.sync="xxContentVisible"
      :content="xxContent"
      @notify-parent="handleNotification"></dialog-XX-success>
    <el-dialog
      :lock-scroll="false"
      :visible.sync="urlDialogShow"
      center
      width="850px"
      top="20vh">
      <iframe
        :src="Tracking_URL"
        style="width: 100%; height: 500px"
        frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
// import addAddressDialog from '../../../components/addAddressDialog.vue'
import dialogXXSuccess from '@/components/DIalogXXSuccess.vue'
import imageUpload from '@/components/ImageUpload'
import { round } from '@/utils/price.js'

export default {
  components: {
    // addAddressDialog,
    'dialog-XX-success': dialogXXSuccess,
    imageUpload,
  },
  data() {
    return {
      xxContentVisible: false,
      xxContent: 'success',
      componentVisible: 1, // 2:add   3:edit  4:audit
      tabName: '',
      tableLoading: true,
      // 表单配置项
      profileform: {},
      rules: {
        email: [
          {
            required: true,
            message: 'Please enter the email',
            trigger: 'blur',
          },
        ],
        company: [
          {
            required: true,
            message: 'Please enter the company',
            trigger: 'blur',
          },
        ],
        contacts: [
          {
            required: true,
            message: 'Please enter first name',
            trigger: 'blur',
          },
        ],
        last_name: [
          {
            required: true,
            message: 'Please enter last name',
            trigger: 'blur',
          },
        ],
        phone: [
          {
            required: true,
            message: 'Please enter the phone',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: 'Please enter the password',
            trigger: 'blur',
          },
        ],
        confirm_password: [
          {
            required: true,
            message: 'Please enter the confirm_password',
            trigger: 'blur',
          },
        ],
      },
      accountPasswordForm: {
        password: '',
        confirm_password: '',
      },
      orderKeyword: '',
      selword: '',
      accounts_id: '',
      orderTotal: 0,
      orderListQuery: {
        page: 1,
        limit: 20,
      },
      tableData: [],
      dialogVisible: false,
      addressTotal: 0,
      addressListQuery: {
        page: 1,
        limit: 8,
      },
      addressList: [],
      addressDetail: {},
      enquiryKeyword: '',
      enquiryList: [],
      enquiryListQuery: {
        page: 1,
        limit: 20,
      },
      enquiryTotal: 0,
      orderSelList: [],
      Tracking_URL: '',
      urlDialogShow: false,
    }
  },
  computed: {
    activeMenu() {
      return this.$route.query.type ?? 'profile'
    },
    selShow() {
      return (
        this.activeMenu === 'all-orders' || this.activeMenu === 'open-orders'
      )
    },
  },
  watch: {
    $route: {
      handler(to) {
        if (process.client) {
          if (this.$utils.checkLogin()) {
            this.updateType()
          }
        }
      },
    },
    orderKeyword() {
      this.orderListQuery.page = 1
    },
    enquiryKeyword() {
      this.enquiryListQuery.page = 1
    },
  },
  mounted() {
    if (this.$utils.checkLogin()) {
      this.updateType()
    } else {
      this.$router.replace('/')
    }
  },
  methods: {
    transformNumber(value) {
      return round(Number(value)).toFixed(2)
    },
    handleClick(key, keyPath) {
      if (key) {
        this.$router.push({
          path: '/home/myDetail',
          query: { type: key },
        })
      }
    },
    updateType() {
      if (this.activeMenu === 'profile') {
        this.tabName = 'My Profile'
        this.getMemberDetail()
      } else if (this.activeMenu === 'enquiry') {
        this.tabName = 'My Enquiry'
        this.getEnquiryList()
      } else if (this.activeMenu === 'address') {
        // this.tabName = 'My Address'
        // this.getAddressList()
      } else {
        this.selword = ''
        if (this.activeMenu === 'all-orders') {
          this.orderSelList = [
            'Order Confirmed',
            'In Production',
            'In Transit',
            'Order Completed',
          ]
        }
        if (this.activeMenu === 'open-orders') {
          this.orderSelList = ['Order Confirmed', 'In Production', 'In Transit']
        }
        this.tabName = 'My Orders'
        this.getOrdersList()
      }
    },
    closeAddressDialog() {
      this.dialogVisible = false
    },
    // 获取用户信息
    getMemberDetail() {
      this.$axios
        .get('/uk-api/uk/member/detail')
        .then(res => {
          if (res.code === 1) {
            this.profileform = res.result
            this.profileform.logo = this.profileform.logo
              ? this.formatLogo(this.profileform.logo)
              : []
          }
        })
        .catch(() => {})
    },
    formatLogo(params) {
      return [{ url: params }]
    },
    onSave(form) {
      if (
        this.accountPasswordForm.confirm_password !==
        this.accountPasswordForm.password
      ) {
        this.$message.error('The second password is inconsistent!')
        return
      }
      this.$refs[form].validate(valid => {
        if (valid) {
          const requestBody = {
            email: this.profileform.email,
            company: this.profileform.company,
            contacts: this.profileform.contacts,
            last_name: this.profileform.last_name,
            phone: this.profileform.phone,
            logo: this.profileform.logo[0]?.url ?? '',
          }
          let needLogout = false
          if (this.accountPasswordForm.password.trim() !== '') {
            requestBody.password = this.accountPasswordForm.password
            requestBody.confirm_password =
              this.accountPasswordForm.confirm_password
            needLogout = true
          }
          this.$axios
            .post('/uk-api/uk/member/edit', requestBody)
            .then(res => {
              if (res.code === 1) {
                this.$notify({
                  customClass: 'custom-notify-class',
                  title: 'success',
                  message: 'The profile information is modified successfully',
                  type: 'success',
                })
                if (needLogout) {
                  setTimeout(() => {
                    this.$store.dispatch('logout').then(() => {
                      this.$router.push('/')
                    })
                  }, 500)
                }
              }
            })
            .catch(() => {})
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取订单列表
    getOrdersList() {
      const accounts_id = this.accounts_id
        ? this.accounts_id
        : this.$store.state.userInfo?.memberCrmcomList.map(i => i.id).join()
      const type =
        this.activeMenu === 'all-orders'
          ? ''
          : this.activeMenu === 'open-orders'
          ? 'Open Orders'
          : 'Closed Orders'
      this.tableLoading = true
      this.$axios
        .post('/uk-api/crmdata/order_lists', {
          keyword: this.orderKeyword,
          page: this.orderListQuery.page,
          limit: this.orderListQuery.limit,
          accounts_id,
          Order_Stage: this.selword,
          type,
        })
        .then(res => {
          if (res.code === 1) {
            this.tableData = res.result.data
            this.orderTotal = res.result.total
            this.tableLoading = false
          }
          if (process.client) {
            this.$nextTick(() => {
              window.scroll(0, 0)
            })
          }
        })
        .catch(() => {})
    },
    goOrderDetail(row) {
      const routeUrl = this.$router.resolve({
        path: '/home/myDetail/orderDetail',
        query: { id: row.sales_orders_id, crm: row.Account_Name_id },
      })
      window.open(routeUrl.href, '_blank')
    },
    openApproved(row) {
      this.$confirm(
        `
        <div style="text-align:center;">
          <h3 style="margin:0 0 10px;color:#333;">Ready to order?</h3>
          <p style="margin:0;font-size:16px;color:#333;">Your total is <b>${this.transformNumber(
            row.Grand_Total
          )}</b>. Confirm to place your order.</p>
        </div>
        `,
        '',
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          confirmButtonClass: 'el-button',
          cancelButtonClass: 'el-button--info',
          center: true,
          showClose: false,
          confirmButtonClass: 'com-btnblack',
        }
      ).then(() => {
        this.$router.push({
          path: '/so-confirm',
          query: { id: row.sales_orders_id, pc_psw: row.HASH },
        })
      })
    },
    getEnquiryList() {
      this.tableLoading = true
      this.$axios
        .post('/uk-api/crmdata/enquiries_lists', {
          keyword: this.enquiryKeyword,
          page: this.enquiryListQuery.page,
          limit: this.enquiryListQuery.limit,
          accounts_id: this.$store.state.userInfo?.crm_accounts_id || '',
        })
        .then(res => {
          if (res.code === 1) {
            this.enquiryList = res.result.data
            this.enquiryTotal = res.result.total
            this.tableLoading = false
          }
          if (process.client) {
            this.$nextTick(() => {
              window.scroll(0, 0)
            })
          }
        })
    },
    goEnquiryDetail(row) {
      const routeUrl = this.$router.resolve({
        path: '/home/myDetail/enquiryDetail',
        query: { id: row.enquiries_id },
      })
      window.open(routeUrl.href, '_blank')
    },
    // 获取地址列表
    // getAddressList() {
    //   this.$axios
    //     .get('/api/address/list', {
    //       params: {
    //         page: this.addressListQuery.page,
    //         limit: this.addressListQuery.limit,
    //       },
    //     })
    //     .then(res => {
    //       if (res.code === 1) {
    //         this.addressList = res.result.data
    //         this.addressTotal = res.result.total
    //       }
    //       if (process.client) {
    //         this.$nextTick(() => {
    //           window.scroll(0, 0)
    //         })
    //       }
    //     })
    //     .catch(() => {})
    // },
    // addAddress(num) {
    //   this.addressDetail = {}
    //   this.componentVisible = num
    //   this.dialogVisible = true
    // },
    // editAddress(num, id) {
    //   this.$axios
    //     .get('/api/address/detail/' + id)
    //     .then(res => {
    //       this.addressDetail = res.result
    //       this.addressDetail.is_default = res.result.is_default === 1
    //       this.componentVisible = num
    //       this.dialogVisible = true
    //     })
    //     .catch(() => {})
    // },
    // delAddress(id) {
    //   this.$axios.get('/api/address/delete/' + id).then(res => {
    //     this.$notify({
    //       title: 'success',
    //       message: 'Deleted successfully',
    //       type: 'success',
    //       duration: 3000,
    //     })
    //     this.getAddressList()
    //   })
    // },
    // setDefault(id) {
    //   this.$axios.get('/api/address/set_default/' + id).then(res => {
    //     this.$notify({
    //       title: 'success',
    //       message: 'Default address is set successfully',
    //       type: 'success',
    //       duration: 3000,
    //     })
    //     this.getAddressList()
    //   })
    // },
    // update() {
    //   this.getAddressList()
    // },
    resetPassword() {
      if (
        this.accountPasswordForm.confirm_password !==
        this.accountPasswordForm.password
      ) {
        this.$message.error('The second password is inconsistent!')
      } else {
        this.$axios({
          url: '/uk-api/uk/member/reset',
          method: 'POST',
          data: this.accountPasswordForm,
        })
          .then(res => {
            if (res.code === 1) {
              this.xxContentVisible = true
              this.xxContent = 'Password Reset Successful'
            }
          })
          .catch(() => {
            // this.$message.error(error.response.data.msg);
          })
      }
    },
    openTracking_URL(url) {
      this.Tracking_URL = url
      this.urlDialogShow = true
    },
    handleNotification() {
      this.$router.push('/')
      this.$store.dispatch('logout')
      this.openDialog()
    },
    ...mapMutations(['openDialog']),
  },
}
</script>

<style lang="scss">
.custom-notify-class {
  .el-notification__content {
    text-align: left;
  }
}
</style>

<style lang="scss" scoped>
.content {
  display: flex;
  .el-menu-vertical {
    width: 260px;
    min-height: 606px;
    background: #e8eaee;
    .iconfont {
      font-size: 22px;
    }
    :deep(.el-menu-item) {
      font-size: 16px;
      &:hover {
        background-color: #e8eaee !important;
      }
      &.is-active {
        background-color: #00213b !important;
      }
    }
    :deep(.el-submenu__title) {
      font-size: 16px;
      &:hover {
        background-color: #e8eaee !important;
      }
    }
  }
  :deep(.content-right) {
    flex: 1;
    margin-left: 15px;
    & > div {
      min-height: 606px;
    }
    .content-title {
      margin: 15px 0px 25px 15px;
      position: relative;
      width: 282px;
      height: 27px;
      font-size: 24px;
      font-weight: bold;
      color: #102f47;
      &::before {
        content: '';
        position: absolute;
        left: -14px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 17px;
        background: #e90000;
        border-radius: 2px;
        margin-right: 10px;
      }
    }
    .content-form {
      border: 1px solid #c7c7c7;
      padding: 0 20px;
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
    }
    .searchInput {
      margin-bottom: 10px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 0.5fr 1fr;
      gap: 10px;
      .el-input {
        .el-input__inner {
          border-radius: 30px;
        }
        .el-input__suffix {
          .el-input__icon {
            font-size: 16px;
            font-weight: bold;
          }
          .el-icon-search {
            cursor: pointer;
          }
        }
      }
    }
    .table-order-list {
      width: 100%;
      border: 1px solid #c2c2c2;
      .table-list-p1 {
        font-weight: 600;
        color: #333;
        font-size: 16px;
      }
      .table-list-p2 {
        font-size: 14px;
      }
      .table-list-co2 {
        display: inline-flex;
        align-items: center;
        background: #f4fcf6;
        border: 2px solid #7ed7a5;
        border-radius: 4px;
        padding: 1px 6px;
        font-weight: bold;
        color: #07a73a;
        font-size: 12px;
        .co2-icon {
          width: 18px;
          height: 18px;
          margin-right: 4px;
        }
      }
    }
    .upload-item {
      position: absolute;
      right: 50px;
      top: 0;
      z-index: 2;
      .el-form-item__content {
        z-index: 1;
      }
    }
    .el-form-item {
      margin-bottom: 20px;
      height: 40px;
      .el-form-item__label {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 35px;
      }
      .el-input__inner {
        width: 460px;
        background: #ffffff;
        border: 1px solid #bebebe;
        border-radius: 4px;
      }
      .saveBtn {
        min-width: 140px;
        height: 40px;
        background: #00213b;
        border-radius: 6px;
        font-size: 18px;
        font-weight: 400;
        color: #ffffff;
        margin-left: 180px;
      }
    }
    .el-table {
      margin-bottom: 10px;
      border: 1px solid #c7c7c7;
      .el-table__header {
        height: 57px;
      }
      .el-table__row {
        height: 57px;
      }
    }
    .address-content {
      display: flex;
      flex-wrap: wrap;
      .my-addresses {
        display: inline-block;
        width: 350px;
        height: 300px;
        box-sizing: border-box;
        margin-bottom: 15px;
        background: #f9fcfe;
        border: 1px solid #c7c7c7;
        border-radius: 10px;
        margin-right: 13px;
        &:nth-of-type(3),
        &:nth-of-type(6),
        &:nth-of-type(9) {
          margin-right: 0;
        }
      }
      .add-address {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        img {
          width: 77px;
          height: 77px;
        }
        p {
          width: 330px;
          height: 21px;
          font-size: 30px;
          font-family: Proxima Nova;
          font-weight: 400;
          color: #00213b;
          line-height: 30px;
          text-align: center;
        }
      }
      .address {
        padding: 15px;
        .username {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 35px;
          p {
            height: 35px;
            font-size: 24px;
            font-family: Proxima Nova;
            font-weight: bold;
            color: #102f47;
            line-height: 35px;
          }
          span {
            height: 22px;
            font-size: 14px;
            font-family: Proxima Nova;
            font-weight: 400;
            color: #ef1f1f;
            line-height: 22px;
          }
        }
        .my-address-content {
          margin: 10px 0px;
          p {
            font-size: 16px;
            font-family: Proxima Nova;
            font-weight: 400;
            color: #666666;
            line-height: 30px;
          }
        }
        .edit-btns {
          display: flex;
          justify-content: flex-end;
          .el-button {
            font-size: 16px;
            font-family: Proxima Nova;
            font-weight: 400;
            color: #00213b;
            border: 1px solid #00213b;
            border-radius: 4px;
          }
          .el-button--mini {
            padding: 3px 10px;
          }
        }
      }
    }
    .location {
      color: #004a97;
      li {
        cursor: pointer;
      }
    }
    .center {
      text-align: center;
    }
  }
}
:deep(.el-pagination.is-background) {
  .el-pager {
    li.number {
      background-color: #f8f8f8;
      border-radius: 50%;
      color: #a7a7a7;
    }
    li:not(.disabled).active {
      background-color: #00213b;
      color: #d4d7da;
    }
  }
  .btn-prev,
  .btn-next {
    border-radius: 50%;
    background-color: #fff;
    .el-icon-arrow-left:before {
      content: '';
    }
    .el-icon-arrow-right:before {
      content: '';
    }
  }
}
</style>