对比新文件 |
| | |
| | | <template> |
| | | <view class="container-trade"> |
| | | <view class="canteen-items"> |
| | | <view v-if="(!list||list.length==0)&&true" style="width: 100%;min-height: 200rpx;"> |
| | | |
| | | </view> |
| | | <no-data v-if="(!list||list.length==0)&&true" style="width: 100%;margin-top: 220rpx;"></no-data> |
| | | <view class="" style="display: flex;flex-wrap: inherit;" v-else> |
| | | <view class="type-list"> |
| | | <view v-for="(item,index) of list" @click="changeType(item)" |
| | | :class="[query.categoryId===item.id?'current':'']" :key="index" class="p10 flex type-item"> |
| | | {{item.name || '-'}} |
| | | </view> |
| | | </view> |
| | | <view class="canteen-item-container"> |
| | | |
| | | <view v-for="(item,index) of listFilter" :key="item.id" class="canteen-item list flex" |
| | | @click.stop="toDetailList(item)"> |
| | | <view class="m-r-10"> |
| | | <image :src="item.imageUrl" :class="[!item.stock?'':'']" mode="scaleToFill" class="cover" |
| | | :lazy-load="true"> |
| | | </image> |
| | | </view> |
| | | <view class="cateen_infos list"> |
| | | <view class="title">{{item.name}}</view> |
| | | <view class="price">¥{{item.priceLow || 0}}-{{item.priceHigh||0}}</view> |
| | | <view class="desc">在售 {{item.stock||'0'}} 扎</view> |
| | | </view> |
| | | |
| | | </view> |
| | | |
| | | |
| | | </view> |
| | | </view> |
| | | |
| | | </view> |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | <uni-popup ref="popup_param" type="bottom"> |
| | | <view class="component-popup_input_all" v-if="currentCategory&¤tCategory.params"> |
| | | <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">商品参数设置</view> |
| | | <!-- 输入框--> |
| | | <view v-for="(item,i) in currentCategory.params" :key="i" class="m-t-20"> |
| | | <view class="title topic-font" style="font-size: 40rpx;font-weight: 600;">{{item.name}}</view> |
| | | <view class="m-t-12 flex value-items"> |
| | | <view class="value-item" @click="updateValue(item,each)" :class="[item.value===each?'cur':'']" |
| | | v-for="(each, j) in item.values" :key="j"> |
| | | {{each || '-'}} |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="button-space"></view> |
| | | <view> |
| | | <view class="button-green button-white" @click="closeParamPop">关闭</view> |
| | | <view class="button-green" @click="updateParamsAndSearch">查询</view> |
| | | </view> |
| | | </view> |
| | | </uni-popup> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | mapState |
| | | } from 'vuex' |
| | | export default { |
| | | props: { |
| | | catgoryTree: [], |
| | | supplierId: '', |
| | | }, |
| | | data() { |
| | | return { |
| | | list: [], |
| | | showpop: false, |
| | | query: { |
| | | name: '', |
| | | categoryId: '', |
| | | }, |
| | | currentCategory: {}, |
| | | type: 'category', //supplier |
| | | |
| | | |
| | | } |
| | | }, |
| | | |
| | | |
| | | methods: { |
| | | changeSearchType() { |
| | | if (this.type == 'category') { |
| | | this.type = 'supplier' |
| | | this.query.name = '' |
| | | } else { |
| | | this.type = 'category' |
| | | this.query.name = '' |
| | | } |
| | | }, |
| | | refInit(catgoryTree) { |
| | | this.list = catgoryTree || [] |
| | | if (this.list.length > 0) { |
| | | this.query.categoryId = this.list[0].id || '' |
| | | this.currentCategory = this.list[0] || {} |
| | | } |
| | | }, |
| | | async updateParamsAndSearch() { |
| | | //todo 设置参数并查询 |
| | | await this.refreshList() |
| | | this.$refs.popup_param.close() |
| | | }, |
| | | openParamPop() { |
| | | //todo 同时设置查询参数为空吧 |
| | | this.$refs.popup_param.open() |
| | | }, |
| | | closeParamPop() { |
| | | this.$refs.popup_param.close() |
| | | }, |
| | | buttonSearchFlow() { |
| | | |
| | | if (this.type == 'category') { |
| | | //根据分类名称查询 |
| | | this.$message.showLoading() |
| | | this.$http.request('get', '/api/customer/flower/category/tree', { |
| | | params: { |
| | | name: this.query.name || '' |
| | | } |
| | | }).then(res => { |
| | | var data = res.data |
| | | this.list = data || [] |
| | | if (this.list.length > 0) { |
| | | this.query.categoryId = this.list[0].id || '' |
| | | this.currentCategory = this.list[0] || {} |
| | | } else { |
| | | this.query.categoryId = '' |
| | | this.currentCategory = {} |
| | | } |
| | | }).finally(() => { |
| | | this.$message.hideLoading() |
| | | }) |
| | | } else { |
| | | uni.navigateTo({ |
| | | url: '/sub_pages/customer/trade/list?' + 'supplierName=' + this.query.name |
| | | }) |
| | | |
| | | } |
| | | }, |
| | | toDetailList(item) { |
| | | //去商品列表页面 |
| | | console.log('toDetailList', this.supplierId) |
| | | uni.navigateTo({ |
| | | url: `/sub_pages/customer/trade/list?categoryId=${item.id}&supplierId=${this.supplierId||''}` |
| | | }) |
| | | }, |
| | | changeType(item) { |
| | | this.query.categoryId = item.id || '' |
| | | this.currentCategory = item |
| | | }, |
| | | |
| | | |
| | | async submitGood() { |
| | | var values = [] |
| | | for (var item of this.list) { |
| | | if (item.shopnum > 0) { |
| | | values.push({ |
| | | id: item.id, |
| | | num: item.shopnum |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapState({ |
| | | address: state => { |
| | | return state.defaultaddress || {} |
| | | }, |
| | | }), |
| | | listFilter() { |
| | | if (this.query.categoryId) { |
| | | var arr = [] |
| | | if (this.list && this.list.length > 0) { |
| | | for (var item of this.list) { |
| | | if (item.id === this.query.categoryId || item.id === this.query.categoryId) { |
| | | // arr.push(item) |
| | | return item.children || [] |
| | | } |
| | | } |
| | | } |
| | | return arr |
| | | } else { |
| | | return [] |
| | | } |
| | | |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .container-trade { |
| | | background-color: #FFFFFF; |
| | | padding-top: 20rpx; |
| | | |
| | | .search-container { |
| | | margin: 0rpx 30rpx 20rpx 30rpx; |
| | | } |
| | | |
| | | |
| | | |
| | | .type-list { |
| | | max-width: 178rpx; |
| | | width: 178rpx; |
| | | min-width: 178rpx; |
| | | background: #EEF7F5; |
| | | border-radius: 8rpx; |
| | | min-height: calc(100vh - 500rpx); |
| | | max-height: calc(100vh - 500rpx); |
| | | overflow-y: scroll; |
| | | margin-right: 16rpx; |
| | | |
| | | .type-item { |
| | | text-align: center; |
| | | font-weight: 400; |
| | | font-size: 28rpx; |
| | | color: #000000; |
| | | display: block; |
| | | line-height: 88rpx; |
| | | // padding-left: 30rpx; |
| | | // padding-right: 30rpx; |
| | | } |
| | | |
| | | .type-item.current { |
| | | font-weight: 600; |
| | | font-size: 28rpx; |
| | | color: #04BA97; |
| | | } |
| | | } |
| | | |
| | | .title-before-blue.green { |
| | | padding-left: 30rpx; |
| | | padding-bottom: 0rpx; |
| | | } |
| | | |
| | | .title-before-blue:before { |
| | | color: #04BA97; |
| | | font-weight: 600; |
| | | min-width: 14rpx; |
| | | background: #04BA97; |
| | | border-radius: 8rpx; |
| | | display: inline-block; |
| | | } |
| | | |
| | | |
| | | .canteen-items { |
| | | // margin-left: 30rpx; |
| | | |
| | | .canteen-item { |
| | | margin: 0 auto; |
| | | // width: 164rpx; |
| | | // width: 690rpx; |
| | | // max-width: 690rpx; |
| | | // min-height: 266rpx; |
| | | background: #FFFFFF; |
| | | margin-bottom: 10rpx; |
| | | // max-width: 164rpx; |
| | | |
| | | .cover { |
| | | width: 164rpx; |
| | | height: 164rpx; |
| | | background-size: 100% 100%; |
| | | border-radius: 8rpx; |
| | | border: 2rpx solid #f8f8f8; |
| | | } |
| | | |
| | | .title { |
| | | font-weight: 500; |
| | | font-size: 28rpx; |
| | | color: #000000; |
| | | line-height: 40rpx; |
| | | // min-height: 80rpx; |
| | | text-align: center; |
| | | } |
| | | |
| | | .desc { |
| | | margin-top: 8rpx; |
| | | font-weight: 400; |
| | | font-size: 24rpx; |
| | | color: #6E9F66; |
| | | line-height: 34rpx; |
| | | height: 34rpx; |
| | | background-color: rgba(202, 229, 214, 0.57); |
| | | border-radius: 4rpx; |
| | | text-align: center; |
| | | |
| | | } |
| | | |
| | | .price { |
| | | font-weight: 400; |
| | | font-size: 24rpx; |
| | | color: #CF0000; |
| | | line-height: 34rpx; |
| | | text-align: left; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | } |
| | | |
| | | .canteen-item-container { |
| | | width: 100%; |
| | | min-height: 300rpx; |
| | | max-height: calc(100vh - 500rpx); |
| | | overflow-y: scroll; |
| | | } |
| | | |
| | | } |
| | | |
| | | .canteen-footer-shop { |
| | | position: absolute; |
| | | position: fixed; |
| | | left: 30rpx; |
| | | bottom: 30rpx; |
| | | } |
| | | |
| | | |
| | | |
| | | } |
| | | </style> |