1

App.vue

@@ -82,5 +82,6 @@
 		--f0fColor: #0000ff;
 		--f08Color: #008000;
 		--f35BColor: #35BD7B;
+		--fFB1Color: #FB1438;
 	}
 </style>

pages/home/index.vue

@@ -1,7 +1,44 @@
 <template>
 	<mobile-frame :frameStyle="frameStyle" @toPath="toPath">
-		首页
-		<text class="iconfont icon-gouwuche"></text>
+		<view class="main">
+			<view class="zero one">
+				<input type="text" placeholder="搜索商品">
+			</view>
+			<view class="zero two">
+				<swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
+					<swiper-item class="list" v-for="(item,index) in bannerList" :key="index">
+						<image class="image" :src="item.url" mode=""></image>
+					</swiper-item>
+				</swiper>
+			</view>
+			<view class="zero thr">
+				<view class="list" v-for="(item,index) in btnList" :key="index">
+					<image class="image" :src="item.url" mode=""></image>
+					<view class="textOver name">
+						{{item.name}}
+					</view>
+				</view>
+			</view>
+			<view class="zero four">
+				<view class="recomList" v-for="(item,index) in recomList" :key="index">
+					<view class="title">
+						<text>{{item.title}}</text>
+						<text>{{item.titles}}</text>
+					</view>
+					<view class="market">
+						<view class="list" v-for="(tag,indexs) in item.list" :key="indexs">
+							<image class="image" :src="tag.url" mode=""></image>
+							<view class="name">
+								{{item.name}}
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="zero five">
+				数据列表
+			</view>
+		</view>
 	</mobile-frame>
 </template>
 
@@ -12,6 +49,130 @@
 				frameStyle: {
 					useBar: true
 				},
+				bannerList: [ // 轮播图
+					{
+						url: require('@/static/logo.png')
+					},
+					{
+						url: require('@/static/logo.png')
+					},
+					{
+						url: require('@/static/logo.png')
+					},
+					{
+						url: require('@/static/logo.png')
+					},
+				],
+				btnList: [ //功能按钮
+					{
+						name: '商品分类',
+						url: require('@/static/logo.png'),
+						route: ''
+					},
+					{
+						name: '首农专区',
+						url: require('@/static/logo.png'),
+						route: ''
+					},
+					{
+						name: '地方特产',
+						url: require('@/static/logo.png'),
+						route: ''
+					},
+					{
+						name: '进口食品',
+						url: require('@/static/logo.png'),
+						route: ''
+					},
+					{
+						name: '扶贫专区',
+						url: require('@/static/logo.png'),
+						route: ''
+					},
+					{
+						name: '自提门店',
+						url: require('@/static/logo.png'),
+						route: ''
+					},
+					{
+						name: '点到优选',
+						url: require('@/static/logo.png'),
+						route: ''
+					},
+					{
+						name: '活动专区',
+						url: require('@/static/logo.png'),
+						route: ''
+					},
+					{
+						name: '兑换中心',
+						url: require('@/static/logo.png'),
+						route: ''
+					},
+					{
+						name: '员工中心',
+						url: require('@/static/logo.png'),
+						route: ''
+					},
+				],
+				recomList: [ //推荐好物
+					{
+						title: '新品上架',
+						titles: '',
+						list: [ //产品
+							{
+								url: require('@/static/logo.png'),
+								name: '产品名称'
+							},
+							{
+								url: require('@/static/logo.png'),
+								name: '产品名称'
+							},
+						]
+					},
+					{
+						title: '发现好货',
+						titles: '热销爆款',
+						list: [ //产品
+							{
+								url: require('@/static/logo.png'),
+								name: '产品名称'
+							},
+							{
+								url: require('@/static/logo.png'),
+								name: '产品名称'
+							},
+						]
+					},
+					{
+						title: '首农精选',
+						titles: '居家常备',
+						list: [ //产品
+							{
+								url: require('@/static/logo.png'),
+								name: '产品名称'
+							},
+							{
+								url: require('@/static/logo.png'),
+								name: '产品名称'
+							},
+						]
+					},
+					{
+						title: '人气单品',
+						titles: '夏季畅销',
+						list: [ //产品
+							{
+								url: require('@/static/logo.png'),
+								name: '产品名称'
+							},
+							{
+								url: require('@/static/logo.png'),
+								name: '产品名称'
+							},
+						]
+					}
+				]
 			};
 		},
 		onShow: function() {},
@@ -26,5 +187,78 @@
 </script>
 
 <style lang="scss">
+	.main {
+		padding: 2vw;
 
+		.zero {
+			margin: 0 0 2vw 0;
+		}
+
+		.one {
+			background-color: var(--fFB1Color);
+			border-radius: 20px;
+			padding: 0 2vw;
+
+			input {
+				font-size: var(--font15Size);
+				color: var(--f85Color);
+				border-radius: 14px;
+				width: 100%;
+				padding: 1.5vw 0;
+			}
+
+		}
+
+		.two {
+			swiper {
+				height: 50vw;
+				border-radius: 5px;
+			}
+
+			.list {
+				border-radius: 5px;
+
+				.image {
+					width: 100%;
+					height: 100%;
+					border-radius: 5px;
+				}
+			}
+		}
+
+		.thr {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-around;
+			flex-wrap: wrap;
+
+			.list {
+				width: 17vw;
+				text-align: center;
+				margin: 0 0 2vw 0;
+
+				.image {
+					width: 100%;
+					height: 16vw;
+					margin: 0 0 1vw 0;
+				}
+
+				.name {
+					font-size: var(--font13Size);
+				}
+			}
+		}
+		.four{
+			.recomList{
+				.title{
+					
+				}
+				.market{
+					.list{
+						
+					}
+				}
+			}
+		}
+	}
 </style>

uni_modules/uni-number-box/changelog.md

@@ -0,0 +1,25 @@
+## 1.2.1（2021-11-22）
+- 修复 vue3中某些scss变量无法找到的问题
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-number-box](https://uniapp.dcloud.io/component/uniui/uni-number-box)
+## 1.1.2（2021-11-09） 
+- 新增 提供组件设计资源，组件样式调整
+## 1.1.1（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.1.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-04-20）
+- 修复 uni-number-box 浮点数运算不精确的 bug
+- 修复 uni-number-box change 事件触发不正确的 bug
+- 新增 uni-number-box v-model 双向绑定
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范
+
+## 1.0.7（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 支持 v-model
+- 新增 支持 focus、blur 事件
+- 新增 支持 PC 端

uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue

@@ -0,0 +1,220 @@
+<template>
+	<view class="uni-numbox">
+		<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text>
+		</view>
+		<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number"
+			v-model="inputValue" :style="{background, color}" />
+		<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}">
+			<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text>
+		</view>
+	</view>
+</template>
+<script>
+	/**
+	 * NumberBox 数字输入框
+	 * @description 带加减按钮的数字输入框
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=31
+	 * @property {Number} value 输入框当前值
+	 * @property {Number} min 最小值
+	 * @property {Number} max 最大值
+	 * @property {Number} step 每次点击改变的间隔大小
+	 * @property {String} background 背景色
+	 * @property {String} color 字体颜色（前景色）
+	 * @property {Boolean} disabled = [true|false] 是否为禁用状态
+	 * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
+	 * @event {Function} focus 输入框聚焦时触发的事件，参数为 event 对象
+	 * @event {Function} blur 输入框失焦时触发的事件，参数为 event 对象
+	 */
+
+	export default {
+		name: "UniNumberBox",
+		emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
+		props: {
+			value: {
+				type: [Number, String],
+				default: 1
+			},
+			modelValue: {
+				type: [Number, String],
+				default: 1
+			},
+			min: {
+				type: Number,
+				default: 0
+			},
+			max: {
+				type: Number,
+				default: 100
+			},
+			step: {
+				type: Number,
+				default: 1
+			},
+			background: {
+				type: String,
+				default: '#f5f5f5'
+			},
+			color: {
+				type: String,
+				default: '#333'
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				inputValue: 0
+			};
+		},
+		watch: {
+			value(val) {
+				this.inputValue = +val;
+			},
+			modelValue(val) {
+				this.inputValue = +val;
+			}
+		},
+		created() {
+			if (this.value === 1) {
+				this.inputValue = +this.modelValue;
+			}
+			if (this.modelValue === 1) {
+				this.inputValue = +this.value;
+			}
+		},
+		methods: {
+			_calcValue(type) {
+				if (this.disabled) {
+					return;
+				}
+				const scale = this._getDecimalScale();
+				let value = this.inputValue * scale;
+				let step = this.step * scale;
+				if (type === "minus") {
+					value -= step;
+					if (value < (this.min * scale)) {
+						return;
+					}
+					if (value > (this.max * scale)) {
+						value = this.max * scale
+					}
+				}
+
+				if (type === "plus") {
+					value += step;
+					if (value > (this.max * scale)) {
+						return;
+					}
+					if (value < (this.min * scale)) {
+						value = this.min * scale
+					}
+				}
+
+				this.inputValue = (value / scale).toFixed(String(scale).length - 1);
+				this.$emit("change", +this.inputValue);
+				// TODO vue2 兼容
+				this.$emit("input", +this.inputValue);
+				// TODO vue3 兼容
+				this.$emit("update:modelValue", +this.inputValue);
+			},
+			_getDecimalScale() {
+
+				let scale = 1;
+				// 浮点型
+				if (~~this.step !== this.step) {
+					scale = Math.pow(10, String(this.step).split(".")[1].length);
+				}
+				return scale;
+			},
+			_onBlur(event) {
+				this.$emit('blur', event)
+				let value = event.detail.value;
+				if (!value) {
+					// this.inputValue = 0;
+					return;
+				}
+				value = +value;
+				if (value > this.max) {
+					value = this.max;
+				} else if (value < this.min) {
+					value = this.min;
+				}
+				const scale = this._getDecimalScale();
+				this.inputValue = value.toFixed(String(scale).length - 1);
+				this.$emit("change", +this.inputValue);
+				this.$emit("input", +this.inputValue);
+			},
+			_onFocus(event) {
+				this.$emit('focus', event)
+			}
+		}
+	};
+</script>
+<style lang="scss" scoped>
+	$box-height: 26px;
+	$bg: #f5f5f5;
+	$br: 2px;
+	$color: #333;
+
+	.uni-numbox {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-numbox-btns {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		padding: 0 8px;
+		background-color: $bg;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-numbox__value {
+		margin: 0 2px;
+		background-color: $bg;
+		width: 40px;
+		height: $box-height;
+		text-align: center;
+		font-size: 14px;
+		border-left-width: 0;
+		border-right-width: 0;
+		color: $color;
+	}
+
+	.uni-numbox__minus {
+		border-top-left-radius: $br;
+		border-bottom-left-radius: $br;
+	}
+
+	.uni-numbox__plus {
+		border-top-right-radius: $br;
+		border-bottom-right-radius: $br;
+	}
+
+	.uni-numbox--text {
+		// fix nvue
+		line-height: 20px;
+
+		font-size: 20px;
+		font-weight: 300;
+		color: $color;
+	}
+
+	.uni-numbox .uni-numbox--disabled {
+		color: #c0c0c0 !important;
+		/* #ifdef H5 */
+		cursor: not-allowed;
+		/* #endif */
+	}
+</style>

uni_modules/uni-number-box/package.json

@@ -0,0 +1,85 @@
+{
+  "id": "uni-number-box",
+  "displayName": "uni-number-box 数字输入框",
+  "version": "1.2.1",
+  "description": "NumberBox 带加减按钮的数字输入框组件，用户可以控制每次点击增加的数值，支持小数。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "数字输入框"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-number-box/readme.md

@@ -0,0 +1,13 @@
+
+
+## NumberBox 数字输入框
+> **组件名：uni-number-box**
+> 代码块： `uNumberBox`
+
+
+带加减按钮的数字输入框。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-number-box)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+