mirror of https://github.com/4xmen/xshop.git
added theme part ns card
added CardController added transport seeder fixed meta input ui bugmaster
parent
b3db68ec77
commit
729f043158
@ -0,0 +1,168 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Http\Controllers;
|
||||||
|
|
||||||
|
use App\Models\Discount;
|
||||||
|
use App\Models\Invoice;
|
||||||
|
use App\Models\Order;
|
||||||
|
use App\Models\Product;
|
||||||
|
use App\Models\Quantity;
|
||||||
|
use App\Models\Transport;
|
||||||
|
use Illuminate\Http\Request;
|
||||||
|
|
||||||
|
class CardController extends Controller
|
||||||
|
{
|
||||||
|
public function productCardToggle(Product $product)
|
||||||
|
{
|
||||||
|
|
||||||
|
$quantity = \request()->input('quantity', null);
|
||||||
|
if (\Cookie::has('card')) {
|
||||||
|
$cards = json_decode(\Cookie::get('card'), true);
|
||||||
|
$qs = json_decode(\Cookie::get('q'), true);
|
||||||
|
if (in_array($product->id, $cards)) {
|
||||||
|
$found = false;
|
||||||
|
foreach ($cards as $i => $card) {
|
||||||
|
if ($card == $product->id && $qs[$i] == $quantity) {
|
||||||
|
$found = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ($found) {
|
||||||
|
$msg = "Product removed from card";
|
||||||
|
unset($cards[$i]);
|
||||||
|
unset($qs[$i]);
|
||||||
|
} else {
|
||||||
|
$cards[] = $product->id;
|
||||||
|
$qs[] = $quantity;
|
||||||
|
$msg = "Product added to card";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$cards[] = $product->id;
|
||||||
|
$qs[] = $quantity;
|
||||||
|
$msg = "Product added to card";
|
||||||
|
}
|
||||||
|
$count = count($cards);
|
||||||
|
\Cookie::queue('card', json_encode($cards), 2000);
|
||||||
|
\Cookie::queue('q', json_encode($qs), 2000);
|
||||||
|
} else {
|
||||||
|
$count = 1;
|
||||||
|
$msg = "Product added to card";
|
||||||
|
\Cookie::queue('card', "[$product->id]", 2000);
|
||||||
|
\Cookie::queue('q', "[$quantity]", 2000);
|
||||||
|
$qs = [$quantity];
|
||||||
|
$cards = [$product->id];
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($count > 0 && auth('customer')->check()) {
|
||||||
|
$customer = auth('customer')->user();
|
||||||
|
$customer->card = json_encode(['cards' => $cards, 'quantities' => $qs]);
|
||||||
|
$customer->save();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (\request()->ajax()) {
|
||||||
|
return success(['count' => $count], $msg);
|
||||||
|
} else {
|
||||||
|
return redirect()->back()->with(['message' => $msg]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public function index()
|
||||||
|
{
|
||||||
|
$area = 'card';
|
||||||
|
$title = __("Shopping card");
|
||||||
|
$subtitle = '';
|
||||||
|
return view('client.default-list', compact('area', 'title', 'subtitle'));
|
||||||
|
}
|
||||||
|
|
||||||
|
public function check(Request $request)
|
||||||
|
{
|
||||||
|
|
||||||
|
$request->validate([
|
||||||
|
'product_id' => ['required', 'array'],
|
||||||
|
'count' => ['required', 'array'],
|
||||||
|
'address_id' => ['required', 'exists:addresses,id'],
|
||||||
|
'desc' => ['nullable', 'string']
|
||||||
|
]);
|
||||||
|
$total = 0;
|
||||||
|
// return $request->all();
|
||||||
|
$inv = new Invoice();
|
||||||
|
$inv->customer_id = auth('customer')->user()->id;
|
||||||
|
$inv->count = array_sum($request->count);
|
||||||
|
$inv->address_id = $request->address_id;
|
||||||
|
$inv->desc = $request->desc;
|
||||||
|
if ($request->has('transport_id')) {
|
||||||
|
$request->transport_id = $request->input('transport_id');
|
||||||
|
$t = Transport::find($request->input('transport_id'));
|
||||||
|
$inv->transport_price = $t->price;
|
||||||
|
$total += $t->price;
|
||||||
|
}
|
||||||
|
if ($request->has('discount_id')) {
|
||||||
|
$request->discount_id = $request->input('discount_id');
|
||||||
|
}
|
||||||
|
|
||||||
|
$inv->save();
|
||||||
|
|
||||||
|
foreach ($request->product_id as $i => $product) {
|
||||||
|
$order = new Order();
|
||||||
|
$order->product_id = $product;
|
||||||
|
$order->invoice_id = $inv->id;
|
||||||
|
$order->count = $request->count[$i];
|
||||||
|
if ($request->quantity_id[$i] != '') {
|
||||||
|
$order->quantity_id = $request->quantity_id[$i];
|
||||||
|
$q = Quantity::find($request->quantity_id[$i]);
|
||||||
|
$order->price_total = $q->price * $request->count[$i];
|
||||||
|
$order->data = $q->data;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
$p = Product::find($request->product_id[$i]);
|
||||||
|
$order->price_total = $p->price * $request->count[$i];
|
||||||
|
}
|
||||||
|
$total += $order->price_total;
|
||||||
|
$order->save();
|
||||||
|
}
|
||||||
|
|
||||||
|
$inv->total_price = $total;
|
||||||
|
$inv->save();
|
||||||
|
return [$inv,$inv->orders];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public static function clear()
|
||||||
|
{
|
||||||
|
\Cookie::expire('card');
|
||||||
|
\Cookie::expire('q');
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
public function clearing()
|
||||||
|
{
|
||||||
|
self::clear();
|
||||||
|
return __("Card cleared");
|
||||||
|
}
|
||||||
|
|
||||||
|
public function discount($code)
|
||||||
|
{
|
||||||
|
$discount = Discount::where('code', trim($code))->where(function ($query) {
|
||||||
|
$query->where('expire', '>=', date('Y-m-d'))
|
||||||
|
->orWhereNull('expire');
|
||||||
|
})->first();
|
||||||
|
if ($discount == null) {
|
||||||
|
return [
|
||||||
|
'OK' => false,
|
||||||
|
'err' => __("Discount code isn't valid."),
|
||||||
|
];
|
||||||
|
} else {
|
||||||
|
if ($discount->type == 'PERCENT') {
|
||||||
|
$human = $discount->title . '( ' . $discount->amount . '%' . ' )';
|
||||||
|
} else {
|
||||||
|
$human = '- ' . $discount->title . '( ' . $discount->amount . config('app.currency.symbol') . ' )';
|
||||||
|
}
|
||||||
|
return [
|
||||||
|
'OK' => true,
|
||||||
|
'msg' => __("Discount code is valid."),
|
||||||
|
'data' => $discount,
|
||||||
|
'human' => $human,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,30 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Http\Resources;
|
||||||
|
|
||||||
|
use Illuminate\Http\Request;
|
||||||
|
use Illuminate\Http\Resources\Json\JsonResource;
|
||||||
|
use Illuminate\Http\Resources\Json\ResourceCollection;
|
||||||
|
|
||||||
|
class ProductCardCollection extends JsonResource
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Transform the resource collection into an array.
|
||||||
|
*
|
||||||
|
* @return array<int|string, mixed>
|
||||||
|
*/
|
||||||
|
public function toArray(Request $request): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
|
||||||
|
'id'=> $this->id,
|
||||||
|
'slug' => $this->slug,
|
||||||
|
'name' => $this->name,
|
||||||
|
'price' => $this->price,
|
||||||
|
'image' => $this->imgUrl(),
|
||||||
|
'meta' => $this->fullMeta(),
|
||||||
|
'max' => $this->stock_quantity,
|
||||||
|
'qz' => QunatityCollection::collection($this->quantities),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,28 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Http\Resources;
|
||||||
|
|
||||||
|
use Illuminate\Http\Request;
|
||||||
|
use Illuminate\Http\Resources\Json\JsonResource;
|
||||||
|
use Illuminate\Http\Resources\Json\ResourceCollection;
|
||||||
|
|
||||||
|
class QunatityCollection extends JsonResource
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Transform the resource collection into an array.
|
||||||
|
*
|
||||||
|
* @return array<int|string, mixed>
|
||||||
|
*/
|
||||||
|
public function toArray(Request $request): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
'id' => $this->id,
|
||||||
|
'product_name' => $this->product->name,
|
||||||
|
'count' => $this->count,
|
||||||
|
'data'=> json_decode($this->data),
|
||||||
|
'meta' => $this->meta,
|
||||||
|
'price'=> $this->price,
|
||||||
|
'image' => $this->image,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,27 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Http\Resources;
|
||||||
|
|
||||||
|
use Illuminate\Http\Request;
|
||||||
|
use Illuminate\Http\Resources\Json\JsonResource;
|
||||||
|
use Illuminate\Http\Resources\Json\ResourceCollection;
|
||||||
|
|
||||||
|
class TransportCollection extends JsonResource
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Transform the resource collection into an array.
|
||||||
|
*
|
||||||
|
* @return array<int|string, mixed>
|
||||||
|
*/
|
||||||
|
public function toArray(Request $request): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
'id' => $this->id,
|
||||||
|
'title' => $this->title,
|
||||||
|
'description' => $this->description,
|
||||||
|
'price' => $this->price,
|
||||||
|
'is_default' => $this->is_default,
|
||||||
|
'icon' => $this->icon,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,555 @@
|
|||||||
|
<template>
|
||||||
|
<div id="card">
|
||||||
|
<ul class="steps">
|
||||||
|
<li class="active">
|
||||||
|
<div class="circle" @click="changeIndex(0)">
|
||||||
|
<i class="ri-vip-diamond-line"></i>
|
||||||
|
</div>
|
||||||
|
Shopping card
|
||||||
|
</li>
|
||||||
|
<li :class="index > 0 ?'active':''">
|
||||||
|
<div class="circle" @click="changeIndex(1)">
|
||||||
|
<i class="ri-truck-line"></i>
|
||||||
|
</div>
|
||||||
|
Transport
|
||||||
|
</li>
|
||||||
|
<li :class="index > 1 ?'active':''">
|
||||||
|
<div class="circle" @click="changeIndex(2)">
|
||||||
|
<i class="ri-bank-card-2-line"></i>
|
||||||
|
</div>
|
||||||
|
Payment & discount
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-3">
|
||||||
|
<aside>
|
||||||
|
<h6 class="text-center">
|
||||||
|
Totol price:
|
||||||
|
</h6>
|
||||||
|
<h2 class="text-center" v-if="index == 0">
|
||||||
|
{{ priceing(total) }}
|
||||||
|
</h2>
|
||||||
|
<h2 class="text-center" v-if="index == 1">
|
||||||
|
{{ priceing(totalWithTransport) }}
|
||||||
|
</h2>
|
||||||
|
<h2 class="text-center" v-if="index == 2">
|
||||||
|
{{ priceing(totalWithTransportDiscount) }}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
<i class="ri-user-line icon"></i>
|
||||||
|
<slot></slot>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-9">
|
||||||
|
<div :class="'tab' + (index == 0?'':' hide')">
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
#
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Image
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Name
|
||||||
|
</th>
|
||||||
|
<th class="text-center" style="width: 400px">
|
||||||
|
Quantity
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Price
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Count
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
-
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
<tr v-for="(item,i) in items">
|
||||||
|
<td>
|
||||||
|
<input type="hidden" :name="`product_id[${i}]`" :value="item.id">
|
||||||
|
{{ i + 1 }}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<img :src="item.image" :alt="item.name">
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a :href="this.productLink + item.slug">
|
||||||
|
{{ item.name }}
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="text-center">
|
||||||
|
<template v-if="item.qz.length != 0">
|
||||||
|
<template v-if="qz[i] == null">
|
||||||
|
<q-index :i="i" :qz="item.qz" :base-price="item.price"
|
||||||
|
:symbol="symbol"
|
||||||
|
:on-change="changeQ" :xname="`quantity_id[${i}]`"></q-index>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<input type="hidden" :name="`quantity_id[${i}]`" :value="item.q.id">
|
||||||
|
<q-preview :q="item.q"></q-preview>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<span v-else>
|
||||||
|
-
|
||||||
|
<input type="hidden" :name="`quantity_id[${i}]`">
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<th>
|
||||||
|
{{ priceing(pricez[i]) }}
|
||||||
|
</th>
|
||||||
|
<td>
|
||||||
|
<quantity :max="maxz[i]" :xname="`count[${i}]`" v-model="countz[i]"></quantity>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<a type="button" class="btn btn-danger btn-sm text-light"
|
||||||
|
:href="this.cardLink + item.slug">
|
||||||
|
<i class="ri-close-line"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th colspan="4">
|
||||||
|
Total
|
||||||
|
</th>
|
||||||
|
<th colspan="4">
|
||||||
|
{{ priceing(total) }}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div :class="'tab' + (index == 1?'':' hide')">
|
||||||
|
<div>
|
||||||
|
<h5>
|
||||||
|
Sent to:
|
||||||
|
</h5>
|
||||||
|
<div v-for="(adr,j) in addresses" class="addr">
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="radio" :value="adr.id" :checked="j == 0"
|
||||||
|
name="address_id" :id="'adr'+j">
|
||||||
|
<label class="form-check-label" :for="'adr'+j">
|
||||||
|
{{ adr.address }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="transports.length > 0">
|
||||||
|
<h5 class="mt-3">
|
||||||
|
Transport:
|
||||||
|
</h5>
|
||||||
|
<div v-for="(trs,j) in transports" class="addr">
|
||||||
|
<span class="float-end p-2 badge bg-primary m-2">
|
||||||
|
{{ priceing(trs.price) }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<i :class="'float-start '+trs.icon"></i>
|
||||||
|
<div class="form-check">
|
||||||
|
|
||||||
|
<input class="form-check-input" :value="trs.id" type="radio"
|
||||||
|
v-model="transport_index" name="transport_id" :id="'t'+j">
|
||||||
|
<label class="form-check-label" :for="'t'+j">
|
||||||
|
{{ trs.title }}
|
||||||
|
</label>
|
||||||
|
<p>
|
||||||
|
{{ trs.description }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div :class="'tab' + (index == 2?'':' hide')">
|
||||||
|
|
||||||
|
<!-- WIP translate & discount check -->
|
||||||
|
<h5 class="mt-1">
|
||||||
|
Check discount
|
||||||
|
</h5>
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-text"><i class="ri-percent-line"></i></span>
|
||||||
|
<input type="text" class="form-control text-center" placeholder="Discount code" :readonly="discount != null" v-model="code">
|
||||||
|
<button type="button" class="input-group-text btn btn-primary" @click="discountCheck">
|
||||||
|
Check
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div v-if="discount_id != null">
|
||||||
|
<input type="hidden" name="discount_id" :value="discount_id">
|
||||||
|
<div class="alert alert-success">
|
||||||
|
{{ discount_human }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>
|
||||||
|
Extra description
|
||||||
|
</h4>
|
||||||
|
<textarea rows="4" class="form-control" name="desc" placeholder="Your message for this order..."></textarea>
|
||||||
|
<hr>
|
||||||
|
<button v-if="canPay" class="btn btn-outline-primary w-100 btn-lg">
|
||||||
|
<i class="ri-bank-card-2-line"></i>
|
||||||
|
Pay now
|
||||||
|
</button>
|
||||||
|
<div v-else class="alert alert-danger">
|
||||||
|
Please, Login or complete information to pay
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import QIndex from "./Qindex.vue";
|
||||||
|
import QPreview from "./Qpreview.vue";
|
||||||
|
import quantity from "./Quantity.vue";
|
||||||
|
|
||||||
|
function commafy(num) {
|
||||||
|
if (typeof num !== 'string') {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
let str = uncommafy(num.toString()).split('.');
|
||||||
|
if (str[0].length >= 4) {
|
||||||
|
str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
|
||||||
|
}
|
||||||
|
if (str[1] && str[1].length >= 4) {
|
||||||
|
str[1] = str[1].replace(/(\d{3})/g, '$1 ');
|
||||||
|
}
|
||||||
|
return str.join('.');
|
||||||
|
}
|
||||||
|
|
||||||
|
function uncommafy(txt) {
|
||||||
|
return txt.split(',').join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "card",
|
||||||
|
components: {quantity, QPreview, QIndex},
|
||||||
|
data: () => {
|
||||||
|
return {
|
||||||
|
countz: [], // counts
|
||||||
|
qz: [], // qunatities
|
||||||
|
itemz: [], // card items
|
||||||
|
pricez: [], // price
|
||||||
|
maxz: [],
|
||||||
|
index: 0,
|
||||||
|
transport_index: null,
|
||||||
|
code: '',
|
||||||
|
discount_id: null,
|
||||||
|
discount_human: '',
|
||||||
|
discount: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
productLink: {
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
cardLink: {
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
discountLink: {
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
items: {
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
qs: {
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
symbol: {
|
||||||
|
default: '$',
|
||||||
|
},
|
||||||
|
addresses: {
|
||||||
|
default: []
|
||||||
|
},
|
||||||
|
transports: {
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
canPay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
defTransport: {
|
||||||
|
default: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.qz = this.qs;
|
||||||
|
this.transport_index = this.defTransport;
|
||||||
|
for (const item of this.items) {
|
||||||
|
this.countz.push(1);
|
||||||
|
this.pricez.push(item.price);
|
||||||
|
this.itemz.push(item);
|
||||||
|
this.maxz.push(item.max);
|
||||||
|
}
|
||||||
|
|
||||||
|
// fixed price by quantity
|
||||||
|
for (const i in this.itemz) {
|
||||||
|
if (this.qz[i] != null) {
|
||||||
|
for (const q of this.itemz[i].qz) {
|
||||||
|
if (q.id == this.qz[i]) {
|
||||||
|
this.pricez[i] = q.price;
|
||||||
|
// fixed max for selected quantity
|
||||||
|
this.maxz[i] = q.count;
|
||||||
|
try {
|
||||||
|
this.itemz[i].q = q;
|
||||||
|
} catch (e) {
|
||||||
|
this.itemz[i].q = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
total() {
|
||||||
|
let sum = 0;
|
||||||
|
for (const i in this.pricez) {
|
||||||
|
sum += this.pricez[i] * this.countz[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
return sum;
|
||||||
|
},
|
||||||
|
totalWithTransport() {
|
||||||
|
let sum = 0;
|
||||||
|
for (const i in this.pricez) {
|
||||||
|
sum += this.pricez[i] * this.countz[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
let t = 0;
|
||||||
|
for (const trs of this.transports) {
|
||||||
|
if (trs.id == this.transport_index) {
|
||||||
|
t = trs.price;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return sum + t;
|
||||||
|
},
|
||||||
|
totalWithTransportDiscount() {
|
||||||
|
let sum = 0;
|
||||||
|
for (const i in this.pricez) {
|
||||||
|
sum += this.pricez[i] * this.countz[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
let t = 0;
|
||||||
|
for (const trs of this.transports) {
|
||||||
|
if (trs.id == this.transport_index) {
|
||||||
|
t = trs.price;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (this.discount != null){
|
||||||
|
if (this.discount.type == 'PERCENT'){
|
||||||
|
sum = (( 100 - this.discount.amount ) * sum ) / 100;
|
||||||
|
}else{
|
||||||
|
sum -= this.discount.amount;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return sum + t;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async discountCheck() {
|
||||||
|
const url = this.discountLink + this.code;
|
||||||
|
try {
|
||||||
|
|
||||||
|
let resp = await axios.get(url);
|
||||||
|
|
||||||
|
if (!resp.data.OK) {
|
||||||
|
window.$toast.error(resp.data.err);
|
||||||
|
} else {
|
||||||
|
window.$toast.success(resp.data.msg);
|
||||||
|
this.discount_id = resp.data.data.id;
|
||||||
|
this.discount_human = resp.data.human;
|
||||||
|
this.discount = resp.data.data;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
window.$toast.error(e.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
changeIndex(i) {
|
||||||
|
this.index = i;
|
||||||
|
this.$forceUpdate();
|
||||||
|
},
|
||||||
|
changeQ(i, q) {
|
||||||
|
// console.log(i,q,'iq');
|
||||||
|
this.maxz[i] = q.count;
|
||||||
|
this.pricez[i] = q.price;
|
||||||
|
if (this.maxz[i] < this.countz[i]) {
|
||||||
|
this.countz[i] = this.maxz[i];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
priceing(p) {
|
||||||
|
if (p == null || p == undefined) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return commafy(p.toString()) + ' ' + this.symbol;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
#card {
|
||||||
|
|
||||||
|
table {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 64px;
|
||||||
|
width: 64px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: var(--xshop-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
table td, table th {
|
||||||
|
padding: 1rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
&:first-child, &:last-child {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
text-align: center;
|
||||||
|
width: 75px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
transition: 500ms;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid var(--xshop-secondary);
|
||||||
|
width: 82px;
|
||||||
|
height: 82px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto 1rem;
|
||||||
|
background: var(--xshop-secondary);
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 55px;
|
||||||
|
color: var(--xshop-diff2);
|
||||||
|
-webkit-text-stroke: 2px var(--xshop-secondary);
|
||||||
|
transition: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: ' ';
|
||||||
|
top: 35%;
|
||||||
|
inset-inline-start: 0;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--xshop-secondary);
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: ' ';
|
||||||
|
top: 35%;
|
||||||
|
inset-inline-start: 0;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--xshop-primary);
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
transition: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: var(--xshop-primary);
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
background: var(--xshop-primary);
|
||||||
|
color: var(--xshop-diff);
|
||||||
|
border-color: var(--xshop-primary);
|
||||||
|
|
||||||
|
i {
|
||||||
|
-webkit-text-stroke: 2px var(--xshop-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
background: var(--xshop-primary);
|
||||||
|
color: var(--xshop-diff2);
|
||||||
|
border-radius: var(--xshop-border-radius);
|
||||||
|
padding: 1rem;
|
||||||
|
min-height: 98%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.addr {
|
||||||
|
border-radius: var(--xshop-border-radius);
|
||||||
|
border: var(--xshop-primary) 1px solid;
|
||||||
|
margin-bottom: 7px;
|
||||||
|
|
||||||
|
label {
|
||||||
|
padding: 1rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 45px;
|
||||||
|
color: var(--xshop-secondary);
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
max-height: 0 !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
max-height: 3000px;
|
||||||
|
overflow-y: auto;
|
||||||
|
transition: 300ms;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,121 @@
|
|||||||
|
<template>
|
||||||
|
<div id="qIndex">
|
||||||
|
<button type="button" v-for="(q,i) in qz" :class="getClass(i)" @click="changeIndex(i)">
|
||||||
|
<q-preview :q="q"></q-preview>
|
||||||
|
{{priceing(q.price)}}
|
||||||
|
</button>
|
||||||
|
<input type="hidden" :name="xname" v-if="xname != null" :value="id">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import QPreview from "./Qpreview.vue";
|
||||||
|
|
||||||
|
function commafy(num) {
|
||||||
|
if (typeof num !== 'string') {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
let str = uncommafy(num.toString()).split('.');
|
||||||
|
if (str[0].length >= 4) {
|
||||||
|
str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
|
||||||
|
}
|
||||||
|
if (str[1] && str[1].length >= 4) {
|
||||||
|
str[1] = str[1].replace(/(\d{3})/g, '$1 ');
|
||||||
|
}
|
||||||
|
return str.join('.');
|
||||||
|
}
|
||||||
|
|
||||||
|
function uncommafy(txt) {
|
||||||
|
return txt.split(',').join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "qIndex",
|
||||||
|
components: {QPreview},
|
||||||
|
data: () => {
|
||||||
|
return {
|
||||||
|
index:0,
|
||||||
|
id: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
qz:{
|
||||||
|
required:[],
|
||||||
|
},
|
||||||
|
basePrice:{
|
||||||
|
default:0,
|
||||||
|
},
|
||||||
|
symbol:{
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
onChange:{
|
||||||
|
type: Function,
|
||||||
|
default: function (i,q){},
|
||||||
|
},
|
||||||
|
i:{
|
||||||
|
default: 0,
|
||||||
|
type: Number,
|
||||||
|
},
|
||||||
|
xname:{
|
||||||
|
default: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
for( const i in this.qz) {
|
||||||
|
const q = this.qz[i];
|
||||||
|
if (q.price == this.basePrice){
|
||||||
|
this.index = i;
|
||||||
|
this.id = q.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {
|
||||||
|
changeIndex(i){
|
||||||
|
this.index = i;
|
||||||
|
this.onChange(this.i, this.qz[i]);
|
||||||
|
this.id = this.qz[i].id;
|
||||||
|
},
|
||||||
|
priceing(p) {
|
||||||
|
if (p == null || p == undefined) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return commafy(p.toString()) + ' ' + this.symbol;
|
||||||
|
},
|
||||||
|
getClass(i){
|
||||||
|
let cls = 'q';
|
||||||
|
if (i == this.index){
|
||||||
|
cls += ' selected';
|
||||||
|
}
|
||||||
|
|
||||||
|
return cls;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#qIndex {
|
||||||
|
}
|
||||||
|
.q{
|
||||||
|
border: 1px solid var(--xshop-secondary);
|
||||||
|
border-radius: var(--xshop-border-radius);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
background: transparent;
|
||||||
|
display: block;
|
||||||
|
color: var(--xshop-text);
|
||||||
|
width: 100%;
|
||||||
|
div{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&.selected{
|
||||||
|
background: var(--xshop-primary);
|
||||||
|
color: var(--xshop-diff);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<div id="qPreview" >
|
||||||
|
<div v-for="meta in q.meta" class="meta" >
|
||||||
|
<span v-if="meta.type != 'color'" class="ms-2">
|
||||||
|
{{meta.label}}
|
||||||
|
</span>
|
||||||
|
<div v-html="meta.human_value" class="ms-2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "qPreview",
|
||||||
|
components: {},
|
||||||
|
data: () => {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
q:{
|
||||||
|
required: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#qPreview {
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta{
|
||||||
|
display: inline-flex;
|
||||||
|
div{
|
||||||
|
display: inline-block;
|
||||||
|
padding: 3px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
span{
|
||||||
|
background: var(--xshop-secondary);
|
||||||
|
color: var(--xshop-diff2);
|
||||||
|
border-radius: var(--xshop-border-radius) ;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px 3px;
|
||||||
|
height: 1.6em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
@ -0,0 +1,45 @@
|
|||||||
|
<section class='NsCard'>
|
||||||
|
<div class="container-fluid">
|
||||||
|
@include('components.err')
|
||||||
|
@if(cardCount() == 0 )
|
||||||
|
<div class="alert alert-info">
|
||||||
|
{{__("There is nothing added to card!")}}
|
||||||
|
</div>
|
||||||
|
@else {{-- count 0--}}
|
||||||
|
<form method="post" class="safe-from" >
|
||||||
|
|
||||||
|
<input type="hidden" class="safe-url" data-url="{{route('client.card.check')}}">
|
||||||
|
@csrf
|
||||||
|
<ns-card
|
||||||
|
:items='@json(cardItems())'
|
||||||
|
:qs='{{\Cookie::get("q")}}'
|
||||||
|
symbol="{{config('app.currency.symbol')}}"
|
||||||
|
@if(auth('customer')->check())
|
||||||
|
:addresses='@json(auth('customer')->user()->addresses)'
|
||||||
|
@endif
|
||||||
|
card-link="{{route('client.product-card-toggle','')}}/"
|
||||||
|
discount-link="{{route('client.card.discount','')}}/"
|
||||||
|
product-link="{{route('client.product','')}}/"
|
||||||
|
:transports='@json(transports())'
|
||||||
|
:def-transport="{{defTrannsport()}}"
|
||||||
|
:can-pay="{{!auth('customer')->check() || auth('customer')->user()->mobile == null || auth('customer')->user()->mobile == '' || auth('customer')->user()->addresses()->count() == 0?'false':'true'}}"
|
||||||
|
>
|
||||||
|
<br>
|
||||||
|
@if(!auth('customer')->check())
|
||||||
|
<a href="{{ route('client.sign-in') }}" class="btn btn-danger text-light btn-lg w-100">
|
||||||
|
{{__("You need to sign in/up to continue")}}
|
||||||
|
</a>
|
||||||
|
@else
|
||||||
|
{{__("Welcome back")}}: <strong> {{auth('customer')->user()->name}} </strong>
|
||||||
|
@if(auth('customer')->user()->mobile == null || auth('customer')->user()->mobile == '' || auth('customer')->user()->addresses()->count() == 0)
|
||||||
|
<a href="{{ route('client.profile') }}" class="btn btn-danger text-light btn-lg w-100">
|
||||||
|
{{__("You need complete your information")}}
|
||||||
|
</a>
|
||||||
|
@endif
|
||||||
|
@endif
|
||||||
|
</ns-card>
|
||||||
|
@endif {{-- count 0--}}
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"name": "NsCard",
|
||||||
|
"version": "1.0",
|
||||||
|
"author": "xStack",
|
||||||
|
"email": "xshop@xstack.ir",
|
||||||
|
"license": "GPL-3.0-or-later",
|
||||||
|
"url": "https:\/\/xstack.ir",
|
||||||
|
"author_url": "https:\/\/4xmen.ir",
|
||||||
|
"packages": []
|
||||||
|
}
|
@ -0,0 +1,21 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Resources\Views\Segments;
|
||||||
|
|
||||||
|
use App\Models\Part;
|
||||||
|
|
||||||
|
class NsCard
|
||||||
|
{
|
||||||
|
public static function onAdd(Part $part = null)
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
public static function onRemove(Part $part = null)
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
public static function onMount(Part $part = null)
|
||||||
|
{
|
||||||
|
return $part;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,15 @@
|
|||||||
|
.NsCard {
|
||||||
|
padding: 2rem 0;
|
||||||
|
|
||||||
|
.ri-checkbox-circle-line{
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
.ri-close-circle-line{
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.ri-checkbox-circle-line, .ri-close-circle-line{
|
||||||
|
font-size: 20px;
|
||||||
|
position: relative;
|
||||||
|
top: -6px;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue