init
This commit is contained in:
		
							
								
								
									
										18
									
								
								uni_modules/uni-goods-nav/changelog.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										18
									
								
								uni_modules/uni-goods-nav/changelog.md
									
									
									
									
									
										Normal file
									
								
							@@ -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目录规范
 | 
			
		||||
@@ -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"
 | 
			
		||||
}
 | 
			
		||||
@@ -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
 | 
			
		||||
}
 | 
			
		||||
@@ -0,0 +1,6 @@
 | 
			
		||||
{
 | 
			
		||||
	"uni-goods-nav.options.shop": "店铺",
 | 
			
		||||
	"uni-goods-nav.options.cart": "购物车",
 | 
			
		||||
	"uni-goods-nav.buttonGroup.addToCart": "加入购物车",
 | 
			
		||||
	"uni-goods-nav.buttonGroup.buyNow": "立即购买"
 | 
			
		||||
}
 | 
			
		||||
@@ -0,0 +1,6 @@
 | 
			
		||||
{
 | 
			
		||||
	"uni-goods-nav.options.shop": "店鋪",
 | 
			
		||||
	"uni-goods-nav.options.cart": "購物車",
 | 
			
		||||
	"uni-goods-nav.buttonGroup.addToCart": "加入購物車",
 | 
			
		||||
	"uni-goods-nav.buttonGroup.buyNow": "立即購買"
 | 
			
		||||
}
 | 
			
		||||
@@ -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>
 | 
			
		||||
							
								
								
									
										88
									
								
								uni_modules/uni-goods-nav/package.json
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										88
									
								
								uni_modules/uni-goods-nav/package.json
									
									
									
									
									
										Normal file
									
								
							@@ -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"
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										10
									
								
								uni_modules/uni-goods-nav/readme.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										10
									
								
								uni_modules/uni-goods-nav/readme.md
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,10 @@
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## GoodsNav 商品导航
 | 
			
		||||
> **组件名:uni-goods-nav**
 | 
			
		||||
> 代码块: `uGoodsNav`
 | 
			
		||||
 | 
			
		||||
商品加入购物车,立即购买等。
 | 
			
		||||
 | 
			
		||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-goods-nav)
 | 
			
		||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 
 | 
			
		||||
		Reference in New Issue
	
	Block a user