update 合并v2版本的宏定义

xuxueyang

2024-09-11 af773c6b3e85cf3e7628eefe6f287c44a8d5a11a

 sub_pages/customer/trade/trade.vue

@@ -1,434 +1,495 @@
<template>

   <view class="container-trade" :style="{'min-height':hidefooter?'':'calc(100vh - 20rpx)'}">

      <view class="search-container m-t-12 flex" v-if="!hidefooter">

         <view class="flex1 input">

            <u-input placeholder="请输入分类名称" v-model="query.name" clearable>

               <template slot="suffix">

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

               </template>

            </u-input>

         </view>

      </view>

      <view class="canteen-items" :style="{'min-height':hidefooter?'':'calc(100vh - 160rpx)'}">

         <view v-if="(!list||list.length==0)&&true" style="width: 100%;min-height: 200rpx;">

            &nbsp;

         </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 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 class="component-filter-container" style="padding-top: 12rpx;">-->

               <!--                  <view class="flex1" @click="openParamPop">-->

               <!--                     筛选-->

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

               <!--               <u-divider></u-divider>-->

               <view class="flex">

                  <view v-for="(item,index) of listFilter" :key="item.id" class="canteen-item list"

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

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

                        <!-- @click.stop="previewImg(item.imageUrl)" -->

                        <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="price">￥{{item.priceLow || 0}}-{{item.priceHigh||0}}</view>

                        <view class="desc" v-if="item.stock">在售 {{item.stock||'0'}} 扎</view>



                     </view>



                  </view>

                  <view style="padding-bottom:100rpx">

                  </view>

               </view>

               <footer-msg v-if="!hidefooter" :more="page.total>0&&page.total>page.current*page.size"></footer-msg>



            </view>

         </view>



      </view>







      <view style="min-height:200rpx" v-if="!hidefooter">

      </view>

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



<script>

   import {

      mapState

   } from 'vuex'

   export default {

      props: {

         hidefooter: false,

         catgoryTree: [],

      },

      data() {

         return {

            list: [],

            showpop: false,

            query: {

               name: '',

               categoryId: '',

            },

            currentCategory: {}



         }

      },

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

                     }

                  }

               } else {

                  this.query.categoryId = this.list[0].id || ''

                  this.currentCategory = this.list[0] || {}

               }



            }

         })

      },

      methods: {

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

            //根据名称查询

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

            })

         },

         toDetailList(item) {

            //去商品列表页面

            uni.navigateTo({

               url: `/sub_pages/customer/trade/list?categoryId=${item.id}`

            })

         },

         changeType(item) {

            this.query.categoryId = item.id || ''

            this.currentCategory = item

         },





         async submitGood() {

            var values = []

            for (var item of this.list) {

               if (item.shopnum > 0) {

                  values.push({

                     id: item.id,

                     num: item.shopnum

                  })

               }

            }

         }

      },

      computed: {

         ...mapState({

            address: state => {

               return state.defaultaddress || {}

            },

         }),

         listFilter() {

            if (this.query.categoryId) {

               var arr = []

               if (this.list && this.list.length > 0) {

                  for (var item of this.list) {

                     if (item.id === this.query.categoryId || item.id === this.query.categoryId) {

                        // arr.push(item)

                        return item.children || []

                     }

                  }

               }

               return arr

            } else {

               return []

            }



         },

      }

   }

</script>



<style lang="scss" scoped>

   .container-trade {

      background-color: #FFFFFF;

      padding-top: 20rpx;



      .search-container {

         margin: 0rpx 30rpx 20rpx 30rpx;

      }







      .type-list {

         max-width: 178rpx;

         width: 178rpx;

         min-width: 178rpx;

         background: #EEF7F5;

         border-radius: 8rpx;

         min-height: calc(100vh - 300rpx);

         max-height: calc(100vh - 300rpx);

         overflow-y: scroll;

         margin-right: 16rpx;



         .type-item {

            text-align: center;

            font-weight: 400;

            font-size: 28rpx;

            color: #000000;

            line-height: 88rpx;

            // padding-left: 30rpx;

            // padding-right: 30rpx;

         }



         .type-item.current {

            font-weight: 600;

            font-size: 28rpx;

            color: #04BA97;

         }

      }



      .title-before-blue.green {

         padding-left: 30rpx;

         padding-bottom: 0rpx;

      }



      .title-before-blue:before {

         color: #04BA97;

         font-weight: 600;

         min-width: 14rpx;

         background: #04BA97;

         border-radius: 8rpx;

         display: inline-block;

      }





      .canteen-items {

         // margin-left: 30rpx;



         .canteen-item {

            margin: 0 auto;

            width: 164rpx;

            // width: 690rpx;

            // max-width: 690rpx;

            min-height: 266rpx;

            background: #FFFFFF;

            margin-bottom: 44rpx;

            max-width: 164rpx;



            .cover {

               width: 164rpx;

               height: 164rpx;

               background-size: 100% 100%;

               border-radius: 8rpx;

               border: 2rpx solid #f8f8f8;

            }



            .title {

               font-weight: 500;

               font-size: 28rpx;

               color: #000000;

               line-height: 40rpx;

               min-height: 80rpx;

               text-align: center;

            }



            .desc {

               margin-top: 8rpx;

               font-weight: 400;

               font-size: 24rpx;

               color: #6E9F66;

               line-height: 34rpx;

               height: 34rpx;

               background-color: rgba(202, 229, 214, 0.57);

               border-radius: 4rpx;

               text-align: center;



            }



            .price {

               font-weight: 400;

               font-size: 24rpx;

               color: #CF0000;

               line-height: 34rpx;

               text-align: center;

            }











         }



         .canteen-item-container {

            width: 100%;

            min-height: 300rpx;

            max-height: calc(100vh - 200rpx);

            overflow-y: scroll;

         }



         .canteen-item:nth-child(3n+1) {

            margin-left: 0rpx;

            margin-right: 15rpx;

         }



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

         position: absolute;

         position: fixed;

         left: 30rpx;

         bottom: 30rpx;

      }







   }

<template>
   <view class="container-trade" :style="{'min-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>
         <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>
         </view>
      </view>
      <view class="canteen-items" :style="{'min-height':hidefooter?'':'calc(100vh - 340rpx)'}">
         <view v-if="(!list||list.length==0)&&true" style="width: 100%;min-height: 200rpx;">
            &nbsp;
         </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 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 class="component-filter-container" style="padding-top: 12rpx;">-->
               <!--                  <view class="flex1" @click="openParamPop">-->
               <!--                     筛选-->
               <!--                  </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>-->
               <!--               <u-divider></u-divider>-->
               <view class="flex">
                  <view v-for="(item,index) of listFilter" :key="item.id" class="canteen-item list"
                     @click.stop="toDetailList(item)">
                     <view class="m-r-10">
                        <!-- @click.stop="previewImg(item.imageUrl)" -->
                        <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="price">
                           <view>会员价</view>
                           <view>￥{{item.priceLowMember || 0}}-{{item.priceHighMember||0}}</view>
                        </view>								
                        <view class="price component-price-old">￥{{item.priceLow || 0}}-{{item.priceHigh||0}}</view>
								

                        <view class="desc">在售 {{item.stock||'0'}} 扎</view>
                     </view>

                  </view>
                  <view style="padding-bottom:40rpx">
                  </view>
               </view>
               <footer-msg v-if="!hidefooter" :more="page.total>0&&page.total>page.current*page.size"></footer-msg>

            </view>
         </view>

      </view>



      <view style="min-height:100rpx" v-if="!hidefooter">
      </view>
      <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&&currentCategory.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>

<script>
   import {
      mapState
   } from 'vuex'
   export default {
      props: {
         hidefooter: false,
         catgoryTree: [],
         supplierId: '',
      },
      data() {
         return {
            list: [],
            showpop: false,
            query: {
               name: '',
               categoryId: '',
            },
            currentCategory: {},
            type: 'category', //supplier


         }
      },
      // #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.$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
                     }
                  }
               } else {
                  this.query.categoryId = this.list[0].id || ''
                  this.currentCategory = this.list[0] || {}
               }

            }
         })
      },
      methods: {
         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.categoryId = item.id || ''
            this.currentCategory = item
         },


         async submitGood() {
            var values = []
            for (var item of this.list) {
               if (item.shopnum > 0) {
                  values.push({
                     id: item.id,
                     num: item.shopnum
                  })
               }
            }
         }
      },
      computed: {
         ...mapState({
            address: state => {
               return state.defaultaddress || {}
            },
         }),
         listFilter() {
            if (this.query.categoryId) {
               var arr = []
               if (this.list && this.list.length > 0) {
                  for (var item of this.list) {
                     if (item.id === this.query.categoryId || item.id === this.query.categoryId) {
                        // arr.push(item)
                        return item.children || []
                     }
                  }
               }
               return arr
            } else {
               return []
            }

         },
      }
   }
</script>

<style lang="scss" scoped>
   .container-trade {
      background-color: #FFFFFF;
      padding-top: 20rpx;

      .search-container {
         margin: 0rpx 30rpx 20rpx 30rpx;
      }



      .type-list {
         max-width: 178rpx;
         width: 178rpx;
         min-width: 178rpx;
         background: #EEF7F5;
         border-radius: 8rpx;
         min-height: calc(100vh - 270rpx);
         max-height: calc(100vh - 270rpx);
         overflow-y: scroll;
         margin-right: 16rpx;

         .type-item {
            text-align: center;
            font-weight: 400;
            font-size: 28rpx;
            color: #000000;
            line-height: 88rpx;
            // padding-left: 30rpx;
            // padding-right: 30rpx;
         }

         .type-item.current {
            font-weight: 600;
            font-size: 28rpx;
            color: #04BA97;
         }
      }

      .title-before-blue.green {
         padding-left: 30rpx;
         padding-bottom: 0rpx;
      }

      .title-before-blue:before {
         color: #04BA97;
         font-weight: 600;
         min-width: 14rpx;
         background: #04BA97;
         border-radius: 8rpx;
         display: inline-block;
      }


      .canteen-items {
         // margin-left: 30rpx;

         .canteen-item {
            margin: 0 auto;
            width: 164rpx;
            // width: 690rpx;
            // max-width: 690rpx;
            min-height: 266rpx;
            background: #FFFFFF;
            margin-bottom: 44rpx;
            max-width: 164rpx;

            .cover {
               width: 164rpx;
               height: 164rpx;
               background-size: 100% 100%;
               border-radius: 8rpx;
               border: 2rpx solid #f8f8f8;
            }

            .title {
               font-weight: 500;
               font-size: 28rpx;
               color: #000000;
               line-height: 40rpx;
               min-height: 80rpx;
               text-align: center;
            }

            .desc {
               margin-top: 8rpx;
               font-weight: 400;
               font-size: 24rpx;
               color: #6E9F66;
               line-height: 34rpx;
               height: 34rpx;
               background-color: rgba(202, 229, 214, 0.57);
               border-radius: 4rpx;
               text-align: center;

            }

            .price {
               font-weight: 400;
               font-size: 24rpx;
               color: #CF0000;
               line-height: 34rpx;
               text-align: center;
            }





         }

         .canteen-item-container {
            width: 100%;
            min-height: 300rpx;
            max-height: calc(100vh - 270rpx);
            overflow-y: scroll;
         }

         .canteen-item:nth-child(3n+1) {
            margin-left: 0rpx;
            margin-right: 15rpx;
         }

         .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 {
         position: absolute;
         position: fixed;
         left: 30rpx;
         bottom: 30rpx;
      }



   }
</style>