From f926e6141482ca1c7ea8de58c06736e7d93abf9f Mon Sep 17 00:00:00 2001 From: 陶杰 <1378534974@qq.com> Date: 星期一, 13 一月 2025 11:37:53 +0800 Subject: [PATCH] 1.在线客服-点击事件修改 --- sub_pages/customer/trade/trade.vue | 802 ++++++++++++++++++++++++++------------------------------ 1 files changed, 375 insertions(+), 427 deletions(-) diff --git a/sub_pages/customer/trade/trade.vue b/sub_pages/customer/trade/trade.vue index 523f096..f0821ba 100644 --- a/sub_pages/customer/trade/trade.vue +++ b/sub_pages/customer/trade/trade.vue @@ -1,47 +1,88 @@ <template> - <view class="container-canteen" style="min-height: calc(100vh - 20rpx );"> + <view class="container-trade" + :style="{'min-height':hidefooter?'':'calc(100vh - 20rpx)','max-height':hidefooter?'':'calc(100vh - 20rpx)'}"> + <view class="search-container m-t-12 flex" v-if="!hidefooter"> + <!-- <view class="flex m-r-20"> + <view class="m-r-10" style="line-height: 80rpx;" @click="changeSearchType"> + {{type=='category'?'按分类':'搜店铺'}} + </view> + <u-icon name="arrow-down"></u-icon> - <view class="canteen-items" style="min-height: calc(100vh - 360rpx);"> + </view> --> + <view class="flex m-r-20"> + <um-dropdown width="200rpx" style="line-height: 80rpx;" @change="fnChange" :defaultIndex="def" + rangeKey="label" :optionList="typeList"></um-dropdown> + </view> + + <view class="flex1 input"> + <!-- <u-input :placeholder="type==='category'?'请输入分类名称':'请输入店铺名称'" v-model="query.name" clearable + @confirm="buttonSearchFlow" @clear="()=>{ + $nextTick(()=>{buttonSearchFlow()}) + }"> + <template slot="suffix"> + <uni-icons color="#20613D" type="search" size="24" @click="buttonSearchFlow"></uni-icons> + </template> + </u-input> --> + <u-input :placeholder="search_home_placeholder" v-model="query.name" clearable + @confirm="buttonSearchFlow" @clear="()=>{ + $nextTick(()=>{buttonSearchFlow()}) + }"> + + + <template slot="suffix"> + <uni-icons color="#20613D" type="search" size="24" @click="buttonSearchFlow"></uni-icons> + </template> + </u-input> + + </view> + </view> + <view class="canteen-items" + :style="{'min-height':hidefooter?'':'calc(100vh - 340rpx)','max-height':hidefooter?'':'calc(100vh - 340rpx)'}"> <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"> + <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="p10 canteen-item list" - style="display: flex;flex-wrap: inherit;"> + <view v-for="(item,index) of listFilter" :key="item.id" + class="canteen-item list flex flex-wrap-normal" @click.stop="toDetailList(item)"> <view class="m-r-10"> - <image :src="item.cover" mode="scaleToFill" class="cover" @click="previewImg(item.cover)"> + <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="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 class="flex1"> + <view class="cateen_infos list"> + <view class="title flex"> + <view style="max-width: 190rpx;text-align: left;word-break: break-all;">{{item.name}}</view> + <view class="desc m-l-a m-r-0">在售 {{item.stock||'0'}} 扎</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 class="price"> + <view>¥<span class="p">{{item.priceLowMember || 0}}</span>~<span + class="p">{{item.priceHighMember||0}}</span>/扎</view> </view> + <view class="flex info"> + <!-- <view class="m-r-15"> + 库存:{{item.stock || 0}} + </view> --> + <view> + {{item.unit || ''}} + </view> + </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 style="padding-bottom:40rpx"> + </view> + <footer-msg v-if="!hidefooter" :more="page.total>0&&page.total>page.current*page.size"></footer-msg> </view> </view> @@ -50,10 +91,30 @@ - <view style="min-height:200rpx"> + <view style="min-height:100rpx" v-if="!hidefooter"> </view> - <common-footer flg="1"></common-footer> + <common-footer flg="1" v-if="!hidefooter">></common-footer> + <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> @@ -62,201 +123,237 @@ mapState } from 'vuex' export default { + props: { + hidefooter: false, + catgoryTree: [], + supplierId: '', + }, data() { return { list: [], showpop: false, query: { name: '', - // status:'', - schoolArea: '', - schoolAreaStr: '', - block: '', - blockStr: '', - typeId: '', + categoryId: '', }, - types: [{ - name: '全部', - id: '' - }], - schools: [], - schoolIndex: -1, - blockIndex: -1, - blocks: [], - shoptotal: 0, - cal: 0, + currentCategory: {}, + type: 'category', //supplier + def: 0, + typeList: [{ + label: '按分类', + value: 'category', + }, + { + label: '按店铺', + value: 'supplier', + }, + ], + search_home_placeholder: "请输入分类", + + } }, - async onLoad() { - // this.list = [{ - // 'shopnum': 0 - // }, { - // 'shopnum': 1 - // }] - + // #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 = + `/pages/home/home?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 = + `/pages/home/home?shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数 + return { + title: "花满芫", + path: url, + } + }, + // #endif + 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 || '' + this.currentCategory = this.list[0] || {} + } + }).finally(() => { + uni.stopPullDownRefresh() + }) + }, + async onLoad(options) { + let selectId = options.categoryId || '' //加载分类 - 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 + this.$message.showLoading() + this.$http.request('get', '/api/customer/flower/category/tree', {}).then(res => { + this.$message.hideLoading() + var data = res.data + this.list = data || [] + if (this.list.length > 0) { + if (selectId) { + for (var item of this.list) { + if (item.id == selectId) { + this.query.categoryId = item.id || '' + this.currentCategory = item + break } - }) - // await this.getList() - // this.list.forEach(item => { - // if (!item.shopnum) { - // item.shopnum = 0 - // } - // }) + } + } else { + this.query.categoryId = this.list[0].id || '' + this.currentCategory = this.list[0] || {} } + } - }) - - }, methods: { + fnChange(e) { + this.type = e.value + if (this.type == 'category') { + this.search_home_placeholder = '请输入分类' + uni.setNavigationBarTitle({ + title: '搜分类', + success: function() { + // console.log('标题搜鲜花修改成功'); + } + }); + + } else { + this.search_home_placeholder = '请输入店铺名' + uni.setNavigationBarTitle({ + title: '按店铺', + success: function() { + // console.log('标题搜店铺修改成功'); + } + }); + } + }, + + changeSearchType() { + if (this.type == 'category') { + this.type = 'supplier' + this.query.name = '' + } else { + this.type = 'category' + this.query.name = '' + } + }, + maxWeightPrice(item) { + var p = 0 + if (item.weightA && item.weightA > p) { + p = item.weightA + } + if (item.weightB && item.weightB > p) { + p = item.weightB + } + if (item.weightC && item.weightC > p) { + p = item.weightC + } + if (item.weightD && item.weightD > p) { + p = item.weightD + } + if (item.weightE && item.weightE > p) { + p = item.weightE + } + if (item.weightO && item.weightO > p) { + p = item.weightO + } + return p + }, + minWeightPrice(item) { + var p = -1 + if (item.weightA && item.weightA < p) { + p = item.weightA + } + if (item.weightB && item.weightB < p) { + p = item.weightB + } + if (item.weightC && item.weightC < p) { + p = item.weightC + } + if (item.weightD && item.weightD < p) { + p = item.weightD + } + if (item.weightE && item.weightE < p) { + p = item.weightE + } + if (item.weightO && item.weightO < p) { + p = item.weightO + } + if (p < 0) { + p = 0 + } + return p + }, + 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.typeId = item.id || '' + this.query.categoryId = item.id || '' + this.currentCategory = item }, - 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) { @@ -267,68 +364,6 @@ }) } } - //购买 - 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: { @@ -337,65 +372,38 @@ 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) { + if (this.query.categoryId) { 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) + if (item.id === this.query.categoryId || item.id === this.query.categoryId) { + // arr.push(item) + return item.children || [] } } } return arr } else { - return this.list + return [] } }, - // 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 { + .container-trade { background-color: #FFFFFF; + padding-top: 20rpx; + + // overflow-x: scroll; + .search-container { + margin: 0rpx 30rpx 20rpx 30rpx; + } + + .type-list { max-width: 178rpx; @@ -403,10 +411,10 @@ min-width: 178rpx; background: #EEF7F5; border-radius: 8rpx; - min-height: calc(100vh - 300rpx); - max-height: calc(100vh - 300rpx); + min-height: calc(100vh - 270rpx); + max-height: calc(100vh - 270rpx); overflow-y: scroll; - margin-left: 30rpx; + margin-right: 16rpx; .type-item { text-align: center; @@ -439,139 +447,105 @@ 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; + // margin: 0 auto; + // width: 164rpx; // width: 690rpx; // max-width: 690rpx; - height: 206rpx; + // min-height: 266rpx; background: #FFFFFF; - border-radius: 16rpx; - display: flex; - margin-bottom: 24rpx; + // margin-bottom: 44rpx; + // max-width: 164rpx; + margin-bottom: 20rpx; .cover { - width: 202rpx; - height: 202rpx; + width: 164rpx; + height: 164rpx; + background-size: 100% 100%; + border-radius: 8rpx; + border: 2rpx solid #f8f8f8; } .title { - font-weight: 600; - font-size: 32rpx; + font-weight: 500; + font-size: 28rpx; color: #000000; - line-height: 44rpx; + line-height: 40rpx; + // min-height: 50rpx; + text-align: center; + // margin-top: 10rpx; } .desc { + // margin-top: 8rpx; font-weight: 400; font-size: 24rpx; - color: #666666; + color: #6E9F66; line-height: 34rpx; + height: 34rpx; + background-color: rgba(202, 229, 214, 0.57); + border-radius: 4rpx; + text-align: center; + padding-left: 15rpx; + padding-right: 15rpx; + // margin-top: 12rpx; + } .price { + font-weight: 400; + font-size: 28rpx; + color: #CF0000; + line-height: 34rpx; + text-align: left; + margin-top: 12rpx; - font-size: 24rpx; - - .icon { - line-height: 60rpx; - } - - .num { + .p { + font-size: 40rpx; 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; - } - } + .info { + font-weight: 400; + font-size: 28rpx; + margin-top: 12rpx; + color: #666666; + line-height: 40rpx; } + + + + } .canteen-item-container { width: 100%; min-height: 300rpx; - max-height: calc(100vh - 300rpx); - overflow-y: scroll; + max-height: calc(100vh - 270rpx); + padding-right: 20rpx; + overflow-x: scroll; } - .canteen-item.list { - margin-right: 0rpx; - flex: 1; - margin-bottom: 0rpx; + // .canteen-item:nth-child(3n+1) { + // margin-left: 0rpx; + // margin-right: 15rpx; + // } - .cover { - width: 158rpx; - height: 158rpx; - } - } + // .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 { @@ -581,33 +555,7 @@ 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; - } } </style> \ No newline at end of file -- Gitblit v1.9.3