1 changed files with 406 additions and 0 deletions
@ -0,0 +1,406 @@ |
|||||
|
<template> |
||||
|
<view class="page1"> |
||||
|
<view class="title" style="z-index: 81;"> |
||||
|
<view class="title-sreach"> |
||||
|
<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}"> |
||||
|
<uni-icons type="left" size="28"></uni-icons> |
||||
|
</view> |
||||
|
<view class="title-search" :style="{'padding-top': menuButtonInfo.top +'px'}" @tap="goDetail('search')"> |
||||
|
<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons> |
||||
|
<input type="text" placeholder="搜索" @input="search" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view style="width: 100%;display: flex;height: 100%;padding-bottom: 30px;padding-top: 28%;position: fixed;top: 0;z-index:80;"> |
||||
|
<view class="content-left"> |
||||
|
<view class="left-box" v-for="(item, index) in indexList" :key="index" |
||||
|
:class="item.parentId ? 'left-box-hover':''" @tap="clickLeftBtn(index)"> |
||||
|
<text style="width: 100%;height: 90rpx;line-height: 90rpx;display: inline-block;overflow: hidden;" |
||||
|
:class="item.parentId ? 'red' :''">{{item.categoryName}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="content-right" style="padding-bottom: 70px;margin-bottom: 100px;"> |
||||
|
<view class="right-box" v-for="(item,index) in shopList" :key="index"> |
||||
|
<view class="box-left" @tap.stop="largeImg(item)"> |
||||
|
<view v-if="(item.buyCountNew!= null && item.buyCountNew!= undefined)" style="position: absolute;left: 110rpx;color: #fff;background: red;width: 45rpx;height: 40rpx;font-size: 28rpx;text-align: center;line-height: 40rpx;border-radius: 5px;"> |
||||
|
{{item.buyCountNew}} |
||||
|
</view> |
||||
|
<img class="img-radius" :src="item.productPicture" alt="" v-if="item.productPicture"> |
||||
|
<view class="noPic" v-else>暂无图片</view> |
||||
|
</view> |
||||
|
<view class="box-right"> |
||||
|
<view class="box-right-name"> |
||||
|
{{item.productName == null ?'':item.productName}} |
||||
|
<text style="color: red;" v-if="item.delFlag == 0">(已下架)</text> |
||||
|
</view> |
||||
|
<view class="box-right-num" @tap="goDetail('goods',item)"> |
||||
|
<!-- 供应商:{{item.supplierName== null?'':item.supplierName}} --> |
||||
|
|
||||
|
</view> |
||||
|
<view class="box-right-price"> |
||||
|
<view class="price-box"> |
||||
|
<text>{{item.lunchBox}}</text> |
||||
|
<text>餐盒费</text> |
||||
|
</view> |
||||
|
<view class="price-box"> |
||||
|
<text>{{item.startPayNum}}</text> |
||||
|
<text>起售数量</text> |
||||
|
</view> |
||||
|
<view class="price-box" @tap="item.isShow = !item.isShow" style="flex: 1;text-align: right;padding-top: 13px;"> |
||||
|
<uni-icons type="down" size="18"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="right-box" v-for="(item,index) in shopList1" :key="index"> |
||||
|
<view class="box-left" @tap.stop="largeImg(item)"> |
||||
|
<view v-if="(item.buyCountNew!= null && item.buyCountNew!= undefined)" style="position: absolute;left: 110rpx;color: #fff;background: red;width: 45rpx;height: 40rpx;font-size: 28rpx;text-align: center;line-height: 40rpx;border-radius: 5px;"> |
||||
|
{{item.buyCountNew}} |
||||
|
</view> |
||||
|
<img class="img-radius" :src="item.productPicture" alt="" v-if="item.productPicture"> |
||||
|
<view class="noPic" v-else>暂无图片</view> |
||||
|
</view> |
||||
|
<view class="box-right"> |
||||
|
<view class="box-right-name"> |
||||
|
{{item.productSn}} |
||||
|
<text v-if="item.productName">({{item.productName == null ?'':item.productName}})</text> |
||||
|
</view> |
||||
|
<view class="box-right-num"></view> |
||||
|
<view class="box-right-price"> |
||||
|
<view class="price-box"> |
||||
|
<text>{{item.lunchBox}}</text> |
||||
|
<text>餐盒费</text> |
||||
|
</view> |
||||
|
<view class="price-box"> |
||||
|
<text>{{item.startPayNum}}</text> |
||||
|
<text>起售数量</text> |
||||
|
</view> |
||||
|
<view class="price-box" @tap="item.isShow = !item.isShow" style="flex: 1;text-align: right;padding-top: 13px;"> |
||||
|
<uni-icons type="down" size="18"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="bottom-box"> |
||||
|
<view class="bottom-btn" @tap="goDetail('goods')" style="background: rgba(0, 35, 28, 1);color: rgba(166, 255, 234, 1);">新增商品</view> |
||||
|
<view class="bottom-btn" @tap="goDetail('type')">新增分类</view> |
||||
|
</view> |
||||
|
<u-loadmore :status="status" /> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
indexList: [], |
||||
|
shopList: [], |
||||
|
shopList1: [], |
||||
|
pageNum: 1, |
||||
|
searchName: '', |
||||
|
shopId:'', |
||||
|
categoryId: '', |
||||
|
} |
||||
|
}, |
||||
|
filters: { |
||||
|
|
||||
|
}, |
||||
|
onShow() { |
||||
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
||||
|
this.getGategoryList() |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.shopId = uni.getStorageSync('shopId') |
||||
|
|
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
if (this.pageNum >= this.pages) return; |
||||
|
// this.status = 'loading'; |
||||
|
this.pageNum++; |
||||
|
if(this.gateType == 'search'){ |
||||
|
this.getShareList('search'); |
||||
|
}else{ |
||||
|
this.getShareList(); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
back() { |
||||
|
uni.navigateBack() |
||||
|
}, |
||||
|
//顶部搜索框 |
||||
|
search(e) { |
||||
|
this.pageNum = 1 |
||||
|
this.shopList1 = [] |
||||
|
this.shopList = [] |
||||
|
if (e == '') { |
||||
|
this.searchName = "" |
||||
|
this.getShareList() |
||||
|
} else { |
||||
|
this.searchName = e |
||||
|
this.getShareList('search') |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
goDetail(type,item){ |
||||
|
let url="" |
||||
|
if(type == 'goods'){ |
||||
|
url = '/package1/myCenter/addGoods?dataList='+ JSON.stringify(item) |
||||
|
}else{ |
||||
|
url = '/package1/myCenter/addType' |
||||
|
} |
||||
|
uni.navigateTo({ |
||||
|
url:url |
||||
|
}) |
||||
|
}, |
||||
|
//点击分类获取商品列表 |
||||
|
getShareList(type) { |
||||
|
let data = {} |
||||
|
if (type == 'search') { |
||||
|
this.gateType = 'search' |
||||
|
data = { |
||||
|
categoryId: "", |
||||
|
searchStr: this.searchName, |
||||
|
pageNum: this.pageNum, |
||||
|
pageSize: '10' |
||||
|
} |
||||
|
} else { |
||||
|
this.gateType = '' |
||||
|
data = { |
||||
|
categoryId: this.categoryId, |
||||
|
searchStr: this.searchName, |
||||
|
pageNum: this.pageNum, |
||||
|
pageSize: '10' |
||||
|
} |
||||
|
} |
||||
|
let that = this |
||||
|
this.tui.request("/app/product/getShareList", "POST", data, false, false).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
if (type == 'search') { |
||||
|
this.shopList = [] |
||||
|
this.status = 'nomore'; |
||||
|
if (this.pages == 1) { |
||||
|
this.shopList1 = res.result.records |
||||
|
} else { |
||||
|
this.shopList1 = [...this.shopList1, ...res.result.records] |
||||
|
} |
||||
|
for(let i=0;i<this.shopList1.length;i++){ |
||||
|
this.shopList1[i].isShow = false |
||||
|
} |
||||
|
this.pages = res.result.pages |
||||
|
} else { |
||||
|
this.shopList1 = [] |
||||
|
this.status = 'nomore'; |
||||
|
if (this.pages == 1) { |
||||
|
this.shopList = res.result.records |
||||
|
} else { |
||||
|
this.shopList = [...this.shopList, ...res.result.records] |
||||
|
} |
||||
|
for(let i=0;i<this.shopList.length;i++){ |
||||
|
this.shopList[i].isShow = false |
||||
|
} |
||||
|
this.pages = res.result.pages |
||||
|
} |
||||
|
} else { |
||||
|
this.tui.toast(res.message) |
||||
|
} |
||||
|
}).catch((res) => {}) |
||||
|
}, |
||||
|
//点击左侧菜单切换 |
||||
|
clickLeftBtn(index) { |
||||
|
for (var i = 0; i < this.indexList.length; i++) { |
||||
|
if (i == index) { |
||||
|
this.indexList[i].parentId = true |
||||
|
} else { |
||||
|
this.indexList[i].parentId = false |
||||
|
} |
||||
|
} |
||||
|
this.categoryId = this.indexList[index].id |
||||
|
this.pageNum = 1 |
||||
|
this.searchName = "" |
||||
|
this.shopList1 = [] |
||||
|
this.shopList = [] |
||||
|
this.getShareList() |
||||
|
}, |
||||
|
//初始化获取分类列表 |
||||
|
getGategoryList() { |
||||
|
this.tui.request("/app/productCategory/list", "get", { |
||||
|
shopId:this.shopId |
||||
|
}, false, true).then((res) => { |
||||
|
if (res.code == 200) { |
||||
|
this.indexList = res.result; |
||||
|
for (var i = 0; i < this.indexList.length; i++) { |
||||
|
if (i == 0) { |
||||
|
this.indexList[i].parentId = true |
||||
|
} else { |
||||
|
this.indexList[i].parentId = false |
||||
|
} |
||||
|
} |
||||
|
this.categoryId = this.indexList[0].id |
||||
|
this.getShareList(); |
||||
|
} else { |
||||
|
this.tui.toast(res.message) |
||||
|
} |
||||
|
}).catch((res) => {}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
page { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 24rpx; |
||||
|
background: #F5F8F5; |
||||
|
color: #00231C; |
||||
|
} |
||||
|
|
||||
|
.page1 { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 24rpx; |
||||
|
position: relative; |
||||
|
|
||||
|
} |
||||
|
.title{ |
||||
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat; |
||||
|
width: 100%; |
||||
|
height: 13%; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
} |
||||
|
.title-sreach{ |
||||
|
width: 75%; |
||||
|
display: flex; |
||||
|
height: 200rpx; |
||||
|
} |
||||
|
.back-btn{ |
||||
|
padding-top: 55px; |
||||
|
} |
||||
|
.title-search{ |
||||
|
margin-top: 55px; |
||||
|
display: flex; |
||||
|
background: #fff; |
||||
|
height: 54rpx; |
||||
|
margin-left: 20rpx; |
||||
|
border-radius: 54rpx; |
||||
|
flex: 1; |
||||
|
input{ |
||||
|
height: 54rpx; |
||||
|
line-height: 54rpx; |
||||
|
} |
||||
|
} |
||||
|
.content-left { |
||||
|
width: 170rpx; |
||||
|
background: #eee; |
||||
|
overflow: scroll; |
||||
|
} |
||||
|
.left-box { |
||||
|
width: 100%; |
||||
|
height: 90rpx; |
||||
|
font-size: 30rpx; |
||||
|
text-align: center; |
||||
|
line-height: 90rpx; |
||||
|
border-bottom: 1px solid #fff; |
||||
|
} |
||||
|
.left-box-hover { |
||||
|
width: 100%; |
||||
|
height: 90rpx; |
||||
|
font-size: 30rpx; |
||||
|
text-align: center; |
||||
|
line-height: 90rpx; |
||||
|
border-bottom: 1px solid #fff; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.red { |
||||
|
border-right: 3px solid red; |
||||
|
} |
||||
|
.content-right { |
||||
|
flex: 1; |
||||
|
overflow-y: scroll; |
||||
|
height: 100%; |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.right-box { |
||||
|
width: 100%; |
||||
|
height: 190rpx; |
||||
|
display: flex; |
||||
|
border-bottom: 1px solid #eee; |
||||
|
position: relative; |
||||
|
} |
||||
|
.box-left { |
||||
|
width: 130rpx; |
||||
|
height: 131rpx; |
||||
|
background-size: 100%; |
||||
|
margin: 25rpx 30rpx 35rpx 10rpx; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.box-left img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.box-right { |
||||
|
margin-top: 17rpx; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.box-right-name { |
||||
|
font-size: 30rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.box-right-num { |
||||
|
padding: 5rpx 0; |
||||
|
color: #777; |
||||
|
text-align: right; |
||||
|
padding-right: 10px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
|
||||
|
.box-right-price { |
||||
|
display: flex; |
||||
|
font-size: 25rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.price-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.price-box text:first-child { |
||||
|
color: #ffa200 |
||||
|
} |
||||
|
.bottom-box { |
||||
|
width: 100%; |
||||
|
height: 140rpx; |
||||
|
display: flex; |
||||
|
background: #fff; |
||||
|
z-index: 98; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
display: flex; |
||||
|
padding-top: 10px; |
||||
|
} |
||||
|
|
||||
|
.bottom-btn { |
||||
|
width: 50%; |
||||
|
height: 45px; |
||||
|
line-height: 45px; |
||||
|
border-radius: 45px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 700; |
||||
|
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1)); |
||||
|
text-align: center; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue