ufutx_love_mp/src/pages/users/exclusiveService.wpy

<template>
<!--  <NavBar rgba="#ffffff" bag="#ffffff" :title.sync="title"></NavBar>-->
<!--  <Loading :init.sync="init"></Loading>-->
<!--  <view class="navbar borrow">-->
<!--    <view class="ui-top-image">-->
<!--      <image src="https://image.fulllinkai.com/202305/18/b7f2b5ff6700a907685372fbf36a2048.png" mode="aspectFill" class="ui-top-image flo_l"></image>-->
<!--    </view>-->
<!--    <view class="f-fc ui-list-tip">-->
<!--      <image src="https://image.fulllinkai.com/202305/18/83c911dd369ca02d6a8377d13093f9db.png" mode="aspectFill" class="ui-top-icon flo_l"></image>-->
<!--      <view class="bold color-333">专属客服</view>-->
<!--    </view>-->
<!--  </view>-->
  <view class="ui-service-list">
    <block v-for="(item,index) in list" :key="index">
      <view class="ui-list-card f-fbc">
        <view class="f-fc">
          <image class="ui-service-pic" src="{{item.user ? item.user.avatar ? item.user.avatar : item.user.photo : ''}}" mode="aspectFill"></image>
          <view class="ui-service-name ellipsis_1 bold color-333">{{item.user ? item.user.nickname ? item.user.nickname : item.user.name ?item.user.name : '未填写'  : '未填写'}}</view>
        </view>
        <view class="ui-service-add ">
          <view @tap="showCode(item)"> + 添加客服</view>
        </view>
      </view>
    </block>
  </view>
<!--  <pageScroll></pageScroll>-->
  <block v-if="loading">
    <view class="weui-loadmore">
      <view class="weui-loading"></view>
      <view class="weui-loadmore__tips ff">正在加载</view>
    </view>
  </block>
  <view class="cu-modal" :class="{'show':modalName=='isExclusiveService'}">
    <view class="audit_photo_box ff" style="border-radius: 32rpx;padding: 22rpx;">
      <view class="font_32 bold color-333" style="padding-top:38rpx;">联系专属客服</view>
      <image style="width: 240rpx;height: 240rpx;margin: 40rpx;"
             src="{{exclusiveService}}" show-menu-by-longpress="true"
             mode="widthFix"></image>
      <view class="cancel_icon_box" @tap="hideModal">
        <view class="font_family icon-off white font_48"></view>
      </view>
      <view class="m_photo f-fcc">
        <view class="reason_prompt font_32 color333" style="width: 90%;font-weight: 400;">长按识别二维码，联系客服
        </view>
      </view>
    </view>
  </view>
<!--  <block wx:if="{{noMore}}">-->
<!--    <view class="weui-loadmore weui-loadmore_line weui-loadmore_dot">-->
<!--      <view class="weui-loadmore__tips weui-loadmore__tips_in-line weui-loadmore__tips_in-dot ff"></view>-->
<!--    </view>-->
<!--  </block>-->
<!--  </view>-->
</template>

<script>
  import wepy from '@wepy/core'
import { service } from '../../config.js'
  import https from '../../mixins/https'
import base from '../../mixins/base'
// import NavBar from '../../components/NavBar'

// import tabSearchV2 from '../../components/tabSearchV2'
// import pageScroll from '../../components/pageScroll'
 wepy.page({
  mixins: [base, https],
  data: {
    loaded: false,
    init: false,
    title: '',
    list: [],
    page: 1,
    noMore: false,
    loading: false,
    type: '',
    modalName: '',
    exclusiveService: ''
  },

  computed: {},

  onShareAppMessage(res) {
    return this.$parent.onShareAppMessage(this.config.navigationBarTitleText)
  },

  async onLoad(e) {
    let that = this
    that.type = e.type
    that.list = []
    that.page = 1
    that.getLibraries()
  },

  onShow() {
    // this.$parent.getTracker(this.$root.$name, this.config.navigationBarTitleText)
  },

  onPullDownRefresh() {
    this.page = 1
    this.getLibraries()
  },

  onPageScroll(res) {

  },
  onReachBottom() {

  },

  methods: {
    getLibraries(keyword) {
      let _this = this
      _this.loading = true
      let url = `${service.host}/crm/alone/cs/list`
      _this.$get({
        url: url
      }).then(({code, data}) => {
          _this.init = true
          _this.noMore = false
          _this.loading = false
          if (this.data && data.length === 0) {
            _this.noMore = true
            _this.list = []
            return
          }
          _this.list = data
          _this.noMore = true
      })
    },

    showCode(row) {
      let vm = this
      // vm.exclusiveService = row.exclusiveService
      // vm.modalName = 'isExclusiveService'
      let url = `${service.host}/crm/alone/cs/add`
      let data = {
        role_user_id: row.user_id
      }
      vm.$post({url: url, data: data}).then(({code, data}) => {
          vm.exclusiveService = row.qrcode
          vm.modalName = 'isExclusiveService'
      })
    },
    hideModal() {
      let vm = this
      console.log('1--')
      vm.modalName = ''
      // vm.$gotoTab({url: '/pages/tabBar/user'})
      wx.switchTab({url: '/pages/tabBar/user'})
    }
  }
})

</script>

<style lang="less">

page{
  background: white;
}
.ui-top-image{
  width: 750rpx;
  height: 208rpx;
}
.ui-list-tip{
  margin: 40rpx 30rpx 24rpx;
  width: 750rpx;
  font-size: 32rpx;
}
.ui-top-icon{
  margin-right: 8rpx;
  width: 36rpx;
  height: 36rpx;
}
.ui-service-list{
  padding:0 30rpx 30rpx;
}
.ui-list-card{
  margin-bottom: 30rpx;
  padding: 24rpx 30rpx;
  width: 690rpx;
  height: 128rpx;
  background: #FFFFFF;
  box-shadow: 0px 4rpx 20rpx 0px rgba(0,0,0,0.08);
  border-radius: 16rpx;
}
.ui-service-pic{
  margin-right: 20rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}
.ui-service-name{
  width: 260rpx;
  font-size: 30rpx;
}
.ui-service-add{
  padding: 14rpx 20rpx;
  width: 168rpx;
  height: 60rpx;
  font-size: 24rpx;
  color: #F33B6C;
  border-radius: 30rpx;
  border: 2rpx solid #FFA9C0;
  line-height: 32rpx;
}
.audit_photo_box {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  width: 600rpx;
  max-width: 100%;
  .m_photo {
    border-radius: 24rpx;
    background-color: #ffffff;
  }
  .cancel_icon_box {
    width: 80rpx;
    height: 60rpx;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: -130rpx;
    z-index: 2;

    .cancel_icon {
      width: 30rpx;
      height: 30rpx;
      margin-top: 20rpx;
    }
  }
}
.list{
  padding: 22rpx;
  /*background: red;*/
  box-shadow: 1rpx 1rpx 12rpx #d3d3d3;
}
.bold{font-weight: bold}
.ellipsis_1 {
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
</style>
<config>
    {
    navigationBarTitleText: '专属客服',
    enablePullDownRefresh: true,
    backgroundColorTop: '#ffffff',
    backgroundColorBottom: '#ffffff',
    usingComponents: {
    }
    }
</config>