0b2/peiwan-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目初始化

Browse Source
This commit is contained in:
jerry
2025-01-21 01:46:34 +08:00
parent 364021b042
commit 48153e7761
962 changed files with 172070 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
pages/worker/blind/components/gameBox.vue Normal file
View File

@@ -0,0 +1,149 @@
<template>
<view>
<view class="option-box">
<view class="tag-box">
<u-icon name="tags" color="#88e6b4" size="34"></u-icon>
<view class="name">技能类型</view>
</view>
<view class="span-box">
<view @click="changeGame(option)" class="span" :class="catId == option.id ? 'active': '' " v-for="(option,t) in optionList">{{option.name}}</view>
</view>
</view>
<view class="option-box" v-if="categoryList.length > 0">
<view class="tag-box">
<u-icon name="tags" color="#88e6b4" size="34"></u-icon>
<view class="name">选项</view>
</view>
<view class="span-box">
<view @click="changeCategory(option)" class="span" :class="gameId == option.id ? 'active': '' " v-for="(option,t) in categoryList">{{option.name}}</view>
</view>
</view>
<view class="option-box" v-if="goodsList.length > 0">
<view class="tag-box">
<u-icon name="tags" color="#88e6b4" size="34"></u-icon>
<view class="name">选项</view>
</view>
<view class="span-box">
<view @click="changeGoods(option)" class="span" :class="goodsId == option.id ? 'active': '' " v-for="(option,t) in goodsList">{{option.name}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
components: {
},
props: {
optionList: {
type: Array,
default: [],
},
modelValue: {
type: Object,
default: {}
},
},
data() {
return {
catId: -1,
gameId: -1,
goodsId: -1,
categoryList: [],
goodsList: [],
goodsList: [],
}
},
methods: {
changeGame(e) {
this.gameId = -1;
this.goodsId = -1;
this.catId = e.id;
if(e.categoryList){
this.goodsList = [];
this.categoryList = e.categoryList;
}else{
this.categoryList = [];
this.goodsList = e.goodsList;
}
var node = {
catId: this.catId,
gameId: this.gameId,
goodsId: this.goodsId,
price: 0,
}
this.$emit('update:modelValue', node);
},
changeCategory(e) {
this.goodsId = -1;
this.gameId = e.id;
this.goodsList = e.goodsList;
var node = {
catId: this.catId,
gameId: this.gameId,
goodsId: this.goodsId,
price: 0,
}
this.$emit('update:modelValue', node);
},
changeGoods(e) {
this.goodsId = e.id;
var node = {
catId: this.catId,
gameId: this.gameId,
goodsId: this.goodsId,
price: e.price,
}
this.$emit('update:modelValue', node);
},
}
}
</script>
<style lang="scss" scoped>
.option-box {
margin-bottom: 10px;
.tag-box {
display: flex;
align-items: center;
margin-bottom: 12px;
.name {
font-size: 28rpx;
font-weight: 700;
color: #1a1a1a;
padding-left: 3px;
}
}
.span-box {
display: flex;
flex-wrap: wrap;
.span {
padding: 10rpx 30rpx;
font-size: 28rpx;
background-color: #f5f5f5;
min-width: 120rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 40px;
margin-right: 7px;
margin-bottom: 8px;
}
.active {
background-color: var(--ui-BG-Main);
color: #fff;
}
}
}
</style>

357
pages/worker/blind/components/layout.vue Normal file
View File

@@ -0,0 +1,357 @@
<template>
<view class="content">
<su-navbar color="var(--ui-BG-Main)" :title="title" statusBar></su-navbar>
<view :style="{paddingTop: paddingTop + 'px', paddingBottom: paddingBottom + 'rpx'}">
<view class="game-card">
<view class="title">
<u-icon name="tags" color="#f5736a" size="34"></u-icon>
<view class="name">达人性别</view>
</view>
<view class="sex-option">
<view class="sex-tab" @click="sexChange(1)">
<view class="img-span">
<img v-if="form.sex == 1" class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/16d050d0b229f12a8997a8118ca815c936bdb9b580db48ab8b2737181ca8518a.png"></img>
<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/15c4eb12397fb3374be6e8bf38854b708abb09f61fb076eaa0c23d5f92cc9583.png"></img>
<view class="sex-ok" v-if="form.sex == 1">
<u-icon name="checkmark-circle-fill" color="#fe8497" size="34"></u-icon>
</view>
</view>
<view class="name">小姐姐</view>
</view>
<view class="sex-tab" @click="sexChange(0)">
<view class="img-span">
<img v-if="form.sex == 0" class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/74e49dd19affb2c8016df4805d3947bab3a93af83236e4f875b5ea18bf57d8b3.png"></img>
<img v-else class="img" src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/d0757757a5b4c0559f1bc1d373ab983902bd056bda7ca4be6c2fa04553b4665d.png"></img>
<view class="sex-ok" v-if="form.sex == 0">
<u-icon name="checkmark-circle-fill" color="#6497f8" size="34"></u-icon>
</view>
</view>
<view class="name">小哥哥</view>
</view>
</view>
<view class="title">
<u-icon name="tags" color="#e475e5" size="34"></u-icon>
<view class="name">达人等级</view>
</view>
<view class="level-option">
<view @click="levelChange(option)" class="tab" :class="option.id == form.workerClerkLevelId ? 'active' : ''" v-for="(option,t) in levelList">{{option.name}}</view>
</view>
<game-box v-model="game" :optionList="goodsList"></game-box>
<view class="input-box">
<view class="title">
<u-icon name="tags" color="#e475e5" size="34"></u-icon>
<view class="name">购买数量</view>
</view>
<view class="step-span">
<tui-numberbox iconBgColor="var(--ui-BG-Main)" iconColor="#fff" backgroundColor="#fff" :min="1" :value="form.num" @change="change"></tui-numberbox>
</view>
</view>
<view class="input-box">
<view class="title">
<u-icon name="tags" color="#e475e5" size="34"></u-icon>
<view class="name">排除下单过的达人</view>
</view>
<view class="step-span">
<u-switch active-color="var(--ui-BG-Main)" size="40" v-model="form.blind"></u-switch>
</view>
</view>
</view>
<view class="bottom-box">
<view class="price-box">
<text>总价：</text>
<text class="price">{{ fen2yuan(game.price*form.num) }}</text>
<text>钻石</text>
</view>
<view class="btn-box">
<view class="pay-btn" @click="confirm">立即下单</view>
</view>
</view>
</view>
</view>
</template>
<script>
import gameBox from '@/pages/worker/blind/components/gameBox.vue';
import tuiNumberbox from "@/components/thorui/tui-numberbox/tui-numberbox.vue"
import ClerkApi from '@/sheep/api/worker/clerk';
import sheep from '@/sheep';
export default {
components: {
gameBox,
tuiNumberbox,
},
props: {
title: {
type: String,
default: '',
}
},
data() {
return {
paddingTop: 0,
paddingBottom: 200,
height: 0,
form: {
num: 1,
goodsId: -1,
price: 0,
sex: 2,
workerClerkLevelId: 0,
blind: false,
},
game: {
goodsId: -1,
price: 0,
},
goodsList: [],
levelList: [
{
id: 0,
name: '金牌',
},
{
id: 1,
name: '银牌',
},
{
id: 2,
name: '铜牌',
},
],
}
},
created() {
this.initData();
},
methods: {
initData() {
ClerkApi.getClerkBlind().then(res => {
this.goodsList = res.data.goodsList;
this.levelList = res.data.clerkLevelList;
});
},
sexChange(e) {
this.form.sex = e;
},
levelChange(e) {
this.form.workerClerkLevelId = e.id;
},
change(e) {
this.form.num = e.value
},
fen2yuan(price) {
var f = 0;
var p = (price / 100.0).toFixed(0);
var p1 = (price / 100.0).toFixed(1);
var p2 = (price / 100.0).toFixed(2);
if(p*100 == price){
f = 0;
}else if(p1*100 == price){
f = 1;
}else if(p2*100 == price){
f = 2;
}
return (price / 100.0).toFixed(f)
},
confirm() {
this.form.goodsId = this.game.goodsId,
this.form.price = this.game.price*this.form.num
if(this.form.sex > 1) {
sheep.$helper.toast('请选择店员性别');
return;
}
if(this.form.workerClerkLevelId < 1) {
sheep.$helper.toast('请选择店员等级');
return;
}
if(this.form.goodsId < 0) {
sheep.$helper.toast('请选择服务类型');
return;
}
if(this.form.price < 1) {
sheep.$helper.toast('价格不能为0');
return;
}
var data = {
workerClerkLevelId: this.form.workerClerkLevelId,
sex: this.form.sex,
blind: this.form.blind,
items : [
{
skuId: this.form.goodsId,
count: this.form.num,
},
]
}
sheep.$router.go('/pages/order/blind/confirm',{data: JSON.stringify(data)});
},
}
}
</script>
<style lang="scss" scoped>
.game-card {
background-color: #fff;
padding: 15px;
.title {
display: flex;
align-items: center;
.name {
font-size: 28rpx;
font-weight: 700;
color: #1a1a1a;
padding-left: 3px;
}
}
.sex-option {
display: flex;
align-items: center;
margin: 15px 0px;
.sex-tab {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin-right: 30px;
.img-span {
width: 130rpx;
height: 130rpx;
position: relative;
display: flex;
justify-content: center;
.img {
height: 100%;
width: 100%;
}
.sex-ok {
background-color: #fff;
width: 34rpx;
height: 34rpx;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0;
border-radius: 100%;
}
}
}
.name {
font-size: 28rpx;
font-weight: 400;
padding-top: 10px;
color: #333;
}
}
.level-option {
display: flex;
padding: 15px 0;
flex-wrap: wrap;
.tab {
padding: 10rpx 30rpx;
font-size: 28rpx;
background-color: #f5f5f5;
min-width: 120rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 40px;
margin-right: 7px;
margin-bottom: 8px;
}
.active {
color: #fff;
background: var(--ui-BG-Main);
}
}
.input-box {
display: flex;
margin-bottom: 20px;
.step-span {
display: flex;
justify-content: flex-end;
flex: 1;
align-items: center;
}
}
}
.bottom-box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
height: 100rpx;
position: fixed;
left: 0;
right: 0;
bottom: -1px;
background-color: #fff;
z-index: 9;
box-shadow: 0 0 6px 0 #ccc;
.price-box {
color: #fb932c;
font-size: 28rpx;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
.price {
margin-right: 5px;
}
}
.btn-box {
width: 50%;
padding-left: 15px;
.pay-btn {
background-color: var(--ui-BG-Main);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 40px;
font-size: 28rpx;
height: 64rpx;
}
}
}
</style>

40
pages/worker/blind/index.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<view class="page-app theme-light main-green font-1">
<layout title="随机下单">
</layout>
<s-menu-tools />
<s-auth-modal />
</view>
</template>
<script>
import layout from '@/pages/worker/blind/components/layout.vue';
export default {
components: {
layout,
},
data() {
return {
}
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.page-app {
background-color: #fafafa;
padding-bottom: env(safe-area-inset-bottom);
}
</style>

109
pages/worker/levelList/components/layout.vue Normal file
View File

@@ -0,0 +1,109 @@
<!-- 虚拟列表演示(不使用内置列表)(vue) -->
<!-- 写法较简单，在页面中对当前需要渲染的虚拟列表数据进行for循环，在vue3中兼容性良好 -->
<!-- 在各平台兼容性请查阅https://z-paging.zxlee.cn/module/virtual-list.html -->
<template>
<view class="content">
<su-navbar :title="title" statusBar></su-navbar>
<view class="main-box">
<view class="title">当前等级：{{clerkLevel}}</view>
<level-list :dataList="tableList"></level-list>
</view>
<view class="bottom-box">
<view class="btn" @click="saveLevel">保存配置</view>
</view>
</view>
</template>
<script>
import LevelList from '@/pages/worker/levelList/components/levelList.vue';
import ClerkApi from '@/sheep/api/worker/clerk';
export default {
components: {
LevelList,
},
props: {
title: {
type: String,
default: '',
},
},
data() {
return {
tableList: [],
id: 0,
clerkLevel: '',
}
},
created() {
},
methods: {
initData(id) {
this.id = id;
ClerkApi.getGoodsList(id).then(res => {
this.tableList = res.data;
});
ClerkApi.getClerkLevel(id).then(res => {
this.clerkLevel = res.data;
});
},
saveLevel() {
var params = {
id: this.id,
categoryList: this.tableList
}
ClerkApi.saveGoodsList(params).then(res => {
});
},
}
}
</script>
<style lang="scss" scoped>
.main-box {
padding: 10px;
padding-bottom: 140rpx;
.title {
display: flex;
justify-content: center;
font-size: 28rpx;
font-weight: bold;
margin-bottom: 20px;
}
}
.bottom-box {
display: flex;
justify-content: center;
align-items: center;
padding: 7px 15px;
background-color: #fff;
box-shadow: 0 0 6px 0 #ccc;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
.btn {
background-color: var(--ui-BG-Main);;
padding: 10px;
border-radius: 40px;
color: #fff;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
font-size: 28rpx;
}
}
</style>

105
pages/worker/levelList/components/levelList.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<view>
<table-bd style="width: 100%;">
<table-tr>
<table-td :span="18" height="60" :fontSize="30" :bold="true" fontColor="#01BEFF" alignItems="center">技能列表</table-td>
<table-td :span="6" height="60" :fontSize="30" :bold="true" fontColor="#01BEFF" alignItems="center">开关</table-td>
</table-tr>
<block v-for="(tb,t) in dataList">
<table-tr>
<table-td :span="6" alignItems="center">{{tb.name}}</table-td>
<block v-if="tb.goodsList">
<table-td :span="12" :ellipsis="true" padding="0">
<block v-for="(tb2,t2) in tb.goodsList">
<table-tr :borderWidth="t2 == tb.goodsList.length-1 ? 0 : 1">
<table-td height="60" :span="24" :borderRight="false" alignItems="center">{{tb2.name}}</table-td>
</table-tr>
</block>
</table-td>
<table-td :span="6" :ellipsis="true" padding="0">
<block v-for="(tb2,t2) in tb.goodsList">
<table-tr :borderWidth="t2 == tb.goodsList.length-1 ? 0 : 1">
<table-td height="60" :span="24" borderWidth="1rpx" :borderRight="false" alignItems="center">
<view @click="changeLevel(tb2)"><u-switch active-color="var(--ui-BG-Main)" size="36" v-model="tb2.deleted"></u-switch></view>
</table-td>
</table-tr>
</block>
</table-td>
</block>
<block v-if="tb.categoryList">
<table-td :span="12" :ellipsis="true" padding="0">
<block v-for="(tb2,t2) in tb.categoryList">
<table-tr :borderWidth="t2 == tb.categoryList.length-1 ? 0 : 1">
<table-td :span="12" borderWidth="1rpx" alignItems="center">{{tb2.name}}</table-td>
<table-td :span="12" :ellipsis="true" :borderRight="false" padding="0">
<block v-for="(tb3,t3) in tb2.goodsList">
<table-tr :borderWidth="t3 == tb2.goodsList.length-1 ? 0 : 1">
<table-td height="60" :span="24" :borderRight="false" alignItems="center">{{tb3.name}}</table-td>
</table-tr>
</block>
</table-td>
</table-tr>
</block>
</table-td>
<table-td :span="6" :ellipsis="true" padding="0">
<block v-for="(tb2,t2) in tb.categoryList">
<block v-for="(tb3,t3) in tb2.goodsList">
<table-tr :borderWidth="t2 == tb.categoryList.length-1 && t3 == tb2.goodsList.length-1 ? 0 : 1">
<table-td height="60" :span="24" borderWidth="1rpx" :borderRight="false" alignItems="center">
<view @click="changeLevel(tb3)"><u-switch active-color="var(--ui-BG-Main)" size="36" v-model="tb3.deleted"></u-switch></view>
</table-td>
</table-tr>
</block>
</block>
</table-td>
</block>
</table-tr>
</block>
</table-bd>
</view>
</template>
<script>
import TableBd from '@/pages/worker/levelList/components/table-bd.vue';
import TableTd from '@/pages/worker/levelList/components/table-td.vue';
import TableTr from '@/pages/worker/levelList/components/table-tr.vue';
export default {
components: {
TableBd,
TableTd,
TableTr,
},
props: {
dataList: {
type: Array,
default: [],
},
},
data() {
return {
}
},
methods: {
changeLevel(e) {
if(e.deleted){
e.deleted = true;
}else{
e.deleted = false;
}
},
}
}
</script>
<style lang="scss" scoped>
</style>

100
pages/worker/levelList/components/table-bd.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<view class="tn-table-class tn-table" :class="[tableClass]" :style="[tableStyle]">
<slot></slot>
</view>
</template>
<script>
export default {
name: 'table-bd',
props: {
// 边框宽度
borderWidth: {
type: [String, Number],
default: ''
},
// 边框颜色
borderColor: {
type: String,
default: ''
},
// 显示上边框
borderTop: {
type: Boolean,
default: true
},
// 显示右边框
borderRight: {
type: Boolean,
default: false
},
// 显示下边框
borderBottom: {
type: Boolean,
default: false
},
// 显示左边框
borderLeft: {
type: Boolean,
default: true
}
},
computed: {
parentData() {
return [this.borderWidth, this.borderColor]
},
tableClass() {
let clazz = ''
return clazz
},
tableStyle() {
let style = {}
if (this.borderWidth !== '') {
style.borderWidth = this.borderWidth + 'rpx'
}
if (this.borderColor) {
style.borderColor = this.borderColor
}
if (this.borderLeft) {
style.borderLeftStyle = 'solid'
}
if (this.borderRight) {
style.borderRightStyle = 'solid'
}
if (this.borderTop) {
style.borderTopStyle = 'solid'
}
if (this.borderBottom) {
style.borderBottomStyle = 'solid'
}
return style
}
},
data() {
return {}
},
created() {
this.children = []
},
watch: {
parentData() {
// 更新子组件的数据
if (this.children.length) {
this.children.map((child) => {
typeof(child.updateParentData) === 'function' && child.updateParentData()
})
}
}
}
}
</script>
<style lang="scss" scoped>
.tn-table {
box-sizing: border-box;
width: 100%;
border-width: 1rpx;
border-style: none;
border-color: var(--ui-BG-Main);;
}
</style>

305
pages/worker/levelList/components/table-td.vue Normal file
View File

@@ -0,0 +1,305 @@
<template>
<view class="tn-td-class tn-td" :class="[tdClass]" :style="[tdStyle]" @tap.stop="handleClick">
<slot></slot>
</view>
</template>
<script>
export default {
name: 'table-td',
options: {
// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
virtualHost: true
},
props: {
// 占整个表格的宽度跨度
// [1-24]
span: {
type: Number,
default: 24
},
// 宽度
// 优先级比span高
width: {
type: [String, Number],
default: ''
},
// 高度
height: {
type: [String, Number],
default: ''
},
// 字体加粗
bold: {
type: Boolean,
default: false
},
// 格内边距
padding: {
type: String,
default: ''
},
// 边框颜色
borderColor: {
type: String,
default: ''
},
// 边框宽度
borderWidth: {
type: [String, Number],
default: ''
},
// 左边框
borderLeft: {
type: Boolean,
default: false
},
// 下边框
borderBottom: {
type: Boolean,
default: false
},
// 右边框
borderRight: {
type: Boolean,
default: true
},
// 文字超出隐藏
ellipsis: {
type: Boolean,
default: false
},
// 文本对齐方式
// left center right
textAlign: {
type: String,
default: 'left'
},
// 排列方式
// left center right
alignItems: {
type: String,
default: 'left'
},
// 收缩表格
shrink: {
type: Boolean,
default: true
},
// 铺满剩余空间
grow: {
type: Boolean,
default: false
},
// 隐藏
hidden: {
type: Boolean,
default: false
},
// 固定列数据
fixed: {
type: Boolean,
default: false
},
// zIndex
zIndex: {
type: Number,
default: 0
},
// 列数
index: {
type: [String, Number],
default: 0
},
// keys
keys: {
type: [String, Number],
default: ''
}
},
computed: {
tdClass() {
let clazz = ''
clazz += `${this.ellipsis ? 'tn-td--ellipsis' : 'tn-td--normal'}`
/* if (this.backgroundColorClass) {
clazz += ` ${this.backgroundColorClass}`
}
if (this.fontColorClass) {
clazz += ` ${this.fontColorClass}`
} */
if (this.alignItems) {
clazz += ` tn-td--${this.alignItems}`
}
if (this.textAlign) {
clazz += ` tn-td__text--${this.textAlign}`
}
if (!this.shrink) {
clazz += ' tn-td--shrink'
}
if (this.grow) {
clazz += ' tn-td--grow'
}
if (this.hidden) {
clazz += ' tn-td--hidden'
}
return clazz
},
tdStyle() {
let style = {}
/* if (this.backgroundColorStyle) {
style.backgroundColor = this.backgroundColorStyle
} */
/* if (this.fontColorStyle) {
style.color = this.fontColorStyle
} */
/* if (this.fontSizeStyle) {
style.fontSize = this.fontSizeStyle
} */
style.width = this.getWidth()
if (this.height) {
style.height = this.height + 'rpx';
}
style.fontWeight = this.bold ? 'bold' : 'normal'
if (this.padding) {
style.padding = this.padding
}
if (this.borderWidth !== '' || this.parentData.borderWidthValue !== '') {
style.borderWidth = this.borderWidth !== '' ? this.borderWidth+'rpx' : this.parentData.borderWidthValue + 'rpx'
}
if (this.borderColor || this.parentData.borderColorValue) {
style.borderColor = this.borderColor || this.parentData.borderColorValue
}
if (this.borderLeft) {
style.borderLeftStyle = 'solid'
}
if (this.borderRight) {
style.borderRightStyle = 'solid'
}
if (this.borderBottom) {
style.borderBottomStyle = 'solid'
}
if (this.fixed) {
style.zIndex = this.zIndex ? this.zIndex : 1000
}
return style
}
},
data() {
return {
parentData: {
borderColorValue: null,
borderWidthValue: null
}
}
},
created() {
this.parent = false
this.updateParentData()
this.parent && this.parent.children.push(this)
},
methods: {
// 获取表格宽度
getWidth() {
if (this.width) {
return this.width + 'rpx'
}
return [
'4.16666667%',
'8.33333333%',
'12.5%',
'16.66666667%',
'20.83333333%',
'25%',
'29.16666667%',
'33.33333333%',
'37.5%',
'41.66666667%',
'45.83333333%',
'50%',
'54.16666667%',
'58.33333333%',
'62.5%',
'66.66666667%',
'70.83333333%',
'75%',
'79.16666667%',
'83.33333333%',
'87.5%',
'91.66666667%',
'95.83333333%',
'100%'
][this.span - 1]
},
// 点击事件
handleClick() {
this.$emit('click', {
index: this.index,
key: this.keys
})
},
// 更新父组件信息
updateParentData() {
this.getParentData('tn-tr')
}
}
}
</script>
<style lang="scss" scoped>
.tn-td {
box-sizing: border-box;
position: relative;
word-break: break-all;
background-color: transparent;
height: auto;
padding: 12rpx;
border-width: 1rpx;
border-style: none;
border-color: var(--ui-BG-Main);
&--normal {
display: inline-flex;
align-items: center;
}
&--ellipsis {
display: inline-block;
overflow: hidden;
white-space: nowrap !important;
text-overflow: ellipsis;
}
&--shrink {
flex-shrink: 0;
}
&--grow {
flex-grow: 1;
}
&--left {
justify-content: flex-start;
}
&--center {
justify-content: center;
}
&--right {
justify-content: flex-end;
}
&__text {
&--left {
text-align: left;
}
&--center {
text-align: center;
}
&--right {
text-align: right;
}
}
&--hidden {
visibility: hidden;
}
}
</style>

208
pages/worker/levelList/components/table-tr.vue Normal file
View File

@@ -0,0 +1,208 @@
<template>
<view class="tn-tr-class tn-tr" :class="[trClass]" :style="[trStyle]">
<slot></slot>
</view>
</template>
<script>
export default {
name: 'table-tr',
options: {
// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
virtualHost: true
},
props: {
// 宽度
width: {
type: [String, Number],
default: ''
},
// 边框颜色
borderColor: {
type: String,
default: ''
},
// 边框宽度
borderWidth: {
type: [String, Number],
default: ''
},
// 左边框
borderLeft: {
type: Boolean,
default: false
},
// 上边框
borderTop: {
type: Boolean,
default: false
},
// 换行显示
wrap: {
type: Boolean,
default: false
},
// 固定表格
fixed: {
type: Boolean,
default: false
},
// left偏移值
left: {
type: [String, Number],
default: 0
},
// right偏移值
right: {
type: [String, Number],
default: 0
},
// top偏移值(自定义顶部导航栏时用到)
top: {
type: [String, Number],
default: 0
},
// 外边距
margin: {
type: String,
default: ''
},
// zIndex
zIndex: {
type: Number,
default: 0
},
// 行数索引
index: {
type: [String, Number],
default: 0
},
// 参数
params: {
type: String,
default: ''
}
},
computed: {
borderWidthValue() {
return this.borderWidth || this.parentData.borderWidth || ''
},
borderColorValue() {
return this.borderColor || this.parentData.borderColor || ''
},
trClass() {
let clazz = ''
/* if (this.backgroundColorClass) {
clazz += ` ${this.backgroundColorClass}`
}
if (this.fontColorClass) {
clazz += ` ${this.fontColorClass}`
} */
if (this.wrap) {
clazz += ' tn-tr--wrap'
}
if (this.fixed) {
clazz += ' tn-tr--fixed'
}
return clazz
},
trStyle() {
let style = {}
if (this.width) {
style.width = this.width + 'rpx'
}
/* if (this.backgroundColorStyle) {
style.backgroundColor = this.backgroundColorStyle
}
if (this.fontColorStyle) {
style.color = this.fontColorStyle
}
if (this.fontSizeStyle) {
style.fontSize = this.fontSizeStyle
} */
if (this.borderWidth !== '' || this.parentData.borderWidth !== '') {
style.borderWidth = this.borderWidth !== '' ? this.borderWidth + 'rpx' : this.parentData.borderWidth + 'rpx'
}
if (this.borderColor || this.parentData.borderColor) {
style.borderColor = this.borderColor || this.parentData.borderColor
}
if (this.borderLeft) {
style.borderLeftStyle = 'solid'
}
if (this.borderTop) {
style.borderTopStyle = 'solid'
}
if (this.fixed) {
style.left = this.left ? this.left + 'rpx' : 'auto'
style.right = this.right ? this.right + 'rpx' : 'auto'
style.top = this.top ? this.top + 'rpx' : 'auto'
}
if (this.margin) {
style.margin = this.margin
}
style.zIndex = this.zIndex ? this.zIndex : 1000
return style
}
},
data() {
return {
parentData: {
borderColor: null,
borderWidth: null
}
}
},
watch: {
parentData: {
handler() {
// 更新子组件的数据
if (this.children.length) {
this.children.map((child) => {
typeof(child.updateParentData) === 'function' && child.updateParentData()
})
}
},
deep: true
}
},
created() {
this.children = []
this.parent = false
this.updateParentData()
this.parent && this.parent.children.push(this)
},
methods: {
handleClick() {
this.$emit('click', {
index: this.index,
params: this.params
})
},
// 更新父组件信息
updateParentData() {
this.getParentData('tn-table')
}
}
}
</script>
<style lang="scss" scoped>
.tn-tr {
width: 100%;
display: flex;
box-sizing: border-box;
background-color: #FFFFFF;
border-width: 1rpx;
border-style: none none solid none;
border-color: var(--ui-BG-Main);;
&--wrap {
flex-wrap: wrap;
}
&--fixed {
position: fixed;
}
}
</style>

45
pages/worker/levelList/index.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<view class="page-app theme-light main-green font-1">
<layout ref="skill" title="技能管理"></layout>
<s-menu-tools />
</view>
</template>
<script>
import layout from '@/pages/worker/levelList/components/layout.vue';
export default {
components: {
layout,
},
props: {
},
data() {
return {
}
},
onLoad(options) {
var id = options.id;
this.$nextTick(() => {
this.$refs.skill.initData(id);
});
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.page-app {
background-color: #fff;
padding-bottom: 140rpx;
height: calc(100vh);
padding-bottom: env(safe-area-inset-bottom);
}
</style>

115
pages/worker/workerList/components/layout.vue Normal file
View File

@@ -0,0 +1,115 @@
<!-- 虚拟列表演示(不使用内置列表)(vue) -->
<!-- 写法较简单，在页面中对当前需要渲染的虚拟列表数据进行for循环，在vue3中兼容性良好 -->
<!-- 在各平台兼容性请查阅https://z-paging.zxlee.cn/module/virtual-list.html -->
<template>
<view class="content">
<!-- 如果页面中的cell高度是固定不变的，则不需要设置cell-height-mode，如果页面中高度是动态改变的，则设置cell-height-mode="dynamic" -->
<!-- 原先的v-model修改为@virtualListChange="virtualListChange"并赋值处理后的虚拟列表 -->
<z-paging ref="paging" use-virtual-list :force-close-inner-list="true" :paging-style="{ paddingTop: 0 + 'px', paddingBottom: paddingBottom + 'rpx' }" cell-height-mode="dynamic" @scroll="scroll" @virtualListChange="virtualListChange" @query="queryList">
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
<template #top>
<su-navbar :title="title" statusBar></su-navbar>
</template>
<!-- :id="`zp-id-${item.zp_index}`"和:key="item.zp_index" 必须写，必须写！！！！ -->
<!-- 这里for循环的index不是数组中真实的index了，请使用item.zp_index获取真实的index -->
<worker-list :virtualList="virtualList"></worker-list>
<template #bottom>
<view class="bottom-box">
<view class="btn" @click="addWorker">添加</view>
</view>
</template>
</z-paging>
</view>
</template>
<script>
import WorkerList from '@/pages/worker/workerList/components/workerList.vue';
import ClerkApi from '@/sheep/api/worker/clerk';
export default {
components: {
WorkerList,
},
props: {
title: {
type: String,
default: '',
}
},
data() {
return {
// 虚拟列表数组，通过@virtualListChange监听获得最新数组
virtualList: [],
scrollTop: 0,
paddingTop: 0,
paddingBottom: 0,
height: 0,
current: 0,
}
},
methods: {
initNav(e) {
this.height = e.height;
this.paddingTop = this.height;
},
scroll(e) {
this.scrollTop = e.detail.scrollTop;
},
// 监听虚拟列表数组改变并赋值给virtualList进行重新渲染
virtualListChange(vList) {
this.virtualList = vList;
},
queryList(pageNo, pageSize) {
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
const params = {
pageNo: pageNo,
pageSize: pageSize,
}
ClerkApi.getClerkApplyPage(params).then(res => {
// 将请求的结果数组传递给z-paging
this.$refs.paging.complete(res.data.list);
}).catch(res => {
// 如果请求失败写this.$refs.paging.complete(false);
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
this.$refs.paging.complete(false);
})
},
addWorker() {
this.$u.route({
url: 'pages/clerk/apply/index',
});
},
}
}
</script>
<style lang="scss" scoped>
.bottom-box {
display: flex;
justify-content: center;
align-items: center;
padding: 7px 15px;
background-color: #fff;
box-shadow: 0 0 6px 0 #ccc;
.btn {
background-color: var(--ui-BG-Main);
padding: 10px;
border-radius: 40px;
color: #fff;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
font-size: 28rpx;
}
}
</style>

208
pages/worker/workerList/components/workerList.vue Normal file
View File

@@ -0,0 +1,208 @@
<template>
<view class="worker-box">
<view :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in virtualList" class="worker-card">
<view class="main-box">
<view class="avatar-box">
<u-avatar mode="square" size="120" :src="item.avatar"></u-avatar>
<view class="online-box" v-if="item.onlineStatus">在线</view>
<view class="online-box" v-else>离线</view>
</view>
<view class="right-box">
<view class="nickname-box">
<view class="nickname">
<text class="name">{{item.nickname}}</text>
<view class="man-box" v-if="item.sex == 0">
<u-icon name="man"></u-icon>
<text>{{item.age}}</text>
</view>
<view class="woman-box" v-if="item.sex == 1">
<u-icon name="woman"></u-icon>
<text>{{item.age}}</text>
</view>
</view>
<view class="status" v-if="item.status == 0">待审核</view>
<view class="status" v-if="item.status == 1">已审核</view>
</view>
<view class="btn-box">
<view class="btn" @click="editApply(item)">编辑资料</view>
<view class="btn" @click="levelList(item)">技能管理</view>
<view class="btn" @click="setOnline(item)">在线状态</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
components: {
},
props: {
virtualList: {
type: Array,
default: [],
},
},
data() {
return {
}
},
methods: {
editApply(e) {
this.$u.route({
url: 'pages/clerk/apply/edit',
params: {
id: e.id,
}
});
},
levelList(e) {
this.$u.route({
url: 'pages/worker/levelList/index',
params: {
id: e.id,
}
});
},
setOnline(e) {
this.$u.route({
url: 'pages/worker/workerList/set',
params: {
id: e.id,
}
});
},
}
}
</script>
<style lang="scss" scoped>
.worker-box {
padding: 0 10px;
}
.worker-card {
padding: 10px;
margin-top: 10px;
background-color: #fff;
display: flex;
flex-direction: column;
flex: 1;
border-radius: 10px;
.main-box {
display: flex;
align-items: center;
.avatar-box {
position: relative;
width: 120rpx;
height: 120rpx;
.online-box {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
color: #fff;
background-color: var(--ui-BG-Main);
font-size: 11px;
padding: 1px 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
}
.right-box {
display: flex;
flex: 1;
flex-direction: column;
margin-left: 10px;
.nickname-box {
display: flex;
justify-content: space-between;
flex: 1;
align-items: center;
}
.nickname {
display: flex;
align-items: center;
.name {
font-size: 28rpx;
font-weight: bold;
margin-right: 5px;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300rpx;
overflow: hidden;
}
}
.man-box {
background: linear-gradient(90deg,#2b99ca,#87b5e7);
display: flex;
justify-content: center;
align-items: center;
border-radius: 40px;
color: #fff;
font-size: 20rpx;
padding: 1px 5px;
}
.woman-box {
background: linear-gradient(90deg,#c33239,#de8189);
display: flex;
justify-content: center;
align-items: center;
border-radius: 40px;
color: #fff;
font-size: 20rpx;
padding: 1px 5px;
}
.status {
font-size: 24rpx;
font-weight: bold;
color: var(--ui-BG-Main);
}
.btn-box {
display: flex;
justify-content: flex-end;
.btn {
background-color: var(--ui-BG-Main);
color: #fff;
border-radius: 40px;
font-size: 22rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 10rpx 20rpx;
margin-left: 5px;
margin-top: 20rpx;
}
}
}
}
}
</style>

40
pages/worker/workerList/index.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<view class="page-app theme-light main-green font-1">
<layout title="达人列表"></layout>
<s-menu-tools />
<s-auth-modal />
</view>
</template>
<script>
import layout from '@/pages/worker/workerList/components/layout.vue';
export default {
components: {
layout,
},
props: {
},
data() {
return {
}
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.page-app {
background-color: #fafafa;
padding-bottom: 140rpx;
height: calc(100vh);
padding-bottom: env(safe-area-inset-bottom);
}
</style>

148
pages/worker/workerList/set.vue Normal file
View File

@@ -0,0 +1,148 @@
<template>
<view class="page-app theme-light main-green font-1">
<su-navbar title="在线状态" statusBar></su-navbar>
<view class="form-card">
<view class="form-item">
<view class="label">接单时间段</view>
<view class="input">
<u-input input-align="right" placeholder="例如:8:00 - 21:00" v-model="form.onlineTime"></u-input>
</view>
</view>
<view class="form-item">
<view class="label">当前在线状态</view>
<view class="input">
<u-switch size="46" v-model="form.onlineStatus"></u-switch>
</view>
</view>
<view class="form-item">
<view class="label">盲盒订单提醒</view>
<view class="input">
<u-switch size="46" v-model="form.blindStatus"></u-switch>
</view>
</view>
<view class="btn-box">
<view class="btn" @click="saveApply">保存</view>
</view>
</view>
<s-menu-tools />
</view>
</template>
<script>
import sheep from '@/sheep';
import ClerkApi from '@/sheep/api/worker/clerk';
export default {
data() {
return {
show: false,
form: {
id: 0,
onlineTime: '',
onlineStatus: false,
blindStatus: false,
},
list: [
[
{
value: '8',
label: '8:00'
},
{
value: '9',
label: '9:00'
}
],
[
{
value: '8',
label: '8:00'
},
{
value: '9',
label: '9:00'
}
],
],
}
},
onLoad(options) {
this.form.id = options.id;
this.init();
},
methods: {
init() {
ClerkApi.getClerkApply(this.form.id).then((res) => {
this.form = res.data;
});
},
confirm(e) {
if(e[0].value >= e[1].value){
sheep.$helper.toast('开始时间不能大于结束时间');
return;
}
this.form.onlineTime = e[0].label+' - '+e[1].label;
},
timeSet() {
this.show = true;
},
saveApply() {
if(!this.form.onlineTime){
sheep.$helper.toast('请输入接单时间段');
return;
}
ClerkApi.updateOnlineStatus(this.form).then((res) => {
});
},
}
}
</script>
<style lang="scss" scoped>
.page-app {
background-color: #fafafa;
padding-bottom: 140rpx;
height: calc(100vh);
padding-bottom: env(safe-area-inset-bottom);
}
.form-card {
background-color: #fff;
margin: 10px;
padding: 15px;
border-radius: 10px;
.form-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
.label {
font-size: 24rpx;
}
}
.btn-box {
display: flex;
justify-content: center;
margin-top: 40px;
.btn {
background-color: var(--ui-BG-Main);
color: #fff;
font-size: 24rpx;
min-width: 75%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 40px;
padding: 10px 0;
}
}
}
</style>