HTFX-CRM-Sales/pages/partner/components/promotionLink/index.vue

<template>
	<view class="shareList">
		<view class="shareCard" v-for="share in shareList" :key="share.id">
			<image src="/static/close.png" mode="aspectFit" class="closeIcon" @click="() => handleRemoveShareRecord(share)"></image>
			<text class="shareName">{{ share.name }}</text>
			<view class="shareCodeContent">
				<l-qrcode :value="composeLink(share.share_code)" :size="94" :marginSize="1" bgColor="#fff" />
			</view>
			<view class="shareLinkWrapper">
				<view class="shareLink">
					{{ composeLink(share.share_code) }}
					<CopyIcon :value="composeLink(share.share_code)" :size="16" />
				</view>
				<view class="shareLink">
					{{ $t('form.shareCode.label') }}：{{ share.share_code }}
					<CopyIcon :value="share.share_code" :size="16" />
				</view>
			</view>
			<view class="btnWrapper">
				<button class="primaryButton downloadMore" @click="() => downloadMoreSize(share.share_code)">{{ $t('partner.promotionLink.downloadMoreSize') }}</button>
				<button v-if="share.img_url" class="secondaryButton downloadMore" @click="() => downloadMaterial(share.img_url)">下载推广设计素材</button>
			</view>
		</view>
		<view class="addShareLink">
			<image @click="() => createShareLink()" src="/static/user/add.png" mode="aspectFit" style="width: 47px; height: 47px"></image>
			<text>{{ $t('partner.promotionLink.addLink') }}</text>
		</view>
		<view class="materialCard" v-for="sysShare in sysShareList" :key="sysShare.id">
			<image :src="sysShare.img_url?.split(',')?.[0]" mode="aspectFit" class="sysShareImg"></image>
			<view class="materialCardBottom">
				<text @click="() => createShareLink(sysShare)">{{ $t('partner.promotionLink.getLink') }}</text>
				<div class="divider"></div>
				<text @click="() => downloadMaterial(sysShare.img_url)">{{ $t('partner.promotionLink.downloadMaterials') }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { getShareRecord, getSysShareList, removeShareRecord } from '@/services/partner/promotionLink.ts';
export default {
	name: 'PromotionLink',
	props: {
		visible: {
			type: Boolean,
			required: true,
			default: false
		}
	},
	data() {
		return {
			currentShareCode: undefined,
			shareList: [],
			sysShareList: [],
			image: undefined
		};
	},
	methods: {
		composeLink(shareCode) {
			// #ifdef H5
			return `${window.location.origin ?? 'https://user.htfx.co'}/api/promotion/${shareCode}`;
			// #endif

			// #ifndef H5
			return `https://user.htfx.co/api/promotion/${shareCode}`;
			// #endif
		},
		async getShareRecordData() {
			const res = await getShareRecord();
			if (res && res.code === 0) {
				this.shareList = res.data;
			}
		},
		async getSysShareListData() {
			const res = await getSysShareList();
			if (res && res.code === 0) {
				this.sysShareList = res.data;
			}
		},
		showDetailDialog() {
			this.$refs.alertDialog.open();
		},
		closeDetailDialog() {
			this.$refs.alertDialog.close();
		},
		createShareLink(sysShare) {
			if (sysShare) {
				uni.navigateTo({
					url: `/pages/partner/createShareLink/index?sysId=${sysShare.id}&imgUrls=${sysShare.img_url}`
				});
			} else {
				uni.navigateTo({
					url: '/pages/partner/createShareLink/index'
				});
			}
		},
		handleRemoveShareRecord(share) {
			uni.showModal({
				content: this.$t('shareLink.confirmRemove'),
				confirmColor: '#4DC0E5',
				success: async (res) => {
					if (res.confirm) {
						const resp = await removeShareRecord({ id: share.id });
						if (resp.code == 0) {
							this.$nextTick(() => {								
								this.$cusModal.showModal({
									type: 'message',
									status: 'success',
									contentText: this.$t('common.success.action')
								});
							})
							this.getShareRecordData();
							this.getSysShareListData();
						} else {
							this.$nextTick(() => {								
								this.$cusModal.showModal({
									type: 'message',
									status: 'warning',
									contentText: resp.msg ?? this.$t('common.error.sysError')
								});
							})
						}
					}
				}
			});
		},
		downloadMoreSize(shareCode) {
			uni.navigateTo({
				url: `/pages/partner/downloadMoreSize/index?shareCode=${shareCode}`
			});
		},
		downloadMaterial(imgUrl) {
			uni.navigateTo({
				url: `/pages/partner/downloadMaterial/index?imgUrl=${imgUrl}`
			});
		}
	},
	watch: {
		visible(newValue, oldValue) {
			if (newValue) {
				this.getShareRecordData();
				this.getSysShareListData();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>