|
|
@@ -1,266 +1,282 @@
|
|
|
<template>
|
|
|
- <view class="billing_box_bg">
|
|
|
- <view class="input-wrap">
|
|
|
- <app-search-module
|
|
|
- placeholder="请输入关键词搜索" @search="searchFn" />
|
|
|
+ <view class="billing_box_bg">
|
|
|
+ <view class="input-wrap">
|
|
|
+ <app-search-module placeholder="请输入关键词搜索" @search="searchFn" />
|
|
|
</view>
|
|
|
- <app-tabs
|
|
|
- :tabs="tabs"
|
|
|
- :currentTab="tabIndex"
|
|
|
- @change="change"
|
|
|
- itemWidth="33.33%" />
|
|
|
- <view class="scroll-middle_bx">
|
|
|
- <scroll-view
|
|
|
- scroll-y
|
|
|
- scroll-with-animation
|
|
|
- class="tab-view"
|
|
|
- :scroll-top="scrollTop"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-for="(item,index) in tabbar"
|
|
|
- :key="index"
|
|
|
- class="tab-bar-item"
|
|
|
- :class="[currentTab==index ? 'active' : '']"
|
|
|
- :data-current="index"
|
|
|
- @tap.stop="swichNav($event ,item)"
|
|
|
- >
|
|
|
- <text>{{item.categoryName || '暂无'}}</text>
|
|
|
- </div>
|
|
|
- </scroll-view>
|
|
|
- <block v-for="(item,index) in tabbar" :key="index">
|
|
|
- <scroll-view
|
|
|
- scroll-y
|
|
|
- class="right-box"
|
|
|
- v-if="currentTab==index"
|
|
|
- >
|
|
|
- <view class="item_list_bx">
|
|
|
- <Commondity @customNum="customNum"></Commondity>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!--内容部分 start -->
|
|
|
- <!-- v-if="!$util.isEmpty(list.data)" -->
|
|
|
-
|
|
|
- <!-- <block v-else>
|
|
|
+ <app-tabs
|
|
|
+ :tabs="tabs"
|
|
|
+ :currentTab="tabIndex"
|
|
|
+ @change="change"
|
|
|
+ itemWidth="50%"
|
|
|
+ />
|
|
|
+ <view class="scroll-middle_bx">
|
|
|
+ <scroll-view
|
|
|
+ scroll-y
|
|
|
+ scroll-with-animation
|
|
|
+ class="tab-view"
|
|
|
+ :scroll-top="scrollTop"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in tabbar"
|
|
|
+ :key="index"
|
|
|
+ class="tab-bar-item"
|
|
|
+ :class="[currentTab == index ? 'active' : '']"
|
|
|
+ :data-current="index"
|
|
|
+ @tap.stop="swichNav($event, item)"
|
|
|
+ >
|
|
|
+ <text>{{ item.categoryName || "暂无" }}</text>
|
|
|
+ <text class="tag">4/10</text>
|
|
|
+ </div>
|
|
|
+ </scroll-view>
|
|
|
+ <block v-for="(item, index) in tabbar" :key="index">
|
|
|
+ <scroll-view scroll-y class="right-box" v-if="currentTab == index">
|
|
|
+ <view class="item_list_bx">
|
|
|
+ <view class="item_list_title">{{ item.categoryName }}</view>
|
|
|
+ <Commondity @customNum="customNum"></Commondity>
|
|
|
+ <Commondity
|
|
|
+ :type="COMMODITY_TYPE.CHANGE"
|
|
|
+ @customNum="customNum"
|
|
|
+ ></Commondity>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!--内容部分 start -->
|
|
|
+ <!-- v-if="!$util.isEmpty(list.data)" -->
|
|
|
+
|
|
|
+ <!-- <block v-else>
|
|
|
<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
</block> -->
|
|
|
- <!--内容部分 end -->
|
|
|
- </scroll-view>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
- <!-- :maskClosable="false" -->
|
|
|
- <modal-module
|
|
|
- :show="isModel"
|
|
|
- @cancel="modalCancel"
|
|
|
- @click="affirm"
|
|
|
- title="花之物语 红色系"
|
|
|
- color="#333"
|
|
|
- :size="32"
|
|
|
- padding="30rpx 30rpx"
|
|
|
- >
|
|
|
- <template slot="customContent">
|
|
|
- <view class="select-cmd_bx">
|
|
|
- <view class="kc">
|
|
|
- 库存972
|
|
|
- </view>
|
|
|
- <view class="num_bx">
|
|
|
- <input type="number" >扎
|
|
|
- <input type="number" style="margin-left:24upx" >支
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </template>
|
|
|
- </modal-module>
|
|
|
- <FooterCart></FooterCart>
|
|
|
- </view>
|
|
|
+ <!--内容部分 end -->
|
|
|
+ </scroll-view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ <!-- :maskClosable="false" -->
|
|
|
+ <modal-module
|
|
|
+ :show="isModel"
|
|
|
+ @cancel="modalCancel"
|
|
|
+ @click="affirm"
|
|
|
+ title="花之物语 红色系"
|
|
|
+ color="#333"
|
|
|
+ :size="32"
|
|
|
+ padding="30rpx 30rpx"
|
|
|
+ >
|
|
|
+ <template slot="customContent">
|
|
|
+ <view class="select-cmd_bx">
|
|
|
+ <view class="kc">
|
|
|
+ 库存972
|
|
|
+ </view>
|
|
|
+ <view class="num_bx">
|
|
|
+ <input type="number" />扎
|
|
|
+ <input type="number" style="margin-left:24upx" />支
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </modal-module>
|
|
|
+ <FooterCart></FooterCart>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import AppSearchModule from '@/components/module/app-search'
|
|
|
- import AppTabs from '@/components/plugin/tabs'
|
|
|
- import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
- import Commondity from './components/Commodity'
|
|
|
- import ModalModule from "@/components/plugin/modal";
|
|
|
- import FooterCart from './components/FooterCart'
|
|
|
- export default {
|
|
|
- name: "Billing", // 开单
|
|
|
- components: {
|
|
|
- AppTabs,
|
|
|
- AppSearchModule,
|
|
|
- AppWrapperEmpty,
|
|
|
- Commondity,
|
|
|
- ModalModule,
|
|
|
- FooterCart
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tabIndex: 0,
|
|
|
- tabs: [
|
|
|
- {
|
|
|
- name: '花材'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '成品'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '课程'
|
|
|
- },
|
|
|
- ],
|
|
|
- tabbar:[
|
|
|
- {
|
|
|
- categoryName: "花束",
|
|
|
- delStatus: "0",
|
|
|
- description: "",
|
|
|
- goodsNum: "0",
|
|
|
- id: "95",
|
|
|
- img: "https://img.huaml.com",
|
|
|
- inTurn: "0",
|
|
|
- merchantId: "12358",
|
|
|
- parentId: "0",
|
|
|
- sold: "0",
|
|
|
- status: "1",
|
|
|
- },
|
|
|
- {
|
|
|
- categoryName: "花篮",
|
|
|
- delStatus: "0",
|
|
|
- description: "",
|
|
|
- goodsNum: "0",
|
|
|
- id: "96",
|
|
|
- img: "https://img.huaml.com",
|
|
|
- inTurn: "0",
|
|
|
- merchantId: "12358",
|
|
|
- parentId: "0",
|
|
|
- sold: "0",
|
|
|
- status: "1",
|
|
|
- }
|
|
|
- ],
|
|
|
- currentTab: 0,
|
|
|
- isModel: false
|
|
|
- }
|
|
|
- },
|
|
|
- methods:{
|
|
|
- //自定义数量
|
|
|
- customNum(){
|
|
|
- this.isModel = true
|
|
|
- },
|
|
|
- modalCancel(){
|
|
|
- this.isModel = false
|
|
|
- }, // 取消 确认
|
|
|
- affirm(val){
|
|
|
- if(val.index === 0) {
|
|
|
- this.modalCancel()
|
|
|
- }else{
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- change(e){
|
|
|
- if (this.tabIndex == e.index) {
|
|
|
- return false;
|
|
|
- } else {
|
|
|
- this.tabIndex = e.index;
|
|
|
- }
|
|
|
- },
|
|
|
- searchFn(){
|
|
|
-
|
|
|
- },
|
|
|
- scrollTop(){
|
|
|
-
|
|
|
- },
|
|
|
- swichNav(e){
|
|
|
- let cur = e.currentTarget.dataset.current;
|
|
|
- if (this.currentTab == cur) {
|
|
|
- return false;
|
|
|
- } else {
|
|
|
- this.currentTab = cur;
|
|
|
- // this.form.categoryId = item.id;
|
|
|
- // this.resetList();
|
|
|
- // this._list();
|
|
|
- // this.checkCor()
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+import AppSearchModule from "@/components/module/app-search";
|
|
|
+import AppTabs from "@/components/plugin/tabs";
|
|
|
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
+import Commondity from "./components/Commodity";
|
|
|
+import ModalModule from "@/components/plugin/modal";
|
|
|
+import FooterCart from "./components/FooterCart";
|
|
|
+import { COMMODITY_TYPE } from "@/utils/declare";
|
|
|
+export default {
|
|
|
+ name: "Billing", // 开单
|
|
|
+ components: {
|
|
|
+ AppTabs,
|
|
|
+ AppSearchModule,
|
|
|
+ AppWrapperEmpty,
|
|
|
+ Commondity,
|
|
|
+ ModalModule,
|
|
|
+ FooterCart
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ COMMODITY_TYPE,
|
|
|
+ tabIndex: 0,
|
|
|
+ tabs: [
|
|
|
+ {
|
|
|
+ name: "花材"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "成品"
|
|
|
+ }
|
|
|
+ // {
|
|
|
+ // name: '课程'
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+ tabbar: [
|
|
|
+ {
|
|
|
+ categoryName: "花束",
|
|
|
+ delStatus: "0",
|
|
|
+ description: "",
|
|
|
+ goodsNum: "0",
|
|
|
+ id: "95",
|
|
|
+ img: "https://img.huaml.com",
|
|
|
+ inTurn: "0",
|
|
|
+ merchantId: "12358",
|
|
|
+ parentId: "0",
|
|
|
+ sold: "0",
|
|
|
+ status: "1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ categoryName: "花篮",
|
|
|
+ delStatus: "0",
|
|
|
+ description: "",
|
|
|
+ goodsNum: "0",
|
|
|
+ id: "96",
|
|
|
+ img: "https://img.huaml.com",
|
|
|
+ inTurn: "0",
|
|
|
+ merchantId: "12358",
|
|
|
+ parentId: "0",
|
|
|
+ sold: "0",
|
|
|
+ status: "1"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ currentTab: 0,
|
|
|
+ isModel: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //自定义数量
|
|
|
+ customNum() {
|
|
|
+ this.isModel = true;
|
|
|
+ },
|
|
|
+ modalCancel() {
|
|
|
+ this.isModel = false;
|
|
|
+ }, // 取消 确认
|
|
|
+ affirm(val) {
|
|
|
+ if (val.index === 0) {
|
|
|
+ this.modalCancel();
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ change(e) {
|
|
|
+ if (this.tabIndex == e.index) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ this.tabIndex = e.index;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchFn() {},
|
|
|
+ scrollTop() {},
|
|
|
+ swichNav(e) {
|
|
|
+ let cur = e.currentTarget.dataset.current;
|
|
|
+ if (this.currentTab == cur) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ this.currentTab = cur;
|
|
|
+ // this.form.categoryId = item.id;
|
|
|
+ // this.resetList();
|
|
|
+ // this._list();
|
|
|
+ // this.checkCor()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .billing_box_bg {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .input-wrap {
|
|
|
- padding: 22px 20px 22px 30px;
|
|
|
- }
|
|
|
- .scroll-middle_bx {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- .tab-view {
|
|
|
- height: 100%;
|
|
|
- width: 170upx;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- z-index: 10;
|
|
|
- background-color: #f0f2f6;
|
|
|
- .tab-bar-item {
|
|
|
- width: 170upx;
|
|
|
- height: 90upx;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 26upx;
|
|
|
- color: #444;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
+.billing_box_bg {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .input-wrap {
|
|
|
+ padding: 22px 20px 22px 30px;
|
|
|
+ }
|
|
|
+ .scroll-middle_bx {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .tab-view {
|
|
|
+ height: 100%;
|
|
|
+ width: 170upx;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ z-index: 10;
|
|
|
+ background-color: #f0f2f6;
|
|
|
+ .tab-bar-item {
|
|
|
+ position: relative;
|
|
|
+ width: 170upx;
|
|
|
+ height: 90upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #444;
|
|
|
+ font-weight: 400;
|
|
|
+ .tag {
|
|
|
+ display: flex;
|
|
|
+ padding: 0 20px;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 32px;
|
|
|
+ background: #ff2842;
|
|
|
+ border-radius: 16px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .active {
|
|
|
- position: relative;
|
|
|
- color: $mainColor;
|
|
|
- font-size: 26px;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
+ .active {
|
|
|
+ position: relative;
|
|
|
+ color: $mainColor;
|
|
|
+ font-size: 26px;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .active::before {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- border-left: 8upx solid $mainColor;
|
|
|
- height: 100%;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .right-box {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- position: fixed;
|
|
|
- padding-left: 170upx;
|
|
|
- box-sizing: border-box;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- .item_list_bx {
|
|
|
- padding: 40px 16px;
|
|
|
- }
|
|
|
- .select-cmd_bx {
|
|
|
- & .kc {
|
|
|
- color: #999999;
|
|
|
- font-size: 28px;
|
|
|
- font-weight: 400;
|
|
|
- margin-bottom: 60px;
|
|
|
- text-align: center;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- & .num_bx {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 80px;
|
|
|
- & > input {
|
|
|
- width: 212px;
|
|
|
- height: 80px;
|
|
|
- border: 1px solid #DDDDDD;
|
|
|
- border-radius: 4px;
|
|
|
- text-align: center;
|
|
|
- margin-right: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-</style>
|
|
|
+ .active::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ border-left: 8upx solid $mainColor;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-box {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ padding-left: 170upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .item_list_bx {
|
|
|
+ padding: 40px 16px;
|
|
|
+ }
|
|
|
+ .item_list_title {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .select-cmd_bx {
|
|
|
+ & .kc {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-bottom: 60px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ & .num_bx {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 80px;
|
|
|
+ & > input {
|
|
|
+ width: 212px;
|
|
|
+ height: 80px;
|
|
|
+ border: 1px solid #dddddd;
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhengxin