mergeable-ish client UI
This commit is contained in:
Tiago Vasconcelos
parent
82ef0947cd
commit
9c29653ea0
6 changed files with 283 additions and 64 deletions
|
|
@ -70,13 +70,21 @@
|
|||
<q-card-actions>
|
||||
<span>Stall: {{ item.stallName }}</span>
|
||||
<div class="q-ml-auto">
|
||||
<q-btn flat dense>See product</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
class="text-weight-bold text-capitalize q-ml-auto"
|
||||
dense
|
||||
color="primary"
|
||||
@click="$emit('change-page', 'stall', {stall: item.stall, pubkey: item.pubkey})"
|
||||
@click="$emit('change-page', 'stall', {stall: item.stall, product: item.id})"
|
||||
>
|
||||
View details
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
class="text-weight-bold text-capitalize q-ml-auto"
|
||||
dense
|
||||
color="primary"
|
||||
@click="$emit('change-page', 'stall', {stall: item.stall})"
|
||||
>
|
||||
Visit Stall
|
||||
</q-btn>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
<q-toolbar-title></q-toolbar-title>
|
||||
<q-btn dense round flat icon="shopping_cart" class="q-ml-md"></q-btn>
|
||||
</q-toolbar>
|
||||
<product-detail v-if="productDetail" :product="mock"></product-detail>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div
|
||||
class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,29 @@
|
|||
async function customerStall(path) {
|
||||
const template = await loadTemplateAsync(path)
|
||||
const mock = {
|
||||
stall: '4M8j9KKGzUckHgb4C3pKCv',
|
||||
name: 'product 1',
|
||||
description:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo integer malesuada nunc vel risus commodo. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Cras ornare arcu dui vivamus. Risus pretium quam vulputate dignissim suspendisse in est ante in. Faucibus in ornare quam viverra orci sagittis eu volutpat odio.',
|
||||
amount: 100,
|
||||
price: '10',
|
||||
images: ['https://i.imgur.com/cEfpEjq.jpeg'],
|
||||
id: ['RyMbE9Hdwk9X333JKtkkNS'],
|
||||
categories: ['crafts', 'robots'],
|
||||
currency: 'EUR',
|
||||
stallName: 'stall 1',
|
||||
formatedPrice: '€10.00',
|
||||
priceInSats: 0
|
||||
}
|
||||
Vue.component('customer-stall', {
|
||||
name: 'customer-stall',
|
||||
template,
|
||||
|
||||
props: ['stall', 'products', 'exchange-rates'],
|
||||
props: ['stall', 'products', 'exchange-rates', 'product-detail'],
|
||||
data: function () {
|
||||
return {}
|
||||
return {
|
||||
mock: mock
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
created() {
|
||||
|
|
|
|||
|
|
@ -1 +1,187 @@
|
|||
<div></div>
|
||||
<div class="row q-mt-sm">
|
||||
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
|
||||
<div class="q-pa-md">
|
||||
<q-carousel
|
||||
swipeable
|
||||
animated
|
||||
v-model="slide"
|
||||
thumbnails
|
||||
infinite
|
||||
v-for="(img, i) in product.images"
|
||||
:key="i"
|
||||
>
|
||||
<q-carousel-slide
|
||||
:name="i + 1"
|
||||
:img-src="img"
|
||||
style="/*background-size: contain; background-repeat: no-repeat*/"
|
||||
></q-carousel-slide>
|
||||
</q-carousel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-lg-7 col-md-7 col-sm-12 col-xs-12"
|
||||
:class="$q.platform.is.desktop ? '' : 'q-px-md'"
|
||||
>
|
||||
<div class="text-subtitle1 q-mt-sm q-pt-xs">{{ product.name }}</div>
|
||||
<div v-if="product.categories" class="text-subtitle1">
|
||||
<q-chip v-for="(cat, i) in product.categories" :key="i" dense
|
||||
>{{cat}}</q-chip
|
||||
>
|
||||
</div>
|
||||
<div class="q-mt-sm text-weight-bold">{{ product.description }}</div>
|
||||
<div>
|
||||
<span v-if="product.currency == 'sat'">
|
||||
<span class="text-h6">{{ product.price }} sats</span
|
||||
><span class="q-ml-sm text-grey-6"
|
||||
>BTC {{ (product.price / 1e8).toFixed(8) }}</span
|
||||
>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span class="text-h6">{{ product.formatedPrice }}</span>
|
||||
<span class="q-ml-sm text-grey-6"
|
||||
>({{ product.priceInSats }} sats)</span
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md"
|
||||
>{{ product.amount > 0 ? 'In stock.' : 'Out of stock.' }}</span
|
||||
>
|
||||
<!-- <div class="text-caption text-weight-bolder q-mt-sm">
|
||||
Special Price
|
||||
</div>
|
||||
<span class="text-h6">₹3,149</span
|
||||
><span
|
||||
class="q-ml-sm text-grey-6"
|
||||
style="text-decoration: line-through"
|
||||
>₹3,699</span
|
||||
>
|
||||
<span
|
||||
class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md"
|
||||
>20% off</span
|
||||
> -->
|
||||
</div>
|
||||
<div class="q-mt-md">
|
||||
<q-btn
|
||||
class="q-mt-md"
|
||||
color="primary"
|
||||
icon="shopping_cart"
|
||||
label="Add to cart"
|
||||
/>
|
||||
<q-btn
|
||||
class="q-mt-md q-ml-md"
|
||||
color="primary"
|
||||
icon="shopping_cart"
|
||||
label="Buy now"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- RATING TO BE DONE -->
|
||||
<div
|
||||
class="col-lg-5 col-md-5 col-sm-12 col-xs-12 q-mt-md q-pt-xs q-pl-lg"
|
||||
>
|
||||
<div class="text-subtitle2">Customer rating</div>
|
||||
<div class="text-h3">4.2</div>
|
||||
<div>
|
||||
<q-rating
|
||||
v-model="rating_point"
|
||||
max="5"
|
||||
size="2em"
|
||||
color="orange"
|
||||
icon="star_border"
|
||||
icon-selected="star"
|
||||
icon-half="star_half"
|
||||
no-dimming
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
<div class="text-subtitle2 text-grey-8">(357 reviews)</div>
|
||||
<div class="text-subtitle2 text-grey-10 q-mt-sm">
|
||||
93% would recommend to a friend
|
||||
</div>
|
||||
|
||||
<q-list dense bordered padding class="no-border q-mt-lg q-pr-xl">
|
||||
<q-item style="padding-left: 0 !important" v-ripple>
|
||||
<span class="text-subtitle2 q-mr-xs">5</span>
|
||||
<q-icon name="star" size="1.5em" color="orange"></q-icon>
|
||||
<q-linear-progress
|
||||
class="q-ml-sm q-mr-sm"
|
||||
style="margin-top: 5px"
|
||||
size="13px"
|
||||
:value="0.9"
|
||||
/>
|
||||
<span
|
||||
style="margin-top: 2px"
|
||||
class="text-caption text-weight-bold text-grey-8"
|
||||
>273</span
|
||||
>
|
||||
</q-item>
|
||||
<q-item style="padding-left: 0 !important" v-ripple>
|
||||
<span class="text-subtitle2 q-mr-xs">4</span>
|
||||
<q-icon name="star" size="1.5em" color="orange"></q-icon>
|
||||
<q-linear-progress
|
||||
class="q-ml-sm q-mr-sm"
|
||||
style="margin-top: 5px"
|
||||
size="13px"
|
||||
:value="0.6"
|
||||
/>
|
||||
<span
|
||||
style="margin-top: 2px"
|
||||
class="text-caption text-weight-bold text-grey-8"
|
||||
> 69</span
|
||||
>
|
||||
</q-item>
|
||||
<q-item style="padding-left: 0 !important" v-ripple>
|
||||
<span class="text-subtitle2 q-mr-xs">3</span>
|
||||
<q-icon name="star" size="1.5em" color="orange"></q-icon>
|
||||
<q-linear-progress
|
||||
class="q-ml-sm q-mr-sm"
|
||||
style="margin-top: 5px"
|
||||
size="13px"
|
||||
:value="0.1"
|
||||
/>
|
||||
<span
|
||||
style="margin-top: 2px"
|
||||
class="text-caption text-weight-bold text-grey-8"
|
||||
> 6</span
|
||||
>
|
||||
</q-item>
|
||||
<q-item style="padding-left: 0 !important" v-ripple>
|
||||
<span class="text-subtitle2 q-mr-xs">2</span>
|
||||
<q-icon name="star" size="1.5em" color="orange"></q-icon>
|
||||
<q-linear-progress
|
||||
class="q-ml-sm q-mr-sm"
|
||||
style="margin-top: 5px"
|
||||
size="13px"
|
||||
:value="0.1"
|
||||
/>
|
||||
<span
|
||||
style="margin-top: 2px"
|
||||
class="text-caption text-weight-bold text-grey-8"
|
||||
> 3</span
|
||||
>
|
||||
</q-item>
|
||||
<q-item style="padding-left: 0 !important" v-ripple>
|
||||
<span class="text-subtitle2 q-mr-xs">1</span>
|
||||
<q-icon name="star" size="1.5em" color="orange"></q-icon>
|
||||
<q-linear-progress
|
||||
class="q-ml-sm q-mr-sm"
|
||||
style="margin-top: 5px"
|
||||
size="13px"
|
||||
:value="0.1"
|
||||
/>
|
||||
<span
|
||||
style="margin-top: 2px"
|
||||
class="text-caption text-weight-bold text-grey-8"
|
||||
> 6</span
|
||||
>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 q-mb-lg">
|
||||
<q-separator></q-separator>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,21 @@ async function productDetail(path) {
|
|||
|
||||
props: ['product'],
|
||||
data: function () {
|
||||
return {}
|
||||
return {
|
||||
slide: 1
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
computed: {
|
||||
win_width() {
|
||||
return this.$q.screen.width - 59
|
||||
},
|
||||
win_height() {
|
||||
return this.$q.screen.height - 0
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
created() {
|
||||
console.log('ping')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue