From 28d72db591108c700e917253935dcc3bf538dca9 Mon Sep 17 00:00:00 2001
From: xuxueyang <xuxy@fengyuntec.com>
Date: 星期四, 11 七月 2024 17:30:37 +0800
Subject: [PATCH] ok商品的分类、列表，todo详情
---
sub_pages/customer/trade/trade.vue | 940 ++++++++++++++++++++--------------------------------------
1 files changed, 328 insertions(+), 612 deletions(-)
diff --git a/sub_pages/customer/trade/trade.vue b/sub_pages/customer/trade/trade.vue
index 523f096..4539785 100644
--- a/sub_pages/customer/trade/trade.vue
+++ b/sub_pages/customer/trade/trade.vue
@@ -1,613 +1,329 @@
-<template>
- <view class="container-canteen" style="min-height: calc(100vh - 20rpx );">
-
- <view class="canteen-items" style="min-height: calc(100vh - 360rpx);">
- <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 types" @click="changeType(item)"
- :class="[query.typeId==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="p10 canteen-item list"
- style="display: flex;flex-wrap: inherit;">
- <view class="m-r-10">
- <image :src="item.cover" mode="scaleToFill" class="cover" @click="previewImg(item.cover)">
- </image>
- </view>
- <view class="cateen_infos list">
- <view class="title">{{item.name}}</view>
- <view class="desc">月售:{{item.monthSale || '0'}}</view>
- <view class="flex bottom-buttons flex">
- <view class="price flex">
- <view class="icon">￥</view>
- <view class='num'>{{item.price || '-'}}</view>
- </view>
- <view class="icons flex">
- <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"
- @click="mulnum(item)"></uni-icons>
- <view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{item.shopnum}}</view>
- <uni-icons type="plus-filled" size="32" @click="addnum(item)"></uni-icons>
- </view>
- </view>
- </view>
- <view style="padding-bottom:100rpx">
- </view>
- </view>
-
- <footer-msg v-if="query.block&&query.schoolArea"
- :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
-
- </view>
- </view>
-
- </view>
-
-
-
- <view style="min-height:200rpx">
- </view>
- <common-footer flg="1"></common-footer>
-
- </view>
-</template>
-
-<script>
- import {
- mapState
- } from 'vuex'
- export default {
- data() {
- return {
- list: [],
- showpop: false,
- query: {
- name: '',
- // status:'',
- schoolArea: '',
- schoolAreaStr: '',
- block: '',
- blockStr: '',
- typeId: '',
- },
- types: [{
- name: '全部',
- id: ''
- }],
- schools: [],
- schoolIndex: -1,
- blockIndex: -1,
- blocks: [],
- shoptotal: 0,
- cal: 0,
- }
- },
- async onLoad() {
- // this.list = [{
- // 'shopnum': 0
- // }, {
- // 'shopnum': 1
- // }]
-
- //加载分类
- this.$http.request('get', '/api/canteen/goods/type/list', {
- params: {
- size: 100
- }
- }).then(async res => {
- if (res.code == 0) {
- this.types = res.data && res.data.records || []
- this.types.unshift({
- name: '全部',
- id: ''
- });
-
- }
- })
-
- this.listApi = '/api/canteen/customer/goods/list'
-
- // this.getList()
- //加载校区、楼栋
- this.$http.request('get', '/api/school/area/list', {
-
- }).then(async res => {
- if (res.code == 0) {
- this.schools = res.data || []
- // this.schools = [{
- // 'name': '全部',
- // 'id': '',
- // }]
- // for (var item of arr) {
- // this.schools.push(item)
- // }
- }
- console.log('schools', this.schools)
- var schoolIndex = uni.getStorageSync('schoolIndex')
- if (!schoolIndex && schoolIndex !== 0) {
- // await this.getList()
- // this.list.forEach(item => {
- // if (!item.shopnum) {
- // item.shopnum = 0
- // }
- // })
- } else {
- this.schoolIndex = schoolIndex
- if (this.schoolIndex >= 0) {
- this.PickerChangeSchool({
- detail: {
- value: this.schoolIndex
- }
- })
- // await this.getList()
- // this.list.forEach(item => {
- // if (!item.shopnum) {
- // item.shopnum = 0
- // }
- // })
- }
- }
-
- })
-
-
- },
- methods: {
- changeType(item) {
- this.query.typeId = item.id || ''
- },
- async PickerChangeSchool(e) {
- if (e.detail.value == '-1') {
- this.$message.showToast('未选择校区')
- return
- }
- this.schoolIndex = parseInt(e.detail.value)
- this.query.schoolArea = this.schools[this.schoolIndex].id
- this.blockIndex = -1
-
- this.$message.showLoading()
- var {
- data
- } = await this.$http.request('get', '/api/school/block/list', {
- params: {
- schoolArea: this.query.schoolArea,
- size: 200
- }
- })
-
- this.blocks = data && data.records || []
- // var arr = data.records || []
- // this.blocks = [{
- // 'name': '全部',
- // 'id': '',
- // }]
- // for (var item of arr) {
- // this.blocks.push(item)
- // }
- this.$message.hideLoading()
- if (this.blocks.length >= 1) {
- this.query.block = this.blocks[0].id
- this.query.blockStr = this.blocks[0].name
- this.page.current = 1
- this.blockIndex = 0
- this.list = []
- this.getList()
- } else {
- this.page.current = 1
- this.list = []
- }
-
-
-
- },
- async PickerChangeBlock(e) {
- if (e.detail.value == '-1') {
- this.$message.showToast('未选择楼栋')
- return
- }
- this.blockIndex = parseInt(e.detail.value)
- this.query.block = this.blocks[this.blockIndex].id
- this.page.current = 1
- // this.list = []
- this.list = []
- // this.getList()
- await this.getList()
- this.list.forEach(item => {
- if (!item.shopnum) {
- item.shopnum = 0
- }
- })
-
- },
- mulnum(item) {
- if (item.shopnum > 0) {
- item.shopnum -= 1
- }
- this.shoptotal -= 1
- this.cal += 1
- this.$forceUpdate()
-
- },
- addnum(item) {
- // console.log('addnum', item)
- if (item.shopnum) {
- item.shopnum += 1
- } else {
- item.shopnum = 1
- }
- this.shoptotal += 1
- this.cal += 1
- this.$forceUpdate()
- },
- openShopDetail() {
- // this.showpop = false
- // this.$forceUpdate()
- this.cal += 1
- this.$refs.popup_shop_detail.open()
- this.$nextTick(() => {
- this.$refs.addressselect && this.$refs.addressselect.init()
- })
- },
- closeShopDetail() {
- // this.showpop = true
- this.$refs.popup_shop_detail.close()
- },
- async submitGood() {
- var values = []
- for (var item of this.list) {
- if (item.shopnum > 0) {
- values.push({
- id: item.id,
- num: item.shopnum
- })
- }
- }
- //购买
- if (!this.address.id) {
- this.$message.showToast('请先选择收获地址')
- return
- }
-
- await this.$message.confirm('确定购买吗?')
- this.$message.showLoading()
- const {
- code,
- data
- } = await this.$http.request('post', '/api/canteen/customer/order', {
- data: {
- customerAddress: (this.address.schoolAreaStr || '') + (this.address.blockStr || '') + (
- this
- .address.room || '') + (this.address.address || ''),
- customerTel: this.address.tel,
- customer: this.address.name,
- goodsList: values, //规格
- }
- })
-
- this.$message.hideLoading()
- if (code == 0) {
-
- this.list.forEach(item => {
- item.shopnum = 0
- })
- this.shoptotal = 0
- this.cal += 1
- this.$refs.popup_shop_detail.close()
- this.$forceUpdate()
-
- //todo，预支付
- //深夜食堂的逻辑不太一样
- if (true) {
- const orderInfo = await this.$http.request('get', '/api/canteen/customer/payment/' + data
- .orderId, {})
- //支付准备
- var info = orderInfo.data
- let that = this
- wx.requestPayment({
- ...info,
- success(res) {
- console.log('pay success', res)
- uni.navigateTo({
- url: '/pages/canteen/canteen-success/canteen-success'
- })
- },
- fail(err) {
- console.error('pay fail', err)
- that.$message.showToast('支付失败')
- }
- })
- } else {
- uni.navigateTo({
- url: '/pages/canteen/canteen-success/canteen-success'
- })
- }
-
-
- }
- }
- },
- computed: {
- ...mapState({
- address: state => {
- return state.defaultaddress || {}
- },
- }),
- selectprices() {
- var arr = 0
- for (var item of this.list) {
- if (item.shopnum > 0) {
- // arr.push(item)
- arr += (item.price >= 0 ? item.price : 0) * item.shopnum
- }
- }
- if (this.cal > 0) {
- return arr
-
- }
- return 0
- },
- selectgoods() {
- var arr = []
- for (var item of this.list) {
- if (item.shopnum > 0) {
- arr.push(item)
- }
- }
- if (this.cal > 0) {
- return arr
-
- }
- return arr
-
- },
- listFilter() {
- if (this.query.typeId) {
- var arr = []
- if (this.list && this.list.length > 0) {
- for (var item of this.list) {
- if (item.typeId === this.query.typeId || item.type === this.query.typeId) {
- arr.push(item)
- }
- }
- }
- return arr
- } else {
- return this.list
- }
-
- },
- // shoptotal() {
- // var a = 0
- // for (var item of this.list) {
- // a += item.shopnum || 0
- // }
- // console.log('shoptotal',a,this.list)
- // return a
- // }
- }
- }
-</script>
-
-<style lang="scss" scoped>
- .container-canteen {
- background-color: #FFFFFF;
-
- .type-list {
- max-width: 178rpx;
- width: 178rpx;
- min-width: 178rpx;
- background: #EEF7F5;
- border-radius: 8rpx;
- min-height: calc(100vh - 300rpx);
- max-height: calc(100vh - 300rpx);
- overflow-y: scroll;
- margin-left: 30rpx;
-
- .type-item {
- text-align: center;
- font-weight: 400;
- font-size: 28rpx;
- color: #000000;
- 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;
- }
-
- .popup_shop_detail {
- background: #FFFFFF;
- // padding: 30rpx 0rpx;
- padding-bottom: 30rpx;
-
- .footer-shop {
- margin: 0 auto;
- margin-top: 46rpx;
- }
-
- .common-address-select {
- margin-left: 20rpx;
- margin-right: 20rpx;
- }
-
- .close-parent {
- margin-right: 20rpx;
- }
-
- .canteen-items {
- .canteen-item {
- margin-left: 20rpx;
- margin-right: 0rpx;
-
- .cateen_infos {
- width: 440rpx;
-
- }
-
- .cateen_infos.list {
- max-width: 30 0rpx;
- min-width: 200rpx;
- }
- }
- }
- }
-
- .canteen-items {
- // margin-left: 30rpx;
-
- .canteen-item {
- margin-left: 30rpx;
- margin-right: 30rpx;
- // width: 690rpx;
- // max-width: 690rpx;
- height: 206rpx;
- background: #FFFFFF;
- border-radius: 16rpx;
- display: flex;
- margin-bottom: 24rpx;
-
- .cover {
- width: 202rpx;
- height: 202rpx;
- }
-
- .title {
- font-weight: 600;
- font-size: 32rpx;
- color: #000000;
- line-height: 44rpx;
- }
-
- .desc {
- font-weight: 400;
- font-size: 24rpx;
- color: #666666;
- line-height: 34rpx;
- }
-
- .price {
-
- font-size: 24rpx;
-
- .icon {
- line-height: 60rpx;
- }
-
- .num {
- font-weight: 600;
- font-size: 36rpx;
- color: #000000;
- // line-height: 50rpx;
- }
- }
-
- .cateen_infos {
- width: 400rpx;
- position: relative;
- }
-
- .cateen_infos.list {
- max-width: 300rpx;
- min-width: 200rpx;
-
- }
-
- .bottom-buttons {
- // width: 400rpx;
- position: absolute;
- bottom: 0rpx;
-
- left: 0;
- right: 0;
-
- .icons {
- margin-left: auto;
- margin-right: 0;
-
- .curnums {
- line-height: 60rpx;
- }
- }
- }
- }
-
- .canteen-item-container {
- width: 100%;
- min-height: 300rpx;
- max-height: calc(100vh - 300rpx);
- overflow-y: scroll;
- }
-
- .canteen-item.list {
- margin-right: 0rpx;
- flex: 1;
- margin-bottom: 0rpx;
-
- .cover {
- width: 158rpx;
- height: 158rpx;
- }
- }
- }
-
- .canteen-footer-shop {
- position: absolute;
- position: fixed;
- left: 30rpx;
- bottom: 30rpx;
- }
-
- .area-select {
- .area {
-
- margin-right: 0rpx;
-
- .t {
- font-weight: 400;
- font-size: 32rpx;
- color: #000000;
- line-height: 44rpx;
- }
-
- .i {}
- }
-
- .area-1 {
- margin-left: auto;
- }
-
- .area-2 {
- margin-left: 84rpx;
- }
- }
-
- .canteen-banner {
- width: 750rpx;
- min-height: 360rpx;
- }
- }
+<template>
+ <view class="container-trade" style="min-height: calc(100vh - 20rpx );">
+ <view class="search-container m-t-12 flex" v-if="!(!list||list.length==0)&&true">
+ <view class="flex1 input">
+ <u-input placeholder="请输入分类名称" v-model="query.name">
+ <template slot="suffix">
+ <uni-icons color="#20613D" type="search" size="24" @tap="buttonSearchFlow"></uni-icons>
+ </template>
+ </u-input>
+ </view>
+ </view>
+ <view class="canteen-items" style="min-height: calc(100vh - 160rpx);">
+ <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 class="component-filter-container" style="padding-top: 12rpx;">
+ <view class="flex1">
+ 销量
+ </view>
+ <view class="flex1">
+ 颜色<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
+ </view>
+ <view class="flex1">
+ 筛选<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
+ </view>
+ </view>
+ <u-divider></u-divider>
+ <view class="flex">
+ <view v-for="(item,index) of listFilter" :key="item.id" class="canteen-item list"
+ @click.stop="toDetailList(item)">
+ <view class="m-r-10">
+ <image :src="item.imageUrl" mode="scaleToFill" class="cover"
+ @click.stop="previewImg(item.imageUrl)">
+ </image>
+ </view>
+ <view class="cateen_infos list">
+ <view class="title">{{item.name}}</view>
+ <view class="price">￥29.01-30.01</view>
+
+ <view class="desc">在售14410扎</view>
+ <!-- <view class="icons flex">
+ <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"
+ @click="mulnum(item)"></uni-icons>
+ <view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{item.shopnum}}</view>
+ <uni-icons type="plus-filled" size="32" @click="addnum(item)"></uni-icons>
+ </view> -->
+ </view>
+ <view style="padding-bottom:100rpx">
+ </view>
+ </view>
+
+ </view>
+ <footer-msg v-if="query.block&&query.schoolArea"
+ :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
+
+ </view>
+ </view>
+
+ </view>
+
+
+
+ <view style="min-height:200rpx">
+ </view>
+ <common-footer flg="1"></common-footer>
+
+ </view>
+</template>
+
+<script>
+ import {
+ mapState
+ } from 'vuex'
+ export default {
+ data() {
+ return {
+ list: [],
+ showpop: false,
+ query: {
+ name: '',
+ categoryId: '',
+ },
+
+ }
+ },
+ onPullDownRefresh() {
+ this.$http.request('get', '/api/customer/flower/category/tree', {}).then(res => {
+ var data = res.data
+ this.list = data || []
+ if (this.list.length > 0) {
+ this.query.categoryId = this.list[0].id || ''
+ }
+ }).finally(() => {
+ uni.stopPullDownRefresh()
+ })
+ },
+ async onLoad() {
+
+ //加载分类
+ this.$http.request('get', '/api/customer/flower/category/tree', {}).then(res => {
+ var data = res.data
+ this.list = data || []
+ if (this.list.length > 0) {
+ this.query.categoryId = this.list[0].id || ''
+ }
+ })
+ },
+ methods: {
+ buttonSearchFlow() {
+ //根据名称查询
+ 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 || ''
+ } else {
+ this.query.categoryId = ''
+ }
+ }).finally(() => {
+ this.$message.hideLoading()
+ })
+ },
+ toDetailList(item) {
+ //去商品列表页面
+ uni.navigateTo({
+ url: `/sub_pages/customer/trade/list?categoryId=${item.id}`
+ })
+ },
+ changeType(item) {
+ this.query.categoryId = item.id || ''
+ },
+
+
+ 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 - 300rpx);
+ max-height: calc(100vh - 300rpx);
+ overflow-y: scroll;
+ margin-right: 16rpx;
+
+ .type-item {
+ text-align: center;
+ font-weight: 400;
+ font-size: 28rpx;
+ color: #000000;
+ 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;
+ height: 266rpx;
+ background: #FFFFFF;
+ margin-bottom: 44rpx;
+ 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;
+ }
+
+ .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: center;
+ }
+
+
+
+
+
+ }
+
+ .canteen-item-container {
+ width: 100%;
+ min-height: 300rpx;
+ max-height: calc(100vh - 200rpx);
+ overflow-y: scroll;
+ }
+
+ .canteen-item:nth-child(3n+1) {
+ margin-left: 0rpx;
+ margin-right: 15rpx;
+ }
+
+ .canteen-item:nth-child(3n+2) {
+ margin-left: 15rpx;
+ margin-right: 15rpx;
+ }
+
+ .canteen-item:nth-child(3n+3) {
+ margin-left: 15rpx;
+ margin-right: 0rpx;
+ }
+ }
+
+ .canteen-footer-shop {
+ position: absolute;
+ position: fixed;
+ left: 30rpx;
+ bottom: 30rpx;
+ }
+
+
+
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3