jje_uniapp/storePages/rights/index.vue

<template>
  <view class="page" :style="{ 'height': equityList.length > 0 ? windowHeight : windowHeight1 }">
    <view class="centent">
      <view class="flex-col" v-if="equityList.length === 0">
        <view class="flex-row justify-center">
          <image class="empty" src="/static/imageIcon/empty.png" mode="widthFix"></image>
        </view>
        <view class="emptyText flex-row justify-center">
          <text>暂无内容</text>
        </view>
      </view>

      <scroll-view v-else scroll-y :style="{ 'height': windowHeight }">
        <view class="flex-col row-list" v-for="(item, index) in equityList" :key="index">
          <view class="flex-row justify-start">
            <view class="h-text flex-col justify-center ">
              <view class="money">
                <text>{{ item.salePrice }}</text>
              </view>
              <!--				<view class="desc">-->
              <!--					<text>{{item.title}}</text>-->
              <!--				</view>-->
            </view>

            <view class="h-center-content flex-col justify-around">
              <view class="h-value">
                <text>{{ item.title }}</text>
              </view>
              <view class="title">
                适用项目：{{ item.serviceProjectName || '' }}
              </view>
              <view class="title">
                适用门店：{{ item.useStoreDesc || '' }}
              </view>
              <view class="title">
                有效天数：{{ item.effectiveDays }}
              </view>
              <view class="title flex-row" @click.stop="showRemark(item)">
                <text>使用规则</text>
                <u-icon v-if="item.id == showRemarkId" name="arrow-down-fill" color="" size="12"></u-icon>
                <u-icon v-else name="play-right-fill" color="" size="12"></u-icon>
              </view>
            </view>

            <view class="h-right-content flex-col justify-center ">
              <view class="btn" @click="payRights(item)">
                <text>购买</text>
              </view>
            </view>
          </view>
          <view v-if="showRemarkId == item.id" class="remark" style="text-indent:unset">
            <view v-if="item.description !=null">
              使用说明:
              <text>{{ item.description }}</text>
            </view>
            <text v-else class="remarkText">该优惠券暂无使用说明</text>
          </view>
        </view>
      </scroll-view>


    </view>

    <view class="btnTitle flex-row" v-if="equityList.length > 0">
      <u-icon v-if="selectIcon" name="checkmark-circle-fill" color="#FFE52C" size="18" @click="selectChange"></u-icon>
      <u-icon v-else name="/static/order/ud9.png" color="#FFE52C" size="18" @click="selectChange"></u-icon>
      <text :style="{ 'margin-left': '10rpx' }">请阅读并同意</text>
      <text :style="{ 'color': 'red' }" @click="goTermsOfService">《娇骄儿权益服务协议》</text>
    </view>

    <uni-popup ref="popup" :catchtouchmove="true" :animation="false" type="bottom">

      <view class=" payView">
        <view class="flex-row justify-between">
          <text class="payType">微信支付</text>
          <image class="x" src="/static/common/ox.png" @click="closePayPopup"></image>
        </view>
        <view class="payItem flex-row justify-between" @click="payItem(2)">
          <view class="flex-row">
            <u-icon name="weixin-circle-fill" color="#38db38" size="36"></u-icon>
            <view class="payName flex-col justify-center">
              <text>微信支付</text>
            </view>
          </view>
          <view class="flex-col justify-center">
            <view v-if="curServiceTab === 2">
              <u-icon name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
            </view>
            <view v-else>
              <u-icon name="/static/order/ud9.png" color="green" size="25"></u-icon>
            </view>
          </view>
        </view>

        <view class="commitBtn" @click="commonGeneralOrder">
          <text>确定</text>
        </view>
      </view>

    </uni-popup>

    <!--		<u-picker :show="show" title="选择服务对象" :closeOnClickOverlay="true" @close="show = false" :columns="serviceObjectList"-->
    <!--			keyName="nickName" @cancel="show = false" @confirm="confirm"></u-picker>-->
    <uni-popup ref="selectObjectPopup" type="bottom">
      <view class="addService">
        <view class="popupTitle">
          <text>选择服务对象</text>
        </view>
        <scroll-view class="scrollY" scroll-y>
          <view class="flex-row objectItem" :class="{'vBackGround': selectServiceObjectIndex === index}"
                v-for="(item,index) in serviceObjectList" :key="index"
                @click="selectServiceObjectIndex = index">
            <image class="objectImage" :src="item.facePhotoUrl || '/static/ud4.png'"></image>
            <view class="flex-col objectName ">
              <text>{{ item.nickName }}</text>
            </view>
            <image v-if="selectServiceObjectIndex === index" class="vImage"
                   src="/static/index/xuanzhong.png"></image>
          </view>
        </scroll-view>

        <view class="flex-row justify-around">
          <view class="cancelButton" @click="closeSelectServiceObjectPopup">
            <text>取消</text>
          </view>
          <view class="confirmButton" @click="confirm(serviceObjectList[selectServiceObjectIndex])">
            <text>确定</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      selectServiceObjectIndex:-1,
      selectIcon: '',
      windowHeight: '',
      windowHeight1: '',
      show: false,
      curServiceTab: 2,
      orderRights: {},
      userInfo: {},
      serviceObjectList: [],
      serviceObjectIndex: 0,
      equityList: [],
      serviceObject: {},
      orderNo: '',
      showRemarkId: '',
    };
  },
  onLoad(option) {
    let sysInfo = uni.getSystemInfoSync()
    this.windowHeight = sysInfo.windowHeight - 50 + 'px'//除标题栏栏外的屏幕可用高度
    this.windowHeight1 = sysInfo.windowHeight + 'px'//除标题栏栏外的屏幕可用高度
  },
  onShow() {
    this.userInfo = uni.getStorageSync('userInfo')
    this.listServiceObject()
    this.equityCardList()
  },

  methods: {
    showRemark(item) {
      if (this.showRemarkId == item.id) {
        this.showRemarkId = ''

      } else {
        this.showRemarkId = item.id

      }
    },
    goTermsOfService() {
      uni.navigateTo({
        url: '/myPages/TermsOfService/index?name=' + '娇骄儿权益服务协议' + '&type=' + 4
      })
    },
    closeSelectServiceObjectPopup(){
      this.selectServiceObjectIndex = -1
      this.$refs.selectObjectPopup.close()
    },
    selectChange() {
      this.selectIcon = !this.selectIcon
    },
    getImgUrlByBannerOssId(items) {
      for (let i = 0; i < items.length; i++) {
        if (items[i].facePhoto) {
          this.$api.getImgUrlByOssId({ossId: items[i].facePhoto}).then(res => {
            items[i].facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
            this.$set(this.serviceObjectList, i, items[i])
          })
        }
      }
    },
    commonGeneralOrder() {
      let param = uni.getStorageSync('promotionParam')
      console.log('获取到技师的二维码数据', param)
      if (!param) {
        console.log('获取到门店的二维码数据', param)
        param = uni.getStorageSync('storeParam')
      }
      this.$refs.popup.close()
      this.$api.commonGeneralOrder({
        ...param,
        orderType: 5,
        serviceObjectId: this.serviceObject.id,
        equityCardId: this.orderRights.id
      }).then(res => {
        this.orderNo = res.data.data.orderNo

        if (this.curServiceTab === 1) {
          //开启余额支付
          this.balancePay()
        }
        if (this.curServiceTab === 2) {
          //调微信支付
          this.wechatPay()
        }


      })
    },

    //余额支付
    balancePay() {
      let that = this;
      this.$api.balancePay({
        orderNo: this.orderNo,
        password: ''
      }).then((res) => {
        uni.showToast({
          title: '支付成功!'
        });
        this.getUserInfo()
      })
    },

    wechatPay() {
      let that = this;
      // 发起微信支付
      this.$api.wechatPay({
        orderNo: this.orderNo
      }).then((res) => {
        var param = res.data.data;
        uni.requestPayment({
          appId: param.appid,
          timeStamp: param.timestamp + "",
          nonceStr: param.noncestr,
          package: "prepay_id=" + param.prepayid,
          signType: "RSA",
          paySign: param.sign,
          success: res => {
            uni.showToast({
              title: '支付成功!'
            });
            setTimeout(() => {
              uni.navigateTo({
                url: '/storePages/myRights/index'
              });
            }, 2000)
          },
          fail: res => {
            console.log(res)
            uni.showModal({
              content: '支付失败',
              showCancel: false
            });
          }
        });
      })
    },

    getUserInfo() {
      this.$api.getUserInfo().then(res => {
        console.log('++++++++++++获取用户信息++++++++++++++++++', res)
        uni.setStorageSync('userInfo', res.data.data)
        this.userInfo = res.data.data
      })

    },

    confirm(e) {
      console.log(e)
      if(!e){
        uni.showToast({
          duration: 2000,
          title: '请选择一个服务对象',
          icon: 'none'
        });
        return
      }
      // this.serviceObject = e.value[0]
      this.serviceObject = e
      // this.show = false
      this.$refs.selectObjectPopup.close()
      this.$refs.popup.open()
    },

    equityCardList() {
      this.$api.equityCardList().then(res => {
        console.log(res)
        this.equityList = res.data.data
      })
    },


    // 查询服务对像信息列表
    listServiceObject() {
      let serviceObjectList = []
      this.$api.listServiceObject(this.reqParm).then((res) => {
        res.data.data.forEach(i => {
          if (i.isSelf != 1) {
            serviceObjectList.push(i)
          }
        })
        this.serviceObjectList[0] = serviceObjectList
        this.getImgUrlByBannerOssId(this.serviceObjectList[0]);
      })
    },

    closePayPopup() {
      this.$refs.popup.close()
    },

    payItem(num) {
      if (this.userInfo.balance * 1 < this.orderRights.salePrice * 1) {
        return
      }
      this.curServiceTab = num
    },

    payRights(item) {
      this.userInfo = uni.getStorageSync('userInfo')
      if (!this.userInfo.phone) {
        uni.showModal({
          title: '温馨提示',
          content: '权益卡绑定信息需通过手机号进行获取，是否确认绑定手机号',
          success: res => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/myPages/setting/setting-telphone',
              })
            }
          }
        })
        return
      }

      if (this.serviceObjectList[0].length === 0) {
        uni.showModal({
          title: '温馨提示',
          content: '默认服务对象不能使用权益卡，是否前往绑定新的服务对象?',
          success: res => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/myPages/ServiceObjectManagement/index',
              })
            }
          }
        })
        return;
      }


      if (!this.selectIcon) {
        uni.$u.toast('请阅读并同意《娇骄儿权益服务协议》')
        return;
      }
      // this.show = true
      this.orderRights = item
      this.$refs.selectObjectPopup.open()
    }

  },
};
</script>
<style lang="scss" scoped>
@import '/common/css/common.css';
@import './index.rpx.scss';
</style>