صورتحساب با vuejs و جمع کل

کل خریدهای کاربر رو در یک آرایه اضافه کنید .. در انتهای کار کلید های Price رو در آرایه به هم جمع کنید

@ali.bayat
وقتی تعداد رو توی صفحه فاکتور کم و زیاد می کنه چطوری جمع کل رو محاسبه کنیم؟

وضعیت فعلی کار رو توی تصویر مشاهده کنید:

الان مقدار input تعداد وقتی تغییر میکنه جمع هر ردیف متناسب با اون تغییر میکنه
گیر کار اینجاست که من می خوام جمع کل صورتحساب رو محاسبه کنم و وقتی تعداد هرکدوم از طرف کاربر کم و زیاد میشه جمع کل صورتحساب هم متناسب با اون تغییر کنه.

این آرایه باید در بخش data مشخص شده باشه.. وقتی هم که آیتمی بهش اضافه میکنید و یا حذف میکنید باید تغییرات درش لحاظ بشند و بعدش جمع کل محاسبه بشه

اینپوت ها رو بایند کنید به دیتاها v-bind
https://vuejs.org/v2/guide/forms.html

@juza66
مشکل جمع کردن اینپوت های یک ستون با همدیگه است

@ali.bayat
متشکرم همین روش رو تست میکنم ولی فکر میکردم لابد خود vue قابلیتی داره که بتونیم به دیتای هر ردیف دسترسی داشته باشیم و مقادیرش رو جمع کنیم

خواهش می‌کنم.
راهی که من گفتم میشه گفت ساده ترین راه هست

اما مقالات زیر رو هم بررسی کنید.

https://frontstuff.io/build-a-shopping-cart-with-vue-and-dinerojs
https://travishorn.com/vue-online-store-with-shopping-cart-c072433f8d9e
https://medium.com/employbl/build-a-shopping-cart-with-vue-js-and-element-ui-no-vuex-54682e9df5cd

کم و بیش به یه صورت کار کردند اما تغییرات جزئی در هر کدوم هست.. ببینید سایرین به چه صورت این کار رو انجام دادند

سلام مهدی عزیز
دوتا چیزو باید در نظر بگیری یکی اینکه میتونی کل محصولاتی که کاربر میخواد بخره رو با vuex ذخیره کنی که بتونی همه جای سایتت بهش دسترسی داشته باشی یا اینکه یک کامپوننت برای سبد خریدت بسازی و با استفاده از prop محصولاتو پاس بدی بهش دوم اینکه یک تابع داخل computed بسازی و از تابع reduce() استفاده کنی و به ازای اضافه شدن هر محصول محاسباتشو انجام بدی و بریزی داخل متغیر total.

  computed: {
    total() {
      return this.items.reduce((acc, item) => acc + Number(item.price), 0);
    }
  }

@miladk313 بدون استفاده از vuex طبق کد های من چطوری میشه جمع کل گرفت؟ الان در حال حاضر من چون نمی تونستم با vue انجام بدم. با یه کد جی کوئری اینکار رو انجام دادم.

<script>
window.Event = new Vue();

var cart = {
    props: ['pr'],

    data: function() {
        return {
            email: 'info@mycompany.com',
            removeUrl: '/mybasket/remove/',
            ProductUrl: '/product/',
            info : [],
            numbers : 0,
            price: 0,
            totalPrice: 0,
            paymentPrice: 0,
            bill : [],
            test : 2,
            min : 1,
            stock : 100,
            major: 0,
            majorPrice: 0,
            majarStock: 0,
            currentPrice:0,
            checked : false,
            firstRun : true,
            dataLenght: 0,

        };
    },created() {
        this.connectign();
        this.getFirstSum();

    }
    ,mounted() {
        // this.getSum();

    },beforeUpdate() {

    },
    updated() {
        // this.getSum();
        this.ConvertNumberToPersion();

    },

    methods: {

        connectign(){  
      axios
      .get('/mycart')
      .then(response => this.info = response.data)
      .catch(error => console.log(error));

        },

        getSum(num){ 
            this.paymentPrice = 0;
            var inputs = $(".tprice");
            for(var i = 0; i < inputs.length; i++){
                this.paymentPrice += parseInt($(inputs[i]).val()); 
            }
        },checkMinMax: function (event){
            // if(this.numbers > this.stock){
            event.preventDefault();
            // }

        }
        ,
        getFirstSum(){
            this.paymentPrice = {{$sum}};

        },inputStyle(){
            $("input[type='number']").inputSpinner();
        }
        ,setNum(number){
            this.numbers = number;

        } ,
        setFirstPrice(num){
            this.currentPrice = parseInt(num);
        },
        changeMajor(price,majorPrice){
            if(this.checked == false){
                this.currentPrice = majorPrice;
                this.checked = true;
                console.log(majorPrice+'if')
                this.$set('2222');
            }else{
                this.currentPrice = price;
                this.checked = false;
                console.log(price+'else')
            }
        }
        ,
        ConvertNumberToPersion(){
            let persian = { 0: '0', 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8', 9: '9' };
        function traverse(el) {

            if (el.nodeType == 3) {
                var list = el.data.match(/[0-9]/g);
                if (list != null && list.length != 0) {
                    for (var i = 0; i < list.length; i++)
                        el.data = el.data.replace(list[i], persian[list[i]]);
                }
            }
            for (var i = 0; i < el.childNodes.length; i++) {
                traverse(el.childNodes[i]);
            }
        }
        traverse(document.body);
        }

    },
    template: `
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h1 class="cart-heading">پیش فاکتور</h1>
                <form action="/shipping" method="post" >
                    {{ csrf_field() }}
                    <div class="table-content table-responsive">
                        <table>
                            <thead>
                            <tr>
                                <th>حذف</th>
                                <th>تصویر</th>
                                <th>عنوان</th>
                                <th>قیمت</th>
                                <th>عمده فروشی</th>
                                <th>تعداد</th>
                                <th>جمع</th>
                            </tr>
                            </thead>
                            <tbody>

                            <tr v-for="(pr, index) in info" v-bind:key="pr.id" >
                                <td class="product-remove"><a :href="removeUrl+pr.id"><i class="pe-7s-close"></i></a></td>
                                <td class="product-thumbnail">

                                    <a :href="ProductUrl+pr.price.product.slug"><img :src="pr.price.product.images['images']['100']" alt="#"></a>

                                </td>
                                <td class="product-name"><a :href="ProductUrl+pr.price.product.slug" v-text="pr.price.product.title+ ' (' + pr.price.color.title +' '+ pr.price.size.title + ')'">title </a></td>
                                <td class="product-price-cart">

                                    <input   v-model.number="min=pr.price.minimum" type="hidden" autocomplete="off">
                                    <input   v-model.number="stock=pr.price.stock" type="hidden" autocomplete="off">
                                    <input   v-model.number="major=pr.price.major" type="hidden" autocomplete="off">
                                    <input   v-model.number="majarStock=pr.price.major_stock" type="hidden" autocomplete="off">
                                    <input   v-model.number="price = pr.price.price" type="hidden" autocomplete="off">
                                    <input   v-model.number="majorPrice = pr.price.discount" type="hidden" autocomplete="off">

                                    <span class="amount" v-text="currentPrice = price" ></span>
                                    </td>
                                    <td class="product-name">
                                        <input v-if="majarStock == 0" type="checkbox" id="checkbox" disabled  title="فقط تک فروشی " >
                                        <input v-else type="checkbox" id="checkbox" disabled checked title=" فقط عمده فروشی" >

                                        </td>
                                <td class="product-quantity">

                                    <input :name="'id'+index"  :value="pr.id" type="hidden" autocomplete="off">

                                    <input :name="'number'+index" @change="getSum(numbers)"  @keypress="checkMinMax($event)" :min="min" :max="stock" :step="min"  v-model.number="numbers = pr.number" type="number" autocomplete="off">

                                </td>

                                <td class="product-subtotal" v-text="totalPrice = numbers * price" >

                                    </td>
                                    <input class="tprice"  v-model.number="totalPrice" type="hidden" autocomplete="off">
                                    <input name="lenght"  v-model.number="dataLenght = info.length" type="hidden" autocomplete="off">

                            </tr>

                            </tbody>
                        </table>
                    </div>

                    <div class="row">
                        <div class="col-md-5 ml-auto">
                            <div class="cart-page-total">
                                 <h2> صورتحساب</h2>
                                <ul>
                                    {{--<li>بدون تخفیف<span>100.00</span></li>--}}
                                    <li>جمع کل  <span v-text="paymentPrice">

                                        </span></li>
                                </ul>
                                 <button type="submit">مرحله بعد</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
    `
};

var vm = new Vue({
   el: '#app',
   components:{
       'myCart': cart
   },
   data() {

       return {
           gh: 22,
           info: null,
       }

   },created() {

    //    this.getData();

   }, methods: {

       getData () {
        axios
      .get('/mycart')
      .then(response => (this.info = response.data))
      .catch(error => console.log(error))    ;
       },

   }
});

</script>

تو این لینک کامل توضیح داده اگه بخوای از vuex هم استفاده کنی .. خیلی سخت نیست
https://travishorn.com/vue-online-store-with-shopping-cart-c072433f8d9e

تویی بک اند جمع رو انجام بده بهمراه دیتاهای json که میخوای به ویو بفرس و اونجا ایتم جمع رو بگیر و نمایش بده ، سختش نکن دیگه !

@juza66
توی بک اند که محاسبات انجام میشه. ولی توی صفحه فاکتور کاربر می تونه تعداد رو زیاد و کم کنه و بدون رفرش میخوام قیمت کل محاسبه بشه