gxd-uni-library-editx 1.0.0

package/src/components/XdPayCombo/XdPayCombo.vue

@@ -0,0 +1,118 @@
+<template>
+  <view class="combo-body" :style="{background:selected?'#FFE786':'#FFFAE8',border:selected?'':'none'}"
+        @click="handleChecked">
+    <view class="combo-body-price">
+      {{item.price}}
+    </view>
+    <view class="combo-body-text">
+      <xd-font-icon
+        :icon="item.icon"
+        :size="item.size"
+        color="#F74C72"
+      ></xd-font-icon>
+      <view class="combo-body-text-name">{{item.text}}</view>
+    </view>
+    <view :class="selected?'combo-body-button-checked':'combo-body-button-unchecked'">
+      {{item.time}}
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+
+  export default {
+    props: {
+      selected: {
+        type: Boolean,
+        default: false
+      },
+      item: {
+        type: Object || null,
+        default: {
+          price: '288',
+          icon: 'iconlovefont iconloveVIP1',
+          text: '套餐',
+          time: '3个月'
+        }
+      }
+    },
+    components: {
+      XdFontIcon
+    },
+    methods: {
+      handleChecked() {
+        this.$emit('checked', this.item)
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .combo-body {
+    padding: unit(55, rpx) unit(30, rpx);
+    border: unit(6, rpx) solid #FFCD5E;
+    border-radius: unit(16, rpx);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: unit(196, rpx);
+
+    &-price {
+      font-size: unit(76, rpx);
+      font-family: PingFang SC;
+      font-weight: 600;
+      color: #8D5F18;
+    }
+
+    &-text {
+      display: flex;
+      align-items: center;
+      font-size: unit(24, rpx);
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #9B702D;
+
+      &-name {
+        margin-left: unit(8, rpx);
+      }
+    }
+
+    .combo-body-button-checked {
+      margin-top: unit(30, rpx);
+      width: unit(182, rpx);
+      padding: 0 unit(20, rpx);
+      min-height: unit(60, rpx);
+      background: #9B702D;
+      border-radius: unit(30, rpx);
+      font-size: unit(35, rpx);
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #FFE786;
+      text-align: center;
+      line-height: unit(60, rpx);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .combo-body-button-unchecked {
+      margin-top: unit(30, rpx);
+      width: unit(182, rpx);
+      padding: 0 unit(20, rpx);
+      min-height: unit(60, rpx);
+      background: #FFE786;
+      border-radius: unit(30, rpx);
+      font-size: unit(35, rpx);
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #9B702D;
+      text-align: center;
+      line-height: unit(60, rpx);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+</style>

package/src/components/XdPreviewImage/XdPreviewImage.vue

@@ -0,0 +1,372 @@
+<template>
+	<view class="previewImage" :style="{ 'background-color': 'rgba(0,0,0,' + opacity + ')' }" v-if="show" @tap="close" @touchmove.stop.prevent>
+		<swiper class="swiper" :current="index" @change="swiperChange" :disable-touch="swiper" :circular="circular">
+			<swiper-item v-for="(img, i) in imgs" :key="'swiper-item-'+i" :id="'swiper-item-'+i">
+				<movable-area class="marea" scale-area>
+					<movable-view
+						:id="'movable-view-'+i"
+						:key="'movable-view-'+i"
+						class="mview"
+						direction="all"
+						:out-of-bounds="false"
+						:inertia="true"
+						damping="90"
+						friction="2"
+						scale="true"
+						scale-min="1"
+						scale-max="4"
+						:scale-value="scale"
+						@scale="onScale"
+						@change="movableChange"
+					>
+						<image
+							:id="'image-'+i"
+							:key="'movable-view'+i"
+							class="image"
+							:src="img"
+							:style="{ transform: 'rotateZ(' + deg + 'deg)' }"
+							:data-index="i"
+							:data-src="img"
+							mode="widthFix"
+							@touchmove="handletouchmove"
+							@touchstart="handletouchstart"
+							@touchend="handletouchend"
+						/>
+					</movable-view>
+				</movable-area>
+			</swiper-item>
+		</swiper>
+		<view class="page" v-if="imgs.length > 0">
+			<text class="text">{{ index + 1 }} / {{ imgs.length }}</text>
+		</view>
+		<view class="save" v-if="saveBtn" @click.stop.prevent="save"><text class="text">保存</text></view>
+		<view class="rotate" v-if="rotateBtn" @click.stop.prevent="rotate"><text class="text">旋转</text></view>
+		<view class="desc" v-if="descs.length > 0 && descs.length == imgs.length && descs[index].length > 0">{{ descs[index] }}</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'XdPreviewImage', //插件名称
+	props: {
+		imgs: {
+			//图片列表
+			type: Array,
+			required: true,
+			default: () => {
+				return [];
+			}
+		},
+		descs: {
+			//描述列表
+			type: Array,
+			required: false,
+			default: () => {
+				return [];
+			}
+		},
+		//透明度,0到1之间。
+		opacity: {
+			type: Number,
+			default: 0.8
+		},
+		//保存按键
+		saveBtn: {
+			type: Boolean,
+			default: true
+		},
+		//旋转按键
+		rotateBtn: {
+			type: Boolean,
+			default: true
+		},
+		//循环预览
+		circular:{
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			swiper:false,//是否禁用
+			show: false, //显示状态
+			index: 0, //当前页
+			deg: 0, //旋转角度
+			time: 0, //定时器
+			interval: 1000, //长按事件
+			scale: 1 //缩放比例
+		};
+	},
+	methods: {
+		//比例变化
+		onScale(e) {
+
+		},
+
+		//长按事件相关内容---------开始-------------------
+		//接触开始
+		handletouchstart(e) {
+			var tchs = e.touches.length;
+			if (tchs != 1) {
+				return false;
+			}
+			this.time = setTimeout(() => {
+				this.onLongPress(e);
+			}, this.interval);
+			return false;
+		},
+		//清除定时器
+		handletouchend() {
+			clearTimeout(this.time);
+			if (this.time != 0) {
+				//处理点击时间
+			}
+			return false;
+		},
+		//清除定时器
+		handletouchmove() {
+			clearTimeout(this.time);
+			this.time = 0;
+		},
+		// 处理长按事件
+		onLongPress(e) {
+			var src = e.currentTarget.dataset.src;
+			var index = e.currentTarget.dataset.index;
+			var data = { src: src, index: index };
+			this.$emit('longPress', data);
+		},
+		//长按事件相关内容---------结束-------------------
+
+		//图片改变
+		swiperChange(e) {
+			this.index = e.target.current; //更新当前图片index
+
+			this.$nextTick(function() {
+				this.scale = 1;
+			})
+
+			//this.deg = 0; //旋转角度
+			//this.swiper=true;
+		},
+
+		//移动变化
+		movableChange(e) {
+			//console.log(e);
+			/* if(this.old.scale <= 1){
+				this.swiper=false;
+			}else if(e.detail.x===0){
+				this.swiper=false;
+			} */
+		},
+
+
+		//保存
+		save(e) {
+			var _this = this;
+			var src = this.imgs[this.index];
+			//#ifdef MP-WEIXIN
+			//提前向用户发起授权请求
+			uni.authorize({
+				scope: 'scope.writePhotosAlbum',
+				success() {
+					console.log('kxj-previewImage:允许储存');
+					_this.downloadImg(src);
+				}
+			});
+			//#endif
+
+			//#ifdef APP-PLUS
+			this.downloadImg(src);
+			//#endif
+
+			//#ifdef H5
+			//非同源图片将直接打开
+			var abtn = document.createElement('a');
+			abtn.href = src;
+			abtn.download = '';
+			abtn.target = '_blank';
+			abtn.click();
+			//#endif
+		},
+
+		//下载并保存文件
+		downloadImg(src) {
+			//下载图片文件
+			uni.showLoading({
+				title: '大图提取中'
+			});
+			uni.downloadFile({
+				url: src,
+				success: function(res) {
+					console.log('kxj-previewImage:下载成功');
+					uni.hideLoading();
+					uni.saveImageToPhotosAlbum({
+						filePath: res.tempFilePath,
+						success: () => {
+							uni.showToast({
+								title: '已保存至相册',
+								duration: 1000
+							});
+						}
+					});
+				},
+				fail: function() {
+					uni.hideLoading();
+					uni.showToast({
+						title: '图片下载失败',
+						icon: 'none',
+						duration: 1000
+					});
+				}
+			});
+		},
+
+		//旋转
+		rotate(e) {
+			this.deg = this.deg == 270 ? 0 : this.deg + 90;
+		},
+		//打开
+		open(e) {
+			if (e === null || e === '') {
+				console.log('kxj-previewImage:打开参数无效');
+				return;
+			}
+
+			if (!isNaN(e)) {
+				if(e>=this.imgs.length){
+					console.log('kxj-previewImage:打开参数无效');
+				}else{
+					this.index = e;
+				}
+			} else {
+				var index = this.imgs.indexOf(e);
+				if(index===-1){
+					this.imgs = [e];
+					this.index = 0;
+					console.log('kxj-previewImage:未在图片地址数组中找到传入的图片，已为你自动打开单张预览模式')
+				}else{
+					this.index = this.imgs.indexOf(e);
+				}
+			}
+			console.log('kxj-previewImage:当前预览图片序号'+this.index);
+			this.show = true;
+		},
+		//关闭
+		close(e) {
+			this.show = false;
+			this.index = 0; //当前页
+			this.deg = 0; //旋转角度
+			this.time = 0; //定时器
+			this.interval = 1000; //长按事件
+			this.scale = 1; //缩放比例
+		}
+	}
+};
+</script>
+
+<!--使用scss,只在本组件生效-->
+<style lang="scss" scoped>
+.previewImage {
+	z-index: 999;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: #000000;
+	user-select: none;
+	.swiper {
+		width: 100%;
+		height: 100%;
+		.marea {
+			height: 100%;
+			width: 100%;
+			position: fixed;
+			overflow: hidden;
+			.mview {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 100%;
+				height: auto;
+				min-height: 100%;
+				.image {
+					width: 100%;
+				}
+			}
+		}
+	}
+
+	.page {
+		position: absolute;
+		width: 100%;
+		bottom: 20rpx;
+		text-align: center;
+		.text {
+			color: #fff;
+			font-size: 26rpx;
+			background-color: rgba(0, 0, 0, 0.5);
+			padding: 3rpx 16rpx;
+			border-radius: 20rpx;
+			user-select: none;
+		}
+	}
+	.save {
+		position: absolute;
+		left: 10rpx;
+		width: 120rpx;
+		height: 56rpx;
+		bottom: 10rpx;
+		text-align: center;
+		padding: 10rpx;
+		.text {
+			background-color: rgba(0, 0, 0, 0.5);
+			color: #fff;
+			font-size: 30rpx;
+			border-radius: 20rpx;
+			border: 1rpx solid #f1f1f1;
+			padding: 6rpx 22rpx;
+			user-select: none;
+		}
+		.text:active {
+			background-color: rgba(100, 100, 100, 0.5);
+		}
+	}
+	.rotate {
+		position: absolute;
+		right: 10rpx;
+		width: 120rpx;
+		height: 56rpx;
+		bottom: 10rpx;
+		text-align: center;
+		padding: 10rpx;
+		.text {
+			background-color: rgba(0, 0, 0, 0.5);
+			color: #fff;
+			font-size: 30rpx;
+			border-radius: 20rpx;
+			border: 1rpx solid #f1f1f1;
+			padding: 6rpx 22rpx;
+			user-select: none;
+		}
+		.text:active {
+			background-color: rgba(100, 100, 100, 0.5);
+		}
+	}
+	.desc {
+		position: absolute;
+		top: 0;
+		width: 100%;
+		padding: 5rpx 10rpx;
+		text-align: center;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		background-color: rgba(0, 0, 0, 0.5);
+		color: #fff;
+		font-size: 28rpx;
+		letter-spacing: 3rpx;
+		user-select: none;
+	}
+}
+</style>

package/src/components/XdPwPay/XdPwPay.vue

@@ -0,0 +1,214 @@
+<template>
+  <xd-dailog
+          :width="width"
+          :title="title"
+          :show.sync="uiShow"
+          :cancel="false"
+          :confirm="false"
+          :showClose="showClose"
+          @close="handleClose"
+  >
+    <view class="xd-pw-pay">
+      <view class="xd-pw-pay__header">
+        <view
+                v-for="(item,index) in textList"
+                :key="index"
+                class="xd-pw-pay__header-item">
+          {{item.label}}
+          <view v-if="item.value" class="xd-pw-pay__header-item-price">
+            <xd-unit
+                    :price="item.value"
+                    :iocnSize="0.32"
+            >
+            </xd-unit>
+          </view>
+        </view>
+      </view>
+      <view>
+        <view class="input-wrap">
+          <input
+                  class="input1"
+                  type="number"
+                  v-for="(item, index) in input_len"
+                  :style="{fontSize: '32rpx'}"
+                  @tap="onInput"
+                  :password="password"
+                  :key="index"
+                  :value="input_val.length >= index + 1 ? input_val[index] : ''"
+                  :focus="false"
+          />
+        </view>
+        <!-- 实际监听 -->
+        <input class="input2"
+               type="number"
+               v-if="isFocus"
+               @blur="blurInput"
+               @input="setInput"
+               v-model="input_val"
+               :maxlength="input_len"
+               :focus="true"
+        />
+
+        <view
+                class="forget-pw"
+                v-if="forget"
+                @click="handleForget"
+        >
+          忘记密码
+        </view>
+      </view>
+    </view>
+  </xd-dailog>
+</template>
+
+<script>
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdDailog from "@/components/XdDailog/XdDailog";
+
+  export default {
+    name: "XdPwPay",
+    components: {XdUnit, XdDailog},
+    comments: {
+      XdDailog
+    },
+    props: {
+      input_len: {
+        type: Number,
+        default: 6
+      }, //密码长度
+      password: {
+        type: Boolean,
+        default: true
+      },
+      width: {
+        type: Number | String,
+        default: '50%',
+      },
+      title: {
+        type: String,
+        default: '标题',
+      },
+      show: {
+        type: Boolean,
+        default: true,
+      },
+      textList: {
+        type: Array,
+        default: []
+      },
+      forget: {
+        type: Boolean,
+        default: true
+      },
+      showClose: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        isFocus: false,
+        input_val: '', // 验证码的值
+        uiShow: false
+      }
+    },
+    watch: {
+      show(newVal) {
+        if (newVal === false) {
+          this.input_val = ''
+          this.isFocus = true
+        }
+        this.uiShow = newVal;
+
+      },
+
+      uiShow(value) {
+        this.$emit('update:show', value);
+      }
+    },
+    created() {
+      if (this.show) {
+        this.input_val = ''
+        this.isFocus = true
+        this.uiShow = this.show;
+      }
+    },
+    methods: {
+      onInput() {
+        this.isFocus = true;
+      },
+      setInput(e) {
+
+        // this.input_val = e.detail.value;
+        if (this.input_val.length == 6) {
+          this.$emit('onSubmit', this.input_val)
+        }
+      },
+      blurInput() {
+        this.isFocus = false;
+      },
+      handleForget() {
+        this.$emit('onForget')
+      },
+      handleClose() {
+        this.$emit('update:show', this.show);
+        this.$emit('onClose')
+      },
+      clearPwd() {
+        this.input_val = ''
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-pw-pay {
+    padding: unit(20, rpx);
+    font-size: @xd-font-size-lg;
+  }
+
+  .xd-pw-pay__header {
+    padding: unit(20, rpx) 0;
+
+    &-item {
+      margin-bottom: unit(20, rpx);
+
+      &-price {
+        display: flex;
+        justify-content: center;
+        margin-top: unit(20, rpx)
+      }
+    }
+  }
+
+  .input-wrap {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-top: unit(40, rpx);
+
+    .input1 {
+      display: flex;
+      width: unit(60, rpx);
+      height: unit(60, rpx);
+      justify-content: space-around;
+      text-align: center;
+      border: 1px solid #9b9ba5;
+    }
+  }
+
+  .input2 {
+    width: unit(10, rpx);
+    height: unit(10, rpx);
+    position: absolute;
+    top: unit(0, rpx);
+    left: unit(-750, rpx);
+    min-height: 0
+  }
+
+  .forget-pw {
+    text-align: right;
+    margin-top: unit(20, rpx);
+    color: #ccc
+  }
+</style>