From 44dbae4a6ffb73478cd7980f37f1760e9a070c07 Mon Sep 17 00:00:00 2001 From: xuxy <1059738716@qq.com> Date: 星期日, 28 七月 2024 23:55:21 +0800 Subject: [PATCH] add 帮助富文本等页面 --- sub_pages/customer/shop/shop.vue | 316 ++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 231 insertions(+), 85 deletions(-) diff --git a/sub_pages/customer/shop/shop.vue b/sub_pages/customer/shop/shop.vue index a8621bc..166571f 100644 --- a/sub_pages/customer/shop/shop.vue +++ b/sub_pages/customer/shop/shop.vue @@ -1,8 +1,8 @@ <template> - <view class="brand-detail"> + <view class="brand-detail" style="background: #20613D;"> <view class="brand-top-info"> - <view class="search-container m-t-12 flex"> + <view class="search-container flex" style="padding-left: 20rpx;padding-right: 20rpx;padding-top: 20rpx"> <view class="flex1 input"> <u-input placeholder="请输入花名" v-model="search_flow"> <template slot="suffix"> @@ -11,18 +11,29 @@ </u-input> </view> </view> - <view class="info-brand m-t-12" v-if="shopid"> + <view class="info-brand m-t-12" v-if="id"> <view class="flex"> - <image class="store-logo"></image> + <image class="store-logo" :src="dto.cover"></image> <view> - <view class="store-name">花仙子</view> - <view class="store-address">云南省-昆明市-官渡区</view> + <view class="store-name">{{dto.name}}</view> + <view class="store-address"> + {{ ((dto.province||'')+ (dto.city&&'-'||'') + (dto.city||'')+ (dto.region&&'-'||'')+(dto.region||'')) ||dto.address || '暂无详细地址'}} + </view> </view> - <view class="store-sc m-l-a m-r-0"> - <image src="../../../static/icon-gz-1.png" class="icon" v-if="dto.gz" @click="updateGz(false)"></image> - <image src="../../../static/icon-gz-0.png" class="icon" v-if="!dto.gz" @click="updateGz(true)"></image> - 关注 + <view class="store-sc m-l-a m-r-0" @click="updateGz(!dto.followed)"> + <view class="icon-view"> + <image src="../../../static/icon-gz-1.png" class="icon" v-if="dto.followed"></image> + <image src="../../../static/icon-gz-0.png" class="icon" v-if="!dto.followed"></image> + </view> + <view>{{dto.followed?'取消':'关注'}}</view> </view> + <!-- <view class="store-sc m-l-a m-r-0" @click="updateGz(!dto.followed)"> + <image src="../../../static/icon-gz-1.png" class="icon" v-if="dto.followed" + ></image> + <image src="../../../static/icon-gz-0.png" class="icon" v-if="!dto.followed" + ></image> + 关注 + </view> --> </view> </view> <view class="tj-info m-t-12"> @@ -43,66 +54,75 @@ <view class="label">关注</view> </view> </view> - <top-tabs :tabs="tabs" :flg="flg" @change="changeTab"> + <view class="p10" style="padding-left: 20rpx;padding-right: 20rpx;"> + <top-tabs :tabs="tabs" :flg="flg" @change="changeTab"> - </top-tabs> + </top-tabs> + </view> </view> <view class="brand-info"> <view v-if="flg==='0'" class="brand-info-0"> <view class="component-filter-container" style="padding-top: 12rpx;"> <view class="flex1"> - 排序<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image> + 排序 + <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> + 等级 + <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> + 参数 + <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image> </view> </view> <view class="top-title"> 报价已包含打包费、材料费、交易佣金 </view> <view class="component-shop-item flex" v-for="(item,index) of list" :key="index" - @click="toDetail(item)"> + @click.stop="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"> + :src="item.cover" lazy-load> </image> <view class="level"> - A级 + {{item.levelStr||''}} </view> </view> <view class="m-l-12 info-container flex1"> <view class="title"> - 橙色芭比 + {{item.name}} <view class="price"> - ¥6.60/扎 + ¥{{item.price}}/扎 </view> </view> <view class="shop-name"> - 牛油果泡泡·白色 + {{item.categoryStr}} </view> <view class="other-info flex"> <view class="m-r-15"> - 已售:7 + 已售:{{item.sales || 0}} </view> <view class="m-r-15"> - 剩余:13 + 剩余:{{item.stock || 0}} </view> <view class="m-r-15"> - 1支/扎 + {{item.unit}} </view> </view> <view class="bottom-buttons flex"> - + <view class="m-l-0 m-r-a"> + <view class="m-r-15"> + 颜色:{{item.color||'-'}} + </view> + </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> + @click.stop="addnum(item,-1)"></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> + @click.stop="addnum(item,1)"></uni-icons> </view> </view> </view> @@ -111,17 +131,28 @@ </view> <view v-if="flg==='1'" class="brand-info-1"> - <trade :hidefooter="true"></trade> + <trade :hidefooter="true" :catgoryTree="catgoryTree" v-if="catgoryTree" ref="trade"></trade> + <!-- // 构建一个分类树 --> + <!-- catgoryTree --> + </view> <view v-if="flg==='2'" class="brand-info-3"> <view class="title"> 基础信息 </view> - <view class="form-input"> - <view class="label">经营模式</view> + <view class="form-input flex"> + <view class="label ">经营模式</view> <view class="value">供应商</view> </view> - <view class="form-input"> + <view class="form-input flex"> + <view class="label ">商家详细</view> + <view class="value">{{dto.address || '暂无'}}</view> + </view> + <view class="form-input flex"> + <view class="label ">商家介绍</view> + <view class="value">{{dto.description || '-'}}</view> + </view> + <view class="form-input flex"> <view class="label">身份认证</view> <view class="value">个人身份认证</view> </view> @@ -134,13 +165,14 @@ <script> import trade from '@/sub_pages/customer/trade/trade.vue' + import http from "../../../plugins/http"; + export default { components: { trade, }, data() { return { - shopid: 'test', search_flow: '', flg: '0', tabs: [{ @@ -157,60 +189,154 @@ }, ], dto: {}, - list: [{}, {}] + list: [], + id: '', + catgoryTree:undefined, + } + }, + onLoad(options) { + this.id = options.id || '' + // this.page.size = + if (this.id) { + this.getDetail() + } + this.listApi = `/api/customer/flower/list` + this.query.supplierId = this.id + this.getList('post') + }, + onReachBottom(){ + if(this.flg==='0'){ + this.getMore('post') } }, methods: { - //update 关注 - async updateGz(type){ - this.$message.showLoading() - // var res; - // if(type){ - // res = await this.$http.request('post',`/api/follow/add`,{ - // data:{ - // supplierId:this.dto.supplierId || this.dto.id - // } - // }) - // }else{ - // res = await this.$http.request('get',`/api/follow/add`,{ - // data:{ - // supplierId:this.dto.supplierId || this.dto.id - // } - // }) - // } - this.$message.hideLoading() - if(code===0){ - this.dto.gz = !this.dto.gz - await this.$store.dispatch('sign_add', 'follow') - } + async getDetail() { + { + this.$message.showLoading() + const { + code, + data + } = await this.$http.request('get', `/api/pub/supplier/detail/${this.id}`, { + params: {} + }) + if (code === 0) { + this.dto = { + ...data, + } + } + + this.$message.hideLoading() + } + //获取商家下的商品列表 + + // { + // this.$message.showLoading() + // const { + // code, + // data + // } = await this.$http.request('post', `/api/customer/flower/list`, { + // data: { + // supplierId: this.id, + // size: 20 + // } + // }) + // if (code === 0) { + // this.list = data.records || [] + // } + + // this.$message.hideLoading() + // } + + }, + //update 关注 + async updateGz(type) { + this.$message.showLoading() + const { + code + } = await this.$http.request(type ? 'post' : 'get', `/api/follow/${type ? 'add' : 'delete'}`, { + data: { + supplierId: this.dto.supplierId || this.dto.id + }, + params: { + supplierId: this.dto.supplierId || this.dto.id + } + }) + if (code === 0) { + this.dto.followed = !this.dto.followed + await this.$store.dispatch('sign_add', 'follow') + this.$forceUpdate() + } + this.$message.hideLoading() - }, - changeTab(flg) { - this.flg = flg + }, + async changeTab(flg) { + console.log('changeTab', flg) + if('1'===(''+flg)){ + if(!this.catgoryTree){ + this.$message.showLoading() + const { + code,data + } = await this.$http.request('get', `/api/customer/flower/category/tree`, { + data: { + supplierId: this.dto.supplierId || this.dto.id + }, + params: { + supplierId: this.dto.supplierId || this.dto.id + } + }) + if (code === 0) { + // data 分类树 + this.catgoryTree = data || [] + let tmp = this + this.$nextTick(()=>{ + tmp.$refs.trade.refInit(tmp.catgoryTree) + }) + } + this.$message.hideLoading() + } + } + this.flg = '' + flg //如果没有加载数据,需要加载一下 + }, buttonSearchFlow() { }, - 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 + async addnum(item, addnum) { + if (!this.currentInfo.id) { + await this.$message.confirm('请前往登录') + uni.navigateTo({ + url: '/pages/user/supplier-user' + }) + return } - this.shoptotal += 1 + if (!item.shopnum) { + item.shopnum = 0 + } + if (item.shopnum + addnum >= 0) { + + } else { + return + } + this.$message.showLoading() + const { + code + } = await http.request('post', '/api/customer/flower/cart/change-num', { + data: { + id: item.id, + num: addnum + } + }) + this.$message.hideLoading() + if (code === 0) { + item.shopnum += addnum + } this.$forceUpdate() }, + } } </script> @@ -219,22 +345,35 @@ .brand-detail { .brand-info { background: #FFFFFF; - border-radius: 40rpx 40rpx 0rpx 0rpx; + // border-radius: 40rpx 40rpx 0rpx 0rpx; + border-top-left-radius: 40rpx; + border-top-right-radius: 40rpx; + overflow: hidden; + overflow-y: scroll; padding: 40rpx 32rpx; + height: calc(100vh - 650rpx); + padding-top: 0rpx; .brand-info-0 { .top-title { - height: 54rpx; + height: 60rpx; background: #E4ECE8; border-radius: 4rpx; font-weight: 400; font-size: 24rpx; color: #779787; - line-height: 80rpx; + margin-top: 10rpx; + line-height: 60rpx; + padding-left: 20rpx; } } - + .brand-info-1{ + // padding: 40rpx 30rpx; + + } .brand-info-3 { + padding: 40rpx 30rpx; + .title { font-weight: 600; font-size: 32rpx; @@ -243,23 +382,24 @@ margin-bottom: 20rpx; } - .form-item { + .form-input { display: flex; border-bottom: 2rpx solid #EEEEEE; + line-height: 80rpx; .label { - font-weight: 400; + font-weight: 600; font-size: 28rpx; color: #000000; - line-height: 40rpx; } .value { font-weight: 400; font-size: 28rpx; color: #666666; - line-height: 40rpx; margin-left: auto; + margin-right: 0; + text-align: right; .check { @@ -273,26 +413,32 @@ .brand-top-info { background-image: url('https://hmy-flower.oss-cn-shanghai.aliyuncs.com/37/37dc02b58bd44af79e45031af2bb6c0b%E4%BD%8D%E5%9B%BE@2x.png'); - - .tj-info{ + background-size: 100% 100%; + + .tj-info { display: flex; - .form-item{ + + .form-item { flex: 1; text-align: center; - .label{ + + .label { font-weight: 400; font-size: 32rpx; color: #FFFFFF; line-height: 44rpx; } - .value{ + + .value { font-weight: 600; font-size: 48rpx; color: #FFFFFF; line-height: 66rpx; + } } } + .search-container { display: flex; margin: 12rpx 0rpx 20rpx 0rpx; -- Gitblit v1.9.3