[..]
This commit is contained in:
@@ -207,7 +207,7 @@
|
||||
button{
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: $mian-color-deep;
|
||||
background-color: $mian-color;
|
||||
border-radius: 0;
|
||||
color: white;
|
||||
font-size: $title-size-lg;
|
||||
|
||||
311
pages/employees/add.vue
Normal file
311
pages/employees/add.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<view class="content" v-if="!loging">
|
||||
<!-- 基础信息 -->
|
||||
<view class="info-card">
|
||||
<view class="cover">
|
||||
<view class="cover-add vertical" @click="updCover">
|
||||
<block v-if="cover.showpath != ''">
|
||||
<image :src="cover.showpath" mode="aspectFill"></image>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image class="cover-default" src="@/static/icons/add-icon.png" mode="widthFix"></image>
|
||||
<view>员工寸照</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-text">
|
||||
<view class="info-inputs">
|
||||
<input type="text" v-model="name" placeholder="姓名"/>
|
||||
</view>
|
||||
<view class="info-inputs">
|
||||
<input type="number" v-model="phone" placeholder="手机号码"/>
|
||||
</view>
|
||||
<view class="info-inputs">
|
||||
<input type="text" v-model="job" placeholder="职业"/>
|
||||
</view>
|
||||
<view class="info-inputs">
|
||||
<picker :range="section" range-key="name" :value="sectionIndex" @change="pickerChange">
|
||||
<view class="picker-text">
|
||||
{{section[sectionIndex].name}}
|
||||
<uni-icons class="icon" type="arrowdown" color="#555"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jurisdiction switch">
|
||||
<view class="item">
|
||||
<label>
|
||||
<view class="item-title">设为推荐</view>
|
||||
<view class="item-info">设为推荐员工将在企业自媒体中优先展示</view>
|
||||
<switch class="item-switch" :checked="isPosition" color="#e93340" @change="switchChange" />
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 权限设置 -->
|
||||
<view class="title">权限设置</view>
|
||||
<view class="jurisdiction">
|
||||
<checkbox-group @change="permissionChange">
|
||||
<view class="item" v-for="(item, index) in permissions" :key="index">
|
||||
<label>
|
||||
<view class="item-title">{{item.title}}</view>
|
||||
<view class="item-info">{{item.description}}</view>
|
||||
<checkbox class="item-checkbox" :checked="item.check" color="#e93340" :value="item.permission_id" />
|
||||
</label>
|
||||
</view>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<!-- 按钮 -->
|
||||
<view class="add-btns">
|
||||
<button size="default" @click="onAddEmployees">{{type === 'PUT' ? '修改': '添加'}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { employeesConfig, addEmployees, employeesInfo, employeesPut } from '@/apis/interfaces/employees'
|
||||
import { uploads } from '@/apis/interfaces/uploading'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type : '',
|
||||
loging : true,
|
||||
section : [],
|
||||
permissions : [],
|
||||
permissionIds: [],
|
||||
sectionIndex : 0,
|
||||
cover : {
|
||||
showpath : '',
|
||||
path : ''
|
||||
},
|
||||
name : '',
|
||||
phone : '',
|
||||
job : '',
|
||||
isPosition : false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if(this.$Route.query.type === 'PUT'){
|
||||
this.type = 'PUT'
|
||||
uni.setNavigationBarTitle({
|
||||
title: '编辑员工'
|
||||
})
|
||||
}
|
||||
employeesConfig().then(res => {
|
||||
this.section = res.store
|
||||
if(this.$Route.query.type === 'PUT'){
|
||||
employeesInfo(this.$Route.query.id || 4).then(res => {
|
||||
let permissionIds = []
|
||||
for(let val of res.permission){
|
||||
if(val.check){
|
||||
permissionIds.push(val.permission_id)
|
||||
}
|
||||
}
|
||||
this.permissions = res.permission
|
||||
this.sectionIndex = this.section.findIndex(val => val.store_id == res.store.store_id)
|
||||
this.permissionIds= permissionIds
|
||||
this.name = res.name
|
||||
this.phone = res.mobile
|
||||
this.job = res.job
|
||||
this.cover = res.cover
|
||||
this.isPosition = res.is_position
|
||||
this.loging = false
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}else{
|
||||
this.permissions = res.permissions
|
||||
this.loging = false
|
||||
}
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 设为推荐
|
||||
switchChange(e){
|
||||
this.isPosition = e.detail.value
|
||||
},
|
||||
// 选择部门
|
||||
pickerChange(e){
|
||||
this.sectionIndex = e.detail.value
|
||||
},
|
||||
// 权限选择
|
||||
permissionChange(e){
|
||||
this.permissionIds = e.detail.value
|
||||
},
|
||||
// 上传照片
|
||||
updCover(){
|
||||
uni.chooseImage({
|
||||
crop: {width: 229, height: 320},
|
||||
success: path=> {
|
||||
uploads([{
|
||||
uri : path.tempFilePaths[0]
|
||||
}]).then(res => {
|
||||
this.cover = {
|
||||
showpath: res.url[0],
|
||||
path : res.path[0]
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 添加员工
|
||||
onAddEmployees(){
|
||||
let data = {
|
||||
name : this.name,
|
||||
mobileNo : this.phone,
|
||||
job : this.job,
|
||||
cover : this.cover.path,
|
||||
position : this.isPosition ? 1: 0,
|
||||
order : 0,
|
||||
store_id : this.section[this.sectionIndex].store_id,
|
||||
permission : this.permissionIds
|
||||
}
|
||||
let submitAdd = this.type == 'PUT' ? employeesPut(this.$Route.query.id, data) : addEmployees(data)
|
||||
|
||||
submitAdd.then(res => {
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : res,
|
||||
showCancel : false,
|
||||
success : () => {
|
||||
this.$Router.back()
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
min-height: 100vh;
|
||||
@extend .ios-bottom;
|
||||
.title{
|
||||
padding: ($padding/2) $padding;
|
||||
color: $text-gray;
|
||||
}
|
||||
.jurisdiction{
|
||||
background: white;
|
||||
&.switch{
|
||||
margin-top: $margin;
|
||||
}
|
||||
.item{
|
||||
position: relative;
|
||||
padding: $padding 150rpx $padding $padding;
|
||||
&::after{
|
||||
position: absolute;
|
||||
left: $padding;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 1rpx;
|
||||
content: " ";
|
||||
background: $border-color;
|
||||
}
|
||||
&:last-child::after{
|
||||
display: none;
|
||||
}
|
||||
.item-checkbox{
|
||||
position: absolute;
|
||||
right: $padding;
|
||||
top: 50%;
|
||||
height: 40rpx;
|
||||
margin-top: -27rpx;
|
||||
}
|
||||
.item-switch{
|
||||
position: absolute;
|
||||
right: $padding;
|
||||
top: 50%;
|
||||
height: 40rpx;
|
||||
margin-top: -27rpx;
|
||||
}
|
||||
.item-title{
|
||||
font-size: $title-size;
|
||||
padding-bottom: $margin/3;
|
||||
}
|
||||
.item-info{
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 基础信息
|
||||
.info-card{
|
||||
background: white;
|
||||
padding: $padding;
|
||||
position: relative;
|
||||
min-height: 238rpx;
|
||||
.cover{
|
||||
position: absolute;
|
||||
top: $padding;
|
||||
left: $padding;
|
||||
background: #f8f8f8;
|
||||
width: 229rpx;
|
||||
height: 320rpx;
|
||||
.cover-add{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
image{
|
||||
width: 229rpx;
|
||||
height: 320rpx;
|
||||
}
|
||||
image.cover-default{
|
||||
width: 128rpx;
|
||||
}
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
}
|
||||
.info-text{
|
||||
padding-left: $padding + 229;
|
||||
.info-inputs{
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
input{
|
||||
height: 80rpx;
|
||||
}
|
||||
.picker-text{
|
||||
position: relative;
|
||||
padding-right: 80rpx;
|
||||
.icon{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 添加按钮
|
||||
.add-btns{
|
||||
padding: $padding;
|
||||
button[size='default']{
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: $text-price;
|
||||
font-size: $title-size;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
260
pages/employees/list.vue
Normal file
260
pages/employees/list.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<view class="ios-bottom" v-if="!loding">
|
||||
<view class="header-flex">
|
||||
员工数量 {{total}} 人
|
||||
<view class="add-btn" @click="addEmployees">添加员工</view>
|
||||
</view>
|
||||
<!-- 员工列表 -->
|
||||
<uni-collapse v-if="lists.length > 0">
|
||||
<block v-for="(listItem, listIndex) in lists" :key="listIndex">
|
||||
<uni-collapse-item :show-animation="true" :open="listIndex === 0">
|
||||
<template v-slot:title>
|
||||
<view class="collapse-title">{{listItem.name}}</view>
|
||||
</template>
|
||||
<block v-if="listItem.data.length > 0">
|
||||
<view class="employees-border" v-for="(item, index) in listItem.data" :key="index">
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item :rightOptions="options" @click="onEmployees($event, listIndex, index)">
|
||||
<view class="employees-item">
|
||||
<view class="cover">
|
||||
<block v-if="item.user.avatar === ''">{{item.name.slice(0,1)}}</block>
|
||||
<block v-else>
|
||||
<image class="cover-img" :src="item.user.avatar" mode="aspectFill"></image>
|
||||
</block>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="nickname nowrap">{{item.name}}<text>{{item.job}}</text></view>
|
||||
<view class="job nowrap">
|
||||
<text v-for="(permissionItem, permissionIndex) in item.permission" :key="permissionIndex">{{permissionItem}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="employees-null">店铺暂无员工</view>
|
||||
</block>
|
||||
</uni-collapse-item>
|
||||
</block>
|
||||
</uni-collapse>
|
||||
<view v-else class="list-null">
|
||||
<image class="icon" src="@/static/icons/listnull-icon.png" mode="widthFix" />
|
||||
<view class="sub-title">暂未添加员工</view>
|
||||
<view class="sub-btn" @click="$Router.push({name: 'employeesAdd'})">添加员工</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { employees, employeesDelete } from '@/apis/interfaces/employees'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loding : true,
|
||||
lists : [],
|
||||
total : 0,
|
||||
options : [{
|
||||
text : '编辑',
|
||||
type : 'PUT',
|
||||
style : {
|
||||
backgroundColor: '#3688ee'
|
||||
}
|
||||
},{
|
||||
text : '删除',
|
||||
type : 'DELETE',
|
||||
style : {
|
||||
backgroundColor: '#e93340'
|
||||
}
|
||||
}]
|
||||
};
|
||||
},
|
||||
onShow(){
|
||||
employees().then(res => {
|
||||
this.lists = res.data
|
||||
this.total = res.total
|
||||
this.loding = false
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 编辑，删除
|
||||
onEmployees(e, upIndex, index){
|
||||
let type = e.content.type,
|
||||
val = this.lists[upIndex].data[index]
|
||||
if(type == 'PUT'){
|
||||
this.$Router.push({name: 'addEmployees', params: {type: 'PUT', id: val.employee_id}})
|
||||
return
|
||||
}
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : '删除后无法恢复，确定删除员工[' + val.name + ']吗？',
|
||||
cancelText : '取消',
|
||||
cancelColor : '#555',
|
||||
confirmText : '确认',
|
||||
confirmColor: '#e93340',
|
||||
success : res => {
|
||||
if(res.confirm) {
|
||||
employeesDelete(val.employee_id).then(res => {
|
||||
uni.showToast({
|
||||
title: res,
|
||||
icon : 'none'
|
||||
})
|
||||
this.lists[upIndex].data.splice(index, 1)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 添加员工
|
||||
addEmployees(){
|
||||
if(this.lists.length <= 0){
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : '暂未创建门店，无法添加员工',
|
||||
cancelText : '稍后创建',
|
||||
cancelColor : '#555',
|
||||
confirmText : '立即创建',
|
||||
confirmColor: '#e93340',
|
||||
success : res => {
|
||||
if(res.confirm) {
|
||||
this.$Router.push({name: 'shopCreate'})
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$Router.push({name: 'employeesAdd'})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.collapse-title{
|
||||
padding: 0 $padding;
|
||||
line-height: 90rpx;
|
||||
font-weight: bold;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
.employees-item {
|
||||
background: white;
|
||||
padding: ($padding - 10) $padding;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: $padding + 98;
|
||||
right: 0;
|
||||
content: ' ';
|
||||
height: 1rpx;
|
||||
background: $border-color;
|
||||
}
|
||||
.cover {
|
||||
position: absolute;
|
||||
top: $padding - 10;
|
||||
left: $padding;
|
||||
background: $text-price;
|
||||
color: white;
|
||||
height: 88rpx;
|
||||
width: 88rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
font-size: $title-size-lg;
|
||||
.cover-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 88rpx;
|
||||
padding-left: 108rpx;
|
||||
.nickname{
|
||||
line-height: 40rpx;
|
||||
font-size: $title-size;
|
||||
padding-bottom: 10rpx;
|
||||
text{
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray-m;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
}
|
||||
.job{
|
||||
line-height: 38rpx;
|
||||
text{
|
||||
background-color: $border-color-lg;
|
||||
color: $text-gray;
|
||||
padding: 0 10rpx;
|
||||
line-height: 38rpx;
|
||||
margin-left: $margin/2;
|
||||
display: inline-block;
|
||||
&:first-child{
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 空提示
|
||||
.list-null{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
background: white;
|
||||
padding-bottom: 20vh;
|
||||
@extend .vertical;
|
||||
.sub-title{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
.icon{
|
||||
width: 288rpx;
|
||||
}
|
||||
.sub-btn{
|
||||
width: 200rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
background: $mian-color;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
margin-top: $margin*2;
|
||||
}
|
||||
}
|
||||
.employees-null{
|
||||
text-align: center;
|
||||
line-height: 10vh;
|
||||
padding-bottom: $padding;
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
}
|
||||
|
||||
// 添加员工header
|
||||
.header-flex{
|
||||
background: white;
|
||||
padding: ($padding/2) $padding;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $margin - 10;
|
||||
line-height: 60rpx;
|
||||
color: $text-gray;
|
||||
.add-btn{
|
||||
background: $mian-color;
|
||||
color: white;
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,51 +1,60 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 水晶获得公告 -->
|
||||
<view class="notice" v-if="notice.length >= 1">
|
||||
<swiper class="notice-swiper" :vertical="true" autoplay circular>
|
||||
<swiper-item v-for="(item, index) in notice" :key="index">
|
||||
<view class="notice-item">
|
||||
<image class="notice-cover" :src="item.avatar" mode="aspectFill"></image>
|
||||
<view class="notice-title ellipsis">{{item.nickname}} {{item.title}} {{item.amount}}</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<!-- 账户余额 -->
|
||||
<view class="info">
|
||||
<view class="info-number">
|
||||
<image class="number-background number-rotate" src="@/static/background/chain-back-01.png" />
|
||||
<view class="info-content webkit-box">
|
||||
<view class="text">{{isAuth ? '持有原石量': '恒量发行原石量'}}<uni-icons class="help-icon" @click="showHelp('occ')" type="help-filled" size="18" color="#fff" /></view>
|
||||
<view class="number">{{occ}}</view>
|
||||
<view class="login" @click="$Router.push({name: 'Login'})" v-if="!isAuth">立即登录</view>
|
||||
<view class="login" @click="openWallet" v-else>我的钱包</view>
|
||||
<view class="total">
|
||||
<view class="item nowrap"><image src="@/static/icons/gemstone-icon.png"/>能量球 99</view>
|
||||
<view class="item nowrap"><image src="@/static/icons/crystal-icon.png"/>能量碎片 11</view>
|
||||
</view>
|
||||
<!-- 矿机 -->
|
||||
<view class="ore">
|
||||
<image class="ore-back" src="@/static/background/chain-back-00.png" mode="widthFix"></image>
|
||||
<view class="ball">
|
||||
<view class="shadow"></view>
|
||||
</view>
|
||||
<view class="ore-lists">
|
||||
<view class="oct-float ore-item" v-for="(item, index) in crystalArr" :key="index" @click="ledCrystal(index)">
|
||||
<block v-if="item.amount !== null">
|
||||
<image src="/static/imgs/crystal-ore-icon.png" mode="widthFix" class="icon" />
|
||||
<view class="text">能量碎片{{ item.amount || '-'}}</view>
|
||||
</block>
|
||||
</view>
|
||||
<navigator url="../index/index" open-type="switchTab" hover-class="none" class="oct-float ore-item-nav">
|
||||
<image src="/static/imgs/gemstone-ore-icon.png" mode="widthFix" class="icon" />
|
||||
<view class="text">购物<uni-icons type="arrowright" color="#FFFFFF" size="14"></uni-icons></view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 公告信息 -->
|
||||
<!-- <view class="increase">今日消费100元，预计原石单价增长0.1%</view> -->
|
||||
<!-- 任务分类 -->
|
||||
<scroll-view class="task-block" scroll-x="true">
|
||||
<view class="item" v-for="(item, index) in categoryArr" :key="index" @click="JumpUrl(item.url, item.title)">
|
||||
<view class="text">{{ item.remark }}</view>
|
||||
<view class="icon">
|
||||
<image :src="item.cover" />
|
||||
</view>
|
||||
<view class="title">{{ item.title }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 平台概况 -->
|
||||
<view class="situation">
|
||||
<view class="header">
|
||||
<view class="header-item">
|
||||
<view class="title">平台原石余量<uni-icons class="help-icon" @click="showHelp('occBalance')" type="help-filled" size="18" color="#009b69" /></view>
|
||||
<view class="title">平台原石余量<uni-icons class="help-icon" @click="showHelp('occBalance')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view>
|
||||
<view class="number ellipsis">{{ occBalance }}</view>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<view class="title">昨日瓜分水晶<uni-icons class="help-icon" @click="showHelp('yesterdayCrystal')" type="help-filled" size="18" color="#009b69" /></view>
|
||||
<view class="title">昨日瓜分水晶<uni-icons class="help-icon" @click="showHelp('yesterdayCrystal')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view>
|
||||
<view class="number ellipsis">{{ yesterdayCrystal }}</view>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<view class="title">区块链高度<uni-icons class="help-icon" @click="showHelp('blockHeight')" type="help-filled" size="18" color="#009b69" /></view>
|
||||
<view class="title">区块链高度<uni-icons class="help-icon" @click="showHelp('blockHeight')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view>
|
||||
<view class="number ellipsis">{{ blockHeight }}</view>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<view class="title">平台累计盈利额<uni-icons class="help-icon" @click="showHelp('gain')" type="help-filled" size="18" color="#009b69" /></view>
|
||||
<view class="title">平台累计盈利额<uni-icons class="help-icon" @click="showHelp('gain')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view>
|
||||
<view class="number ellipsis">{{ gain }}</view>
|
||||
</view>
|
||||
<view class="header-item">
|
||||
<view class="title">已开通节点数<uni-icons class="help-icon" @click="showHelp('nodeNumber')" type="help-filled" size="18" color="#009b69" /></view>
|
||||
<view class="title">已开通节点数<uni-icons class="help-icon" @click="showHelp('nodeNumber')" type="help-filled" size="18" color="rgba(255,255,255,.3)" /></view>
|
||||
<view class="number ellipsis">{{ nodeNumber }}</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -93,11 +102,10 @@
|
||||
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
|
||||
import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
|
||||
export default {
|
||||
components: {
|
||||
lF2
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
crystalArr : [],
|
||||
categoryArr : [],
|
||||
occs: {},
|
||||
blockHeight: 0,
|
||||
occBalance: 0,
|
||||
@@ -125,8 +133,8 @@
|
||||
// 求助信息
|
||||
showHelp(type) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: this.helpToast[type],
|
||||
title: '提示',
|
||||
content: this.helpToast[type],
|
||||
showCancel: false
|
||||
})
|
||||
},
|
||||
@@ -179,6 +187,7 @@
|
||||
// occ信息
|
||||
getOcc(){
|
||||
occ().then(res => {
|
||||
console.log(res)
|
||||
this.occs = res.occs
|
||||
this.yesterdayCrystal = res.yesterday_crystal
|
||||
this.occ = res.occ
|
||||
@@ -190,7 +199,10 @@
|
||||
if(res.help_toast) this.helpToast = res.help_toast
|
||||
this.showCartc(res.movements)
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 绘制图表
|
||||
@@ -264,154 +276,100 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 气泡漂浮 */
|
||||
.number-float{
|
||||
/* 星球旋转 */
|
||||
.ball{
|
||||
position: absolute;
|
||||
height: 480rpx;
|
||||
width: 480rpx;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -240rpx;
|
||||
margin-left: -240rpx;
|
||||
border-radius: 50%;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
background: url(/static/background/chain-back-02.png) repeat-x;
|
||||
background-size: auto 100%;
|
||||
-webkit-animation: move-map 30s infinite linear;
|
||||
-moz-animation: move-map 30s infinite linear;
|
||||
-o-animation: move-map 30s infinite linear;
|
||||
-ms-animation: move-map 30s infinite linear;
|
||||
animation: move-map 30s infinite linear;
|
||||
box-shadow: 0 0 50rpx 50rpx rgba(31,25,34, .2);
|
||||
}
|
||||
.shadow{
|
||||
position: absolute;
|
||||
top: 1%;
|
||||
left: 5%;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
border-radius: 50%;
|
||||
filter: blur(5px);
|
||||
z-index: 3;
|
||||
background: radial-gradient(circle at 50% 0, rgba(255,255,255, .6) , rgba(255, 255, 255, .0) 58%);
|
||||
}
|
||||
.ball:before,
|
||||
.ball::after{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
filter: blur(5px);
|
||||
z-index: 2;
|
||||
}
|
||||
.ball:before {
|
||||
background: radial-gradient(circle at 100% 50%, #5881d3 , rgba(255, 255, 255, .0) 45%);
|
||||
}
|
||||
.ball::after {
|
||||
background: radial-gradient(circle at 0 50%, #ca66e0 , rgba(255, 255, 255, .0) 45%);
|
||||
}
|
||||
@-webkit-keyframes move-map {
|
||||
0% {background-position: -1250rpx 0; }
|
||||
100% {background-position: 0 0;}
|
||||
}
|
||||
@-ms-keyframes move-map {
|
||||
0% {background-position: -1250rpx 0; }
|
||||
100% {background-position: 0 0;}
|
||||
}
|
||||
|
||||
@keyframes move-map {
|
||||
0% {background-position: -1250rpx 0; }
|
||||
100% {background-position: 0 0;}
|
||||
}
|
||||
|
||||
/* 水晶漂浮动画 */
|
||||
.oct-float {
|
||||
animation: 4s octfloat infinite;
|
||||
}
|
||||
@keyframes octfloat{
|
||||
0%{
|
||||
@keyframes octfloat {
|
||||
0% {
|
||||
margin-top: 0;
|
||||
}
|
||||
50%{
|
||||
|
||||
50% {
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
100%{
|
||||
|
||||
100% {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
/* 背景旋转 */
|
||||
.number-rotate{
|
||||
animation: 30s octrotate infinite linear;
|
||||
}
|
||||
@keyframes octrotate{
|
||||
from{
|
||||
transform:rotate(0deg);
|
||||
}
|
||||
to{
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
// 背景
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
background: $mian-color-deep;
|
||||
min-height: 100vh;
|
||||
padding-top: var(--status-bar-height);
|
||||
box-sizing: border-box;
|
||||
background-image: url(@/static/background/chain-back-00.png);
|
||||
background-size: 100%;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
// 求助icon
|
||||
.help-icon{
|
||||
vertical-align: middle;
|
||||
margin-bottom: 4px;
|
||||
margin-left: $margin/2;
|
||||
opacity: .7;
|
||||
}
|
||||
// 原石账户
|
||||
.info{
|
||||
margin-top: calc(#{$margin * 2} + 60rpx);
|
||||
padding: var(--status-bar-height) $padding * 2 $padding * 3;
|
||||
text-align: center;
|
||||
.info-number{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 568rpx;
|
||||
height: 568rpx;
|
||||
.number-background{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.info-content{
|
||||
position: absolute;
|
||||
top: 12%;
|
||||
left: 12%;
|
||||
width: 76%;
|
||||
height: 76%;
|
||||
background-image: url(@/static/background/chain-back-02.png);
|
||||
background-size: cover;
|
||||
color: white;
|
||||
.text{
|
||||
font-size: $title-size-m;
|
||||
text-shadow: 2rpx 2rpx 0 rgba($color: $mian-color-deep, $alpha: .5);
|
||||
}
|
||||
.number{
|
||||
font-weight: bold;
|
||||
font-size: $title-size + 8;
|
||||
line-height: 70rpx;
|
||||
text-shadow: 2rpx 2rpx 0 rgba($color: $mian-color-deep, $alpha: .5);
|
||||
}
|
||||
.login{
|
||||
margin-top: $margin;
|
||||
background-color: $mian-color;
|
||||
display: inline-block;
|
||||
padding: ( $padding / 2 ) $padding;
|
||||
font-size: $title-size-m;
|
||||
border-radius: 30rpx;
|
||||
border:solid 1rpx $mian-color-deep;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 预计增长
|
||||
.increase{
|
||||
margin: 0 ($margin + $margin / 2) ($margin * 2);
|
||||
background: rgba($color: $mian-color, $alpha: .1);
|
||||
text-align: center;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: $title-size-m;
|
||||
color: $mian-color;
|
||||
border-radius: $radius-sm;
|
||||
padding: 0 $padding;
|
||||
}
|
||||
// 公告信息
|
||||
.notice{
|
||||
position: fixed;
|
||||
top: $margin * 2;
|
||||
left: $margin + $margin / 2;
|
||||
right: $margin + $margin / 2;
|
||||
padding-top: var(--status-bar-height);
|
||||
z-index: 99;
|
||||
.notice-swiper{
|
||||
height: 60rpx;
|
||||
}
|
||||
.notice-item{
|
||||
position: relative;
|
||||
height: 60rpx;
|
||||
padding-left: 80rpx;
|
||||
padding-right: $padding * 2;
|
||||
display: inline-block;
|
||||
background: rgba($color: $mian-color-deep, $alpha: .3);
|
||||
border-radius: 30rpx;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
.notice-cover{
|
||||
position: absolute;
|
||||
height: 60rpx;
|
||||
width: 60rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: $mian-color-deep;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.notice-title{
|
||||
line-height: 60rpx;
|
||||
color: white;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
}
|
||||
min-height: calc(100vh - 60px);
|
||||
background: #1f1922;
|
||||
overflow: hidden;
|
||||
}
|
||||
// 平台概况
|
||||
.situation{
|
||||
margin: 0 ($margin + $margin / 2);
|
||||
background-image: linear-gradient(to bottom, rgba($color: $mian-color, $alpha: .1), $mian-color-deep);
|
||||
border-radius: $radius-sm;
|
||||
padding: $padding;
|
||||
margin: 0 $margin;
|
||||
background-image: linear-gradient(to bottom, $block-color, #1f1922);
|
||||
border-radius: $radius;
|
||||
padding: $padding $padding/2 $padding*2;
|
||||
// 平台统计
|
||||
.header{
|
||||
display: flex;
|
||||
@@ -419,23 +377,22 @@
|
||||
margin-bottom: $margin*2;
|
||||
.number{
|
||||
color: white;
|
||||
font-size: $title-size + 4;
|
||||
font-size: $title-size;
|
||||
padding-top: $padding/2;
|
||||
font-weight: bold;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
.title{
|
||||
color: $mian-color;
|
||||
font-weight: bold;
|
||||
color: rgba($color: white, $alpha: .4);
|
||||
font-size: $title-size-sm;
|
||||
}
|
||||
.header-item{
|
||||
width: 50%;
|
||||
padding: $padding $padding / 2;
|
||||
padding: $padding / 2;
|
||||
box-sizing: border-box;
|
||||
&:first-child{
|
||||
width: 100%;
|
||||
.number{
|
||||
font-size: $title-size + 10;
|
||||
font-size: $title-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -446,12 +403,12 @@
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -$margin / 2;
|
||||
.node-item{
|
||||
background: rgba($color: $mian-color, $alpha: .2);
|
||||
background: rgba($color: $block-color, $alpha: .8);
|
||||
width: calc(50% - #{$margin});
|
||||
margin: $margin / 2;
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
border-radius: $radius-sm;
|
||||
border-radius: $radius/2;
|
||||
}
|
||||
.number{
|
||||
font-size: $title-size + 4;
|
||||
@@ -459,21 +416,20 @@
|
||||
color: white;
|
||||
}
|
||||
.title{
|
||||
font-size: $title-size-m;
|
||||
font-weight: bold;
|
||||
color: rgba($color: white, $alpha: .7);
|
||||
font-size: $title-size-sm;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
// 图表
|
||||
.chart{
|
||||
background: rgba($color: $mian-color, $alpha: .2);
|
||||
background: rgba($color: $block-color, $alpha: .8);
|
||||
padding: $padding;
|
||||
border-radius: $radius-sm;
|
||||
margin-top: $margin*2;
|
||||
border-radius: $radius/2;
|
||||
margin-top: $margin;
|
||||
.title{
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
color: rgba($color: $mian-color, $alpha: 1.0);
|
||||
color: white;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
.chart-f2{
|
||||
@@ -481,4 +437,137 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// 数据统计
|
||||
.total {
|
||||
position: relative;
|
||||
margin: $margin;
|
||||
background: #2b2449;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
border-radius: $radius;
|
||||
.item {
|
||||
width: 50%;
|
||||
padding: 0 $padding;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: $title-size-sm;
|
||||
line-height: 76rpx;
|
||||
image{
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
vertical-align: top;
|
||||
margin-top: calc((76rpx - 38rpx) / 2);
|
||||
margin-right: $margin / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
width: 2rpx;
|
||||
left: 50%;
|
||||
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .7), transparent);
|
||||
}
|
||||
}
|
||||
// 求助icon
|
||||
.help-icon{
|
||||
vertical-align: middle;
|
||||
margin-left: $margin/3;
|
||||
opacity: .7;
|
||||
}
|
||||
// 矿石
|
||||
.ore {
|
||||
position: relative;
|
||||
padding-top: 120%;
|
||||
&>image {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.ore-lists {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.oct-float-item{
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
.text {
|
||||
margin-top: $margin / 2;
|
||||
color: white;
|
||||
font-size: $title-size-sm;
|
||||
line-height: 40rpx;
|
||||
text-shadow: 0 3rpx 3rpx rgba($color: #000000, $alpha: .2);
|
||||
}
|
||||
.icon {
|
||||
width: 58rpx;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.ore-item-nav{
|
||||
@extend .oct-float-item;
|
||||
right: $margin * 3;
|
||||
top: 12%;
|
||||
}
|
||||
.ore-item {
|
||||
@extend .oct-float-item;
|
||||
&:nth-child(1) { top: 16%; left: 13%; }
|
||||
&:nth-child(2) { top: 50%; right: 10%; }
|
||||
&:nth-child(3) { top: 23%; right: 20%; }
|
||||
&:nth-child(4) { top: 70%; left: 33%;}
|
||||
&:nth-child(5) { top: 40%; left: 20%; }
|
||||
&:nth-child(6) { top: 58%; left: 10%;}
|
||||
&:nth-child(7) { top: 10%; right: 43%;}
|
||||
&:nth-child(8) { top: 46%; right: 29%;}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 任务
|
||||
.task-block {
|
||||
white-space: nowrap;
|
||||
.item {
|
||||
background: rgba($color: $mian-color, $alpha: .2);
|
||||
display: inline-block;
|
||||
margin-left: $margin;
|
||||
width: 210rpx;
|
||||
padding: $padding * 2 $padding;
|
||||
border-radius: $radius;
|
||||
box-sizing: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .06);
|
||||
text-align: center;
|
||||
&:first-child {
|
||||
margin-left: $margin + $margin/2;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: $margin + $margin/2;
|
||||
}
|
||||
.icon {
|
||||
display: inline-block;
|
||||
margin: $margin 0;
|
||||
width: 98rpx;
|
||||
height: 98rpx;
|
||||
line-height: 98rpx;
|
||||
background: $mian-color-deep;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
image {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-size: $title-size-m;
|
||||
color: $mian-color;
|
||||
}
|
||||
.title {
|
||||
font-size: $title-size;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
249
pages/instrument/Spread.vue
Normal file
249
pages/instrument/Spread.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="codeContent">
|
||||
<image class="codeContent-back" src="../../static/icons/store_codeBack.png" mode="widthFix"></image>
|
||||
<image class="codeContent-cont" src="../../static/icons/store_contBack.png" mode="widthFix"></image>
|
||||
<view class="textContent">
|
||||
<view class="company">
|
||||
<image class="company-logo" :src="companyInfo.cover" mode="aspectFill"></image>
|
||||
<view class="company-cont">
|
||||
<view class="nowrap company-name">{{companyInfo.name}}</view>
|
||||
<view class="company-tips">易货平台</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="code">
|
||||
<image class="code-img" :src="companyInfo.code" mode="aspectFit"></image>
|
||||
<!-- <view class="code-text">简单扫一扫，即可进入平台</view> -->
|
||||
</view>
|
||||
<!-- @click="shareCanvas" -->
|
||||
<view class="codeBnt">
|
||||
扫码推广
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<canvas class="codeImg" canvas-id="qrcodeCard"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { companiesCode } from '@/apis/interfaces/store'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
companyInfo : ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
companiesCode().then(res=>{
|
||||
this.companyInfo = res
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 绘制图片
|
||||
shareCanvas(e){
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
})
|
||||
|
||||
// 下载头像
|
||||
let avatarImg = new Promise(success=>{
|
||||
uni.getImageInfo({
|
||||
src : this.companyInfo.cover,
|
||||
success : res => {
|
||||
success(res.path)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 下载二维码
|
||||
let codeImg = new Promise(success => {
|
||||
uni.getImageInfo({
|
||||
src : this.companyInfo.code,
|
||||
success : res => {
|
||||
success(res.path)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
Promise.all([avatarImg, codeImg]).then(res => {
|
||||
// 绘制海报
|
||||
const ctx = uni.createCanvasContext('qrcodeCard')
|
||||
ctx.save()
|
||||
|
||||
// 绘制背景图片
|
||||
ctx.drawImage('../../static/icons/store_downBack', 0, 0, 375, 603)
|
||||
|
||||
// 绘制头像
|
||||
ctx.drawImage(res[0], 0, 0, 60, 60)
|
||||
|
||||
// 绘制二维码
|
||||
ctx.drawImage(res[1], 140, 250, 110, 110)
|
||||
|
||||
// 文字
|
||||
ctx.setFontSize(16)
|
||||
ctx.fillText(this.companyInfo.name, 194, 180 , 270)
|
||||
|
||||
ctx.setFontSize(16)
|
||||
ctx.fillText('邀请你加入易货平台', 194, 180 , 270)
|
||||
|
||||
ctx.save();
|
||||
ctx.beginPath(); //开始绘制
|
||||
ctx.arc(50 / 2 + 170, 50 / 2 + 110, 50 / 2, 0, Math.PI * 2, false);
|
||||
ctx.clip();
|
||||
|
||||
// 保存图片
|
||||
ctx.draw(true, () => {
|
||||
uni.hideLoading()
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'qrcodeCard',
|
||||
x: 0,
|
||||
y: 0,
|
||||
success: res => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success : res=>{
|
||||
if (res.errMsg == "saveImageToPhotosAlbum:ok"){
|
||||
uni.showToast({
|
||||
title: '分享海报已保存至相册',
|
||||
icon : 'none'
|
||||
})
|
||||
}else{
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
fail : err=>{
|
||||
if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny"){
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : '暂未授权小程序写入您的相册，无法存储二维码海报',
|
||||
confirmColor: '#d82526',
|
||||
confirmText : '去设置',
|
||||
success : res=>{
|
||||
if (res.confirm){
|
||||
uni.openSetting()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}).catch(err=>{
|
||||
uni.showToast({
|
||||
title: '海报下载，请检查网络',
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
background-color: #e93340;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.codeContent {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.codeContent-back {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
}
|
||||
.codeContent-cont {
|
||||
left: 5%;
|
||||
width: 90%;
|
||||
top: 100px;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
}
|
||||
.codeContent-tips {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20rpx;
|
||||
width: 200rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
.textContent {
|
||||
position: absolute;
|
||||
padding: 20rpx 20rpx 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
width: 70%;
|
||||
z-index: 3;
|
||||
left: 15%;
|
||||
right: 15%;
|
||||
top: 140px;
|
||||
}
|
||||
.company {
|
||||
width: 100%;
|
||||
.company-logo {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.company-cont {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 230rpx;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 20rpx 20rpx 30rpx 210rpx;
|
||||
font-size: $title-size;
|
||||
.company-name {
|
||||
font-weight: 600;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
.company-tips {
|
||||
font-size: 26rpx;
|
||||
color: #787878;
|
||||
}
|
||||
}
|
||||
}
|
||||
.code {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: $margin;
|
||||
.code-img {
|
||||
width: 90%;
|
||||
}
|
||||
.code-text {
|
||||
color: #787878;
|
||||
margin-top: $margin - 10;
|
||||
font-size: $title-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.codeBnt {
|
||||
background-color: #e1293f;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
line-height: 90rpx;
|
||||
font-weight: 600;
|
||||
font-size: $title-size;
|
||||
color: #FFFFFF;
|
||||
box-shadow: 4rpx 0 10rpx rgba(155,0,19,.5);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* canvas */
|
||||
.codeImg {
|
||||
position: absolute;
|
||||
left: -1000%;
|
||||
height: 603px;
|
||||
width: 375px;
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="News-detail" v-if="loaded">
|
||||
<view class="item" v-for="(item,index) in items" v-if="items.length>0"
|
||||
<view class="item" v-for="(item,index) in items" :key="index" v-if="items.length>0"
|
||||
@click="item.read_at === ''?read(index,item):noread(item)">
|
||||
<view class="top">
|
||||
<image src="/static/images/news_2_1.png" mode="widthFix"></image>
|
||||
|
||||
327
pages/shop/create.vue
Normal file
327
pages/shop/create.vue
Normal file
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="create-form">
|
||||
<view class="header">
|
||||
<view @click="updLogo">
|
||||
<image class="logo" style="border: none;" v-if="cover.showpath" :src="cover.showpath" mode="aspectFill" />
|
||||
<image class="logo" v-else src="@/static/icons/add-icon.png" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<input type="text" v-model="name" placeholder="门店/部门名称" />
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<input type="number" v-model="mobile" placeholder="门店联系电话" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="inputs">
|
||||
<label class="inputs-label">开店时间</label>
|
||||
<picker mode="time" @change="pickerTime" :value="startTime" data-key="startTime">
|
||||
<view class="time-text">
|
||||
{{startTime || '选择开店时间'}}
|
||||
<uni-icons class="time-icon" type="arrowdown" size="18" color="#999"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label class="inputs-label">闭店时间</label>
|
||||
<picker mode="time" @change="pickerTime" :value="endTime" data-key="endTime">
|
||||
<view class="time-text">
|
||||
{{endTime || '选择闭店时间'}}
|
||||
<uni-icons class="time-icon" type="arrowdown" size="18" color="#999"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="inputs addrss-input">
|
||||
<label class="inputs-label">门店地址</label>
|
||||
<textarea class="inputs-textarea" v-model="address" placeholder="输入门店地址" auto-height/>
|
||||
<view class="addrss-icon" @click="onLocation">
|
||||
<uni-icons type="location-filled" size="20" color="#c82626"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="inputs">
|
||||
<label class="inputs-label">门店简介</label>
|
||||
<textarea class="inputs-textarea" v-model="description" placeholder="门店简介..." />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="create-btns">
|
||||
<button class="item-btn btn-submit" type="default" @click="createShop">{{type === 'add' ? '创建': '保存'}}</button>
|
||||
<button class="item-btn btn-delete" type="default" @click="onDeleteShop" v-if="type === 'edit'">删除</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { create, putShop, deleteShop, editInfo } from '@/apis/interfaces/shop'
|
||||
import { uploads } from '@/apis/interfaces/uploading'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type : 'add',
|
||||
id : '',
|
||||
cover : {
|
||||
showpath: '',
|
||||
path : '',
|
||||
},
|
||||
name : '',
|
||||
mobile : '',
|
||||
address : '',
|
||||
startTime : '',
|
||||
endTime : '',
|
||||
description : '',
|
||||
latitude : '',
|
||||
longitude : ''
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
if(this.$Route.query.id){
|
||||
this.type = 'edit'
|
||||
this.getInfo()
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 获取编辑信息
|
||||
getInfo(){
|
||||
editInfo(this.$Route.query.id).then(res => {
|
||||
this.id = res.store_id
|
||||
this.cover = res.cover
|
||||
this.name = res.name
|
||||
this.mobile = res.mobile
|
||||
this.address = res.address
|
||||
this.startTime = res.start_time
|
||||
this.endTime = res.end_time
|
||||
this.description= res.description
|
||||
this.latitude = res.latitude
|
||||
this.longitude = res.longitude
|
||||
})
|
||||
},
|
||||
// 获取地址
|
||||
onLocation(){
|
||||
uni.chooseLocation({
|
||||
success: res => {
|
||||
this.address = res.address
|
||||
this.longitude = res.longitude
|
||||
this.latitude = res.latitude
|
||||
},
|
||||
fail: err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 选择营业时间
|
||||
pickerTime(e){
|
||||
this[e.target.dataset.key] = e.detail.value
|
||||
},
|
||||
// 编辑创建
|
||||
createShop(){
|
||||
let data = {
|
||||
cover : this.cover.path,
|
||||
name : this.name,
|
||||
mobile : this.mobile,
|
||||
address : this.address,
|
||||
latitude : this.latitude,
|
||||
longitude : this.longitude,
|
||||
description : this.description,
|
||||
start_time : this.startTime,
|
||||
end_time : this.endTime
|
||||
}
|
||||
|
||||
if(this.type === 'edit'){
|
||||
putShop(this.id, {...data}).then(res => {
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : res,
|
||||
showCancel : false,
|
||||
success : modalRes => {
|
||||
this.$Router.back()
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
return
|
||||
}
|
||||
create({...data}).then(res => {
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : res,
|
||||
showCancel : false,
|
||||
success : modalRes => {
|
||||
this.$Router.back()
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 删除门店
|
||||
onDeleteShop(){
|
||||
deleteShop(this.id).then(res => {
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : res,
|
||||
showCancel : false,
|
||||
success : modalRes => {
|
||||
this.$Router.back()
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 上传logo
|
||||
updLogo(){
|
||||
uni.chooseImage({
|
||||
crop: { width: 188, height: 188 },
|
||||
success: path => {
|
||||
uploads([{
|
||||
name: 'logo',
|
||||
uri : path.tempFilePaths[0]
|
||||
}]).then(res => {
|
||||
this.cover = {
|
||||
showpath: res.url[0],
|
||||
path: res.path[0]
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 门店信息
|
||||
.create-form{
|
||||
.header{
|
||||
position: relative;
|
||||
background: white;
|
||||
padding-left: $padding + 150;
|
||||
.logo{
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: $padding;
|
||||
top: 26rpx;
|
||||
border: dashed 2rpx $border-color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.inputs{
|
||||
position: relative;
|
||||
padding-right: $padding;
|
||||
input,
|
||||
.time-text{
|
||||
line-height: 80rpx;
|
||||
height: 80rpx;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
&::after{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
content: " ";
|
||||
height: 1rpx;
|
||||
background: $border-color;
|
||||
}
|
||||
&:last-child::after{
|
||||
display: none;
|
||||
}
|
||||
.time-text{
|
||||
padding-right: 80rpx;
|
||||
.time-icon{
|
||||
position: absolute;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: right;
|
||||
width: 80rpx;
|
||||
right: $padding;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.info{
|
||||
@extend .header;
|
||||
margin-top: $margin;
|
||||
padding-left: 0;
|
||||
background: white;
|
||||
.inputs{
|
||||
padding-left: $padding + 150;
|
||||
.inputs-label{
|
||||
position: absolute;
|
||||
left: $padding;
|
||||
top: 0;
|
||||
font-size: $title-size-lg;
|
||||
line-height: 80rpx;
|
||||
height: 80rpx;
|
||||
width: 150rpx;
|
||||
}
|
||||
.inputs-textarea{
|
||||
width: 100%;
|
||||
padding: 20rpx 0;
|
||||
height: 160rpx;
|
||||
font-size: $title-size-lg;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
&.addrss-input{
|
||||
padding-right: $padding + 100;
|
||||
.addrss-icon{
|
||||
position: absolute;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: right;
|
||||
width: 80rpx;
|
||||
right: $padding;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 按钮组
|
||||
.create-btns{
|
||||
padding: $padding;
|
||||
.item-btn{
|
||||
border-radius: 0;
|
||||
background: white;
|
||||
font-size: $title-size;
|
||||
line-height: 90rpx;
|
||||
height: 90rpx;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.btn-submit{
|
||||
background: $text-price;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
margin-bottom: $margin;
|
||||
}
|
||||
.btn-delete{
|
||||
border: solid 1rpx $border-color;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
120
pages/shop/lists.vue
Normal file
120
pages/shop/lists.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<view class="lists">
|
||||
<block v-if="lists.length > 0">
|
||||
<view class="lists-item" v-for="(item, index) in lists" :key="index" @click="$Router.push({name: 'shopCreate', params: { id: item.store_id }})">
|
||||
<view class="header">
|
||||
<image class="logo" :src="item.cover" mode="aspectFill"></image>
|
||||
<view class="title">{{item.name}}</view>
|
||||
<view class="time"><text>营业时间{{item.start_time}} 至 {{item.end_time}}</text></view>
|
||||
<view class="icons">
|
||||
<uni-icons type="arrowright" color="#999" size="18"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="address">店铺地址：{{item.address}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="list-null">
|
||||
<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
|
||||
<view class="sub-title">暂未创建店铺/部门</view>
|
||||
<view class="sub-btn" @click="$Router.push({name: 'shopCreate'})">创建</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { shops } from '@/apis/interfaces/shop'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lists: []
|
||||
};
|
||||
},
|
||||
onShow(){
|
||||
shops().then(res => {
|
||||
console.log(res)
|
||||
this.lists = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 空提示
|
||||
.list-null{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
padding-bottom: 20vh;
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
text-align: center;
|
||||
@extend .vertical;
|
||||
.sub-title{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
.icon{
|
||||
width: 288rpx;
|
||||
}
|
||||
.sub-btn{
|
||||
width: 200rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
background: $mian-color;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
margin-top: $margin*2;
|
||||
}
|
||||
}
|
||||
// 列表
|
||||
.lists-item{
|
||||
background: white;
|
||||
margin: $margin;
|
||||
border-radius: $radius/2;
|
||||
padding: $padding;
|
||||
.header{
|
||||
position: relative;
|
||||
padding-left: 128rpx;
|
||||
padding-right: 100rpx;
|
||||
min-height: 108rpx;
|
||||
padding-bottom: $padding - 10;
|
||||
.logo{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 108rpx;
|
||||
height: 108rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.title{
|
||||
line-height: 60rpx;
|
||||
font-size: $title-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
.time{
|
||||
line-height: 40rpx;
|
||||
font-size: $title-size-sm;
|
||||
text{
|
||||
background-color: $border-color-lg;
|
||||
color: $text-gray;
|
||||
padding: 0 $padding/2;
|
||||
}
|
||||
}
|
||||
.icons{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
line-height: 108rpx;
|
||||
}
|
||||
}
|
||||
.address{
|
||||
border-top: solid 1rpx $border-color;
|
||||
padding-top: $padding - 10;
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
left: 50rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,10 +4,10 @@
|
||||
<!-- 邀请码图 -->
|
||||
<view class="codeBack">
|
||||
<image class="codeBack-img" src="/static/user/user-codeIcon.png" mode="widthFix"></image>
|
||||
<view class="codeBack-avatar">
|
||||
<image src="/static/user/call.png" mode="aspectFill"></image>
|
||||
<view class="codeBack-avatar" v-if="inviteData.user_info">
|
||||
<image :src="inviteData.user_info.avatar ? inviteData.user_info.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
|
||||
<view class="">
|
||||
张慢慢
|
||||
{{inviteData.user_info.nickname}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="codeBack-top">
|
||||
@@ -15,7 +15,7 @@
|
||||
您的邀请码
|
||||
</view>
|
||||
<view class="codeBack-number">
|
||||
8012568
|
||||
{{inviteData.invite}}
|
||||
</view>
|
||||
<view class="codeBack-copy" @click="copyCenter(inviteData.invite)">
|
||||
复制
|
||||
@@ -51,6 +51,7 @@
|
||||
// 二维码
|
||||
inviteInfo(){
|
||||
userInvite().then(res => {
|
||||
console.log(res)
|
||||
this.inviteData = res
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
@@ -161,7 +162,7 @@
|
||||
color: #7c52fc
|
||||
}
|
||||
.codeBack-number {
|
||||
font-size: 60rpx;
|
||||
font-size: 40rpx;
|
||||
color: #7c52fc;
|
||||
text-transform:uppercase;
|
||||
font-weight: 700;
|
||||
@@ -196,6 +197,8 @@
|
||||
}
|
||||
.codeBack-avatar {
|
||||
margin-top: $margin * 2;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
image {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
@@ -204,7 +207,7 @@
|
||||
}
|
||||
}
|
||||
.codeBack-yard {
|
||||
padding: $padding $padding * 4 $padding * 2;
|
||||
padding: $padding $padding * 2 $padding * 2;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: $title-size-lg;
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
<view class="userVip-top-name" v-if="userIdentity.right">
|
||||
开通{{userIdentity.right.name}}。
|
||||
</view>
|
||||
<view class="userVip-top-btn">
|
||||
<view class="userVip-top-btn" v-if="!userIdentity.is_top" @click="$Router.push({name: 'vipIndex'})">
|
||||
去开通<image class="userVip-top-arrow" src="/static/user/userVip_arrow.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
@@ -92,12 +92,17 @@
|
||||
<view class="userVip-rightst-more">全部权益 <image class="userVip-rightst-more-img" src="/static/user/userVip_more_arrow.png"></image></view>
|
||||
</view>
|
||||
<view class="userVip-rightst-list" v-if="userIdentity.right">
|
||||
<block v-for="(item, index) in userIdentity.right.rights" :key="index">
|
||||
<view class="userVip-rightst-label" v-if="index <= 3">
|
||||
<view v-for="(item, index) in userIdentity.right.rights" :key="index" class="userVip-rightst-label">
|
||||
<block v-if="index <= 3">
|
||||
<image class="userVip-rightst-img" :src="item.cover"></image>
|
||||
<view class="userVip-rightst-name">{{item.name}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="nowrap userVip-rightst-name">{{item.name}}</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="userVip-rightst-label">
|
||||
<image class="userVip-rightst-img" src="/static/user/userRightst_icon_more.png"></image>
|
||||
<view class="nowrap userVip-rightst-name">敬请期待</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -149,16 +154,16 @@
|
||||
我的伙伴
|
||||
</view>
|
||||
<view class="partner-list" v-if="userData.relation_count">
|
||||
<view class="partner-label">
|
||||
<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:''}})">
|
||||
<view class="partner-label-name">伙伴总数</view>
|
||||
<view class="partner-label-number">{{userData.relation_count.all || 0}}</view>
|
||||
</view>
|
||||
<view class="partner-label">
|
||||
<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:1}})">
|
||||
<view class="partner-label-name">直接伙伴</view>
|
||||
<view class="partner-label-number">{{userData.relation_count.one || 0}}</view>
|
||||
</view>
|
||||
<view class="partner-label">
|
||||
<view class="partner-label-name">简接伙伴</view>
|
||||
<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:2}})">
|
||||
<view class="partner-label-name">间接伙伴</view>
|
||||
<view class="partner-label-number">{{userData.relation_count.two || 0}}</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -178,7 +183,7 @@
|
||||
<image class="tool-label-img" src="/static/user/userTool-01.png" mode=""></image>
|
||||
<view class="tool-label-name">优惠券管理</view>
|
||||
</view>
|
||||
<view class="tool-label">
|
||||
<view class="tool-label" @click="$Router.push({name: 'instrumentSpread'})">
|
||||
<image class="tool-label-img" src="/static/user/userTool-02.png" mode=""></image>
|
||||
<view class="tool-label-name">营销推广码</view>
|
||||
</view>
|
||||
@@ -186,14 +191,18 @@
|
||||
<image class="tool-label-img" src="/static/user/userTool-03.png" mode=""></image>
|
||||
<view class="tool-label-name">基础信息</view>
|
||||
</view>
|
||||
<view class="tool-label">
|
||||
<view class="tool-label" @click="$Router.push({name: 'shopLists'})">
|
||||
<image class="tool-label-img" src="/static/user/userTool-04.png" mode=""></image>
|
||||
<view class="tool-label-name">部门门店</view>
|
||||
</view>
|
||||
<view class="tool-label" @click="$Router.push({name: 'instrumentBasics'})">
|
||||
<view class="tool-label" @click="$Router.push({name: 'employeesList'})">
|
||||
<image class="tool-label-img" src="/static/user/userTool-05.png" mode=""></image>
|
||||
<view class="tool-label-name">店员管理</view>
|
||||
<view class="tool-label-name">员工管理</view>
|
||||
</view>
|
||||
<!-- <view class="tool-label" @click="$Router.push({name: 'verificationIndex'})">
|
||||
<image class="tool-label-img" src="/static/user/userTool-05.png" mode=""></image>
|
||||
<view class="tool-label-name">扫码核销</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -207,18 +216,18 @@
|
||||
<image class="tool-label-img" src="/static/user/userServe-00.png" mode=""></image>
|
||||
<view class="tool-label-name">专属客服</view>
|
||||
</view>
|
||||
<navigator hover-class="none" class="tool-label" @click="$Router.push({name: 'userCode'})">
|
||||
<view class="tool-label" @click="$Router.push({name: 'userCode'})">
|
||||
<image class="tool-label-img" src="/static/user/userServe-01.png" mode=""></image>
|
||||
<view class="tool-label-name">邀请好友</view>
|
||||
</navigator>
|
||||
<navigator hover-class="none" class="tool-label" @click="$Router.push({name: 'userHelp'})">
|
||||
</view>
|
||||
<view class="tool-label" @click="$Router.push({name: 'userHelp'})">
|
||||
<image class="tool-label-img" src="/static/user/userServe-02.png" mode=""></image>
|
||||
<view class="tool-label-name">帮助中心</view>
|
||||
</navigator>
|
||||
<navigator hover-class="none" class="tool-label" @click="$Router.push({name: 'userClause'})">
|
||||
</view>
|
||||
<view class="tool-label" @click="$Router.push({name: 'userClause'})">
|
||||
<image class="tool-label-img" src="/static/user/userServe-03.png" mode=""></image>
|
||||
<view class="tool-label-name">服务条款</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -229,7 +238,6 @@
|
||||
<view class="item" @click="$Router.push({name: 'couponsManagement'})">优惠券管理</view>
|
||||
<view class="item" @click="$Router.push({name: 'instrumentBasics'})">店员管理</view>
|
||||
<view class="item" @click="$Router.push({name: 'instrumentCustomer'})">成交客户</view>
|
||||
<view class="item" @click="$Router.push({name: 'instrumentBasics'})">店员管理</view>
|
||||
<view class="item" @click="$Router.push({name: 'Personal'})">个人认证</view>
|
||||
<view class="item" @click="$Router.push({name: 'companyApprove'})">企业认证</view>
|
||||
<view class="item" @click="$Router.push({name: 'companyApprove', params: { form_type: 'put' }})">编辑企业认证</view>
|
||||
@@ -247,6 +255,7 @@
|
||||
scroll : 0, // 回弹效果
|
||||
userData : '', // 用户信息
|
||||
userIdentity : '', // 用户身份
|
||||
helpDoc : '', // 资产说明
|
||||
classStyle : false, // 下拉vip时改变样式
|
||||
animatedShow : false, // vip上下跳动效果
|
||||
newList : [],
|
||||
@@ -267,11 +276,11 @@
|
||||
// 获取用户信息
|
||||
this.userInfo();
|
||||
|
||||
// 获取公告列表
|
||||
this.newInfo();
|
||||
|
||||
// 获取专属客服二维码
|
||||
this.customerInfo();
|
||||
|
||||
// 获取公告列表
|
||||
this.newInfo();
|
||||
},
|
||||
onHide() {
|
||||
// 移除vip模块跳动样式
|
||||
@@ -282,8 +291,8 @@
|
||||
userInfo() {
|
||||
// 读取配置信息
|
||||
userIndex().then(res=>{
|
||||
console.log(res)
|
||||
this.userData = res
|
||||
this.userData = res
|
||||
this.helpDoc = res.help_doc
|
||||
this.userIdentity = res.identityShow
|
||||
}).catch(err =>{
|
||||
uni.showToast({
|
||||
@@ -354,10 +363,12 @@
|
||||
|
||||
// 友情提示信息
|
||||
showHelp(type) {
|
||||
let content = '能量球钱包'
|
||||
if(type == 'chip') content = '能量碎片'
|
||||
let title = '能量球',
|
||||
content = this.helpDoc.energy_ball.description
|
||||
if(type == 'chip') title = '能量碎片'
|
||||
if(type == 'chip') content = this.helpDoc.energy_shard.description
|
||||
uni.showModal({
|
||||
title: '友情提示',
|
||||
title: title,
|
||||
content: content,
|
||||
showCancel: false
|
||||
})
|
||||
@@ -585,8 +596,8 @@
|
||||
z-index: 1;
|
||||
.user-tool-icon {
|
||||
padding-left: $padding;
|
||||
width: $uni-img-size-sm + 2;
|
||||
height: $uni-img-size-sm + 2;
|
||||
width: $uni-img-size-sm;
|
||||
height: $uni-img-size-sm;
|
||||
}
|
||||
}
|
||||
.user-back {
|
||||
@@ -612,7 +623,7 @@
|
||||
position: relative;
|
||||
.user-portrait-head {
|
||||
border-radius: $uni-border-radius-circle;
|
||||
border: 4rpx solid #b197ff;
|
||||
border: 4rpx solid #bfaaff;
|
||||
position: absolute;
|
||||
left: 8rpx;
|
||||
top: 14rpx;
|
||||
@@ -662,9 +673,9 @@
|
||||
margin: 30rpx 0 5rpx;
|
||||
font-size: 36rpx;
|
||||
.user-name-identity {
|
||||
width: 92rpx;
|
||||
width: 100rpx;
|
||||
height: 36rpx;
|
||||
margin: 6rpx 0 0 10rpx;
|
||||
margin: 4rpx 0 0 10rpx;
|
||||
}
|
||||
}
|
||||
.user-status {
|
||||
@@ -729,11 +740,13 @@
|
||||
.userVip-rights {
|
||||
margin-top: 40rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
background-image:linear-gradient(to bottom, #dbceff, #bb9fff);
|
||||
color: #5723af;
|
||||
.userVip-rightst-title {
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
.userVip-rightst-title-name {
|
||||
@@ -754,12 +767,12 @@
|
||||
display: flex;
|
||||
.userVip-rightst-label {
|
||||
display: inline-block;
|
||||
flex: 4;
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
.userVip-rightst-img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
144
pages/user/partner.vue
Normal file
144
pages/user/partner.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 分类 -->
|
||||
<view class="tabs">
|
||||
<view class="item" :class="{'show': larer == ''}" @click="onTabs('')">全部</view>
|
||||
<view class="item" :class="{'show': larer == '1'}" @click="onTabs('1')">直接</view>
|
||||
<view class="item" :class="{'show': larer == '2'}" @click="onTabs('2')">间接</view>
|
||||
</view>
|
||||
|
||||
<view class="partner-list">
|
||||
<view class="partner-label" v-for="(item, index) in lists" :key="index" :larer='larer'>
|
||||
<image class="partner-avatar" :src="item.avatar ? item.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
|
||||
<view class="partner-cont">
|
||||
<view class="partner-name">
|
||||
<view class="partner-nickname">
|
||||
{{item.nickname}}
|
||||
</view>
|
||||
<image v-if="item.identity" class="partner-identity" :src="item.identity.cover" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="partner-tel">
|
||||
{{item.username}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { userPartne } from '@/apis/interfaces/user'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
larer : '',
|
||||
lists : [],
|
||||
pages : {}
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.larer = this.$Route.query.larer
|
||||
// 获取伙伴列表
|
||||
this.getPartner()
|
||||
},
|
||||
methods: {
|
||||
// 伙伴列表
|
||||
getPartner() {
|
||||
userPartne({
|
||||
larer: this.larer
|
||||
}).then(res => {
|
||||
this.lists = res.users
|
||||
})
|
||||
},
|
||||
|
||||
// tabs
|
||||
onTabs(value){
|
||||
if(value == this.larer) return
|
||||
this.lists = []
|
||||
this.larer = value
|
||||
this.getPartner()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
padding-top: 90rpx;
|
||||
}
|
||||
|
||||
// tabs
|
||||
.tabs{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: white;
|
||||
padding: 15rpx 0;
|
||||
font-size: $title-size-lg;
|
||||
color: $text-gray;
|
||||
.item{
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
&.show{
|
||||
color: $text-price;
|
||||
border-bottom: solid 4rpx $text-price;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 列表
|
||||
.partner-list{
|
||||
margin: calc(#{$padding} - 10rpx);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: #FFFFFF;
|
||||
.partner-label {
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border-radius: 4rpx;
|
||||
width: 100%;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
&:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
.partner-avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.partner-cont {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 22rpx 20rpx 20rpx 150rpx;
|
||||
box-sizing: border-box;
|
||||
.partner-name {
|
||||
display: flex;
|
||||
margin-bottom: 15rpx;
|
||||
.partner-nickname {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.partner-identity {
|
||||
width: 120rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -270,7 +270,7 @@
|
||||
width: calc(100% - 60rpx);
|
||||
height: 360rpx;
|
||||
background-image: linear-gradient(to left, #076cff, #076cff);
|
||||
box-shadow: 0 10rpx 20rpx 0rpx rgba($color: $main-color, $alpha: 0.4);
|
||||
box-shadow: 0 10rpx 20rpx 0rpx rgba($color: $mian-color, $alpha: 0.4);
|
||||
margin: 0 30rpx;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
38
pages/vip/agree.vue
Normal file
38
pages/vip/agree.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="contentTitle">
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { userAgree } from '@/apis/interfaces/vip'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
userAgree().then(res => {
|
||||
this.content = res.content
|
||||
}).catch(err =>{
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contentTitle {
|
||||
padding: $padding;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
541
pages/vip/vip.vue
Normal file
541
pages/vip/vip.vue
Normal file
@@ -0,0 +1,541 @@
|
||||
<template>
|
||||
<view class="content" v-if="!loding">
|
||||
<swiper class="vip-container" previous-margin="55rpx" next-margin="55rpx" circular @change="swiperChange">
|
||||
<swiper-item class="swiper-item" v-for="(item, index) in identitie" :key="index">
|
||||
<view class="vip-item" :class="tabsIndex == index ? 'color-item-img' : ''">
|
||||
<image class="vip-back" :src="item.card_cover" mode="scaleToFill"></image>
|
||||
<view class="vip-cont">
|
||||
<view class="vip-name">
|
||||
{{item.name}}<image class="vip-name-img" @click="showRemark(item.name, item.node_definition)" src="../../static/user/vip_privilege_03.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="vip-number" v-if="item.count">
|
||||
{{item.count.stock > 0 ? '剩余名额：' + item.count.residue : '不限名数'}}
|
||||
</view>
|
||||
<view class="vip-tips">
|
||||
<!-- 轻节点 -->
|
||||
<view v-if="item.identity_id == 2" class="vip-tips-text vip-tips-color-00">
|
||||
{{item.title}}
|
||||
</view>
|
||||
|
||||
<!-- 会员 -->
|
||||
<view v-else-if="item.identity_id == 3" class="vip-tips-text vip-tips-color-01">
|
||||
{{item.title}}
|
||||
</view>
|
||||
|
||||
<!-- VIP节点 -->
|
||||
<view v-else-if="item.identity_id == 4" class="vip-tips-text vip-tips-color-02">
|
||||
{{item.title}}
|
||||
</view>
|
||||
|
||||
<!-- 主节点 -->
|
||||
<view v-else-if="item.identity_id == 5" class="vip-tips-text vip-tips-color-03">
|
||||
{{item.title}}
|
||||
</view>
|
||||
|
||||
<!-- 超级节点 -->
|
||||
<view v-else-if="item.identity_id == 6" class="vip-tips-text vip-tips-color-04">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 会员特权 -->
|
||||
<view class="privilege">
|
||||
<view class="privilege-list">
|
||||
<image class="privilege-img" src="/static/user/vip_privilege_00.png" mode=""></image>
|
||||
<view class="privilege-text">
|
||||
<view class="privilege-name">
|
||||
节点定义
|
||||
</view>
|
||||
{{identitie[tabsIndex].node_definition}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="privilege-list">
|
||||
<image class="privilege-img" src="/static/user/vip_privilege_01.png" mode=""></image>
|
||||
<view class="privilege-text">
|
||||
<view class="privilege-name">
|
||||
升级条件
|
||||
</view>
|
||||
<view class="privilege-label" :class="{'active' : item.finish == true}" v-for="(item, index) in identitie[tabsIndex].get_condition" :key="index">
|
||||
&{{item.message}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="privilege-list">
|
||||
<image class="privilege-img" src="/static/user/vip_privilege_02.png" mode=""></image>
|
||||
<view class="privilege-text">
|
||||
<view class="privilege-name">
|
||||
节点权益
|
||||
</view>
|
||||
<view class="privilege-label privilege-right" v-for="(item, index) in identitie[tabsIndex].rights" :key="index">
|
||||
&{{item.remark}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户协议 -->
|
||||
<view class="agree">
|
||||
<view class="agree-tips" @click="$Router.push({name: 'vipAgree'})">
|
||||
请仔细阅读并确认服务协议
|
||||
</view>
|
||||
</view>
|
||||
<view class="agree-btn" @click="agreeChange">
|
||||
<radio :checked="selected" style="transform: scale(.7);" color="#7c52fc"></radio>会员服务协议
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 开通按钮 -->
|
||||
<view class="footer">
|
||||
<block v-if="identitie[tabsIndex].identity_id == 2">
|
||||
<image class="footer-btn" :src="identitie[tabsIndex].button_cover" mode="widthFix" @click="openUrl"></image>
|
||||
</block>
|
||||
<block v-else>
|
||||
<image class="footer-btn" :src="identitie[tabsIndex].button_cover" mode="widthFix" @click="openOrder"></image>
|
||||
</block>
|
||||
<!-- <button class="footer-btn" type="default" >
|
||||
<view class="footer-btn-num">
|
||||
合计：{{total}}
|
||||
</view>
|
||||
<view class="footer-btn-pay">
|
||||
立即支付
|
||||
</view>
|
||||
</button> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { identities, vipOrder, vipWechatPay, vipCont } from '@/apis/interfaces/vip'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loding : true,
|
||||
tabsIndex : 0,
|
||||
user : {},
|
||||
identitie : [],
|
||||
rights : [],
|
||||
description : '',
|
||||
identityTime: '', // 到期时间
|
||||
sumNumber : 1, // 开通年限
|
||||
total : '', // 开通年限总资金额
|
||||
selected : false, // 用户协议
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 获取当前用户信息
|
||||
this.idenInfo();
|
||||
},
|
||||
methods: {
|
||||
// 当前用户信息
|
||||
idenInfo(){
|
||||
identities().then(res => {
|
||||
console.log(res.identities)
|
||||
this.loding = false
|
||||
this.identitie = res.identities
|
||||
this.rights = res.identities[this.tabsIndex].rights
|
||||
this.total = res.identities[this.tabsIndex].price
|
||||
}).catch(err =>{
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 切换开通身份
|
||||
swiperChange(e) {
|
||||
this.tabsIndex = e.detail.current
|
||||
// 获取当前用户信息
|
||||
this.idenInfo();
|
||||
},
|
||||
|
||||
// 开通会员
|
||||
openOrder(){
|
||||
if(this.selected == false) {
|
||||
uni.showToast({
|
||||
title: '请勾选用户协议',
|
||||
icon : 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
let identitiesId = this.identitie[this.tabsIndex].identity_id
|
||||
vipOrder(identitiesId,{
|
||||
year: 1
|
||||
}).then(res => {
|
||||
if(!res.test){
|
||||
let verifyForm = res
|
||||
this.wechatPay(res.id)
|
||||
}else{
|
||||
// 测试环境
|
||||
uni.showModal({
|
||||
title : '开通提示',
|
||||
content : '会员开通成功，是否继续完成企业认证',
|
||||
showCancel : true,
|
||||
cancelText : '稍后认证',
|
||||
confirmText : '立即认证',
|
||||
success : modalRes => {
|
||||
if(modalRes.confirm){
|
||||
this.$Router.replace({name: 'Approve'})
|
||||
return
|
||||
}
|
||||
this.$Router.back()
|
||||
},
|
||||
fail(err) {
|
||||
}
|
||||
})
|
||||
}
|
||||
}).catch(err =>{
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 轻节点身份-跳转个人认证
|
||||
openUrl() {
|
||||
this.$Router.push({name: 'Personal'})
|
||||
},
|
||||
|
||||
// 微信支付
|
||||
wechatPay(id){
|
||||
vipWechatPay(id).then(res => {
|
||||
let payConfig = JSON.parse(res.wechat),
|
||||
payIdentity = res.identity
|
||||
uni.requestPayment({
|
||||
provider : "wxpay",
|
||||
orderInfo : payConfig,
|
||||
success : payRes => {
|
||||
console.log(payRes)
|
||||
},
|
||||
fail : payErr => {
|
||||
console.log(payErr)
|
||||
}
|
||||
})
|
||||
}).catch(err =>{
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 勾选协议
|
||||
agreeChange() {
|
||||
this.selected = !this.selected
|
||||
},
|
||||
|
||||
// 会员权益介绍
|
||||
showRemark(title, val){
|
||||
uni.showModal({
|
||||
title : title,
|
||||
content : val,
|
||||
showCancel : false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.vip-container {
|
||||
width: 750rpx;
|
||||
height: 340rpx;
|
||||
margin-top: $margin;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
width: 640rpx;
|
||||
height: 340rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.vip-item {
|
||||
width: 640rpx;
|
||||
height: 340rpx;
|
||||
border-radius: 20rpx;
|
||||
position: relative;
|
||||
.vip-back {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.vip-cont {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9;
|
||||
padding: 45rpx 70rpx;
|
||||
box-sizing: border-box;
|
||||
.vip-name {
|
||||
display: flex;
|
||||
font-size: 46rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
.vip-name-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin: 12rpx 20rpx;
|
||||
}
|
||||
}
|
||||
.vip-number {
|
||||
margin: 10rpx 0 40rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
opacity: .8;
|
||||
}
|
||||
.vip-tips {
|
||||
font-size: 30rpx;
|
||||
background-color: #e8ebf6;
|
||||
display: inline-block;
|
||||
border-radius: 80rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
padding: 0 30rpx;
|
||||
.vip-tips-text {
|
||||
font-weight: 700;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.vip-tips-color-00 {
|
||||
background-image: linear-gradient(to bottom,#6189f0,#b6b9c1);
|
||||
}
|
||||
.vip-tips-color-01 {
|
||||
background-image: linear-gradient(to top,#ffd459,#ff6c52);
|
||||
}
|
||||
.vip-tips-color-02 {
|
||||
background-image: linear-gradient(to top,#e0c9fe,#892edb);
|
||||
}
|
||||
.vip-tips-color-03 {
|
||||
background-image: linear-gradient(to top,#f6b237,#f035e3);
|
||||
}
|
||||
.vip-tips-color-04 {
|
||||
background-image: linear-gradient(to top,#c455ec,#5f76e9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 会员特权
|
||||
.privilege {
|
||||
padding: 20rpx 30rpx 80rpx;
|
||||
box-sizing: border-box;
|
||||
.privilege-list {
|
||||
margin-bottom: 50rpx;
|
||||
display: flex;
|
||||
.privilege-img {
|
||||
width: 74rpx;
|
||||
height: 74rpx;
|
||||
}
|
||||
.privilege-text {
|
||||
width: calc(100% - 74rpx);
|
||||
padding-left: 40rpx;
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
line-height: 52rpx;
|
||||
.privilege-name {
|
||||
font-size: 40rpx;
|
||||
color: #000000;
|
||||
margin: 10rpx 0 20rpx;
|
||||
}
|
||||
.privilege-label.active {
|
||||
color: #f6b338;
|
||||
}
|
||||
.privilege-right {
|
||||
color: #7877eb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 用户协议
|
||||
.agree {
|
||||
margin: $margin 0;
|
||||
text-align: center;
|
||||
.agree-tips {
|
||||
background-color: #999999;
|
||||
display: inline-block;
|
||||
padding: 14rpx $padding;
|
||||
color: #FFFFFF;
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
}
|
||||
.agree-btn {
|
||||
display: flex;
|
||||
font-size: $title-size-lg;
|
||||
text-align: left;
|
||||
color: #999999;
|
||||
padding: $padding;
|
||||
}
|
||||
|
||||
// .content{
|
||||
// min-height: 100vh;
|
||||
// background: #fefaef;
|
||||
// }
|
||||
// 开通须知
|
||||
.notice{
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
padding: $padding $padding*2 $padding*2;
|
||||
.title{
|
||||
padding-bottom: $padding/2;
|
||||
font-weight: bold;
|
||||
}
|
||||
.item{
|
||||
padding-bottom: $padding/2;
|
||||
line-height: 40rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
// footer
|
||||
.footer{
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
.footer-btn{
|
||||
width: 74%;
|
||||
}
|
||||
}
|
||||
// 会员权限
|
||||
.privilege{
|
||||
padding: $padding;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
color: #322711;
|
||||
font-size: $title-size;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
.privilege-box{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: $padding 0;
|
||||
.item{
|
||||
width: 25%;
|
||||
padding: $padding/2;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
.icon{
|
||||
width: 78rpx;
|
||||
height: 78rpx;
|
||||
background: #bd995d;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
}
|
||||
.text{
|
||||
font-size: $title-size-sm;
|
||||
color: #201212;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 会员卡
|
||||
.cards{
|
||||
position: relative;
|
||||
background: #1f1b1c;
|
||||
.card{
|
||||
position: relative;
|
||||
margin: 0 $margin;
|
||||
background: linear-gradient(to right, #3b3d4a, #231d1f);
|
||||
padding: 15rpx;
|
||||
border-radius: $radius/2;
|
||||
z-index: 2;
|
||||
.card-content{
|
||||
position: relative;
|
||||
border:solid 1rpx rgba($color: white, $alpha: .4);
|
||||
border-radius: $radius/2;
|
||||
padding: 30rpx 180rpx 60rpx 148rpx;
|
||||
min-height: 98rpx;
|
||||
.cover{
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: 30rpx;
|
||||
width: 98rpx;
|
||||
height: 98rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.user{
|
||||
color: rgba($color: white, $alpha: .7);
|
||||
line-height: 58rpx;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
.sub-time{
|
||||
line-height: 40rpx;
|
||||
color: #e6ce9e;
|
||||
font-size: $title-size-sm;
|
||||
}
|
||||
.btn{
|
||||
position: absolute;
|
||||
color: #261f0f;
|
||||
background: #e6ce9e;
|
||||
width: 160rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: $title-size-m;
|
||||
right: 30rpx;
|
||||
top: 50rpx;
|
||||
line-height: 58rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cards-angle{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
&::after{
|
||||
content: " ";
|
||||
height: 70rpx;
|
||||
background: #b29671;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
border-radius: $radius/2;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
// tabs
|
||||
.tabs{
|
||||
background: #1f1b1c;
|
||||
color: white;
|
||||
padding: 0 0 $padding 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: $title-size-lg;
|
||||
.item{
|
||||
margin: 0 $margin;
|
||||
line-height: 70rpx;
|
||||
height: 70rpx;
|
||||
color: rgba($color: white, $alpha: .6);
|
||||
&.show{
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
color: white;
|
||||
&::after{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
width: 60%;
|
||||
height: 6rpx;
|
||||
border-radius: 3rpx;
|
||||
content: " ";
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user