blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
xuxueyang
2024-08-04 17bb1250f2120415e5fc9f47fe50b60f72b47a07 
 sub_pages/customer/shop/shop.vue


@@ -1,339 +1,520 @@


<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="flex1 input">



          <u-input placeholder="请输入花名" v-model="search_flow">



            <template slot="suffix">



              <uni-icons color="#20613D" type="search" size="24" @tap="buttonSearchFlow"></uni-icons>



            </template>



          </u-input>



        </view>



      </view>



      <view class="info-brand m-t-12" v-if="id">



        <view class="flex">



          <image class="store-logo"></image>



          <view>



            <view class="store-name">花仙子</view>



            <view class="store-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.followed"



                   @click="updateGz(false)"></image>



            <image src="../../../static/icon-gz-0.png" class="icon" v-if="!dto.followed"



                   @click="updateGz(true)"></image>



            关注



          </view>



        </view>



      </view>



      <view class="tj-info m-t-12">



        <view class="form-item">



          <view class="value">0</view>



          <view class="label">发布</view>



        </view>



        <view class="form-item">



          <view class="value">0</view>



          <view class="label">获赞</view>



        </view>



        <view class="form-item">



          <view class="value">0</view>



          <view class="label">粉丝</view>



        </view>



        <view class="form-item">



          <view class="value">0</view>



          <view class="label">关注</view>



        </view>



      </view>



      <top-tabs :tabs="tabs" :flg="flg" @change="changeTab">



      <view class="brand-top-info">



         <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">



                     <uni-icons color="#20613D" type="search" size="24" @tap="buttonSearchFlow"></uni-icons>



                  </template>



               </u-input>



            </view>



         </view>



         <view class="info-brand m-t-12" v-if="id">



            <view class="flex">



               <image class="store-logo" :src="dto.cover"></image>



               <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" @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">



            <view class="form-item">



               <view class="value">0</view>



               <view class="label">发布</view>



            </view>



            <view class="form-item">



               <view class="value">0</view>



               <view class="label">获赞</view>



            </view>



            <view class="form-item">



               <view class="value">0</view>



               <view class="label">粉丝</view>



            </view>



            <view class="form-item">



               <view class="value">0</view>



               <view class="label">关注</view>



            </view>



         </view>



         <view class="p10" style="padding-left: 20rpx;padding-right: 20rpx;">



            <top-tabs :tabs="tabs" :flg="flg" @change="changeTab">







      </top-tabs>



    </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>



          </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 class="top-title">



          报价已包含打包费、材料费、交易佣金



        </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>



            </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>



               </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 class="top-title">



               报价已包含打包费、材料费、交易佣金



            </view>



            <view class="component-shop-item flex" v-for="(item,index) of list" :key="index"



               @click.stop="toDetail(item)">



               <view class="img">



                  <image class="img img100" :src="item.cover" lazy-load>



                  </image>



                  <view class="level">



                     {{item.levelStr||''}}



                  </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="m-l-12 info-container flex1">



                  <view class="title">



                     {{item.name}}



                     <view class="price">



                        ￥{{item.price}}/扎



                     </view>



                  </view>



                  <view class="shop-name">



                     {{item.categoryStr}}



                  </view>



                  <view class="other-info flex">



                     <view class="m-r-15">



                        已售:{{item.sales || 0}}



                     </view>



                     <view class="m-r-15">



                        剩余:{{item.stock || 0}}



                     </view>



                     <view class="m-r-15">



                        {{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="addnum(item,-1)"></uni-icons>



                        <view class="curnums" @click="updateItemNum(item)" 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,1)"></uni-icons>



                     </view>



                  </view>



               </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>



                <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>







      </view>



         <view v-if="flg==='1'" class="brand-info-1">



            <trade :hidefooter="true" :catgoryTree="catgoryTree" v-if="catgoryTree" ref="trade"></trade>



            <!-- // 构建一个分类树 -->



            <!-- catgoryTree -->







      <view v-if="flg==='1'" class="brand-info-1">



        <trade :hidefooter="true"></trade>



      </view>



      <view v-if="flg==='2'" class="brand-info-3">



        <view class="title">



          基础信息



        </view>



        <view class="form-input">



          <view class="label">经营模式</view>



          <view class="value">供应商</view>



        </view>



        <view class="form-input">



          <view class="label">身份认证</view>



          <view class="value">个人身份认证</view>



        </view>



      </view>



    </view>



         </view>



         <view v-if="flg==='2'" class="brand-info-3">



            <view class="title">



               基础信息



            </view>



            <view class="form-input flex">



               <view class="label ">经营模式</view>



               <view class="value">供应商</view>



            </view>



            <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">{{dto.idcardTypeStr||'未认证'}}</view>



            </view>



         </view>



      </view>











  </view>



   </view>



</template>







<script>



import trade from '@/sub_pages/customer/trade/trade.vue'



   import trade from '@/sub_pages/customer/trade/trade.vue'



   import http from "../../../plugins/http";







export default {



  components: {



    trade,



  },



  data() {



    return {



      search_flow: '',



      flg: '0',



      tabs: [{



        name: '全部商品'



      },



        {



          name: '分类'



        },



        // {



        //    name: '评价'



        // },



        {



          name: '商家'



        },



      ],



      dto: {},



      list: [{}, {}],



      id: '',



    }



  },



  onLoad(options) {



    this.id = options.id || ''



    if (this.id) {



      this.getDetail()



    }



  },



  methods: {



    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,



        }



      }



   export default {



      components: {



         trade,



      },



      data() {



         return {



            search_flow: '',



            flg: '0',



            tabs: [{



                  name: '全部商品'



               },



               {



                  name: '分类'



               },



               // {



               //    name: '评价'



               // },



               {



                  name: '商家'



               },



            ],



            dto: {},



            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')



      },



      // #ifdef PUB_CUSTOMER



      onShareAppMessage() {



         let that = this;



         var name = that.currentInfo.customerDTO && currentInfo.customerDTO.name || that.currentInfo.supplierDTO &&



            currentInfo.supplierDTO.name || that.currentInfo.partnerDTO && currentInfo.partnerDTO.name || ''



         var url =



            `/sub_pages/customer/shop/shop?id=${this.id}&shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数



         return {



            title: this.dto.id && this.dto.name ? (this.dto.name + " 的店铺") : "花满芫",



            path: url,



         }



      },



      onShareTimeline() {



         let that = this;



         var name = that.currentInfo.customerDTO && currentInfo.customerDTO.name || that.currentInfo.supplierDTO &&



            currentInfo.supplierDTO.name || that.currentInfo.partnerDTO && currentInfo.partnerDTO.name || ''



         var url =



            `/sub_pages/customer/shop/shop?id=${this.id}&shareId=${this.currentInfo&&this.currentInfo.id||''}&shareName=${name||''}`; //你的转发页面路径拼接参数



         return {



            title: this.dto.id && this.dto.name ? (this.dto.name + " 的店铺") : "花满芫",



            path: url,



         }



      },



      // #endif



      onReachBottom() {



         if (this.flg === '0') {



            this.getMore('post')



         }



      },



      methods: {







      this.$message.hideLoading()



         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,



                  }



               }







    },



    //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



        }



      })



      this.$message.hideLoading()



      if (code === 0) {



        this.dto.followed = !this.dto.followed



        await this.$store.dispatch('sign_add', 'follow')



      }



               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) {



            if (!this.currentInfo.id) {



               this.$message.showToast('请先登录')



               return



            }



            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()



         },



         buttonSearchFlow() {







    },



    addnum(item) {



      if (item.shopnum) {



        item.shopnum += 1



      } else {



        item.shopnum = 1



      }



      this.shoptotal += 1



      this.$forceUpdate()



    },



  }



}



         },



         async updateItemNum(item) {



            const res = await this.$message.confirm('', {



               editable: true,



               title: '请输入想要购买的数量'



            })



            if (res.content && res.confirm) {



               // 发送请求



               var t = parseInt(res.content)



               if (isNaN(t) || t < 0) {



                  this.$message.showToast('数目需要大于等于0')







               } else {



                  if (!item.stock || t > item.stock) {



                     this.$message.showToast('库存不足无法修改')



                     return



                  }



                  this.addnum(item, (t - item.shopnum))







               }



            } else {







            }



         },



         async addnum(item, addnum) {



            if (!this.currentInfo.id) {



               await this.$message.confirm('请前往登录')



               uni.navigateTo({



                  url: '/pages/user/supplier-user'



               })



               return



            }



            if (!item.shopnum) {



               item.shopnum = 0



            }



            if (!item.stock) {



               item.stock = 0



            }



            if (addnum > 0 & item.shopnum + addnum > item.stock) {



               this.$message.showToast('库存不足，无法修改')



               return



            }



            if (item.shopnum + addnum >= 0) {







            } else {



               return



            }



            this.$message.showLoading()



            const {



               code



            } = await this.$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>







<style lang="scss" scoped>



.brand-detail {



  .brand-info {



    background: #FFFFFF;



    border-radius: 40rpx 40rpx 0rpx 0rpx;



    padding: 40rpx 32rpx;



   .brand-detail {



      .brand-info {



         background: #FFFFFF;



         // 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;



        background: #E4ECE8;



        border-radius: 4rpx;



        font-weight: 400;



        font-size: 24rpx;



        color: #779787;



        line-height: 80rpx;



      }



    }



         .brand-info-0 {



            .top-title {



               height: 60rpx;



               background: #E4ECE8;



               border-radius: 4rpx;



               font-weight: 400;



               font-size: 24rpx;



               color: #779787;



               margin-top: 10rpx;



               line-height: 60rpx;



               padding-left: 20rpx;



            }



         }







    .brand-info-3 {



      .title {



        font-weight: 600;



        font-size: 32rpx;



        color: #000000;



        line-height: 44rpx;



        margin-bottom: 20rpx;



      }



         .brand-info-1 {



            // padding: 40rpx 30rpx;







      .form-item {



        display: flex;



        border-bottom: 2rpx solid #EEEEEE;



         }







        .label {



          font-weight: 400;



          font-size: 28rpx;



          color: #000000;



          line-height: 40rpx;



        }



         .brand-info-3 {



            padding: 40rpx 30rpx;







        .value {



          font-weight: 400;



          font-size: 28rpx;



          color: #666666;



          line-height: 40rpx;



          margin-left: auto;



          text-align: right;



            .title {



               font-weight: 600;



               font-size: 32rpx;



               color: #000000;



               line-height: 44rpx;



               margin-bottom: 20rpx;



            }







          .check {



            background: #20613D;



            border-radius: 4rpx;



          }



        }



      }



    }



  }



            .form-input {



               display: flex;



               border-bottom: 2rpx solid #EEEEEE;



               line-height: 80rpx;







  .brand-top-info {



    background-image: url('https://hmy-flower.oss-cn-shanghai.aliyuncs.com/37/37dc02b58bd44af79e45031af2bb6c0b%E4%BD%8D%E5%9B%BE@2x.png');



               .label {



                  font-weight: 600;



                  font-size: 28rpx;



                  color: #000000;



               }







    .tj-info {



      display: flex;



               .value {



                  font-weight: 400;



                  font-size: 28rpx;



                  color: #666666;



                  margin-left: auto;



                  margin-right: 0;







      .form-item {



        flex: 1;



        text-align: center;



                  text-align: right;







        .label {



          font-weight: 400;



          font-size: 32rpx;



          color: #FFFFFF;



          line-height: 44rpx;



        }



                  .check {



                     background: #20613D;



                     border-radius: 4rpx;



                  }



               }



            }



         }



      }







        .value {



          font-weight: 600;



          font-size: 48rpx;



          color: #FFFFFF;



          line-height: 66rpx;



        }



      }



    }



      .brand-top-info {



         background-image: url('https://hmy-flower.oss-cn-shanghai.aliyuncs.com/37/37dc02b58bd44af79e45031af2bb6c0b%E4%BD%8D%E5%9B%BE@2x.png');



         background-size: 100% 100%;







    .search-container {



      display: flex;



      margin: 12rpx 0rpx 20rpx 0rpx;



      position: relative;



      z-index: 1;



         .tj-info {



            display: flex;







      .input {



            .form-item {



               flex: 1;



               text-align: center;







        background-color: #fff !important;



               .label {



                  font-weight: 400;



                  font-size: 32rpx;



                  color: #FFFFFF;



                  line-height: 44rpx;



               }







        border-radius: 8rpx;



      }



               .value {



                  font-weight: 600;



                  font-size: 48rpx;



                  color: #FFFFFF;



                  line-height: 66rpx;







    }



  }



}



               }



            }



         }







         .search-container {



            display: flex;



            margin: 12rpx 0rpx 20rpx 0rpx;



            position: relative;



            z-index: 1;







            .input {







               background-color: #fff !important;







               border-radius: 8rpx;



            }







         }



      }



   }



</style>