9.9
This commit is contained in:
DESKTOP-369JRHT\12997
parent
afe8f64d05
commit
49ff4c0281
BIN
fuintCashierWeb/src/views/cashier/NewComponents/imgs/ewm.png
Normal file
BIN
fuintCashierWeb/src/views/cashier/NewComponents/imgs/ewm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
fuintCashierWeb/src/views/cashier/NewComponents/imgs/smzf.png
Normal file
BIN
fuintCashierWeb/src/views/cashier/NewComponents/imgs/smzf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
@ -30,15 +30,28 @@
|
||||
<div class="three_box">合计:￥0.00</div>
|
||||
</div>
|
||||
<div class="d-top">
|
||||
|
||||
|
||||
<div class="d-b">
|
||||
<div class="d-s">
|
||||
<div class="checkbox" @click="changeBox" :class="{ 'active' : boxShow == true }">
|
||||
<i class="el-icon-check" size="15" v-if="boxShow == true"></i>
|
||||
</div>
|
||||
<div class="d_text">活动优惠 <i class="el-icon-arrow-down"></i> </div>
|
||||
</div>
|
||||
|
||||
<el-checkbox v-model="checkAll">活动优惠 <i class="el-icon-arrow-down"></i></el-checkbox>
|
||||
<div class="or_num">-￥0.00</div>
|
||||
</div>
|
||||
<!-- 下拉列表插入-->
|
||||
<div v-if="checkAll == true">
|
||||
<div class="x-d-b">
|
||||
<el-checkbox v-model="checkAll1">优惠1</el-checkbox>
|
||||
<div class="or_num">-￥0.00</div>
|
||||
</div>
|
||||
<div class="x-d-b">
|
||||
<el-checkbox v-model="checkAll2">优惠2</el-checkbox>
|
||||
<div class="or_num">-￥0.00</div>
|
||||
</div>
|
||||
<div class="x-d-b">
|
||||
<el-checkbox v-model="checkAll3">优惠3</el-checkbox>
|
||||
<div class="or_num">-￥0.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-b">
|
||||
<div class="d-s">
|
||||
<div class="checkbox" @click="changeBox1" :class="{ 'active' : boxShow1 == true }"><i
|
||||
@ -55,6 +68,7 @@
|
||||
</div>
|
||||
<div class="or_num">-￥220.00</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="three-top">
|
||||
<div class="addbor">
|
||||
@ -76,11 +90,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
<div>
|
||||
<div class="price_">￥0.00</div>
|
||||
<div class="price_prefer">优惠合计:￥0.00元</div>
|
||||
</div>
|
||||
<div class="anniu">立即结算</div>
|
||||
<div>
|
||||
<div class="price_">￥0.00</div>
|
||||
<div class="price_prefer">优惠合计:￥0.00元</div>
|
||||
</div>
|
||||
<div class="anniu">立即结算</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cont-box">
|
||||
@ -131,11 +145,11 @@
|
||||
8号枪（21.03L/191.7936元）；10号枪（45.03L/300.2852元）
|
||||
</div>
|
||||
<div class="bottom-b-d">
|
||||
<div>订单笔数 <span style="color: #FF9655">0件</span> </div>
|
||||
<div>订单金额 <span style="color: #FF9655">￥0.00</span> </div>
|
||||
<div>订单笔数 <span style="color: #FF9655">0件</span></div>
|
||||
<div>订单金额 <span style="color: #FF9655">￥0.00</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
<div class="box-bottom">
|
||||
<div class="anniu-c">
|
||||
重置
|
||||
</div>
|
||||
@ -143,7 +157,7 @@
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="box-top">
|
||||
<div class="r-top">非油商品</div>
|
||||
<div class="r-top">非油商品</div>
|
||||
<div class="input-box">
|
||||
<input type="text" placeholder="商品名称，商品关键词，商品条码">
|
||||
</div>
|
||||
@ -166,8 +180,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-b-d">
|
||||
<div>订单笔数 <span style="color: #FF9655">0件</span> </div>
|
||||
<div>订单金额 <span style="color: #FF9655">￥27.00</span> </div>
|
||||
<div>订单笔数 <span style="color: #FF9655">0件</span></div>
|
||||
<div>订单金额 <span style="color: #FF9655">￥27.00</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-bottom">
|
||||
@ -180,16 +194,170 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 弹窗-->
|
||||
<el-dialog
|
||||
title="新增会员"
|
||||
:visible.sync="newMember"
|
||||
width="439px"
|
||||
center
|
||||
>
|
||||
<div class="tc-box">
|
||||
<div>请顾客扫码领取会员卡</div>
|
||||
<img src="./imgs/ewm.png" style="width: 180px;height: 180px;">
|
||||
<div class="red-size">微信/支付宝扫一扫</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="newMember = false">打印二维码</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="扫码支付"
|
||||
:visible.sync="ScanCodePayment"
|
||||
width="439px"
|
||||
center
|
||||
>
|
||||
<div class="tc-box">
|
||||
<div class="title_">收款： <span style="color: #F44522">¥0.00</span></div>
|
||||
<img src="./imgs/smzf.png" style="width: 171px;height: 122px;">
|
||||
<div>请顾客出示付款码，或者刷脸支付</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="ScanCodePayment = false">关闭</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="现金支付"
|
||||
:visible.sync="cashPayment"
|
||||
width="439px"
|
||||
center
|
||||
>
|
||||
<div class="tc-box">
|
||||
<div class="title_">应收款： <span style="color: #F44522">¥98.00</span></div>
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item label="收款金额" prop="name">
|
||||
<el-input v-model="ruleForm.name">
|
||||
<template slot="append">元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<div class="t-size">
|
||||
应找零：<span style="color: #F44522">¥20.00</span>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="cashPayment = false">确定收款</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="挂单"
|
||||
:visible.sync="hangingAnOrder"
|
||||
width="542px"
|
||||
center
|
||||
>
|
||||
<div class="tc-box">
|
||||
|
||||
<el-form :model="ruleForms" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item label="挂单名称" prop="name">
|
||||
<el-input v-model="ruleForms.name">
|
||||
<template slot="append">元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<div class="h-size">
|
||||
挂单只可将非油商品进行挂单,挂单成功后可在取单页面进行取单操作、取单
|
||||
时，可根据挂单名称取单
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="hangingAnOrder = false">取 消</el-button>
|
||||
<el-button type="primary" @click="hangingAnOrder = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="支付结果"
|
||||
:visible.sync="paymentResults"
|
||||
width="439px"
|
||||
center
|
||||
>
|
||||
<div class="tc-box">
|
||||
|
||||
<div class="hui-box">
|
||||
<div class="hui-box-bt">
|
||||
<div>支付方式</div>
|
||||
<div>现金</div>
|
||||
</div>
|
||||
<div class="hui-box-bt">
|
||||
<div>实付金额</div>
|
||||
<div>¥0.00</div>
|
||||
</div>
|
||||
<div class="hui-box-bt">
|
||||
<div>订单金额</div>
|
||||
<div>¥10.00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="paymentResults = false">关闭（3s)</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="取单"
|
||||
:visible.sync="pickUpTheOrder"
|
||||
width="910px"
|
||||
center
|
||||
>
|
||||
<pickUp></pickUp>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="pickUpTheOrder = false">取消</el-button>
|
||||
<el-button type="primary" @click="pickUpTheOrder = false">作废</el-button>
|
||||
<el-button type="primary" @click="pickUpTheOrder = false">取单</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="挂账"
|
||||
:visible.sync="accountPending"
|
||||
width="542px"
|
||||
center
|
||||
>
|
||||
<accountPending></accountPending>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="accountPending = false">取 消</el-button>
|
||||
<el-button type="primary" @click="accountPending = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
title="会员充值"
|
||||
:visible.sync="memberRecharge"
|
||||
width="910px"
|
||||
center
|
||||
>
|
||||
<memberRecharge></memberRecharge>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="memberRecharge = false">取 消</el-button>
|
||||
<el-button type="primary" @click="memberRecharge = false">确认充值</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pickUp from './newHomeComponents/pickUpTheOrder.vue'
|
||||
import accountPending from './newHomeComponents/accountPending.vue'
|
||||
import memberRecharge from './newHomeComponents/memberRecharge.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
boxShow: true,
|
||||
boxShow1: true,
|
||||
boxShow2: true,
|
||||
checkList: [],
|
||||
checkAll: true,
|
||||
checkAll1: false,
|
||||
checkAll2: false,
|
||||
checkAll3: false,
|
||||
isIndeterminate: true,
|
||||
cardList: [
|
||||
{
|
||||
name: '储值卡',
|
||||
@ -246,9 +414,35 @@ export default {
|
||||
id: '4'
|
||||
},
|
||||
],
|
||||
tabIndex: 0
|
||||
tabIndex: 0,
|
||||
newMember: false,
|
||||
ScanCodePayment: false,
|
||||
cashPayment: false,
|
||||
ruleForm: {
|
||||
name: '',
|
||||
},
|
||||
ruleForms: {
|
||||
name: '',
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入活动名称', trigger: 'blur'},
|
||||
{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
|
||||
],
|
||||
},
|
||||
hangingAnOrder: false,
|
||||
paymentResults: false,
|
||||
pickUpTheOrder: false,
|
||||
accountPending: false,
|
||||
memberRecharge: true,
|
||||
|
||||
}
|
||||
},
|
||||
components:{
|
||||
pickUp,
|
||||
accountPending,
|
||||
memberRecharge
|
||||
},
|
||||
methods: {
|
||||
changeBox() {
|
||||
this.boxShow = !this.boxShow
|
||||
@ -278,6 +472,7 @@ input {
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.new-contoner {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@ -325,7 +520,9 @@ input {
|
||||
z-index: 9;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
display: flex;align-items: center;justify-content: space-between
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
.o-top {
|
||||
@ -388,6 +585,15 @@ input {
|
||||
margin: 15px 0px;
|
||||
}
|
||||
|
||||
.x-d-b {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 15px 0px;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.d-top {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@ -510,7 +716,8 @@ input {
|
||||
padding: 0px 20px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
.r-top{
|
||||
|
||||
.r-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -521,7 +728,8 @@ input {
|
||||
font-size: 16px;
|
||||
color: #555555;
|
||||
}
|
||||
.input-box{
|
||||
|
||||
.input-box {
|
||||
width: 90%;
|
||||
height: 40px;
|
||||
background: #FAFAFA;
|
||||
@ -533,6 +741,7 @@ input {
|
||||
padding: 0px 15px;
|
||||
margin: 15px auto;
|
||||
}
|
||||
|
||||
.gang {
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
@ -590,7 +799,7 @@ input {
|
||||
height: 90px;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
background: rgba(255,181,25,0.1);
|
||||
background: rgba(255, 181, 25, 0.1);
|
||||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
border: 1px solid #FFB519;
|
||||
@ -607,7 +816,7 @@ input {
|
||||
height: 90px;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
background: rgba(64,158,255,0.1);
|
||||
background: rgba(64, 158, 255, 0.1);
|
||||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
border: 1px solid #409EFF;
|
||||
@ -646,7 +855,8 @@ input {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.c-bottom{
|
||||
|
||||
.c-bottom {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
border-bottom: 2px solid #F4F5F9;
|
||||
@ -654,7 +864,8 @@ input {
|
||||
padding: 10px 20px;
|
||||
|
||||
}
|
||||
.bottom-b-d{
|
||||
|
||||
.bottom-b-d {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
@ -666,7 +877,8 @@ input {
|
||||
font-size: 16px;
|
||||
color: #777777;
|
||||
}
|
||||
.anniu-c{
|
||||
|
||||
.anniu-c {
|
||||
width: 80px;
|
||||
height: 36px;
|
||||
background: #FFFFFF;
|
||||
@ -677,22 +889,24 @@ input {
|
||||
justify-content: center;
|
||||
color: #777777;
|
||||
}
|
||||
.anniu-lv{
|
||||
|
||||
.anniu-lv {
|
||||
width: 80px;
|
||||
height: 36px;
|
||||
background: linear-gradient( 312deg, #9CDCA0 0%, #5BC557 100%);
|
||||
background: linear-gradient(312deg, #9CDCA0 0%, #5BC557 100%);
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
.anniu-lan{
|
||||
|
||||
.anniu-lan {
|
||||
cursor: pointer;
|
||||
width: 80px;
|
||||
height: 36px;
|
||||
background: linear-gradient( 312deg, #70CAFD 0%, #0BADFE 100%, #02AAFE 100%);
|
||||
background: linear-gradient(312deg, #70CAFD 0%, #0BADFE 100%, #02AAFE 100%);
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
margin: 0px 15px;
|
||||
display: flex;
|
||||
@ -700,7 +914,8 @@ cursor: pointer;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
.taber-top{
|
||||
|
||||
.taber-top {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 20px;
|
||||
@ -708,7 +923,8 @@ cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.taber-box{
|
||||
|
||||
.taber-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px;
|
||||
@ -716,26 +932,81 @@ cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.goods_name{
|
||||
|
||||
.goods_name {
|
||||
width: 35%;
|
||||
|
||||
|
||||
}
|
||||
.stock_name{
|
||||
|
||||
.stock_name {
|
||||
width: 15%;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.u-price_name{
|
||||
|
||||
.u-price_name {
|
||||
width: 15%;
|
||||
text-align: center;
|
||||
}
|
||||
.num_name{
|
||||
|
||||
.num_name {
|
||||
width: 15%;
|
||||
text-align: center;
|
||||
}
|
||||
.orerate_name{
|
||||
|
||||
.orerate_name {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tc-box {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.red-size {
|
||||
font-size: 18px;
|
||||
color: #F44522;
|
||||
}
|
||||
|
||||
.title_ {
|
||||
font-size: 28px;
|
||||
color: #333333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.r-size {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.t-size {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.h-size {
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
margin-left: 100px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.hui-box {
|
||||
width: 282px;
|
||||
|
||||
background: #FAFAFA;
|
||||
margin: 15px auto;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.hui-box-bt {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 15px auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,96 @@
|
||||
<script >
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ruleForm: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入活动名称', trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
|
||||
],
|
||||
region: [
|
||||
{ required: true, message: '请选择活动区域', trigger: 'change' }
|
||||
],
|
||||
date1: [
|
||||
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
|
||||
],
|
||||
date2: [
|
||||
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
|
||||
],
|
||||
type: [
|
||||
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
|
||||
],
|
||||
resource: [
|
||||
{ required: true, message: '请选择活动资源', trigger: 'change' }
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: '请填写活动形式', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
alert('submit!');
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item label="挂账单位" prop="region" style="width: 396px">
|
||||
<el-select v-model="ruleForm.region" placeholder="请选择挂账单位">
|
||||
<el-option label="挂账单位一" value="shanghai"></el-option>
|
||||
<el-option label="挂账单位二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="可用额度" prop="name" style="width: 396px">
|
||||
<el-input v-model="ruleForm.name">
|
||||
<template slot="append">元</template>
|
||||
</el-input>
|
||||
<div class="hui-size">可用额度为挂账人的最大可用额度,如挂账金额大于可用额度,将无法进行挂账</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="挂帐金额" prop="name" style="width: 396px">
|
||||
<el-input v-model="ruleForm.name">
|
||||
<template slot="append">元</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="备注" prop="desc" style="width: 396px">
|
||||
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.hui-size{
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,55 @@
|
||||
<script >
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabList:[
|
||||
{
|
||||
name:'电子储值卡',
|
||||
num:0
|
||||
},
|
||||
{
|
||||
name:'电子囤油卡',
|
||||
num:1
|
||||
},
|
||||
{
|
||||
name:'礼品卡兑换',
|
||||
num:2
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="top-dd">
|
||||
<div class="tab-dv" v-for="(item,index) in tabList" :key="index">
|
||||
{{item.name}}
|
||||
</div>
|
||||
<div v-if=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.top-dd{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.tab-dv{
|
||||
width: 200px;
|
||||
height: 36px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #FF9655;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
margin-right:10px ;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,76 @@
|
||||
<script >
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input:'',
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="s-">
|
||||
<div>
|
||||
<el-input v-model="input" placeholder="请输入挂单名称备份"></el-input>
|
||||
<div class="xz_">挂单1</div>
|
||||
<div class="xz_">挂单2</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%;margin-left: 20px">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="商品名称"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="零售价"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="数量">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="金额">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.s-{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
.xz_{
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
margin: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user