Browse Source

购物车

lilei 4 năm trước cách đây
mục cha
commit
2088c6adcd

+ 1 - 1
App.vue

@@ -1,6 +1,6 @@
 <script>
 	// const uat_URL = 'https://carwash.test.zyucgj.com/gc-shop/' // 预发布
-	const uat_URL = 'http://192.168.16.102:8302/gc-shop/' // 本地
+	const uat_URL = 'http://192.168.16.105:8302/gc-shop/' // 本地
 	const pro_URL = 'https://carwash.zyucgj.com/gc-shop/'  // 生产
 	const buildType = 0 // 打包环境对应类型,1 生产 0 预发布
 	const buildURL = buildType ? pro_URL : uat_URL // 打包后实际对应的url

+ 35 - 0
api/receiveAddress.js

@@ -0,0 +1,35 @@
+import axios from '@/libs/axios.js';
+
+// 根据客户编号查找收货地址
+export const findAddressBycustomerNo = params => {
+  return axios.request({
+    url: `receiveaddress/findBycustomerNo/${params.customerNo}`,
+    method: 'get'
+  })
+};
+
+// 收货地址删除
+export const deleteAddress = params => {
+  return axios.request({
+    url: `receiveaddress/delete/${params.id}`,
+    method: 'get'
+  })
+};
+
+// 收货地址列表查询(不分页)
+export const getAddressList = params => {
+  return axios.request({
+    url: `receiveaddress/querylist`,
+    method: 'post',
+	data: params
+  })
+};
+
+// 收货地址保存
+export const saveAddress = params => {
+  return axios.request({
+    url: `receiveaddress/save`,
+    method: 'post',
+	data: params
+  })
+};

+ 37 - 0
api/shoppingCart.js

@@ -0,0 +1,37 @@
+import axios from '@/libs/axios.js';
+
+// 添加商品到购物车
+export const addGoodsToCart = params => {
+  return axios.request({
+    url: `shoppingCart/addGoods`,
+    method: 'post',
+	data: params
+  })
+};
+
+// 从购物车删除商品
+export const deleteGoodsFormCart = params => {
+  return axios.request({
+    url: `shoppingCart/deleteGoods`,
+    method: 'post',
+	data: params
+  })
+};
+
+// 查询购物车列表
+export const getCartList = params => {
+  return axios.request({
+    url: `shoppingCart/queryList`,
+    method: 'post',
+	data: params
+  })
+};
+
+// 更新商品购买数量
+export const updateGoodsBuyQty = params => {
+  return axios.request({
+    url: `shoppingCart/updateGoodsBuyQty/${params.id}/${params.buyQty}`,
+    method: 'post',
+	data: params
+  })
+};

+ 6 - 10
components/uni-cart-fix/uni-cart-fix.vue

@@ -8,17 +8,13 @@
 		export default {
 			computed: {
 				count() {
-					return this.$store.state.vuex_cartNums
-				},
-				hide_good_box(){
-					return this.$store.state.vuex_goodBox
-				},
-				bus_x(){
-					return this.$store.state.vuex_bus_x
+					let arr = this.$store.state.vuex_cartList
+					let count = 0
+					arr.map(item=>{
+						count = count + item.shoppingCartGoodsList.length
+					})
+					return count
 				},
-				bus_y(){
-					return this.$store.state.vuex_bus_y
-				}
 			},
 			methods: {
 				toCart() {

+ 3 - 9
components/uni-coods/uni-coods.vue

@@ -11,7 +11,7 @@
 					<text>{{item.sellGold}}</text>
 					<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
 				</view>
-				<view @click.stop="addCart" v-if="item.status == 0">
+				<view @click.stop="addCart(item)" v-if="item.inventoryQty > 0">
 					<u-image mode="scaleToFill" width="45rpx" height="45rpx" src="/static/addCart.png"></u-image>
 				</view>
 			</view>
@@ -42,16 +42,10 @@
 				linePos: null
 			}
 		},
-		watch: {
-			list(newValue, oldValue) {
-				console.log(newValue,'------------')
-			}
-		},
 		methods: {
 			// 加入购物车
-			addCart(e) {
-				// 请求接口
-				this.$store.state.vuex_cartNums = Number(this.$store.state.vuex_cartNums) + 1 
+			addCart(item) {
+				uni.$emit("addCart",{goodsNo:item.goodsNo,buyQty:1})
 			},
 			// 商品详情
 			toDetail(item){

+ 167 - 50
pages/cart/cart.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="cart-pages">
 		<view class="cart-bar">
-			<view>共25件商品</view>
+			<view>共{{count}}件商品</view>
 			<view @click="editCart">
 				<text class="edit" v-if="!isEdit">管理</text>
 				<text class="save" v-else>完成</text>
@@ -9,38 +9,54 @@
 		</view>
 		<view class="goods-list">
 			<!-- 按分类显示 -->
-			<view class="goods-class-box" v-for="item in 2">
+			<view class="goods-class-box" v-for="(item,cindex) in cartList" :key="item.goodsTypeNo">
 				<view class="goods-class-head">
 					<view>
-						<u-checkbox shape="circle" active-color="#01c9b2" name='goodsClas' @change="goodsClasChange">
-							人气零食
+						<u-checkbox 
+						shape="circle" 
+						v-model="item.checked" 
+						active-color="#01c9b2" 
+						:name='item.goodsTypeNo' 
+						size="40rpx"
+						@change="goodsClasChange">
+							{{item.name}}
 						</u-checkbox>
 					</view>
 					<view class="des">
-						<view>满<text>300</text></view>
+						<view>满<text>{{item.goldLimit}}</text></view>
 						<u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
 						<view>才可购买</view>
 					</view>
 				</view>
 				<view class="goods-class-list">
 					<!-- 商品列表 -->
-					<view class="goods-item" v-for="(item,index) in 3" :key="index">
+					<view class="goods-item" v-for="(good,index) in item.shoppingCartGoodsList" :key="good.id">
 						<view class="checkbox">
-							<u-checkbox v-if="index!=1||isEdit" shape="circle" active-color="#01c9b2" name='goodsItem'></u-checkbox>
-						</view>
-						<view class="goods-imgs">
-							<view v-if="index==1" class="goods-staus">已售罄</view>
-							<u-image border-radius="12" width="158rpx" height="140rpx" src="/static/goods.png"></u-image>
+							<u-checkbox 
+							v-model="good.checked" 
+							v-if="good.goods.inventoryQty>0||isEdit" 
+							shape="circle" 
+							active-color="#01c9b2" 
+							size="40rpx"
+							:name='good.id+"-"+cindex'
+							@change="goodsChange"
+							></u-checkbox>
 						</view>
 						<view class="goods-info">
-							<view class="good-name">拉就是两地分居拉进来就是两地分居拉进来就是两地分居拉进来进来</view>
-							<view class="goods-price">
-								<view>
-									<text>50</text>
-									<u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
-								</view>
-								<view v-if="index!=1">
-									<u-number-box :min="1"></u-number-box>
+							<view class="goods-imgs">
+								<view v-if="good.goods.inventoryQty==0" class="goods-staus">已售罄</view>
+								<u-image border-radius="12" width="158rpx" height="140rpx" :src="good.goods.homeImage"></u-image>
+							</view>
+							<view class="goods-text">
+								<view class="good-name">{{good.goods.name}}</view>
+								<view class="goods-price">
+									<view>
+										<text>{{good.goods.sellGold}}</text>
+										<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>
+									</view>
 								</view>
 							</view>
 						</view>
@@ -50,17 +66,23 @@
 		</view>
 		<view class="cart-submit">
 			<view>
-				<u-checkbox shape="circle" name='checkAll' active-color="#01c9b2" @change="checkAllChange" v-model="checkAll">全选</u-checkbox>
+				<u-checkbox 
+				shape="circle" 
+				name='checkAll' 
+				size="40rpx"
+				active-color="#01c9b2" 
+				@change="checkAllChange" 
+				v-model="checkAll">{{checkAll?'取消':'全选'}}</u-checkbox>
 			</view>
 			<view v-if="!isEdit">
 				<view class="heji">
 					<view>总计:<text>450</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>
+				<u-button size="mini" :custom-style="toOrderButton" type="error" @click="toOrder">立即下单</u-button>
 			</view>
 			<view v-else>
-				<u-button size="mini" :custom-style="toOrderButton" type="error">删除</u-button>
+				<u-button size="mini" :custom-style="toOrderButton" type="error" @click="delGoods">删除</u-button>
 			</view>
 		</view>
 	</view>
@@ -70,24 +92,113 @@
 	export default {
 		data() {
 			return {
-				checkAll: false,// 全选
-				isEdit: false, // 是否编辑模式
 				toOrderButton: {
 					borderRadius:'100rpx',
 					fontSize:'30rpx',
 					width: '180rpx',
 					height: '60rpx'
-				}
+				},
+				checkAll: false,// 全选
+				isEdit: false, // 是否编辑模式
+				cartList: [] // 购物车列表
 			};
 		},
+		computed: {
+			count() {
+				let arr = this.$store.state.vuex_cartList
+				let count = 0
+				arr.map(item=>{
+					count = count + item.shoppingCartGoodsList.length
+					if(!item.hasOwnProperty("checked")){
+						item.checked = false
+					}
+					item.shoppingCartGoodsList.map(goods=>{
+						if(!goods.hasOwnProperty("checked")){
+							goods.checked = false
+						}
+					})
+				})
+				return count
+			},
+		},
+		onLoad() {
+			this.cartList = this.$store.state.vuex_cartList
+		},
 		methods: {
-			// 全选
+			// 获取当前选择的商品
+			getCheckGoods(){
+				let arr = this.cartList
+				let goods = []
+				arr.map(item=>{
+					item.checked = e.value
+					item.shoppingCartGoodsList.map(a =>{
+						if(a.checked){
+							goods.push(a.id)
+						}
+					})
+				})
+				return goods
+			},
+			// 全选 或 取消全选
 			checkAllChange(e) {
-				console.log(e);
+				let arr = this.cartList
+				arr.map(item=>{
+					item.checked = e.value
+					item.shoppingCartGoodsList.map(goods=>{
+						goods.checked =  e.value
+					})
+				})
+				arr.splice()
 			},
 			// 每个分类的全选
 			goodsClasChange(e){
 				console.log(e);
+				let index = this.cartList.findIndex(item => item.goodsTypeNo == e.name)
+				this.cartList[index].checked = e.value
+				this.cartList[index].shoppingCartGoodsList.map(goods=>{
+					goods.checked = e.value
+				})
+				// 判断是否全选
+				this.hasCheckAll()
+			},
+			// 商品选择
+			goodsChange(e){
+				console.log(e)
+				let a = e.name.split('-')
+				let row = this.cartList[a[1]]
+				let goodsIndex = row.shoppingCartGoodsList.findIndex(item => item.id == a[0])
+				row.shoppingCartGoodsList[goodsIndex].checked = e.value
+				// 判断当前分类是否全选
+				this.clasGoodsHasCheckAll(a[1])
+				// 判断是否全选
+				this.hasCheckAll()
+			},
+			// 判断某个分类是否全选
+			clasGoodsHasCheckAll(index){
+				let row = this.cartList[index]
+				let len = row.shoppingCartGoodsList.length
+				let clen = 0
+				row.shoppingCartGoodsList.map(item=>{
+					console.log(item.checked)
+					if(item.checked){
+						clen = clen + 1
+					}
+				})
+				row.checked = clen == len
+				this.cartList.splice()
+			},
+			// 是否全选
+			hasCheckAll(){
+				let list = this.cartList
+				let len = list.length
+				let clen = 0
+				list.map(item => {
+					if(item.checked){
+						clen = clen + 1
+					}
+				})
+				this.checkAll = clen == len
+				list.splice()
 			},
 			// 编辑购物车
 			editCart(){
@@ -152,37 +263,43 @@ page{
 			padding: 20upx;
 			display: flex;
 			align-items: center;
-			justify-content: space-between;
 			border-bottom: 1px solid #F8F8F8;
 			&:last-child{
 				border: 0;
 			}
 			.checkbox{
-				width: 80rpx;
+				width: 60rpx;
 				overflow: hidden;
 			}
-			.goods-imgs{
-				position: relative;
-				.goods-staus{
-					width: 100%;
-					height: 100%;
-					position: absolute;
-					z-index: 10000;
-					border-radius: 15rpx;
-					background: rgba($color: #000000, $alpha: 0.4);
-					text-align: center;
-					line-height: 140rpx;
-					left: 0;
-					top: 0;
-					color: #eee;
-					font-size: 24upx;
-					font-weight: bold;
-				}
-			}
 			.goods-info{
-				padding-left: 20upx;
-				.good-name{
-					font-weight: bold;
+				display: flex;
+				align-items: center;
+				flex-grow: 1;
+				.goods-imgs{
+					position: relative;
+					.goods-staus{
+						width: 100%;
+						height: 100%;
+						position: absolute;
+						z-index: 10000;
+						border-radius: 15rpx;
+						background: rgba($color: #000000, $alpha: 0.4);
+						text-align: center;
+						line-height: 140rpx;
+						left: 0;
+						top: 0;
+						color: #eee;
+						font-size: 24upx;
+						font-weight: bold;
+					}
+				}
+				.goods-text{
+					padding-left: 20upx;
+					flex-grow: 1;
+					.good-name{
+						font-weight: bold;
+						word-break: break-all;
+					}
 				}
 			}
 			.goods-price{

+ 49 - 17
pages/index/index.vue

@@ -49,20 +49,11 @@
 
 <script>
 	import {
-		checkLogin
-	} from '@/api/login.js'
-	import {
-		getMapStoreList
-	} from '@/api/store.js'
-	import {
-		getLookUpDatas
-	} from '@/api/data.js'
-	import {
-		getUnFinishedOrder
-	} from '@/api/order.js'
+		getCartList,
+		addGoodsToCart,
+		deleteGoodsFormCart
+	} from '@/api/shoppingCart.js'
 	export default {
-		components: {
-		},
 		data() {
 			return {
 				imageTopList:[
@@ -87,13 +78,54 @@
 				]
 			}
 		},
-		onReady() {
-		},
-		onShow() {
-		},
 		onLoad() {
+			// 查询购物车列表
+			this.getCartList()
+			// 加入购物车
+			uni.$on("addCart",item =>{
+				this.addGoodToCart(item)
+			})
+			// 删除购物车的商品
+			uni.$on("delCartGood",item => {
+				this.delGoodFormCart(item)
+			})
 		},
 		methods: { 
+			// 查询购物车
+			getCartList(){
+				getCartList({}).then(res => {
+					console.log(res)
+					if(res.status == 200){
+						this.$u.vuex('vuex_cartList', res.data)
+					}
+				})
+			},
+			// 添加购物车
+			addGoodToCart(item){
+				addGoodsToCart(item).then(res => {
+					if(res.status == 200){
+						uni.showToast({
+							title:"商品添加成功",
+							icon:"none"
+						})
+						// 刷新购物车
+						this.getCartList()
+					}
+				})
+			},
+			// 删除购物车
+			delGoodFormCart(id){
+				deleteGoodsFormCart({id:id}).then(res => {
+					if(res.status == 200){
+						uni.showToast({
+							title:"商品删除成功",
+							icon:"none"
+						})
+						// 刷新购物车
+						this.getCartList()
+					}
+				})
+			},
 			// 更多商品
 			toGoods(clsId){
 				uni.navigateTo({

+ 6 - 10
pages/toOrder/index.vue

@@ -57,6 +57,9 @@
 </template>
 
 <script>
+	import {
+		findAddressBycustomerNo
+	} from '@/api/receiveAddress.js'
 	export default {
 		data() {
 			return {
@@ -74,16 +77,9 @@
 		methods: {
 			// 获取用户位置
 			getLocation() {
-				uni.getLocation({
-					type: 'gcj02',
-					success: (res) => {
-						console.log(res, 'location success')
-					},
-					// 定位失败默认展示青海西宁位置地图
-					fail: (err) => {
-						 console.log(err,'location error')
-					}
-				});
+				 findAddressBycustomerNo().then(res => {
+					 console.log(res)
+				 })
 			},
 			//立即下单
 			toPay(){

+ 2 - 2
store/index.js

@@ -107,8 +107,8 @@ 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_cartNums: 5,
+		// 购物车
+		vuex_cartList: [],
 		// 如果无需保存到本地永久存储,无需lifeData.xx方式
 		vuex_socket: null,
 		vuex_wsMessageData: '',