#

whycq

2023-10-13 6088355be97d6e971dfaafa5db3615377a4ee0ae

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

New file
@@ -0,0 +1,224 @@
<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] 组件按钮组参数
    * @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
         }
      },
      methods: {
         onClick(index, item) {
            this.$emit('click', {
               index,
               content: item,
            })
         },
         buttonClick(index, item) {
            if (uni.report) {
               uni.report(item.text, item.text)
            }
            this.$emit('buttonClick', {
               index,
               content: item
            })
         }
      }
   }
</script>

<style lang="scss" scoped>
   .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>