Ver Fonte

购物车

xiaohaizhao há 2 anos atrás
pai
commit
ccc8984617

+ 311 - 0
pages/index/collect/index.js

@@ -0,0 +1,311 @@
+const _Http = getApp().globalData.http,
+	currency = require("../../../utils/currency"),
+	CNY = sum => currency(sum, {
+		symbol: "¥",
+		precision: 2
+	}).format();
+let downCount = {};
+
+Component({
+	options: {
+		addGlobalClass: true,
+	},
+	properties: {},
+	data: {
+		list: [],
+		results: [], //选中结果
+		sa_brandid: null, //当前选中品牌id
+		classList: [], //生成订单时所选
+		sum: 0, //价格合
+	},
+	methods: {
+		init() {
+			this.getList()
+		},
+		/* 获取列表 */
+		getList() {
+			_Http.basic({
+				"id": 20220924095302,
+				"content": {
+					nocache: true,
+					istool: 0,
+					"pageNumber": 1,
+					"pageSize": getApp().globalData.collectCount + 5,
+					"where": {
+						"condition": ""
+					}
+				}
+			}).then(res => {
+				console.log('购物车列表', res)
+				if (res.msg != '成功') return wx.showToast({
+					title: res.msg,
+					icon: "none"
+				})
+				let list = [],
+					allBrandList = [];
+				list = res.data.map(v => {
+					v.showPrice = CNY(v.oldprice)
+					let obj = allBrandList.find(s => s.sa_brandid == v.sa_brandid);
+					if (obj) {
+						obj.results.push(v.sa_shoppingcartid)
+					} else {
+						allBrandList.push({
+							brandname: v.brandname,
+							sa_brandid: v.sa_brandid,
+							results: [v.sa_shoppingcartid],
+						})
+					}
+					return v
+				});
+				this.setData({
+					list,
+					allBrandList,
+					isGet: true
+				});
+				if (wx.getStorageSync('shopping')) {
+					this.setData({
+						...wx.getStorageSync('shopping')
+					});
+					this.computeSum();
+				}
+			})
+		},
+		clickBut(e) {
+			this.data.classList.length >= 2 ? wx.showToast({
+				title: '请选择订单领域(订单只允许同品牌/同领域的商品)',
+				icon: "none",
+				duration: 3000
+			}) : this.handleSubmit(0);
+		},
+		/* 提交 */
+		submit(e) {
+			this.handleSubmit(e.detail.value)
+		},
+		handleSubmit(index) {
+			let data = this.data.classList[index];
+			_Http.basic({
+				"id": 20221128183202,
+				"content": {
+					istool: 0,
+					"tradefield": data.type, //必选
+					"items": data.list.map(v => {
+						return {
+							"sa_orderitemsid": 0,
+							"itemid": v.itemid,
+							"sa_brandid": v.sa_brandid,
+							"qty": v.qty
+						}
+					})
+				}
+			}).then(res => {
+				console.log("转化订单", res)
+				if (res.msg != '成功') return wx.showToast({
+					title: res.msg,
+					icon: "none"
+				});
+				getApp().globalData.getCollectCount()
+				wx.showModal({
+					title: '提示',
+					content: '生成成功!是否立即前往',
+					complete: (s) => {
+						if (s.confirm) {
+							wx.navigateTo({
+								url: '/packageA/orderForm/detail?id=' + res.data.sa_orderid,
+							})
+						}
+					}
+				});
+				this.getList();
+			})
+		},
+		/* 是否选择全部 */
+		setIsAll() {
+			let isAll = this.data.isAll;
+			//取消全选
+			if (isAll) {
+				this.setData({
+					sa_brandid: null,
+					results: []
+				})
+			} else {
+				//已选品牌产品情况下
+				if (this.data.sa_brandid) {
+					let obj = this.data.allBrandList.find(v => v.sa_brandid == this.data.sa_brandid)
+					this.setData({
+						results: obj.results
+					})
+				} else {
+					if (this.data.allBrandList.length == 0) return;
+					this.setData({
+						sa_brandid: this.data.allBrandList[0].sa_brandid,
+						results: this.data.allBrandList[0].results
+					})
+				}
+			};
+			this.computeSum();
+		},
+		/* 切换选中项 */
+		changeResults(e, my = false) {
+			const {
+				item
+			} = my ? e : e.currentTarget.dataset;
+			let results = this.data.results,
+				sa_brandid = this.data.sa_brandid;
+			if (sa_brandid && sa_brandid != item.sa_brandid) return;
+			if (results.length == 0) {
+				results.push(item.sa_shoppingcartid);
+				sa_brandid = item.sa_brandid;
+			} else {
+				let index = results.findIndex(v => v == item.sa_shoppingcartid)
+				if (index == -1) {
+					results.push(item.sa_shoppingcartid);
+				} else {
+					results.splice(index, 1);
+					if (results.length == 0) sa_brandid = null;
+				}
+			};
+			this.setData({
+				results,
+				sa_brandid
+			})
+			this.computeSum();
+		},
+		/* 计算总价/产品领域分类 */
+		computeSum() {
+			let results = this.data.results,
+				sum = 0,
+				classList = [];
+			if (results.length) results = results.filter(v => {
+				let item = this.data.list.find(va => va.sa_shoppingcartid == v);
+				if (item) {
+					sum = currency(sum).add(currency(item.qty).multiply(item.oldprice)).value;
+					/* 领域分类 */
+					let index = classList.findIndex(value => value.type == item.tradefield_shoppingcart);
+					if (index == -1) {
+						classList.push({
+							type: item.tradefield_shoppingcart,
+							list: [item],
+							name: item.tradefield_shoppingcart + "(1件商品)"
+						})
+					} else {
+						classList[index].list.push(item)
+						classList[index].name = classList[index].type + `(${classList[index].list.length}件商品)`
+					}
+				};
+				return item
+			});
+			let sa_brandid = results.length ? this.data.sa_brandid : null;
+			wx.setStorageSync('shopping', {
+				results,
+				sa_brandid
+			})
+			let isAll = false;
+			if (sa_brandid) {
+				let brand = this.data.allBrandList.find(v => v.sa_brandid == sa_brandid)
+				isAll = brand.results.length == results.length
+			}
+			console.log(results)
+			this.setData({
+				sum: CNY(sum),
+				isAll,
+				results,
+				sa_brandid,
+				classList
+			});
+		},
+		/* 删除产品 */
+		deteleItem(e) {
+			const {
+				item
+			} = e.currentTarget.dataset;
+			_Http.basic({
+				"id": 20220924095202,
+				"content": {
+					"sa_shoppingcartids": [item.sa_shoppingcartid]
+				}
+			}).then(res => {
+				if (res.msg != '成功') return wx.showToast({
+					title: res.msg,
+					icon: "none"
+				});
+				this.setData({
+					list: this.data.list.filter(v => v.sa_shoppingcartid != item.sa_shoppingcartid)
+				})
+				if (this.data.results.some(v => v == item.sa_shoppingcartid)) this.changeResults({
+					item
+				}, true);
+				getApp().globalData.getCollectCount()
+			})
+		},
+		/* 输入框失去焦点调整数量 */
+		inputBlur(e) {
+			const {
+				index
+			} = e.currentTarget.dataset;
+			let item = this.data.list[index];
+			let qty = 0;
+			if (item.orderminqty > e.detail.value) {
+				wx.showToast({
+					title: '输入数量低于最低起订量!',
+					icon: "none"
+				})
+				qty = item.orderminqty;
+			} else if (item.orderminqty < e.detail.value) {
+				var currencyRounding = value => currency(value, {
+					increment: item.orderaddqty
+				});
+				qty = currency(currencyRounding(currency(e.detail.value).subtract(item.orderminqty)).format()).add(item.orderminqty).value;
+
+			} else {
+				qty = e.detail.value;
+			}
+			this.setData({
+				[`list[${index}].qty`]: 0
+			});
+			this.setData({
+				[`list[${index}].qty`]: qty
+			});
+			this.computeSum();
+			clearTimeout(downCount['count' + index])
+			downCount['count' + index] = setTimeout(() => {
+				_Http.basic({
+					"id": 20220924104302,
+					"content": {
+						"sa_shoppingcartid": item.sa_shoppingcartid,
+						"qty": item.qty
+					},
+				}, false).then(res => {
+					console.log("修改数量", res)
+				})
+			}, 2000)
+		},
+		/* 步进器调整数量 */
+		stepperChange(e) {
+			const {
+				index
+			} = e.currentTarget.dataset;
+			let item = this.data.list[index];
+			if (e.type == 'plus') {
+				item.qty += item.orderaddqty
+			} else {
+				item.qty -= item.orderaddqty
+			}
+			this.setData({
+				[`list[${index}]`]: item
+			})
+			this.computeSum();
+			clearTimeout(downCount['count' + index])
+			downCount['count' + index] = setTimeout(() => {
+				_Http.basic({
+					"id": 20220924104302,
+					"content": {
+						"sa_shoppingcartid": item.sa_shoppingcartid,
+						"qty": item.qty
+					},
+				}, false).then(res => {
+					console.log("修改数量", res)
+				})
+			}, 2000)
+		}
+	}
+})

+ 7 - 0
pages/index/collect/index.json

@@ -0,0 +1,7 @@
+{
+	"component": true,
+	"usingComponents": {
+		"van-checkbox": "@vant/weapp/checkbox/index",
+		"van-stepper": "@vant/weapp/stepper/index"
+	}
+}

+ 173 - 0
pages/index/collect/index.scss

@@ -0,0 +1,173 @@
+page {
+	padding-bottom: calc(230rpx + env(safe-area-inset-bottom) / 2) !important;
+}
+
+.item-box {
+	position: relative;
+	width: 100vw;
+	background-color: #fff;
+	margin-bottom: 20rpx;
+	padding-bottom: 20rpx;
+	box-sizing: border-box;
+
+	.top {
+		display: flex;
+		padding: 20rpx 30rpx 10rpx;
+		box-sizing: border-box;
+
+
+		.image {
+			width: 128rpx;
+			height: 128rpx;
+			border-radius: 16rpx;
+			overflow: hidden;
+			margin-right: 20rpx;
+			flex-shrink: 0;
+		}
+
+		.content {
+			position: relative;
+			flex: 1;
+
+			.title {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				height: 40rpx;
+
+				.line-1 {
+					display: block;
+					width: 500rpx;
+					font-size: 28rpx;
+					font-family: PingFang SC-Semibold, PingFang SC;
+					font-weight: 600;
+					color: #333333;
+				}
+
+				.iconfont {
+					position: absolute;
+					width: 60rpx;
+					height: 60rpx;
+					line-height: 60rpx;
+					right: 0;
+					flex-shrink: 0;
+				}
+			}
+
+			.exp {
+				line-height: 34rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC-Regular, PingFang SC;
+				color: #999999;
+				margin-top: 8rpx;
+			}
+
+			.price {
+				position: absolute;
+				font-size: 28rpx;
+				font-weight: 600;
+				color: #FF3B30;
+				bottom: 0rpx;
+				right: 10rpx;
+			}
+		}
+
+	}
+
+	.bottom {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 58rpx;
+		padding: 0 30rpx;
+		box-sizing: border-box;
+		margin-top: 12rpx;
+
+		.check {
+			display: flex;
+			align-items: center;
+			height: 100%;
+			width: 380rpx;
+
+			.label-class {
+				font-size: 24rpx;
+				font-family: PingFang SC-Regular, PingFang SC;
+				color: #999999;
+				margin-left: -6rpx;
+			}
+		}
+
+		.input-class {
+			width: 120rpx;
+		}
+	}
+}
+
+.footer-box {
+	position: fixed;
+	bottom: 0;
+	padding: 0;
+	height: calc(216rpx + env(safe-area-inset-bottom) / 2);
+	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
+	z-index: 99;
+
+	.footer {
+		width: 100vw;
+		min-height: 130rpx;
+		z-index: 999;
+		display: flex;
+		justify-content: space-between;
+		padding: 0 30rpx;
+		box-sizing: border-box;
+		background-color: #fff;
+		box-shadow: rgba(0, 0, 0, 0.15) 0px 5rpx 15rpx 0px;
+
+
+		.left {
+			flex: 1;
+			color: #333333;
+
+			.selected {
+				font-size: 24rpx;
+				color: #999;
+			}
+
+			.sum {
+				height: 40rpx;
+				line-height: 40rpx;
+				font-size: 28rpx;
+				font-family: PingFang SC-Medium, PingFang SC;
+				font-weight: 500;
+				margin-top: 10rpx;
+
+				text {
+					color: #FF3B30;
+				}
+			}
+
+			.transport {
+				height: 34rpx;
+				line-height: 34rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC-Regular, PingFang SC;
+				margin-top: 8rpx;
+
+				text {
+					color: #FF3B30;
+				}
+			}
+		}
+
+		.but {
+			width: 230rpx;
+			height: 90rpx;
+			background: #3874F6;
+			border-radius: 16rpx;
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #FFFFFF;
+			margin-top: 10rpx;
+		}
+	}
+
+}

+ 61 - 0
pages/index/collect/index.wxml

@@ -0,0 +1,61 @@
+<scroll-view scroll-y class="scrollPage">
+	<view url="#" wx:for="{{list}}" wx:key="itemid" class="item-box">
+		<view class="top" bindtap="changeResults" data-item="{{item}}">
+			<view class="image">
+				<van-image width="100%" height="100%" fit="cover" src="{{item.attinfos[0].subfiles[0].url||item.attinfos[0].url||item.cover}}" use-loading-slot use-error-slot lazy-load>
+					<van-loading slot="loading" type="spinner" size="20" vertical />
+					<text slot="error">加载失败</text>
+				</van-image>
+			</view>
+			<view class="content">
+				<view class="title">
+					<text class="line-1">{{item.itemname}}</text>
+					<text class="iconfont icon-guanlian-shanchu" catchtap="deteleItem" data-item="{{item}}" />
+				</view>
+				<view class="exp">编号:{{item.itemno}}</view>
+				<view class="exp">规格:{{item.spec ||" --"}}</view>
+				<view class="exp">型号:{{item.model ||" --"}}</view>
+				<view class="exp">品牌:{{item.brandname ||" --"}}</view>
+				<view class="exp">领域:{{item.tradefield_shoppingcart ||" --"}}</view>
+				<view class="price">{{item.showPrice}}/{{item.unitname}}</view>
+			</view>
+		</view>
+		<view class="bottom">
+			<view class="check" bindtap="changeResults" data-item="{{item}}">
+				<van-checkbox shape='square' disabled="{{sa_brandid && sa_brandid!=item.sa_brandid}}" icon-size='24rpx' label-class='label-class' value="{{ decide.checked(item.sa_shoppingcartid,results) }}" bind:change="onChange">
+					起订量:{{item.orderminqty}},增减量:{{item.orderaddqty}}
+				</van-checkbox>
+			</view>
+			<van-stepper value="{{ item.qty }}" min="{{item.orderminqty}}" step="{{item.orderaddqty}}" input-class='input-class' data-index="{{index}}" bind:minus='stepperChange' bind:plus='stepperChange' bind:blur='inputBlur' />
+		</view>
+	</view>
+	<Yl_Empty wx:if="{{list.length === 0}}" />
+	<view class="footer-box">
+		<view class="footer">
+			<view class="left">
+				<view style="margin-top: 8rpx;">
+					<van-checkbox icon-size="26rpx" shape='square' value="{{ isAll }}" bind:change="setIsAll">全选 <text class="selected">已选{{results.length}}件</text></van-checkbox>
+				</view>
+				<view class="sum">
+					合计:<text>{{sum}}</text>
+				</view>
+				<view class="transport">
+					{{logistics}}
+				</view>
+			</view>
+			<picker wx:if="{{classList.length>=2}}" range='{{classList}}' range-key='name' disabled='{{!results.length}}' bindchange="submit">
+				<van-button custom-class='but' disabled='{{!results.length}}' bind:click="clickBut">生成订单</van-button>
+			</picker>
+			<van-button wx:else custom-class='but' disabled='{{!results.length}}' bind:click="clickBut">生成订单</van-button>
+		</view>
+	</view>
+	<wxs module="decide">
+		module.exports = {
+			checked: function (id, list) {
+				return list.some(function (v) {
+					return v == id
+				});
+			}
+		}
+	</wxs>
+</scroll-view>