lilei преди 4 години
родител
ревизия
fee28f180e
променени са 5 файла, в които са добавени 110 реда и са изтрити 33 реда
  1. 1 2
      api/shoppingCart.js
  2. 58 13
      pages/cart/cart.vue
  3. 23 3
      pages/index/index.vue
  4. 26 14
      pages/toOrder/index.vue
  5. 2 1
      store/index.js

+ 1 - 2
api/shoppingCart.js

@@ -31,7 +31,6 @@ export const getCartList = params => {
 export const updateGoodsBuyQty = params => {
   return axios.request({
     url: `shoppingCart/updateGoodsBuyQty/${params.id}/${params.buyQty}`,
-    method: 'post',
-	data: params
+    method: 'get'
   })
 };

+ 58 - 13
pages/cart/cart.vue

@@ -55,7 +55,7 @@
 										<u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
 									</view>
 									<view v-if="good.goods.inventoryQty>0">
-										<u-number-box :min="1" v-model="good.buyQty"></u-number-box>
+										<u-number-box @change="goodsNumsChange(good)" :min="1" v-model="good.buyQty"></u-number-box>
 									</view>
 								</view>
 							</view>
@@ -72,11 +72,13 @@
 				size="40rpx"
 				active-color="#01c9b2" 
 				@change="checkAllChange" 
-				v-model="checkAll">{{checkAll?'取消':'全选'}}</u-checkbox>
+				v-model="checkAll">
+				{{checkAll?'取消':'全选'}}
+				</u-checkbox>
 			</view>
 			<view v-if="!isEdit">
 				<view class="heji">
-					<view>总计:<text>450</text></view>
+					<view>总计:<text>{{totalPrice}}</text></view>
 					<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
 				</view>
 				<u-button size="mini" :custom-style="toOrderButton" type="error" @click="toOrder">立即下单</u-button>
@@ -100,10 +102,10 @@
 				},
 				checkAll: false,// 全选
 				isEdit: false, // 是否编辑模式
-				cartList: [] // 购物车列表
 			};
 		},
 		computed: {
+			// 总数
 			count() {
 				let arr = this.$store.state.vuex_cartList
 				let count = 0
@@ -120,20 +122,36 @@
 				})
 				return count
 			},
+			// 总计
+			totalPrice(){
+				let arr = this.cartList
+				let total = 0
+				arr.map(item=>{
+					item.shoppingCartGoodsList.map(a =>{
+						if(a.checked){
+							total = total + a.buyQty * a.goods.sellGold
+						}
+					})
+				})
+				return total
+			},
+			// 商品列表
+			cartList(){
+				return this.$store.state.vuex_cartList
+			}
 		},
 		onLoad() {
-			this.cartList = this.$store.state.vuex_cartList
+			this.hasCheckAll()
 		},
 		methods: {
-			// 获取当前选择的商品
-			getCheckGoods(){
+			// 获取当前选择的商品, type: 0 删除,1 立即下单
+			getCheckGoods(type){
 				let arr = this.cartList
 				let goods = []
 				arr.map(item=>{
-					item.checked = e.value
 					item.shoppingCartGoodsList.map(a =>{
 						if(a.checked){
-							goods.push(a.id)
+							goods.push(type?a:a.id)
 						}
 					})
 				})
@@ -204,11 +222,38 @@
 			editCart(){
 				this.isEdit = !this.isEdit
 			},
-			//立即下单
+			// 立即下单
 			toOrder(){
-				uni.redirectTo({
-					url:"/pages/toOrder/index"
-				})
+				let goods = this.getCheckGoods(1)
+				console.log(goods)
+				if(goods.length){
+					this.$u.vuex("vuex_toOrderList",goods)
+					uni.redirectTo({
+						url:"/pages/toOrder/index"
+					})
+				}else{
+					uni.showToast({
+						title:"请选择商品",
+						icon:"none"
+					})
+				}
+			},
+			// 删除商品
+			delGoods(){
+				let ids = this.getCheckGoods(0)
+				if(ids.length){
+					uni.$emit("delCartGood", ids)
+				}else{
+					uni.showToast({
+						title:"请选择要删除的商品",
+						icon:"none"
+					})
+				}
+			},
+			// 更改商品数量
+			goodsNumsChange(e){
+				console.log(e)
+				uni.$emit("updateGoodsBuyQty",{id:e.id,buyQty:e.buyQty})
 			}
 		},
 	}

+ 23 - 3
pages/index/index.vue

@@ -51,7 +51,8 @@
 	import {
 		getCartList,
 		addGoodsToCart,
-		deleteGoodsFormCart
+		deleteGoodsFormCart,
+		updateGoodsBuyQty
 	} from '@/api/shoppingCart.js'
 	export default {
 		data() {
@@ -89,6 +90,10 @@
 			uni.$on("delCartGood",item => {
 				this.delGoodFormCart(item)
 			})
+			// 更新购物车商品数量
+			uni.$on("updateGoodsBuyQty",item=>{
+				this.updateGoodsBuyQty(item)
+			})
 		},
 		methods: { 
 			// 查询购物车
@@ -114,8 +119,12 @@
 				})
 			},
 			// 删除购物车
-			delGoodFormCart(id){
-				deleteGoodsFormCart({id:id}).then(res => {
+			delGoodFormCart(ids){
+				uni.showLoading({
+					mask: true,
+					title: "删除中..."
+				})
+				deleteGoodsFormCart({idList:ids}).then(res => {
 					if(res.status == 200){
 						uni.showToast({
 							title:"商品删除成功",
@@ -124,6 +133,17 @@
 						// 刷新购物车
 						this.getCartList()
 					}
+					uni.hideLoading()
+				})
+			},
+			// 更新商品数量
+			updateGoodsBuyQty(item){
+				uni.showLoading({
+					mask: true,
+					title: "更新数量中..."
+				})
+				updateGoodsBuyQty(item).then(res => {
+					uni.hideLoading()
 				})
 			},
 			// 更多商品

+ 26 - 14
pages/toOrder/index.vue

@@ -14,18 +14,18 @@
 		</view>
 		<view class="goods-list">
 			<!-- 商品列表 -->
-			<view class="goods-item" v-for="(item,index) in 6" :key="index">
+			<view class="goods-item" v-for="(item,index) in goodsList" :key="item.id">
 				<view class="goods-imgs">
-					<u-image border-radius="12" width="158rpx" height="140rpx" src="/static/goods.png"></u-image>
+					<u-image border-radius="12" width="158rpx" height="140rpx" :src="item.goods.homeImage"></u-image>
 				</view>
 				<view class="goods-info">
-					<view class="good-name">拉就是两地分居拉进来就是两地分居拉进来就是两地分居拉进来进来</view>
+					<view class="good-name">{{item.goods.name}}</view>
 					<view class="goods-price">
 						<view>
-							<text>50</text>
+							<text>{{item.goods.sellGold}}</text>
 							<u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
 						</view>
-						<view>×2</view>
+						<view>×{{item.buyQty}}</view>
 					</view>
 				</view>
 			</view>
@@ -34,7 +34,7 @@
 				<view>
 					<view>商品合计:</view>
 					<view class="heji">
-						<text>250</text>
+						<text>{{totalPrice}}</text>
 						<u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
 					</view>
 				</view>
@@ -46,7 +46,7 @@
 		</view>
 		<view class="cart-submit">
 			<view>
-			  <view>总计:<text>450</text></view>
+			  <view>总计:<text>{{totalPrice}}</text></view>
 			  <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
 			</view>
 			<view>
@@ -68,28 +68,39 @@
 					fontSize:'30rpx',
 					width: '180rpx',
 					height: '60rpx'
-				}
+				},
+				goodsList: []
 			};
 		},
 		onLoad() {
+			this.goodsList = this.$store.state.vuex_toOrderList
 			this.getLocation()
 		},
+		computed: {
+			totalPrice() {
+				let total = 0
+				this.goodsList.map(item => {
+					total = total + item.buyQty * item.goods.sellGold
+				})
+				return total 
+			}
+		},
 		methods: {
 			// 获取用户位置
 			getLocation() {
-				 findAddressBycustomerNo().then(res => {
+				 findAddressBycustomerNo({customerNo:'12313'}).then(res => {
 					 console.log(res)
 				 })
-			},
-			//立即下单
-			toPay(){
-				
 			},
 			//修改收货地址信息
 			editAddress(){
 				uni.navigateTo({
 					url:"/pages/toOrder/editAddress"
 				})
+			},
+			// 支付
+			toPay(){
+				
 			}
 		},
 	}
@@ -138,7 +149,6 @@ page{
 			padding: 20upx 40upx;
 			display: flex;
 			align-items: center;
-			justify-content: space-between;
 			border-bottom: 1px solid #F8F8F8;
 			background: #fff;
 			&:last-child{
@@ -148,9 +158,11 @@ page{
 				position: relative;
 			}
 			.goods-info{
+				flex-grow: 1;
 				padding-left: 20upx;
 				.good-name{
 					font-weight: bold;
+					word-break: break-all;
 				}
 			}
 			.goods-price{

+ 2 - 1
store/index.js

@@ -107,8 +107,9 @@ const store = new Vuex.Store({
 		vuex_bizId: lifeData.vuex_bizId ? lifeData.vuex_bizId : '',// 设备编号
 		vuex_orderNo: lifeData.vuex_orderNo ? lifeData.vuex_orderNo : '',// 订单编号
 		vuex_orderStatus: lifeData.vuex_orderStatus ? lifeData.vuex_orderStatus : '',// 订单状态
-		// 购物车
+		// 购物车及下单
 		vuex_cartList: [],
+		vuex_toOrderList: [],
 		// 如果无需保存到本地永久存储,无需lifeData.xx方式
 		vuex_socket: null,
 		vuex_wsMessageData: '',