From 891b5db055a1d27c6bda2e9700aa57f8bacd7cd2 Mon Sep 17 00:00:00 2001
From: xuxueyang <xuxy@fengyuntec.com>
Date: 星期四, 15 八月 2024 09:58:44 +0800
Subject: [PATCH] add 部分ui
---
sub_pages/customer/trade/list.vue | 254 ++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 214 insertions(+), 40 deletions(-)
diff --git a/sub_pages/customer/trade/list.vue b/sub_pages/customer/trade/list.vue
index 9e4cc2d..6cd22bc 100644
--- a/sub_pages/customer/trade/list.vue
+++ b/sub_pages/customer/trade/list.vue
@@ -4,8 +4,10 @@
<view class="category-detail flex" v-if="query.category">
<view class="flex1 info">
<view class="title flex">
- {{categoryInfo.name||'-'}}
- <image src="../../../static/common/icon-kf.png" class="icon-kf m-l-15 img100"></image>
+ <button open-type="contact" class="component-button-contact">
+ {{categoryInfo.name||'-'}}
+ <image src="../../../static/common/icon-kf.png" class="icon-kf m-l-15 img100"></image>
+ </button>
</view>
<view class="desc">
规格：{{categoryInfo.unit || '暂无'}}
@@ -34,11 +36,12 @@
<view>
<!-- 查询条件 -->
<view class="component-filter-container">
- <view class="flex1" @click.stop="order_show=true">
- {{ query.columnStr || '排序' }}
+ <!-- order_show=true -->
+ <view class="flex1" @click.stop="$refs.popup_column.open()">
+ 排序{{ query.columnStr&&('-'+query.columnStr) || '' }}
<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
</view>
- <view class="flex1" @click.stop="level_show=true">
+ <view class="flex1" @click.stop="$refs.popup_level.open()">
{{ query.levelStr || '级别' }}
<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
</view>
@@ -59,7 +62,7 @@
<view class="component-shop-item flex" v-for="(item,index) of list" :key="index">
<view class="img" @click.stop="toDetail(item)">
- <image class="img img100" :src="item.cover">
+ <image class="img img100" :class="[!item.stock?'component-stock-zero':'']" :src="item.cover">
</image>
<view class="level">
{{item.levelStr||''}}
@@ -72,6 +75,15 @@
{{item.name||'-'}}
<view class="price">
￥{{item.price||0}}元/扎
+ </view>
+ </view>
+ <view class="tags" v-if="item.tags">
+ <!-- <view class="tag red">限时抢购</view>
+ <view class="tag green">品质严选</view> -->
+ <view class="tag red" v-for="(tag,k) of item.tagArr" :class="[k===0?'red':'green']"
+ :key="tag">{{
+ tag
+ }}
</view>
</view>
<view class="shop-name">
@@ -103,8 +115,7 @@
</view>
- <view class="icon-shop" v-if="list&&list.length>0"
- @click="goto('/sub_pages/customer/shopping/shopping',true)">
+ <view class="icon-shop" v-if="list&&list.length>0" @click="toShopping">
<!-- 购物图标 -->
<!-- 如果有购买的东西，就要附带数字了 -->
<view v-if="shoptotal>0" class="number">
@@ -122,6 +133,55 @@
<u-picker :show="order_show" @confirm="select_order" keyName="label" :columns="order_columns"
@cancel="order_show=false"></u-picker>
+ <uni-popup ref="popup_level" type="bottom">
+ <view class="component-popup_input_all">
+ <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">点击选择不同级别</view>
+ <view v-for="(item,i) in level_columns" :key="i" class="m-t-20">
+ <view class="m-t-12 flex value-items">
+ <view class="value-item" @click="()=>{
+ if(each.value!==query.value){
+ query.level = each.value
+ query.levelStr = each.label
+ refreshList('post')
+ $refs.popup_level.close()
+ }
+ }" :class="[query.level==each.value?'cur':'']" v-for="(each, j) in item" :key="j">
+ {{ each.label || '-' }}
+ </view>
+ </view>
+ </view>
+ <view class="button-space"></view>
+ <view>
+ <view class="button-green" @click="$refs.popup_level.close()">关闭
+ </view>
+ </view>
+ </view>
+ </uni-popup>
+ <uni-popup ref="popup_column" type="bottom">
+ <view class="component-popup_input_all">
+ <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">点击选择不同排序</view>
+ <view v-for="(item,i) in order_columns" :key="i" class="m-t-20">
+ <view class="m-t-12 flex value-items">
+ <view class="value-item" @click="()=>{
+ if(each.value!==query.value){
+ query.column = each.value
+ query.columnStr = each.label
+ refreshList('post')
+ $refs.popup_column.close()
+ }
+ }" :class="[query.column==each.value?'cur':'']" v-for="(each, j) in item" :key="j">
+ {{ each.label || '-' }}
+ </view>
+ </view>
+ </view>
+ <view class="button-space"></view>
+ <view>
+ <view class="button-green" @click="$refs.popup_column.close()">关闭
+ </view>
+ </view>
+ </view>
+ </uni-popup>
+
<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>
@@ -129,8 +189,8 @@
<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">
+ <view class="value-item" @click="updateValue(item,each)"
+ :class="[item.value.indexOf(each)>=0?'cur':'']" v-for="(each, j) in item.values" :key="j">
{{ each || '-' }}
</view>
</view>
@@ -138,12 +198,13 @@
<view class="button-space"></view>
<view>
<view class="button-green"
- style="background-color: #fff;border: 2rpx solid #666; color: #666;width: 200rpx;left: 40rpx;right: unset;"
- @click="closeParamPopAndQuery">
- 查询
+ style="background-color: #fff;border: 2rpx solid #666; color: #666;min-width: 240rpx;left: 40rpx;right: unset;"
+ @click="closeParamPop">
+ 关闭
</view>
- <view class="button-green" style="width: 200rpx;right: 40rpx;left: unset;" @click="closeParamPop">关闭
+ <view class="button-green" style="min-width: 240rpx;right: 40rpx;left: unset;"
+ @click="closeParamPopAndQuery">查询
</view>
</view>
</view>
@@ -162,11 +223,15 @@
name: '',
category: '',
zoneId: '',
+
+
+ params: [],
+ supplierName: '',
+ columnStr: '',
+ column: '',
levelStr: '',
level: '',
- column: '',
- params: [],
- columnStr: '',
+ supplierId: '',
},
categoryInfo: {},
params: [],
@@ -184,15 +249,48 @@
]
}
},
+ // #ifdef PUB_CUSTOMER
+ onShareAppMessage() {
+ let that = this;
+ var name = that.currentInfo.customerDTO && that.currentInfo.customerDTO.name || that.currentInfo.supplierDTO &&
+ that.currentInfo.supplierDTO.name || that.currentInfo.partnerDTO && that.currentInfo.partnerDTO.name || ''
+ var url =
+ `/sub_pages/customer/trade/list?categoryId=${this.query.category}&zoneId=${this.query.zoneId}&name=${this.query.name}&supplierName=${this.query.supplierName}&shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数
+ return {
+ title: "花满芫-商品列表",
+ path: url,
+ }
+ },
+ onShareTimeline() {
+ let that = this;
+ var name = that.currentInfo.customerDTO && that.currentInfo.customerDTO.name || that.currentInfo.supplierDTO &&
+ that.currentInfo.supplierDTO.name || that.currentInfo.partnerDTO && that.currentInfo.partnerDTO.name || ''
+ var url =
+ `/sub_pages/customer/trade/list?categoryId=${this.query.category}&zoneId=${this.query.zoneId}&name=${this.query.name}&supplierName=${this.query.supplierName}&shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数
+ return {
+ title: "花满芫-商品列表",
+ path: url,
+ }
+ },
+ // #endif
async onLoad(options) {
// this.list = [{},{}]
console.log('options', options)
- this.query.category = options.categoryId || ''
+ this.query.category = options.categoryId || options.category || ''
this.query.zoneId = options.zoneId || ''
this.query.name = options.name || ''
+ this.query.supplierName = options.supplierName || ''
+ this.query.supplierId = options.supplierId || ''
+
+
if (this.query.name) {
uni.setNavigationBarTitle({
title: '商品列表-' + this.query.name
+ })
+ }
+ if (this.query.supplierName) {
+ uni.setNavigationBarTitle({
+ title: '商品列表-' + this.query.supplierName
})
}
this.listApi = '/api/customer/flower/list'
@@ -230,7 +328,6 @@
// this.
},
onReachBottom() {
- this.page.current += 1
this.getMore('post')
},
async onPullDownRefresh() {
@@ -238,9 +335,28 @@
await this.getList('post')
uni.stopPullDownRefresh()
},
+ async onShow() {
+ if (this.sign['shopnum']) {
+ await this.$store.dispatch('sign_clear', 'shopnum');
+ //重新获取商品数目
+ //只需要刷新列表的部分信息即可
+ this.getList('post')
+ }
+ this.refreshShopNum()
+ },
methods: {
- async refreshShopNum() {
- this.shoptotal = await this.$store.dispatch('countShopping');
+ getList_after() {
+ if (this.list) {
+ for (var item of this.list) {
+ item.tagArr = []
+ if (item.tags) {
+ item.tagArr = item.tags.split(",") || []
+ }
+ }
+ }
+ },
+ async refreshShopNum() {
+ this.shoptotal = await this.$store.dispatch('countShopping');
},
async getDetail() {
this.$message.showLoading()
@@ -259,8 +375,19 @@
}
},
updateValue(item, value) {
- item.value = value
- this.$set(item, 'value', value)
+ // item.value = value
+ // this.$set(item, 'value', value)
+ if (item.name == '优点' || item.name === '缺点') {
+ if (item.value.indexOf(value) < 0) {
+ item.value.push(value)
+ } else {
+ item.value.splice(item.value.indexOf(value), 1)
+ }
+ } else {
+ //单选
+ item.value = [value]
+ }
+
this.$forceUpdate()
},
closeParamPop() {
@@ -271,10 +398,10 @@
//设置参数
this.query.params = []
for (var param of this.params) {
- if (param.value) {
+ if (param.value && param.value.length > 0) {
this.query.params.push({
id: param.id,
- value: param.value
+ value: param.value.join(',')
})
}
}
@@ -283,7 +410,7 @@
async showSelectParams() {
//得有分类才有参数
this.$message.showLoading()
- const res = await this.$http.request('get', '/api/supplier/flower/params', {
+ const res = await this.$http.request('get', '/api/customer/flower/params', {
params: {
categoryId: this.query.category
}
@@ -292,6 +419,13 @@
if (res.code === 0) {
// this.columns_params = res.data || []
this.params = res.data || []
+ for (var k of this.params) {
+ if (!k.value) {
+ k.value = []
+ } else {
+ k.value = k.value.split(',') || []
+ }
+ }
this.$refs.popup_param.open()
}
@@ -311,6 +445,19 @@
this.refreshList('post')
},
+ toShopping() {
+ if (!this.currentInfo.id) {
+ // await this.$message.confirm('请前往登录')
+ uni.navigateTo({
+ url: '/pages/login/supplier-login?source=jump'
+ })
+ return
+ }
+ //直接强制购物车
+ uni.reLaunch({
+ url: '/sub_pages/customer/shopping/shopping'
+ })
+ },
toDetail(item) {
uni.navigateTo({
url: `/sub_pages/customer/trade/detail?id=${item.id}`
@@ -326,23 +473,23 @@
// },
async addnum(item, addnum) {
if (!this.currentInfo.id) {
- await this.$message.confirm('请前往登录')
+ // await this.$message.confirm('请前往登录')
uni.navigateTo({
- url: '/pages/user/supplier-user'
+ url: '/pages/login/supplier-login?source=jump'
})
return
}
if (!item.stock) {
item.stock = 0
- }
- if (!item.shopnum) {
- item.shopnum = 0
}
- if (item.shopnum + addnum > item.stock) {
- this.$message.showToast('库存不足，无法添加')
+ if (!item.shopnum) {
+ item.shopnum = 0
+ }
+ if (addnum > 0 & item.shopnum + addnum > item.stock) {
+ this.$message.showToast('库存不足，无法修改')
return
}
-
+
if (item.shopnum + addnum >= 0) {
} else {
@@ -351,7 +498,7 @@
this.$message.showLoading()
const {
code
- } = await http.request('post', '/api/customer/flower/cart/change-num', {
+ } = await this.$http.request('post', '/api/customer/flower/cart/change-num', {
data: {
id: item.id,
num: addnum
@@ -359,11 +506,11 @@
})
this.$message.hideLoading()
if (code === 0) {
- item.shopnum += addnum
- this.$forceUpdate()
-
- this.refreshShopNum()
-
+ item.shopnum += addnum
+ this.$forceUpdate()
+
+ this.refreshShopNum()
+
}
},
}
@@ -373,6 +520,31 @@
<style lang="scss">
.trade-list {
padding: 24rpx 30rpx;
+
+ .tags {
+ margin-top: 12rpx;
+ display: flex;
+
+ .tag {
+ min-width: 60rpx;
+ padding-left: 10rpx;
+ padding-right: 10rpx;
+ line-height: 30rpx;
+ background: #FEE6E6;
+ border-radius: 10rpx;
+ font-size: 22rpx;
+ color: #CD1212;
+ margin-right: 12rpx;
+ text-align: center;
+ }
+
+ .tag.green {
+ color: rgba(110, 159, 102, 1);
+ background: rgba(202, 229, 214, 1);
+ border-radius: 10rpx;
+ // opacity: 0.57;
+ }
+ }
.category-detail {
padding: 22rpx 38rpx;
@@ -402,6 +574,8 @@
}
}
+
+
.info-price {
padding: 22rpx;
text-align: center;
--
Gitblit v1.9.3