uniapp 開發(fā)小程序，實(shí)現(xiàn)購物車功能，實(shí)現(xiàn)全選、反選、單選、計(jì)算總價(jià)

一、計(jì)算總價(jià)具體代碼：

//計(jì)算總價(jià)
		computed: {
			totalPrice() {
				let totalPrice = 0
				this.goodList.map(item => {
					item.checked ? totalPrice += item.numberBox * item.unitPrice : totalPrice += 0
				})
				return totalPrice.toFixed(2); // 保留兩位小數(shù)（否則會(huì)價(jià)格會(huì)出現(xiàn)多位小數(shù)）
			}
		},

關(guān)鍵代碼：return totalPrice.toFixed(2); // 保留兩位小數(shù)
否則會(huì)出現(xiàn)多位小數(shù)現(xiàn)象：
文章來源地址http://www.zghlxwxcb.cn/news/detail-505845.html

二、小程序購物車功能總代碼：

<template>
	<view>
		<view class="goodlistItem" v-for="(item,index) in goodList" :key='index'>
			<view class="group">
				<checkbox-group @change="changeitem(item)" checked class="checkbox">
					<checkbox :value="item.unitPrice" :checked="item.checked" />
				</checkbox-group>

				<view class="goods">
					<view class="price">￥{{item.unitPrice}}</view>
					<view class="name">{{item.name}}</view>
					<view class="order-info">
						<view>產(chǎn)地：{{item.home}}</view>
					</view>

					<view class="subtotal">
						<view class="text">
							<view>單品小計(jì)：</view>
							<view>￥{{item.subtotal}}</view>
						</view>
						<view class="number">
							<wm-numberBox :value='item.numberBox' model="1"
								@change="addShopCart($event, item, index)"></wm-numberBox>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="allbox">
			<view class="checkbox">
				<checkbox-group @change="selectAll">
					<checkbox :checked="allChecked">全選</checkbox>
				</checkbox-group>
			</view>

			<view class="total-box">
				<view class="total">合計(jì)：￥{{totalPrice}}</view>
			</view>

		</view>
	</view>

</template>

<script>
	import url from '../../static/api/url';
	export default {
		data() {
			return {
				goodList: [{
						id: 0,
						unitPrice: '23',
						name: '文具',
						home: '山東',
						subtotal: '23',
						numberBox: 1,
						checked: false
					},
					{
						id: 1,
						unitPrice: '50',
						name: '圖書',
						home: '濟(jì)陽',
						subtotal: '50',
						numberBox: 1,
						checked: false
					}
				],
				checkList: [], //選中值
				allChecked: false, //是否全選

			}
		},

		//計(jì)算總價(jià)
		computed: {
			totalPrice() {
				let totalPrice = 0
				this.goodList.map(item => {
					item.checked ? totalPrice += item.numberBox * item.unitPrice : totalPrice += 0
				})
				return totalPrice.toFixed(2); // 保留兩位小數(shù)（否則會(huì)價(jià)格會(huì)出現(xiàn)多位小數(shù)）
			}
		},
		methods: {
		
			//單選
			changeitem(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
				} else {
					// 判斷每一個(gè)商品是否是被選擇的狀態(tài)
					const cartList = this.goodList.every(item => {
						return item.checked === true
					})
					if (cartList) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}
			},
			
			//全選，全不選
			selectAll() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.goodList.map(item => {
						item.checked = true
					})
				} else {
					this.goodList.map(item => {
						item.checked = false
					})
				}
			},
		}

	}
</script>

到了這里，關(guān)于【uniapp 開發(fā)小程序】購物車功能，實(shí)現(xiàn)全選、反選、單選、計(jì)算總價(jià)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！