update: 我的主页UI设计
This commit is contained in:
mixtan
parent
9418a64604
commit
4fa74a8363
@ -5,7 +5,8 @@
|
||||
:background="'linear-gradient(to left, #ff3000, #a70300)'"
|
||||
v-if="true"
|
||||
></status-bar>
|
||||
<view class="hander">
|
||||
|
||||
<view class="hander" @click="skipu()">
|
||||
<view class="hander-left">
|
||||
<view class="user-img">
|
||||
<u--image
|
||||
@ -13,21 +14,15 @@
|
||||
dashboardInfo.store_info.store_logo || '../../static/user-img.png'
|
||||
"
|
||||
shape="circle"
|
||||
width="60"
|
||||
height="60"
|
||||
width="64"
|
||||
height="64"
|
||||
></u--image>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<view class="user-name-block" @click="skipu()">
|
||||
<view class="user-name-block">
|
||||
<view class="user-name">
|
||||
{{ dashboardInfo.store_info.store_name }}
|
||||
</view>
|
||||
<u-icon
|
||||
style="display: inline-block; margin-left: 8rpx"
|
||||
name="arrow-right"
|
||||
size="12"
|
||||
color="#fff"
|
||||
></u-icon>
|
||||
</view>
|
||||
<view class="user-store-name">
|
||||
{{ dashboardInfo.store_info.store_grade_name }}
|
||||
@ -35,113 +30,172 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="hander-right">
|
||||
<view class="right-item">
|
||||
<view class="right-item kf_item">
|
||||
<u-icon
|
||||
class="icon-shezhi"
|
||||
custom-prefix="custom-icon-kefu custom-icon"
|
||||
size="25"
|
||||
size="20"
|
||||
color="#fff"
|
||||
></u-icon>
|
||||
<view class="icon-label">平台客服</view>
|
||||
<view class="icon-label">官方客服</view>
|
||||
</view>
|
||||
<view class="right-item" @click="shipuSetting()">
|
||||
<u-icon
|
||||
class="icon-shezhi"
|
||||
custom-prefix="custom-icon-shezhi custom-icon"
|
||||
size="22"
|
||||
color="#fff"
|
||||
></u-icon>
|
||||
<view class="icon-label">设置</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-info">
|
||||
<view class="shop-info-item">
|
||||
<u-count-to
|
||||
class="item-value turnover-item turnover-item-num"
|
||||
:start-val="0"
|
||||
:end-val="dashboardInfo.order.yestoday_num"
|
||||
color="#fff"
|
||||
></u-count-to>
|
||||
<view class="item-label">昨日订单数</view>
|
||||
</view>
|
||||
<view class="shop-info-item">
|
||||
<u-count-to
|
||||
class="item-value turnover-item turnover-item-num"
|
||||
:start-val="0"
|
||||
:end-val="dashboardInfo.order.month_num"
|
||||
color="#fff"
|
||||
></u-count-to>
|
||||
<view class="item-label">当月订单数</view>
|
||||
</view>
|
||||
<view class="shop-info-item">
|
||||
<u-count-to
|
||||
class="item-value turnover-item turnover-item-num"
|
||||
:start-val="0"
|
||||
:end-val="dashboardInfo.order.pay_amount"
|
||||
:decimals="2"
|
||||
color="#fff"
|
||||
separator=","
|
||||
></u-count-to>
|
||||
<view class="item-label">成交总金额</view>
|
||||
<view class="right-item">
|
||||
<u-icon name="arrow-right" size="18" color="#fff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fm-content">
|
||||
<view class="title">常用功能</view>
|
||||
<view class="fm-list">
|
||||
<view class="fm-item" @click="skipuPrinter">
|
||||
<u-icon
|
||||
class="fm-icon"
|
||||
custom-prefix="custom-icon-dayinji custom-icon"
|
||||
size="25"
|
||||
color="#e62300"
|
||||
></u-icon>
|
||||
打印机
|
||||
</view>
|
||||
<view class="fm-item" @click="skipuOrCode">
|
||||
<u-icon
|
||||
class="fm-icon"
|
||||
custom-prefix="custom-icon-erweima custom-icon"
|
||||
size="25"
|
||||
color="#e62300"
|
||||
></u-icon>
|
||||
店铺二维码
|
||||
</view>
|
||||
<view class="fm-item" @click="skipuBusinessStatus">
|
||||
<u-icon
|
||||
class="fm-icon"
|
||||
custom-prefix="custom-icon-erweima custom-icon"
|
||||
size="25"
|
||||
color="#e62300"
|
||||
></u-icon>
|
||||
营业状态
|
||||
</view>
|
||||
<!-- <view class="fm-item">
|
||||
<u-icon
|
||||
class="fm-icon"
|
||||
custom-prefix="custom-icon-yunfei custom-icon"
|
||||
size="30"
|
||||
color="#000"
|
||||
></u-icon>
|
||||
运费设置
|
||||
</view> -->
|
||||
|
||||
<view class="shop_status" :style="{background: shopStatus==1 ? '#D8F1EC' : shopStatus==2 ? '#ffecf2': '#eee'}">
|
||||
<u-cell-group :border="false">
|
||||
<u-cell
|
||||
@click="handleShowTime"
|
||||
iconStyle="marginRight:6px; color: #279B8B;"
|
||||
:border="false"
|
||||
isLink
|
||||
icon="hourglass-half-fill"
|
||||
title="营业中"
|
||||
v-if="shopStatus==1"
|
||||
></u-cell>
|
||||
<u-cell
|
||||
iconStyle="marginRight:6px; color: #fe411b"
|
||||
:border="false"
|
||||
isLink
|
||||
url="/pages/my/shopQRcode/shopQRcode"
|
||||
icon="hourglass-half-fill"
|
||||
title="已停业"
|
||||
v-if="shopStatus==2"
|
||||
></u-cell>
|
||||
<u-cell
|
||||
iconStyle="marginRight:6px; color: #666"
|
||||
:border="false"
|
||||
isLink
|
||||
url="/pages/my/shopQRcode/shopQRcode"
|
||||
icon="hourglass-half-fill"
|
||||
title="已打烊"
|
||||
v-if="shopStatus==3"
|
||||
></u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
|
||||
<view class="myui_card shop-info">
|
||||
<view class="shop-info-item">
|
||||
<u-count-to
|
||||
class="item-value turnover-item turnover-item-num"
|
||||
:start-val="0"
|
||||
:end-val="dashboardInfo.order.yestoday_num"
|
||||
></u-count-to>
|
||||
<view class="item-label">昨日订单数</view>
|
||||
</view>
|
||||
<view class="shop-info-item">
|
||||
<u-count-to
|
||||
class="item-value turnover-item turnover-item-num"
|
||||
:start-val="0"
|
||||
:end-val="dashboardInfo.order.month_num"
|
||||
></u-count-to>
|
||||
<view class="item-label">当月订单数</view>
|
||||
</view>
|
||||
<view class="shop-info-item">
|
||||
<u-count-to
|
||||
class="item-value turnover-item turnover-item-num"
|
||||
:start-val="0"
|
||||
:end-val="dashboardInfo.order.pay_amount"
|
||||
:decimals="2"
|
||||
separator=","
|
||||
></u-count-to>
|
||||
<view class="item-label">成交总金额</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="myui_card tool">
|
||||
<u-cell-group :border="false">
|
||||
<u-cell
|
||||
iconStyle="marginRight:6px; color: #62BBAE"
|
||||
:border="false"
|
||||
isLink
|
||||
url="/pages/my/shopQRcode/shopQRcode"
|
||||
icon="scan"
|
||||
title="店铺二维码"
|
||||
></u-cell>
|
||||
<u-cell
|
||||
iconStyle="marginRight:6px; color: #62BBAE"
|
||||
:border="false"
|
||||
isLink
|
||||
url="/pages/my/userInfo"
|
||||
icon="man-add-fill"
|
||||
title="账号设置"
|
||||
></u-cell>
|
||||
<u-cell
|
||||
iconStyle="marginRight:6px; color: #62BBAE"
|
||||
:border="false"
|
||||
isLink
|
||||
url="/pages/my/printer/printerList"
|
||||
icon="bookmark-fill"
|
||||
title="打印设置"
|
||||
></u-cell>
|
||||
<u-cell
|
||||
iconStyle="marginRight:6px; color: #62BBAE"
|
||||
:border="false"
|
||||
isLink
|
||||
url="/pages/my/printer/printerList"
|
||||
icon="bell-fill"
|
||||
title="铃声设置"
|
||||
></u-cell>
|
||||
<u-cell
|
||||
iconStyle="marginRight:6px; color: #026bff"
|
||||
:border="false"
|
||||
isLink
|
||||
url="/pages/my/versions"
|
||||
icon="error-circle-fill"
|
||||
title="版本信息"
|
||||
></u-cell>
|
||||
<u-cell
|
||||
iconStyle="marginRight:6px; color: #ff695b"
|
||||
:border="false"
|
||||
isLink
|
||||
url="/pages/my/protocol/protocol"
|
||||
icon="file-text-fill"
|
||||
title="隐私协议"
|
||||
></u-cell>
|
||||
<u-cell
|
||||
iconStyle="marginRight:6px; color: #fd4d40"
|
||||
:border="false"
|
||||
isLink
|
||||
url="/pages/my/aboutUs/aboutUs"
|
||||
icon="account-fill"
|
||||
title="关于小发"
|
||||
></u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
|
||||
<view class="btn_logout">退出登录</view>
|
||||
|
||||
<tpfTimeRange
|
||||
ref="time"
|
||||
:startDefaultTime="form.info.store_opening_hours"
|
||||
:endDefaultTime="form.info.store_close_hours"
|
||||
@timeRange="handleTimeRange"
|
||||
></tpfTimeRange>
|
||||
|
||||
<tabbar tabbarName="my"></tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GetAccountDashboard } from "../../api/user";
|
||||
import statusBar from "../../components/status-bar.vue";
|
||||
import { GetAccountDashboard } from "@/api/user";
|
||||
import { GetShopBaseInfo } from "@/api/shop";
|
||||
import statusBar from "@/components/status-bar.vue";
|
||||
import tabbar from "@/components/tabbar/tabbar.vue";
|
||||
import tpfTimeRange from "@/components/tpf-time-range/tpf-time-range.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
statusBar,
|
||||
tabbar,
|
||||
tpfTimeRange,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shopStatus: 1,
|
||||
isBusiness: true,
|
||||
dashboardInfo: {
|
||||
data: {},
|
||||
@ -169,12 +223,41 @@ export default {
|
||||
store_name: "",
|
||||
},
|
||||
},
|
||||
form: {
|
||||
info: {
|
||||
store_opening_hours: "00:00",
|
||||
store_close_hours: "00:00",
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.getAccountDashboard();
|
||||
this.getShopBaseInfo();
|
||||
},
|
||||
methods: {
|
||||
async getShopBaseInfo() {
|
||||
let res = await GetShopBaseInfo();
|
||||
if (res && res.status == 200) {
|
||||
this.form = res.data;
|
||||
this.form.businessTime =
|
||||
res.data.info.store_opening_hours +
|
||||
"-" +
|
||||
res.data.info.store_close_hours;
|
||||
}
|
||||
},
|
||||
|
||||
handleTimeRange(e) {
|
||||
this.form.businessTime = e[0] + e[1];
|
||||
this.form.store_opening_hours = e[0];
|
||||
this.form.store_close_hours = e[1];
|
||||
},
|
||||
|
||||
handleShowTime() {
|
||||
this.$refs["time"].open();
|
||||
},
|
||||
|
||||
async getAccountDashboard() {
|
||||
let res = await GetAccountDashboard();
|
||||
if (res && res.status == 200) {
|
||||
@ -182,67 +265,33 @@ export default {
|
||||
this.dashboardInfo = res.data;
|
||||
}
|
||||
},
|
||||
|
||||
skipu() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/my/shopInfo",
|
||||
});
|
||||
},
|
||||
shipuSetting() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/my/setting",
|
||||
});
|
||||
},
|
||||
skipuPrinter() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/my/printer/printerList",
|
||||
});
|
||||
},
|
||||
skipuOrCode() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/my/shopQRcode/shopQRcode",
|
||||
});
|
||||
},
|
||||
skipuBusinessStatus() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/my/storeBusinessStatus/businessStatus",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.my-container {
|
||||
background: #f8f8f8;
|
||||
height: calc(100vh - 100rpx);
|
||||
padding-bottom: 178rpx;
|
||||
|
||||
.hander {
|
||||
position: relative;
|
||||
padding: 20rpx 30rpx 40rpx 40rpx;
|
||||
padding-top: 0;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 200rpx;
|
||||
background: linear-gradient(to left, #ff3000 0%, #a70300 100%);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -200rpx;
|
||||
z-index: 1;
|
||||
content: " ";
|
||||
height: 200rpx;
|
||||
width: 100%;
|
||||
border-radius: 0 0 50% 50%;
|
||||
background: linear-gradient(to left, #ff3000 0%, #a70300 100%);
|
||||
}
|
||||
height: 186rpx;
|
||||
// background: #FE411B;
|
||||
background: linear-gradient(to bottom, #ff695b, #fd4d40);
|
||||
|
||||
.hander-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 40rpx;
|
||||
|
||||
.user-img {
|
||||
margin-right: 20rpx;
|
||||
@ -269,16 +318,13 @@ export default {
|
||||
}
|
||||
|
||||
.user-store-name {
|
||||
width: 100rpx;
|
||||
margin-top: 12rpx;
|
||||
padding: 4rpx 18rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 4rpx 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
background: red;
|
||||
color: #ffecf2;
|
||||
border-radius: 100rpx;
|
||||
border: 2rpx solid #ffecf2;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -289,46 +335,42 @@ export default {
|
||||
color: #000;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
|
||||
.kf_item{
|
||||
position: absolute;
|
||||
right: 48rpx;
|
||||
top: 24rpx;
|
||||
}
|
||||
|
||||
.right-item {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-left: 48rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.icon-shezhi {
|
||||
flex-direction: column;
|
||||
margin-bottom: 6rpx;
|
||||
align-items: end;
|
||||
gap: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -156rpx;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
.shop-info {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 28rpx;
|
||||
margin: 32rpx 24rpx;
|
||||
|
||||
.shop-info-item {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin: 40rpx 0;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
.shop-info-item {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
.item-value {
|
||||
color: #222 !important;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
margin-bottom: 20rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.item-label {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -368,9 +410,33 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.shop_status{
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.tool {
|
||||
margin: 32rpx 24rpx;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
::v-deep .u-cell__body {
|
||||
padding: 30rpx 16rpx 30rpx 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn_logout {
|
||||
margin: 0 24rpx;
|
||||
border-radius: 60rpx;
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #fe411b;
|
||||
border: 2rpx solid #fe411b;
|
||||
// background: #FE411B;
|
||||
// background: linear-gradient(to right, #fd826f, #FE411B);
|
||||
}
|
||||
|
||||
.fm-content {
|
||||
margin: 20rpx;
|
||||
margin-top: 240rpx;
|
||||
margin: 0 24rpx;
|
||||
|
||||
.title {
|
||||
padding: 20rpx 32rpx;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user