jufubao-mall 2.0.32 → 2.0.34

package/src/components/CusShops/CusShops.vue

@@ -1,141 +1,135 @@
 
 <template>
-  <view :style="[{'--main-color': mainColor,'--sub-main-color': subMainColor}]">
-    <view class="shopping-ske" v-if="dataList ===null">null</view>
+  <view :style="[{'--main-color': mainColor,'--sub-main-color': subMainColor},activeComp]">
+    <view class="shopping-ske-box" v-if="dataShopList ===null">
+      <view
+        class="shopping-ske-item"
+        v-for="item in skeNumComp"
+        :key="item"
+        :style="[cusStyle['item']||{}]"
+      >
+        <view class="shopping-ske-image" v-if="image">
+          <view></view>
+        </view>
+        <view class="shopping-ske-cont">
+          <view class="shopping-ske-name"></view>
+          <view class="shopping-ske-address">
+            <view class="address" v-if="address"></view>
+            <view class="shopping-ske-v2" v-if="layout === 'v2'">
+              <view>
+                <view class="ske1"></view>
+                <view class="ske2"></view>
+                <view class="ske3"></view>
+                <view class="ske4"></view>
+              </view>
+              <view>
+                <view class="ske1"></view>
+                <view class="ske2"></view>
+                <view class="ske3"></view>
+              </view>
+            </view>
+          </view>
+          <view class="shopping-ske-v3" v-if="layout === 'v3'">
+            <view></view>
+            <view>
+              <view></view>
+              <view></view>
+            </view>
+
+          </view>
+        </view>
+      </view>
+    </view>
     <view
       class="shopping"
-      v-else-if="dataList.length > 0"
+      v-else-if="dataShopList.length > 0"
       :style="[cusStyle['box']||{}]"
     >
       <view
         class="shopping-list"
-        v-for="item in dataList"
+        v-for="(item) in dataShopList"
         :key="item[compMK.id]"
+        :id="`shop_item_${item[compMK.id]}`"
+        :class="{active: [
+          item[compMK.id].toString(),
+          item[compMK.shop_id].toString()
+        ].includes(selectId)}"
         :style="[cusStyle['item']||{}]"
-        @click="handleClick(item, 'handleToDetail', 'DL')"
+        @click="handleClick(item, 'DL')"
       >
         <!--图片区域-->
         <view class="shopping-img" v-if="image" :style="[cusStyle['image']||{}]">
+          <image v-if="!item.errorStatus" :src="item[compMK.image]" :alt="item[compMK.name]" mode="aspectFit" @error="handleError(item)"></image>
           <image v-if="item.errorStatus" :src="errorImage" :alt="item[compMK.name]"></image>
-          <image v-else :src="item[compMK.image]" :alt="item[compMK.name]" mode="aspectFit" @error="handleError(item)"></image>
         </view>
         <!--图片区域-->
         <!--信息区域-->
         <view class="shopping-cont" :class="{noImage: !image}">
           <view class="shopping-cont-nameInfo">
             <view class="shopping-name">
-              <view class="name" :style="[cusStyle['name']||{}]" v-html="item[compMK.name]"></view>
-              <view
-                class="distance"
-                v-if="distance && distanceStyle === 'title' && item[compMK.distance]"
-                v-html="item[compMK.distance]"
-                :style="[cusStyle['distance']||{}]"
-              ></view>
-              <view class="priceAndDiscount" v-if="distanceStyle === 'button'">
-                <view class="price" v-if="price && item[compMK.price]">
-                  <text>{{item[compMK.price]|filterPrice}}</text>
-                  <text>起</text>
-                </view>
-                <view class="discount" v-if="discount && item[compMK.discount]">
-                  <text>{{item[compMK.discount]|filterDiscount}}</text>
-                  <text>折</text>
-                </view>
-              </view>
+              <view class="name" :style="[cusStyle['name']||{}]">{{item[compMK.name]}}</view>
+              <view class="distance" v-if="!address && distance && layout === 'v2' && item[compMK.distance]">{{item[compMK.distance]}}</view>
             </view>
             <view class="shopping-info">
               <view
+                :class="{'shopping-address-v2':  layout === 'v2'}"
                 class="shopping-address"
-                :class="{one: tagPos === 'info'}"
-                v-if="address"
-                v-html="item[compMK.address]"
-              ></view>
-              <view class="tags-info" v-if="tagPos === 'info'">
-                <view class="tags-info-tag">
-                  <xd-font-icon icon="iconduihuan" color="#43CF7C" size="28" style="margin-right: 8rpx;"></xd-font-icon>
-                  <text>支持到店使用</text>
+                v-if="address || distance"
+              >
+                <view class="address one" v-if="address && item[compMK.address]">{{item[compMK.address]}}</view>
+                <view class="distance" v-if="address && distance && layout === 'v2' && item[compMK.distance]">{{item[compMK.distance]}}</view>
+              </view>
+              <view class="tags-info" v-if="layout === 'v2' && isBtn">
+                <view
+                  class="tags-info-item"
+                  v-for="btn in item[compMK.options]"
+                  :key="btn['consume_mode']"
+                >
+                  <view class="tags-info-icon"><xd-font-icon :icon="btn.icon" size="32" :color="iconThemeStyle[btn.icon]"></xd-font-icon></view>
+                  <view class="tags-info-price" v-if="price && btn.show_prices && btn.show_prices.length > 0">
+                    <cus-price
+                      type="normal"
+                      :isPlus="isPlus"
+                      :icon-size=".20"
+                      text-font-size="22"
+                      :showPrice="btn.show_prices"
+                    ></cus-price>
+                  </view>
+                  <view class="tags-info-desc">{{btn.desc}}</view>
+                  <view
+                    class="tags-info-btn"
+                    v-if="btn['consume_mode'] !== 'CODE'"
+                    @click.stop="handleClick(item, btn['consume_mode'])"
+                  ><view>{{btn['consume_mode']|filterName}}</view></view>
                 </view>
               </view>
             </view>
           </view>
-          <view class="shopping-btn">
+          <view class="shopping-btn" v-if="layout === 'v3'">
             <!--v3-->
-            <view class="distance" v-if="distanceStyle === 'button' && item[compMK.distance]" >
+            <view class="distance" v-show="distance && item[compMK.distance]" >
               <xd-font-icon :style="[cusStyle['distance']||{}]" icon="icondizhi" size="26"></xd-font-icon>
-              <text :style="[cusStyle['distance']||{}]" style="margin-left: 10rpx" v-html="item[compMK.distance]"></text>
+              <text :style="[cusStyle['distance']||{}]" style="margin-left: 10rpx" >{{item[compMK.distance]}}</text>
             </view>
-            <!--v3-->
-            <!--v2-->
-            <view v-if="tagPos === 'info'">
-              <view class="priceAndDiscount">
-                <view class="price" v-if="price && item[compMK.price]">
-                  <text>{{item[compMK.price]|filterPrice}}</text>
-                  <text>起</text>
-                </view>
-                <view class="discount" v-if="discount && item[compMK.discount]">
-                  <text>{{item[compMK.discount]|filterDiscount}}</text>
-                  <text>折</text>
-                </view>
-              </view>
-            </view>
-            <!--v2-->
-            <!--v1-->
-            <template v-if="tagPos === 'btn'">
-              <view v-if="!isShowBtn" class="tags">
-                <view :style="[compTagsStyle]" v-if="item[compMK.mode].includes('SELL')">支持核销</view>
-                <view :style="[compTagsStyle]" v-if="item[compMK.mode].includes('SEAT')">在线选座</view>
-              </view>
-              <view class="priceAndDiscount">
-                <view class="price" v-if="price && item[compMK.price]">
-                  <text>{{item[compMK.price]|filterPrice}}</text>
-                  <text>起</text>
-                </view>
-                <view class="discount" v-if="discount && item[compMK.discount]">
-                  <text>{{item[compMK.discount]|filterDiscount}}</text>
-                  <text>折</text>
-                </view>
+            <view class="buttons" v-if="isBtn">
+              <view
+                v-for="btn in item[compMK.options]"
+                :key="btn['consume_mode']"
+                class="change_btn"
+                @click.stop="handleClick(item, btn['consume_mode'])"
+              >
+                <view>{{btn['consume_mode']|filterName}}</view>
               </view>
-            </template>
-            <!--v1-->
-            <!--按钮-->
-            <view class="buttons" v-if="isShowBtn && isBtn">
-              <!-- CV:店员核销（小蜜蜂）；WB:用户扫水牌；CR:收银机；POS:POS机；JHD:聚好兑; QP：快捷支付；MC电影去购买-->
-              <template v-if="item[compMK.mode].includes('SELL')">
-                <view
-                  v-if="item[compMK.defType] === 'WB' && compEntry.scan === true"
-                  class="change_btn"
-                  @click.stop="handleClick(item, 'handleToScan', item[compMK.defType])"
-                >{{ compNames.scan }}</view>
-                <view
-                  v-else-if="item[compMK.defType] === 'QP' && compEntry.takeGoods === true"
-                  class="change_btn"
-                  @click.stop="handleClick(item,'handleToEasyPay',item[compMK.defType])"
-                >{{ compNames.takeGoods }}</view>
-                <view
-                  v-else-if="item[compMK.defType] === 'JHD' && compEntry.jhd === true"
-                  class="change_btn"
-                  @click.stop="handleClick(item,'handleToExchange',item[compMK.defType])"
-                >{{ compNames.jhd }}</view>
-              </template>
-              <template v-if="item[compMK.mode].includes('SEAT') && compEntry.buyTicket === true">
-                <view
-                  class="change_btn"
-                  @click.stop="handleClick(item,'toSchedulePath','SEAT')"
-                >{{ compNames.buyTicket}}</view>
-              </template>
-              <template v-if="item[compMK.mode].includes('CODE') && compEntry.code === true">
-                <view
-                  class="change_btn code"
-                  @click.stop="handleClick(item,'toCodePath','CODE')"
-                >{{ compNames.code}}</view>
-              </template>
             </view>
-            <!--按钮-->
+            <!--v3-->
           </view>
         </view>
         <!--信息区域-->
       </view>
     </view>
-    <view class="shopping-empty" v-else-if="dataList.length === 0"></view>
+    <view class="shopping-empty" v-else-if="dataShopList.length === 0">
+      <xd-no-data :scale-size="2" icon-type="shop">暂无门店信息</xd-no-data>
+    </view>
   </view>
 
 </template>
@@ -143,12 +137,17 @@
 <script>
 import XdFontIcon from "@/components/XdFontIcon/XdFontIcon.vue";
 import Color from "color";
+import CusPrice from "@/components/CusPrice/CusPrice.vue";
+import XdNoData from "@/components/XdNoData/XdNoData.vue";
+import getServiceUrl from "@/common/getServiceUrl";
 let $vm = null;
 
 export default {
   name:'CusShops',
   components:{
-    XdFontIcon
+    CusPrice,
+    XdFontIcon,
+    XdNoData
   },
   props:{
     list: {
@@ -171,7 +170,7 @@ export default {
     content:{
       type: Array|null,
       default(){
-        return ['image', 'address', 'distance', 'discount','price']
+        return ['image', 'address', 'distance','price']
       }
     },
     isShowBtn:{
@@ -188,7 +187,7 @@ export default {
     },
     names:{
       type: Object,
-      //jhd,scan,takeGoods,buyTicket,code
+      //jhd,wb,qp,seat,code，hdself，travel
       default(){
         return {}
       }
@@ -199,29 +198,41 @@ export default {
         return {}
       }
     },
+    //jhd,wb,qp,seat,code，hdself，travel
     entry:{
       type:Object,
       default(){
         return {}
       }
-    }
+    },
+    selectId:{
+      type:String,
+      default:''
+    },
+    //是否智能识别一个按钮模式
+    isAutoJump:{
+      type:Array,
+      default(){
+        return []
+      },
+    },
   },
   data(){
     return {
-      distanceStyle:'title',//title:标题后面  button: 操作按钮左侧
-      tagPos: 'info', //info=>信息下方  btn: 操作按钮左侧
       errorImage:'https://img0.jufubao.cn/common/empty/shop.png?v1=1',
 
       //内容区状态
       image: false,
-      address:true,
+      address:false,
       distance: false,
       price: false,
-      discount: false,
+      isPlus:false,
 
       //数据键值map关系
       defMapKeys:{
         id: 'resource_shop_id',
+        brand_id: 'brand_id',//品牌ID
+        shop_id:'shop_id',//整理前的门店ID
         name: 'resource_shop_name', //店铺名字
         distance: 'distance', //距离
         address:'address', //店铺地址
@@ -229,129 +240,164 @@ export default {
         discount : 'discount_ratio', //折扣
         price:'price', //价格
         mode:'consume_mode',//标签类型[]
-        defType:'default_consume_type',
+        options:'consume_options',
       },
 
       //自定义名称
       defName:{
-        jhd: "聚好兑",  //聚好兑名称
-        scan: "扫一扫", //扫一扫名称
-        takeGoods: "展快捷码", //展快捷码名称
-        buyTicket: "去购票", //去购票名称
-        code:'电子码' //电子码名字
+        jhd:'聚好兑', //聚好兑
+        wb:'扫一扫', //扫一扫
+        qp:'去提货', //快捷码
+        seat: "去订票", //在选选座
+        code:'电子码', //电子码名字
+        hdself:'去下单', //到店自取名字
+        travel: '去订票 ', //旅游订票
       },
 
       defEntry:{
-        jhd: false,  //聚好兑名称
-        scan: false, //扫一扫名称
-        takeGoods: false, //展快捷码名称
-        buyTicket: false, //去购票名称
-        code:false //电子码名字
+        jhd:false, //聚好兑
+        wb:false, //扫一扫
+        qp:false, //快捷码
+        seat: false, //在选选座
+        code:false, //电子码
+        hdself:false, //到店自取
+        travel: false, //旅游订票
       },
 
-      //按钮功能
-      buttons:[],
+
+      dataShopList:null,
+
+      iconThemeStyle:{}
     }
   },
   computed:{
-    dataList(){
-      if(this.list === null) return null;
-      else if(this.$xdUniHelper.checkVarType(this.list) === 'array'){
-        return  this.$xdUniHelper.cloneDeep(this.list);
-      }
-      return []
+    skeNumComp(){
+      return this.layout === 'v2'?5: 6;
     },
-
-    compTagsStyle(){
-      let textColor = `rgba(${Color(this.mainColor).alpha(0.1).array().join(',')})`;
+    activeComp(){
+      let border = `rgba(${Color(this.mainColor).alpha(0.6).array().join(',')})`;
+      let bgColor= `rgba(${Color(this.mainColor).alpha(.05).array().join(',')})`;
       return {
-        backgroundColor: textColor,
-        color: this.mainColor,
+        '--xd-bgColor': bgColor,
+        '--xd-border': `1px solid ${border}`
       }
     },
 
     compNames(){
-      return Object.assign({}, this.defName,this.$xdUniHelper.cloneDeep(this.names) )
+      return Object.assign({},this.defName,this.$xdUniHelper.cloneDeep(this.names))
     },
+
     compMK(){
       return Object.assign({},this.defMapKeys,this.$xdUniHelper.cloneDeep(this.mapKeys))
     },
     compEntry(){
       return Object.assign({},this.defEntry,this.$xdUniHelper.cloneDeep(this.entry))
     },
+
     isBtn(){
       let flag = false;
       Object.keys(this.compEntry).map(key=>{
         if(this.compEntry[key] === true) flag = true;
       });
-      return flag
+      return flag && this.isShowBtn
     }
   },
   filters:{
-    filterPrice(val){
-      if(typeof val === 'string') val = Number(val)
-      return $vm.$xdUniHelper.divisionFloatNumber(val,100);
-    },
-    filterDiscount(val){
-      if(typeof val === 'string') val = Number(val)
-      return $vm.$xdUniHelper.divisionFloatNumber(val,1000);
+    filterName(val){
+      return $vm.compNames[val.toLocaleLowerCase()];
     },
   },
   watch:{
-    layout(val){
-      this.layoutParse(val)
-    },
     content(val){
       this.contentParse(val)
     },
+    list(){
+      this.initData();
+    },
+    compMK(){
+      this.initData();
+    },
+    compEntry(){
+      this.initData();
+    }
   },
   created() {
     $vm = this;
-    this.layoutParse(this.layout);
     this.contentParse(this.content);
+    this.initData();
+    this.iconThemeStyle = {
+      iconduihuan: '#43CF7C',
+      iconquan: '#FF8D1A',
+      icongou: '#FF5733',
+      iconzuo: '#3091FF',
+      iconpiao1: '#3091FF'
+    }
   },
   methods:{
-    handleError(item){
-      item.errorStatus = true;
+    filterNotSupportCode(options){
+      let supportCode = ['seat','hdself','travel','code','jhd','wb','qp'];
+      return options.filter(it=>{
+        return supportCode.includes(it.consume_mode.toLocaleLowerCase()); //过滤不支持的按钮
+      }).filter(it=>{
+        return this.entry[it.consume_mode.toLocaleLowerCase()] //过滤未开启按钮设置
+      });
     },
-    layoutParse(value){
-      let distanceStyle = 'title';
-      let tagPos = '';
+    checkOneCodeDetailJumpCode(item){
+      //未开启智能识别功能并且没有返回options字段
+      if(this.isAutoJump.length === 0 ||
+        item[this.compMK['options']] === undefined ||
+        item[this.compMK['options']].length === 0
+      ) return false
 
-      //布局1
-      if(['v1'].includes(value)) {
-        tagPos = 'btn'
-      }
 
-      //布局2
-      if(['v2'].includes(value)) {
-        tagPos = 'info'
-      }
+      //按钮数量大于1一条不处理
+      let options = item[this.compMK['options']];
+      if(options.length > 1)  return false;
+
+      //智能识别
+      let filterCode = ['seat','hdself','travel'];
+      return filterCode.includes(options[0].consume_mode.toLocaleLowerCase())
+    },
+    initData(){
+      if(this.list === null) this.dataShopList = null;
+      else if(this.$xdUniHelper.checkVarType(this.list) === 'array'){
+        this.dataShopList =  this.$xdUniHelper.cloneDeep(this.list).map((item,index)=>{
+
+          //过滤不支持的按钮
+          if(item[this.compMK['options']] && item[this.compMK['options']].length > 0) {
+            item[this.compMK['options']] = this.filterNotSupportCode(item[this.compMK['options']])
+          }
+          else item[this.compMK['options']] = [];
 
-      //电影模式
-      if(['v3'].includes(value)) {
-        distanceStyle = 'button';
+          item[this.compMK['image']] = getServiceUrl(item[this.compMK['image']], 'size2')
+          //是否智能识别一个按钮模式
+          item['isOneCodeDetailJumpCode'] = this.checkOneCodeDetailJumpCode(item);
+
+          if(item['errorStatus'] === undefined) item['errorStatus'] = false;
+          return item
+        });
       }
-      this.tagPos = tagPos;
-      this.distanceStyle  = distanceStyle;
+      else this.dataShopList = [];
+    },
+    handleError(item){
+      item.errorStatus = true;
     },
     contentParse(value){
       this.image = value.includes('image')
       this.address = value.includes('address')
       this.distance = value.includes('distance')
-      //价格和折扣只有在v1，v2线上
       this.price = value.includes('price')
-      this.discount = value.includes('discount')
     },
 
     /**
      * @description 事件操作
      * @param item {Object}  数据对象
-     * @param funcName {string}  操作方法名字
      * @param type {string} 类型
      */
-    handleClick(item, funcName, type) {
-      this.$emit('on-event', {item,funcName,type});
+    handleClick(item, type) {
+      //当只有一个服务器点击详情直接进入服务
+      if(item['isOneCodeDetailJumpCode'] === true) type = item[this.compMK['mode']][0]
+      this.$emit('on-event', {item,type});
     }
   }
 }
@@ -359,10 +405,8 @@ export default {
 </script>
 <style scoped lang="less">
   .shopping {
-    &-list {
+    &-list,&-ske-item {
       background-color: #fff;
-      padding: 20rpx;
-      margin-top: 20rpx;
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
@@ -370,32 +414,60 @@ export default {
       &:first-child {
         margin-top: 0;
       }
+
+      &:last-child {
+        margin-bottom: 0!important;
+      }
+
+      &.active {
+        background-color: var(--xd-bgColor)!important;
+        border: var(--xd-border)!important;
+      }
     }
-    &-img {
-      width: 200rpx;
-      height: 200rpx;
-      margin-right: 20rpx;
+    &-img,&-ske-image {
+      width: 160rpx;
+      height: 160rpx;
+      margin-right: 16rpx;
       flex-shrink: 0;
+      overflow: hidden;
 
       & > image {
-        width: 200rpx;
-        height: 200rpx;
+        width: 160rpx;
+        height: 160rpx;
       }
     }
 
-    &-cont {
+    &-ske-image{
+      .skeleton-item(160rpx, 160rpx)
+    }
+
+    &-cont,&-ske-cont {
       flex: 1;
       display: flex;
       flex-wrap: wrap;
       align-content: space-between;
-      min-height: 200rpx;
+      min-height: 160rpx;
       justify-items: flex-end;
 
+
+      // #ifdef MP-WEIXIN
+      &-nameInfo {
+        width: 100%;
+      }
+
+      & > .shopping-btn {
+        width: 100%;
+      }
+      // #endif
+
+
       &.noImage {
         min-height: 0;
+        align-content: normal;
+        display: block;
 
         & .shopping-btn {
-          margin-top: 32rpx;
+          margin-top: 16rpx;
         }
       }
 
@@ -405,17 +477,19 @@ export default {
       }
     }
 
-    &-name {
+    &-name,&-ske-name {
       display: flex;
       justify-content: flex-start;
       align-items: center;
       & .name {
         font-size: 32rpx;
         font-weight: 400;
-        line-height: 40rpx;
-        .uni-cut(1,40);
+        line-height: 1.5;
+        .uni-cut(1,48);
         flex: 1;
         color: #333;
+        word-wrap: break-word;
+        word-break: break-all;
       }
 
       & .distance {
@@ -425,36 +499,151 @@ export default {
       }
     }
 
+    &-ske-name {
+      .skeleton-item(80%, 50rpx)
+    }
+
+    &-ske-address {
+      margin-top: 10rpx;
+      & .address {
+        .skeleton-item(100%, 36rpx)
+      }
+    }
+
+    &-ske-v2 {
+      & > view {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        & > view {
+          margin-top: 10rpx;
+          margin-right: 10rpx;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+
+        & > .ske1 {
+          .skeleton-item(36rpx, 36rpx);
+          flex-shrink: 0;
+        }
+        & > .ske2 {
+          .skeleton-item(80rpx, 36rpx);
+          flex-shrink: 0;
+        }
+        & > .ske3 {
+          .skeleton-item(60%, 36rpx);
+          flex: 1;
+        }
+        & > .ske4 {
+          .skeleton-item(80rpx, 36rpx);
+          flex-shrink: 0;
+        }
+      }
+    }
+
+    &-ske-v3 {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      margin-top: 10rpx;
+
+      & > view:first-child {
+        .skeleton-item(100rpx, 26rpx);
+      }
+
+      & > view {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        view {
+          .skeleton-item(120rpx, 50rpx);
+          margin-left: 10rpx;
+        }
+
+      }
+    }
+
     &-info {
       & .tags-info {
-        margin-top: 16rpx;
-        &-tag {
+        margin-top: 8rpx;
+
+        &-item {
           display: flex;
           justify-content: flex-start;
           align-items: center;
-          font-size: 24rpx;
-          color: #999;
+          min-height: 64rpx;
+
+          & > view {
+            margin-right: 10rpx;
+            font-size: 24rpx;
+            flex-shrink: 0;
+
+            &.tags-info-desc {
+              color: #999;
+              flex: 1;
+              .uni-cut(1,32);
+            }
+          }
+        }
+
+        &-btn {
+          height: 64rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding-left: 40rpx;
+          margin-right: 0!important;
+          & > view {
+            height: 48rpx;
+            padding: 0 16rpx;
+            line-height: 48rpx;
+            background-color: var(--g-theme-mainColor);
+            color: #fff;
+            border-radius: 24rpx;
+          }
+
         }
       }
     }
 
     &-address {
       margin-top: 16rpx;
-      font-size: 24rpx;
-      color: #999;
-      line-height: 32rpx;
-      .uni-max-cut(2,64);
 
-      &.one {
-        .uni-max-cut(1,32);
+      &-v2 {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        & > view.distance {
+          flex-shrink: 0;
+          margin-left: 20rpx;
+          font-size: 24rpx;
+          color: #999;
+        }
       }
+      & > view.address {
+        font-size: 24rpx;
+        color: #999;
+        line-height: 1.5em;
+        word-wrap: break-word;
+        word-break: break-all;
+        .uni-max-cut(2,72);
+        flex: 1;
+
+        &.one {
+          .uni-max-cut(1,36);
+        }
+      }
+
     }
 
     &-btn {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-top: 16rpx;
+      justify-content: flex-end;
+      align-items: flex-end;
+      height: 64rpx;
+      margin-top: 10rpx;
 
       & .distance {
         display: flex;
@@ -462,15 +651,23 @@ export default {
         flex-shrink: 0;
         font-size: 24rpx;
         color: #999;
+        margin-bottom: 12rpx;
       }
 
       & .tags {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
         & > view {
           font-size: 24rpx;
           height: 42rpx;
           line-height: 42rpx;
           border-radius: 12rpx;
           padding: 0 16rpx;
+          margin-right: 16rpx;
+          &:last-child {
+            margin-right: 0;
+          }
         }
 
       }
@@ -479,21 +676,24 @@ export default {
         display: flex;
         justify-content: flex-end;
         align-items: center;
+        flex: 1;
+        height: 64rpx;
+
         & .change_btn{
-          padding: 0 16rpx;
           height: 48rpx;
-          line-height: 48rpx;
-          border-radius: 24rpx;
-          background-color: var(--main-color);
-          font-size: 24rpx;
-          flex-shrink: 0;
-          color: #fff;
-          & + .change_btn{
-            margin-left: 10rpx;
-          }
-
-          &.code  {
-            background-color: var(--sub-main-color);
+          padding-top: 16rpx;
+          padding-left: 16rpx;
+          padding-bottom: 16rpx;
+
+          & > view {
+            padding: 0 16rpx;
+            height: 48rpx;
+            line-height: 48rpx;
+            border-radius: 24rpx;
+            background-color: var(--main-color);
+            font-size: 24rpx;
+            flex-shrink: 0;
+            color: #fff;
           }
         }
       }