uk_front/pages/product-record/_code.vue

<template>
  <div
    v-show="isPromocollection"
    class="page-prodcut-record com-width-1400 com-minwidth-1024 com-margin-auto">
    <!-- <div>{{ record }}</div> -->
    <div class="title">
      {{ record.product_code }}&nbsp;{{ record.product_name }}&nbsp;价格 +
      产品呈现
    </div>
    <div class="author-wrap flex column center">
      <div class="flex center">
        <div class="time">{{ record.create_time }}</div>
        <div class="author">
          &nbsp;&nbsp;&nbsp;&nbsp;{{ record.admin_name }}
        </div>
      </div>
      <div class="like-border"></div>
    </div>

    <div class="p-title">开发原因</div>
    <div class="content">{{ record.record_reason }}</div>

    <div class="p-title">本次开发</div>
    <div class="content flex">
      <div>{{ record.product_code }}</div>
      <span>&nbsp;-&nbsp;</span>
      <div>{{ record.product_name }}</div>
    </div>
    <div
      class="content"
      v-if="record.image && record.image.length">
      <img
        v-for="img in record.image"
        :src="img"
        :key="img"
        alt="product_image" />
    </div>
    <div class="content product-info">
      <div class="flex start">
        <div>尺寸:</div>
        <div>{{ record.product_size }}</div>
      </div>
      <div class="flex start">
        <div>材质:</div>
        <div>{{ record.product_material }}</div>
      </div>
      <div class="flex start">
        <div>颜色:</div>
        <div>{{ record.color }}</div>
      </div>
      <div class="flex start">
        <div>印刷:</div>
        <div>{{ record.print }}</div>
      </div>
      <div class="flex start">
        <div>MOQ:</div>
        <div>{{ record.moq }}</div>
      </div>
      <div class="flex start">
        <div>包装:</div>
        <div>{{ record.packaging }}</div>
      </div>
      <div class="flex start">
        <div>货期:</div>
        <div>{{ record.cycle }}</div>
      </div>
    </div>

    <div class="p-title">澳洲当地对手情况</div>
    <div class="content">{{ record.competitor }}</div>
    <div
      class="content"
      v-if="record.competitor_url">
      <a
        target="_blank"
        class="content-link"
        :href="record.competitor_url"
        >{{ record.competitor_url }}</a
      >
    </div>
    <div
      class="content"
      v-if="record.competitor_image && record.competitor_image.length">
      <img
        v-for="img in record.competitor_image"
        :src="img"
        :key="img"
        alt="product_image" />
    </div>

    <div class="p-title">售价</div>
    <div class="content">{{ record.express_freight }}</div>
    <div
      class="content"
      v-if="record.express_image && record.express_image.length">
      <img
        v-for="img in record.express_image"
        :src="img"
        :key="img"
        alt="product_image" />
    </div>

    <br />
    <br />

    <div class="content">{{ record.bag_freight }}</div>
    <div
      class="content"
      v-if="record.bag_image && record.bag_image.length">
      <img
        v-for="img in record.bag_image"
        :src="img"
        :key="img"
        alt="product_image" />
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'

export default {
  name: 'ProductRecord',
  data() {
    return {
      record: {},
    }
  },
  computed: {
    ...mapState(['dialogVisible']),
    userInfo() {
      return this.$store.state.userInfo || {}
    },
    isLogin() {
      return !!this.userInfo.email
    },
    isPromocollection() {
      return /\@promocollection.(com\.au|uk)/.test(this.userInfo.email)
    },
  },
  watch: {
    userInfo() {
      if (this.isLogin) {
        this.check()
      }
    },
  },
  mounted() {
    if (this.isLogin) {
      this.check()
    } else {
      setTimeout(() => {
        this.openDialog()
      }, 500)
    }
  },
  methods: {
    ...mapMutations(['openDialog']),
    check() {
      if (this.isPromocollection) {
        this.getData()
      } else {
        // Nuxt.js 2.x 版本中，this.$router.redirect 方法已经被废弃
        this.$router.replace('/')
      }
    },
    async getData() {
      const query = this.$route.query
      let url = '/uk-api/uk/goods/record/?product_code=' + this.$route.params.code
      if (query.version && query.version.length) {
        url += `&version=${query.version}`
      }
      const res = await this.$axios.get(url)
      this.record = res.result || {}
    },
  },
}
</script>

<style lang="scss" scoped>
.page-prodcut-record {
  color: #333;
  padding-top: 76px;
  font-size: 14px;
}
.title {
  font-size: 36px;
  color: #00213b;
  text-align: center;
}
.author-wrap {
  white-space: nowrap;
  font-size: 20px;
  margin-top: 36px;
  text-align: center;
}
.like-border {
  margin-top: 22px;
  height: 3px;
  width: 120px;
  background-color: #e90000;
}
.product-info {
  margin: 24px 0;
  & > .flex {
    // margin-bottom: 0px;
    & > div:first-of-type {
      width: 50px;
      margin-right: 2px;
    }
  }
}
.p-title {
  margin: 24px 0 8px;
  padding-left: 6px;
  font-size: 18px;
  border-left: 3px solid #e90000;
}
.content {
  white-space: pre-wrap;
  padding-left: 10px;
  line-height: 18px;
  margin-bottom: 12px;
  img {
    height: auto;
    width: auto;
    max-width: 800px;
    display: block;
  }
  img + img {
    margin-top: 24px;
  }
  a {
    white-space: pre-wrap;
    word-break: break-word;
  }
}
.content-link {
  color: #0096ff;
  text-decoration: underline;
}
</style>