金诚优选前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

368 lines
9.2 KiB

<template>
<view>
<lf-nav title="我的" :showIcon="true" :spreadOut="false" bgColor="transparent" titleColor="#fff"></lf-nav>
<block v-if="$isRight(detail)">
<view class="head">
<view class="bg-left"></view>
<view class="bg-right"></view>
<view class="head-content">
<view class="lf-flex">
<image class="head-img" mode="aspectFill" :src="detail.brand.logo"></image>
<view class="head-title lf-line-3">{{ detail.brand.name }}</view>
</view>
<view class="lf-flex">
<view class="head-menu" @click="$url('/pages/business/balance/balance')">
<text class="lf-iconfont icon-yue"></text>
<text>余额</text>
</view>
<view class="head-menu" @click="onScanCode">
<text class="lf-iconfont icon-saoyisao"></text>
<text>扫一扫</text>
</view>
</view>
</view>
</view>
<view class="notice" v-if="detail.notice.length">
<u-notice-bar mode="vertical" type="none" :list="detail.notice"></u-notice-bar>
</view>
<view class="card">
<view class="lf-row-between">
<view class="title">待处理</view>
<view class="lf-color-777" @click="$url('/pages/business/order/list')">
<text class="lf-font-24 lf-m-r-10">订单管理</text>
<text class="lf-iconfont icon-xiangyou lf-font-20"></text>
</view>
</view>
<view class="lf-flex lf-m-t-50">
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">{{ detail.todo.new }}</view>
<view>待付款</view>
</view>
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">{{ detail.todo.send }}</view>
<view>待发货</view>
</view>
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">{{ detail.todo.pick }}</view>
<view>待提货</view>
</view>
</view>
</view>
<view class="card">
<view class="lf-row-between">
<view class="title">今日数据</view>
</view>
<view class="lf-flex lf-m-t-50">
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">
<text>{{ detail.today.pay }}</text>
<text class="lf-font-24">()</text>
</view>
<view>支付金额</view>
</view>
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">
<text>{{ detail.today.online }}</text>
<text class="lf-font-24">()</text>
</view>
<view>线上订单</view>
</view>
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">
<text>{{ detail.today.offline }}</text>
<text class="lf-font-24">()</text>
</view>
<view>线下订单</view>
</view>
</view>
</view>
<view class="card">
<view class="lf-row-between">
<view class="title">我的商品</view>
</view>
<view class="lf-flex lf-m-t-50">
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">{{ detail.goods.del }}</view>
<view>销售中</view>
</view>
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">{{ detail.goods.on_sell }}</view>
<view>待上架</view>
</view>
<view class="item" :style="{width: 100 / 3 +'%'}">
<view class="num">{{ detail.goods.off_sell }}</view>
<view>已下架</view>
</view>
</view>
</view>
<view class="card">
<view class="lf-row-between">
<view class="title">我的活动</view>
</view>
<view class="lf-flex lf-m-t-50">
<view class="item" :style="{width: 100 / 3 +'%'}" @click="$url('/pages/business/activity/add')">
<view class="lf-iconfont icon-bianji lf-font-60"></view>
<view>新增活动</view>
</view>
<view class="item" :style="{width: 100 / 3 +'%'}" @click="$url('/pages/business/activity/list')">
<view class="lf-iconfont icon-fabujilu lf-font-60"></view>
<view>活动列表</view>
</view>
</view>
</view>
<button class="out-btn" hover-class="lf-opacity" @click="outLogin">退出登录</button>
<view style="height: 30rpx;"></view>
</block>
</view>
</template>
<script>
export default {
data(){
return {
token: '',
detail: {}
}
},
onLoad(){
let store_token = this.$cookieStorage.get('store_token');
if(!store_token){
this.$msg('登录状态异常, 即将跳转至登录页').then(() => {
this.$url('/pages/business/login/login', {type: 'redirect'});
})
}else{
this.token = store_token;
this.getStoreCenter();
}
},
methods: {
getStoreCenter(){
this.$http.get({
api: 'api/supplier/index',
header: {
token: this.token
}
}).then(res => {
console.log("getStoreCenter", res);
if(res.data.code == 200){
this.detail = res.data.data;
}else{
this.$msg('您的状态异常,请重新登录').then(() => {
this.$url('/pages/business/login/login', {type: 'redirect'});
})
}
})
},
// 扫一扫
onScanCode(){
uni.scanCode({
complete: res => {
if(res.errMsg == 'scanCode:ok'){
// 二维码内的内容
let result = this.codeParse(res.result);
if(this.$shared.isValueType(result) == 'object'){
if(result.rand && result.time && result.u_id){
let url = '/pages/business/payment/money';
url += `?u_id=${result.u_id}`;
url += `&rand=${result.rand}`;
url += `&time=${result.time}`;
this.$url(url);
}else if(result.u_id && result.a_id){
this.activityJoin(result);
}else if(result.u_id && result.no){
this.orderSelf(result);
}
}else{
this.$msg('不是有效的支付码');
}
}else{
this.$msg('请扫二维码或条形码');
}
}
})
},
codeParse(str){
str = String(str);
let new_data = null;
try{
new_data = JSON.parse(str);
}catch{
new_data = str;
}
return new_data;
},
// 核销活动
activityJoin(result){
this.$http.post({
api: 'api/supplier/activity/join',
data: {
user_id: result.u_id,
activity_id: result.a_id
},
header: {
token: this.token
}
}).then(res => {
this.$msg(res.data.message || '核销失败');
})
},
// 自提
orderSelf(result){
this.$http.post({
api: `api/supplier/order/self/${result.no}`,
data: {
user_id: result.u_id
},
header: {
token: this.token
}
}).then(res => {
this.$msg(res.data.message || '自提核销成功');
})
},
// 退出登录
outLogin(){
uni.showModal({
title: '温馨提示',
content: '您确定退出登录商家中心吗?',
success: result => {
if(result.confirm){
this.$cookieStorage.clear('store_token');
this.$msg('退出成功', {icon: 'success'}).then(() => {
this.$toBack();
})
}
}
})
}
}
}
</script>
<style lang="scss" scoped="scoped">
.head{
width: 750rpx;
height: 409rpx;
background: linear-gradient(90deg, #1339B8 0%, #092788 100%);
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
box-sizing: border-box;
padding: 60rpx 32rpx 110rpx;
color: #FFFFFF;
.bg-left{
position: absolute;
width: 196rpx;
height: 196rpx;
border-radius: 50%;
background-color: rgba(255,255,255,0.04);
left: -92rpx;
bottom: 60rpx;
}
.bg-right{
position: absolute;
width: 520rpx;
height: 520rpx;
border-radius: 50%;
background-color: rgba(255,255,255,0.04);
right: -168rpx;
top: -142rpx;
}
.head-content{
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
z-index: 9;
.head-img{
width: 100rpx;
height: 100rpx;
border: 2rpx solid #FFFFFF;
box-sizing: border-box;
margin-right: 20rpx;
border-radius: 50%;
}
.head-title{
font-size: 36rpx;
color: #FFFFFF;
font-weight: bold;
width: 390rpx;
}
.head-menu{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #FFFFFF;
&:nth-child(n+2){
margin-left: 30rpx;
}
&>text:nth-child(1){
font-size: 50rpx;
}
&>text:nth-child(2){
font-size: 24rpx;
}
}
}
}
.notice{
width: 686rpx;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
border-radius: 20rpx;
margin: -50rpx auto 0;
position: relative;
z-index: 9;
padding: 16rpx 4rpx 0;
box-sizing: border-box;
}
.card{
padding: 30rpx;
width: 686rpx;
height: 287rpx;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
border-radius: 20rpx;
margin: 30rpx auto 0;
&:last-child{
margin-bottom: 50rpx;
}
.title{
font-size: 32rpx;
color: #222222;
font-weight: bold;
}
.item{
box-sizing: border-box;
padding: 0 20rpx;
text-align: center;
font-size: 24rpx;
color: #777777;
.num{
font-size: 36rpx;
color: #222222;
font-weight: bold;
// word-break: break-all;
// line-height: 1;
}
}
}
.out-btn{
width: 686rpx;
height: 90rpx;
background-color: #0D2E9A;
color: #FFFFFF;
font-size: 32rpx;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 60rpx;
}
</style>