Просмотр исходного кода

解决花店端的横向滚动条

wangn 5 лет назад
Родитель
Сommit
eafc582392
3 измененных файлов с 158 добавлено и 130 удалено
  1. 25 15
      hdApp/src/admin/home/me.vue
  2. 117 109
      hdApp/src/components/plugin/list-cell.vue
  3. 16 6
      hdApp/src/pagesPurchase/order.vue

+ 25 - 15
hdApp/src/admin/home/me.vue

@@ -22,7 +22,10 @@
         <view class="me-shop_content content_box">
           <view class="me-shop_top">
             <view class="shop-top_left">
-              <app-avatar-module :src="infoData.shopImg" :width="100" />
+              <app-avatar-module
+                :src="infoData.shopImg"
+                :width="100"
+              />
               <view class="top-info_box">
                 <view>
                   {{ infoData.sjName }}
@@ -64,8 +67,7 @@
                 v-if="infoData.txBalance > 0"
                 @click="checkToApplyCash"
                 class="to-cash"
-                >提现</text
-              >
+              >提现</text>
             </view>
           </view>
           <button
@@ -155,32 +157,32 @@ export default {
   computed: {
     ...mapGetters(["getLoginInfo"]),
   },
-  data() {
+  data () {
     return {
       constant: this.$constant,
       infoData: {},
     };
   },
-  onPullDownRefresh() {
-					this.init()
+  onPullDownRefresh () {
+    this.init()
   },
-  onShow(){
+  onShow () {
     // this.init()
   },
   methods: {
-    shopShow() {
+    shopShow () {
       this.shopId = this.getLoginInfo.shopId;
       this.$refs.dorpdownSelect.dropdownShow = true;
     },
-    async init() {
+    async init () {
       try {
         const { data } = await mainMy();
         this.infoData = data;
-							uni.stopPullDownRefresh();
+        uni.stopPullDownRefresh();
       } finally {
       }
     },
-    async selectSussess() {
+    async selectSussess () {
       uni.showLoading({
         title: "加载中",
       });
@@ -197,7 +199,7 @@ export default {
         uni.hideLoading();
       }
     },
-    checkToApplyCash() {
+    checkToApplyCash () {
       let self = this;
       //没有设置提现帐号则提示
       if (self.infoData.cashAccount == "") {
@@ -215,10 +217,10 @@ export default {
         self.applyCash();
       }
     },
-    async applyCash() {
-        const { data } = await applyCash({});
+    async applyCash () {
+      const { data } = await applyCash({});
     },
-    _list() {},
+    _list () { },
   },
 };
 </script>
@@ -226,6 +228,7 @@ export default {
 <style lang="scss" scoped>
 .me-content_box {
   position: relative;
+  overflow-x: hidden;
   .content_box {
     background-color: #ffffff;
     box-shadow: 0px 1px 0px 0px #eeeeee;
@@ -240,6 +243,7 @@ export default {
   & .me-user_box {
     position: relative;
     padding: 150upx 30upx 0;
+    box-sizing: border-box;
     z-index: 10;
     & > .user-info_item {
       display: flex;
@@ -266,6 +270,7 @@ export default {
   }
   & .me-shop_box {
     padding: 50upx 20px 0;
+    box-sizing: border-box;
     & .me-shop_content {
       position: relative;
       z-index: 10;
@@ -274,9 +279,11 @@ export default {
         & .shop-top_left {
           display: flex;
           padding: 40upx 30upx;
+          box-sizing: border-box;
           align-items: center;
           & .top-info_box {
             padding-left: 30upx;
+            box-sizing: border-box;
             & > view:nth-child(1) {
               color: #333333;
               font-size: 32upx;
@@ -303,6 +310,7 @@ export default {
           // text-align: center;
           & .iconqiehuan1 {
             margin-right: 10upx;
+            box-sizing: border-box;
           }
         }
       }
@@ -330,6 +338,7 @@ export default {
   & .account-info_box {
     margin-top: 20upx;
     padding: 30upx 20upx;
+    box-sizing: border-box;
     display: flex;
     & .info-lf_box {
       flex: 1;
@@ -365,6 +374,7 @@ export default {
       border-radius: 25upx;
       font-size: 22upx;
       padding: 0 15upx 0 15upx;
+      box-sizing: border-box;
     }
   }
   & .user-open_bx {

+ 117 - 109
hdApp/src/components/plugin/list-cell.vue

@@ -1,124 +1,132 @@
 <template>
-	<view class="tui-cell-class tui-list-cell" :class="{'tui-cell-arrow':arrow,'tui-cell-last':last,'tui-line-left':lineLeft,'tui-line-right':lineRight,'tui-radius':radius}" :hover-class="hover?'tui-cell-hover':''" :style="{background: bgcolor,fontSize: size+'rpx',color:color,padding:padding}" :hover-stay-time="150" @tap="handleClick">
-		<slot></slot>
-	</view>
+  <view
+    class="tui-cell-class tui-list-cell"
+    :class="{'tui-cell-arrow':arrow,'tui-cell-last':last,'tui-line-left':lineLeft,'tui-line-right':lineRight,'tui-radius':radius}"
+    :hover-class="hover?'tui-cell-hover':''"
+    :style="{background: bgcolor,fontSize: size+'rpx',color:color,padding:padding}"
+    :hover-stay-time="150"
+    @tap="handleClick"
+  >
+    <slot></slot>
+  </view>
 </template>
 
 <script>
 export default {
-	name: 'tuiListCell',
-	props: {
-		// 是否有箭头
-		arrow: {
-			type: Boolean,
-			default: false
-		},
-		// 是否有点击效果
-		hover: {
-			type: Boolean,
-			default: true
-		},
-		// left 30rpx
-		lineLeft: {
-			type: Boolean,
-			default: true
-		},
-		// right 30rpx
-		lineRight: {
-			type: Boolean,
-			default: true
-		},
-		padding: {
-			type: String,
-			default: '26rpx 30rpx'
-		},
-		last: {
-			type: Boolean,
-			default: false // 最后一条数据隐藏线条
-		},
-		radius: {
-			type: Boolean,
-			default: false
-		},
-		bgcolor: {
-			type: String,
-			default: '#fff' // 背景颜色
-		},
-		size: {
-			type: Number,
-			default: 28 // 字体大小
-		},
-		color: {
-			type: String,
-			default: '#333' // 字体颜色
-		},
-		index: {
-			type: Number,
-			default: 0
-		}
-	},
-	methods: {
-		handleClick() {
-			this.$emit('click', {
-				index: this.index
-			})
-		}
-	}
+  name: 'tuiListCell',
+  props: {
+    // 是否有箭头
+    arrow: {
+      type: Boolean,
+      default: false
+    },
+    // 是否有点击效果
+    hover: {
+      type: Boolean,
+      default: true
+    },
+    // left 30rpx
+    lineLeft: {
+      type: Boolean,
+      default: true
+    },
+    // right 30rpx
+    lineRight: {
+      type: Boolean,
+      default: true
+    },
+    padding: {
+      type: String,
+      default: '26rpx 30rpx'
+    },
+    last: {
+      type: Boolean,
+      default: false // 最后一条数据隐藏线条
+    },
+    radius: {
+      type: Boolean,
+      default: false
+    },
+    bgcolor: {
+      type: String,
+      default: '#fff' // 背景颜色
+    },
+    size: {
+      type: Number,
+      default: 28 // 字体大小
+    },
+    color: {
+      type: String,
+      default: '#333' // 字体颜色
+    },
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('click', {
+        index: this.index
+      })
+    }
+  }
 }
 </script>
 
 <style scoped>
-	.tui-list-cell {
-		position: relative;
-		width: 100%;
-		box-sizing: border-box;
-		overflow: hidden;
-		display: flex;
-		align-items: center;
-	}
-	.tui-radius {
-		border-radius: 12rpx;
-		overflow: hidden;
-	}
+.tui-list-cell {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+.tui-radius {
+  border-radius: 12rpx;
+  overflow: hidden;
+}
 
-	.tui-cell-hover {
-		background: #f7f7f9 !important;
-	}
+.tui-cell-hover {
+  background: #f7f7f9 !important;
+}
 
-	.tui-list-cell::after {
-		content: '';
-		position: absolute;
-		border-bottom: 2px solid #eee;
-		-webkit-transform: scaleY(0.5);
-		transform: scaleY(0.5);
-		bottom: 0;
-		right: 0;
-		left: 0;
-	}
-	.tui-line-left::after {
-		left: 30rpx !important;
-	}
+.tui-list-cell::after {
+  content: "";
+  position: absolute;
+  border-bottom: 2px solid #eee;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+.tui-line-left::after {
+  left: 30rpx !important;
+}
 
-	.tui-line-right::after {
-		right: 30rpx !important;
-	}
+.tui-line-right::after {
+  right: 30rpx !important;
+}
 
-	.tui-cell-last::after {
-		border-bottom: 0 !important;
-	}
+.tui-cell-last::after {
+  border-bottom: 0 !important;
+}
 
-	.tui-list-cell.tui-cell-arrow:before {
-		content: ' ';
-		height: 22px;
-		width: 22px;
-		border-width: 2px 2px 0 0;
-		border-color: #b2b2b2;
-		border-style: solid;
-		-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
-		transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
-		position: absolute;
-		top: 50%;
-		margin-top: -12px;
-		right: 30rpx;
-	}
+.tui-list-cell.tui-cell-arrow:before {
+  content: " ";
+  height: 22px;
+  width: 22px;
+  border-width: 2px 2px 0 0;
+  border-color: #b2b2b2;
+  border-style: solid;
+  -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+  transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+  position: absolute;
+  top: 50%;
+  margin-top: -12px;
+  right: 30rpx;
+}
 </style>

+ 16 - 6
hdApp/src/pagesPurchase/order.vue

@@ -26,19 +26,29 @@
             :key="index"
             @click="enter(item)"
           >
-            <!-- <image :src="item.avatar"></image> -->
+            <image :src="item.avatar"></image>
             <view class="store_name">
               <view class="store_title">{{item.name}}</view>
               <view class="accumulative">累计采购: {{item.expendAmount}}</view>
             </view>
             <view class="store_btn">
-              <view class="btn_entrance" v-if="Number(item.debtAmount) <= 0" @click="settleAccounts(item)">
+              <view
+                class="btn_entrance"
+                v-if="Number(item.debtAmount) <= 0"
+                @click.stop="settleAccounts(item)"
+              >
                 结账
               </view>
-              <view class="btn_entrance btn_forbid" v-else>
+              <view
+                class="btn_entrance btn_forbid"
+                v-else
+              >
                 结账
               </view>
-              <view class="btn_entrance" @click="enter(item)">
+              <view
+                class="btn_entrance"
+                @click.stop="enter(item)"
+              >
                 进店
               </view>
             </view>
@@ -110,8 +120,8 @@ export default {
   },
   methods: {
     enter (item) {
-    	const {id,ghsShopId,ghsSjId} = item
-      uni.navigateTo({url: `/pagesPurchase/ghsProduct?shopId=${ghsShopId}&id=${id}`})
+      const { id, ghsShopId, ghsSjId } = item
+      uni.navigateTo({ url: `/pagesPurchase/ghsProduct?shopId=${ghsShopId}&id=${id}` })
     },
     getGHSList () {
       ghsList().then(res => {