update 关注和商铺详情

xuxueyang

2024-07-24 a432d670ff6d6df5b5a8bed2c86dc20ac0e43d8a

update 关注和商铺详情

 sub_pages/customer/self/follow.vue

@@ -40,22 +40,13 @@
        url: '/sub_pages/customer/shop/shop?id=' + (item.id || '')
      })
    },
    clearFollow(item) {
    async clearFollow(item) {
      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
      //     }
      //   })
      // }
      const {code} = await this.$http.request('get', `/api/follow/delete`, {
        params: {
          supplierId: item.id
        }
      })
      this.$message.hideLoading()
      if (code === 0) {
        //删除list里的本元素

 sub_pages/customer/shop/shop.vue

@@ -1,312 +1,339 @@
<template>

    <view class="brand-detail">

  <view class="brand-detail">



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

                <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.gz" @click="updateGz(false)"></image>

                        <image src="../../../static/icon-gz-0.png" class="icon" v-if="!dto.gz" @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 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">



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



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

              橙色芭比

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

</template>



<script>

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

    export default {

        components: {

            trade,

        },

        data() {

            return {

                shopid: 'test',

                search_flow: '',

                flg: '0',

                tabs: [{

                        name: '全部商品'

                    },

                    {

                        name: '分类'

                    },

                    // {

                    //     name: '评价'

                    // },

                    {

                        name: '商家'

                    },

                ],

                dto: {},

                list: [{}, {}]

            }

        },

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

        }

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





export default {

  components: {

    trade,

  },

  data() {

    return {

      search_flow: '',

      flg: '0',

      tabs: [{

        name: '全部商品'

      },

            changeTab(flg) {

                this.flg = flg

                //如果没有加载数据，需要加载一下

        {

          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,

        }

      }



            },

            buttonSearchFlow() {

      this.$message.hideLoading()



            },

            mulnum(item) {

                if (item.shopnum > 0) {

                    item.shopnum -= 1

                }

                this.shoptotal -= 1

                this.$forceUpdate()

    },

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

      }



            },

            addnum(item) {

                if (item.shopnum) {

                    item.shopnum += 1

                } else {

                    item.shopnum = 1

                }

                this.shoptotal += 1

                this.$forceUpdate()

            },

        }

    }



    },

    changeTab(flg) {

      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

      }

      this.shoptotal += 1

      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;

    padding: 40rpx 32rpx;



            .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: 54rpx;

        background: #E4ECE8;

        border-radius: 4rpx;

        font-weight: 400;

        font-size: 24rpx;

        color: #779787;

        line-height: 80rpx;

      }

    }



            .brand-info-3 {

                .title {

                    font-weight: 600;

                    font-size: 32rpx;

                    color: #000000;

                    line-height: 44rpx;

                    margin-bottom: 20rpx;

                }

    .brand-info-3 {

      .title {

        font-weight: 600;

        font-size: 32rpx;

        color: #000000;

        line-height: 44rpx;

        margin-bottom: 20rpx;

      }



                .form-item {

                    display: flex;

                    border-bottom: 2rpx solid #EEEEEE;

      .form-item {

        display: flex;

        border-bottom: 2rpx solid #EEEEEE;



                    .label {

                        font-weight: 400;

                        font-size: 28rpx;

                        color: #000000;

                        line-height: 40rpx;

                    }

        .label {

          font-weight: 400;

          font-size: 28rpx;

          color: #000000;

          line-height: 40rpx;

        }



                    .value {

                        font-weight: 400;

                        font-size: 28rpx;

                        color: #666666;

                        line-height: 40rpx;

                        margin-left: auto;

                        text-align: right;

        .value {

          font-weight: 400;

          font-size: 28rpx;

          color: #666666;

          line-height: 40rpx;

          margin-left: auto;

          text-align: right;



                        .check {

                            background: #20613D;

                            border-radius: 4rpx;

                        }

                    }

                }

            }

        }

          .check {

            background: #20613D;

            border-radius: 4rpx;

          }

        }

      }

    }

  }



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

                display: flex;

                .form-item{

                    flex: 1;

                    text-align: center;

                    .label{

                        font-weight: 400;

                        font-size: 32rpx;

                        color: #FFFFFF;

                        line-height: 44rpx;

                    }

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

  .brand-top-info {

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



                .input {

    .tj-info {

      display: flex;



                    background-color: #fff !important;

      .form-item {

        flex: 1;

        text-align: center;



                    border-radius: 8rpx;

                }

        .label {

          font-weight: 400;

          font-size: 32rpx;

          color: #FFFFFF;

          line-height: 44rpx;

        }



            }

        }

    }

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