TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

员工管理添加员工列表优惠券完善

Browse Source
This commit is contained in:
唐明明
2021-09-14 17:22:04 +08:00
parent f5e99ca292
commit 291ce57704
22 changed files with 7141 additions and 3586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
pages/company/approve.vue
View File

@@ -104,15 +104,14 @@
this.formType = this.$Route.query.formType
this.name = res.info.name
this.industryIndex = res.industries.findIndex(val => val.industry_id === res.info.industry.industry_id) || 0
this.category = res.info.categories
if(this.formType === 'put'){
appliesInfo().then(formValue => {
console.log(formValue)
for(let val of formValue.categories){
if(val.check){
this.categorys.push(val.category_id)
}
}
this.category = formValue.categories
this.corporate = formValue.certification.name
this.identity = formValue.certification.idcard
this.org = formValue.certification.code
@@ -124,6 +123,8 @@
icon : 'none'
})
})
}else{
this.category = res.info.categories
}
}).catch(err =>{
uni.showToast({
@@ -152,8 +153,8 @@
let method = this.formType === 'put' ? 'PUT' : 'POST'
applies({
name : this.name,
cover : this.logo,
license : this.license,
cover : this.logo.path,
license : this.license.path,
user_name : this.corporate,
id_card : this.identity,
code : this.org,

201
pages/coupons/add.vue
View File

@@ -1,14 +1,24 @@
<template>
<view>
<view class="coupons-preview">
<view class="item cover" @click="updCover">
<image class="cover-img" v-if="cover != ''" :src="cover" mode="aspectFill" />
<image class="cover-img" v-else src="@/static/icons/add-icon.png" mode="aspectFill" />
<view class="item cover">
<view v-if="types[typeIndex].id == 2">
<view class="cover-price">{{price || 0}}<text>元</text></view>
<view class="cover-subtitle">代金券</view>
</view>
<view @click="updCover" v-else>
<image class="cover-img" v-if="cover != ''" :src="cover" mode="aspectFill" />
<image class="cover-img" v-else src="@/static/icons/add-icon.png" mode="aspectFill" />
</view>
</view>
<view class="item mian">
<view class="title nowrap">{{couponsTitle || '优惠券标题'}}</view>
<view class="time nowrap">{{datePickerValue.length == 0 ? '优惠券有效期': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}</view>
<view class="goods nowrap">全店通用</view>
<block v-if="timeIndex == 0">
<view class="time nowrap">{{datePickerValue.length == 0 ? '有效期': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}</view>
</block>
<block v-else>
<view class="time nowrap">领取后{{timeNumber}}天内有效</view>
</block>
</view>
</view>
<view class="add-info">
@@ -19,18 +29,21 @@
</picker>
</view>
<view class="inputs">
<label class="input-label">券名称</label>
<input type="text" v-model="couponsTitle" placeholder="输入优惠券名称" />
<label class="input-label">券标题</label>
<input type="text" v-model="couponsTitle" placeholder="输入优惠券标题" />
</view>
<view class="inputs">
<label class="input-label">发券数量</label>
<input type="number" v-model="quantity" placeholder="输入优惠券发放量" />
<view class="input-number">
<uni-number-box class="number" :min="1" :max="9999" :value="quantity" @change="quantityChange"></uni-number-box>
</view>
</view>
<view class="inputs">
<label class="input-label">每人限领</label>
<input type="number" v-model="personQuantity" placeholder="输入每人限领数, 0为不限制" />
<view class="input-number">
<uni-number-box class="number" :min="1" :max="quantity" :value="personQuantity" @change="personQuantityChange"></uni-number-box>
</view>
</view>
<block v-if="types[typeIndex].id == 2">
<view class="inputs">
<label class="input-label">满</label>
@@ -40,46 +53,55 @@
<label class="input-label">减</label>
<input type="digit" v-model="price" placeholder="输入券优惠金额" />
</view>
<view class="inputs">
<label class="input-label">使用渠道</label>
<view class="input-checkbox">
<radio-group @change="radioChange">
<label class="input-checkbox-item">
<radio color="#e93340" value="1" checked/>
<text>线上优惠</text>
</label>
<label class="input-checkbox-item">
<radio color="#e93340" value="2"/>
<text>线下活动</text>
</label>
</radio-group>
</view>
</view>
</block>
<view class="inputs">
<label class="input-label">使用渠道</label>
<view class="input-checkbox">
<radio-group @change="radioChange">
<label class="input-checkbox-item">
<radio color="#c82626" value="1" checked/>
<text>线上</text>
</label>
<label class="input-checkbox-item">
<radio color="#c82626" value="2"/>
<text>线下</text>
</label>
</radio-group>
<label class="input-label">时间类型</label>
<picker :range="times" range-key="text" :value="timeIndex" data-type="timeIndex" @change="changePicker">
<view class="input-text">{{times[timeIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
</picker>
</view>
<view class="inputs">
<label class="input-label">{{timeIndex == 0 ? '券有效期': '延期天数'}}</label>
<block v-if="timeIndex === 0">
<view class="input-text" @click="showDatePicker = true">{{datePickerValue.length == 0 ? '选择优惠券有效期区间': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
<tn-date-picker :show="showDatePicker" :monthNum="12" color="#e93340" :showTips="true" beginText="开始日期" endText="结束日期" @confirm="confirmDatePicker" @cancel="showDatePicker = false"/>
</block>
<block v-if="timeIndex === 1">
<view class="input-number">
<uni-number-box class="number" :min="1" :value="timeNumber" @change="timeNumberChange"></uni-number-box>
</view>
</block>
</view>
<view class="inputs">
<label class="input-label">关联商品</label>
<view class="input-text" @click="onSelectGoods">
<block v-if="coupongoods.length > 0">已关联{{coupongoods.length}}件商品</block>
<block v-else>选择关联商品</block>
<uni-icons class="picker-icon" type="arrowdown" size="14" />
</view>
</view>
<view class="inputs">
<label class="input-label">券有效期</label>
<view class="input-text" @click="showDatePicker = true">{{datePickerValue.length == 0 ? '选择优惠券有效期': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}</view>
<tn-date-picker :show="showDatePicker" :monthNum="12" color="#c82626" :showTips="true" beginText="开始日期" endText="结束日期" @confirm="confirmDatePicker" @cancel="showDatePicker = false"/>
</view>
<view class="inputs">
<label class="input-label">设为推荐</label>
<picker :range="recommend" range-key="text" :value="recommendIndex" data-type="recommendIndex" @change="changePicker">
<view class="input-text">{{recommend[recommendIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
</picker>
</view>
<view class="inputs">
<label class="input-label">产品限制</label>
<picker :range="product" range-key="text" :value="productIndex" data-type="productIndex" @change="changePicker">
<view class="input-text">{{product[productIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
</picker>
</view>
</view>
<view class="add-textarea">
<label>使用规则</label>
<textarea :maxlength="-1" v-model="description" placeholder="输入使用规则说明" />
</view>
<view class="add-btn ios-bottom">
<button type="default" @click="updComponent">{{product[productIndex].type === 'all' ? '发布优惠券': '选择关联商品'}}</button>
<button type="default" @click="updComponent">发布优惠券</button>
</view>
</view>
</template>
@@ -100,29 +122,41 @@
{ id: 2, text: '代金券' },
{ id: 3, text: '提货券' },
],
recommendIndex : 0,
recommend : [
{ type: '0', text: '不推荐' },
{ type: '1', text: '推荐' }
timeIndex : 0,
times : [
{ type: 2, text: '固定时间（区间范围）' },
{ type: 1, text: '延期券（用户领取后有效天数）' }
],
productIndex : 0,
product : [
{ type: 'all', text: '全部商品通用' },
{ type: 'part', text: '部分商品可用' }
],
showDatePicker : false,
datePickerValue : [],
cover : '',
useWay : 1,
couponsTitle : '',
quantity : '',
personQuantity : '',
full : '',
price : '',
description : ''
showDatePicker : false, // 活动弹出层时间
datePickerValue : [], // 活动时间
cover : '', // 优惠券图标
useWay : 1, // 使用途径
couponsTitle : '', // 优惠券标题
quantity : 1, // 发券数量
personQuantity : 1, // 每人限领
full : '', // 满足金额
price : '', // 减少金额
description : '', // 使用规则
coupongoods : [], // 关联商品
timeNumber : 1 // 延期券时间
};
},
onShow(){
this.coupongoods = this.$store.getters.getCoupongoods
},
methods:{
// 发券数量
quantityChange(value){
this.quantity = value
},
// 每人限领
personQuantityChange(value){
this.personQuantity = value
},
// 延期券时间
timeNumberChange(value){
this.timeNumber = value
},
// 使用渠道
radioChange(e){
this.useWay = e.detail.value
@@ -154,9 +188,12 @@
}
})
},
// 选择关联商品
onSelectGoods(){
this.$Router.push({name: 'selectGoods', params: {type: this.types[this.typeIndex].id}})
},
// 发布优惠券
updComponent(){
let recommendVlue = this.recommend[this.recommendIndex].type === 1 ? 2 : ''
let valuss = {
title : this.couponsTitle,
cover : this.cover,
@@ -168,24 +205,21 @@
person_quantity : this.personQuantity,
start_at : this.datePickerValue[0],
end_at : this.datePickerValue[1],
channel : this.product[this.productIndex].type,
description : this.description,
position : [1, recommendVlue]
time_type : this.times[this.typeIndex].type,
days : this.timeNumber,
goodsable_ids : this.coupongoods
}
pushCoupons(valuss).then(res => {
uni.showModal({
title : '提示',
content : res.message,
confirmText : res.linkGoods ? '关联商品' : '确定',
confirmColor: '#c82626',
cancelText : '稍后',
cancelColor : '#555555',
showCancel : res.linkGoods,
content : res,
showCancel : false,
confirmText : '确定',
confirmColor: '#e93340',
success : modalRes => {
if(modalRes.confirm && res.linkGoods){
this.$Router.replace({name: 'selectGoods', params:{couponId: res.coupon_id}})
return
}
this.$store.commit('setCoupongoods', [])
this.$Router.back()
}
})
@@ -274,6 +308,11 @@
right: 0;
}
}
.input-number{
display: flex;
align-items: center;
height: 90rpx;
}
.input-checkbox{
min-height: 90rpx;
display: flex;
@@ -292,6 +331,7 @@
}
}
}
.inputs{}
}
}
// 发布预览
@@ -321,6 +361,23 @@
border:solid 1rpx $border-color;
box-sizing: border-box;
}
.cover-price{
padding-top: 24rpx;
font-weight: bold;
line-height: 58rpx;
font-size: $title-size + 10;
color: $text-price;
text{
font-size: 70%;
padding-left: 5rpx;
}
}
.cover-subtitle{
padding-bottom: 24rpx;
line-height: 40rpx;
color: $text-gray;
font-size: $title-size-sm;
}
&::after,&::before{
position: absolute;
width: 30rpx;

63
pages/coupons/magDetails.vue
View File

@@ -2,9 +2,9 @@
<view class="content" v-if="!isLoding">
<view class="details">
<view class="header">
<view class="info">
<image class="info-cover" :src="details.cover" mode="aspectFill"></image>
<view class="info-title">{{details.title}}</view>
<view class="info-item">
<view class="info-item-title">优惠券标题</view>
<view class="info-item-text">{{details.title}}</view>
</view>
<view class="info-item">
<view class="info-item-title">优惠券类型</view>
@@ -12,7 +12,7 @@
</view>
<view class="info-item">
<view class="info-item-title">上架状态</view>
<view class="info-item-text">{{details.status.text}}</view>
<view class="info-item-text">已{{details.status.text}}</view>
</view>
<view class="info-item">
<view class="info-item-title">使用渠道</view>
@@ -34,14 +34,22 @@
<view class="info-item-title">每人限领</view>
<view class="info-item-text">{{details.person_quantity == 0 ? '不限制': details.person_quantity}}</view>
</view>
<view class="info-item">
<view class="info-item-title">券有效期(起)</view>
<view class="info-item-text">{{details.start_at}}</view>
</view>
<view class="info-item">
<view class="info-item-title">券有效期(止)</view>
<view class="info-item-text">{{details.end_at}}</view>
</view>
<block v-if="details.time_type.value === 1">
<view class="info-item">
<view class="info-item-title">券有效期(起)</view>
<view class="info-item-text">{{details.start_at}}</view>
</view>
<view class="info-item">
<view class="info-item-title">券有效期(止)</view>
<view class="info-item-text">{{details.end_at}}</view>
</view>
</block>
<block v-if="details.time_type.value === 2">
<view class="info-item">
<view class="info-item-title">券有效期</view>
<view class="info-item-text">领取后{{details.days}}天内有效</view>
</view>
</block>
<view class="info-item">
<view class="info-item-title">创建时间</view>
<view class="info-item-text">{{details.created_at}}</view>
@@ -49,7 +57,7 @@
</view>
<view class="mian">
<block v-if="details.goods.length > 0">
<view class="mian-title">适用权证</view>
<view class="mian-title">关联商品</view>
<view class="mian-goods">
<view class="item" v-for="(item, index) in details.goods" :key="index">
<view class="item-title nowrap">{{item.name}}</view>
@@ -68,7 +76,7 @@
<view class="footer">
<view class="footer-flex">
<view class="item" @click="putStatus">{{details.status.value == 4 ? '上架': '下架'}}</view>
<view class="item" @click="$Router.push({name: 'selectGoods', params: {couponId: details.coupon_id}})">关联商品</view>
<view class="item" @click="onCouponsRecommend">{{recommended ? '设为推荐': '已设为推荐'}}</view>
</view>
<view class="ios-bottom"></view>
</view>
@@ -76,18 +84,20 @@
</template>
<script>
import { magCouponsInfo, magCouponsStatus } from '@/apis/interfaces/coupons'
import { magCouponsInfo, magCouponsStatus, magCouponsRecommend } from '@/apis/interfaces/coupons'
export default {
data() {
return {
isLoding: true,
details : {}
isLoding : true,
recommended : false,
details : {}
};
},
onShow() {
magCouponsInfo(this.$Route.query.couponId).then(res => {
this.isLoding = false
this.details = res
this.recommended = res.can.recommended
this.details = res
this.isLoding = false
})
},
methods:{
@@ -105,6 +115,21 @@
icon : 'none'
})
})
},
// 设为推荐
onCouponsRecommend(){
magCouponsRecommend(this.details.coupon_id).then(res => {
this.recommended = !this.recommended
uni.showToast({
title: res.message,
icon : 'none'
})
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
}
}

117
pages/coupons/management.vue
View File

@@ -1,24 +1,40 @@
<template>
<view>
<view class="tabs">
<view class="item" :class="{'show': listType == ''}" @click="onTabs('')">全部</view>
<view class="item" :class="{'show': listType == '1'}" @click="onTabs('1')">服务券</view>
<view class="item" :class="{'show': listType == '2'}" @click="onTabs('2')">代金券</view>
<view class="item" :class="{'show': listType == '3'}" @click="onTabs('3')">提货券</view>
<view class="header">
<view class="tabs">
<view class="item" :class="{'show': listType == ''}" @click="onTabs('')">全部</view>
<view class="item" :class="{'show': listType == '1'}" @click="onTabs('1')">服务券</view>
<view class="item" :class="{'show': listType == '2'}" @click="onTabs('2')">代金券</view>
<view class="item" :class="{'show': listType == '3'}" @click="onTabs('3')">提货券</view>
</view>
<view class="tabs-type">
<view class="item" :class="{'show': tabsType == ''}" @click="onTabsType('')">全部</view>
<view class="item" :class="{'show': tabsType == 'shown'}" @click="onTabsType('shown')">已上架</view>
<view class="item" :class="{'show': tabsType == 'unshown'}" @click="onTabsType('unshown')">已下架</view>
<view class="item" :class="{'show': tabsType == 'expire'}" @click="onTabsType('expire')">即将过期</view>
<view class="item" :class="{'show': tabsType == 'over'}" @click="onTabsType('over')">已过期</view>
</view>
</view>
<block v-if="coupons.length > 0">
<view class="coupons">
<view class="coupons-flex" v-for="(item, index) in coupons" :key="index" @click="$Router.push({name: 'magDetails', params: {couponId: item.coupon_id}})">
<view class="item cover">
<image class="cover-img" :src="item.cover" mode="aspectFill" />
<view v-if="item.type.value === 2">
<view class="cover-price">{{item.price || 0}}<text>元</text></view>
<view class="cover-subtitle">代金券</view>
</view>
<image v-else class="cover-img" :src="item.cover" mode="aspectFill" />
</view>
<view class="item mian">
<view class="title nowrap">{{item.title}}</view>
<view class="time nowrap">{{item.start_at}}至{{item.end_at}}</view>
<view class="time nowrap">
<block v-if="item.time_type.value == 1">{{item.start_at}}至{{item.end_at}}</block>
<block v-if="item.time_type.value == 2">领取后{{item.days}}天内有效</block>
</view>
<view class="tags nowrap">
<text>{{item.status.text}}</text>
<text>{{item.type.text}}</text>
<text>{{item.channel.text}}</text>
<text>已{{item.status.text}}</text>
<text>{{item.goods_count}}商品可用</text>
</view>
</view>
<view class="arrowright">
@@ -29,7 +45,6 @@
</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>
</block>
@@ -42,6 +57,7 @@
data() {
return {
listType: '',
tabsType: '',
coupons : [],
pages : {}
};
@@ -56,11 +72,19 @@
this.listType = value
this.getCoupons()
},
// 状态筛选
onTabsType(val){
if(this.tabsType === val) return
this.tabsType = val
this.getCoupons()
},
// 数据列表
getCoupons(){
toolsCoupons({
type: this.listType
type : this.listType,
status : this.tabsType
}).then(res => {
console.log(res)
this.coupons = res.lists.data
this.pages = res.lists.page
}).catch(err => {
@@ -79,24 +103,46 @@
<style lang="scss" scoped>
// tabs
.tabs{
.header{
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;
.tabs{
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;
}
}
}
// 类型
.tabs-type{
display: flex;
padding: 20rpx 30rpx;
background: white;
.item{
font-size: $title-size-sm;
height: 46rpx;
line-height: 46rpx;
border-radius: 23rpx;
padding: 0 ($padding - 10);
background: white;
margin-right: $margin/2;
color: $text-gray;
&.show{
background-color: rgba($color: $text-price, $alpha: .1);
color: $text-price;
}
}
}
}
@@ -104,9 +150,7 @@
.list-null{
width: 100vw;
height: 100vh;
padding-bottom: 20vh;
box-sizing: border-box;
background: white;
text-align: center;
@extend .vertical;
.sub-title{
@@ -119,7 +163,7 @@
}
// 订单管理
.coupons{
padding-top: 90rpx;
padding-top: 180rpx;
@extend .ios-bottom;
.coupons-flex{
position: relative;
@@ -155,6 +199,23 @@
border:solid 1rpx $border-color;
box-sizing: border-box;
}
.cover-price{
padding-top: 24rpx;
font-weight: bold;
line-height: 58rpx;
font-size: $title-size + 10;
color: $text-price;
text{
font-size: 70%;
padding-left: 5rpx;
}
}
.cover-subtitle{
padding-bottom: 24rpx;
line-height: 40rpx;
color: $text-gray;
font-size: $title-size-sm;
}
&::after,&::before{
position: absolute;
width: 30rpx;

31
pages/coupons/selectGoods.vue
View File

@@ -44,8 +44,16 @@
};
},
created() {
couponsGoods(this.$Route.query.couponId).then(res => {
this.goods = res
couponsGoods({
type: this.$Route.query.type
}).then(res => {
let coupongoodsIds = this.$store.getters.getCoupongoods,
goodsArr = res
for(let id of coupongoodsIds){
let selectIndex = goodsArr.findIndex(val => val.goods_sku_id === id)
goodsArr[selectIndex].isSelect = true
}
this.goods = goodsArr
this.selectNumber()
}).catch(err => {
uni.showToast({
@@ -88,23 +96,8 @@
})
return
}
couponsAddgoods(this.$Route.query.couponId, {
goodsable_ids: this.selectGoods
}).then(res => {
uni.showModal({
title : '提示',
content : res,
showCancel : false,
success : modalRes => {
if(modalRes.confirm) this.$Router.back()
}
})
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
this.$store.commit('setCoupongoods', this.selectGoods)
this.$Router.back()
}
}
}

23
pages/employees/add.vue
View File

@@ -4,8 +4,8 @@
<view class="info-card">
<view class="cover">
<view class="cover-add vertical" @click="updCover">
<block v-if="cover != ''">
<image :src="cover" mode="aspectFill"></image>
<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>
@@ -64,7 +64,10 @@
permissions : [],
permissionIds: [],
sectionIndex : 0,
cover : '',
cover : {
showpath : '',
path : ''
},
name : '',
phone : '',
job : ''
@@ -94,7 +97,10 @@
uploads([{
uri : path.tempFilePaths[0]
}]).then(res => {
this.cover = res.url[0]
this.cover = {
showpath: res.url[0],
path : res.path[0]
}
}).catch(err => {
uni.showToast({
title: err.message,
@@ -110,16 +116,17 @@
name : this.name,
mobileNo : this.phone,
job : this.job,
cover : this.cover,
cover : this.cover.path,
position : 1,
order : 0,
store_id : this.section[this.sectionIndex].store_id,
permission : this.permissionIds
}).then(res => {
uni.showModal({
title : '提示',
content : res,
success : () => {
title : '提示',
content : res,
showCancel : false,
success : () => {
this.$Router.back()
}
})

83
pages/employees/list.vue
View File

@@ -1,40 +1,27 @@
<template>
<view class="ios-bottom">
<uni-collapse>
<uni-collapse-item :show-animation="true" :open="true">
<template v-slot:title>
<view class="collapse-title">技术部</view>
</template>
<view class="employees-item" v-for="(item, index) in 10" :key="index">
<view class="cover">
<block v-if="index === 4">唐</block>
<block v-else>
<image class="cover-img" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
</block>
<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>
<view class="employees-item" v-for="(item, index) in listItem.data" :key="index">
<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>
<view class="content">
<view class="nickname nowrap">唐明明</view>
<view class="job nowrap">web前端开发</view>
</view>
</view>
</uni-collapse-item>
<uni-collapse-item :show-animation="true">
<template v-slot:title>
<view class="collapse-title">市场部</view>
</template>
<view class="employees-item" v-for="(item, index) in 5" :key="index">
<view class="cover">
<block v-if="index === 4">唐</block>
<block v-else>
<image class="cover-img" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
</block>
</view>
<view class="content">
<view class="nickname">唐明明</view>
<view class="job">web前端开发</view>
</view>
</view>
</uni-collapse-item>
</uni-collapse-item>
</block>
</uni-collapse>
</view>
</template>
@@ -43,11 +30,13 @@
import { employees } from '@/apis/interfaces/employees'
export default {
data() {
return {};
return {
lists: []
};
},
onShow(){
employees().then(res => {
console.log(res)
this.lists = res
})
},
onNavigationBarButtonTap() {
@@ -60,6 +49,8 @@
.collapse-title{
padding: 0 $padding;
line-height: 90rpx;
font-weight: bold;
font-size: $title-size-lg;
}
.employees-item {
background: white;
@@ -101,13 +92,27 @@
height: 78rpx;
padding-left: 98rpx;
.nickname{
line-height: 48rpx;
line-height: 40rpx;
font-size: $title-size;
text{
font-size: $title-size-sm;
color: $text-gray-m;
padding-left: 10rpx;
}
}
.job{
line-height: 30rpx;
font-size: $title-size-sm;
color: $text-gray-m;
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;
}
}
}
}
}

50
pages/property/index.vue
View File

@@ -124,8 +124,11 @@
<view class="title">
<view class="title-text">全站推广人数排名</view>
</view>
<view>
推广人数排名
<view class="ranking-item">
<view class="ranking-number">1</view>
<image class="ranking-cover" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
<view class="ranking-nickname nowrap">唐明明唐明明唐明明唐明明唐明明唐明明唐明明</view>
<view class="ranking-count">100人</view>
</view>
</view>
<!-- 排名信息 -->
@@ -133,8 +136,11 @@
<view class="title">
<view class="title-text">全站推广企业排名</view>
</view>
<view>
推广企业排名
<view class="ranking-item">
<view class="ranking-number">1</view>
<image class="ranking-cover" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
<view class="ranking-nickname nowrap">唐明明唐明明唐明明唐明明唐明明唐明明唐明明</view>
<view class="ranking-count">100家</view>
</view>
</view>
<!-- 推广海报 -->
@@ -412,4 +418,40 @@
font-size: $title-size-sm;
color: $text-gray-m;
}
// 排行榜
.ranking-item{
position: relative;
padding: ($padding - 10) $padding ($padding - 10) ($padding + 158);
display: flex;
justify-items: center;
align-items: center;
min-height: 88rpx;
.ranking-cover{
position: absolute;
left: $padding + 30;
height: 88rpx;
width: 88rpx;
border-radius: 50%;
margin-left: 20rpx;
}
.ranking-number{
position: absolute;
left: $padding;
width: 30rpx;
font-weight: bold;
text-align: center;
}
.ranking-nickname{
width: calc(100% - 200rpx);
padding-right: 20rpx;
font-size: $title-size-lg;
}
.ranking-count{
width: 200rpx;
text-align: right;
color: $text-gray;
font-size: $title-size-lg;
}
}
</style>