# FreshRbbit

**Repository Path**: W_Hacker/FreshRbbit

## Basic Information

- **Project Name**: FreshRbbit
- **Description**: 后台接口基本完毕，但是数据缺乏（分类，商品），所以会有一些本地mock数据。
采用pinia来管理购物车和用户数据
重点难点，第三方登，商品详情，购物车，支付结算，订单管理。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-12-27
- **Last Updated**: 2023-02-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, Pinia, vue-router

## README

## 面包屑 XtxBread XtxBreadItem
```
<XtxBread>
      <XtxBreadItem to="/">首页</XtxBreadItem>
      <XtxBreadItem to="/"> 品牌</XtxBreadItem>
      <XtxBreadItem to="/">COS</XtxBreadItem>
 </XtxBread>
```

首页>品牌>COS

## 轮播图  XtxCarousel

```
<XtxCarousel :sliders="sliders" style="height:500px" />
```
## 单选框  XtxCheckbox

```
defineEmits(['update:modelValue', 'change'])
modelValue: {
    type: Boolean,
    default: false
}

<XtxCheckbox v-model="sortParams.inventory">仅显示有货商品</XtxCheckbox>
```
## 确认提示框 XtxConfirm 

```
  title: {
    type: String,
    default: '温馨提示'
  },
  text: {
    type: String,
    default: ''
  },
  submitCallback: {
    type: Function,
    default:() => {}
  },
  cancelCallback: {
    type: Function,
    default:() => {}
  }
document.createElement('div')
createVNode(XtxConfirm, { title, text, submitCallback, cancelCallback })

Confirm({ text: '您确认删除该条订单吗？' }).then(async () => {
    await delteOrder([item.id])
    Message({ text: '删除订单成功', type: 'success' })
    findOrderListFn()
}).catch(e => { })

```
## 弹窗 XtxDialog 

```
  <XtxDialog title="取消订单" v-model:visible="visibleDialog">
    <!-- 组件内容 -->
    <div class="cancel-info">
      <p>取消订单后，本单享有的优惠可能会一并取消，是否继续？</p>
      <p class="tip">请选择取消订单的原因（必选）：</p>
      <div class="btn">
        <a @click="curText = item" v-for="item in cancelReason" :key="item" href="javascript:;"
          :class="{ active: curText === item }">
          {{ item }}
        </a>
      </div>
    </div>
    <!-- 按钮操作 -->
    <template #footer>
      <XtxButton type="gray" @click="visibleDialog=false" style="margin-right:20px">取消</XtxButton>
      <XtxButton type="primary" @click="submit">确认</XtxButton>
    </template>
  </XtxDialog>
```
##  提示框 XtxMessage 

```
// 准备dom容器
const div = document.createElement('div')
createVNode(XtxMessage, { type, text })
render(vnode, div)

Message({ type: 'error', text: '至少选择一件商品' })
```
##  数值 XtxNumbox


```
  label: {
    type: String
  },
  modelValue: {
    type: Number,
    default: 1
  },
  min: {
    type: Number,
    default: 1
  },
  max: {
    type: Number,
    default: 100
  }
defineEmits(['change',"update:modelValue"])

<XtxNumbox :max="item.stock" @change="($event:any)=>changeCount(item.skuId,$event)" :modelValue="item.count" />
```

 
## 骨架屏 XtxSkeleton

组件名称：`XtxSkeleton`

props

| 名称   | 类型   | 默认值 |
| ------ | ------ | ------ |
| width  | Number | 100    |
| height | Number | 60     |
| bg     | String | #ccc   |

```
<XtxSkeleton class="item" width="800px" height="40px" />
```
一般需要配合IF来使用

组件名称：`XtxSlider`

props

| 名称     | 类型    | 默认值 |
| -------- | ------- | ------ |
| sliders  | Array   | []     |
| autoPlay | Boolean | true   |

## 图片预览组件 XtxImageView

组件名称：`XtxImageView`

props

| 名称      | 类型  | 默认值 |
| --------- | ----- | ------ |
| imageList | Array | []     |

## 商品规格组件 XtxGoodSku

组件名称：`XtxGoodSku`

props

| 名称  | 类型   | 默认值                  |
| ----- | ------ | ----------------------- |
| goods | Object | { specs: [], skus: [] } |

events

| 名称   | 回调参数                                 |
| ------ | ---------------------------------------- |
| change | 完整的sku对象数据 （不完整时为空对象{}） |

## 按钮组件 XtxButton

组件名称：`XtxButton`

| 名称 | 类型   | 可选值                     | 默认值  |
| ---- | ------ | -------------------------- | ------- |
| size | String | large/middle/small/mini    | middle  |
| type | String | default/primary/plain/gray | default |


## 面板组件 XtxTabs
```
    provide('activeName', modelValue);
    inject<string>('activeName');

    <XtxTabs v-model="activeName" @tab-click="tabClick">
      <XtxTabsPanel v-for="item in orderStatus" :key="item.name" :label="item.label" :name="item.name">
        <div class="order-list">
         文本
        </div>
      </XtxTabsPanel>
    </XtxTabs>
```