kuaiyidian-HD/pages/index/checkShop.vue

<template>
  <view>
    <view class="formBox">
      <u-alert description="右滑可编辑店铺名称" type="primary"></u-alert>
      <view>
        <u-swipe-action>
          <u-swipe-action-item
              :options="options1"
              index="1"
              v-for="item in shopList"
              :key="item.shopId"
              @click="onActionItemSwipe(item)" 
          >
            <view class="swipe-action u-border-top u-border-bottom" @click="onActionItemClick(item)">
              <view class="swipe-action__content">
                <text class="swipe-action__content__text">{{ item.shopName }}</text>
                <view class="swipe-action__content__icon" v-if="item.shopId == current">
                  <u-icon color="#1ba035" name="checkmark-circle-fill"></u-icon>
                </view>
              </view>
            </view>
          </u-swipe-action-item>
        </u-swipe-action>
      </view>
      <view class="tui-tabbar">
        <u-button type="primary" shape="circle" @tap.stop="submit">确定</u-button>
      </view>
    </view>
    <u-popup :show="popupShow" mode="bottom" closeOnClickOverlay safeAreaInsetBottom @close="onPopupClose">
      <view class="edit-info">
        <view class="title">编辑店铺名称</view>
        <view class="info-name">
          <view>{{ shopNameOld }}</view>
          <view class="info-ipt">
            <u-input
                placeholder="请输入新店名"
                border="bottom"
                clearable
                v-model="shopName"
            ></u-input>
          </view>
        </view>
        <view>
          <u-button type="primary" shape="circle" @click="onEditSave">保存</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  mapState,
  mapMutations
} from 'vuex';

export default {
  name: 'checkShop',
  computed: mapState(['userId', 'shopIndex']),
  data() {
    return {
      choose: '1',
      options1: [{
        text: '编辑',
        style: {
          backgroundColor: '#3c9cff'
        }
      }],
      popupShow: false,
      shopName: '',
      shopNameOld: '',
      shopList: [],
      shopId: null,
      current: '',
	  name:''
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    ...mapMutations(['setShopIndex']),
    submit() {
		this.tui.request("/auth/chooseShop", "POST", {
			shopId: this.current
		}, false, true).then((res) => {
			if (res.code == 200) {
				uni.setStorageSync('shopName',this.name)
				this.tui.toast('切换店铺成功', 2000, true)
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 200)
			} else {
				this.tui.toast(res.message)
				return
			}
		}).catch((res) => {})
    },
	//初始化店铺列表
    getList() {
      this.tui.request("/auth/getShopByUser", "post", {
        // shopId: 1,
      }, false, true).then((res) => {
		  if(res.code == 200){
			  for (let i=0;i<res.result.length;i++) {
			  	if(res.result[i].shopName ==uni.getStorageSync('shopName')){
					this.current = res.result[i].shopId
				}
			  }
			this.shopList = res.result
		  }else{
			  this.tui.toast(res.message)
		  }
        
      })
    },
    onPopupClose() {
      this.popupShow = false
      this.shopName = ''
      this.shopId = ''
      this.shopNameOld = ''
    },
	//编辑
    onActionItemSwipe(item) {
      this.popupShow = true
      this.shopNameOld = item.shopName
      this.shopId = item.shopId
    },
	//切换店铺
    onActionItemClick(item) {
      this.current = item.shopId
	  this.name = item.shopName
    },
    onEditSave() {
      if (!this.shopName) return this.tui.toast('请输入新店铺名称', 2000,)
      this.tui.request("/app/shop/modifyShopNameById", "put", {
        id: this.shopId,
        shopName: this.shopName
      }, false, true).then((res) => {
        if (res.code === 200) {
          this.getList()
          this.onPopupClose()
        }else{
			this.tui.toast(res.message)
		}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.formBox {
  .uni-data-select {
    width: 100%;
  }

  .tui-order-title {
    position: relative;
    font-size: 28upx;
    line-height: 28upx;
    padding-left: 16upx;
    box-sizing: border-box;
  }

  .tui-order-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border-left: 8upx solid $u-primary;
    height: 120%;
    border-radius: 4upx;
  }
}

.tui-tabbar {
  width: 100%;
  height: 98rpx;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 26rpx;
  box-shadow: 0 0 1px rgba(0, 0, 0, .3);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 996;
}

.u-page {
  padding: 0;
}

.u-demo-block__title {
  padding: 10px 0 2px 15px;
}

.swipe-action {
  &__content {
    padding: 25rpx;
    display: flex;
    align-items: center;

    &__text {
      font-size: 15px;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &__icon {
      flex-basis: 20rpx;
    }
  }
}

.edit-info {
  height: 450rpx;
  padding: 25rpx;

  .title {
    text-align: center;
    font-size: 32rpx;
  }

  .info-name {
    display: flex;
    align-items: center;
    margin: 35rpx 0;
  }

  .info-ipt {
    flex: 1;
  }
}
</style>
<style>
.u-radio {
  margin: 15upx 0;
}
</style>