jiangchengfeiyi-xiaochengxu/pages/Shopping-cart/productmain/testproductmain.vue

<template>
<view class="flex-col page">
  <view class="flex-row items-center section_2">
    <text class="font text">购物车</text>
    <view class="flex-row items-center flex-1 section_3 ml-17">
      <image
        class="shrink-0 image"
        src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FANvSsQui-sousuo.png"
      />
      <input v-model="searchText" class="section_1 ml-4" placeholder="搜索购物车商品" />
    </view>
    <text class="font text_2 ml-17" @click="changeState">{{ stateText.topBtn }}</text>
  </view>
  <view class="flex-col section_5">
    <view class="flex-row justify-between self-stretch group">
      <text class="font_2 text_3" :style="getTextStyle(1)" @click="changeType(1)">商品类</text>
      <text class="font_2 text_4" :style="getTextStyle(2)" @click="changeType(2)">服务类</text>
    </view>
  </view>
  <view class="flex-col list">
		<checkbox-group @change="checkBoxChange">
    <view class="flex-col list-item mt-14" v-for="(item, index) in products" :key="index">
      <!-- 实体类商品 -->
			<view class="flex-row section_10" v-if="current == 1">
				<!-- 多选框 -->
				<checkbox class="shrink-0 self-center image_3 round red" :value="index" :checked="item.checked"/>
        <view class="flex-row items-end flex-1 self-center ml-22">
          <image
            class="shrink-0 image_2"
            :src="item.cartGoodVO.goodImg.split(';')[0]"
						@click="jump_product(item.goodId)"
          />
          <view class="flex-col flex-1 group_2">
            <view class="flex-row justify-center group_3">
              <text class="font_3 text_5" @click="jump_product(item.goodId)">{{ item.cartGoodVO.name }}</text>
              <text class="font_3" @click="jump_product(item.goodId)">【{{ item.cartGoodVO.type }}】</text>
            </view>
            <view class="flex-row justify-between items-center mt-46">
              <view class="flex-row items-end">
                <text class="font_4 text_6"  @click="jump_product(item.goodId)">￥{{ item.cartGoodVO.price }}</text>
                <!-- <image
                  class="shrink-0 image_6"
                  src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=babcf6110b7f4238c5be5c44afb0a800.png"
                />
                <text class="font_5 text_7">00</text> -->
              </view>
							<!-- 减少数量 -->
              <image
                class="image_4"
								src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVBaGfZxE-short.png"
								@click="decrease(index , item.checked)"
							/>
            </view>
          </view>
          <view class="flex-row shrink-0 group_4">
            <view class="flex-col justify-start items-center text-wrapper"><text class="font_6">{{ item.quantity }}</text></view>
            <!-- 添加数量 -->
						<image
              class="image_5 ml-2"
              src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FLsCJgzgf-add.png"
							@click="increase(index , item.checked)"
						/>
          </view>
        </view>
      </view>
			<!-- 服务类商品 -->
      <view class="flex-col list-item_2 mt-14" v-if="current == 2">
        <view class="flex-row">
          <image
            class="shrink-0 self-start image_8"
            src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=bbd3dd8989652c3ab7b9e5bd53d5db7d.png"
          />
          <image
            class="shrink-0 image_7"
            src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=df47ebd42125801292be7272770f505a.png"
          />
          <view class="flex-col flex-1 group_5">
            <text class="font_7">【非遗手工艺体验】纸笺加工技艺-流沙笺团扇制作体验</text>
            <view class="flex-row justify-between items-center section_7 mt-14">
              <view class="flex-col items-start">
                <text class="font_8">仿真丝团扇;上午场(09:30-12:00)</text>
                <text class="font_8 text_8 mt-6">预约日期：2024-10-15</text>
              </view>
              <image
                class="image_9"
                src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=c86722cdfe0aafd70ce1bdc9227561d6.png"
              />
            </view>
          </view>
        </view>
        <view class="flex-row justify-end items-center group_6 mt-16">
          <view class="flex-row items-center">
            <text class="font_9 text_9">138.</text>
            <image
              class="shrink-0 image_12"
              src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=0ea9293deedfe538187f9813efe15880.png"
            />
            <text class="font_10 text_10">00</text>
          </view>
          <view class="flex-row ml-83">
            <image
              class="image_10"
              src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=35c583f367baecfc803c6018dad7f951.png"
            />
            <view class="flex-col justify-start items-center text-wrapper_2 ml-2"><text class="font_6">1</text></view>
            <image
              class="image_11 ml-2"
              src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=db5f3531d9c85943afe86625bb8d6073.png"
            />
          </view>
        </view>
      </view>
    </view>
		</checkbox-group>
  </view>
  <view class="flex-row justify-between items-center section_8">
    <view class="flex-row items-center">
			<checkbox class="shrink-0 image_8 round red" :checked="allCheck" @tap="allChecked"/>
      <!-- <image
        class="shrink-0 image_8 image_13"
        src="https://ide.code.fun/api/image?token=6779d8c1797f850011f55ea9&name=3f81d5886d1e216ce7cc53687e0c5499.png"
      /> -->
      <text class="font_2 text_11 ml-9">全选</text>
    </view>
    <view class="flex-row items-center">
      <text class="font_2 text_12">合计：{{ totalPrice }}元</text>
      <view class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-7">
        <text class="font_4 text_13" @click="editOrSettle">{{ stateText.bottomBtn }}</text>
      </view>
    </view>
  </view>
</view>
</template>

<script setup>
import { ref , onMounted , toRaw} from 'vue'
import { onShow , onLoad } from "@dcloudio/uni-app";
import { baseUrl , testUrl ,suiUrl} from '../../../api/request';
import * as math from 'mathjs'
const products = ref([])
const current = ref(1)  //用于判断是实体类商品还是服务类商品
const allCheck = ref(false)  //全选
const checkedData = ref([])  //选择的暂存保存数组
const totalPrice = ref(0) //总金额
const searchText = ref('')
const stateText = ref({
	topBtn: '编辑',
	bottomBtn: '去结算'
})
onShow(()=>{
	getProductCart() //获取商品类
})
onLoad(()=>{
	getProductCart() //再获取一次实体类商品的列表
	getFonts()
})
//小程序刷新根据用户id获取购物车信息
const getProductCart = async ()=>{
	const res = await uni.request({
		url: baseUrl + '/cart/list',
		method: 'POST',
		header: {
			'cookie': wx.getStorageSync('cookie')
		}
	})
	console.log('res--->',res.data);
	if(res.data.code === 1) {
		products.value = res.data.data
		products.value.forEach((item)=>{
			item.checked = false
		})
	}
	console.log('products-->',products.value);
}
const deleteProduct = async (idArr) =>{  //删除商品
	const res = await uni.request({
		url: baseUrl + '/cart/delete',
		method: 'POST',
		data:  idArr ,
		header: {
			'cookie': wx.getStorageSync('cookie')
		}
	})
	console.log(res.data);
	if(res.data.code === 1) {
		// getProductCart() //重新获取购物车信息
		uni.reLaunch({
			url: '/pages/Shopping-cart/testproductmain/testproductmain'
		})
		totalPrice.value = 0
	}
}
const getServiceCart =()=>{
	console.log('获取服务类商品方法被触发');
}
//更改实体商品和服务类方法
const changeType = async (num)=>{
	current.value = num;
	if(num ===1 ) { //为一的时候就获取用户商品购物车
		
	}
}
//更改下划线
const getTextStyle = (num) => ({
		'border-bottom' : current.value === num ? '2px solid orange' : '2px solid  #ffffff'
});
//复选框绑定方法
const checkBoxChange =(event)=>{
	//如果选中的checkbox的value的数组长度和后端传过来的数组长度相等则为全选状态 allCheck为true
	console.log('length---->',event.detail.value.length);
	// console.log('product--->',products.value);
	if(event.detail.value.length == products.value.length) {
		allCheck.value = true
	} else {
		allCheck.value = false
	}
	checkedData.value = [] //每次都要重置一下
	totalPrice.value = 0;
	let count = 0; //用于记录checkedData不为null的个数
	console.log('event--->',event.detail);
	if(event.detail.value.length) {
		products.value[parseInt(event.detail.value)].checked = true;  //勾选
	} else {
		products.value.forEach((item)=>{
			item.checked = false
		})
	}
	//计算一下总金额
	for(let key in event.detail.value) {
		let temp = parseInt(event.detail.value[parseInt(key)]) //相当于商品数组下标
		computed(products.value[temp].cartGoodVO.price , products.value[temp].quantity)
	}
	event.detail.value.forEach((item)=>{
		products.value[parseInt(item)].checked = true
	})
  //然后假如checkboxGroup传过来的 detail.value中有某个id则把这些元素的checked属性置为true(选中状态)
	products.value.forEach((x)=>{
		event.detail.value.forEach((y)=>{
			if(x.value == y) {
				x.checked = true
			}
		})
	})
	event.detail.value.forEach((item)=>{  //将选中的商品信息赋值给checkedData
		console.log('products.value[parseInt(item)].goodId',products.value[parseInt(item)].goodId);
		if(products.value[parseInt(item)] !== null) {
			checkedData.value.push(products.value[parseInt(item)].id)
			// console.log(products.value[parseInt(item)].goodId);
			count += 1
		}
	})
	console.log('checkedData--->',checkedData.value);
	//将选中的数组保存在某一个ref中
	// checkedData.value = event.detail.value
	// console.log('checkedData--->',checkedData.value);
}
//全选方法
const allChecked = ()=>{
	allCheck.value = !allCheck.value
	totalPrice.value = 0
	if ( allCheck.value == true ) {
		products.value.forEach((item)=>{
			item.checked = true //将全部选项选上
			computed(item.cartGoodVO.price , item.quantity)
		})
		checkedData.value = products.value.map((item)=>( item.id ))
		console.log('checkedData--->',checkedData.value);
	} else {
		products.value.forEach((item)=>{
			item.checked = false  //将全部都取消选择
		})
	}
}
//减少商品
const decrease =(index , item)=>{  //item用于监测是否选中
	console.log('decrease,index-->',index);
	console.log('decrease,item-->',item);
	if(products.value[index].quantity > 1) {
		products.value[index].quantity -= 1
		if(item && products.value[index].quantity >= 1) {
			computed(-products.value[index].cartGoodVO.price, 1)
		}
	}
}
//增加商品的方法
const increase =(index , item) =>{  //item用于监测是否选中
	console.log('increase,index-->',index);
	console.log('increase,item-->',item);
	if(products.value[index].quantity < products.value[index].cartGoodVO.inventory) { 
		if(item && products.value[index].quantity <= products.value[index].cartGoodVO.inventory) {
			computed(products.value[index].cartGoodVO.price, 1)
		}
		products.value[index].quantity += 1
	}
}
//计算方法
const computed =( price , quantity )=>{
	totalPrice.value = math.round(totalPrice.value+price * quantity,2)
	return totalPrice.value
}
const jump_product =(gid)=>{
	uni.navigateTo({
		url:'../../../pages/store-home/ProductDetails/ProductDetails?gid=' + JSON.stringify(gid) 
	})
}
const editOrSettle = async ()=>{   //去结算或者删除状态方法
	// console.log('要传到订单详情页面的checked--->',checkedData.value);
	if(stateText.value.bottomBtn === '去结算') {
		if(checkedData.value.length === 0) {  //在没有勾选的时候禁止发请求
			return;
		}
		const res = await uni.request({
			url: baseUrl + '/cart/submit/error',
			method: 'POST',
			header: {
				'cookie': wx.getStorageSync('cookie')
			}
		})
		console.log(res.data);
		if(res.data.data.length != 0) {
			uni.showModal({
				title: '提示',
				content: '购物车商品发生改变，点击移除变化商品',
				showCancel: false,
				success: (e)=>{
					if(e.confirm) {
						// getProductCart() //重新获取购物车信息
						uni.reLaunch({
							url: '/pages/Shopping-cart/productmain/productmain'
						})
					}
				}
			})
		} else {
			uni.navigateTo({
				url: '/pages/order/product-waitpay/product-waitpay?cartInfo=' + JSON.stringify(checkedData.value)
			})
			checkedData.value.splice(0,checkedData.value.length)
		}
	} else {
		uni.showModal({
			title: '提示',
			content: '是否删除商品?',
			success: (e) => {
				if(e.confirm) {
					deleteProduct(checkedData.value)
				}
				else if(e.cancel)
					return;
			}
		})
	}
}
const changeState =()=>{   //修改购物车订单方法
	if(stateText.value.topBtn === '编辑') {
		stateText.value.topBtn = '完成',
		stateText.value.bottomBtn = '删除'
	} else {
		stateText.value.topBtn = '编辑',
		stateText.value.bottomBtn = '去结算'
	}
}
const productSearch = () =>{   //搜索框方法
	var arr = []
	products.value.forEach((item) => arr.push(item))
	console.log(123);
}
const getFonts = () => { //导入字体
	uni.loadFontFace({
		family: 'FangZhengFonts',
		source: `url("https://carbon2.obs.cn-north-4.myhuaweicloud.com/fonts/FangZhengFonts.TTF")`,
		success: (res) => {
			console.log('success', res);
		},
		fail: (err) => {
			console.log('err', err);
		}
	})
}
</script>

<style lang="scss" scoped>
.ml-17 {
  margin-left: 31.88rpx;
}
.ml-83 {
  margin-left: 155.63rpx;
}
.ml-9 {
  margin-left: 16.88rpx;
}
.ml-7 {
  margin-left: 13.13rpx;
}
.page {
  background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  // height: 100%;
	height: 100vh;
}
.section_2 {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
  padding: 28.13rpx 30.69rpx 18.75rpx;
  background-color: #fbdedf;
	z-index: 99;
}
.font {
  font-size: 30rpx;
  font-family: FangZhengFonts;
  line-height: 27.77rpx;
  color: #c35c5d;
}
.text {
  line-height: 28.24rpx;
}
.section_3 {
  padding: 0 15rpx;
  background-color: #ffffff;
  border-radius: 9.38rpx;
  height: 56.25rpx;
}
.image {
  width: 54.38rpx;
  height: 52.5rpx;
}
.section_1 {
  flex: 1 1 0;
  margin-right: 7.5rpx;
}
.text_2 {
  margin-right: 4.46rpx;
}
.section_5 {
	position: fixed;
	left: 0;
	right: 0;
	top: 102rpx;
  padding: 0 121.88rpx;
  background-color: #ffffff;
	z-index: 99;
}
.group {
  padding: 27.06rpx 4.33rpx 23.08rpx 10.89rpx;
	z-index: 1;
}
.font_2 {
  font-size: 30rpx;
  font-family: FangZhengFonts;
  line-height: 27.77rpx;
  color: #323232;
}
.text_3 {
  line-height: 27.9rpx;
}
.text_4 {
  line-height: 28.71rpx;
}
.section_6 {
  background-color: #fb8b05;
  width: 112.5rpx;
  height: 5.63rpx;
}
.list {
  margin: 192rpx 24rpx 120rpx 24rpx;
}
.list-item:first-child {
  margin-top: 0;
}
.mt-14 {
	margin-top: 16rpx;
}
.section_10 {
  padding: 38.1rpx 31.52rpx 30.07rpx 27.31rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
}
.image_3 {
	transform: scale(0.7);
  width: 37.5rpx;
  height: 37.5rpx;
}
.image_2 {
  // margin-bottom: 8.7rpx;
  border-radius: 9.38rpx;
  width: 127.5rpx;
  height: 170.00rpx;
}
.group_2 {
  margin-left: 23.31rpx;
  margin-top: 2.33rpx;
}
.group_3 {
  padding: 0 9.49rpx;
}
.font_3 {
  font-size: 26.25rpx;
  font-family: FangZhengFonts;
  line-height: 25.01rpx;
  color: #323232;
}
.text_5 {
  line-height: 25.54rpx;
}
.font_4 {
  font-size: 33.75rpx;
  font-family: FangZhengFonts;
  line-height: 22.07rpx;
  color: #e79ea1;
}
.text_6 {
  margin-left: 24.19rpx;
  margin-bottom: 7.78rpx;
  line-height: 22.54rpx;
}
.image_6 {
  margin-left: -76.69rpx;
  width: 30rpx;
  height: 28.13rpx;
}
.font_5 {
  font-size: 26.25rpx;
  font-family: FangZhengFonts;
  line-height: 18.73rpx;
  color: #e79ea1;
}
.text_7 {
  margin-left: 61.44rpx;
  margin-bottom: 6.15rpx;
  line-height: 17.53rpx;
}
.image_4 {
  border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
  width: 45.21rpx;
  height: 48.13rpx;
}
.group_4 {
  margin-left: 3.77rpx;
}
.text-wrapper {
  padding: 14.74rpx 0 14.66rpx;
  background-color: #fbdedf;
  width: 58.41rpx;
  height: 48.13rpx;
}
.font_6 {
  font-size: 26.25rpx;
  font-family: Open Sans;
  line-height: 18.73rpx;
  color: #323232;
}
.image_5 {
  border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
  width: 45.21rpx;
  height: 48.13rpx;
}
.list-item_2 {
  padding: 22.01rpx 18.84rpx 33.75rpx;
  background-color: #ffffff;
  border-radius: 18.75rpx;
}
.image_8 {
	transform: scale(0.7);
  width: 37.5rpx;
  height: 37.5rpx;
}
.image_7 {
  margin-left: 39.79rpx;
  margin-top: 2.36rpx;
  width: 121.88rpx;
  height: 172.5rpx;
}
.group_5 {
  margin: 0 13.99rpx 7.5rpx 23.25rpx;
}
.font_7 {
  font-size: 26.25rpx;
  font-family: FangZhengFonts;
  line-height: 31.88rpx;
  color: #323233;
}
.section_7 {
  margin-right: 8.63rpx;
  padding: 11.1rpx 10.14rpx 14.25rpx;
  background-color: #fbdedf;
  border-radius: 9.38rpx;
}
.font_8 {
  font-size: 22.5rpx;
  font-family: FangZhengFonts;
  line-height: 22.07rpx;
  color: #6b6e72;
}
.text_8 {
  line-height: 20.83rpx;
}
.image_9 {
  margin-right: 5.06rpx;
  width: 22.5rpx;
  height: 22.5rpx;
}
.group_6 {
  padding: 0 22.61rpx;
}
.font_9 {
  font-size: 33.75rpx;
  font-family: Open Sans;
  line-height: 25.01rpx;
  font-weight: 600;
  color: #e79ea1;
}
.text_9 {
  margin-left: 25.14rpx;
  line-height: 24.88rpx;
}
.image_12 {
  margin-left: -90.77rpx;
  width: 30rpx;
  height: 26.25rpx;
}
.font_10 {
  font-size: 26.25rpx;
  font-family: Open Sans;
  line-height: 18.73rpx;
  font-weight: 600;
  color: #e79ea1;
}
.text_10 {
  margin-left: 61.61rpx;
  line-height: 19.29rpx;
}
.image_10 {
  border-radius: 9.38rpx 0rpx 0rpx 9.38rpx;
  width: 45.24rpx;
  height: 45rpx;
}
.text-wrapper_2 {
  padding: 12.39rpx 0 13.88rpx;
  background-color: #fbdedf;
  width: 58.42rpx;
  height: 45rpx;
}
.image_11 {
  border-radius: 0rpx 9.38rpx 9.38rpx 0rpx;
  width: 45.24rpx;
  height: 45rpx;
}
.section_8 {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
  padding: 20.63rpx 20.63rpx 15rpx;
  background-color: #ffffff;
}
.image_13 {
  margin-top: 0;
}
.text_11 {
  line-height: 27.3rpx;
}
.text_12 {
  color: #000000;
}
.text-wrapper_3 {
  padding: 20.93rpx 0 25.24rpx;
  background-color: #e79ea1;
  border-radius: 75rpx;
  width: 219.38rpx;
  height: 76.88rpx;
}
.text_13 {
  color: #ffffff;
  line-height: 30.71rpx;
}
@import url(../../../common/css/global.css);
</style>