Skip to content

Y
yongxinda-h5
提交 123cd46e authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

剩余下单页面

上级 5484b168
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 2014 行增加 和 176 行删除
package.json
浏览文件 @ 123cd46e
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"@dcloudio/uni-components": "3.0.0-alpha-3050320220729001", "@dcloudio/uni-components": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-h5": "3.0.0-alpha-3050320220729001", "@dcloudio/uni-h5": "3.0.0-alpha-3050320220729001",
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-3050320220729001", "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3050320220729001",
"lodash": "^4.17.21",
"node-sass": "^7.0.1", "node-sass": "^7.0.1",
"pinia": "^2.0.21", "pinia": "^2.0.21",
"vue": "^3.2.37", "vue": "^3.2.37",
......
src/api/cart.ts 0 → 100644
浏览文件 @ 123cd46e
import { request } from '@/utils/request';
// 购物车初始数据
export const getCartIndex = () => request('/wx/cart/index', 'GET');
// 选择或取消商品
export const cartChecked = (data: any) => request('/wx/cart/checked', 'POST', data)
// 删除商品
export const cartDelete = (data: any) => request('/wx/cart/delete', 'POST', data)
// 更新商品
export const cartUpdate= (data: any) => request('/wx/cart/update', 'POST', data)
\ No newline at end of file
src/api/category.ts 0 → 100644
浏览文件 @ 123cd46e
import { request } from '@/utils/request';
// 分类初始数据 /wx/catalog/index
export const getCatalogIndex = () => request('/wx/catalog/index', 'GET');
// 分类数据
export const getCatalogCurrent = (data: any) => request('/wx/catalog/current', 'GET', data);
// 分类详情数据
export const getGoodsCategory = (data: any) => request('/wx/goods/category', 'GET', data);
// 分类详情数据列表
export const getGoodsList = (data: any) => request('/wx/goods/list', 'GET', data);
src/api/index.ts
浏览文件 @ 123cd46e
import { request } from '@/utils/request'; import { request } from '@/utils/request';
// 主页数据
export const homeIndex = () => request('/wx/home/index', 'GET'); export const homeIndex = () => request('/wx/home/index', 'GET');
// 商品详情
export const indexDetails = (data: any) => request('/wx/goods/detail', 'GET', data); export const indexDetails = (data: any) => request('/wx/goods/detail', 'GET', data);
// 加入购物车
export const addCart = (data: any) => request('/wx/cart/add', 'POST', data)
\ No newline at end of file
src/api/login.ts 0 → 100644
浏览文件 @ 123cd46e
import { request } from '@/utils/request'
// 登录
export const login = (data: any) => request('/wx/auth/login', 'POST', data)
\ No newline at end of file
src/components/inputLogin.vue 0 → 100644
浏览文件 @ 123cd46e
<template>
<view style="margin-bottom: 20rpx;">
<view class="login-input">
<view :class="'iconfont ' + inputData.iconfont + ' login-icon'"></view>
<input
:type="inputData?.type"
:placeholder="inputData.placeholder"
:password="inputData?.password"
class="input-text"
v-model="inputData.inputValue"
@blur="handleValue"
/>
<text class="getcode" v-if="inputData.checkType === 'code'">获取验证码</text>
</view>
<text class="check" v-if="inputData.check">{{ inputData.checkContent }}</text>
</view>
</template>
<script setup lang="ts">
let props = defineProps({
inputData: Object
});
let emits = defineEmits(['hangleInput']);
let handleValue = (Value: any) => {
emits('hangleInput', Value.detail.value, props.inputData?.checkType);
};
</script>
<style lang="scss" scoped>
.login-input {
display: flex;
flex-direction: inherit;
border: 1px solid #ccc;
border-radius: 50rpx;
width: 560rpx;
height: 70rpx;
.login-icon {
line-height: 70rpx;
margin: 0 15rpx;
font-size: 42rpx;
color: #c7c7c7;
}
.input-text {
height: 100%;
line-height: 70rpx;
flex: 1 1 auto;
}
.getcode {
height: 100%;
width: 144rpx;
font-size: 24rpx;
color: #c7c7c7;
line-height: 70rpx;
}
}
.check {
font-size: 24rpx;
color: red;
margin: 0 0 10rpx 21rpx;
}
</style>
src/pages.json
浏览文件 @ 123cd46e
{ {
"easycom": { "easycom": {
"autoscan": true, "autoscan": true,
"custom": { "custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
} }
}, },
"pages": [ "pages": [
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationBarTitleText": "首页" "navigationBarTitleText": "首页"
} }
}, { }, {
"path": "pages/category/index", "path": "pages/category/index",
"style": { "style": {
"navigationBarTitleText": "分类" "navigationBarTitleText": "分类"
} }
}, { }, {
"path": "pages/message/index", "path": "pages/message/index",
"style": { "style": {
"navigationBarTitleText": "消息" "navigationBarTitleText": "消息"
} }
}, { }, {
"path": "pages/message/chat", "path": "pages/message/chat",
"style": { "style": {
"navigationBarTitleText": "聊天窗口" "navigationBarTitleText": "聊天窗口"
} }
}, { }, {
"path": "pages/cart/index", "path": "pages/productLine/productLine",
"style": { "style": {
"navigationBarTitleText": "购物车" "navigationBarTitleText": "产品线"
} }
}, { }, {
"path": "pages/goods/index", "path": "pages/cart/index",
"style": { "style": {
"navigationBarTitleText": "商品详情" "navigationBarTitleText": "购物车",
} "navigationStyle": "custom"
}, { }
"path": "pages/profile/index", }, {
"style": { "path": "pages/goods/index",
"navigationBarTitleText": "我的" "style": {
} "navigationBarTitleText": "商品详情"
}, { }
"path": "pages/order/index", }, {
"style": { "path": "pages/profile/index",
"navigationBarTitleText": "我的订单" "style": {
} "navigationBarTitleText": "我的"
} }
], }, {
"tabBar": { "path": "pages/order/index",
"selectedColor": "#333", "style": {
"color": "#707070", "navigationBarTitleText": "我的订单"
"backgroundColor": "#fff", }
"borderStyle": "white", }, {
"height": "50px", "path": "pages/login/login",
"list": [ "style": {
{ "navigationBarTitleText": "登录"
"pagePath": "pages/index/index", }
"iconPath": "/static/tabbar/home.png", }, {
"selectedIconPath": "/static/tabbar/home_fill.png", "path": "pages/category/items",
"text": "首页" "style": {
}, "navigationBarTitleText": "",
{ "navigationBarBackgroundColor": "#fff",
"pagePath": "pages/category/index", "onReachBottomDistance": 55
"iconPath": "/static/tabbar/category.png", }
"selectedIconPath": "/static/tabbar/category_fill.png", }
"text": "分类" ],
}, "tabBar": {
{ "selectedColor": "#333",
"pagePath": "pages/message/index", "color": "#707070",
"iconPath": "/static/tabbar/message.png", "backgroundColor": "#fff",
"selectedIconPath": "/static/tabbar/message_fill.png", "borderStyle": "white",
"text": "消息" "height": "50px",
}, "list": [{
{ "pagePath": "pages/index/index",
"pagePath": "pages/cart/index", "iconPath": "/static/tabbar/home.png",
"iconPath": "/static/tabbar/cart.png", "selectedIconPath": "/static/tabbar/home_fill.png",
"selectedIconPath": "/static/tabbar/cart_fill.png", "text": "首页"
"text": "购物车" },
}, {
{ "pagePath": "pages/category/index",
"pagePath": "pages/profile/index", "iconPath": "/static/tabbar/category.png",
"iconPath": "/static/tabbar/profile.png", "selectedIconPath": "/static/tabbar/category_fill.png",
"selectedIconPath": "/static/tabbar/profile_fill.png", "text": "分类"
"text": "我的" },
} {
] "pagePath": "pages/productLine/productLine",
}, "iconPath": "/static/tabbar/message.png",
"globalStyle": { "selectedIconPath": "/static/tabbar/message_fill.png",
"navigationBarTextStyle": "black", "text": "产品线"
"navigationBarTitleText": "uni-app", },
"navigationBarBackgroundColor": "#F8F8F8", {
"backgroundColor": "#F8F8F8" "pagePath": "pages/cart/index",
} "iconPath": "/static/tabbar/cart.png",
"selectedIconPath": "/static/tabbar/cart_fill.png",
"text": "购物车"
},
{
"pagePath": "pages/profile/index",
"iconPath": "/static/tabbar/profile.png",
"selectedIconPath": "/static/tabbar/profile_fill.png",
"text": "我的"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
} }
src/pages/cart/index.vue
浏览文件 @ 123cd46e
差异被折叠。
src/pages/category/index.vue
浏览文件 @ 123cd46e
<template> <template>
分类 <view class="u-wrap">
<button @tap="taps">dianji</button> <!-- 搜索 -->
<view><uni-search-bar placeholder="输入搜索商品" bgColor="#EEEEEE" clearButton="auto" cancelButton="none" @blur="blur" @focus="focus" @confirm="search" /></view>
<view class="u-menu-wrap">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
<view
v-for="(item, index) in categoryList"
:key="item.id"
class="u-tab-item"
:class="[current == index ? 'u-tab-item-active' : '']"
:data-current="index"
@tap.stop="swichMenu(index, item.id)"
>
<text class="u-line-1">{{ item.name }}</text>
</view>
</scroll-view>
<block v-for="(item, index) in categoryList" :key="index">
<scroll-view scroll-y class="right-box" v-if="current == index">
<view class="page-view">
<view class="class-item">
<view class="item-title">
<text>{{ item.name }}</text>
</view>
<view class="item-container">
<view class="thumb-box" v-for="(current, c) in currentSubCategoryData" :key="current.id" @tap="tapItems(current.id)">
<image class="item-menu-image" :src="current.picUrl" mode=""></image>
<view class="item-menu-name">{{ current.name }}</view>
</view>
</view>
</view>
</view>
</scroll-view>
</block>
</view>
</view>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { getCurrentInstance } from 'vue' import { ref } from 'vue';
import { getCatalogIndex, getCatalogCurrent } from '@/api/category';
const { proxy } = getCurrentInstance() const scrollTop = ref(0); //tab标题的滚动条位置
const current = ref(0); // 预设当前项的值
const menuHeight = ref(0); // 左边菜单的高度
const menuItemHeight = ref(0); // 左边菜单item的高度
const categoryList = ref(); //右侧tabber数据
const currentSubCategoryData = ref(); //初始tabber数据
let taps = () => { const tapItems = (id: any) => {
proxy?.$model.toast('加油') uni.navigateTo({
url: `./items?id=${id}`
})
} }
// 点击左边的栏目切换
const swichMenu = async (index: any, id: number) => {
if (index == current) return;
current.value = index;
initCatalogCurrent(id);
// 如果为0，意味着尚未初始化
if (menuHeight.value == 0 || menuItemHeight.value == 0) {
await getElRect('menu-scroll-view', 'menuHeight');
await getElRect('u-tab-item', 'menuItemHeight');
}
// 将菜单菜单活动item垂直居中
scrollTop.value = index * menuItemHeight.value + menuItemHeight.value / 2 - menuHeight.value / 2;
};
// 获取一个目标元素的高度
const getElRect = (elClass?: any, dataVal?: any) => {
new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query
.select('.' + elClass)
.fields({ size: true }, (res: any) => {
// 如果节点尚未生成，res值为null，循环调用执行
if (!res) {
setTimeout(() => {
getElRect(elClass);
}, 10);
return;
}
dataVal = res.height;
})
.exec();
});
};
// tabbar单个分类数据
const initCatalogCurrent = (id: number) => {
getCatalogCurrent({ id }).then((res: any) => {
currentSubCategoryData.value = res.data.data.currentSubCategory;
console.log(res, '单个分类数据');
});
};
const initIndex = () => {
getCatalogIndex().then((res: any) => {
// console.log(res);
// if (res.data.code === 200) {
categoryList.value = res.data.data.categoryList;
currentSubCategoryData.value = res.data.data.currentSubCategory;
console.log(categoryList.value, '分类数据', currentSubCategoryData.value);
// }
});
};
initIndex();
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.u-wrap {
height: calc(100vh);
/* #ifdef H5 */
height: calc(100vh - var(--window-top));
/* #endif */
display: flex;
flex-direction: column;
}
.u-search-box {
padding: 18rpx 30rpx;
}
.u-menu-wrap {
flex: 1;
display: flex;
overflow: hidden;
}
.u-search-inner {
background-color: rgb(234, 234, 234);
border-radius: 100rpx;
display: flex;
align-items: center;
padding: 10rpx 16rpx;
}
.u-search-text {
font-size: 26rpx;
color: $u-tips-color;
margin-left: 10rpx;
}
.u-tab-view {
width: 200rpx;
height: 100%;
}
.u-tab-item {
height: 110rpx;
background: #f6f6f6;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #444;
font-weight: 400;
line-height: 1;
}
.u-tab-item-active {
position: relative;
color: #000;
font-size: 30rpx;
font-weight: 600;
background: #fff;
}
.u-tab-item-active::before {
content: '';
position: absolute;
border-left: 4px solid $u-type-primary;
height: 32rpx;
left: 0;
top: 39rpx;
}
.u-tab-view {
height: 100%;
}
.right-box {
background-color: rgb(250, 250, 250);
}
.page-view {
padding: 16rpx;
}
.class-item {
margin-bottom: 30rpx;
background-color: #fff;
padding: 16rpx;
border-radius: 8rpx;
}
.item-title {
font-size: 26rpx;
color: $u-main-color;
font-weight: bold;
}
.item-menu-name {
font-weight: normal;
font-size: 24rpx;
color: $u-main-color;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
width: 33.333333%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 20rpx;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
}
</style>
src/pages/category/items.vue 0 → 100644
浏览文件 @ 123cd46e
<template>
<view class="app-container">
<!-- tabs标签 -->
<u-tabs
name="name"
:list="categoryData.brotherCategory"
v-model="categoryData.current"
@change="tabsChange"
></u-tabs>
<!-- content -->
<view class="content">
<view class="title">
<view
style="width: 100%; text-align: center; font-size: 40rpx; margin-bottom: 20rpx;"
>
{{ categoryData.currentCategory.name }}
</view>
<view style="width: 100%; text-align: center; font-size: 32rpx; color: #999999;">
{{ categoryData.currentCategory.desc }}
</view>
</view>
<view
v-for="(item, index) in categoryData.list"
:key="item.id"
class="item-list"
@tap="tapList(item.id)"
>
<view class="left">
<u-image width="176rpx" height="176rpx" :src="item.picUrl" />
</view>
<view class="details">
<view class="details-top">
<view>{{ item.name }}</view>
<view style="color: #969799;">{{ item.brief }}</view>
</view>
<view class="details-bottom">
<text style="font-size: 32rpx; margin-right: 8rpx;">
￥{{ item.retailPrice }}
</text>
<text
style="font-size: 24rpx; text-decoration: line-through; color: #969799;"
>
￥{{ item.counterPrice }}
</text>
</view>
</view>
</view>
<view style="margin: 20rpx;">
<u-loadmore :status="categoryData.status" icon-type="flower" />
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { getGoodsCategory, getGoodsList } from '@/api/category';
const categoryId = ref();
const categoryData = reactive({
brotherCategory: [] as any,
currentCategory: {} as any,
list: [] as any,
current: 0,
page: 1,
limit: 10,
total: 0,
status: 'loadmore', //nomore loadmore
});
onLoad((options: any) => {
categoryId.value = options.id;
initGoodsCategory(categoryId.value);
initGoodsList(categoryId.value, categoryData.page, categoryData.limit);
});
// 上拉加载数据
onReachBottom(() => {
// 判断是否还有下一页数据
if (categoryData.page * categoryData.limit >= categoryData.total)
return (categoryData.status = 'nomore');
// 判断是否正在请求其它数据，如果是，则不发起额外的请求
if (categoryData.status === 'loading') return;
categoryData.page += 1;
initGoodsList(categoryId.value, categoryData.page, categoryData.limit);
});
const tapList = (id: any) => {
console.log(id);
uni.navigateTo({ url: `/pages/goods/index?id=${id}` });
};
const tabsChange = (e: any) => {
categoryData.current = e;
const id = categoryData.brotherCategory[e].id;
categoryData.list = [];
categoryData.page = 1;
initGoodsCategory(id);
initGoodsList(id, categoryData.page, categoryData.limit);
};
const initGoodsCategory = (id: number) => {
getGoodsCategory({ id }).then((res: any) => {
categoryData.brotherCategory = res.data.data.brotherCategory;
categoryData.currentCategory = res.data.data.currentCategory;
if (res.data.data.parentCategory.id == categoryId.value) {
categoryId.value = res.data.data.currentCategory.id;
initGoodsCategory(categoryId.value);
initGoodsList(categoryId.value, categoryData.page, categoryData.limit);
}
});
};
const initGoodsList = (categoryId: number, page?: number, limit?: number) => {
categoryData.status = 'loading';
getGoodsList({ categoryId, page, limit }).then((res: any) => {
if (categoryData.total > 10) categoryData.status = 'loadmore';
else categoryData.status = 'nomore';
categoryData.total = res.data.data.total;
categoryData.list = [...categoryData.list, ...res.data.data.list];
});
};
</script>
<style lang="scss" scoped>
page {
background-color: #fff;
}
.app-container {
border-top: 2rpx solid #f4f4f4;
.content {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-box-align: center;
.title {
width: 100%;
margin: 20rpx 0 80rpx;
}
.item-list {
// border: 1px solid #000;
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: flex-start;
padding: 16rpx 32rpx;
.details {
display: flex;
flex-direction: column;
.details-top {
margin-bottom: 13%;
}
}
}
}
}
</style>
src/pages/goods/index.vue
浏览文件 @ 123cd46e
...@@ -32,9 +32,9 @@ ...@@ -32,9 +32,9 @@
</view> </view>
<u-cell-group style="margin-top: 20rpx;"> <u-cell-group style="margin-top: 20rpx;">
<u-cell-item v-if="!selectedGoodsItem.specName" icon="" title="规格" value="请选择" :index="0" @click="clickGroup"></u-cell-item> <u-cell-item v-if="!selectedGoodsItem.specName" icon="" title="规格" value="请选择" :index="0" @tap="clickGroup"></u-cell-item>
<u-cell-item v-else icon="" :title="'已选：' + selectedGoodsItem.specName + '*' + selectedGoodsItem.num" :arrow="false" :index="0" @click="clickGroup"></u-cell-item> <u-cell-item v-else icon="" :title="'已选：' + selectedGoodsItem.specName + '*' + selectedGoodsItem.num" :arrow="false" :index="0" @click="clickGroup"></u-cell-item>
<u-cell-item icon="" title="属性" :index="1" @click="clickGroup"></u-cell-item> <u-cell-item icon="" title="属性" :index="1" @tap="clickGroup"></u-cell-item>
<u-cell-item icon="" title="运费" value="满88免邮费" :arrow="false" :border-bottom="false"></u-cell-item> <u-cell-item icon="" title="运费" value="满88免邮费" :arrow="false" :border-bottom="false"></u-cell-item>
</u-cell-group> </u-cell-group>
...@@ -57,8 +57,8 @@ ...@@ -57,8 +57,8 @@
</text> </text>
</view> </view>
</view> </view>
<uni-section class="mb-10" title="颜色"> <uni-section v-for="item in detailData?.specificationList" :key="item.id" class="mb-10" :title="item.name">
<view class="goods-spec"><uni-data-checkbox mode="tag" v-model="radioValue" :localdata="goodsInfo.spec" @change="changeColor" /></view> <view class="goods-spec"><uni-data-checkbox mode="tag" :value="radioValue" :localdata="item.valueList" @change="changeColor" /></view>
</uni-section> </uni-section>
<uni-section class="mb-10" title="数量"> <uni-section class="mb-10" title="数量">
...@@ -85,7 +85,10 @@ ...@@ -85,7 +85,10 @@
<view class="goods-intro"> <view class="goods-intro">
<uni-segmented-control :current="current" :values="tabButtons" @clickItem="onClickItem" styleType="text" activeColor="#e43d33"></uni-segmented-control> <uni-segmented-control :current="current" :values="tabButtons" @clickItem="onClickItem" styleType="text" activeColor="#e43d33"></uni-segmented-control>
<view class="content"> <view class="content">
<view v-show="current === 0"><u-parse :html="detailData?.info.detail" :show-with-animation="true" lazy-load style="font-size: 0" /></view> <view v-show="current === 0">
<u-parse v-if="detailData?.info.detail" :html="detailData?.info.detail" :show-with-animation="true" lazy-load style="font-size: 0" />
<u-empty v-else text="暂无数据" mode="data" />
</view>
<view v-show="current === 1">选项卡2的内容</view> <view v-show="current === 1">选项卡2的内容</view>
</view> </view>
</view> </view>
...@@ -96,11 +99,14 @@ ...@@ -96,11 +99,14 @@
<u-popup v-model="attrPopup" mode="bottom" height="50%" closeable> <u-popup v-model="attrPopup" mode="bottom" height="50%" closeable>
<view class="attr-content"> <view class="attr-content">
<view class="title">商品属性</view> <view class="title">商品属性</view>
<view v-for="(item, index) in detailData?.attribute" :key="item.id" class="details"> <view v-if="detailData?.attribute.length !== 0">
<text class="left">{{ item.attribute }}</text> <view v-for="(item, index) in detailData?.attribute" :key="item.id" class="details">
<text class="right">{{ item.value }}</text> <text class="left">{{ item.attribute }}</text>
<u-line v-show="detailData?.attribute.length-1 !== index" /> <text class="right">{{ item.value }}</text>
<u-line v-show="detailData?.attribute.length - 1 !== index" />
</view>
</view> </view>
<view v-else><u-empty text="暂无属性" mode="data" /></view>
</view> </view>
</u-popup> </u-popup>
</view> </view>
...@@ -109,43 +115,10 @@ ...@@ -109,43 +115,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'; import { onLoad } from '@dcloudio/uni-app';
import { indexDetails } from '@/api/index'; import { indexDetails, addCart } from '@/api/index';
const attrPopup = ref(false); const attrPopup = ref(false);
const detailData = ref(); const detailData = ref();
onLoad((options: any) => {
console.log(options.id);
indexDetails({ id: options.id }).then((res: any) => {
if (res.data.code === 200) {
}
for (let s in res.data.data?.attribute) {
const value = res.data.data?.attribute[s].value.split('\n')
if(value.length > 1) {
let str: string = ''
value.forEach((item : string) => {
str += ' ' + item
})
res.data.data!.attribute[s].value = str
}
}
detailData.value = res.data.data;
console.log(detailData.value, '商品详情数据');
});
});
const clickGroup = (index: number) => {
switch (index) {
case 0:
popup.value.open('bottom');
resetSelected();
break;
case 1:
attrPopup.value = true;
}
};
const indicatorDots = ref(true);
const popup = ref(); const popup = ref();
const tabButtons = ref(['商品详情']); const tabButtons = ref(['商品详情']);
let current = ref(0); let current = ref(0);
...@@ -230,6 +203,38 @@ const buttonGroup = ref([ ...@@ -230,6 +203,38 @@ const buttonGroup = ref([
} }
]); ]);
const detailId = ref()
onLoad((options: any) => {
console.log(options);
detailId.value = options.id
initDetails(options.id)
});
// 点击分组
const clickGroup = (index: number) => {
switch (index) {
case 0:
popup.value.open('bottom');
resetSelected();
break;
case 1:
attrPopup.value = true;
}
};
// 添加checkoutbox属性
const specificationList = () => {
detailData.value?.specificationList.map((item: any, i: number) => {
item.valueList.map((key: any, k: number) => {
if(key.value !== key.id) {
detailData.value!.specificationList[i].valueList[k]['text'] = key.value
detailData.value!.specificationList[i].valueList[k]['value'] = key.id
}
})
})
}
const onClick = (e: any) => { const onClick = (e: any) => {
if (e.index === 0) { if (e.index === 0) {
console.log('客服'); console.log('客服');
...@@ -267,14 +272,16 @@ const buttonClick = (e: any) => { ...@@ -267,14 +272,16 @@ const buttonClick = (e: any) => {
openPopup(); openPopup();
}; };
// 打开规格选择
const openPopup = () => { const openPopup = () => {
popup.value.open('bottom'); popup.value.open('bottom');
resetSelected(); resetSelected();
}; };
// 添加购物车
const addToCart = () => { const addToCart = () => {
console.log('添加至购物车', selectedGoodsItem.value); console.log('添加至购物车', selectedGoodsItem.value);
initDetails(detailId.value)
popup.value.close(); popup.value.close();
uni.showToast({ uni.showToast({
title: '已添加至购物车', title: '已添加至购物车',
...@@ -282,38 +289,65 @@ const addToCart = () => { ...@@ -282,38 +289,65 @@ const addToCart = () => {
}); });
}; };
// 立即购买
const buyNow = () => { const buyNow = () => {
console.log('立即购买', selectedGoodsItem.value); console.log('立即购买', selectedGoodsItem.value);
popup.value.close(); popup.value.close();
}; };
// 初始产品规格数据
const resetSelected = () => { const resetSelected = () => {
selectedGoodsItem.value.id = goodsInfo.value.id; specificationList()
selectedGoodsItem.value.img = goodsInfo.value.imgList[0].img; selectedGoodsItem.value.id = detailData.value?.id;
selectedGoodsItem.value.price = goodsInfo.value.price; selectedGoodsItem.value.img = detailData.value?.productList[0].url;
selectedGoodsItem.value.price = detailData.value?.productList[0].price;
selectedGoodsItem.value.specName = ''; selectedGoodsItem.value.specName = '';
selectedGoodsItem.value.num = 1; selectedGoodsItem.value.num = 1;
radioValue.value = ''; radioValue.value = detailData.value?.specificationList[0].valueList[0].value;
}; };
// 修改商品规格
const changeColor = (e: any) => { const changeColor = (e: any) => {
console.log(e);
const selected = e.detail.data; const selected = e.detail.data;
console.log('选择产品规格', selected);
selectedGoodsItem.value.id = selected.id; selectedGoodsItem.value.id = selected.id;
selectedGoodsItem.value.img = selected.img; selectedGoodsItem.value.img = selected.picUrl;
selectedGoodsItem.value.price = selected.price; selectedGoodsItem.value.price = detailData.value?.productList[0].price;
selectedGoodsItem.value.specName = selected.text; selectedGoodsItem.value.specName = selected.text;
}; };
// 购买数量
const changeBuyNum = (value: number) => { const changeBuyNum = (value: number) => {
selectedGoodsItem.value.num = value; selectedGoodsItem.value.num = value;
}; };
// 选择选项卡
const onClickItem = (e: any) => { const onClickItem = (e: any) => {
if (current.value != e.currentIndex) { if (current.value != e.currentIndex) {
current.value = e.currentIndex; current.value = e.currentIndex;
} }
}; };
// 初始化商品详情数据
const initDetails = (id: number) => {
indexDetails({ id }).then((res: any) => {
if (res.data.code === 200) {
}
// 去除数据 换行符
for (let s in res.data.data?.attribute) {
const value = res.data.data?.attribute[s].value.split('\n')
if(value.length > 1) {
let str: string = ''
value.forEach((item: string) => {
str += ' ' + item
})
res.data.data!.attribute[s].value = str
}
}
detailData.value = res.data.data;
console.log(detailData.value, '商品详情数据');
});
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -516,6 +550,7 @@ const onClickItem = (e: any) => { ...@@ -516,6 +550,7 @@ const onClickItem = (e: any) => {
border-radius: 30rpx; border-radius: 30rpx;
.content { .content {
width: 100%;
margin-top: 30rpx; margin-top: 30rpx;
margin-bottom: calc(100rpx + env(safe-area-inset-bottom)); margin-bottom: calc(100rpx + env(safe-area-inset-bottom));
display: inline-block; display: inline-block;
......
src/pages/index/index.vue
浏览文件 @ 123cd46e
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<!-- 轮播图 --> <!-- 轮播图 -->
<view class="wrap"><u-swiper :list="indexData?.banner" name="url" height="400"></u-swiper></view> <view class="wrap"><u-swiper :list="indexData?.banner" name="url" height="400"></u-swiper></view>
<!-- 宫格布局 --> <!-- 宫格布局 -->
<u-grid :col="4" class="grid" @click="clickGrid"> <u-grid :col="4" class="grid" @tap="clickGrid">
<u-grid-item v-for="(item, index) in indexData?.channel" :key="item.id" :index="item.id"> <u-grid-item v-for="(item, index) in indexData?.channel" :key="item.id" :index="item.id">
<u-icon :name="item.iconUrl" :size="46"></u-icon> <u-icon :name="item.iconUrl" :size="46"></u-icon>
<view class="grid-text">{{ item.name }}</view> <view class="grid-text">{{ item.name }}</view>
...@@ -12,9 +12,10 @@ ...@@ -12,9 +12,10 @@
</u-grid> </u-grid>
<view class="goods"> <view class="goods">
<view style="padding: 20rpx 20rpx;"><u-section title="新品首发" sub-title="查看更多" :show-line="false" /></view>
<uni-row> <uni-row>
<uni-col :span="12" v-for="(item, index) in indexData?.newGoodsList" :key="item.id"> <uni-col :span="12" v-for="(item, index) in indexData?.newGoodsList" :key="item.id">
<view class="goods-item" @click="viewGoods(item)"> <view class="goods-item" @tap="viewGoods(item)">
<image class="goods-img" :src="item.picUrl"></image> <image class="goods-img" :src="item.picUrl"></image>
<view class="goods-infos"> <view class="goods-infos">
<uni-row> <uni-row>
...@@ -48,12 +49,11 @@ ...@@ -48,12 +49,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { homeIndex } from '@/api/index'; import { homeIndex } from '@/api/index';
// import { GoodsItem } from '@/types/goods';
const indexData = ref(); const indexData = ref();
const clickGrid = (index: any) => { const clickGrid = (index: any) => {
console.log(index); uni.navigateTo({ url: '/pages/category/items?id=' + index });
}; };
const viewGoods = (row: any) => { const viewGoods = (row: any) => {
...@@ -92,7 +92,6 @@ initIndex(); ...@@ -92,7 +92,6 @@ initIndex();
height: 450rpx; height: 450rpx;
background-color: #ffffff; background-color: #ffffff;
margin: 5rpx; margin: 5rpx;
//border: 1rpx solid #FFFFFF;
border-radius: 25rpx; border-radius: 25rpx;
overflow: hidden; overflow: hidden;
.goods-img { .goods-img {
......
src/pages/login/login.vue 0 → 100644
浏览文件 @ 123cd46e
<template>
<view class="login-container">
<image src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/logo/logo.png" mode="scaleToFill" class="title-iamge"></image>
<text class="login-text">欢迎登陆</text>
<view class="login-form">
<input-login :inputData="inputData" @hangleInput="hangleInput" />
<input-login :inputData="inputData1" @hangleInput="hangleInput" />
</view>
<button @tap="clickNextStep" class="getCaptcha">登录</button>
<!-- <image src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/logo/logo.png" mode="" class="next-step" @click="clickNextStep"></image> -->
<text class="footer-text">定制管理平台</text>
</view>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { login } from '@/api/login';
import inputLogin from '@/components/inputLogin.vue';
let inputData = reactive({
inputValue: 'user123' as any,
iconfont: 'icon-a-ziyuan16',
placeholder: '手机号码',
type: 'text',
checkType: 'phone',
check: false,
checkContent: '请输入有效手机号'
});
let inputData1 = reactive({
inputValue: 'user123' as any,
iconfont: 'icon-mima',
placeholder: '密码',
type: 'password',
checkType: 'passWord',
check: false,
checkContent: '请输入密码'
});
let hangleInput = (Value: any, type: string) => {
if (type === 'phone') {
let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
if (!reg.test(Value) || !Value) inputData.check = true;
else inputData.check = false;
} else {
if (!Value) inputData1.check = true;
else inputData1.check = false;
}
};
let clickNextStep = () => {
if (!inputData.inputValue || !inputData.inputValue) {
inputData.check = true;
inputData1.check = true;
return;
} else if (!inputData.check || !inputData1.check) {
initLogin(inputData.inputValue, inputData1.inputValue);
} else {
console.log('检验不通过');
}
};
// user123
let initLogin = async (username: number, password: string) => {
let res: any = await login({ username, password });
if (res.data.errno == 0) {
uni.setStorage({
key: 'token',
data: res.data.data.token,
success: () => {
uni.switchTab({
url: '../profile/index',
success() {
uni.setStorage({
key: 'username',
data: inputData.inputValue,
success() {
uni.showToast({
title: '登陆成功',
icon: 'none',
duration: 1000
});
}
});
}
});
}
});
} else {
uni.showToast({
title: '手机号或密码错误',
icon: 'none',
duration: 2000
});
}
};
</script>
<style lang="scss" scoped>
.login-container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.getCaptcha {
width: 400rpx;
background-color: rgb(253, 243, 208);
color: $u-tips-color;
border: none;
font-size: 30rpx;
margin-top: 20rpx;
&::after {
border: none;
}
}
.title-iamge {
width: 300rpx;
height: 240rpx;
}
.login-text {
margin-top: 10%;
font-weight: 700;
font-size: 40rpx;
color: #1d2b5f;
}
.login-form {
margin-top: 15%;
}
.next-step {
margin-top: 20rpx;
width: 245rpx;
height: 90rpx;
}
.footer-text {
margin-top: 40%;
display: block;
width: 100%;
color: #d79972;
font-size: 30rpx;
text-align: center;
align-self: flex-end;
}
}
</style>
src/pages/message/index.vue
浏览文件 @ 123cd46e
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<uni-swipe-action-item <uni-swipe-action-item
v-for="(item, index) in chatList" :key="index" v-for="(item, index) in chatList" :key="index"
:right-options="options" :right-options="options"
@click="bindClick"> @tap="bindClick">
<!-- 头像显示角标 --> <!-- 头像显示角标 -->
<uni-list-chat <uni-list-chat
:title="item.nickname" :title="item.nickname"
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
badge-positon="left" badge-positon="left"
:badge-text="item.unread" :badge-text="item.unread"
clickable clickable
@click="openChat(item)"> @tap="openChat(item)">
<!-- 此处可自定义内容 --> <!-- 此处可自定义内容 -->
</uni-list-chat> </uni-list-chat>
</uni-swipe-action-item> </uni-swipe-action-item>
......
src/pages/productLine/productLine.vue 0 → 100644
浏览文件 @ 123cd46e
<template>
<view class="">
产品线
</view>
</template>
<script>
</script>
<style>
</style>
\ No newline at end of file
src/pages/profile/address.vue 0 → 100644
浏览文件 @ 123cd46e
<template>
</template>
<script>
</script>
<style>
</style>
\ No newline at end of file
src/uni_modules/muyu-shopCartMod/components/muyu-shopCartMod/muyu-shopCartMod.vue 0 → 100644
浏览文件 @ 123cd46e
<template>
<view style="width: 100%;display:flex;">
<u-checkbox-group @change="checkbox_change" style="width: 100%;display:flex">
<template v-for="item in cartList">
<view style="width: 100%;display:flex;justify-content:space-between;padding: 15rpx;">
<view style="display:flex">
<u-checkbox :name="item.goodsId" v-model="item.checked" shape="circle"></u-checkbox>
<slot name="img" :src="item.img"></slot>
<view style="display:flex;flex-direction: column;justify-content: space-between;margin-left: 20rpx;">
<slot name="title" :title="item.title"></slot>
<slot name="price" :price="item.price"></slot>
</view>
</view>
<view style="display:flex;flex-direction: column;justify-content:flex-end;"><u-number-box v-model="item.num" @change="valChange"></u-number-box></view>
</view>
</template>
</u-checkbox-group>
</view>
</template>
<script>
export default {
emits: ['shopcartmodemits'],
props: {
list: {
type: Array,
default(rawProps) {
return [{ img: '/static/logo.png', title: '标题标题标题1', goodsId: '001', num: 0, price: 0, checked: false }];
}
}
},
data() {
return {
cartList: this.list
};
},
setup(props, ctx) {
const db = e => {
ctx.emit('shopcartmodemits', e);
};
return {
db
};
},
methods: {
checkbox_change(e) {
console.log(this.cartList, '111');
this.dataBack('单选');
},
valChange(e) {
this.dataBack('数量调整');
},
//全选
checkAll() {
for (var i in this.list) {
this.list[i].checked = true;
}
this.dataBack('全选');
},
//取消全选
deCheckAll() {
for (var i in this.list) {
this.list[i].checked = false;
}
this.dataBack('取消全选');
},
//数据回传
dataBack(e) {
this.db({ type: e, list: this.cartList });
}
},
mounted() {
console.log('cartlist', this.cartList);
}
};
</script>
<style lang="scss"></style>
src/uni_modules/muyu-shopCartMod/package.json 0 → 100644
浏览文件 @ 123cd46e
{
"id": "muyu-shopCartMod",
"displayName": "简易购物车插件(仅支持VUE3)",
"version": "v1.0.0",
"description": "一个简易购物车插件，支持自定义插槽，目前仅支持vue3，需要引入（uView Vue3）",
"keywords": [
"购物车",
"VUE3",
"uniapp",
"vk-uview-ui"
],
"dcloudext": {
"category": [
"前端组件",
"通用组件"
]
}
}
\ No newline at end of file
src/uni_modules/uni-data-checkbox/changelog.md 0 → 100644
浏览文件 @ 123cd46e
## 1.0.3（2022-09-16）
- 可以使用 uni-scss 控制主题色
## 1.0.2（2022-06-30）
- 优化 在 uni-forms 中的依赖注入方式
## 1.0.1（2022-02-07）
- 修复 multiple 为 true 时，v-model 的值为 null 报错的 bug
## 1.0.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-data-checkbox](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
## 0.2.5（2021-08-23）
- 修复 在uni-forms中 modelValue 中不存在当前字段，当前字段必填写也不参与校验的问题
## 0.2.4（2021-08-17）
- 修复 单选 list 模式下 ，icon 为 left 时，选中图标不显示的问题
## 0.2.3（2021-08-11）
- 修复 在 uni-forms 中重置表单，错误信息无法清除的问题
## 0.2.2（2021-07-30）
- 优化 在uni-forms组件，与label不对齐的问题
## 0.2.1（2021-07-27）
- 修复 单选默认值为0不能选中的Bug
## 0.2.0（2021-07-13）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.1.11（2021-07-06）
- 优化 删除无用日志
## 0.1.10（2021-07-05）
- 修复 由 0.1.9 引起的非 nvue 端图标不显示的问题
## 0.1.9（2021-07-05）
- 修复 nvue 黑框样式问题
## 0.1.8（2021-06-28）
- 修复 selectedTextColor 属性不生效的Bug
## 0.1.7（2021-06-02）
- 新增 map 属性，可以方便映射text/value属性
## 0.1.6（2021-05-26）
- 修复 不关联服务空间的情况下组件报错的Bug
## 0.1.5（2021-05-12）
- 新增 组件示例地址
## 0.1.4（2021-04-09）
- 修复 nvue 下无法选中的问题
## 0.1.3（2021-03-22）
- 新增 disabled属性
## 0.1.2（2021-02-24）
- 优化 默认颜色显示
## 0.1.1（2021-02-24）
- 新增 支持nvue
## 0.1.0（2021-02-18）
- “暂无数据”显示居中
src/uni_modules/uni-data-checkbox/package.json 0 → 100644
浏览文件 @ 123cd46e
{
"id": "uni-data-checkbox",
"displayName": "uni-data-checkbox 数据选择器",
"version": "1.0.3",
"description": "通过数据驱动的单选框和复选框",
"keywords": [
"uni-ui",
"checkbox",
"单选",
"多选",
"单选多选"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.1"
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": ["uni-load-more","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"
}
}
}
}
}
src/uni_modules/uni-data-checkbox/readme.md 0 → 100644
浏览文件 @ 123cd46e
## DataCheckbox 数据驱动的单选复选框
> **组件名：uni-data-checkbox**
> 代码块： `uDataCheckbox`
本组件是基于uni-app基础组件checkbox的封装。本组件要解决问题包括：
1. 数据绑定型组件：给本组件绑定一个data，会自动渲染一组候选内容。再以往，开发者需要编写不少代码实现类似功能
2. 自动的表单校验：组件绑定了data，且符合[uni-forms](https://ext.dcloud.net.cn/plugin?id=2773)组件的表单校验规范，搭配使用会自动实现表单校验
3. 本组件合并了单选多选
4. 本组件有若干风格选择，如普通的单选多选框、并列button风格、tag风格。开发者可以快速选择需要的风格。但作为一个封装组件，样式代码虽然不用自己写了，却会牺牲一定的样式自定义性
在uniCloud开发中，`DB Schema`中配置了enum枚举等类型后，在web控制台的[自动生成表单](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)功能中，会自动生成``uni-data-checkbox``组件并绑定好data
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-data-checkbox)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
\ No newline at end of file
src/uni_modules/uni-load-more/changelog.md 0 → 100644
浏览文件 @ 123cd46e
## 1.3.3（2022-01-20）
- 新增 showText属性 ，是否显示文本
## 1.3.2（2022-01-19）
- 修复 nvue 平台下不显示文本的bug
## 1.3.1（2022-01-19）
- 修复 微信小程序平台样式选择器报警告的问题
## 1.3.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-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more)
## 1.2.1（2021-08-24）
- 新增 支持国际化
## 1.2.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.8（2021-05-12）
- 新增 组件示例地址
## 1.1.7（2021-03-30）
- 修复 uni-load-more 在首页使用时，h5 平台报 'uni is not defined' 的 bug
## 1.1.6（2021-02-05）
- 调整为uni_modules目录规范
src/uni_modules/uni-load-more/components/uni-load-more/i18n/en.json 0 → 100644
浏览文件 @ 123cd46e
{
"uni-load-more.contentdown": "Pull up to show more",
"uni-load-more.contentrefresh": "loading...",
"uni-load-more.contentnomore": "No more data"
}
src/uni_modules/uni-load-more/components/uni-load-more/i18n/index.js 0 → 100644
浏览文件 @ 123cd46e
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
}
src/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json 0 → 100644
浏览文件 @ 123cd46e
{
"uni-load-more.contentdown": "上拉显示更多",
"uni-load-more.contentrefresh": "正在加载...",
"uni-load-more.contentnomore": "没有更多数据了"
}
src/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json 0 → 100644
浏览文件 @ 123cd46e
{
"uni-load-more.contentdown": "上拉顯示更多",
"uni-load-more.contentrefresh": "正在加載...",
"uni-load-more.contentnomore": "沒有更多數據了"
}
src/uni_modules/uni-load-more/package.json 0 → 100644
浏览文件 @ 123cd46e
{
"id": "uni-load-more",
"displayName": "uni-load-more 加载更多",
"version": "1.3.3",
"description": "LoadMore 组件，常用在列表里面，做滚动加载使用。",
"keywords": [
"uni-ui",
"uniui",
"加载更多",
"load-more"
],
"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"
}
}
}
}
}
\ No newline at end of file
src/uni_modules/uni-load-more/readme.md 0 → 100644
浏览文件 @ 123cd46e
### LoadMore 加载更多
> **组件名：uni-load-more**
> 代码块： `uLoadMore`
用于列表中，做滚动加载使用，展示 loading 的各种状态。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-load-more)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
src/uni_modules/uni-scss/changelog.md 0 → 100644
浏览文件 @ 123cd46e
## 1.0.3（2022-01-21）
- 优化 组件示例
## 1.0.2（2021-11-22）
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
## 1.0.1（2021-11-22）
- 修复 vue3中scss语法兼容问题
## 1.0.0（2021-11-18）
- init
src/uni_modules/uni-scss/index.scss 0 → 100644
浏览文件 @ 123cd46e
@import './styles/index.scss';
src/uni_modules/uni-scss/package.json 0 → 100644
浏览文件 @ 123cd46e
{
"id": "uni-scss",
"displayName": "uni-scss 辅助样式",
"version": "1.0.3",
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
"keywords": [
"uni-scss",
"uni-ui",
"辅助样式"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"JS SDK",
"通用 SDK"
],
"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": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"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"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
src/uni_modules/uni-scss/readme.md 0 → 100644
浏览文件 @ 123cd46e
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
\ No newline at end of file
src/uni_modules/uni-scss/styles/index.scss 0 → 100644
浏览文件 @ 123cd46e
@import './setting/_variables.scss';
@import './setting/_border.scss';
@import './setting/_color.scss';
@import './setting/_space.scss';
@import './setting/_radius.scss';
@import './setting/_text.scss';
@import './setting/_styles.scss';
src/uni_modules/uni-scss/styles/setting/_border.scss 0 → 100644
浏览文件 @ 123cd46e
.uni-border {
border: 1px $uni-border-1 solid;
}
\ No newline at end of file
src/uni_modules/uni-scss/styles/setting/_color.scss 0 → 100644
浏览文件 @ 123cd46e
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
// @mixin get-styles($k,$c) {
// @if $k == size or $k == weight{
// font-#{$k}:#{$c}
// }@else{
// #{$k}:#{$c}
// }
// }
$uni-ui-color:(
// 主色
primary: $uni-primary,
primary-disable: $uni-primary-disable,
primary-light: $uni-primary-light,
// 辅助色
success: $uni-success,
success-disable: $uni-success-disable,
success-light: $uni-success-light,
warning: $uni-warning,
warning-disable: $uni-warning-disable,
warning-light: $uni-warning-light,
error: $uni-error,
error-disable: $uni-error-disable,
error-light: $uni-error-light,
info: $uni-info,
info-disable: $uni-info-disable,
info-light: $uni-info-light,
// 中性色
main-color: $uni-main-color,
base-color: $uni-base-color,
secondary-color: $uni-secondary-color,
extra-color: $uni-extra-color,
// 背景色
bg-color: $uni-bg-color,
// 边框颜色
border-1: $uni-border-1,
border-2: $uni-border-2,
border-3: $uni-border-3,
border-4: $uni-border-4,
// 黑色
black:$uni-black,
// 白色
white:$uni-white,
// 透明
transparent:$uni-transparent
) !default;
@each $key, $child in $uni-ui-color {
.uni-#{"" + $key} {
color: $child;
}
.uni-#{"" + $key}-bg {
background-color: $child;
}
}
.uni-shadow-sm {
box-shadow: $uni-shadow-sm;
}
.uni-shadow-base {
box-shadow: $uni-shadow-base;
}
.uni-shadow-lg {
box-shadow: $uni-shadow-lg;
}
.uni-mask {
background-color:$uni-mask;
}
src/uni_modules/uni-scss/styles/setting/_radius.scss 0 → 100644
浏览文件 @ 123cd46e
@mixin radius($r,$d:null ,$important: false){
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
// Key exists within the $uni-radius variable
@if (map-has-key($uni-radius, $r) and $d){
@if $d == t {
border-top-left-radius:$radius-value;
border-top-right-radius:$radius-value;
}@else if $d == r {
border-top-right-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == b {
border-bottom-left-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == l {
border-top-left-radius:$radius-value;
border-bottom-left-radius:$radius-value;
}@else if $d == tl {
border-top-left-radius:$radius-value;
}@else if $d == tr {
border-top-right-radius:$radius-value;
}@else if $d == br {
border-bottom-right-radius:$radius-value;
}@else if $d == bl {
border-bottom-left-radius:$radius-value;
}
}@else{
border-radius:$radius-value;
}
}
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $key} {
@include radius($key)
}
}@else{
.uni-radius {
@include radius($key)
}
}
}
@each $direction in t, r, b, l,tl, tr, br, bl {
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $direction}-#{"" + $key} {
@include radius($key,$direction,false)
}
}@else{
.uni-radius-#{$direction} {
@include radius($key,$direction,false)
}
}
}
}
src/uni_modules/uni-scss/styles/setting/_space.scss 0 → 100644
浏览文件 @ 123cd46e
@mixin fn($space,$direction,$size,$n) {
@if $n {
#{$space}-#{$direction}: #{$size*$uni-space-root}px
} @else {
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
}
}
@mixin get-styles($direction,$i,$space,$n){
@if $direction == t {
@include fn($space, top,$i,$n);
}
@if $direction == r {
@include fn($space, right,$i,$n);
}
@if $direction == b {
@include fn($space, bottom,$i,$n);
}
@if $direction == l {
@include fn($space, left,$i,$n);
}
@if $direction == x {
@include fn($space, left,$i,$n);
@include fn($space, right,$i,$n);
}
@if $direction == y {
@include fn($space, top,$i,$n);
@include fn($space, bottom,$i,$n);
}
@if $direction == a {
@if $n {
#{$space}:#{$i*$uni-space-root}px;
} @else {
#{$space}:#{-$i*$uni-space-root}px;
}
}
}
@each $orientation in m,p {
$space: margin;
@if $orientation == m {
$space: margin;
} @else {
$space: padding;
}
@for $i from 0 through 16 {
@each $direction in t, r, b, l, x, y, a {
.uni-#{$orientation}#{$direction}-#{$i} {
@include get-styles($direction,$i,$space,true);
}
.uni-#{$orientation}#{$direction}-n#{$i} {
@include get-styles($direction,$i,$space,false);
}
}
}
}
\ No newline at end of file
src/uni_modules/uni-scss/styles/setting/_styles.scss 0 → 100644
浏览文件 @ 123cd46e
/* #ifndef APP-NVUE */
$-color-white:#fff;
$-color-black:#000;
@mixin base-style($color) {
color: #fff;
background-color: $color;
border-color: mix($-color-black, $color, 8%);
&:not([hover-class]):active {
background: mix($-color-black, $color, 10%);
border-color: mix($-color-black, $color, 20%);
color: $-color-white;
outline: none;
}
}
@mixin is-color($color) {
@include base-style($color);
&[loading] {
@include base-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&[loading],
&:not([hover-class]):active {
color: $-color-white;
border-color: mix(darken($color,10%), $-color-white);
background-color: mix($color, $-color-white);
}
}
}
@mixin base-plain-style($color) {
color:$color;
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 70%);
&:not([hover-class]):active {
background: mix($-color-white, $color, 80%);
color: $color;
outline: none;
border-color: mix($-color-white, $color, 50%);
}
}
@mixin is-plain($color){
&[plain] {
@include base-plain-style($color);
&[loading] {
@include base-plain-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&:active {
color: mix($-color-white, $color, 40%);
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 80%);
}
}
}
}
.uni-btn {
margin: 5px;
color: #393939;
border:1px solid #ccc;
font-size: 16px;
font-weight: 200;
background-color: #F9F9F9;
// TODO 暂时处理边框隐藏一边的问题
overflow: visible;
&::after{
border: none;
}
&:not([type]),&[type=default] {
color: #999;
&[loading] {
background: none;
&::before {
margin-right:5px;
}
}
&[disabled]{
color: mix($-color-white, #999, 60%);
&,
&[loading],
&:active {
color: mix($-color-white, #999, 60%);
background-color: mix($-color-white,$-color-black , 98%);
border-color: mix($-color-white, #999, 85%);
}
}
&[plain] {
color: #999;
background: none;
border-color: $uni-border-1;
&:not([hover-class]):active {
background: none;
color: mix($-color-white, $-color-black, 80%);
border-color: mix($-color-white, $-color-black, 90%);
outline: none;
}
&[disabled]{
&,
&[loading],
&:active {
background: none;
color: mix($-color-white, #999, 60%);
border-color: mix($-color-white, #999, 85%);
}
}
}
}
&:not([hover-class]):active {
color: mix($-color-white, $-color-black, 50%);
}
&[size=mini] {
font-size: 16px;
font-weight: 200;
border-radius: 8px;
}
&.uni-btn-small {
font-size: 14px;
}
&.uni-btn-mini {
font-size: 12px;
}
&.uni-btn-radius {
border-radius: 999px;
}
&[type=primary] {
@include is-color($uni-primary);
@include is-plain($uni-primary)
}
&[type=success] {
@include is-color($uni-success);
@include is-plain($uni-success)
}
&[type=error] {
@include is-color($uni-error);
@include is-plain($uni-error)
}
&[type=warning] {
@include is-color($uni-warning);
@include is-plain($uni-warning)
}
&[type=info] {
@include is-color($uni-info);
@include is-plain($uni-info)
}
}
/* #endif */
src/uni_modules/uni-scss/styles/setting/_text.scss 0 → 100644
浏览文件 @ 123cd46e
@mixin get-styles($k,$c) {
@if $k == size or $k == weight{
font-#{$k}:#{$c}
}@else{
#{$k}:#{$c}
}
}
@each $key, $child in $uni-headings {
/* #ifndef APP-NVUE */
.uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
/* #ifdef APP-NVUE */
.container .uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
}
src/uni_modules/uni-scss/styles/setting/_variables.scss 0 → 100644
浏览文件 @ 123cd46e
// @use "sass:math";
@import '../tools/functions.scss';
// 间距基础倍数
$uni-space-root: 2 !default;
// 边框半径默认值
$uni-radius-root:5px !default;
$uni-radius: () !default;
// 边框半径断点
$uni-radius: map-deep-merge(
(
0: 0,
// TODO 当前版本暂时不支持 sm 属性
// 'sm': math.div($uni-radius-root, 2),
null: $uni-radius-root,
'lg': $uni-radius-root * 2,
'xl': $uni-radius-root * 6,
'pill': 9999px,
'circle': 50%
),
$uni-radius
);
// 字体家族
$body-font-family: 'Roboto', sans-serif !default;
// 文本
$heading-font-family: $body-font-family !default;
$uni-headings: () !default;
$letterSpacing: -0.01562em;
$uni-headings: map-deep-merge(
(
'h1': (
size: 32px,
weight: 300,
line-height: 50px,
// letter-spacing:-0.01562em
),
'h2': (
size: 28px,
weight: 300,
line-height: 40px,
// letter-spacing: -0.00833em
),
'h3': (
size: 24px,
weight: 400,
line-height: 32px,
// letter-spacing: normal
),
'h4': (
size: 20px,
weight: 400,
line-height: 30px,
// letter-spacing: 0.00735em
),
'h5': (
size: 16px,
weight: 400,
line-height: 24px,
// letter-spacing: normal
),
'h6': (
size: 14px,
weight: 500,
line-height: 18px,
// letter-spacing: 0.0125em
),
'subtitle': (
size: 12px,
weight: 400,
line-height: 20px,
// letter-spacing: 0.00937em
),
'body': (
font-size: 14px,
font-weight: 400,
line-height: 22px,
// letter-spacing: 0.03125em
),
'caption': (
'size': 12px,
'weight': 400,
'line-height': 20px,
// 'letter-spacing': 0.03333em,
// 'text-transform': false
)
),
$uni-headings
);
// 主色
$uni-primary: #2979ff !default;
$uni-primary-disable:lighten($uni-primary,20%) !default;
$uni-primary-light: lighten($uni-primary,25%) !default;
// 辅助色
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
$uni-success: #18bc37 !default;
$uni-success-disable:lighten($uni-success,20%) !default;
$uni-success-light: lighten($uni-success,25%) !default;
$uni-warning: #f3a73f !default;
$uni-warning-disable:lighten($uni-warning,20%) !default;
$uni-warning-light: lighten($uni-warning,25%) !default;
$uni-error: #e43d33 !default;
$uni-error-disable:lighten($uni-error,20%) !default;
$uni-error-light: lighten($uni-error,25%) !default;
$uni-info: #8f939c !default;
$uni-info-disable:lighten($uni-info,20%) !default;
$uni-info-light: lighten($uni-info,25%) !default;
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
$uni-main-color: #3a3a3a !default; // 主要文字
$uni-base-color: #6a6a6a !default; // 常规文字
$uni-secondary-color: #909399 !default; // 次要文字
$uni-extra-color: #c7c7c7 !default; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0 !default;
$uni-border-2: #EDEDED !default;
$uni-border-3: #DCDCDC !default;
$uni-border-4: #B9B9B9 !default;
// 常规色
$uni-black: #000000 !default;
$uni-white: #ffffff !default;
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
// 背景色
$uni-bg-color: #f7f7f7 !default;
/* 水平间距 */
$uni-spacing-sm: 8px !default;
$uni-spacing-base: 15px !default;
$uni-spacing-lg: 30px !default;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
src/uni_modules/uni-scss/styles/tools/functions.scss 0 → 100644
浏览文件 @ 123cd46e
// 合并 map
@function map-deep-merge($parent-map, $child-map){
$result: $parent-map;
@each $key, $child in $child-map {
$parent-has-key: map-has-key($result, $key);
$parent-value: map-get($result, $key);
$parent-type: type-of($parent-value);
$child-type: type-of($child);
$parent-is-map: $parent-type == map;
$child-is-map: $child-type == map;
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
$result: map-merge($result, ( $key: $child ));
}@else {
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
}
}
@return $result;
};
src/uni_modules/uni-scss/theme.scss 0 → 100644
浏览文件 @ 123cd46e
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
// 辅助色
$uni-success: #4cd964;
// 警告色
$uni-warning: #f0ad4e;
// 错误色
$uni-error: #dd524d;
// 描述色
$uni-info: #909399;
// 中性色
$uni-main-color: #303133;
$uni-base-color: #606266;
$uni-secondary-color: #909399;
$uni-extra-color: #C0C4CC;
// 背景色
$uni-bg-color: #f5f5f5;
// 边框颜色
$uni-border-1: #DCDFE6;
$uni-border-2: #E4E7ED;
$uni-border-3: #EBEEF5;
$uni-border-4: #F2F6FC;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
src/uni_modules/uni-scss/variables.scss 0 → 100644
浏览文件 @ 123cd46e
@import './styles/setting/_variables.scss';
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
$uni-primary-disable:mix(#fff,$uni-primary,50%);
$uni-primary-light: mix(#fff,$uni-primary,80%);
// 辅助色
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
$uni-success: #18bc37;
$uni-success-disable:mix(#fff,$uni-success,50%);
$uni-success-light: mix(#fff,$uni-success,80%);
$uni-warning: #f3a73f;
$uni-warning-disable:mix(#fff,$uni-warning,50%);
$uni-warning-light: mix(#fff,$uni-warning,80%);
$uni-error: #e43d33;
$uni-error-disable:mix(#fff,$uni-error,50%);
$uni-error-light: mix(#fff,$uni-error,80%);
$uni-info: #8f939c;
$uni-info-disable:mix(#fff,$uni-info,50%);
$uni-info-light: mix(#fff,$uni-info,80%);
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
$uni-main-color: #3a3a3a; // 主要文字
$uni-base-color: #6a6a6a; // 常规文字
$uni-secondary-color: #909399; // 次要文字
$uni-extra-color: #c7c7c7; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0;
$uni-border-2: #EDEDED;
$uni-border-3: #DCDCDC;
$uni-border-4: #B9B9B9;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
// 背景色
$uni-bg-color: #f7f7f7;
/* 水平间距 */
$uni-spacing-sm: 8px;
$uni-spacing-base: 15px;
$uni-spacing-lg: 30px;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4);
src/utils/auth.ts
浏览文件 @ 123cd46e
export const TokenKey: string = 'X-Litemall-Admin-Token' export const TokenKey: string = 'X-Litemall-Admin-Token';
// 获取指定缓存 // 获取指定缓存
export const getCache= (key: string) => { export const getCache = (key: string) => {
uni.getStorage({ uni.getStorage({
key: key, key: key,
success: (res: any) => { success: (res: any) => {
return res.data return res.data;
} }
}) });
} };
// 获取缓存信息 // 获取缓存信息
export const getAllCache= () => { export const getAllCache = () => {
uni.getStorageInfo({ uni.getStorageInfo({
success: (res: any) => { success: (res: any) => {
return res return res;
} }
}) });
} };
// 修改指定缓存 // 修改指定缓存
export const setCache = (key: string, data: any) => { export const setCache = (key: string, data: any) => {
uni.setStorage({ uni.setStorage({
key: key, key: key,
data data
}) });
} };
// 移除制定缓存 // 移除制定缓存
export const renoveCache = (key: any) => { export const renoveCache = (key: any) => {
uni.removeStorage({ uni.removeStorage({
key key
}) });
} };
// 清除本地缓存 // 清除本地缓存
export const clearCache = () => { export const clearCache = () => {
uni.clearStorage() uni.clearStorage();
} };
\ No newline at end of file
export const toLogin = () => {
uni.getStorage({
key: 'token',
fail:(e: any) => {
if (e.errMsg == 'getStorage:fail data not found') {
uni.navigateTo({
url: '../login/login',
success(res: any) {
uni.showToast({
title: '请先登录',
icon: 'error'
});
}
});
}
}
});
};
src/utils/request.ts
浏览文件 @ 123cd46e
...@@ -11,7 +11,7 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?: ...@@ -11,7 +11,7 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?:
'X-Litemall-Token': uni.getStorageSync('token') 'X-Litemall-Token': uni.getStorageSync('token')
}; };
} else { } else {
let pages = getCurrentPages(); let pages = getCurrentPages();
let curRoute = pages[pages.length - 1].route; let curRoute = pages[pages.length - 1].route;
// if (curRoute != 'pages/login/login') { // if (curRoute != 'pages/login/login') {
// uni.showToast({ // uni.showToast({
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论