xmhjc-applet/pages/market/market.vue

<template>
	<view class="market">
		<view class="marketTop">
			<view class="top_L">
				<u-icon name="map" color="#999" size="16"></u-icon>
				<view class="top_text">{{AddressData.address}}</view>
				<u-icon @click="linkto('address','1')" name="arrow-right" color="#999" size="16"></u-icon>
			</view>
			<view @click="linkto('address')" class="top_R">
				编辑
			</view>
		</view>

		<view class="marketContent">
			<u-swipe-action >
				<u-swipe-action-item class="mc_item" v-for="(item,index) in dataList" :key="item.id" @click="swipeAaction(index,$event)"
				:options="options1" :show="swipeShow"
				>
				<view class="item_swipe">
						<checkbox :checked="item.check" @click="checkitem(item)"  shape="circle"></checkbox>
					<view class="box_img">
						<u--image radius='16rpx' width="180rpx" height="180rpx" :src="item.fileList[0].fileUrl" ></u--image>
					</view>
					<view class="box_text">
						<view class="box_title">
							{{ item.productName }}
						</view>
						<view class="box_type">
							已选择 {{item.specsName}}
						</view>
						<view class="box_num">
							<view class="bn_left">
								￥{{item.specsPrice}}
							</view>
							<view class="bn_right">
								<u-number-box :min="1" :max="999" button-size="28" v-model="item.num" 
								@blur="valblur($event,item,index)" @change="valChange(index,item.num)"></u-number-box>
							</view>
						</view>
					</view>
				</view>
				</u-swipe-action-item>
			</u-swipe-action>
		
		</view>
		
		<view  class="bottom">
			<view class="w700 bottomflexac">
				<view class="checkall">
					<u-checkbox-group >
						<u-checkbox :checked="checked" shape="circle" class="" @change="checkAll"></u-checkbox><text>全选</text>
					</u-checkbox-group>
				</view>
				<view class="bt_r">
					<view class="num">
						<view>合计：
							<text class="num_n">
								￥
								<text style="font-size:36rpx">{{shoppingCarCalcData.totalPrice || 0}}</text>
							</text>
						</view>
						<view @click="popupShow = !popupShow" style="font-size: 24rpx;color: #FF655B;text-align: right;margin-right: 20rpx;">{{popupShow?'关闭明细':'查看明细'}}</view>
					</view>
					<view class="btn">
						<u-button  shape="circle" size="medium" type="primary" 
						@click="submit">结算</u-button>
					</view>
				</view>
			</view>
		</view>

		<u-popup  :closeable='true' :round="10" :show="popupShow" @close="close" @open="open">
			<view class="popupView">
                <view class="scrollview">
					<view class="popuptitle">金额明细</view>
					
					<view class="popupimg">
						<view style="margin: 20rpx 10rpx" v-for="(item,index) in tempCheckArray" :key="index">
							<view class="box_img">
								<u--image radius='16rpx' width="180rpx" height="180rpx" :src="item.fileList[0].fileUrl" ></u--image>
							</view>
						</view>
					</view>
					<view class="popupInfo">
						<view class="popupInfo_item">
							<view>商品总额</view>
							<view>¥ {{shoppingCarCalcData.productPrice || 0}}</view>
						</view>
						<view class="popupInfo_item">
							<view>加工费用</view>
							<view>¥ {{shoppingCarCalcData.processPrice || 0}}</view>
						</view>
						<view class="popupInfo_item">
							<view>包装袋费</view>
							<view>¥ {{shoppingCarCalcData.packagePrice || 0}}</view>
						</view>
						<!-- <view class="popupInfo_item">
							<view>优惠券</view>
							<view>¥ 0.00</view>
						</view> -->
					</view>
					<view class="popupInfo2">
						<view class="popupInfo_item2">
							<view>合计</view>
							<view>¥ {{shoppingCarCalcData.totalPrice || 0}}</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {
    deliveryAddressList,shoppingCartPage,
	cancelCollection,productcollection,removeShoppingCart,
	shoppingCartCreateOrder,calcShoppingCart
    } from '@/http/api/common.js'
	import * as util from '@/pages/util/util.js'
export default {
data() {
	return {
		popupShow:false,
		checked: false,
		disabled: false,
		tempCheckArray:[],//选中的数据列表
		dataList:[],//购物车列表
		options1: [
			// {
			// 	text: '分享',
			// 	style: {
			// 		backgroundColor: '#BBB'
			// 	}
			// },
			{
				text: '收藏',
				style: {
					backgroundColor: '#FF8C33'
				}
			}, {
				text: '删除',
				style: {
					backgroundColor: '#F6514F'
				}
			}
		],
		swipeShow:false,
		AddressData:{
			address:'请填写收货地址'
		},
		shoppingCarCalcData:{
			totalPrice:0,//总价
			productPrice:0,//商品价格
			packagePrice:0,//包装费
			processPrice:0,//加工费
		}
	};
},
async onShow(e) {
	if(uni.getStorageSync('AppAuthorization')){
		 //获取地址列表
		await this.getdeliveryAddressList()

		 //获取购物车列表
		await this.getshoppingCartPage()
	}
	if (uni.getStorageSync('selectAddress')) {
		this.AddressData = JSON.parse(uni.getStorageSync('selectAddress'))
	}
},
methods: {
	
	async getdeliveryAddressList(){
        let res = await deliveryAddressList()

        if (res.data.code == 200) {
			if (res.data.data) {
				this.AddressData = res.data.data.find(v=>v.defaultAddress == '1')
				if (res.data.data.lenght == 1) {
					this.AddressData = res.data.data[0]
				}
			}
        }
        
    },
	async getshoppingCartPage(){
		 //获取购物车列表
        let res = await shoppingCartPage({
			pageSize:10,
			pageNum:1
		})

        if (res.data.code == 200) {
			if (res.data.data) {
				this.dataList = res.data.data.rows.map(v=>{
					let findoldData = this.dataList.find(vv => vv.id == v.id)
					let check = false
					if (findoldData) {
						check = findoldData.check
					}
					return {
						check:check,
						...v
					}
				})
				//获取购物车后 自动计算一次
				this.calcShoppingCart()
			}
        }
        
    },
	open() {
	},
	close() {
		this.popupShow = false
	},
	valblur(e,item,index){
		console.log(e);
        if (e.value == '') {
            console.log(item === 'object');
            if (typeof item === 'object') {
               item.num = 1 

			   this.valChange(index,item.num)
            }else{
                this[item] = 2
            }
        }
    },
	async valChange(index,num){
				
		if (this.disabled) {
			return
		}

		this.dataList[index].check = true
		this.dataList[index].num = num


		this.disabled = true
		setTimeout(() => {
			//点击数量触发计算
			this.calcShoppingCart()
		}, 100);
	},
	async checkitem(item){
		// console.log(this.dataList);
		item.check = !item.check
		// this.dataList[index].check = !this.dataList[index]?.check

		//点击单选框触发计算
		setTimeout(() => {
			//点击数量触发计算
			this.calcShoppingCart()
		}, 100);
	},
	//全选
	async checkAll() {
		this.checked = !this.checked

		this.dataList.forEach(v => {
			v.check = this.checked
		})


		//点击单选框触发计算
		setTimeout(() => {
			//点击数量触发计算
			this.calcShoppingCart()
		}, 100);
	},
	async calcShoppingCart(){

		//计算购物车价格
		this.tempCheckArray = this.dataList.filter(v => v.check)
		let shoppingCarSubmitVOList = this.tempCheckArray.map(v => {
			let a = {
				id:v.id,
				num:v.num
			}
			return a
		})
		let res = await calcShoppingCart({
			shoppingCarSubmitVOList:shoppingCarSubmitVOList
		})
		this.disabled = false
		if (res.data.code == 200) {
			this.shoppingCarCalcData = res.data.data
		}
		

	},
	swipeAaction(index,options){
		//index操作了第几个 ，options点了 第几个按钮
		console.log(index,options);
		// 0 收藏 1删除
		if (options.index == 0) {
			if (this.dataList[index].favorites) {
				util.toastFunc('已经收藏过了')
			}else{
				this.toCollection(this.dataList[index])
			}
		}else{
			this.removeShoppingCart(this.dataList[index])
		}
	},
	async toCollection(data){
        //收藏
        let res = null
        if (data.favorites) {
            // favorites true 为收藏过了 调用取消收藏接口
            res = await cancelCollection(data.productId)
        }else{
            res = await productcollection(data.productId)
        }
        
        if (res.data.code == 200) {
            let  title = data.favorites ? '取消收藏成功' :'收藏成功'
            uni.showToast({
                title: title,
                duration: 2000
            });
        }
    },
	async removeShoppingCart(data){
        //删除
        let res =  await removeShoppingCart(data.id)
        
        if (res.data.code == 200) {
            util.toastFunc('已从购物车中移除',()=>{
				this.getshoppingCartPage()
			})
        }
    },
	async submit(){
		if (!this.AddressData || !this.AddressData?.id) {
			util.toastFunc('请至少设置一个默认地址',()=>{
				this.linkto('address')
			})
		}
		//确认订单
		if (this.tempCheckArray.lenght==0) {
			util.toastFunc('已从购物车中移除',()=>{
				this.getshoppingCartPage()
			})
		}
		console.log('this.tempCheckArray',this.tempCheckArray);
		let shoppingCarSubmitVOList = this.tempCheckArray.map(v => {
			let a = {
				id:v.id
			}
			return a
		})
		//购物车下单
		let res = await shoppingCartCreateOrder({
			shoppingCarSubmitVOList:shoppingCarSubmitVOList,
			deliveryAddressId:this.AddressData.id
		})

		if (res.data.code == 200) {
			let orderId = res.data.data.id
			
			uni.navigateTo({
				url: '/pages/market/confirmOrder?orderId=' + orderId
			});
		}
	},
	linkto(key,type=''){
		if (key == 'address') {
			uni.navigateTo({
				url: '/pages/myinfo/address?selectAddress='+type
			});
		}
		
	},
},
};
</script>
<style lang="scss">
.market{
	display: flex;
    flex-direction: column;
    align-items: center;
}
.btn{
    width: 200rpx;
	height: 80rpx;
    margin-left: 20rpx;
}
.bottomflexac{
	display: flex;
    align-items: center;
    justify-content: space-between;
}
.marketTop{
	width: 700rpx;
	height: 90rpx;
	background: #FFFFFF;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bottom{
	width: 750rpx;
	height: 120rpx;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    bottom: 0;
	z-index: 10076;
}
.top_text{
	width: 260rpx;
	max-height: 80rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #999999;
	line-height: 40rpx;

	// display: flex;
	// align-items: center;
	display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}
.top_L{
	display: flex;
	align-items: center;
}
.top_R{
	width: 56rpx;
	height: 40rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #666666;
}
.checkall{
	display: flex;
	align-items: center;
	width: 150rpx;
	height: 40rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #666666;
}
.bt_r{
	min-width: 440rpx;
    display: flex;
    align-items: center;
}
.num{
	min-width: 220rpx;
	height: 47rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #666666;
	display: flex;
	flex-direction: column;
}
.num_n{
	font-size: 28rpx;
	font-weight: bold;
	color: #F6514F;
}
.marketContent{
	width: 750rpx;
	height: calc(100vh - 200rpx);
	background: #F1F1F1;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	overflow: auto;
	display: flex;
	flex-direction: column;
    align-items: center;
}
.mc_item{
	width: 702rpx;
	height: 244rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	margin-top: 24rpx;
}
.item_swipe{
	width: 702rpx;
	height: 244rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;
	display: flex;
    align-items: center;
    flex-direction: row;
	padding-left: 24rpx;
}

.box_img{
    width: 180rpx;
    height: 180rpx;
    background-color: #999999;
	border-radius: 16rpx;
}
.box_text{
	width: 392rpx;
	height: 200rpx;
	margin-left: 20rpx;

	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.box_title{
	width: 392rpx;
	height: 40rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
	line-height: 40rpx;

	display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
}
.box_type{
	width: 390rpx;
	height: 48rpx;
	background: #EEEEEE;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	opacity: 1;

	font-size: 28rpx;
	font-weight: 500;
	color: #999999;
    padding-left: 24rpx;
    line-height: 48rpx;

	display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
}
.box_num{
	width: 410rpx;
	display: flex;
	justify-content: space-between;
    align-items: center;
}
.bn_left{
	width: 106rpx;
	height: 38rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #F6514F;
	line-height: 36rpx;
}
.popupView{
    height: 1000rpx;
    display: flex;
    padding-top: 40rpx;
    flex-direction: column;
    align-items: center;
}
.scrollview{
    height: 850rpx;
    width: 702rpx;
    overflow: auto;
}
.popuptitle{
	// width: 128rpx;
	// height: 45rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #000000;
	text-align: center;
}
.popupimg{
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
	margin-top: 40rpx;

}
.popupInfo{
	width: 702rpx;
	height: 180rpx;
	background: #EEEEEE;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	opacity: 1;

	display: flex;
	align-items: center;
	justify-content: center;
    flex-direction: column;
}
.popupInfo_item{
	display: flex;
	justify-content: space-between;

	width: 654rpx;
	height: 40rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #666666;
	line-height: 36rpx;
}
.popupInfo2{
	width: 702rpx;
	height: 80rpx;

	display: flex;
	align-items: center;
	justify-content: center;
    flex-direction: column;
}
.popupInfo_item2{
	display: flex;
	justify-content: space-between;

	width: 654rpx;
	height: 40rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	line-height: 36rpx;
}

checkbox .wx-checkbox-input {
	width: 32rpx; 
    height: 32rpx;
    border-color: #409eff;
    background-color: transparent;
    transition: background-color .2s;
	border-radius: 50%;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	color: #fff; /* 这里也可以设置对钩的颜色 */
    background-color: #409eff;
	border-radius: 50%;
}
.u-swipe-action-item{
	margin-top: 24rpx;
	border-radius: 16rpx;
}
</style>