872 lines
19 KiB
Vue
872 lines
19 KiB
Vue
<template>
|
||
<base-page>
|
||
<view class="uni-flex uni-row page-height">
|
||
<view class="common-wrap left-wrap" style="flex: 1;">
|
||
<view class="header-box">
|
||
<view class="order-time">
|
||
<view class="title">消费时间</view>
|
||
<uni-datetime-picker v-model="orderData.create_time" type="datetime" :clearIcon="false" />
|
||
</view>
|
||
<view class="header" v-if="memberInfo" :style="'background-image:url(' + $util.img('public/uniapp/cashier/member-bg.png') + ');background-repeat: no-repeat;'">
|
||
<view class="headimg" @click="showMember">
|
||
<image class="header-image" :src="memberInfo.headimg ? $util.img(memberInfo.headimg) : $util.img('public/uniapp/default_img/head.png')"></image>
|
||
</view>
|
||
|
||
<view class="head-info" @click="showMember">
|
||
<view class="head-info-top">
|
||
<view class="name">
|
||
<view class="text">{{ memberInfo.nickname }}</view>
|
||
<view class="level" v-if="memberInfo.member_level">{{ memberInfo.member_level_name }}</view>
|
||
</view>
|
||
<view class="mobile">{{ memberInfo.mobile }}</view>
|
||
</view>
|
||
<view class="head-info-bottom">
|
||
<view class="">积分：{{ memberInfo.point }}</view>
|
||
<view class="">消费券：{{ (parseFloat(memberInfo.balance_money) + parseFloat(memberInfo.balance)) | moneyFormat }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<button class="switch primary-btn" @click="$refs.selectMember.open()">更换会员</button>
|
||
<button class="switch primary-btn" @click="replaceMember()">散客</button>
|
||
</view>
|
||
<view class="header" v-else :style="'background-image:url(' + $util.img('public/uniapp/cashier/member-bg.png') + ');background-repeat: no-repeat;'">
|
||
<view class="headimg"><image class="header-image" :src="$util.img('public/uniapp/default_img/head.png')"></image></view>
|
||
<view class="head-info"><view class="name">散客</view></view>
|
||
<button class="switch primary-btn" @click="$refs.selectMember.open()">查询会员</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<view class="title">
|
||
<view>
|
||
结算清单（
|
||
<text>{{ orderData.goods_num }}</text>
|
||
）
|
||
</view>
|
||
<view class="clear" @click="clearGoods">
|
||
<text class="iconfont iconqingchushujuku"></text>
|
||
<text>清空</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="contnet-list common-scrollbar">
|
||
<block v-if="orderData.goods_list.length && Object.keys(goodsData).length">
|
||
<view class="contnet-item" v-for="(item, index) in orderData.goods_list" :key="index">
|
||
<view class="item-img"><image :src="$util.img(item.goods_image.split(',')[0], { size: 'small' })" mode="widthFix"></image></view>
|
||
<view class="item-info">
|
||
<view class="item-name">{{ item.sku_name }}</view>
|
||
<view class="item-del" @click="deleteGoods(item)">删除</view>
|
||
<view class="item-spe" arrow-down>{{ item.spec_name }}</view>
|
||
<view class="item-price">￥{{ item.price | moneyFormat }}</view>
|
||
</view>
|
||
<view class="item-num">
|
||
<view class="num-dec" @click="dec(item)">-</view>
|
||
<view class="num">{{ goodsData['sku_' + item.sku_id].num }}</view>
|
||
<view class="num-inc" @click="inc(item)">+</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="empty">
|
||
<image :src="$util.img('public/uniapp/cashier/cart_empty.png')" mode="widthFix"></image>
|
||
<view class="tips">点击右侧商品，选择商品进行结账</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom">
|
||
<view class="bottom-info">
|
||
<view class="bottom-left">
|
||
共
|
||
<text>{{ orderData.goods_num }}</text>
|
||
件
|
||
</view>
|
||
</view>
|
||
<view class="bottom-btn">
|
||
<button class="default-btn btn-left" :disabled="orderData.goods_num == 0" @click="pay('cash')">现金收款</button>
|
||
<button class="primary-btn btn-right" :disabled="orderData.goods_num == 0" @click="pay('')">收款￥{{ orderData.pay_money | moneyFormat }}</button>
|
||
</view>
|
||
</view>
|
||
<view class="pay-shade" v-show="type == 'pay'"></view>
|
||
</view>
|
||
<view class="uni-flex uni-row common-wrap" style="flex: 2;">
|
||
<view class="comp-wrap" v-show="type != 'pay'">
|
||
<button class=" comp-btn" :class="type == 'goods' ? 'primary-btn' : 'default-btn'" @click="toGoods">卡项</button>
|
||
<button class=" comp-btn" :class="type == 'member' ? 'primary-btn' : 'default-btn'" @click="showMember">会员</button>
|
||
</view>
|
||
|
||
<view class="list-wrap" style="flex: 1;">
|
||
<view class="content" v-show="type == 'member'">
|
||
<nc-member-detail v-if="memberInfo" ref="memberDetail" :member-id="memberInfo.member_id"></nc-member-detail>
|
||
</view>
|
||
|
||
<!-- 卡 -->
|
||
<view class="content" v-show="type == 'goods'"><nc-card v-if="hackReset" @select="selectGoods" :type="orderData.card_type"></nc-card></view>
|
||
|
||
<view class="content" v-show="type == 'pay'">
|
||
<nc-payment
|
||
v-if="hackReset"
|
||
ref="payment"
|
||
:payMoney="orderData.pay_money"
|
||
@cancel="cancelPayment"
|
||
@success="paySuccess"
|
||
:out-trade-no="outTradeNo"
|
||
></nc-payment>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="remarkPopup" type="center">
|
||
<view class="remark-wrap">
|
||
<view class="header">
|
||
<text class="title">备注</text>
|
||
<text class="iconfont iconguanbi1" @click="$refs.remarkPopup.close()"></text>
|
||
</view>
|
||
<view class="body"><textarea v-model="remark" placeholder="填写备注信息" placeholder-class="placeholder-class" /></view>
|
||
<view class="footer"><button type="default" class="primary-btn" @click="remarkConfirm">确认</button></view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<nc-select-member ref="selectMember"></nc-select-member>
|
||
</base-page>
|
||
</template>
|
||
|
||
<script>
|
||
import ncMemberBuycard from '@/components/nc-member-buycard/nc-member-buycard.vue';
|
||
import ncSelectMember from '@/components/nc-select-member/nc-select-member.vue';
|
||
import ncMemberDetail from '@/components/nc-member-detail/nc-member-detail.vue';
|
||
export default {
|
||
components: {
|
||
ncMemberBuycard,
|
||
ncSelectMember,
|
||
ncMemberDetail
|
||
},
|
||
data() {
|
||
return {
|
||
title: '收银台',
|
||
type: 'goods',
|
||
goodsData: {},
|
||
orderData: {
|
||
pay_money: 0,
|
||
goods_list: [],
|
||
remark: '',
|
||
goods_num: 0,
|
||
card_type: 'oncecard',
|
||
create_time: 0
|
||
},
|
||
remark: '',
|
||
isRepeat: false,
|
||
outTradeNo: '',
|
||
hackReset: true
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
uni.hideTabBar();
|
||
this.orderData.card_type = option.type || 'oncecard';
|
||
if (this.memberInfo) this.type = 'goods';
|
||
},
|
||
onShow() {
|
||
this.orderData.create_time = this.$util.timeFormat(parseInt(new Date().getTime() / 1000));
|
||
},
|
||
methods: {
|
||
init() {
|
||
if (this.siteStore) {
|
||
var pages = getCurrentPages(); // 获取栈实例
|
||
let currentPage = pages[pages.length - 1]['$page']['fullPath']; //当前页面路径(带参数)
|
||
uni.setStorageSync(currentPage, this.siteStore);
|
||
}
|
||
this.hackReset = false;
|
||
this.$nextTick(() => {
|
||
this.hackReset = true;
|
||
});
|
||
|
||
if (this.memberInfo) this.type = 'goods';
|
||
},
|
||
showMember() {
|
||
if (!this.memberInfo) {
|
||
if (this.$refs.selectMember) this.$refs.selectMember.open();
|
||
} else {
|
||
this.type = 'member';
|
||
}
|
||
},
|
||
/**
|
||
* 切换散客
|
||
*/
|
||
replaceMember() {
|
||
if (this.$refs.selectMember) this.$refs.selectMember.memberId = 0;
|
||
this.$store.commit('setMemberInfo', null);
|
||
this.type = 'goods';
|
||
},
|
||
selectGoods(data) {
|
||
if (this.goodsData['sku_' + data.sku_id]) {
|
||
this.goodsData['sku_' + data.sku_id].num += 1;
|
||
} else {
|
||
this.goodsData['sku_' + data.sku_id] = data;
|
||
this.goodsData['sku_' + data.sku_id].num = 1;
|
||
}
|
||
this.calculation();
|
||
},
|
||
calculation() {
|
||
if (!Object.keys(this.goodsData).length) return;
|
||
let sku_array = [];
|
||
Object.keys(this.goodsData).forEach(key => {
|
||
let item = this.goodsData[key];
|
||
sku_array.push({
|
||
sku_id: item.sku_id,
|
||
num: item.num
|
||
});
|
||
});
|
||
let data = {
|
||
sku_array: JSON.stringify(sku_array),
|
||
create_time: this.orderData.create_time
|
||
};
|
||
if (this.memberInfo) data.member_id = this.memberInfo.member_id;
|
||
|
||
this.$api.sendRequest({
|
||
url: '/cashier/storeapi/cashierordercreate/cardcalculate',
|
||
data: data,
|
||
success: res => {
|
||
if (res.code == 0) {
|
||
Object.assign(this.orderData, res.data);
|
||
// uni.setStorageSync('orderData', this.orderData);
|
||
this.$forceUpdate();
|
||
} else {
|
||
this.$util.showToast({
|
||
title: res.message
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
inc(data) {
|
||
if (data.goods_type != '') {
|
||
this.goodsData['sku_' + data.sku_id].num += 1;
|
||
} else {
|
||
if (data.num < data.stock) this.goodsData['sku_' + data.sku_id].num += 1;
|
||
}
|
||
this.calculation();
|
||
},
|
||
dec(data) {
|
||
if (data.num > 1) {
|
||
this.goodsData['sku_' + data.sku_id].num -= 1;
|
||
this.calculation();
|
||
}
|
||
},
|
||
|
||
deleteGoods(data) {
|
||
delete this.goodsData['sku_' + data.sku_id];
|
||
this.calculation();
|
||
|
||
if (!Object.keys(this.goodsData).length) {
|
||
this.orderData.goods_list = [];
|
||
this.orderData.goods_num = 0;
|
||
this.orderData.pay_money = 0;
|
||
}
|
||
uni.setStorageSync('orderData', this.orderData);
|
||
},
|
||
clearGoods() {
|
||
this.goodsData = [];
|
||
this.orderData.goods_list = [];
|
||
this.orderData.goods_num = 0;
|
||
this.orderData.pay_money = 0;
|
||
this.goodsIds = [];
|
||
},
|
||
|
||
pay(type = '') {
|
||
if (!this.memberInfo) {
|
||
if (this.$refs.selectMember) this.$refs.selectMember.open();
|
||
return false;
|
||
}
|
||
if (!Object.keys(this.goodsData).length || this.isRepeat) return;
|
||
this.isRepeat = true;
|
||
|
||
if (this.outTradeNo) {
|
||
this.type = 'pay';
|
||
if (type) this.$refs.payment.type = type;
|
||
return;
|
||
}
|
||
|
||
let sku_array = [];
|
||
Object.keys(this.goodsData).forEach(key => {
|
||
let item = this.goodsData[key];
|
||
sku_array.push({
|
||
sku_id: item.sku_id,
|
||
num: item.num
|
||
});
|
||
});
|
||
let data = {
|
||
sku_array: JSON.stringify(sku_array),
|
||
remark: this.orderData.remark,
|
||
create_time: this.orderData.create_time
|
||
};
|
||
if (this.memberInfo) data.member_id = this.memberInfo.member_id;
|
||
|
||
this.$api.sendRequest({
|
||
url: '/cashier/storeapi/cashierordercreate/cardcreate',
|
||
data: data,
|
||
success: res => {
|
||
this.isRepeat = false;
|
||
if (res.code == 0) {
|
||
this.outTradeNo = res.data.out_trade_no;
|
||
this.orderId = res.data.order_id;
|
||
this.type = 'pay';
|
||
if (type) this.$refs.payment.type = type;
|
||
} else {
|
||
this.$util.showToast({
|
||
title: res.message
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
cancelPayment() {
|
||
this.$api.sendRequest({
|
||
url: '/cashier/storeapi/cashierorder/deleteorder',
|
||
data: {
|
||
order_id: this.orderId
|
||
},
|
||
success: res => {
|
||
if (res.code == 0) {
|
||
this.outTradeNo = '';
|
||
this.orderId = 0;
|
||
this.type = 'goods';
|
||
} else {
|
||
this.$util.showToast({
|
||
title: res.message
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
paySuccess() {
|
||
this.type = 'goods';
|
||
this.wholeOrderCancel();
|
||
},
|
||
|
||
/**
|
||
* 整单取消
|
||
*/
|
||
wholeOrderCancel() {
|
||
if (Object.keys(this.goodsData).length) {
|
||
// 清除商品数据
|
||
this.goodsData = {};
|
||
this.calculation();
|
||
if (this.orderData.order_id) {
|
||
this.$refs.order.deleteOrder(this.orderData);
|
||
this.orderData.order_id = 0;
|
||
}
|
||
// 清除订单数据
|
||
this.orderData = {
|
||
goods_num: 0,
|
||
pay_money: 0,
|
||
goods_list: [],
|
||
remark: ''
|
||
};
|
||
this.outTradeNo = '';
|
||
this.orderId = 0;
|
||
} else {
|
||
this.$util.showToast({
|
||
title: '当前没有订单'
|
||
});
|
||
}
|
||
},
|
||
toGoods() {
|
||
this.type = 'goods';
|
||
},
|
||
remarkConfirm() {
|
||
this.orderData.remark = this.remark;
|
||
this.$refs.remarkPopup.close();
|
||
},
|
||
remarkSeting() {
|
||
this.remark = this.orderData.remark;
|
||
this.$refs.remarkPopup.open();
|
||
}
|
||
},
|
||
watch: {
|
||
memberInfo: function(nVal) {
|
||
this.calculation();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.header-box >>> .uni-select-lay-select {
|
||
padding-right: 0.1rem !important;
|
||
}
|
||
|
||
.header-box >>> .uni-select-lay-icon {
|
||
display: none !important;
|
||
}
|
||
|
||
.header-box >>> .uni-select-lay-input-close {
|
||
display: none !important;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.left-wrap {
|
||
position: relative;
|
||
max-width: 3.9rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.pay-shade {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba($color: #fff, $alpha: 0.6);
|
||
z-index: 10;
|
||
}
|
||
|
||
.header-box {
|
||
padding: 0.15rem;
|
||
border-bottom: 0.01rem solid #e6e6e6;
|
||
|
||
.order-time {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.title {
|
||
user-select: none;
|
||
position: relative;
|
||
z-index: 3;
|
||
height: 0.3rem;
|
||
padding: 0 0.1rem 0 0.1rem;
|
||
box-sizing: border-box;
|
||
border-radius: 0.02rem;
|
||
border: 0.01rem solid #e5e5e5;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 0.14rem;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.uni-date {
|
||
flex: 1;
|
||
margin-left: 0.1rem;
|
||
}
|
||
|
||
/deep/ .uni-date-x {
|
||
height: 0.28rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.header {
|
||
margin-top: 0.15rem;
|
||
height: 0.8rem;
|
||
font-size: 0.2rem;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 0.15rem;
|
||
background-size: 100% 100%;
|
||
border-radius: 0.03rem;
|
||
|
||
.header-image {
|
||
width: 0.5rem;
|
||
height: 0.5rem;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.head-info {
|
||
flex: 1;
|
||
margin-left: 0.1rem;
|
||
|
||
.name {
|
||
font-size: 0.16rem;
|
||
color: #fff;
|
||
display: flex;
|
||
|
||
.level {
|
||
background: #ffffff;
|
||
border: 0.01rem solid $primary-color;
|
||
border-radius: 0.02rem;
|
||
font-size: 0.12rem;
|
||
color: $primary-color;
|
||
margin-left: 0.05rem;
|
||
padding: 0.01rem 0.04rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.text {
|
||
max-width: 0.8rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.mobile {
|
||
font-size: 0.14rem;
|
||
color: #fff;
|
||
margin-top: 0.04rem;
|
||
}
|
||
|
||
.head-info-bottom {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
margin-top: 0.05rem;
|
||
|
||
view {
|
||
color: #fff;
|
||
font-size: $uni-font-size-sm;
|
||
}
|
||
}
|
||
}
|
||
|
||
.switch {
|
||
text-align: center;
|
||
line-height: 0.3rem;
|
||
margin-left: 0.08rem;
|
||
padding: 0 0.05rem;
|
||
overflow: hidden;
|
||
font-size: $uni-font-size-sm;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding: 0.15rem;
|
||
color: #303133;
|
||
flex: 1;
|
||
height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.title {
|
||
font-size: 0.14rem;
|
||
justify-content: space-between;
|
||
display: flex;
|
||
}
|
||
.clear {
|
||
display: flex;
|
||
align-items: center;
|
||
text {
|
||
&:nth-child(1) {
|
||
font-size: 0.18rem;
|
||
}
|
||
&:nth-child(2) {
|
||
margin-left: 0.03rem;
|
||
font-size: 0.14rem;
|
||
}
|
||
}
|
||
}
|
||
.contnet-list {
|
||
margin-top: 0.1rem;
|
||
flex: 1;
|
||
height: 0;
|
||
overflow-y: scroll;
|
||
|
||
.contnet-item {
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 0.01rem solid #e6e6e6;
|
||
padding: 0.1rem 0;
|
||
|
||
.item-img {
|
||
width: 0.5rem;
|
||
height: 0.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.item-info {
|
||
flex: 1;
|
||
margin-left: 0.1rem;
|
||
width: 0;
|
||
min-width: 0;
|
||
|
||
.item-name {
|
||
font-size: 0.14rem;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
width: 2rem;
|
||
}
|
||
|
||
.del {
|
||
margin-right: -0.8rem;
|
||
margin-top: -0.19rem;
|
||
color: #8558fa;
|
||
font-size: 0.14rem;
|
||
float: right;
|
||
}
|
||
|
||
.item-spe {
|
||
font-size: 0.1rem;
|
||
color: #999;
|
||
margin-top: 0.05rem;
|
||
}
|
||
|
||
.item-price {
|
||
font-size: 0.14rem;
|
||
margin-top: 0.05rem;
|
||
margin-left: -0.03rem;
|
||
}
|
||
}
|
||
|
||
.item-num {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 0.1rem;
|
||
margin-top: 0.3rem;
|
||
|
||
.num-dec {
|
||
width: 0.25rem;
|
||
height: 0.25rem;
|
||
background: #e6e6e6;
|
||
border: 0.01rem solid #e6e6e6;
|
||
border-radius: 30%;
|
||
text-align: center;
|
||
line-height: 0.23rem;
|
||
font-size: 0.25rem;
|
||
margin-right: 0.1rem;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.num-inc {
|
||
width: 0.25rem;
|
||
height: 0.25rem;
|
||
background: $primary-color;
|
||
border: 0.01rem solid #e6e6e6;
|
||
border-radius: 30%;
|
||
text-align: center;
|
||
line-height: 0.23rem;
|
||
font-size: 0.25rem;
|
||
margin-left: 0.1rem;
|
||
cursor: pointer;
|
||
transition: 0.3s;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.item-total-price {
|
||
font-size: 0.14rem;
|
||
margin-left: 0.1rem;
|
||
color: #fe2278;
|
||
}
|
||
|
||
.item-del {
|
||
color: $primary-color;
|
||
margin-left: 0.1rem;
|
||
cursor: pointer;
|
||
margin-right: -0.8rem;
|
||
margin-top: -0.2rem;
|
||
font-size: 0.14rem;
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty {
|
||
text-align: center;
|
||
|
||
image {
|
||
width: 60%;
|
||
margin-top: 0.4rem;
|
||
}
|
||
|
||
.tips {
|
||
color: #999;
|
||
margin-top: 0.15rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
width: 100%;
|
||
padding: 0.15rem;
|
||
box-sizing: border-box;
|
||
background-color: #ffffff;
|
||
border-top: 0.01rem solid #e6e6e6;
|
||
|
||
.bottom-info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.bottom-left {
|
||
font-size: 0.14rem;
|
||
color: #303133;
|
||
opacity: 0.8;
|
||
|
||
.money {
|
||
color: #fe2278;
|
||
}
|
||
}
|
||
|
||
.bottom-right {
|
||
font-size: 0.14rem;
|
||
color: #303133;
|
||
opacity: 0.8;
|
||
|
||
i {
|
||
font-size: 0.14rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 0.1rem;
|
||
|
||
.btn-left {
|
||
width: 39%;
|
||
height: 0.4rem;
|
||
line-height: 0.4rem;
|
||
}
|
||
|
||
.btn-right {
|
||
width: 60%;
|
||
margin-left: 0.15rem;
|
||
height: 0.4rem;
|
||
line-height: 0.4rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.comp-wrap {
|
||
min-width: 1rem;
|
||
border: 0.01rem solid #e6e6e6;
|
||
border-radius: 0.02rem;
|
||
padding: 0.2rem 0.17rem;
|
||
|
||
.tag-parent {
|
||
position: relative;
|
||
|
||
.num-tag {
|
||
position: absolute;
|
||
background-color: #f00;
|
||
color: #fff;
|
||
height: 0.18rem;
|
||
line-height: 0.18rem;
|
||
padding: 0 0.06rem;
|
||
border-radius: 0.1rem;
|
||
font-size: 0.12rem;
|
||
text-align: center;
|
||
z-index: 1;
|
||
top: 0;
|
||
right: 0.12rem;
|
||
transform: translateY(-50%) translateX(100%);
|
||
}
|
||
}
|
||
|
||
.comp-btn {
|
||
overflow: inherit;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
}
|
||
|
||
.list-wrap {
|
||
border: 0.01rem solid #e6e6e6;
|
||
border-radius: 0.02rem;
|
||
height: 100%;
|
||
border-left: 0;
|
||
padding: 0 0.2rem;
|
||
box-sizing: border-box;
|
||
width: 0;
|
||
|
||
.content {
|
||
height: 100%;
|
||
}
|
||
|
||
.comp-btn {
|
||
width: 80%;
|
||
box-align: center;
|
||
margin-top: 0.2rem;
|
||
}
|
||
|
||
.header {
|
||
height: 0.66rem;
|
||
line-height: 0.66rem;
|
||
text-align: left;
|
||
color: #303133;
|
||
font-size: 0.14rem;
|
||
}
|
||
|
||
.body {
|
||
padding: 0.3rem;
|
||
}
|
||
}
|
||
|
||
.page-height {
|
||
height: 100%;
|
||
}
|
||
|
||
.common-wrap {
|
||
height: 100%;
|
||
}
|
||
|
||
.remark-wrap {
|
||
width: 6rem;
|
||
background-color: #fff;
|
||
border-radius: 0.04rem;
|
||
box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 0.15rem;
|
||
height: 0.45rem;
|
||
line-height: 0.45rem;
|
||
border-bottom: 0.01rem solid #e8eaec;
|
||
|
||
.iconfont {
|
||
font-size: $uni-font-size-lg;
|
||
}
|
||
}
|
||
|
||
.body {
|
||
padding: 0.15rem 0.15rem 0.1rem;
|
||
|
||
textarea {
|
||
border: 0.01rem solid #e6e6e6;
|
||
width: 100%;
|
||
padding: 0.1rem;
|
||
box-sizing: border-box;
|
||
font-size: 0.14rem;
|
||
}
|
||
|
||
.placeholder-class {
|
||
font-size: 0.14rem;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
height: 0.5rem;
|
||
padding-bottom: 0.05rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
button {
|
||
width: 95%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|