购物车

common/css/font-icon.css

@@ -2,9 +2,9 @@
   font-family: "iconfont"; /* Project id 3674157 */
   /* Color fonts */
   src: 
-       url('//at.alicdn.com/t/c/font_3674157_4egmlcp9c8w.woff2?t=1664261897033') format('woff2'),
-       url('//at.alicdn.com/t/c/font_3674157_4egmlcp9c8w.woff?t=1664261897033') format('woff'),
-       url('//at.alicdn.com/t/c/font_3674157_4egmlcp9c8w.ttf?t=1664261897033') format('truetype');
+       url('//at.alicdn.com/t/c/font_3674157_s06nuze3vmg.woff2?t=1664269015349') format('woff2'),
+       url('//at.alicdn.com/t/c/font_3674157_s06nuze3vmg.woff?t=1664269015349') format('woff'),
+       url('//at.alicdn.com/t/c/font_3674157_s06nuze3vmg.ttf?t=1664269015349') format('truetype');
 }
 
 .iconfont {
@@ -15,6 +15,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shangjiantou:before {
+  content: "\e603";
+}
+
+.icon-xiajiantou:before {
+  content: "\e604";
+}
+
+.icon-shangjiantou-copy:before {
+  content: "\e714";
+}
+
+.icon-xiajiantou-copy:before {
+  content: "\e715";
+}
+
+.icon-del-copy:before {
+  content: "\e716";
+}
+
 .icon-del:before {
   content: "\e616";
 }
@@ -54,4 +74,3 @@
 .icon-daipinglun:before {
   content: "\e602";
 }
-

pages/market/index.vue

@@ -1,19 +1,494 @@
 <template>
-	<mobile-frame>
-		首页
+	<mobile-frame :frameStyle="frameStyle" @toPath="toPath">
+		<view class="main">
+			<view class="top" v-if="list.length !=0">
+				<view class="text_1">
+					<checkbox class="checkbox" @click="selectAll(false)" :checked="isAll">全选</checkbox>
+				</view>
+				<view class="text_2" v-if="num==0" @click="edit(1)">编辑</view>
+				<view class="text_2" v-if="num==1" @click="edit(0)">完成</view>
+			</view>
+			<view class="one" v-if="!user._id">
+				<view class="logo">
+					<text class="iconfont icon-gouwuche"></text>
+				</view>
+				<view class="one_1">
+					您还没有登录
+				</view>
+				<view class="btn">
+					<button type="primary" size="mini" @click="toCommon('/pages/login/index')">去登录</button>
+				</view>
+			</view>
+			<view class="one" v-if="list.length==0">
+				<view class="logo">
+					<text class="iconfont icon-gouwuche"></text>
+				</view>
+				<view class="one_1">
+					购物车空空如也~
+				</view>
+				<view class="btn">
+					<button type="primary" size="mini" @click="toCommon('/pages/home/index')">去逛逛</button>
+				</view>
+			</view>
+			<view class="two">
+				<scroll-view scroll-y="true" class="scroll-view">
+					<view class="list-scroll-view">
+						<checkbox-group name="checkbox" @change="marketChange">
+							<view class="lists" v-for="(item, index) in list" :key="index">
+								<view class="list">
+									<view class="title">
+										<checkbox :value="item.id" :checked="item.check">
+											{{item.title}}
+										</checkbox>
+									</view>
+									<checkbox-group name="checkbox" @change="goodsChange">
+										<view class="content" v-for="(item, indexs) in item.goods" :key="indexs">
+											<view class="box">
+												<checkbox :value="item.id" :checked="item.check" />
+											</view>
+											<view class="img">
+												<image src="../../static/logo.png"></image>
+											</view>
+											<view class=" one_1" v-if="num==0">
+												<view class="name">{{item.name}}</view>
+												<view class="info">
+													<view class="title_1" v-if="item.kg">
+														<text>规格:{{item.kg}}</text>
+													</view>
+												</view>
+											</view>
+											<view class="money" v-if="num==0">
+												<view>¥{{item.money}}</view>
+												<view>x{{item.num}}</view>
+											</view>
+											<view class="num" v-if="num==1">
+												<uni-number-box @change="changeValue(item)" name="num" value="item"
+													min="1" v-model="item.num" />
+											</view>
+											<view class="del" v-if="num==1">
+												<text class="iconfont icon-del-copy" @click="toDel(item)"></text>
+											</view>
+										</view>
+									</checkbox-group>
+								</view>
+							</view>
+						</checkbox-group>
+					</view>
+				</scroll-view>
+			</view>
+			<view class="foot" v-if="list.length !=0">
+				<view class="total">总价：<text>￥{{totalMoney}}(不含运费)</text></view>
+				<view class="btn">
+					<button type="primary" size="mini" @click="toSettle()" v-if="num==0">提交订单</button>
+					<button type="primary" size="mini" @click="toDel()" v-if="num==1">删除</button>
+				</view>
+			</view>
+		</view>
 	</mobile-frame>
 </template>
 
 <script>
 	export default {
 		data() {
-			return {};
+			return {
+				frameStyle: {
+					useBar: true
+				},
+				user: {
+					_id: '001'
+				},
+				list: [{
+					id: '001',
+					title: '商品1店铺',
+					goods: [{
+						id: '00001',
+						name: '商品商品商品商品商品1',
+						money: 50.00,
+						num: 2,
+						kg: '1.5L',
+					}, {
+						id: '00002',
+						name: '商品商品商品商品商品2',
+						money: 150.00,
+						num: 2,
+						kg: '13.5L',
+					}, ]
+				}, {
+					id: '002',
+					title: '商品1店铺',
+					goods: [{
+						id: '00003',
+						name: '商品商品商品商品商品1',
+						money: 50.00,
+						num: 2,
+						kg: '1.5L',
+					}, {
+						id: '00004',
+						name: '商品商品商品商品商品2',
+						money: 150.00,
+						num: 2,
+						kg: '13.5L',
+					}, ]
+				}, ],
+				isAll: false,
+				// 编辑/完成按钮传的数字
+				num: 0,
+				totalMoney: 0,
+			};
 		},
 		onShow: function() {},
-		methods: {}
+		methods: {
+			// 公共跳转
+			toCommon(route, e) {
+				const that = this;
+				uni.navigateTo({
+					url: `${route}?id=${e && e._id ? e._id : ''}`
+				})
+			},
+			toPath(e) {
+				if (e && e.route) uni.redirectTo({
+					url: `/${e.route}`
+				})
+			},
+			// 转换金额
+			showMoney(money) {
+				const that = this;
+				let moneys = `${money}`.split(".");
+				if (moneys.length == 1) {
+					money = money + ".00";
+				} else if (moneys.length == 2) {
+					money = money + "0";
+				}
+				return money;
+			},
+			// 编辑
+			edit(num) {
+				const that = this;
+				that.$set(that, `num`, num)
+			},
+			//全选
+			selectAll(e) {
+				const that = this;
+				const list = that.list;
+				const isAll = that.isAll;
+				let data = [];
+				for (const val of list) {
+					let a = isAll ? false : true;
+					val.check = a;
+					for (let s of val.goods) {
+						s.check = a
+					}
+					data.push(val);
+				}
+				that.$set(that, `list`, data)
+				// 计算总额
+				that.countMoney();
+				// 赋值是否全选
+				that.$set(that, `isAll`, isAll ? false : true)
+			},
+			// 选择店铺
+			marketChange(e) {
+				const that = this;
+				const list = that.list;
+				const {
+					value
+				} = e.detail;
+				let data = [];
+				for (const p1 of list) {
+					let p2 = value.find((i) => i == p1.id);
+					let a = p2 ? true : false;
+					p1.check = a;
+					for (let s of p1.goods) {
+						s.check = a
+					}
+					data.push(p1);
+				}
+				that.$set(that, `list`, data)
+				// 计算总额
+				that.countMoney();
+			},
+			//选择商品
+			goodsChange(e) {
+				const that = this;
+				const list = that.list;
+				const {
+					value
+				} = e.detail;
+				let data = [];
+				console.log(value);
+				console.log(list);
+				let shop = list.find(f => f.goods.find(i => value.find(s => s == i.id)))
+				console.log(shop);
+				for (let val of shop.goods) {
+					let p2 = value.find((i) => i == val.id);
+					if (p2) val.check = true;
+					else val.check = false;
+				}
+				// 计算总额
+				that.countMoney();
+			},
+			// 加减商品数量
+			changeValue(value) {
+				const that = this;
+				const list = that.list;
+				let data = [];
+				for (const val of list) {
+					for (let s of val.goods) {
+						if (s.id == value.id) {
+							s.num = value.num
+						}
+					}
+				}
+				// 计算总额
+				that.countMoney();
+			},
+			toDel(e) {
+				const that = this;
+				const list = that.list;
+				let shop = list.find(f => f.goods.find(i => i.check == true))
+				if (shop) {
+					uni.showModal({
+						title: '提示',
+						content: '确认要删除这些商品吗？',
+						success: async function(res) {
+							if (res.confirm) {}
+						}
+					});
+				} else if (e.id) {
+					uni.showModal({
+						title: '提示',
+						content: '是否确认删除该商品',
+						success: async function(res) {
+							if (res.confirm) {}
+						}
+					});
+				} else {
+					uni.showModal({
+						title: '提示',
+						content: '请选择要删除的商品',
+						success: async function(res) {
+							if (res.confirm) {}
+						}
+					});
+				}
+			},
+			// 计算总额
+			countMoney() {
+				const that = this;
+				const list = that.list;
+				let totalMoney = 0;
+				for (const val of list) {
+					for (let s of val.goods) {
+						if (s.check == true) {
+							let total = Number(s.money) * Number(s.num);
+							totalMoney += Number(total);
+						}
+					}
+				}
+				that.$set(that, `totalMoney`, totalMoney.toFixed(2))
+			},
+		}
 	}
 </script>
 
 <style lang="scss">
+	.main {
+		display: flex;
+		flex-direction: column;
+		width: 100vw;
+		height: 92vh;
+		background-color: var(--footColor);
 
+		.top {
+			display: flex;
+			flex-direction: row;
+			background-color: var(--mainColor);
+			height: 35px;
+			margin: 0 0 4px 0;
+			padding: 5px 4vw;
+
+			.text_1 {
+				flex-grow: 1;
+				line-height: 30px;
+			}
+
+			.text_2 {
+				line-height: 35px;
+			}
+		}
+
+		.one {
+			text-align: center;
+			margin: 2vw 0;
+
+			.logo {
+				margin: 10vw 0 2vw 0;
+
+				.iconfont {
+					font-size: 35vw;
+				}
+			}
+
+
+			.one_1 {
+				margin: 3vw 0;
+			}
+
+			button {
+				background-color: var(--ff0Color);
+			}
+		}
+
+		.two {
+			position: relative;
+			flex-grow: 1;
+			margin: 0 2vw;
+
+			.list {
+				background-color: var(--mainColor);
+				margin: 2vw 0 2vw 0;
+				padding: 2vw 3vw;
+				border-radius: 4px;
+
+				.title {
+					border-bottom: 1px solid var(--fcColor);
+					padding: 0 0 2vw 0;
+					font-size: var(--font18Size);
+				}
+
+				.content {
+					display: flex;
+					flex-direction: row;
+					padding: 3vw 0;
+					font-size: var(--font16Size);
+					border-bottom: 1px dashed var(--fcColor);
+
+					.box {
+						line-height: 20vw;
+					}
+
+					.img {
+						width: 20vw;
+						height: 20vw;
+						border-radius: 2vw;
+						border: 1px solid var(--fcColor);
+
+						image {
+							width: 20vw;
+							height: 20vw;
+						}
+					}
+
+					.one_1 {
+						margin: 2.5vw;
+						flex-grow: 1;
+
+						.info {
+							width: 100%;
+							display: flex;
+							flex-direction: row;
+
+							.title_1 {
+								font-size: 12px;
+								color: #666;
+								margin-top: 10px;
+
+								text {
+									background-color: #eee;
+									padding: 5px;
+								}
+							}
+						}
+					}
+
+					.money {
+						margin-top: 2vw;
+						text-align: right;
+						flex-grow: 1;
+					}
+
+					.num {
+						margin: 6vw 4vw;
+						font-size: 20px;
+					}
+
+					.del {
+						margin: 6vw 0;
+						text-align: right;
+						flex-grow: 1;
+					}
+				}
+			}
+		}
+
+		.foot {
+			background-color: var(--fffColor);
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			height: 44px;
+			padding: 0 0 0 6vw;
+			border-right: 1px solid var(--f99Color);
+
+			.total {
+				flex-grow: 1;
+				display: flex;
+				align-content: flex-end;
+				line-height: 40px;
+
+				text {
+					color: var(--ff0Color);
+				}
+			}
+
+			.btn {
+
+				button {
+					width: 30vw;
+					height: 44px;
+					line-height: 44px;
+					border-radius: 0px;
+					background-color: var(--ff0Color);
+					text-align: center;
+					font-weight: normal;
+					font-size: var(--font15Size);
+					color: var(--fffColor);
+				}
+			}
+		}
+
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+
+	// 复选框样式
+	checkbox .wx-checkbox-input {
+		width: 40rpx;
+		height: 40rpx;
+		border-radius: 50%;
+		border-color: var(--f99Color);
+		background-color: var(--mainColor);
+	}
+
+	// 复选框选中样式
+	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
+		border-color: var(--ff0Color);
+		background-color: var(--ff0Color);
+	}
+
+	// 复选框选中之后对号的样式
+	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
+		color: var(--fffColor);
+	}
 </style>