From 4250e140336ac40e10ab4c3b650030f82098ca92 Mon Sep 17 00:00:00 2001 From: xuxy <1059738716@qq.com> Date: 星期六, 27 七月 2024 21:37:07 +0800 Subject: [PATCH] update bug和样式 --- sub_pages/customer/self/collect.vue | 199 ++++++++++++++++++++++++++++++++++--------------- 1 files changed, 138 insertions(+), 61 deletions(-) diff --git a/sub_pages/customer/self/collect.vue b/sub_pages/customer/self/collect.vue index 3611207..3a6706f 100644 --- a/sub_pages/customer/self/collect.vue +++ b/sub_pages/customer/self/collect.vue @@ -1,64 +1,3 @@ -<template> - <view class="page-collect p20"> - <view class="search-container bg-white flex"> - <view class="flex1 input"> - <u-input placeholder="请输入花名" v-model="query.name"> - <template slot="suffix"> - <uni-icons color="#20613D" type="search" size="24" @tap="refreshList"></uni-icons> - </template> - </u-input> - </view> - </view> - <view class="component-filter-container p10 bg-white"> - <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> - <no-data v-if="!list||list.length===0" style="width: 100%;"></no-data> - - - <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> - - <view class="trade-list-container"> - <view class="trade-info-container" v-for="(dto,index) of list" :key="index"> - <view class="title"> - <view class="level m-r-15">{{ dto.levelStr || '-' }}级</view> - <view class=""> - {{ dto.name || '-' }} - </view> - </view> - <view class="desc m-t-12"> - <view class="m-r-15">已售:{{ dto.sales || 0 }}</view> - <view class="m-r-15">剩余:{{ dto.stock || 0 }}</view> - <view class=" ">{{ dto.unit || '-' }}支/扎</view> - </view> - <view class="flex m-t-12"> - <view class="price m-r-a"> - <span class="num">{{ dto.price || '-' }}</span> - 元/扎 - </view> - <view class="m-l-a m-r-15"> - <image src="../../../static/common/icon-kf.png" class="icon-kf m-l-15 img100"></image> - - </view> - <view class="m-r-0 gwc" @click="submitShopping(dto)"> - + 购物车 - </view> - </view> - </view> - - </view> - </view> -</template> - <script> export default { async onPullDownRefresh() { @@ -116,6 +55,11 @@ }) }, methods: { + toDetail(item) { + uni.navigateTo({ + url: `/sub_pages/customer/trade/detail?id=${item.id}` + }) + }, async submitShopping(dto) { //提交到购物车中 this.$message.showLoading() @@ -140,6 +84,73 @@ } </script> +<template> + <view class="page-collect " style="background: #E1F0E7;"> + <view style="padding-bottom: 0rpx;" class="p20"> + <view class="search-container flex"> + <view class="flex1 input"> + <u-input placeholder="请输入花名" v-model="query.name"> + <template slot="suffix"> + <uni-icons color="#20613D" type="search" size="24" @tap="refreshList"></uni-icons> + </template> + </u-input> + </view> + </view> + <view class="component-filter-container p10"> + <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> + </view> + + <no-data v-if="!list||list.length===0" style="width: 100%;"></no-data> + + + <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> + + <view class="trade-list-container"> + <view class="trade-info-container flex" v-for="(dto,index) of list" :key="index" @click.stop="toDetail(dto)"> + <image class="img img100 br-4 m-r-10" :src="dto.url||dto.cover"></image> + <view class="flex1"> + <view class="flex"> + <view class="title"> + <span class="m-r-5" style="display: inline-block;" + v-if="item.categoryStr">{{item.categoryStr||''}}</span> + <span v-if="item.levelStr" class="m-r-5" + style="display: inline-block;">{{ item.levelStr || '' }}</span> + {{ dto.name || '-' }} + </view> + <view class="price m-l-a m-r-0"> + ¥{{ dto.price || '-' }}/扎 + </view> + </view> + <view class="flex"> + <view class="desc m-t-12 flex"> + <view class="m-r-15">剩余:{{ dto.stock || 0 }}</view> + <view class="m-r-15">颜色:{{ dto.color || '-' }}</view> + </view> + <view class="button-icons flex m-l-a m-r-0 m-t-20"> + <view class="m-r-0 gwc" @click.stop="submitShopping(dto)"> + + 购物车 + </view> + </view> + </view> + </view> + + </view> + + </view> + </view> +</template> + <style lang="scss" scoped> .page-collect { .search-container { @@ -162,5 +173,71 @@ line-height: 70rpx !important; } } + + .trade-info-container { + background-color: #fff; + border-top-right-radius: 40rpx; + border-top-left-radius: 40rpx; + padding: 30rpx; + overflow: hidden; + min-height: calc(100vh - 300rpx); + overflow-y: scroll; + + .img { + width: 124rpx; + height: 124rpx; + } + + .title { + font-weight: 600; + font-size: 28rpx; + + color: #000000; + line-height: 40rpx; + + .level { + color: #20613D; + } + } + + .price { + font-weight: 400; + font-size: 28rpx; + color: #CF0000; + line-height: 40rpx; + } + + .desc { + font-weight: 400; + font-size: 24rpx; + color: #666666; + line-height: 34rpx; + } + + + .button-icons { + //position: absolute; + //z-index: 10; + line-height: 40rpx; + + .curnums { + margin-left: 10rpx; + margin-right: 10rpx; + } + } + + .gwc { + width: 168rpx; + height: 48rpx; + border-radius: 30rpx; + border: 2rpx solid #20613D; + font-size: 24rpx; + color: #20613D; + line-height: 48rpx; + text-align: center; + } + + } + } </style> \ No newline at end of file -- Gitblit v1.9.3