更新订单列表详情,更新商品管理,更新代客下单

This commit is contained in:
2024-09-23 17:39:38 +08:00
parent 90e3866524
commit edcf844adb
36 changed files with 5301 additions and 949 deletions

View File

@@ -12,7 +12,7 @@
<view class="item u-m-b-20" v-for="(item,index) in order.info" :key="index">
<view class="u-flex u-col-top">
<view>
<image class="img" :src="item.coverImg" mode=""></image>
<image class="img" :src="item.coverImg||item.productImg" mode=""></image>
</view>
<view class="u-p-l-30 u-flex-1">
<view class="u-flex u-row-between u-col-top">
@@ -21,20 +21,27 @@
<view class="tui" v-if="item.status=='return'">
已退
</view>
<view :class="{'line-th':item.status=='return'}">{{item.name}}</view>
<view :class="{'line-th':item.status=='return'}">{{item.name||item.productName}}</view>
</view>
<view class="u-text-right">
<view>{{item.salePrice}}</view>
<view v-if="item.status=='return'" class="line-th color-666 u-font-24">{{item.salePrice}}</view>
<view class="u-m-t-10 u-font-24">X{{item.number}}</view>
<view>{{item.salePrice||item.price}}</view>
<view v-if="item.status=='return'" class="line-th color-666 u-font-24">{{item.salePrice||item.price}}</view>
<view class="u-m-t-10 u-font-24">X{{item.number||item.num}}</view>
</view>
</view>
</view>
</view>
<view class="u-flex u-row-right gap-20 u-m-t-20" v-if="item.status!='return'">
<!-- <my-button :height="60" color="#333" plain type="cancel" shape="circle">更多操作</my-button> -->
<my-button :width="168" :height="60" plain shape="circle" @tap="tuicai(item,index)">退菜</my-button>
</view>
<template v-if="orderInfo.status=='unpaid'">
<view class="u-flex u-row-right gap-20 u-m-t-20" v-if="item.status!='return'">
<!-- <my-button :height="60" color="#333" plain type="cancel" shape="circle">更多操作</my-button> -->
<my-button :width="168" :height="60" plain shape="circle" @tap="tuicai(item,index)">退菜</my-button>
</view>
</template>
<template v-if="orderInfo.status=='closed'">
<view class="u-flex u-row-right gap-20 u-m-t-20" v-if="item.status!='return'">
<my-button :width="168" :height="60" plain shape="circle" @tap="tuikuan(item,index)">退款</my-button>
</view>
</template>
</view>
</view>
<view class="bg-gray u-p-20 u-m-t-20">
@@ -45,9 +52,15 @@
<view class="u-m-t-40">
<view class="u-flex u-row-between border-bottom u-p-b-20">
<view class="tag no-pay">
未支付
<view>
<template v-if="orderInfo.status=='unpaid'">
<view class="tag no-pay">
未支付
</view>
</template>
</view>
<view>
<text>小计</text>
<text class="font-bold u-font-32">{{allPrice}}</text>
@@ -73,11 +86,21 @@
computed
} from 'vue';
import color from '@/commons/color.js'
const emits=defineEmits(['tuicai'])
const emits=defineEmits(['tuicai','tuikuan','printOrder'])
function tuicai(item,index){
emits('tuicai',item,index)
}
function tuikuan(item,index){
emits('tuikuan',item,index)
}
function printOrder(){
emits('printOrder')
}
const props = defineProps({
orderInfo:{
type: Object,
default: () => {}
},
data: {
type: Array,
default: () => []
@@ -90,7 +113,7 @@
const allPrice = computed(() => {
return props.data.reduce((prve, cur) => {
const curTotal=cur.info.filter(v=>v.isGift !== "true"&& v.status !== "return").reduce((a,b)=>{
return a+b.salePrice * b.number
return a+(b.salePrice||b.price) * (b.number||b.num)
},0)
return prve + curTotal
}, 0).toFixed(2)
@@ -100,15 +123,13 @@
let result = 0
result = props.data.reduce((a, b) => {
const bTotal = b.info.reduce((prve, cur) => {
return prve + cur.number * 1;
return prve + (cur.number||cur.num) * 1;
}, 0);
return a + bTotal
}, 0)
return result
})
function printOrder(){
}
</script>
<style lang="scss" scoped>

View File

@@ -10,15 +10,15 @@
</view>
<view class="u-flex u-row-between u-m-t-20">
<view>桌位号</view>
<view>{{table.name}}</view>
<view>{{table.name||data.tableName}}</view>
</view>
<view class="u-flex u-row-between u-m-t-20">
<view>就餐人数</view>
<view>{{seatFee.totalNumber}}</view>
<view>{{seatFee.number||''}}</view>
</view>
<view class="u-flex u-row-between u-m-t-20">
<view>支付方式</view>
<view></view>
<view>{{data.payType||''}}</view>
</view>
<view class="u-flex u-row-between u-m-t-20">
<view>预约时间</view>

View File

@@ -1,11 +1,12 @@
<template>
<view class="default-box-padding bg-fff border-r-12 u-m-t-20">
<up-steps :dot="true" current="0" direction="column">
<my-step :list="recoders.list"></my-step>
<!-- <up-steps :dot="true" current="0" direction="column">
<up-steps-item title="2024-09-02 09:19" :itemStyle="itemStyle" desc="[东风(id:124413)]使用代客下单提交。(未打印预结单)">
</up-steps-item>
<up-steps-item title="2024-09-02 09:19" desc="[东风(id:124413)]使用代客下单提交。(未打印预结单)">
</up-steps-item>
</up-steps>
</up-steps> -->
</view>
@@ -19,7 +20,14 @@
const itemStyle = reactive({
color: 'rgb(255,0,0)'
})
const recoders = reactive({
list:[
{title:'2024-09-15 112030',content:'[东风(id:124413)]使用代客下单提交。(未打印预结单)'},
{title:'2024-09-15 ',content:'[东风(id:124413)]使用代客下单提交。(未打印预结单)'},
{title:'2024-09-15 ',content:'[东风(id:124413)]使用代客下单提交。(未打印预结单)'}
],
active:0
})
</script>
<style>

View File

@@ -1,6 +1,8 @@
<template>
<view class="u-font-28 default-box-padding u-relative bg-fff border-r-12 u-overflow-hide">
<view class="change u-absolute my-bg-main color-fff left-top" >切换</view>
<template v-if="orderInfo.status=='unpaid'">
<view class="change u-absolute my-bg-main color-fff left-top" @click="chooseUser">切换</view>
</template>
<view class="u-flex u-row-between u-m-t-20 border-bottom u-p-b-20">
<view class="u-flex">
<up-avatar :size="30"></up-avatar>
@@ -27,14 +29,28 @@
</view>
</template>
<script>
<script setup>
import go from '@/commons/utils/go.js'
const props = defineProps({
orderInfo: {
type: Object,
default: () => {}
},
user: {
type: Object,
default: () => {}
}
})
function chooseUser() {
go.to('PAGES_CHOOSE_USER')
}
</script>
<style lang="scss" scoped>
.change{
padding: 4rpx 16rpx;
border-radius: 0 0 16rpx 0;
z-index: 2;
}
.change {
padding: 4rpx 16rpx;
border-radius: 0 0 16rpx 0;
z-index: 2;
}
</style>

View File

@@ -1,11 +1,11 @@
<template>
<view class="min-page bg-gray u-font-28 u-p-30">
<user-vue></user-vue>
<user-vue :orderInfo="orderDetail.info"></user-vue>
<view class="default-box-padding bg-fff border-r-12 u-m-t-20">
<text class="color-666">桌位号</text>
<text class="font-bold">{{options.name}}</text>
<text class="font-bold">{{orderDetail.info.tableName}}</text>
</view>
<goods-list :data="orderDetail.goodsList" :seatFee="orderDetail.seatFee.totalAmount"
<goods-list @printOrder="onPrintOrder" @tuikuan="onTuikuan" :orderInfo="orderDetail.info" :data="orderDetail.goodsList" :seatFee="orderDetail.seatFee.totalAmount"
@tuicai="onTuiCai"></goods-list>
<extra-vue :data="orderDetail.seatFee"></extra-vue>
<order-vue :data="orderDetail.info" :table="options" :seatFee="orderDetail.seatFee"></order-vue>
@@ -23,7 +23,7 @@
type="primary">结账</my-button>
</view>
</template>
</view>
</view>
@@ -34,6 +34,9 @@
<script setup>
import * as Api from '@/http/yskApi/Instead.js'
import * as orderApi from '@/http/yskApi/order.js'
import {
objToArrary
} from '@/commons/utils/returrn-data.js'
import userVue from './components/user.vue';
import orderVue from './components/order.vue';
import goodsList from './components/list.vue';
@@ -41,13 +44,14 @@
import extraVue from './components/extra.vue';
import tuicaiVue from './components/tuicai.vue';
import go from '@/commons/utils/go.js'
import infoBox from '@/commons/utils/infoBox.js'
import {
onLoad,
onShow,
onHide
} from '@dcloudio/uni-app';
import {
reactive
reactive, ref
} from 'vue';
import OrderDetail from './page.js'
const tuicai = reactive({
@@ -59,13 +63,42 @@
tuicai.show = true
tuicai.selGoods = goods
}
async function printDishes(){
try{
const res= await Api.$printDishes({
tableId:orderDetail.info.tableId
})
infoBox.showToast('已发送打印请求')
}catch(e){
infoBox.showToast('发送打印请求失败')
//TODO handle the exception
}
}
function onPrintOrder(){
uni.showModal({
title:'提示',
content:'是否打印当前台桌菜品',
success(res) {
if(res.confirm){
printDishes()
}
}
})
}
function onTuikuan(goods, index){
go.to('PAGES_ORDER_TUIKUAN',{
})
}
async function tuicaiConfirm() {
const res=await Api.$returnCart({
cartId: tuicai.selGoods.id,
tableId:options.tableId,
const res = await Api.$returnCart({
cartId: tuicai.selGoods.cartId,
tableId: orderDetail.info.tableId,
})
tuicai.selGoods.status='return'
tuicai.selGoods.status = 'return'
tuicai.show = false
}
const uiPage = new OrderDetail()
@@ -84,7 +117,7 @@
}
function toPay() {
go.to('PAGES_CRESATE_ORDER_PAY', {
go.to('PAGES_ORDER_PAY', {
tableId: options.tableId,
tableName: options.name,
masterId: options.masterId,
@@ -102,22 +135,48 @@
})
const options = reactive({})
async function init() {
const res= await orderApi.tbOrderInfoDetail(options.id)
const masterId=res.masterId
const res = await orderApi.tbOrderInfoDetail(options.id)
const masterId = res.masterId
options.masterId = res.masterId
if(res.status=='unpaid'){
if (res.status == 'unpaid') {
// if (false) {
const {
records,
seatFee
} = await Api.getCart({
masterId,
tableId:res.tableId
tableId: res.tableId,
page: 1,
size: 200
})
orderDetail.goodsList = records
orderDetail.seatFee = seatFee
}else{
orderDetail.goodsList = res.detailList
orderDetail.seatFee = seatFee ? seatFee : orderDetail.seatFee
} else {
const goodsMap = {}
for (let i in res.detailList) {
const goods = res.detailList[i]
if (goods.productName != '客座费') {
if (goodsMap.hasOwnProperty(goods.placeNum)) {
goodsMap[goods.placeNum].push(goods)
} else {
goodsMap[goods.placeNum] = [goods]
}
}
}
orderDetail.seatFee = {
name: '餐位费',
number: res.seatCount,
totalNumber: res.seatCount,
totalAmount: res.seatAmount
}
orderDetail.goodsList = Object.entries(goodsMap).map(([key, value]) => ({
info: value,
placeNum: key
}))
console.log(orderDetail.goodsList);
}
console.log(orderDetail);
orderDetail.info = res
}
@@ -128,8 +187,32 @@
init()
})
}
// 监听选择用户事件
let user = ref(null)
//更新选择用户
function setUser(par) {
const submitPar = {
masterId: option.masterId,
tableId: option.tableId,
vipUserId: user.value.id ? user.value.id : '',
type: user.value.id ? 0 : 1 //0 设置 1 取消
}
Object.assign(submitPar, par)
return Api.$setUser(submitPar)
}
function watchChooseuser() {
uni.$off('choose-user')
uni.$on('choose-user', (data) => {
console.log(data);
user.value = data
setUser()
})
}
onShow(() => {
watchEmit()
watchChooseuser()
})
onLoad((opt) => {
Object.assign(options, opt)

View File

@@ -22,7 +22,7 @@
<view class="u-m-l-16">{{formatTime(data.createdAt)}}</view>
</view>
<view class="u-m-t-32">
<view class="u-font-32">1种商品共1</view>
<view class="u-font-32">{{goosZhonglei}}种商品{{goodsNumber}}</view>
<view class="border-bottom u-p-b-32">
<view class="u-flex u-row-between u-m-t-24" v-for="(item,index) in data.detailList" :key="index">
<view>
@@ -32,12 +32,12 @@
</view>
</view>
<view class="u-flex">
<view>×1</view>
<view class="u-m-l-24">15.00</view>
<view>×{{item.num}}</view>
<view class="u-m-l-24">{{item.price}}</view>
</view>
</view>
</view>
</view>
<view class="u-flex u-row-between border-bottom u-m-t-32 u-p-b-32">
<view>订单备注</view>
@@ -49,7 +49,7 @@
<text class="font-bold u-font-32">{{data.orderAmount}}</text>
</view>
<view class="u-flex u-row-right u-m-t-24">
<view class="print">重新打印</view>
<view class="print" @click.stop="print(item)">重新打印</view>
</view>
</view>
</view>
@@ -60,19 +60,51 @@
import dayjs from 'dayjs';
import orderEnum from '@/commons/orderEnum.js'
import go from '@/commons/utils/go.js'
import {
computed,
reactive,
ref,
watch
} from 'vue';
const emits=defineEmits(['printOrder'])
const props = defineProps({
data: {
type: Object,
default: () => {}
default: () => {
detailList: []
}
},
index: {
type: [String, Number],
default: 0
}
})
function formatTime(time){
let $goodsMap = {}
let goosZhonglei =ref(0)
let goodsNumber = ref(0)
function goodsMapInit(){
for (let i in props.data.detailList) {
const goods = props.data.detailList[i]
if ($goodsMap.hasOwnProperty(goods.productId)) {
$goodsMap[goods.productId] += goods.num*1
goodsNumber.value+=goods.num*1
} else {
$goodsMap[goods.productId] = goods.num*1
goosZhonglei.value+=1
goodsNumber.value+=goods.num*1
}
}
}
goodsMapInit()
watch(() => props.data.detailList, (newval) => {
goodsMapInit()
})
function formatTime(time) {
return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
}
function returnStatus(status) {
const item = orderEnum.status.find(v => v.key == status)
return item ? item.label : ''
@@ -85,11 +117,15 @@
return t;
}
}
function toDetail(){
go.to('PAGES_ORDER_DETAIL',{
id:props.data.id
function toDetail() {
go.to('PAGES_ORDER_DETAIL', {
id: props.data.id
})
}
function print(item) {
emits('printOrder',props.data)
}
</script>
<style lang="scss" scoped>
@@ -110,10 +146,11 @@
.unpaid {
color: #FD7B49;
}
.print{
.print {
padding: 6rpx 14rpx 8rpx 18rpx;
border:1px solid $my-main-color;
color:$my-main-color;
border: 1px solid $my-main-color;
color: $my-main-color;
font-size: 24rpx;
border-radius: 100rpx;
}

View File

@@ -1,7 +1,7 @@
<template>
<view class="list">
<view v-for="(item,index) in list" :key="index">
<order-item :data="item" :index="index"></order-item>
<order-item @printOrder="print" :data="item" :index="index"></order-item>
</view>
<view v-if="hasAjax&&!list.length">
<my-img-empty tips="亲,你还没有订单哦~"></my-img-empty>
@@ -21,7 +21,10 @@
default:false
}
})
const emits=defineEmits(['printOrder'])
function print(item) {
emits('printOrder',item)
}
</script>
<style lang="scss" scoped>

View File

@@ -6,14 +6,18 @@
</view>
<filter-vue v-model:time="pageData.order.query.createdAt"></filter-vue>
</view>
<order-list :hasAjax="pageData.order.hasAjax" :list="pageData.order.list"></order-list>
<order-list @printOrder="onPrintOrder" :hasAjax="pageData.order.hasAjax" :list="pageData.order.list"></order-list>
<my-pagination :totalElements="pageData.order.totalElements"></my-pagination>
<view style="height: 100rpx;"></view>
</view>
</template>
<script setup>
import * as Api from '@/http/yskApi/order.js'
import {$printOrder} from '@/http/yskApi/Instead.js'
import filterVue from './compoents/filter.vue';
import orderList from './compoents/order-list.vue';
import infoBox from '@/commons/utils/infoBox.js'
import {
reactive, watch
} from 'vue';
@@ -28,10 +32,11 @@
textAlign: 'right'
}
})
const pageData = reactive({
order: {
list: [],
totalElements:0,
hasAjax:false,
query: {
createdAt: [],
@@ -50,12 +55,40 @@
init()
})
async function init() {
const {content}=await Api.tbOrderInfoData(pageData.order.query)
const {content,totalElements}=await Api.tbOrderInfoData(pageData.order.query)
pageData.order.hasAjax=true
pageData.order.totalElements=totalElements
pageData.order.list=content
console.log(content);
}
init()
async function printOrder(item){
try{
console.log(item);
const res= await $printOrder({
tableId:item.tableId
})
infoBox.showToast('已发送打印请求')
}catch(e){
console.log(e);
infoBox.showToast('发送打印请求失败')
//TODO handle the exception
}
}
function onPrintOrder(e){
console.log(e);
uni.showModal({
title: '提示',
content: '是否打印该订单',
success(res) {
if (res.confirm) {
printOrder(e)
}
}
})
}
</script>
<style>

View File

@@ -0,0 +1,320 @@
<template>
<view class="bg-gray min-page u-p-30 u-font-28">
<view class="u-p-t-60 u-p-b-60 u-text-center">
<view class="u-font-32 ">
<text class="price-fuhao"></text>
<text class="font-bold price">{{discount.currentPrice?discount.currentPrice:order.amount}}</text>
</view>
<view class="u-m-t-10 color-999 old-price">
<text class=""></text>
<text class=" ">{{order.amount}}</text>
</view>
<view class="u-m-t-10 u-flex u-row-center color-main">
<view @click="showModel('editMoney',true)">修改</view>
</view>
</view>
<view class="content bg-fff box-shadow border-r-12">
<view class=" u-p-t-30 u-p-l-26 u-p-r-26 card top u-m-t-30">
<view class="u-flex u-p-l-24 u-p-r-24 border-bottom-dashed u-row-between u-p-b-30">
<view>优惠券</view>
<view class="color-999 u-flex u-col-center">
<text>选择优惠券</text>
<view class="u-flex u-col-center">
<uni-icons type="right" color="#999"></uni-icons>
</view>
</view>
</view>
<view class="u-flex u-p-l-24 u-p-r-24 border-bottom u-row-between u-p-t-30 u-p-b-30"
v-if="discount.price&&discount.currentPrice!=order.amount">
<view>服务员改价</view>
<view class=" u-flex u-col-center">
<text style="color: rgb(255, 95, 46);">-{{order.amount- discount.currentPrice}}</text>
</view>
</view>
</view>
<view class="bg-fff border-r-12 ">
<view class="u-p-t-30 u-p-l-50 u-p-r-50 card bottom">
<my-tabs :list="pays.list" v-model="pays.selIndex"></my-tabs>
<template v-if="pays.selIndex==0">
<view class="list">
<view class="item" @click="changePayType(index)" v-for="(item,index) in pays.payTypes.list"
:key="index">
<view class="u-flex u-row-between u-p-t-30 u-p-b-30 border-bottom">
<view class="u-flex">
<image class="icon" :src="item.icon" mode=""></image>
<text class="u-m-l-10">{{item.payName}}</text>
</view>
<view class="u-flex color-999 u-font-24">
<!-- <view class="u-m-r-20">
<text>余额</text>
<text>0.00</text>
</view> -->
<my-radio @click="changePayType(index)" :modelValue="index==pays.payTypes.selIndex">
</my-radio>
</view>
</view>
</view>
</view>
<view class="u-m-t-60 u-p-b-30">
<my-button @click="payOrder">确认付款</my-button>
</view>
</template>
<template v-else>
<view class="">
<view class="u-font-32 u-m-t-40 u-text-center">请让顾客使用微信扫码</view>
<view class="u-flex u-row-center u-m-t-40 ">
<up-qrcode :size="140" val="uview-plus"></up-qrcode>
</view>
</view>
</template>
</view>
<!-- 二维码支付扫码 -->
<template v-if="pays.selIndex==1">
<view class="card border-bottom top u-m-t-32">
</view>
<view class="bg-fff card bottom border-r-12 u-p-32">
<view class="font-bold u-font-32 u-text-center">
{{discount.currentPrice?discount.currentPrice: order.amount}}</view>
<view class="u-flex u-row-center u-m-t-24">
<up-loading-icon size="14" text="等待支付"></up-loading-icon>
<view class="u-flex pay-success">
<up-icon color="#5CBB6F" name="checkmark-circle-fill"></up-icon>
<view class="u-m-l-6">支付成功</view>
</view>
</view>
</view>
</template>
</view>
</view>
<edit-discount @confirm="editDiscountConfirm" title="优惠金额" :ref="setModel" name="editMoney"
:price="order.amount"></edit-discount>
</view>
</template>
<script setup>
import {
reactive,
onMounted,
watch,
ref
} from 'vue';
import {
onLoad
} from '@dcloudio/uni-app'
import * as Api from '@/http/yskApi/Instead.js'
import * as orderApi from '@/http/yskApi/order.js'
import infoBox from '@/commons/utils/infoBox.js'
import editDiscount from '@/pagesCreateOrder/components/edit-discount.vue'
let payStatus = ref(null) //loading success
const pays = reactive({
list: ['扫码收款', '二维码收款'],
selIndex: 0,
payTypes: {
list: [],
selIndex: 0
}
})
const models = new Map();
function setModel(el) {
if (el && el.$attrs['name']) {
models.set(el.$attrs['name'], el);
}
}
function showModel(key) {
const model = models.get(key)
model && model.open()
}
//打折相关数据
const discount = reactive({
})
function editDiscountConfirm(form) {
console.log(form);
Object.assign(discount, form)
}
async function getPayType() {
const payTypeList = await Api.$getPayType()
pays.payTypes.list = payTypeList
}
function changePayType(i) {
pays.payTypes.selIndex = i
}
//支付成功回调
function paySuccess() {
infoBox.showToast('支付成功')
setTimeout(() => {
// uni.$emit('orderDetail:update')
uni.navigateBack({
delta: 2
})
}, 500)
}
async function payOrder() {
const payType = pays.payTypes.list[pays.payTypes.selIndex].payType
await Api.$payOrder({
tableId: order.tableId,
masterId: order.masterId,
orderId: order.id || order.orderId,
payType,
vipUserId: order.userId,
discount: 1,
code: ''
})
paySuccess()
}
onMounted(() => {
getPayType()
})
const order = reactive({
amount: 0
})
function saomaPay() {
const item = pays.payTypes.list[pays.payTypes.selIndex]
uni.scanCode({
onlyFromCamera: true,
success: function(res) {
console.log('条码类型:' + res.scanType);
console.log('条码内容:' + res.result);
Api.$payOrder({
"orderId": order.orderId, // 订单id
"payType": item.payType, //
"discount": order.discount,
"code": res.result
}).then(res => {
console.log(res);
paySuccess()
})
}
});
}
watch(() => pays.payTypes.selIndex, (newval) => {
const item = pays.payTypes.list[newval]
if (item.payType == "vipPay") {
return
}
if (item.payType == "deposit") {
//储值卡支付
return saomaPay('deposit')
}
if (item.payType == "scanCode") {
//扫码支付
return saomaPay('scanCode')
}
})
async function init() {
const res = await orderApi.tbOrderInfoDetail(order.orderId)
Object.assign(order, res)
}
onLoad((opt) => {
Object.assign(order, opt)
init()
})
</script>
<style lang="scss" scoped>
.box-shadow {
box-shadow: 0 0 5px #E5E5E5;
}
.pay-success {
color: #5CBB6F;
}
.icon {
width: 40rpx;
height: 40rpx;
}
.border-bottom-dashed {
border-bottom: 1px dashed #bbb;
}
.border-bottom {
border-color: rgb(240, 240, 240);
}
.list {
.item:last-child {
.border-bottom {
border-bottom: none;
}
}
}
.old-price {
text-decoration: line-through;
}
.price-fuhao {
font-size: 24px;
}
.price {
font-size: 32px;
}
$dotSize: 20rpx;
$position: calc($dotSize / (-2));
.card {
position: relative;
&::after,
&:before {
content: '';
display: block;
position: absolute;
background-color: #F9F9F9;
width: $dotSize;
height: $dotSize;
border-radius: 50%;
}
&.top {
&::after {
right: $position;
bottom: $position;
}
&:before {
left: $position;
bottom: $position;
}
}
&.bottom {
&::after {
right: $position;
top: $position;
}
&:before {
left: $position;
top: $position;
}
}
}
</style>

View File

@@ -0,0 +1,22 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>