cyy-vue-material 1.0.10

package/src/package/cyy-image/cyy-image.vue

@@ -0,0 +1,79 @@
+<template>
+	<div>
+		<div v-for="(item, index) in resultArr" :key="cyy">
+			<img
+				mode="widthFix"
+				:style="[computedStyle, imgStyle]"
+				:src="item['imgUrl']"
+				alt=""
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+import pick from 'lodash-es/pick.js';
+import omit from 'lodash-es/omit.js';
+import { handlePlat } from '../../utils/index.js';
+import { isEmpty, isUndefined } from 'lodash-es';
+export default {
+	name: 'cyy-cube',
+	data() {
+		return {
+			imgStyle: {
+				width: '100%',
+				boxSizing: 'border-box'
+			}
+		};
+	},
+	props: {
+		props: {
+			selectImg: Array,
+			borderRadius: Number,
+			paddingTop: Number,
+			paddingLeft: Number,
+			paddingRight: Number,
+			paddingBottom: Number,
+			defaultValue: Array
+		}
+	},
+	computed: {
+		resultArr() {
+			const { selectImg, defaultValue } = this.props;
+			const computedArr = selectImg
+				.filter((item) => !isUndefined(item))
+				.filter(
+					(item) => !Object.values(item).every((citem) => isUndefined(citem))
+				);
+			let arr = defaultValue;
+			if (!isEmpty(computedArr)) {
+				arr = computedArr;
+			}
+			console.log(52, arr);
+			return arr;
+		},
+		computedStyle() {
+			const variates = [
+				'borderRadius',
+				'paddingTop',
+				'paddingLeft',
+				'paddingRight',
+				'paddingBottom'
+			];
+			const params = pick(this.props, variates);
+			const resetProps = omit(this.props, variates);
+
+			return {
+				...handlePlat(params),
+				...resetProps
+			};
+		}
+	}
+};
+</script>
+<style lang="less" scoped>
+.lc-img-item {
+	width: 100%;
+	box-sizing: border-box;
+}
+</style>

package/src/package/cyy-search/cyy-search.vue

@@ -0,0 +1,67 @@
+<template>
+	<div style="overflow: hidden">
+		<div :style="[computedStyle]" @click="goSearch">
+			<div style="flex: 1">{{ props.value }}</div>
+			<img
+				:src="props.icon"
+				alt=""
+				style="width: 20px; height: 20px; margin-top: 7px; margin-right: 10px"
+				v-if="props.iconShow"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+import pick from 'lodash-es/pick.js';
+import omit from 'lodash-es/omit.js';
+import { handlePlat, isLc } from '../../utils/index.js';
+
+export default {
+	name: 'cyy-search',
+	props: {
+		props: {
+			value: String,
+			fontColor: String,
+			iconShow: Boolean,
+			backgroundColor: String,
+			borderRadius: Number,
+			icon: String,
+			marginTop: Number,
+			marginLeft: Number,
+			marginRight: Number,
+			marginBottom: Number
+		}
+	},
+	computed: {
+		computedStyle() {
+			const variates = [
+				'borderRadius',
+				'marginTop',
+				'marginLeft',
+				'marginRight',
+				'marginBottom'
+			];
+			const params = pick(this.props, variates);
+			const resetProps = omit(this.props, variates);
+
+			return {
+				...handlePlat(params),
+				...resetProps,
+				display: 'flex',
+				height: '34px',
+				lineHeight: '34px',
+				paddingLeft: '20px'
+			};
+		}
+	},
+	methods: {
+		goSearch() {
+			if (isLc) {
+				return;
+			}
+			this.$routers.push('goodsList', { memberCode: this.memberCode });
+		}
+	}
+};
+</script>

package/src/package/cyy-slider/cyy-slider.vue

@@ -0,0 +1,117 @@
+<template>
+	<div>
+		<div v-if="lowCode">
+			<div class="lowCode-warp" :style="[sliderStyle]">
+				<img :src="resultArr[0]['imgUrl']" alt="" style="width: 100%" />
+				<ul>
+					<li v-for="(item, index) in resultArr" :key="cyy"></li>
+				</ul>
+			</div>
+		</div>
+		<div v-else>
+			<swiper
+				:indicator-dots="true"
+				:autoplay="props.autoplay"
+				:interval="props.autoplayInterval"
+				:vertical="reDirection"
+				:circular="props.loop"
+				:style="{
+					height: imgH + 'rpx'
+				}"
+			>
+				<swiper-item
+					v-for="(item, index) in resultArr"
+					:key="cyy"
+					:style="[sliderStyle, { boxSizing: 'border-box' }]"
+				>
+					<img :src="item.imgUrl" alt="" mode="widthFix" style="width: 100%" />
+				</swiper-item>
+			</swiper>
+		</div>
+	</div>
+</template>
+<script>
+import { handlePlat, isLc } from '../../utils/index.js';
+import { isEmpty, isUndefined } from 'lodash-es';
+import pick from 'lodash-es/pick';
+
+export default {
+	name: 'cyy-slider',
+	data() {
+		return {
+			lowCode: isLc
+		};
+	},
+	props: {
+		props: {
+			autoplay: Boolean,
+			autoplayInterval: Number,
+			direction: String,
+			loop: Boolean,
+			selectImg: Array,
+			defaultValue: Array,
+			imgHeight: Object,
+			marginTop: Number,
+			marginBottom: Number
+		}
+	},
+	computed: {
+		resultArr() {
+			const { selectImg, defaultValue } = this.props;
+			const computedArr = selectImg
+				.filter((item) => !isUndefined(item))
+				.filter(
+					(item) => !Object.values(item).every((citem) => isUndefined(citem))
+				);
+			let arr = defaultValue;
+			if (!isEmpty(computedArr)) {
+				arr = computedArr;
+			}
+			return arr;
+		},
+		imgH() {
+			const { imgHeight } = this.props;
+			return (imgHeight.height / imgHeight.width) * 750;
+		},
+		sliderStyle() {
+			const variates = ['marginTop', 'marginBottom'];
+			const params = pick(this.props, variates);
+
+			return {
+				...handlePlat(params)
+			};
+		},
+		reDirection() {
+			const { direction } = this.props;
+			return direction !== 'horizontal';
+		}
+	}
+};
+</script>
+
+<style>
+.lowCode-warp {
+	position: relative;
+}
+
+.lowCode-warp ul {
+	position: absolute;
+	bottom: 10px;
+	text-align: center;
+	width: 100%;
+	padding: 0;
+}
+
+.lowCode-warp li {
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background-color: rgba(0, 0, 0, 0.3);
+	margin: 0 4px;
+}
+
+.lowCode-warp li:first-child {
+	background-color: #000000;
+}
+</style>

package/src/package/cyy-title/cyy-title.vue

@@ -0,0 +1,46 @@
+<template>
+	<div :style="[computedStyle]">{{ props.value }}</div>
+</template>
+
+<script>
+import { handlePlat } from '../../utils/index.js';
+import pick from 'lodash-es/pick';
+import omit from 'lodash-es/omit';
+export default {
+	name: 'cyy-title',
+	props: {
+		props: {
+			value: String,
+			fontSize: Number,
+			textAlign: String,
+			color: String,
+			backgroundColor: String,
+			fontWeight: String,
+			fontStyle: String,
+			textDecoration: Boolean,
+			paddingTop: Number,
+			paddingLeft: Number,
+			paddingRight: Number,
+			paddingBottom: Number
+		}
+	},
+	computed: {
+		computedStyle() {
+			const variates = [
+				'fontSize',
+				'paddingTop',
+				'paddingLeft',
+				'paddingRight',
+				'paddingBottom'
+			];
+			const params = pick(this.props || {}, variates);
+			const resetProps = omit(this.props || {}, variates);
+
+			return {
+				...handlePlat(params),
+				...resetProps
+			};
+		}
+	}
+};
+</script>

package/src/package/index.js

@@ -0,0 +1,6 @@
+export { default as Title } from "./cyy-title/cyy-title.vue";
+export { default as Cube } from "./cyy-image/cyy-image.vue";
+export { default as Search } from "./cyy-search/cyy-search.vue";
+export { default as Goods } from "./cyy-goods/cyy-goods.vue";
+export { default as Slider } from "./cyy-slider/cyy-slider.vue";
+export { default as GoodsOne } from "./cyy-goodsOne/cyy-goodsOne.vue";

package/src/utils/checkEnv.js

@@ -0,0 +1,16 @@
+export const isLc = process.env.VUE_APP_PLATFORM === 'low-code';
+
+export const handlePlat = (params) => {
+	let result = {};
+	for (let key in params) {
+		result[key] = sumPix(params[key]);
+	}
+	return result;
+};
+
+const sumPix = (param) => {
+	if (isLc) {
+		return param + 'px';
+	}
+	return param * 2 + 'rpx';
+};

package/src/utils/fetchFactory.js

@@ -0,0 +1,76 @@
+import { queryResourceGoodsPagePalt } from '../api/index.js';
+import { isLc } from './checkEnv';
+import { isEmpty, isEqual } from 'lodash-es';
+
+const handleParams = (obj) => {
+	const formData = new URLSearchParams();
+	for (let key in obj) {
+		formData.append(key, obj[key]);
+	}
+	return formData;
+};
+
+const fetchGoodsInfo = (id) => {
+	const { mGoodsInfo } = goodsCache[id];
+	return mGoodsInfo;
+};
+
+const setGoodsInfo = (id, goods, data) => {
+	goodsCache[id] = {
+		mGoodsInfo: data,
+		mGoods: goods
+	};
+};
+
+const handleCache = (that) => {
+	const { goods, id } = that.props;
+	const { mGoods } = goodsCache[id] || {};
+	return isEqual(goods, mGoods);
+};
+
+const fetchIO = async (that, paramObj) => {
+	const { id, goods } = that.props;
+	if (isEmpty(goods)) return Promise.resolve({ list: [] });
+
+	const isEqualFlag = handleCache(that);
+
+	if (isEqualFlag) {
+		return Promise.resolve(fetchGoodsInfo(id));
+	}
+
+	const saasToken = localStorage.getItem('saas-token');
+
+	return await fetch(
+		process.env.REACT_APP_BASE_URL + queryResourceGoodsPagePalt,
+		{
+			method: 'POST',
+			headers: {
+				'saas-token': saasToken,
+				'user-agent':
+					'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36',
+				'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+			},
+			body: handleParams(paramObj)
+		}
+	)
+		.then((res) => res.json())
+		.then((res = {}) => {
+			setGoodsInfo(id, goods, res);
+			return res;
+		});
+};
+
+const uniIo = (that, paramObj) => {
+	return that.$ajax.run('find', paramObj);
+};
+
+function getGoodsImpl() {
+	if (isLc) {
+		return fetchIO;
+	}
+	return uniIo;
+}
+
+export const fetchGoodImpl = getGoodsImpl();
+
+export const goodsCache = {};

package/src/utils/index.js

@@ -0,0 +1,2 @@
+export * from './checkEnv.js';
+export * from './fetchFactory';