444 lines
11 KiB
Vue
444 lines
11 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="我的店铺" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36'
|
|
back-icon-color="#fff" height='50' :custom-back="btns"></u-navbar>
|
|
<view class="box">
|
|
<!-- <view class="serch">
|
|
<view class="lt">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uaG7R4JLfYOzBhWfDN0j" mode=""></image><input type="text" v-model="keyword" placeholder="搜索门店"/> <view class="sousuo" @click="searchs">搜索</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="list" @scrolltolower="onReachBottom">
|
|
<view class="listitem" v-for="(item,index) in shopList" :key="index" @click="btnshopxq(item.storeId)">
|
|
<view class="toptit">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uLLGMIjDfZBOvEBrOshq" mode="aspectFit"></image>
|
|
<view class="tit">
|
|
{{item.storeName == null ? '--' : item.storeName}}
|
|
</view>
|
|
<view class="yuan" style="color: #FF8998;">
|
|
<text style="width: 9rpx;height: 9rpx;border-radius: 50%;margin-right: 5rpx;background-color: #FF8998;display: inline-block;"></text>正常运营<u-icon name="arrow-right" color="#808080" size="28"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="rishou">
|
|
<view class="rishouwz">
|
|
<text> 今日订单 </text><text> 今日收入 </text><text> 上月收入</text><text>设备状态 </text>
|
|
</view>
|
|
<view class="rishouje">
|
|
<text><text style="color: #fff;">{{item.todayOrderCount == null ? '--' : item.todayOrderCount}}</text>笔</text>
|
|
<text><text style="color: #fff;">{{item.todayIncome == null ? '--' : item.todayIncome}}</text>元</text>
|
|
<text><text style="color: #fff;">{{item.lastMonthIncome == null ? '--' : item.lastMonthIncome}}</text>元</text>
|
|
<text style="color: #fff;"> <text style="color: #FF8998;">{{item.deviceCount == null ? '--' : item.deviceCount}}/</text> {{item.freeDeviceCount == null ? '--' : item.freeDeviceCount}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="gzlist">
|
|
<view class="icons">
|
|
<image @click.stop="btnpage(1,item)" src="https://api.ccttiot.com/smartmeter/img/static/ut6vvvispEWtKhCR9XYB" mode=""></image> <!-- 设备管理 -->
|
|
<image @click.stop="btnpage(2,item)" src="https://api.ccttiot.com/smartmeter/img/static/uv6sqvVGDswiq90j7pMP" mode=""></image> <!-- 订单管理 -->
|
|
<image @click.stop="btnpage(3,item)" src="https://api.ccttiot.com/smartmeter/img/static/u0d1g9wvKTqZMeTNljln" mode=""></image> <!-- 店铺配置 -->
|
|
<image @click.stop="btnpage(4,item)" src="https://api.ccttiot.com/smartmeter/img/static/uOjdAFMpXa7IgycvqW0z" mode=""></image> <!-- 订单统计 -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="" style="font-size: 28rpx;color: #808080;margin-top: 30rpx;text-align: center;width: 100%;">没有更多店铺了...</view>
|
|
</view>
|
|
</view>
|
|
<view class="mask" v-if="bohuiflag"></view>
|
|
<view class="anniu" @click="creadshop">
|
|
<view class="btn">
|
|
新建店铺
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#0B0B0B",
|
|
},
|
|
shopList:[]
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
this.getlist()
|
|
},
|
|
methods: {
|
|
// 查询店铺列表
|
|
getlist(){
|
|
this.$u.get(`/bst/store/list?pageNum=1&pageSize=999`).then(res => {
|
|
if(res.code == 200){
|
|
this.shopList = res.rows
|
|
}else if(res.msg == null){
|
|
uni.showToast({
|
|
title: '未知错误',
|
|
icon: 'none',
|
|
duration:2000
|
|
})
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration:2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 点击进行页面跳转
|
|
btnpage(num,item){
|
|
if(num == 1){ //设备管理
|
|
uni.navigateTo({
|
|
url:'/page_shanghu/device/index?storeId=' + item.storeId + '&tit=' + item.storeName
|
|
})
|
|
}else if(num == 2){ //订单管理
|
|
uni.navigateTo({
|
|
url:'/page_shanghu/shop/ordershop?storeId=' + item.storeId + '&tit=' + item.storeName
|
|
})
|
|
}else if(num == 3){ //店铺配置
|
|
uni.navigateTo({
|
|
url:'/page_shanghu/shop/editshop?storeId=' + item.storeId + '&tit=' + item.storeName
|
|
})
|
|
}else if(num == 4){ //订单统计
|
|
uni.navigateTo({
|
|
url:'/page_shanghu/shop/tongji?storeId=' + item.storeId + '&tit=' + item.storeName
|
|
})
|
|
}
|
|
},
|
|
// 点击跳转到新建店铺
|
|
creadshop(){
|
|
uni.navigateTo({
|
|
url:'/page_shanghu/shop/addshop'
|
|
})
|
|
},
|
|
// 点击跳转到店铺详情
|
|
btnshopxq(storeId){
|
|
uni.navigateTo({
|
|
url:'/page_shanghu/shop/shopxq?storeId=' + storeId
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{
|
|
background-color: #0B0B0B;
|
|
}
|
|
/deep/ .u-title {
|
|
padding-bottom: 22rpx;
|
|
}
|
|
/deep/ .uicon-nav-back {
|
|
padding-bottom: 22rpx;
|
|
}
|
|
.mask {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: #000;
|
|
opacity: .6;
|
|
z-index: 98;
|
|
}
|
|
.noticetc{
|
|
width: 680rpx;
|
|
height: 950rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
top: 440rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 99;
|
|
.bg{
|
|
width: 680rpx;
|
|
height: 220rpx;
|
|
position: absolute;
|
|
top: -190rpx;
|
|
left: 0;
|
|
}
|
|
.jy{
|
|
font-size: 28rpx;
|
|
color: #FF5252;
|
|
margin-top: 20rpx;
|
|
}
|
|
.btn{
|
|
width: 600rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
border-radius: 50rpx;
|
|
background-color: #FF5252;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
margin: auto;
|
|
margin-top: 30rpx;
|
|
}
|
|
.name{
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
margin-top: 30rpx;
|
|
}
|
|
.biaoti{
|
|
font-size: 32rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
.cont{
|
|
width: 100%;
|
|
height: 620rpx;
|
|
overflow: scroll;
|
|
background-color: #ececec;
|
|
margin-top: 20rpx;
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
.anniu{
|
|
width: 750rpx;
|
|
height: 152rpx;
|
|
padding-top: 24rpx;
|
|
box-sizing: border-box;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
.btn{
|
|
width: 680rpx;
|
|
height: 104rpx;
|
|
background: #FF8998;
|
|
border-radius: 30rpx;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 104rpx;
|
|
margin: auto;
|
|
}
|
|
}
|
|
.serch{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 36rpx;
|
|
box-sizing: border-box;
|
|
padding-top: 40rpx;
|
|
padding-bottom: 22rpx;
|
|
background-color: #0B0B0B;
|
|
.lt{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 68rpx;
|
|
border: 2rpx solid #FF8998;
|
|
border-radius: 24rpx;
|
|
padding-left: 30rpx;
|
|
box-sizing: border-box;
|
|
.sousuo{
|
|
width: 140rpx;
|
|
height: 66rpx;
|
|
text-align: center;
|
|
line-height: 66rpx;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
background: #FF8998;
|
|
border: 2rpx solid #FF8998;
|
|
border-radius: 0 20rpx 20rpx 0;
|
|
}
|
|
image{
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
}
|
|
input{
|
|
width: 460rpx;
|
|
margin-left: 30rpx;
|
|
height: 68rpx;
|
|
line-height: 68rpx;
|
|
}
|
|
}
|
|
}
|
|
.page {
|
|
width: 750rpx;
|
|
height: 100vh;
|
|
.box {
|
|
width: 750rpx;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
// padding-top: 150rpx;
|
|
.list {
|
|
padding-bottom: 400rpx;
|
|
margin-top: 26rpx;
|
|
.listitem {
|
|
margin-bottom: 28rpx !important;
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
width: 680rpx;
|
|
max-height: 1540rpx;
|
|
background: #010000;
|
|
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
|
margin: auto;
|
|
.yunxing {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 26rpx;
|
|
color: #808080;
|
|
margin-top: 26rpx;
|
|
}
|
|
.phones {
|
|
margin-top: 16rpx;
|
|
font-size: 26rpx;
|
|
color: #1DBE7B;
|
|
border-bottom: 1px solid #ccc;
|
|
padding-bottom: 26rpx;
|
|
box-sizing: border-box;
|
|
text {
|
|
color: #808080;
|
|
}
|
|
}
|
|
.phone {
|
|
margin-top: 16rpx;
|
|
font-size: 26rpx;
|
|
color: #3D3D3D;
|
|
text {
|
|
color: #808080;
|
|
}
|
|
}
|
|
.gzlist {
|
|
margin-top: 20rpx;
|
|
// border-bottom: 1rpx solid #ccc;
|
|
padding-bottom: 16rpx;
|
|
.icons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
image {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
.jfgz {
|
|
font-size: 26rpx;
|
|
color: #3D3D3D;
|
|
text {
|
|
color: #808080;
|
|
}
|
|
}
|
|
}
|
|
.rishou {
|
|
margin-top: 26rpx;
|
|
box-sizing: border-box;
|
|
.rishouwz {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text {
|
|
font-size: 26rpx;
|
|
color: #808080;
|
|
width: 230rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.rishouje {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10rpx;
|
|
text {
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #3D3D3D;
|
|
width: 230rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.toptit {
|
|
border-bottom: 1px solid #ccc;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-bottom: 12rpx;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
image {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
.tit {
|
|
width: 450rpx;
|
|
height: 68rpx;
|
|
line-height: 68rpx;
|
|
padding-left: 10rpx;
|
|
// background: #F4F3FF;
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
}
|
|
.bd {
|
|
margin-top: 28rpx;
|
|
height: 100%;
|
|
font-size: 20rpx;
|
|
color: #FFFFFF;
|
|
padding: 4rpx 12rpx;
|
|
box-sizing: border-box;
|
|
background: #1DBE7B;
|
|
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
|
}
|
|
.yuan {
|
|
width: 600rpx;
|
|
justify-content: flex-end;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.top {
|
|
width: 750rpx;
|
|
height: 150rpx;
|
|
background: #0B0B0B;
|
|
padding: 45rpx 36rpx;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
top: 170rpx;
|
|
.cjshop {
|
|
width: 200rpx;
|
|
height: 64rpx;
|
|
background-color: #0B0B0B;
|
|
border-radius: 50rpx;
|
|
text-align: center;
|
|
line-height: 64rpx;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
/deep/ .u-content {
|
|
border: 1px solid #ccc;
|
|
border-radius: 50rpx 0 0 50rpx !important;
|
|
}
|
|
/deep/ .u-action {
|
|
border-radius: 0 50rpx 50rpx 0 !important;
|
|
width: 112rpx;
|
|
height: 65rpx;
|
|
line-height: 65rpx;
|
|
border: 2rpx solid #ccc;
|
|
margin-left: 0;
|
|
color: #3D3D3D;
|
|
background-color: #f2f2f2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |