b2894lxlx/yunxinwei-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第一次提交

Browse Source
This commit is contained in:
gxwebsoft
2023-08-04 13:04:21 +08:00
commit 7a73b38bd5
764 changed files with 166417 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

321
package/shops/detail/components/commodity.vue Executable file
View File

@@ -0,0 +1,321 @@
<template>
<view class="container" :style="appThemeStyle">
<!-- 一级分类 -->
<scroll-view class="cate-left" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
<text class="type-nav" :class="{ selected: curIndex == -1 }" @click="handleSelectNav(-1)">全部</text>
<text class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in list" :key="index"
@click="handleSelectNav(index)">{{ item.name }}</text>
</scroll-view>
<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" :bottombar="false" @up="upCallback">
<view class="cate-content">
<!-- 设备列表 -->
<view class="equipment-list">
<view class="equipment-item--container" v-for="(item, index) in equipmentList.data" :key="index">
<view class="equipment-item" @click="onTargetEquipment(item.equipment_id)">
<!-- 设备图片 -->
<view class="equipment-item_left">
<image class="image" :src="item.equipment_image"></image>
</view>
<view class="equipment-item_right">
<!-- 设备标题 -->
<view class="equipment-name">
<text class="title">{{ item.equipment_name }}</text>
<text class="desc">可租 {{ item.stock_total }} 个</text>
</view>
<!-- 设备信息 -->
<view class="equipment-item_desc">
<view class="desc_footer">
<view class="item-prices oneline-hide">
<text class="price_x">¥{{ item.equipment_price_min }}/月</text>
<!-- <text v-if="item.line_price_min > 0" class="price_y">¥{{ item.line_price_min }}</text> -->
</view>
<u-button size="mini" type="warning" @click="onTargetEquipment(item.equipment_id)">立即租用</u-button>
<!-- <add-cart-btn v-if="setting.showAddCart" :btnStyle="setting.cartStyle" @click="handleAddCart(item)" /> -->
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 加入购物车组件 -->
<AddCartPopup ref="AddCartPopup" @addCart="onUpdateCartTabBadge" />
</view>
</mescroll-body>
</view>
</template>
<script>
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
import { getEmptyPaginateObj, getMoreListData, setCartTabBadge } from '@/core/app'
import { PageCategoryStyleEnum } from '@/common/enum/store/page/category'
import Empty from '@/components/empty'
import AddCartBtn from '@/components/add-cart-btn'
import AddCartPopup from '@/components/add-cart-popup'
import { rpx2px } from '@/utils/util'
import * as EquipmentApi from '@/api/equipment'
import storage from '@/utils/storage'
const pageSize = 15
export default {
components: {
MescrollBody,
Empty,
AddCartBtn,
AddCartPopup
},
mixins: [MescrollMixin],
props: {
// 分类列表
list: {
type: Array,
default: []
},
// 分类设置
setting: {
type: Object,
default: () => {}
},
// 店铺ID
shopId:{
type: Number,
default: 10001
},
// 设备名称搜索
equipmentName:{
type: String,
default: ''
}
},
data() {
return {
// 枚举类
PageCategoryStyleEnum,
// 列表高度
scrollHeight: 0,
// 一级分类：指针
curIndex: -1,
// 设备列表
equipmentList: getEmptyPaginateObj(),
// 上拉加载配置
upOption: {
// 首次自动执行
auto: true,
// 每页数据的数量; 默认10
page: { size: pageSize },
// 数量要大于3条才显示无更多数据
noMoreSize: 3,
// 返回顶部
toTop: { right: 30, bottom: 48, zIndex: 9 }
}
}
},
created() {
// 设置分类列表高度
this.setListHeight()
},
methods: {
/**
* 上拉加载的回调 (页面初始化时也会执行一次)
* 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
* @param {Object} page
*/
upCallback(page) {
const app = this
// 设置列表数据
app.getEquipmentList(page.num)
.then(list => {
const curPageLen = list.data.length
const totalSize = list.data.total
app.mescroll.endBySize(curPageLen, totalSize)
})
.catch(() => app.mescroll.endErr())
},
/**
* 获取设备列表
* @param {Number} pageNo 页码
*/
getEquipmentList(pageNo = 1) {
const app = this
const categoryId = app.curIndex > -1 ? app.list[app.curIndex].category_id : 0
const { shopId, equipmentName } = this
return new Promise((resolve, reject) => {
EquipmentApi.list({ categoryId, page: pageNo, shopId, equipmentName, storeHouseEquipment: true }, { load: false })
.then(result => {
const newList = result.data.list
app.equipmentList.data = getMoreListData(newList, app.equipmentList, pageNo)
app.equipmentList.last_page = newList.last_page
resolve(newList)
})
.catch(reject)
})
},
// 设置列表内容的高度
setListHeight() {
const { windowHeight } = uni.getSystemInfoSync()
this.scrollHeight = windowHeight - rpx2px(96)
},
// 一级分类：选中分类
handleSelectNav(index) {
this.curIndex = index
this.onRefreshList()
},
// 刷新列表数据
onRefreshList() {
this.equipmentList = getEmptyPaginateObj()
setTimeout(() => this.mescroll.resetUpScroll(), 120)
},
// 跳转设备详情
onTargetEquipment(equipmentId) {
this.$navTo('package/equipment/detail', { equipmentId })
},
// 点击加入购物车
handleAddCart(item) {
this.$refs.AddCartPopup.handle(item)
this.$emit('addCart')
},
// 更新购物车角标
onUpdateCartTabBadge() {
console.log('onUpdateCartTabBadge')
setCartTabBadge()
},
}
}
</script>
<style lang="scss" scoped>
.container {
padding-left: 173rpx;
}
// 分类内容
.cate-content {
z-index: 1;
background: #fff;
padding-top: 286rpx;
}
// 一级分类+二级分类 20
.cate-left {
width: 173rpx;
height: 100%;
background: #f8f8f8;
color: #444;
position: fixed;
top: calc(286rpx + var(--window-top));
left: var(--window-left);
bottom: var(--window-bottom);
}
// 左侧一级分类
.type-nav {
position: relative;
height: 90rpx;
z-index: 10;
display: block;
font-size: 26rpx;
display: flex;
justify-content: center;
align-items: center;
&.selected {
background: #fff;
border-right: none;
font-size: 28rpx;
color: $main-bg
}
}
// 设备列表
.equipment-list {
background: #fff;
}
.equipment-item {
padding: 28rpx 22rpx;
display: flex;
}
.equipment-item_left {
position: relative;
background: #fff;
margin-right: 20rpx;
.image {
display: block;
width: 180rpx;
height: 180rpx;
}
}
.equipment-item_right {
position: relative;
flex: 1;
.equipment-name {
display: flex;
flex-direction: column;
width: 100%;
min-height: 68rpx;
font-size: 28rpx;
line-height: 1.3;
color: #333;
.title{
font-weight: bold;
font-size: 30rpx;
}
.desc{
color: #666;
font-size: 24rpx;
}
}
}
.equipment-item_desc {
margin-top: 20rpx;
.people {
margin-right: 14rpx;
}
.desc_footer {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
right: 0rpx;
bottom: 0rpx;
min-height: 44rpx;
.item-prices {
padding-right: 6rpx;
.price_x {
margin-right: 14rpx;
color: #ff0000;
font-size: 28rpx;
}
.price_y {
color: #999;
text-decoration: line-through;
font-size: 24rpx;
}
}
}
}
</style>

110
package/shops/detail/components/primary.vue Executable file
View File

@@ -0,0 +1,110 @@
<template>
<view class="primary">
<!-- 一级分类(大图) 10 -->
<view v-if="list.length > 0 && display == PageCategoryStyleEnum.ONE_LEVEL_BIG.value" class="cate-content">
<view class="cate-wrapper cate_style__10">
<view class="cate-item" v-for="(item, index) in list" :key="index" @click="onTargetGoodsList(item.category_id)">
<image v-if="item.image" class="image" mode="widthFix" :src="item.image.preview_url"></image>
</view>
</view>
</view>
<!-- 一级分类(小图) 11 -->
<view v-if="list.length > 0 && display == PageCategoryStyleEnum.ONE_LEVEL_SMALL.value" class="cate-content">
<view class="cate-wrapper cate_style__11">
<view class="cate-item" v-for="(item, index) in list" :key="index" @click="onTargetGoodsList(item.category_id)">
<image v-if="item.image" class="image" mode="widthFix" :src="item.image.preview_url"></image>
<view class="cate-name">{{ item.name }}</view>
</view>
</view>
</view>
<empty v-if="!list.length" :tips="'亲，暂无商品分类' + display" />
</view>
</template>
<script>
import { PageCategoryStyleEnum } from '@/common/enum/store/page/category'
import Empty from '@/components/empty'
export default {
components: {
Empty
},
props: {
// 分类页样式
display: {
type: Number,
default: 10
},
// 分类列表
list: {
type: Array,
default: []
}
},
data() {
return {
// 枚举类
PageCategoryStyleEnum,
}
},
methods: {
// 跳转至商品列表页
onTargetGoodsList(categoryId) {
this.$navTo('pages/goods/list', { categoryId })
}
}
}
</script>
<style lang="scss" scoped>
// 分类内容
.cate-content {
z-index: 1;
background: #fff;
padding-top: 396rpx;
.cate-wrapper {
padding: 0 20rpx 20rpx 20rpx;
box-sizing: border-box;
}
}
// 一级分类(大图) 10
.cate_style__10 .cate-item {
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
.image {
display: block;
width: 100%;
height: auto;
}
}
// 一级分类(小图) 11
.cate_style__11 .cate-item {
float: left;
padding: 25rpx;
width: 33.3333%;
text-align: center;
box-sizing: border-box;
.image {
display: block;
width: 100%;
height: 33vw;
margin-bottom: 12rpx;
}
.cate-name {
font-size: 28rpx;
color: #555;
}
}
</style>

94
package/shops/detail/components/search.vue Executable file
View File

@@ -0,0 +1,94 @@
<template>
<view class="diy-search">
<view class="inner" :class="itemStyle.searchStyle" @click="onTargetSearch">
<view class="search-input" :style="{ textAlign: itemStyle.textAlign }">
<text class="search-icon iconfont icon-search"></text>
<input v-model="searchValue" class="input" @confirm="onSearch" focus="true" placeholder="请输入关键词"
type="text"></input>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
searchValue: ''
}
},
methods: {
/**
* 搜索提交
*/
onSearch() {
const {
searchValue
} = this
if (searchValue) {
// 记录历史搜索
this.setHistory(searchValue)
// 跳转到商品列表页
this.$navTo('pages/goods/list', {
search: searchValue
})
}
},
}
}
</script>
<style lang="scss" scoped>
.diy-search {
background: #e2f2fb;
padding: 20rpx 40rpx;
font-size: 26rpx;
.inner {
width: 360rpx;
height: 60rpx;
background: #fff;
border-radius: 100rpx;
overflow: hidden;
&.radius {
border-radius: 10rpx;
}
&.round {
border-radius: 60rpx;
}
}
.search-input {
height: 60rpx;
color: #999;
padding: 0 20rpx;
display: flex;
align-items: center;
.search-icon {
margin-right: 8rpx;
}
}
.flow-delivery {
background-color: #2C71C7;
padding: 10rpx 26rpx;
color: #FFFFFF;
display: flex;
justify-content: space-between;
}
.col-title {
color: #FFFFFF;
}
.my-order {
border: 1px solid #fff;
border-radius: 20rpx;
padding: 0rpx 20rpx;
}
}
</style>

180
package/shops/detail/components/secondary.vue Executable file
View File

@@ -0,0 +1,180 @@
<template>
<view v-if="list.length > 0" class="secondary" :style="appThemeStyle">
<!-- 二级分类 20 -->
<view class="cate-content">
<!-- 左侧 一级分类 -->
<scroll-view class="cate-left" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
<text class="type-nav" :class="{ selected: curIndex == index }" v-for="(item, index) in list" :key="index"
@click="handleSelectNav(index)">{{ item.name }}</text>
</scroll-view>
<!-- 右侧 二级分类 -->
<scroll-view class="cate-right" :scroll-top="scrollTop" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
<view v-if="list[curIndex]" class="cate-right-cont">
<view class="cate-two-box">
<view class="cate-cont-box">
<view class="flex-three" v-for="(item, idx) in list[curIndex].children" :key="idx" @click="onTargetGoodsList(item.category_id)">
<view class="cate-img-padding">
<view v-if="item.image" class="cate-img">
<image class="image" mode="scaleToFill" :src="item.image.preview_url"></image>
</view>
</view>
<text class="name oneline-hide">{{ item.name }}</text>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<empty v-if="!list.length" />
</view>
</template>
<script>
import { PageCategoryStyleEnum } from '@/common/enum/store/page/category'
import Empty from '@/components/empty'
import { rpx2px } from '@/utils/util'
export default {
components: {
Empty
},
props: {
// 分类列表
list: {
type: Array,
default: []
},
},
data() {
return {
// 枚举类
PageCategoryStyleEnum,
// 列表高度
scrollHeight: 0,
// 一级分类：指针
curIndex: 0,
// 内容区竖向滚动条位置
scrollTop: 0,
}
},
created() {
// 设置分类列表高度
this.setListHeight()
},
methods: {
// 设置列表内容的高度
setListHeight() {
const { windowHeight } = uni.getSystemInfoSync()
this.scrollHeight = windowHeight - rpx2px(96)
},
// 一级分类：选中分类
handleSelectNav(index) {
this.curIndex = index
this.scrollTop = 0
},
// 跳转至商品列表页
onTargetGoodsList(categoryId) {
this.$navTo('pages/goods/list', { categoryId })
}
}
}
</script>
<style lang="scss" scoped>
// 分类内容
.cate-content {
display: flex;
z-index: 1;
background: #fff;
padding-top: 96rpx;
}
// 一级分类+二级分类 20
.cate-left {
height: 100%;
display: flex;
flex-direction: column;
flex: 0 0 23%;
background: #f8f8f8;
color: #444;
}
.cate-right {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
.cate-right-cont {
width: 100%;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
padding-top: 15rpx;
.cate-two-box {
width: 100%;
padding: 0 10px;
}
}
}
// 左侧一级分类
.type-nav {
position: relative;
height: 90rpx;
z-index: 10;
display: block;
font-size: 26rpx;
display: flex;
justify-content: center;
align-items: center;
&.selected {
background: #fff;
color: $main-bg;
border-right: none;
font-size: 28rpx;
}
}
// 右侧二级分类
.cate-cont-box {
margin-bottom: 30rpx;
padding-bottom: 10rpx;
background: #fff;
overflow: hidden;
.name {
display: block;
padding-bottom: 30rpx;
text-align: center;
font-size: 26rpx;
color: #444444;
}
.cate-img-padding {
padding: 16rpx 16rpx 4rpx 16rpx;
}
.cate-img {
position: relative;
width: 100%;
padding-top: 100%;
.image {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 10rpx;
}
}
}
</style>

177
package/shops/detail/components/shop-banner.vue Executable file
View File

@@ -0,0 +1,177 @@
<template>
<view>
<block v-if="shop.shopName">
<!-- 搜索框 -->
<view class="shop-banner" v-if="shop.backgroundUrl" :style="'background-image: url('+ shop.backgroundUrl +');background-size: 100%;'">
<view class="shop-logo">
<u-avatar :src="shop.logoUrl" :size="120" mode="square" :show-level="true"></u-avatar>
</view>
<view class="shop-info">
<view class="title">{{shop.shopName}}
<u-icon name="star-fill" color="#fd8008" v-if="shop.follow" @click="onFollow(shop.shopId)"></u-icon>
<u-icon name="star" v-else @click="onFollow(shop.shopId)"></u-icon>
</view>
<!-- <view class="about">联系电话：{{ shop.phone }}</view> -->
<view class="address">地址：{{ shop.fullAddress }}</view>
</view>
</view>
<view class="shop-banner" v-else>
<view class="shop-logo">
<u-avatar :src="shop.logoUrl" :size="120" mode="square" :show-level="true"></u-avatar>
</view>
<view class="shop-info">
<view class="title">{{shop.shopName}} 关注</view>
<!-- <view class="about">联系电话：{{ shop.phone }}</view> -->
<view class="address">地址：{{ shop.fullAddress }}</view>
</view>
</view>
<view class="diy-search">
<view class="inner">
<view class="search-input">
<text class="search-icon iconfont icon-search"></text>
<input v-model="searchValue" class="input" @confirm="onSearch" focus="true" placeholder="请输入关键词"
type="text"></input>
</view>
</view>
</view>
</block>
</view>
</template>
<script>
export default {
props: {
tips: {
type: String,
default: '搜索商品'
},
shop: {
type: Object,
default: () => {}
}
},
data() {
return {
searchValue: ''
}
},
methods: {
onClick() {
this.$emit('event')
},
onFollow(shopId){
this.$emit('onFollow',shopId)
},
/**
* 搜索提交
*/
onSearch() {
const {
searchValue
} = this
if (searchValue) {
this.$emit('event', searchValue)
}
},
}
}
</script>
<style lang="scss" scoped>
.shop-banner {
background-color: #2C71C7;
height: 200rpx;
position: fixed;
top: var(--window-top);
left: var(--window-left);
right: var(--window-right);
z-index: 9;
display: flex;
align-items: center;
.shop-logo {
height: 100%;
display: flex;
align-items: center;
padding-left: 24rpx;
}
.shop-logo image {
width: 140rpx;
height: 140rpx;
background-color: #FFFFFF;
}
.shop-info {
width: 100%;
margin-left: 20rpx;
height: 140rpx;
z-index: 10;
color: #FFFFFF;
.title {
font-size: 38rpx;
font-weight: bold;
padding-bottom: 10rpx;
}
}
}
.diy-search {
width: 750rpx;
background: #e2f2fb;
padding: 20rpx 40rpx;
font-size: 26rpx;
position: fixed;
z-index: 10;
top: 200rpx;
left: var(--window-left);
right: var(--window-right);
.inner {
width: 360rpx;
height: 60rpx;
background: #fff;
border-radius: 100rpx;
overflow: hidden;
&.radius {
border-radius: 10rpx;
}
&.round {
border-radius: 60rpx;
}
}
.search-input {
height: 60rpx;
color: #999;
padding: 0 20rpx;
display: flex;
align-items: center;
.search-icon {
margin-right: 8rpx;
}
}
.flow-delivery {
background-color: #2C71C7;
padding: 10rpx 26rpx;
color: #FFFFFF;
display: flex;
justify-content: space-between;
}
.col-title {
color: #FFFFFF;
}
.my-order {
border: 1px solid #fff;
border-radius: 20rpx;
padding: 0rpx 20rpx;
}
}
</style>