|
|
@@ -0,0 +1,236 @@
|
|
|
+<template>
|
|
|
+ <view class="shop-listType_box">
|
|
|
+ <view class="shop-type_box">
|
|
|
+ <view v-for="item in allCategory" :key="item.id" :class="[currentCategory.id===item.id?'active':'']" @click="changeCategory(item)" > {{item.categoryName}} </view>
|
|
|
+ </view>
|
|
|
+ <view class="num-area" v-if="currentCategory.flower && currentCategory.flower ==1">
|
|
|
+ <view v-for="info in flowerNumList" :class="[flowerNum===info.num?'selected':'']" @click="setNum(info)" :key="info.num">{{info.name}}</view>
|
|
|
+ </view>
|
|
|
+ <scroll-view class="shop-show_box" enable-flex="true" scroll-y="true" lower-threshold="20" @scrolltolower="reachBottom">
|
|
|
+ <view class="goods-item-area">
|
|
|
+ <view v-for="item in list.data" :key="item.id" class="show-shop_box">
|
|
|
+ <view class="item-detail" @click="popAddModelFn(item)">
|
|
|
+ <image class="img" :src="item.cover" mode="scaleToFill" ></image>
|
|
|
+ <view class="shop-info_price">
|
|
|
+ <view>
|
|
|
+ <view>{{item.name}}</view>
|
|
|
+ <view>¥{{parseFloat(item.price)}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <slot name="footer"></slot>
|
|
|
+
|
|
|
+ <!-- 开单选花材输入数量和金额 -->
|
|
|
+ <uni-popup ref="kdSelectNumPriceRef" background-color="#fff" type="center" :animation="false">
|
|
|
+ <kdSelectNumPrice @confirmAddItemModel="confirmAddItemModel" :customData.sync="customData" @cancelKdSelectNumPrice="addItemModelHidden"></kdSelectNumPrice>
|
|
|
+ </uni-popup>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { getClass } from '@/api/category/index'
|
|
|
+import { getGoodsList } from '@/api/goods/index'
|
|
|
+import productMins from "@/mixins/product";
|
|
|
+import list from "@/mixins/list";
|
|
|
+import kdSelectNumPrice from '@/components/app-kd-select-num-price.vue'
|
|
|
+export default {
|
|
|
+ name:'rightItemArea',
|
|
|
+ components:{ kdSelectNumPrice },
|
|
|
+ mixins: [productMins,list],
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ allCategory:[],
|
|
|
+ categoryId: '',
|
|
|
+ currentCategory:{},
|
|
|
+ selectJobType:'bill',
|
|
|
+ selectJobId:0,
|
|
|
+ flowerNum:0,
|
|
|
+ flowerNumList:[{num:0,name:'支数'},{num:6,name:6},{num:9,name:9},{num:11,name:11},{num:19,name:19},{num:33,name:33},{num:52,name:52},{num:66,name:66},{num:99,name:99}]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ customId: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ customId:{
|
|
|
+ handler(newCustomId){
|
|
|
+ this.selectJobId = newCustomId
|
|
|
+ },
|
|
|
+ immediate:true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ setNum(info){
|
|
|
+ this.$util.hitRemind()
|
|
|
+ this.flowerNum = info.num
|
|
|
+ this.list.data=[]
|
|
|
+ this.list.page = 1
|
|
|
+ this.list.finished = false
|
|
|
+ this.getGoodsData()
|
|
|
+ },
|
|
|
+ popAddModelFn(info) {
|
|
|
+ this.$util.hitRemind()
|
|
|
+ this.showAddModelFn({ ...info, buyNum: 1, unitPrice: info.price,unitType:0})
|
|
|
+ },
|
|
|
+ init(){
|
|
|
+ getClass().then(res=>{
|
|
|
+ if(res.code == 1){
|
|
|
+ this.allCategory = res.data
|
|
|
+ this.currentCategory = this.allCategory[0]
|
|
|
+ this.getGoodsData()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getGoodsData(){
|
|
|
+ getGoodsList({cId:this.currentCategory.id,page:this.list.page,pageSize:30,flowerNum:this.flowerNum}).then(res=>{
|
|
|
+ if(res.code == 1){
|
|
|
+ this.completes(res)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ reachBottom(){
|
|
|
+ if (!this.list.finished) {
|
|
|
+ this.getGoodsData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeCategory(item){
|
|
|
+ this.$util.hitRemind()
|
|
|
+ this.list.data=[]
|
|
|
+ this.list.page = 1
|
|
|
+ this.list.finished = false
|
|
|
+ this.flowerNum = 0
|
|
|
+ this.currentCategory = item
|
|
|
+ this.getGoodsData()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.shop-listType_box {
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ & .shop-type_box {
|
|
|
+ max-height: 300upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow-y: scroll;
|
|
|
+ & > view {
|
|
|
+ border:1px solid #e4e4e4;
|
|
|
+ padding: 12upx 0upx;
|
|
|
+ font-size: 15px;
|
|
|
+ min-width: 75upx;
|
|
|
+ text-align: center;
|
|
|
+ &.active {
|
|
|
+ background-color: #428369;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & .num-area{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin:8upx 0 8upx 0;
|
|
|
+ justify-content:space-around;
|
|
|
+ & > view {
|
|
|
+ border:1upx solid #CCCCCC;
|
|
|
+ width:30upx;
|
|
|
+ height:25upx;
|
|
|
+ border-radius:10upx;
|
|
|
+ display:flex;
|
|
|
+ justify-content:center;
|
|
|
+ align-items: center;
|
|
|
+ font-size:12upx;
|
|
|
+ color:#666666;
|
|
|
+ }
|
|
|
+ & .selected{
|
|
|
+ background-color:#CCCCCC;
|
|
|
+ color:white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & .shop-show_box{
|
|
|
+ padding: 2upx;
|
|
|
+ overflow-y: scroll;
|
|
|
+ overflow-x: hidden;
|
|
|
+ & .goods-item-area{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow-y: scroll;
|
|
|
+ overflow-x: hidden;
|
|
|
+ height:90vh;
|
|
|
+ & .show-shop_box{
|
|
|
+ & .item-detail{
|
|
|
+ position: relative;
|
|
|
+ margin-right: 9upx;
|
|
|
+ margin-bottom: 6upx;
|
|
|
+ width: 82upx;
|
|
|
+ height: 82upx;
|
|
|
+ & .img {
|
|
|
+ width: 82upx;
|
|
|
+ height: 82upx;
|
|
|
+ }
|
|
|
+ .shop-info_price {
|
|
|
+ position: absolute;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 12upx;
|
|
|
+ color: #ffffff;
|
|
|
+ height:25upx;
|
|
|
+ & > view {
|
|
|
+ font-size: 10upx;
|
|
|
+ & > view:nth-child(1) {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ width:90%;
|
|
|
+ }
|
|
|
+ & > view:nth-child(2) {
|
|
|
+ font-size:8upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & .shop-footer_box {
|
|
|
+ height: 40upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ & > view {
|
|
|
+ height: 40upx;
|
|
|
+ padding: 5upx 25upx;
|
|
|
+ border-radius: 5upx;
|
|
|
+ font-size: 14upx;
|
|
|
+ margin: 0 10upx;
|
|
|
+ vertical-align: middle;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ &.btn-breakage {
|
|
|
+ background-color: #da9f5a;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ &.btn-account {
|
|
|
+ background-color: #009966;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|