jufubao-mall 2.0.32-beta8 → 2.0.32

package/src/components/CusShops/CusShops.vue

@@ -1,135 +1,141 @@
 
 <template>
-  <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 :style="[{'--main-color': mainColor,'--sub-main-color': subMainColor}]">
+    <view class="shopping-ske" v-if="dataList ===null">null</view>
     <view
       class="shopping"
-      v-else-if="dataShopList.length > 0"
+      v-else-if="dataList.length > 0"
       :style="[cusStyle['box']||{}]"
     >
       <view
         class="shopping-list"
-        v-for="(item) in dataShopList"
+        v-for="item in dataList"
         :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, 'DL')"
+        @click="handleClick(item, 'handleToDetail', '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']||{}]">{{item[compMK.name]}}</view>
-              <view class="distance" v-if="!address && distance && layout === 'v2' && item[compMK.distance]">{{item[compMK.distance]}}</view>
+              <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>
             <view class="shopping-info">
               <view
-                :class="{'shopping-address-v2':  layout === 'v2'}"
                 class="shopping-address"
-                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>
+                :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>
                 </view>
               </view>
             </view>
           </view>
-          <view class="shopping-btn" v-if="layout === 'v3'">
+          <view class="shopping-btn">
             <!--v3-->
-            <view class="distance" v-show="distance && item[compMK.distance]" >
+            <view class="distance" v-if="distanceStyle === 'button' && item[compMK.distance]" >
               <xd-font-icon :style="[cusStyle['distance']||{}]" icon="icondizhi" size="26"></xd-font-icon>
-              <text :style="[cusStyle['distance']||{}]" style="margin-left: 10rpx" >{{item[compMK.distance]}}</text>
+              <text :style="[cusStyle['distance']||{}]" style="margin-left: 10rpx" v-html="item[compMK.distance]"></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>
+            <!--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>
-            <!--v3-->
+            <!--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>
+            </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>
+            <!--按钮-->
           </view>
         </view>
         <!--信息区域-->
       </view>
     </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 class="shopping-empty" v-else-if="dataList.length === 0"></view>
   </view>
 
 </template>
@@ -137,17 +143,12 @@
 <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:{
-    CusPrice,
-    XdFontIcon,
-    XdNoData
+    XdFontIcon
   },
   props:{
     list: {
@@ -170,7 +171,7 @@ export default {
     content:{
       type: Array|null,
       default(){
-        return ['image', 'address', 'distance','price']
+        return ['image', 'address', 'distance', 'discount','price']
       }
     },
     isShowBtn:{
@@ -187,7 +188,7 @@ export default {
     },
     names:{
       type: Object,
-      //jhd,wb,qp,seat,code，hdself，travel
+      //jhd,scan,takeGoods,buyTicket,code
       default(){
         return {}
       }
@@ -198,41 +199,29 @@ 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:false,
+      address:true,
       distance: false,
       price: false,
-      isPlus:false,
+      discount: 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', //店铺地址
@@ -240,164 +229,129 @@ export default {
         discount : 'discount_ratio', //折扣
         price:'price', //价格
         mode:'consume_mode',//标签类型[]
-        options:'consume_options',
+        defType:'default_consume_type',
       },
 
       //自定义名称
       defName:{
-        jhd:'聚好兑', //聚好兑
-        wb:'扫一扫', //扫一扫
-        qp:'去提货', //快捷码
-        seat: "去订票", //在选选座
-        code:'电子码', //电子码名字
-        hdself:'去下单', //到店自取名字
-        travel: '去订票 ', //旅游订票
+        jhd: "聚好兑",  //聚好兑名称
+        scan: "扫一扫", //扫一扫名称
+        takeGoods: "展快捷码", //展快捷码名称
+        buyTicket: "去购票", //去购票名称
+        code:'电子码' //电子码名字
       },
 
       defEntry:{
-        jhd:false, //聚好兑
-        wb:false, //扫一扫
-        qp:false, //快捷码
-        seat: false, //在选选座
-        code:false, //电子码
-        hdself:false, //到店自取
-        travel: false, //旅游订票
+        jhd: false,  //聚好兑名称
+        scan: false, //扫一扫名称
+        takeGoods: false, //展快捷码名称
+        buyTicket: false, //去购票名称
+        code:false //电子码名字
       },
 
-
-      dataShopList:null,
-
-      iconThemeStyle:{}
+      //按钮功能
+      buttons:[],
     }
   },
   computed:{
-    skeNumComp(){
-      return this.layout === 'v2'?5: 6;
+    dataList(){
+      if(this.list === null) return null;
+      else if(this.$xdUniHelper.checkVarType(this.list) === 'array'){
+        return  this.$xdUniHelper.cloneDeep(this.list);
+      }
+      return []
     },
-    activeComp(){
-      let border = `rgba(${Color(this.mainColor).alpha(0.6).array().join(',')})`;
-      let bgColor= `rgba(${Color(this.mainColor).alpha(.05).array().join(',')})`;
+
+    compTagsStyle(){
+      let textColor = `rgba(${Color(this.mainColor).alpha(0.1).array().join(',')})`;
       return {
-        '--xd-bgColor': bgColor,
-        '--xd-border': `1px solid ${border}`
+        backgroundColor: textColor,
+        color: this.mainColor,
       }
     },
 
     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 && this.isShowBtn
+      return flag
     }
   },
   filters:{
-    filterName(val){
-      return $vm.compNames[val.toLocaleLowerCase()];
+    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);
     },
   },
   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:{
-    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()] //过滤未开启按钮设置
-      });
-    },
-    checkOneCodeDetailJumpCode(item){
-      //未开启智能识别功能并且没有返回options字段
-      if(this.isAutoJump.length === 0 ||
-        item[this.compMK['options']] === undefined ||
-        item[this.compMK['options']].length === 0
-      ) return false
-
-
-      //按钮数量大于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())
+    handleError(item){
+      item.errorStatus = true;
     },
-    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)=>{
+    layoutParse(value){
+      let distanceStyle = 'title';
+      let tagPos = '';
 
-          //过滤不支持的按钮
-          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']] = [];
+      //布局1
+      if(['v1'].includes(value)) {
+        tagPos = 'btn'
+      }
 
-          item[this.compMK['image']] = getServiceUrl(item[this.compMK['image']], 'size2')
-          //是否智能识别一个按钮模式
-          item['isOneCodeDetailJumpCode'] = this.checkOneCodeDetailJumpCode(item);
+      //布局2
+      if(['v2'].includes(value)) {
+        tagPos = 'info'
+      }
 
-          if(item['errorStatus'] === undefined) item['errorStatus'] = false;
-          return item
-        });
+      //电影模式
+      if(['v3'].includes(value)) {
+        distanceStyle = 'button';
       }
-      else this.dataShopList = [];
-    },
-    handleError(item){
-      item.errorStatus = true;
+      this.tagPos = tagPos;
+      this.distanceStyle  = distanceStyle;
     },
     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, type) {
-      //当只有一个服务器点击详情直接进入服务
-      if(item['isOneCodeDetailJumpCode'] === true) type = item[this.compMK['mode']][0]
-      this.$emit('on-event', {item,type});
+    handleClick(item, funcName, type) {
+      this.$emit('on-event', {item,funcName,type});
     }
   }
 }
@@ -405,8 +359,10 @@ export default {
 </script>
 <style scoped lang="less">
   .shopping {
-    &-list,&-ske-item {
+    &-list {
       background-color: #fff;
+      padding: 20rpx;
+      margin-top: 20rpx;
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
@@ -414,60 +370,32 @@ 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,&-ske-image {
-      width: 160rpx;
-      height: 160rpx;
-      margin-right: 16rpx;
+    &-img {
+      width: 200rpx;
+      height: 200rpx;
+      margin-right: 20rpx;
       flex-shrink: 0;
-      overflow: hidden;
 
       & > image {
-        width: 160rpx;
-        height: 160rpx;
+        width: 200rpx;
+        height: 200rpx;
       }
     }
 
-    &-ske-image{
-      .skeleton-item(160rpx, 160rpx)
-    }
-
-    &-cont,&-ske-cont {
+    &-cont {
       flex: 1;
       display: flex;
       flex-wrap: wrap;
       align-content: space-between;
-      min-height: 160rpx;
+      min-height: 200rpx;
       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: 16rpx;
+          margin-top: 32rpx;
         }
       }
 
@@ -477,19 +405,17 @@ export default {
       }
     }
 
-    &-name,&-ske-name {
+    &-name {
       display: flex;
       justify-content: flex-start;
       align-items: center;
       & .name {
         font-size: 32rpx;
         font-weight: 400;
-        line-height: 1.5;
-        .uni-cut(1,48);
+        line-height: 40rpx;
+        .uni-cut(1,40);
         flex: 1;
         color: #333;
-        word-wrap: break-word;
-        word-break: break-all;
       }
 
       & .distance {
@@ -499,151 +425,36 @@ 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: 8rpx;
-
-        &-item {
+        margin-top: 16rpx;
+        &-tag {
           display: flex;
           justify-content: flex-start;
           align-items: center;
-          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;
-          }
-
+          font-size: 24rpx;
+          color: #999;
         }
       }
     }
 
     &-address {
       margin-top: 16rpx;
+      font-size: 24rpx;
+      color: #999;
+      line-height: 32rpx;
+      .uni-max-cut(2,64);
 
-      &-v2 {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-
-        & > view.distance {
-          flex-shrink: 0;
-          margin-left: 20rpx;
-          font-size: 24rpx;
-          color: #999;
-        }
+      &.one {
+        .uni-max-cut(1,32);
       }
-      & > 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: flex-end;
-      align-items: flex-end;
-      height: 64rpx;
-      margin-top: 10rpx;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 16rpx;
 
       & .distance {
         display: flex;
@@ -651,23 +462,15 @@ 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;
-          }
         }
 
       }
@@ -676,24 +479,21 @@ export default {
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        flex: 1;
-        height: 64rpx;
-
         & .change_btn{
+          padding: 0 16rpx;
           height: 48rpx;
-          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;
+          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);
           }
         }
       }