jufubao-forms 1.0.0-beta1

package/src/components/CusProduct/CusProduct.vue

@@ -0,0 +1,362 @@
+<template>
+  <view class="product" :class="{two: cell >= 2 , one: cell === 1}" @click="handleDetail()">
+    <view
+      class="product-image"
+      :style="{
+        marginRight: (cell === 1 ? (cellSpacing + 'rpx'):0),
+        marginBottom:  (cell === 1 ? 0: (cellSpacing + 'rpx')),
+        width: (cell === 1 ? '200rpx': '100%'),
+        height: (cell === 1 ? '200rpx': (height + 'rpx')),
+        backgroundColor: '#f8f8f8',
+        borderRadius: imageRadius + 'rpx',
+      }"
+    >
+      <image v-if="errorStatus" :src="errorImage" :alt="item['product_name']" ></image>
+      <image v-if="!errorStatus" :src="imageUrl" :alt="item['product_name']" @error="handleError(item)"></image>
+      <xd-product-status :status="item['status']"></xd-product-status>
+    </view>
+    <view class="product-content">
+      <view class="product-content-info">
+        <view class="name" :style="[nameFont]" v-html="cusName" :class="{showOne: isOne}"></view>
+        <view
+          class="brand"
+          v-if="productConfig.is_show_brand==='Y'"
+          :style="{color:brandColor}"
+        >{{item['brand_name']}}</view>
+        <view class="tags" :class="{showTwo:!isOne}">
+          <view
+            v-for="tag in tagsList"
+            :key="tag"
+            :style="{background:tagObjColor[tag]}"
+          >{{tagObj[tag]}}</view>
+        </view>
+      </view>
+      <view class="product-content-btn" v-if="isBtn">
+        <view :class="{onePrice: onePrice }">
+          <view v-if="productConfig.isPrice === 'Y'">
+            <xd-unit
+              :price="(item['promo_price'] || item['sale_price'])"
+              :isOld="false"
+              :iconSize="cell <= 2?0.3:0.26"
+              :fontSize="cell <= 2?36:26"
+            />
+          </view>
+          <view
+            v-if="productConfig.isShowDiscount==='Y' && checkDiscountPrice"
+            :style="{color:oldPriceColor}" class="oldPrice">
+            <xd-unit
+              :price="dividePrice"
+              :iconSize="0.21"
+              :fontSize="cell <= 2?24:22"
+              delete-line
+              is-gray
+            />
+          </view>
+        </view>
+        <view>
+          <view @click.stop="handleDetail('Y')" v-if="productConfig.isAddCart === 'Y'">
+            <xd-font-icon
+              icon="icongouwuche-01"
+              :color="color"
+              size="40"
+            ></xd-font-icon>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import getServiceUrl from "@/common/getServiceUrl";
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon.vue";
+import XdProductStatus from "@/components/XdProductStatus/XdProductStatus";
+import XdUnit from "@/components/XdUnit/XdUnit.vue";
+
+
+export default {
+  name: "CusProduct",
+  components:{
+    XdFontIcon,
+    XdUnit,
+    XdProductStatus
+  },
+  props:{
+    keyword:{
+      type:String,
+      default:''
+    },
+    nameFont: {
+      type:Object,
+      default(){
+        return {}
+      }
+    },
+
+    height:{
+      type:Number|String,
+      default:"auto",
+    },
+
+    item:Object,
+    cellSpacing: {
+      type: Number|String,
+      default: 20
+    },
+    rowSpacing: {
+      type: Number|String,
+      default: 20
+    },
+    color:{
+      type:String,
+      default:'red',
+    },
+    brandColor:{
+      type: String,
+      default: '#999'
+    },
+    oldPriceColor: {
+      type: String,
+      default: '#999'
+    },
+    imageRadius:{
+      type: String|Number,
+      default: '10'
+    },
+    cell:{
+      type: Number|String,
+      required: true
+    },
+    productConfig:{
+      type:Object|null,
+      default: null
+    },
+  },
+  computed:{
+    onePrice(){
+      if(this.cell === 1) return true;
+      if(this.cell === 3) return false;
+      if(this.cell === 2) return false;
+    },
+    cusName(){
+      return this.item['product_name'] || this.item['list_title']
+    },
+    imageUrl(){
+      if(!this.item['thumb']) return getServiceUrl('/common/empty/product.png?v1=1','size4')
+      return getServiceUrl(this.item['thumb'], 'size4')
+    },
+    isOne(){
+      let status = false;
+      if(this.cell === 1) status = false
+      return status
+    },
+    isBtn(){
+      return this.productConfig.isPrice === 'Y' || this.productConfig.isAddCart === 'Y'
+    },
+    dividePrice() {
+      return this.$xdUniHelper.divisionFloatNumber(this.item.market_price, 100);
+    },
+
+    checkDiscountPrice() {
+      if(this.productConfig.isPrice === 'N') return  false
+      if (this.productConfig.isShowDiscount === 'Y') {
+        let price = Number(this.item.market_price) - Number(this.item.sale_price);
+        return this.$xdUniHelper.divisionFloatNumber(price,100) > Number(this.productConfig.differ);
+      }
+      return false
+    },
+
+    tagsList(){
+      return (this.item['market_tags']||[]).filter(tag=>{
+        if(tag === 'flashsale') {
+          return this.productConfig.showActivityPrice === 'Y'
+        }
+        else {
+          return this.productConfig.isShowTag === 'Y'
+        }
+      })
+    },
+  },
+  data(){
+    return {
+      tagObj: null,
+      tagObjColor: null,
+      errorStatus: false,
+      errorImage:'',
+    }
+  },
+  created() {
+    this.tagObj = this.$colorConfig.productTags;
+    this.tagObjColor = this.$colorConfig.productTagsColor;
+    this.errorImage = getServiceUrl('/common/empty/product.png?v1=1','size4')
+  },
+  methods:{
+    handleError(item){
+      this.errorStatus = true;
+    },
+    handleDetail(type='N'){
+      this.$emit('on-product-detail', {isCart:type,...this.item});
+    }
+  }
+}
+</script>
+
+
+
+<style scoped lang="less">
+  .product {
+    cursor: pointer;
+
+    &.one {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      min-height: 200rpx;
+
+      .product-image {
+        flex-shrink: 0;
+        position: relative;
+      }
+
+      .product-content {
+        flex: 1;
+        min-height: 200rpx;
+        display: flex;
+        justify-content: flex-start;
+        flex-flow: wrap;
+        align-content: space-between;
+      }
+    }
+
+    &.two {
+      .product-image {
+        width: 100%;
+        display: flex;
+        flex-shrink: 0;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        & > image {
+          height: 100%;
+          width: 100%;
+        }
+      }
+
+    }
+
+    &-image {
+      overflow: hidden;
+      & > image {
+        height: 100%;
+        width: 100%;
+      }
+    }
+
+    &-content {
+      overflow: hidden;
+      &-info {
+
+      }
+
+      &-btn {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .onePrice {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+
+          & > view:nth-child(2) {
+            margin-left: 20rpx;
+          }
+        }
+
+        & > view:first-child {
+          flex: 1;
+          & > view:first-child {
+            height: 40rpx;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            overflow: hidden;
+          }
+          & > view:nth-child(2) {
+            line-height: 30rpx;
+          }
+        }
+
+
+
+        & > view:nth-child(2) {
+          flex-shrink: 0;
+          width: 40rpx;
+          height: 40rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+        }
+
+        .oldPrice {
+          margin-left: 6rpx;
+        }
+      }
+
+      & .name {
+        margin-bottom: 10rpx;
+        line-height: 40rpx;
+        .uni-max-cut(2,80);
+        word-wrap: break-word;
+        word-break: break-all;
+
+        & > text {
+          display: inline-block;
+
+        }
+
+        &.showOne {
+          .uni-max-cut(1,40);
+        }
+      }
+
+      & .brand {
+        font-size: 22rpx;
+        line-height: 30rpx;
+        .uni-max-cut(1,30);
+        padding-bottom: 10rpx;
+      }
+
+      .tags {
+        display: flex;
+        justify-content: flex-start;
+        align-content: flex-start;
+        flex-flow: wrap;
+
+        &.showTwo {
+         & > view{
+           margin-bottom: 8rpx;
+         }
+        }
+
+        & > view {
+          padding: 0 14rpx;
+          height: 32rpx;
+          line-height: 31rpx;
+          font-size: 20rpx;
+          color:#fff;
+          border-radius: 16rpx;
+          margin-right: 10rpx;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+        }
+      }
+
+    }
+  }
+</style>

package/src/components/CusSwiperDot/CusSwiperDot.vue

@@ -0,0 +1,234 @@
+<template>
+	<view class="uni-swiper__warp">
+		<slot />
+		<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': (index === current? dots.width*1.7: dots.width ) + 'px','height':dots.width*(2/5) +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
+			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
+		</view>
+		<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item" />
+		</view>
+		<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
+			<view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
+		    'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item " />
+		</view>
+		<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
+			<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length }}</text>
+		</view>
+		<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
+			<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
+        'width':dots.width + 'rpx','height':dots.height +'rpx' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
+			 :key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * XdSwiperDot 轮播图指示点
+	 * @description 自定义轮播图指示点
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=284
+	 * @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
+	 * @property {String} mode = [default|round|nav|indexes] 指示点的类型
+	 * 	@value defualt 默认指示点
+	 * 	@value round 圆形指示点
+	 * 	@value nav 条形指示点
+	 * 	@value indexes 索引指示点
+	 * @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填）
+	 * @property {String} info 轮播图的数据，通过数组长度决定指示点个数
+	 * @property {Object} dotsStyles 指示点样式
+	 * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
+	 */
+
+	export default {
+		name: 'XdSwiperDot',
+		emits:['clickItem'],
+		props: {
+			info: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			current: {
+				type: Number,
+				default: 0
+			},
+			dotsStyles: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 类型 ：default(默认) indexes long nav
+			mode: {
+				type: String,
+				default: 'default'
+			},
+			// 只在 nav 模式下生效，变量名称
+			field: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+        dotsSource: {
+          width: 8,
+          height: 8,
+          bottom: 7,
+          color: '#fff',
+          backgroundColor: 'rgba(0, 0, 0, .3)',
+          border: '1px rgba(0, 0, 0, .3) solid',
+          selectedBackgroundColor: '#333',
+          selectedBorder: '1px rgba(0, 0, 0, .9) solid'
+				},
+				dots: {	}
+			}
+		},
+		watch: {
+			dotsStyles(newVal) {
+			  this.init(newVal)
+			},
+			mode() {
+        this.init(this.dotsStyles)
+			}
+
+		},
+		created() {
+      this.init(this.dotsStyles)
+		},
+		methods: {
+			clickItem(index) {
+				this.$emit('clickItem', index)
+			},
+
+			init(value){
+        let dot = {};
+        if (this.mode === 'indexes') {
+          dot = {
+            width: 34,
+            height: 34,
+          }
+        }
+        this.dots = Object.assign(
+          JSON.parse(JSON.stringify(this.dotsSource)),
+          JSON.parse(JSON.stringify(value)),
+          dot
+        )
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-swiper__warp {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.uni-swiper__dots-box {
+		position: absolute;
+		bottom: 10px;
+		left: 0;
+		right: 0;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-item {
+		width: 8px;
+		border-radius: 100px;
+		margin-left: 6px;
+		background-color: $uni-bg-color-mask;
+		/* #ifndef APP-NVUE */
+		cursor: pointer;
+		/* #endif */
+		/* #ifdef H5 */
+		// border-width: 5px 0;
+		// border-style: solid;
+		// border-color: transparent;
+		// background-clip: padding-box;
+		/* #endif */
+		// transition: width 0.2s linear;  不要取消注释，不然会不能变色
+	}
+
+	.uni-swiper__dots-item:first-child {
+		margin: 0;
+	}
+
+	.uni-swiper__dots-default {
+		border-radius: 100px;
+	}
+
+	.uni-swiper__dots-long {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-bar {
+		border-radius: 50px;
+	}
+
+	.uni-swiper__dots-nav {
+		bottom: 10rpx!important;
+		height: 38rpx;
+		line-height: 38rpx;
+		position: absolute;
+		right: 0;
+		left: initial;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.5);
+		border-radius: 6rpx 0 0 6rpx;
+
+		& > text {
+			font-size: 20rpx;
+			padding: 0 10px!important;
+			margin: 0;
+			text-align: center;
+		}
+	}
+
+	.uni-swiper__dots-nav-item {
+		/* overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; */
+		font-size: $uni-font-size-base;
+		color: #fff;
+		margin: 0 15px;
+	}
+
+	.uni-swiper__dots-indexes {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		// flex: 1;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.uni-swiper__dots-indexes-text {
+		font-size: $uni-font-size-sm;
+	}
+</style>