商品详情

common/css/font-icon.css

@@ -1,85 +1,89 @@
 @font-face {
-	font-family: "iconfont";
-	/* Project id 3674157 */
-	/* Color fonts */
-	src:
-		url('https://at.alicdn.com/t/c/font_3674157_kx83v79ah2c.woff2?t=1664331158645') format('woff2'),
-		url('https://at.alicdn.com/t/c/font_3674157_kx83v79ah2c.woff?t=1664331158645') format('woff'),
-		url('https://at.alicdn.com/t/c/font_3674157_kx83v79ah2c.ttf?t=1664331158645') format('truetype');
+  font-family: "iconfont"; /* Project id 3674157 */
+  /* Color fonts */
+  src: 
+       url('//at.alicdn.com/t/c/font_3674157_y8kriusokui.woff2?t=1664350689943') format('woff2'),
+       url('//at.alicdn.com/t/c/font_3674157_y8kriusokui.woff?t=1664350689943') format('woff'),
+       url('//at.alicdn.com/t/c/font_3674157_y8kriusokui.ttf?t=1664350689943') format('truetype');
 }
 
 .iconfont {
-	font-family: "iconfont" !important;
-	font-size: 16px;
-	font-style: normal;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-shanchu:before {
+  content: "\e625";
 }
 
 .icon-dingweixiao:before {
-	content: "\e8ba";
+  content: "\e8ba";
 }
 
 .icon-shangdian:before {
-	content: "\e67a";
+  content: "\e67a";
 }
 
 .icon-shangjiantou:before {
-	content: "\e603";
+  content: "\e603";
 }
 
 .icon-xiajiantou:before {
-	content: "\e604";
+  content: "\e604";
 }
 
 .icon-shangjiantou-copy:before {
-	content: "\e714";
+  content: "\e714";
 }
 
 .icon-xiajiantou-copy:before {
-	content: "\e715";
+  content: "\e715";
 }
 
 .icon-del-copy:before {
-	content: "\e716";
+  content: "\e716";
 }
 
 .icon-del:before {
-	content: "\e616";
+  content: "\e616";
 }
 
 .icon-fanhuidingbu:before {
-	content: "\e713";
+  content: "\e713";
 }
 
 .icon-gouwuche:before {
-	content: "\e628";
+  content: "\e628";
 }
 
 .icon-dayufuhao:before {
-	content: "\e62b";
+  content: "\e62b";
 }
 
 .icon-daifahuo:before {
-	content: "\e600";
+  content: "\e600";
 }
 
 .icon-daifukuan:before {
-	content: "\e601";
+  content: "\e601";
 }
 
 .icon-shouhoufuwuicon:before {
-	content: "\e633";
+  content: "\e633";
 }
 
 .icon-geren2:before {
-	content: "\e6bc";
+  content: "\e6bc";
 }
 
 .icon-daishouhuo:before {
-	content: "\e612";
+  content: "\e612";
 }
 
 .icon-daipinglun:before {
-	content: "\e602";
+  content: "\e602";
 }
+

components/lxc-count/lxc-count.vue

@@ -0,0 +1,176 @@
+<template>
+	<view class="count-box" :class="status ? 'count-box-light' : 'count-box-gray'">
+		<view class="count-less count-pub" :class="[myValue <= min ? 'light' : 'gray']" @tap.stop="less"  @longpress='longpressLess' @touchend="handletouchend">-</view>
+		<view class="count-add count-pub" :class="[myValue >= max ? 'light' : 'gray']" @tap.stop="add" @longpress='longpressAdd' @touchend="handletouchend">+</view>
+		<input type="number" v-model="myValue" @focus="onFocus" @blur="onBlue" class="count-input"/>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return{
+				myValue: 0,
+				status: false,
+				timer: null
+			}
+		},
+		props: {
+			// 计数器中的值
+			value: {
+				type: Number,
+				default: 0
+			},
+			max: {
+				type: Number,
+				default: 10000
+			},
+			min: {
+				type: Number,
+				default: 0
+			},
+			// 点击当前数据的索引
+			index: {
+				type: Number
+			},
+			delayed: {
+				type: Number,
+				default: 200
+			}
+		},
+		created() {
+			this.myValue = this.value
+		},
+		watch:{
+			value(val) {
+				this.myValue = val
+			}
+		},
+		methods: {
+			onBlue() {
+				if(+this.myValue >= this.max) {
+					this.myValue = this.max
+					this.status = false
+				}else if(+this.myValue <= this.min) {
+					this.myValue = this.min
+					this.status = false
+				}else {
+					this.status = true
+					this.myValue = +this.myValue
+				}
+				if(!isNaN(this.myValue)) {
+					this.$emit('handleCount', this.myValue, this.index)
+				}else {
+					this.$emit('handleCount', 0, this.index)
+				}
+				
+			},
+			onFocus() {
+				this.status = true
+			},
+			add() {
+				this.addPublick()
+			},
+			addPublick() {
+				if(this.myValue >= this.max) {
+					this.status = false
+					this.myValue = this.max
+					clearInterval(this.timer)
+				}else {
+					this.status = true
+					this.myValue ++
+				}
+				this.$emit('handleCount', this.myValue, this.index)
+			},
+			longpressAdd() {
+				this.timer = setInterval(() => {
+					this.addPublick()
+				}, this.delayed)
+			},
+			less() {
+				this.lessPublick()
+			},
+			lessPublick() {
+				if(this.myValue <= this.min) {
+					clearInterval(this.timer)
+					this.status = false
+					this.myValue = this.min
+				}else {
+					this.status = true
+					this.myValue --
+				}
+				this.$emit('handleCount', this.myValue, this.index)
+			},
+			longpressLess() {
+				this.timer = setInterval(() => {
+					this.lessPublick()
+				}, this.delayed)
+			},
+			handletouchend() {
+				clearInterval(this.timer)
+			}
+		}
+	}
+</script>
+<style>
+	.gray{
+		background: #eef3f9;
+		color: #555555;
+	}
+	.light{
+		background: #f5f7fa;
+		color: #C8C7CC;
+	}
+	.count-box{
+		position: relative;
+		width: 220rpx;
+		height: 60rpx;
+		border-radius: 5px;
+		z-index: 1;
+		transition: all .3s;
+	}
+	.count-box-light{
+		border: 1px solid #C8C7CC;
+	}
+	.count-box-gray{
+		border: 1px solid #e4e4e4;
+	}
+	.count-pub{
+		position: absolute;
+		top: 50%;
+		transform: translate(0, -50%);
+		width: 60rpx;
+		height: 100%;
+		text-align: center;
+		font-size: 20px;
+	}
+	.count-less{
+		left: 0;
+		line-height: 26px;
+		border-right: 1px solid #C8C7CC;
+		background-color: #e4e4e4;
+		border-top-left-radius:4px;
+		border-bottom-left-radius:4px;
+	}
+	.count-add{
+		right: 0;
+		line-height: 26px;
+		border-left: 1px solid #C8C7CC;
+		background-color: #e4e4e4;
+		border-top-right-radius:4px;
+		border-bottom-right-radius:4px;
+	}
+	.count-input{
+		width: 110rpx;
+		height: 100%;
+		position: absolute;
+		top: 0;
+		left: 50%;
+		transform: translate(-50%, 0);
+		padding: 6rpx 10rpx;
+		box-sizing: border-box;
+		color: #808080;
+		font-size: 26rpx;
+		text-align: center;
+	}
+</style>

pages/home/index.vue

@@ -38,7 +38,7 @@
 				</view>
 				<view class="zero five">
 					<view class="list" v-for="(item,index) in marketList" :key="index"
-						@tap="toCommon('pagesHome/market/detail')">
+						@tap="toCommon('pagesHome/order/detail')">
 						<image class="image" :src="item.url" mode=""></image>
 						<view class="name">
 							{{item.name}}

pagesHome/order/detail.vue

@@ -1,27 +1,526 @@
 <template>
 	<mobile-frame>
-		<view class="main">
-			<view class="one">
-1
+		<scroll-view class="scrollView" scroll-with-animation :scroll-into-view="topItem" scroll-y="true"
+			@scroll="handleScroll">
+			<view class="main" id="top">
+				<view class="onemain">
+					<scroll-view scroll-y="true" class="scroll-view">
+						<view class="list-scroll-view">
+							<view class="one">
+								<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="two">
+								<view class="two_1">
+									<view class="money_1">
+										<text>¥</text>
+										<text>{{info.sell_money}}</text>
+									</view>
+									<view class="money_2">
+										<text>¥</text>
+										<text>{{info.flow_money}}</text>
+									</view>
+								</view>
+								<view class="two_2">{{info.name}}</view>
+								<view class="two_3">{{info.shot_brief}}</view>
+								<view class="two_4">
+									<text>运费{{info.freight}}元</text>
+									<text>{{info.send_time}}内发货</text>
+								</view>
+							</view>
+							<view class="thr">
+								<view class="thr_1" @click="toChoose">
+									<view class="title">选择规格</view>
+									<text class="iconfont icon-dayufuhao"></text>
+								</view>
+								<view class="thr_1">
+									<view class="title">商品评价({{info.comment||0}})</view>
+									<text class="iconfont icon-dayufuhao"></text>
+								</view>
+							</view>
+							<view class="four">
+								<view class="four_1">
+									<image class="image" :src="shop.file"></image>
+									<view class="other">
+										<view class="name">{{shop.name}}</view>
+										<view class="other_1"><text>宝贝数</text>{{shop.num}}</view>
+									</view>
+								</view>
+								<view class="four_2">
+									<view class="grade">商品：<text>{{shop.grade||'5.00'}}</text></view>|
+									<view class="grade">发货：<text>{{shop.grade||'5.00'}}</text></view>|
+									<view class="grade">服务：<text>{{shop.grade||'5.00'}}</text></view>
+								</view>
+								<view class="four_2">
+									<view class="btn">进入店铺</view>
+									<view class="btn">关注</view>
+								</view>
+							</view>
+							<view class="five">
+								<view class="five_1">{{info.brief}}</view>
+								<view class="five_2" v-for="(item,index) in bannerList" :key="index">
+									<image class="image" :src="item.url"></image>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+				<view class="foot">
+					<uni-goods-nav :options="options" :button-group="buttonGroup" @click="onClick"
+						@buttonClick="buttonClick" />
+				</view>
 			</view>
+		</scroll-view>
+		<view class="backTop" v-if="isShow==true">
+			<text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
 		</view>
+		<uni-popup ref="popup" background-color="#fff" type="bottom">
+			<view class="content">
+				<view class="one">
+					<image class="image" :src="info.file"></image>
+					<view class="other">
+						<view class="money">
+							<text>¥</text>
+							<text>{{info.sell_money}}</text>
+						</view>
+						<view class="other_1">
+							已选: <text>{{Selected}}</text>
+						</view>
+					</view>
+					<view class="btn">
+						<text @click="toClose" class="iconfont icon-shanchu"></text>
+					</view>
+				</view>
+				<view class="two">
+					<view class="two_1">口味</view>
+					<view class="two_2"><text>{{info.specs.flavor}}</text></view>
+				</view>
+				<view class="thr">
+					<text>数量:</text>
+					<view class="count">
+						<lxc-count @handleCount="toCount" :value="info.specs.num" :delayed="100">
+						</lxc-count>
+					</view>
+				</view>
+				<view @click="toBuy" class="button">立即购买</view>
+			</view>
+		</uni-popup>
 	</mobile-frame>
 </template>
 
 <script>
+	import lxcCount from '@/components/lxc-count/lxc-count.vue'
 	export default {
+		components: {
+			lxcCount
+		},
 		data() {
 			return {
-
+				options: [{
+						icon: 'shop',
+						text: '店铺',
+					},
+					{
+						icon: 'cart',
+						text: '购物车',
+					}, {
+						icon: 'chat',
+						text: '客服',
+					}
+				],
+				buttonGroup: [{
+						text: '加入购物车',
+						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
+						color: '#fff'
+					},
+					{
+						text: '立即购买',
+						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
+						color: '#fff'
+					}
+				],
+				bannerList: [ // 轮播图
+					{
+						url: require('@/static/test.png')
+					},
+					{
+						url: require('@/static/test.png')
+					},
+					{
+						url: require('@/static/test.png')
+					},
+					{
+						url: require('@/static/test.png')
+					},
+				],
+				// 详情
+				info: {
+					file: require('@/static/test.png'),
+					name: '大红门无淀粉果木熏火腿360g',
+					sell_money: 28.8,
+					flow_money: 35,
+					shot_brief: '果木熏制 传统技法',
+					freight: 8.00,
+					send_time: '24h',
+					specs: {
+						flavor: '果木熏火腿',
+						num: 0
+					},
+					brief: '简介',
+				},
+				shop: {
+					file: require('@/static/test.png'),
+					name: '官方自营店',
+					num: 2,
+					time: '2022-09-27'
+				},
+				// 已选
+				Selected: '',
+				// 是否显示返回顶部
+				isShow: false,
+				topItem: ''
 			};
 		},
 		onShow: function() {},
 		methods: {
-
+			onClick(e) {
+				uni.showToast({
+					title: `点击${e.content.text}`,
+					icon: 'none'
+				})
+			},
+			buttonClick(e) {
+				console.log(e)
+			},
+			// 选择规格
+			toChoose() {
+				this.$refs.popup.open();
+			},
+			// 关闭弹框
+			toClose() {
+				this.$refs.popup.close()
+			},
+			// 计数器
+			toCount(e) {
+				console.log(e);
+			},
+			// 立即购买
+			toBuy() {},
+			// 计算高度
+			handleScroll(e) {
+				const that = this;
+				let scrollTop = e.detail.scrollTop;
+				that.isShow = scrollTop > 500;
+				that.topItem = '';
+			},
+			// 返回顶部
+			backTop() {
+				const that = this;
+				that.topItem = 'top'
+			}
 		}
 	}
 </script>
 
 <style lang="scss">
+	.scrollView {
+		height: 100vh;
+	}
+
+	.main {
+		display: flex;
+		flex-direction: column;
+		width: 100vw;
+		height: 100vh;
+
+		.onemain {
+			position: relative;
+			flex-grow: 1;
+			background-color: var(--f9Color);
+
+			.one {
+				swiper {
+					height: 80vw;
+				}
+
+				.list {
+					border-radius: 5px;
+
+					.image {
+						width: 100%;
+						height: 100%;
+						border-radius: 5px;
+					}
+				}
+			}
+
+			.two {
+				padding: 0 0 2vw 0;
+				background-color: var(--mainColor);
+
+				.two_1 {
+					display: flex;
+					align-items: center;
+					border-bottom: 0.5vw solid var(--f9Color);
+					padding: 2vw;
+
+					.money_1 {
+						color: var(--ff0Color);
+
+						text {
+							margin: 0 1vw 0 0;
+						}
+
+						text:last-child {
+							font-size: var(--font20Szie);
+							font-weight: bold;
+						}
+					}
+
+					.money_2 {
+						text-decoration: line-through;
+						color: var(--f99Color);
+
+						text {
+							margin: 0 1vw 0 0;
+						}
+
+						text:last-child {
+							font-size: var(--font16Size);
+						}
+					}
+				}
+
+				.two_2 {
+					font-size: var(--font18Szie);
+					font-weight: bold;
+					padding: 1vw 2vw;
+				}
+
+				.two_3 {
+					font-size: var(--font16Szie);
+					color: var(--f85Color);
+					padding: 1vw 2vw;
+				}
+
+				.two_4 {
+					font-size: var(--font12Size);
+					color: var(--fcColor);
+					padding: 1vw 2vw;
+
+					text {
+						margin: 0 2vw 0 0;
+					}
+				}
+			}
+
+			.thr {
+				.thr_1 {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					margin: 2vw 0 2vw 0;
+					padding: 2vw;
+					background-color: var(--mainColor);
+				}
+			}
+
+			.four {
+				padding: 2vw;
+				background-color: var(--mainColor);
+
+				.four_1 {
+					display: flex;
+					justify-content: space-between;
+
+					.image {
+						width: 15vw;
+						height: 15vw;
+					}
+
+					.other {
+						flex-grow: 1;
+						margin: 0 0 0 2vw;
+
+						.name {
+							font-size: var(--font16Szie);
+						}
+
+						.other_1 {
+							font-size: var(--font12Size);
+
+							text {
+								color: var(--fcColor);
+								margin: 0 2vw 0 0;
+							}
+						}
+					}
+				}
+
+				.four_2 {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-evenly;
+					padding: 2vw 0;
+					color: var(--f99Color);
+
+					.grade {
+						font-size: var(--font14Size);
+						color: var(--f85Color);
+
+						text {
+							color: var(--ff0Color);
+						}
+					}
+
+					.btn {
+						border: 0.1vw solid var(--fcColor);
+						padding: 1vw 6vw;
+						border-radius: 1vw;
+						color: var(--f00Color);
+					}
 
+					.btn:last-child {
+						padding: 1vw 10vw;
+					}
+				}
+			}
+
+			.five {
+				margin: 2vw 0 0 0;
+
+				.five_1 {
+					padding: 2vw;
+					background-color: var(--mainColor);
+					font-size: var(--font18Szie);
+					color: var(--f99Color);
+				}
+
+				.five_2 {
+					padding: 0 2vw;
+					background-color: var(--mainColor);
+					text-align: center;
+				}
+			}
+		}
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+
+	.scrollView {
+		height: 100vh;
+	}
+
+	.backTop {
+		position: fixed;
+		bottom: 20vw;
+		right: 5vw;
+
+		text {
+			font-size: 30px;
+			background-color: #0000005f;
+			border-radius: 90px;
+		}
+	}
+
+	.content {
+		height: 100vw;
+
+		.one {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			margin: 2vw;
+			padding: 2vw 0;
+			border-bottom: 1px solid var(--f9Color);
+
+			.image {
+				width: 25vw;
+				height: 25vw;
+				margin: 0 2vw 0 0;
+			}
+
+			.other {
+				display: flex;
+				flex-direction: column;
+				flex-grow: 1;
+				margin: 0 0 0 2vw;
+
+				.money {
+					color: var(--fFB1Color);
+					font-size: var(--font20Szie);
+					padding: 2vw 0;
+				}
+
+				.other_1 {
+					font-size: var(--font14Size);
+
+					text {
+						font-weight: bold;
+						padding: 0 2vw;
+						color: var(--ff0Color);
+					}
+				}
+			}
+		}
+
+		.two {
+			margin: 0 2vw;
+			padding: 2vw 0;
+			font-size: var(--font12Size);
+			border-bottom: 1px solid var(--f9Color);
+
+			.two_2 {
+				padding: 1vw;
+
+				text {
+					padding: 1vw;
+					border-radius: 1vw;
+					background-color: var(--f9Color);
+				}
+			}
+		}
+
+		.thr {
+			display: flex;
+			justify-content: space-between;
+			margin: 0 2vw;
+			padding: 2vw 0;
+
+			text {
+				margin: 1vw 0 0 0;
+			}
+
+			.count {
+				margin: 0 2vw;
+				flex-grow: 1;
+			}
+		}
+
+		.button {
+			position: fixed;
+			width: 100vw;
+			padding: 4vw 0;
+			background-color: var(--fFB1Color);
+			bottom: 0;
+			text-align: center;
+			font-size: var(--font18Szie);
+			color: var(--mainColor);
+		}
+	}
 </style>

uni_modules/uni-goods-nav/changelog.md

@@ -0,0 +1,18 @@
+## 1.2.1（2022-05-30）
+- 新增 stat属性，是否开启uni统计功能
+## 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-goods-nav](https://uniapp.dcloud.io/component/uniui/uni-goods-nav)
+## 1.1.1（2021-08-24）
+- 新增 支持国际化
+## 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-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.5（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.4（2021-02-05）
+- 调整为uni_modules目录规范

uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/en.json

@@ -0,0 +1,6 @@
+{
+	"uni-goods-nav.options.shop": "shop",
+	"uni-goods-nav.options.cart": "cart",
+	"uni-goods-nav.buttonGroup.addToCart": "add to cart",
+	"uni-goods-nav.buttonGroup.buyNow": "buy now"
+}

uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/index.js

@@ -0,0 +1,8 @@
+import en from './en.json'
+import zhHans from './zh-Hans.json'
+import zhHant from './zh-Hant.json'
+export default {
+	en,
+	'zh-Hans': zhHans,
+	'zh-Hant': zhHant
+}

uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hans.json

@@ -0,0 +1,6 @@
+{
+	"uni-goods-nav.options.shop": "店铺",
+	"uni-goods-nav.options.cart": "购物车",
+	"uni-goods-nav.buttonGroup.addToCart": "加入购物车",
+	"uni-goods-nav.buttonGroup.buyNow": "立即购买"
+}

uni_modules/uni-goods-nav/components/uni-goods-nav/i18n/zh-Hant.json

@@ -0,0 +1,6 @@
+{
+	"uni-goods-nav.options.shop": "店鋪",
+	"uni-goods-nav.options.cart": "購物車",
+	"uni-goods-nav.buttonGroup.addToCart": "加入購物車",
+	"uni-goods-nav.buttonGroup.buyNow": "立即購買"
+}

uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue

@@ -0,0 +1,229 @@
+<template>
+	<view class="uni-goods-nav">
+		<!-- 底部占位 -->
+		<view class="uni-tab__seat" />
+		<view class="uni-tab__cart-box flex">
+			<view class="flex uni-tab__cart-sub-left">
+				<view v-for="(item,index) in options" :key="index" class="flex uni-tab__cart-button-left uni-tab__shop-cart" @click="onClick(index,item)">
+					<view class="uni-tab__icon">
+						<uni-icons :type="item.icon" size="20" color="#646566"></uni-icons>
+						<!-- <image class="image" :src="item.icon" mode="widthFix" /> -->
+					</view>
+					<text class="uni-tab__text">{{ item.text }}</text>
+					<view class="flex uni-tab__dot-box">
+						<text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot " :style="{'backgroundColor':item.infoBackgroundColor?item.infoBackgroundColor:'#ff0000',
+						color:item.infoColor?item.infoColor:'#fff'
+						}">{{ item.info }}</text>
+					</view>
+				</view>
+			</view>
+			<view :class="{'uni-tab__right':fill}" class="flex uni-tab__cart-sub-right ">
+				<view v-for="(item,index) in buttonGroup" :key="index" :style="{background:item.backgroundColor,color:item.color}"
+				 class="flex uni-tab__cart-button-right" @click="buttonClick(index,item)"><text :style="{color:item.color}" class="uni-tab__cart-button-right-text">{{ item.text }}</text></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+	initVueI18n
+	} from '@dcloudio/uni-i18n'
+	import messages from './i18n/index.js'
+	const {	t	} = initVueI18n(messages)
+	/**
+	 * GoodsNav 商品导航
+	 * @description 商品加入购物车、立即购买等
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=865
+	 * @property {Array} options 组件参数
+	 * @property {Array} buttonGroup 组件按钮组参数
+	 * @property {Boolean} fill = [true | false] 组件按钮组参数
+	 * @property {Boolean} stat 是否开启统计功能
+	 * @event {Function} click 左侧点击事件
+	 * @event {Function} buttonClick 右侧按钮组点击事件
+	 * @example <uni-goods-nav :fill="true"  options="" buttonGroup="buttonGroup"  @click="" @buttonClick="" />
+	 */
+	export default {
+		name: 'UniGoodsNav',
+		emits:['click','buttonClick'],
+		props: {
+			options: {
+				type: Array,
+				default () {
+					return [{
+						icon: 'shop',
+						text: t("uni-goods-nav.options.shop"),
+					}, {
+						icon: 'cart',
+						text: t("uni-goods-nav.options.cart")
+					}]
+				}
+			},
+			buttonGroup: {
+				type: Array,
+				default () {
+					return [{
+							text: t("uni-goods-nav.buttonGroup.addToCart"),
+							backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
+							color: '#fff'
+						},
+						{
+							text: t("uni-goods-nav.buttonGroup.buyNow"),
+							backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
+							color: '#fff'
+						}
+					]
+				}
+			},
+			fill: {
+				type: Boolean,
+				default: false
+			},
+			stat:{
+				type: Boolean,
+				default: false
+			}
+		},
+		methods: {
+			onClick(index, item) {
+				this.$emit('click', {
+					index,
+					content: item,
+				})
+			},
+			buttonClick(index, item) {
+				if (uni.report && this.stat) {
+					uni.report(item.text, item.text)
+				}
+				this.$emit('buttonClick', {
+					index,
+					content: item
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.flex {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-goods-nav {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+	}
+
+	.uni-tab__cart-box {
+		flex: 1;
+		height: 50px;
+		background-color: #fff;
+		z-index: 900;
+	}
+
+	.uni-tab__cart-sub-left {
+		padding: 0 5px;
+	}
+
+	.uni-tab__cart-sub-right {
+		flex: 1;
+	}
+
+	.uni-tab__right {
+		margin: 5px 0;
+		margin-right: 10px;
+		border-radius: 100px;
+		overflow: hidden;
+	}
+
+	.uni-tab__cart-button-left {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// flex: 1;
+		position: relative;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		margin: 0 10px;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-tab__icon {
+		width: 18px;
+		height: 18px;
+	}
+
+	.image {
+		width: 18px;
+		height: 18px;
+	}
+
+	.uni-tab__text {
+		margin-top: 3px;
+		font-size: 12px;
+		color: #646566;
+	}
+
+	.uni-tab__cart-button-right {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-direction: column;
+		/* #endif */
+		flex: 1;
+		justify-content: center;
+		align-items: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-tab__cart-button-right-text {
+		font-size: 14px;
+		color: #fff;
+	}
+
+	.uni-tab__cart-button-right:active {
+		opacity: 0.7;
+	}
+
+	.uni-tab__dot-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-direction: column;
+		/* #endif */
+		position: absolute;
+		right: -2px;
+		top: 2px;
+		justify-content: center;
+		align-items: center;
+		// width: 0;
+		// height: 0;
+	}
+
+	.uni-tab__dot {
+		// width: 30rpx;
+		// height: 30rpx;
+		padding: 0 4px;
+		line-height: 15px;
+		color: #ffffff;
+		text-align: center;
+		font-size: 12px;
+		background-color: #ff0000;
+		border-radius: 15px;
+	}
+
+	.uni-tab__dots {
+		padding: 0 4px;
+		// width: auto;
+		border-radius: 15px;
+	}
+</style>

uni_modules/uni-goods-nav/package.json

@@ -0,0 +1,88 @@
+{
+  "id": "uni-goods-nav",
+  "displayName": "uni-goods-nav 商品导航",
+  "version": "1.2.1",
+  "description": "商品导航组件主要用于电商类应用底部导航，可自定义加入购物车，购买等操作",
+  "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",
+			"uni-icons"
+		],
+    "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-goods-nav/readme.md

@@ -0,0 +1,10 @@
+
+
+## GoodsNav 商品导航
+> **组件名：uni-goods-nav**
+> 代码块： `uGoodsNav`
+
+商品加入购物车，立即购买等。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-goods-nav)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839