jje_uniapp/storePages/myRights/index.vue

<template>
	<view class="page" :style="{'height':windowHeight}">

		<view class="flex-col" v-if="!equityList">
			<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="row-list" v-for="(item,index) in equityList" :key="index">
        <view class="flex-row justify-start" @click.stop="showRemark(item)">
          <view class="h-text flex-col justify-center ">
            <view class="money">
              <text>{{item.faceValue}}</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.serviceObjectName}}
            </view>
            <view class="title">
              结束期限：{{item.effectiveEndTime.substring(0,10)}}
            </view>
          </view>

          <view class=" flex-col justify-center ">
            <image class="h-right-content-img "  :src="item.facePhotoUrl || '/static/logo.png'" mode="aspectFit" @click="magnify(item.facePhotoUrl)"></image>
          </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>
		<uni-popup ref="popup">
			<view class="magnifyUrlView">
				<image :src="magnifyUrl" mode="widthFix"></image>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
        showRemarkId:'',
				magnifyUrl:'',
				windowHeight:'',
				userInfo:{},
				equityList:[],
			};
		},
		onLoad(option) {
			let sysInfo = uni.getSystemInfoSync()
			this.windowHeight =sysInfo.windowHeight - 3 +'px'//除标题栏栏外的屏幕可用高度
			this.userInfo = uni.getStorageSync('userInfo')

			this.myEquityCardList()
		},

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

        } else {
          this.showRemarkId = item.id

        }
      },
			magnify(url){
				if (!url){
					return
				}
				this.magnifyUrl = url
				this.$refs.popup.open()
			},

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

			// 获取图片
			getImgUrlByBannerOssId(items){
				for(let i = 0; i <items.length; i++) {
					if (items[i].facePhoto){
						this.$api.getImgUrlByOssId({ossId:items[i].facePhoto}).then(res=>{
							console.log('++++++++++++facePhotoUrl+++++++++',res.data.data[0].url.replace(/^http:/, "https:"))
							items[i].facePhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
							this.$set(this.equityList,i,items[i])
						})
					}
				}
			},

		},
	};
</script>
<style lang="scss" scoped>

	@import '/common/css/common.css';
	@import './index.rpx.scss';

</style>