123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- <template lang="pug">
- .product-card(@click="selectProduct({ item })")
- h2.product-title {{ item.name }}
- img.product-image(:src="this.item.image_medium ? 'data:image/png;base64,' + this.item.image_medium : '/web/static/src/img/placeholder.png'")
- .product-price
- span {{ getPrice() }}
- .product-qty
- </template>
- <script>
- import { mapActions } from 'vuex'
- export default {
- props: {
- item: {
- type: Object,
- default: () => {
- return {}
- }
- },
- symbol: {
- type: String,
- default: '$',
- required: true
- },
- separator: {
- type: String,
- default: '.'
- },
- decimals: {
- type: Number,
- default: 0
- }
- },
- computed: {
- // FIXME
- productImage() {
- let img = new Image()
- img.src = this.item.image_medium ? 'data:image/png;base64,' + this.item.image_medium : '/web/static/src/img/placeholder.png'
- return img.src
- }
- },
- methods: {
- getPrice() {
- return accounting.formatMoney(this.item.list_price, this.symbol, this.decimals, this.separator, ',')
- },
- selectVariant() {
- this.$modal.show('variant-selector')
- },
- ...mapActions([
- 'selectProduct'
- ])
- }
- }
- </script>
- <style lang="sass">
- .product-card
- width: 130px
- height: 160px
- margin: 5px
- border: 1px solid #d3d3d3
- display: inline-block
- position: relative
- &:hover
- cursor: pointer
- .product-title
- width: 100%
- height: 30px
- font-size: 9pt
- text-align: center
- margin-top: 10px
- position: absolute
- top: 0
- .product-image
- width: 80px
- height: 80px
- margin: 0
- border: none
- position: absolute;
- top: 50%
- left: 50%
- margin-right: -50%
- transform: translate(-50%, -50%)
- .product-price
- width: 100%
- height: 30px
- padding-top: 5px
- text-align: center
- font-size: 10pt
- font-weight: bold
- background: #7c7bad
- color: #fff
- position: absolute
- bottom: 0
- </style>
|