Fix(特产&文玩管理):[#962]店铺/商品的链接配置功能

pagesInn/inn/innHome.vue

@@ -1,135 +1,171 @@
 <template>
   <view class="container">
     <!-- title="店铺主页" -->
-    <hx-navbar :fixed="true" statusBarFontColor="#ffffff" barPlaceholder="hidden" transparent="auto" color='#ffffff'
-               :background-color="[[13,197,197],[13,197,197]]" :pageScroll.sync="scrollData"/>
-
+    <hx-navbar
+      :fixed="true"
+      :background-color="[[13,197,197],[13,197,197]]"
+      :pageScroll.sync="scrollData"
+      statusBarFontColor="#ffffff"
+      barPlaceholder="hidden"
+      transparent="auto"
+      color='#ffffff'
+    />
     <!--    7-3-->
-    <image class="fixed-share" :src="webUrl+'/20230619110913307276.png'" @click="changeShare"
-           v-if="posterUrl.length>0"/>
-    <u-popup :show="showShare" mode="center" bgColor="transparent">
+    <image
+      v-if="posterUrl.length > 0"
+      :src="webUrl + '/20230619110913307276.png'"
+      class="fixed-share"
+      @click="changeShare"
+    />
+    <u-popup
+      :show="showShare"
+      mode="center"
+      bgColor="transparent"
+    >
       <view class="box-share">
         <view class="box-img">
-          <image class="icon" :src="webUrl+'/20230608112219219303.png'" @click="changeShare"/>
-          <image class="main-img" :src="posterUrl"/>
+          <image
+            :src="webUrl + '/20230608112219219303.png'"
+            class="icon"
+            @click="changeShare"
+          />
+          <image :src="posterUrl" class="main-img" />
         </view>
-        <image class="btn" :src="webUrl+'/20230608112210135038.png'" @click="saveImg"/>
+        <image
+          :src="webUrl + '/20230608112210135038.png'"
+          class="btn"
+          @click="saveImg"
+        />
       </view>
     </u-popup>
-
     <view class="cover-box">
-      <image class="full-img" :src="inn.cover" mode="widthFix"></image>
+      <image
+        :src="inn.cover"
+        class="full-img"
+        mode="widthFix"
+      />
       <view class="box-mask flex jc-between ai-end">
         <view class="inn-name flex-0 more-t">{{ inn.name }}</view>
-        <view class="city-section flex jc-end ai-center" v-if="inn.cityName != undefined && inn.cityName.length>0">
-          <image style="width: 22rpx;height: 22rpx;margin-right: 8rpx;" :src="webUrl+'/20210807215539157727.png'"
-                 mode=""></image>
+        <view
+          v-if="inn.cityName != undefined && inn.cityName.length > 0"
+          class="city-section flex jc-end ai-center"
+        >
+          <image
+            :src="webUrl + '/20210807215539157727.png'"
+            style="width: 22rpx;height: 22rpx;margin-right: 8rpx;"
+          />
           <text class="one-t" style="font-size: 24rpx;color: #fff;">{{ inn.cityName }}</text>
         </view>
       </view>
     </view>
-
     <view class="innInfoWrap flex ai-end">
       <view class="inn-logo flex-0" style="">
         <image :src="inn.logo" v-if="inn.logo"></image>
-        <image :src="webUrl+'/20230609145651814148.png'" v-else/>
+        <image :src="webUrl + '/20230609145651814148.png'" v-else/>
       </view>
 
       <view class="a3 flex jc-between ai-end" style="width:100%">
         <view class="inn-owner" style="flex-grow: 1;">{{ inn.ownerName }}/店主</view>
-
-        <view class="guarantee flex jc-center ai-center" v-if="inn.guaranteeValue">保证金：{{
-            inn.guaranteeValue
-          }}元
+        <view v-if="inn.guaranteeValue" class="guarantee flex jc-center ai-center">
+          保证金：{{ inn.guaranteeValue }}元
         </view>
-
         <view class="flex ai-center">
           <view class="zan-box flex flex-0 ai-end" @click="zanInn">
             <template v-if="isLike">
-              <image :src="webUrl+'/20230828095210280991.png'"/>
+              <image :src="webUrl + '/20230828095210280991.png'"/>
               <text style="font-size: 28rpx;color: #FF564A;">{{ inn.zan }}</text>
             </template>
             <template v-else>
-              <image :src="webUrl+'/20230828095217616640.png'"/>
+              <image :src="webUrl + '/20230828095217616640.png'"/>
               <text style="font-size: 28rpx;color: #333333;">{{ inn.zan }}</text>
             </template>
           </view>
-
           <view class="flex flex-0 ai-end">
-            <image style="width: 32rpx;height: 32rpx;margin-left: 10rpx;" :src="webUrl+'/20240113230535491918.png'"
-                   mode="scaleToFill" @click="doneFavorite" v-if="isFavorite"/>
-            <image style="width: 32rpx;height: 32rpx;margin-left: 10rpx;" :src="webUrl+'/20240122093206161576.png'"
-                   mode="scaleToFill" @click="doneFavorite" v-else/>
+            <image
+              v-if="isFavorite"
+              :src="webUrl + '/20240113230535491918.png'"
+              style="width: 32rpx;height: 32rpx;margin-left: 10rpx;"
+              mode="scaleToFill"
+              @click="doneFavorite"
+            />
+            <image
+              v-else
+              :src="webUrl + '/20240122093206161576.png'"
+              style="width: 32rpx;height: 32rpx;margin-left: 10rpx;"
+              mode="scaleToFill"
+              @click="doneFavorite"
+            />
             <text style="font-size: 28rpx;color: #333333;">{{ favoriteCount }}</text>
           </view>
-
         </view>
-
       </view>
     </view>
-
-    <view class="" style="padding: 0 32rpx;margin-top: 10rpx;">
+    <view style="padding: 0 32rpx;margin-top: 10rpx;">
       <view class="inn-signature">
         <text style="font-size: 24rpx;color: #080F1A;">{{ inn.content }}</text>
       </view>
     </view>
-
-    <view v-if="inn.desc != null && inn.desc.length>0" class="" style="padding: 0 32rpx;margin-top: 30rpx;">
+    <view
+      v-if="inn.desc != null && inn.desc.length > 0"
+      style="padding: 0 32rpx;margin-top: 30rpx;"
+    >
       <view class="desc-box">
         <text class="fixed">简介：</text>
         <rich-text :nodes="inn.desc"/>
-        <!--        <view v-html="handleRichText(inn.desc)"></view>-->
       </view>
     </view>
-
     <view class="map-wrap acea-row row-center">
-      <image style="height: 160rpx;width: 100%;" :src="webUrl+'/20210225151241154614.png'"></image>
+      <image
+        :src="webUrl + '/20210225151241154614.png'"
+        style="height: 160rpx;width: 100%;"
+      />
       <view class="address-block acea-row row-middle">
-        <image style="width: 32rpx;height: 32rpx;margin-right: 10rpx;" :src="webUrl+'/20220901223747933873.png'"
-               mode=""></image>
+        <image
+          :src="webUrl + '/20220901223747933873.png'"
+          style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
+        />
         <text class="address-text">{{ inn.address }}</text>
       </view>
       <view class="buttons-block acea-row row-middle">
         <!-- call 拨打电话-->
         <!--        goRoom-->
         <view class="phone-block acea-row row-middle" @click="call">
-          <image style="width: 32rpx;height: 32rpx;margin-right: 10rpx;" :src="webUrl+'/20220901223901017309.png'"
-                 mode=""></image>
+          <image
+            :src="webUrl + '/20220901223901017309.png'"
+            style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
+          />
           <text style="font-size: 24rpx;color: #41454d;">联系客服</text>
         </view>
         <view class="vline"></view>
         <view class="map-block acea-row row-middle" @click="showLocation">
-          <image style="width: 32rpx;height: 32rpx;margin-right: 10rpx;" :src="webUrl+'/20220901223401590275.png'"
-                 mode=""></image>
+          <image
+            style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"
+            :src="webUrl + '/20220901223401590275.png'"
+          />
           <text style="font-size: 24rpx;color: #41454d;">进入地图</text>
         </view>
       </view>
     </view>
 
-    <view class="top-tab acea-row row-middle row-center" style="margin-top: 60rpx;border-bottom: 1px solid #f5f5f5;">
+    <view
+      class="top-tab acea-row row-middle row-center"
+      style="margin-top: 60rpx;border-bottom: 1px solid #f5f5f5;"
+    >
       <view class="tab" @click="changeTab(0)">
-        <text class=""
-              :style="activeIndex==0?'color:#080F1A;font-size:32rpx;':'color:#A6AAB3;font-size:28rpx;'">企业文化
-        </text>
-        <view v-show="activeIndex==0" class="btLine"></view>
+        <text :class="activeIndex === 0 ? 'tab-item-active' : 'tab-item-no-active'">企业文化</text>
+        <view v-show="activeIndex === 0" class="btLine"></view>
       </view>
       <view class="tab" style="margin-left: 70rpx;" @click="changeTab(1)">
-        <text class=""
-              :style="activeIndex==1?'color:#080F1A;font-size:32rpx;':'color:#A6AAB3;font-size:28rpx;'">最新资讯
-        </text>
-        <view v-show="activeIndex==1" class="btLine"></view>
+        <text :class="activeIndex === 1 ? 'tab-item-active' : 'tab-item-no-active'">最新资讯</text>
+        <view v-show="activeIndex === 1" class="btLine"></view>
       </view>
       <view class="tab" style="margin-left: 70rpx;" @click="changeTab(2)">
-        <text class=""
-              :style="activeIndex==2?'color:#080F1A;font-size:32rpx;':'color:#A6AAB3;font-size:28rpx;'">商家资质
-        </text>
-        <view v-show="activeIndex==2" class="btLine"></view>
+        <text :class="activeIndex === 2 ? 'tab-item-active' : 'tab-item-no-active'">商家资质</text>
+        <view v-show="activeIndex === 2" class="btLine"></view>
       </view>
       <view class="tab" style="margin-left: 70rpx;" @click="changeTab(3)" v-show="inn.hasProduct>0">
-        <text class=""
-              :style="activeIndex==3?'color:#080F1A;font-size:32rpx;':'color:#A6AAB3;font-size:28rpx;'">商品
-        </text>
-        <view v-show="activeIndex==3" class="btLine"></view>
+        <text :class="activeIndex === 3 ? 'tab-item-active' : 'tab-item-no-active'">商品</text>
+        <view v-show="activeIndex === 3" class="btLine"></view>
       </view>
     </view>
 
@@ -151,7 +187,7 @@
             <view class="month-day" :style="index===0?'color:#0DC5C5;':''">{{ info.monthDay }}</view>
             <view class="year">{{ info.year }}</view>
             <view v-if="isMyInn" class="" style="margin-top: 10rpx;" @click="deleteInnInfo(info)">
-              <image style="width:36rpx;height: 36rpx;" :src="webUrl+'/20210302150736618877.png'" mode=""></image>
+              <image style="width:36rpx;height: 36rpx;" :src="webUrl + '/20210302150736618877.png'" mode=""></image>
             </view>
           </view>
           <view class="separator-block acea-row row-column row-middle" style="flex-shrink: 0;">
@@ -173,12 +209,12 @@
               <view class="acea-row row-middle">
                 <view class="acea-row row-middle">
                   <image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;"
-                         :src="webUrl+'/20230803152147141807.png'"/>
+                         :src="webUrl + '/20230803152147141807.png'"/>
                   <text class="seeNum-txt">{{ info.pv }}</text>
                 </view>
                 <view class="acea-row row-middle" style="margin-left: 20rpx;">
                   <image style="width: 28rpx;height: 28rpx;margin-right: 4rpx;"
-                         :src="webUrl+'/20230803151302213857.png'" mode=""></image>
+                         :src="webUrl + '/20230803151302213857.png'" mode=""></image>
                   <text class="likeNum-txt">{{ info.zan }}</text>
                 </view>
               </view>
@@ -190,8 +226,17 @@
     </view>
 
     <!-- 商家资质 -->
-    <view style="padding: 32rpx" v-if="activeIndex===2">
-      <image class="store-img" :src="item.image" mode="widthFix" v-for="item in inn.qualifications"/>
+    <view
+      v-if="activeIndex===2"
+      style="padding: 32rpx"
+    >
+      <image
+        v-for="(item, index) in inn.qualifications"
+        :key="index"
+        :src="item.image"
+        class="store-img"
+        mode="widthFix"
+      />
     </view>
 
     <!-- v4 商品列表 -->
@@ -201,12 +246,12 @@
         <view class="">
           <view class="name more-t">{{ item.storeName }}</view>
           <view class="price-line flex ai-center">
-            <img class="label" :src="webUrl+'/20221118104357701129.png'" mode="scaleToFill">
+            <img class="label" :src="webUrl + '/20221118104357701129.png'" mode="scaleToFill">
             <text>￥{{ item.price }}</text>
           </view>
         </view>
         <view class="sales-line flex ai-center">
-          <img class="icon" :src="webUrl+'/20221118092713277343.png'" mode="scaleToFill">
+          <img class="icon" :src="webUrl + '/20221118092713277343.png'" mode="scaleToFill">
           <text>{{ item.sales }}人已购买</text>
         </view>
       </view>
@@ -253,7 +298,11 @@ export default {
       picColumnWidth: '325rpx',
       scrollData: {},
       infoArray: [],
-      inn: {},
+      inn: {
+        cityName: '',
+        pics: [],
+        desc: ''
+      },
       isMyInn: false, //是否是自己的客栈
       goodsList: [],
       goodsPage: 1,
@@ -1095,4 +1144,12 @@ export default {
   line-height: 40rpx;
   color: #A6AAB3;
 }
+.tab-item-active {
+  color:#080F1A;
+  font-size:32rpx;
+}
+.tab-item-no-active {
+  color:#A6AAB3;
+  font-size:28rpx;
+}
 </style>