From e7731f1cf08331d23cd0d27549025a2642caa9ab Mon Sep 17 00:00:00 2001
From: xuxueyang <xuxy@fengyuntec.com>
Date: 星期三, 24 七月 2024 18:58:39 +0800
Subject: [PATCH] update todo还差个订单详情的商品列表展示
---
sub_pages/customer/trade/list.vue | 615 +++++++++++++++++++++++++++++++++----------------------
1 files changed, 370 insertions(+), 245 deletions(-)
diff --git a/sub_pages/customer/trade/list.vue b/sub_pages/customer/trade/list.vue
index 21f5466..3f7e9f7 100644
--- a/sub_pages/customer/trade/list.vue
+++ b/sub_pages/customer/trade/list.vue
@@ -1,268 +1,393 @@
<template>
- <!-- 列表页面 -->
- <view class="trade-list">
- <view class="category-detail flex">
- <view class="flex1 info">
- <view class="title flex">
- <view>牛油果泡泡</view>
- <view>
- <image src="../../../static/common/icon-kf.png" class="icon-kf m-l-15 img100"></image>
-
- </view>
- </view>
- <view class="desc">
- 规格：10支/扎
- </view>
- <view class="desc">
- 估重：1.3kg/扎
- </view>
- <view class="desc">
- 包袋：棉袋
- </view>
- </view>
- <view class="info-price">
- <view class="title">当日均价</view>
- <view class="price">19.66</view>
- <view class="flex desc">
- <view class="m-l-a m-r-5">+0.76</view>
- <view class="m-r-a m-l-5">+4.02%</view>
- </view>
- </view>
- </view>
- <view class="" style="min-height: calc(100vh - 260rpx);">
- <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
- <view v-else>
- <!-- 查询条件 -->
- <view class="component-filter-container">
- <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 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 class="flex1">
- 筛选<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
- </view>
- </view>
- </view>
- <view class="component-shop-item flex" v-for="(item,index) of list" :key="index"
- @click="toDetail(item)">
- <view class="img">
- <image class="img img100"
- src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/ff/fff3027bd0a146478fd1f0aae816a028%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240710224139.png">
- </image>
- <view class="level">
- A级
- </view>
- </view>
+ <!-- 列表页面 -->
+ <view class="trade-list">
+ <view class="category-detail flex">
+ <view class="flex1 info">
+ <view class="title flex">
+ <view>牛油果泡泡</view>
+ <view>
+ <image src="../../../static/common/icon-kf.png" class="icon-kf m-l-15 img100"></image>
- <view class="m-l-12 info-container flex1">
- <view class="title">
- 橙色芭比
- <view class="price">
- ￥6.60/扎
- </view>
- </view>
- <view class="shop-name">
- 牛油果泡泡·白色
- </view>
- <view class="other-info flex">
- <view class="m-r-15">
- 已售:7
- </view>
- <view class="m-r-15">
- 剩余:13
- </view>
- <view class="m-r-15">
- 1支/扎
- </view>
- </view>
- <view class="bottom-buttons flex">
+ </view>
+ </view>
+ <view class="desc">
+ 规格：10支/扎
+ </view>
+ <view class="desc">
+ 估重：1.3kg/扎
+ </view>
+ <view class="desc">
+ 包袋：棉袋
+ </view>
+ </view>
+ <view class="info-price">
+ <view class="title">当日均价</view>
+ <view class="price">19.66</view>
+ <view class="flex desc">
+ <view class="m-l-a m-r-5">+0.76</view>
+ <view class="m-r-a m-l-5">+4.02%</view>
+ </view>
+ </view>
+ </view>
+ <view class="" style="min-height: calc(100vh - 260rpx);">
+ <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
+ <view v-else>
+ <!-- 查询条件 -->
+ <view class="component-filter-container">
+ <view class="flex1" @click.stop="order_show=true">
+ {{ this.query.columnStr || '排序' }}
+ <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
+ </view>
+ <view class="flex1" @click.stop="level_show=true">
+ {{ this.query.levelStr || '级别' }}
+ <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"
+ ></image>
+ </view>
- <view class="icons flex">
- <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"
- @click.stop="mulnum(item)"></uni-icons>
- <view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{item.shopnum}}</view>
- <uni-icons v-if="!item.shopnum||item.shopnum<=99" type="plus-filled" size="32"
- @click.stop="addnum(item)"></uni-icons>
- </view>
- </view>
- </view>
- </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 class="flex1" @click="showSelectParams" v-if="query.category">
+ 筛选
+ <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
+ </view>
+ </view>
+ </view>
+
+ <view class="component-shop-item flex" v-for="(item,index) of list" :key="index"
+ @click="toDetail(item)">
+ <view class="img">
+ <image class="img img100"
+ src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/ff/fff3027bd0a146478fd1f0aae816a028%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240710224139.png">
+ </image>
+ <view class="level">
+ A级
+ </view>
+ </view>
+
+ <view class="m-l-12 info-container flex1">
+ <view class="title">
+ 橙色芭比
+ <view class="price">
+ ￥6.60/扎
+ </view>
+ </view>
+ <view class="shop-name">
+ 牛油果泡泡·白色
+ </view>
+ <view class="other-info flex">
+ <view class="m-r-15">
+ 已售:7
+ </view>
+ <view class="m-r-15">
+ 剩余:13
+ </view>
+ <view class="m-r-15">
+ 1支/扎
+ </view>
+ </view>
+ <view class="bottom-buttons flex">
+
+ <view class="icons flex">
+ <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"
+ @click.stop="mulnum(item)"></uni-icons>
+ <view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{ item.shopnum }}</view>
+ <uni-icons v-if="!item.shopnum||item.shopnum<=99" type="plus-filled" size="32"
+ @click.stop="addnum(item)"></uni-icons>
+ </view>
+ </view>
+ </view>
+ </view>
- <view class="icon-shop" v-if="list&&list.length>0">
- <!-- 购物图标 -->
- <!-- 如果有购买的东西，就要附带数字了 -->
- <view v-if="shoptotal>0" class="number">
- {{shoptotal}}
- </view>
- </view>
- </view>
+ <view class="icon-shop" v-if="list&&list.length>0">
+ <!-- 购物图标 -->
+ <!-- 如果有购买的东西，就要附带数字了 -->
+ <view v-if="shoptotal>0" class="number">
+ {{ shoptotal }}
+ </view>
+ </view>
+ </view>
- <!-- 判断是否到底了，自动吧 -->
- <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
-
-
-
- </view>
+ <!-- 判断是否到底了，自动吧 -->
+ <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
+
+
+ <u-picker :show="level_show" @confirm="select_level" keyName="label" :columns="level_columns"
+ @cancel="level_show=false"></u-picker>
+ <u-picker :show="order_show" @confirm="select_order" keyName="label" :columns="order_columns"
+ @cancel="order_show=false"></u-picker>
+
+ <uni-popup ref="popup_param" type="bottom">
+ <view class="component-popup_input_all" v-if="params">
+ <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">商品参数设置</view>
+ <!-- 输入框-->
+ <view v-for="(item,i) in 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 class="button-space"></view>
+ <view class="button-green" style="background-color: #fff;bottom: 160rpx;color: #000"
+ @click="closeParamPopAndQuery">
+ 查询
+ </view>
+
+ <view class="button-green" @click="closeParamPop">关闭</view>
+ </view>
+ </uni-popup>
+
+ </view>
</template>
<script>
- export default {
- data() {
- return {
- query: {
- category: '',
- },
- shoptotal:0,
- list:[{},{},{}]
- }
- },
- async onLoad(options) {
- // this.list = [{},{}]
- console.log('options', options)
- this.query.category = options.categoryId || ''
- this.listApi = '/api/customer/flower/list'
- this.getList()
+export default {
+ data() {
+ return {
+ query: {
+ category: '',
+ zoneId: '',
+ levelStr: '',
+ level: '',
+ column: '',
+ params: [],
+ columnStr: '',
+ },
+ params: [],
- // await this.getList('post')
- // this.
- },
- onReachBottom() {
- this.page.current += 1
- this.getMore('post')
- },
- async onPullDownRefresh() {
- this.page.current = 1
- await this.getList('post')
- uni.stopPullDownRefresh()
- },
- methods: {
- toDetail(item) {
- uni.navigateTo({
- url: `/sub_pages/customer/trade/detail?id=${item.id}`
- })
- },
- mulnum(item) {
- if (item.shopnum > 0) {
- item.shopnum -= 1
- }
- this.shoptotal -= 1
- this.$forceUpdate()
-
- },
- addnum(item) {
- if (item.shopnum) {
- item.shopnum += 1
- } else {
- item.shopnum = 1
- }
- this.shoptotal += 1
- this.$forceUpdate()
- },
- }
- }
+ shoptotal: 0,
+ list: [],
+ level_show: false,
+ level_columns: [[]],
+
+ order_show: false,
+ order_columns: [[]]
+ }
+ },
+ async onLoad(options) {
+ // this.list = [{},{}]
+ console.log('options', options)
+ this.query.category = options.categoryId || ''
+ this.query.zoneId = options.zoneId || ''
+ this.listApi = '/api/customer/flower/list'
+ this.getList()
+ this.$http.request('get', '/api/code/value', {
+ params: {
+ type: 'FLOWER_LEVEL'
+ }
+ }).then(res => {
+ var data = res.data
+ this.level_columns = [data || []]
+ this.columns_levels[0].unshift({
+ label: '全部',
+ value: ''
+ })
+ })
+ this.$http.request('get', '/api/code/value', {
+ params: {
+ type: 'FLOWER_ORDER_BY'
+ }
+ }).then(res => {
+ var data = res.data
+ this.order_columns = [data || []]
+ this.order_columns[0].unshift({
+ label: '默认',
+ value: ''
+ })
+ })
+
+ // await this.getList('post')
+ // this.
+ },
+ onReachBottom() {
+ this.page.current += 1
+ this.getMore('post')
+ },
+ async onPullDownRefresh() {
+ this.page.current = 1
+ await this.getList('post')
+ uni.stopPullDownRefresh()
+ },
+ methods: {
+ updateValue(item, value) {
+ item.value = value
+ this.$set(item, 'value', value)
+ this.$forceUpdate()
+ },
+ closeParamPop() {
+ this.$refs.popup_param.close()
+ },
+ closeParamPopAndQuery() {
+ this.$refs.popup_param.close()
+ //设置参数
+ this.dto.params = []
+ for (var params of this.params) {
+ if (params.value) {
+ this.dto.params.push({
+ id: params.id,
+ value: params.value
+ })
+ }
+ }
+ this.refreshList('post')
+ },
+ async showSelectParams() {
+ //得有分类才有参数
+ this.$message.showLoading()
+ const res = await this.$http.request('get', '/api/supplier/flower/params', {
+ params: {
+ categoryId: this.dto.category
+ }
+ })
+ this.$message.hideLoading()
+ if (res.code === 0) {
+ // this.columns_params = res.data || []
+ this.dto.params = res.data || []
+ this.$refs.popup_param.open()
+ }
+
+ },
+ select_level(e) {
+ this.level_show = false
+ this.query.levelStr = e.value[0].label
+ this.query.level = e.value[0].value
+ this.refreshList('post')
+
+ },
+ select_order(e) {
+ this.order_show = false
+ this.query.columnStr = e.value[0].label
+ this.query.column = e.value[0].value
+ this.refreshList('post')
+
+ },
+ toDetail(item) {
+ uni.navigateTo({
+ url: `/sub_pages/customer/trade/detail?id=${item.id}`
+ })
+ },
+ mulnum(item) {
+ if (item.shopnum > 0) {
+ item.shopnum -= 1
+ }
+ this.shoptotal -= 1
+ this.$forceUpdate()
+
+ },
+ addnum(item) {
+ if (item.shopnum) {
+ item.shopnum += 1
+ } else {
+ item.shopnum = 1
+ }
+ this.shoptotal += 1
+ this.$forceUpdate()
+ },
+ }
+}
</script>
<style lang="scss">
- .trade-list {
- padding: 24rpx 30rpx;
+.trade-list {
+ padding: 24rpx 30rpx;
- .category-detail {
- padding: 22rpx 38rpx;
- margin-bottom: 10rpx;
- background-color: #E1F0E7;
- border-radius: 8rpx;
+ .category-detail {
+ padding: 22rpx 38rpx;
+ margin-bottom: 10rpx;
+ background-color: #E1F0E7;
+ border-radius: 8rpx;
- .info {
- .title {
- font-weight: 600;
- font-size: 36rpx;
- color: #000000;
- line-height: 50rpx;
- }
+ .info {
+ .title {
+ font-weight: 600;
+ font-size: 36rpx;
+ color: #000000;
+ line-height: 50rpx;
+ }
- .icon-kf {
- width: 44rpx;
- height: 44rpx;
- }
+ .icon-kf {
+ width: 44rpx;
+ height: 44rpx;
+ }
- .desc {
- font-weight: 400;
- font-size: 24rpx;
- color: #666666;
- line-height: 34rpx;
- margin-top: 8rpx;
- }
- }
+ .desc {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #666666;
+ line-height: 34rpx;
+ margin-top: 8rpx;
+ }
+ }
- .info-price {
- padding: 22rpx;
- text-align: center;
- background: #FFFFFF;
- border-radius: 8rpx;
- min-width: 260rpx;
- .title {
- font-weight: 400;
- font-size: 24rpx;
- color: #000000;
- line-height: 34rpx;
- }
+ .info-price {
+ padding: 22rpx;
+ text-align: center;
+ background: #FFFFFF;
+ border-radius: 8rpx;
+ min-width: 260rpx;
- .price {
- font-weight: 600;
- font-size: 32rpx;
- color: #BF0000;
- line-height: 44rpx;
- margin-top: 12rpx;
- }
+ .title {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #000000;
+ line-height: 34rpx;
+ }
- .desc {
- font-weight: 400;
- font-size: 24rpx;
- color: #666666;
- line-height: 34rpx;
- margin-top: 12rpx;
- }
- }
- }
+ .price {
+ font-weight: 600;
+ font-size: 32rpx;
+ color: #BF0000;
+ line-height: 44rpx;
+ margin-top: 12rpx;
+ }
+
+ .desc {
+ font-weight: 400;
+ font-size: 24rpx;
+ color: #666666;
+ line-height: 34rpx;
+ margin-top: 12rpx;
+ }
+ }
+ }
- .icon-shop {
- position: absolute;
- position: fixed;
-
- background-image: url('../../../static/images/customer/gwc.png');
- width: 140rpx;
- height: 140rpx;
- // box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.16);
- border-radius: 50%;
- right: 40rpx;
- bottom: 300rpx;
- background-size: 100% 100%;
-
- .number {
- width: 30rpx;
- height: 30rpx;
- background: #F20000;
- line-height: 30rpx;
- text-align: center;
- position: absolute;
- right: 14rpx;
- top: 14rpx;
- color: #FFFFFF;
- border-radius: 50%;
- font-size: 24rpx;
- }
-
- }
-
- }
+ .icon-shop {
+ position: absolute;
+ position: fixed;
+
+ background-image: url('../../../static/images/customer/gwc.png');
+ width: 140rpx;
+ height: 140rpx;
+ // box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.16);
+ border-radius: 50%;
+ right: 40rpx;
+ bottom: 300rpx;
+ background-size: 100% 100%;
+
+ .number {
+ width: 30rpx;
+ height: 30rpx;
+ background: #F20000;
+ line-height: 30rpx;
+ text-align: center;
+ position: absolute;
+ right: 14rpx;
+ top: 14rpx;
+ color: #FFFFFF;
+ border-radius: 50%;
+ font-size: 24rpx;
+ }
+
+ }
+
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3