gxd-uni-library-editx 1.0.0

package/src/components/XdStoreProductInfo/XdStoreProductInfo.vue

@@ -0,0 +1,940 @@
+<template>
+  <view class="xd-store-product" v-if="uiItem">
+    <view class="xd-store-product__swiper">
+      <xd-swiper
+        :list="uiItem.thumb"
+        :current="swiperCurrent"
+        width="100%"
+        height="750rpx"
+        :indicatorDots="false"
+        @animationfinish="animationfinish"
+      >
+        <template slot-scope="{ item, index}">
+          <image :src="item"></image>
+        </template>
+      </xd-swiper>
+      <view class="xd-store-product__swiper-tips">{{swiperCurrent + 1}}/{{uiItem.thumb.length}}</view>
+    </view>
+    <view class="xd-store-product__name">
+      <view class="xd-store-product__name-text">
+        <view class="xd-store-product__name-text-price">
+          <xd-unit
+            :price="uiItem['sale_price']"
+            :font-size="50"
+            :iocn-size=".45"
+          ></xd-unit>
+        </view>
+        <view
+          class="xd-store-product__name-text-special"
+          v-if="uiItem['special'] && uiItem['special'].length > 0"
+        >
+          <template v-for="item in uiItem['special'] ">
+            <view
+              :style="{
+                borderColor: uiItem['special_color'] || specialColor,
+                color: uiItem['special_color'] || specialColor
+              }">{{item}}</view>
+          </template>
+        </view>
+        <view class="xd-store-product__name-text-name">{{uiItem.product_short_desc || uiItem.product_name }}</view>
+        <view
+          class="xd-store-product__name-text-sub"
+          v-if="uiItem['product_sub_name']"
+        >{{uiItem['product_sub_name'] }}</view>
+      </view>
+      <view
+        class="xd-store-product__name-collect"
+        v-if="uiCollect !== null"
+        @click="handleCollect"
+        :style="{
+          color: uiCollect=== true? $mainColor: '#666'
+        }"
+      >
+        <view>
+          <xd-font-icon
+            icon="iconrecommend"
+            size="50"
+            :color="uiCollect === true? $mainColor: '#666'"
+          ></xd-font-icon>
+        </view>
+        <view>收藏</view>
+      </view>
+    </view>
+    <view class="xd-store-product__operate gift" v-if="!isEmpty(uiGift)">
+      <view class="xd-store-product__operate-item">
+        <view class="xd-store-product__operate-label">{{uiGift.label}}</view>
+        <view class="xd-store-product__operate-value">
+          <view>{{uiGift.rule}}</view>
+          <view v-for="(it,idx) in uiGift.value" :key="idx">{{it}}</view>
+        </view>
+        <view class="xd-store-product__operate-icon">
+          <xd-font-icon icon="iconsangedian" size="40"></xd-font-icon>
+        </view>
+      </view>
+    </view>
+    <view class="xd-store-product__label" v-if="uiItem['infoLabel'].length > 0">
+      <view
+        class="xd-store-product__label-item"
+        v-for="(iItem,iIndex) in uiItem['infoLabel']"
+        :key="iIndex"
+      >
+        <view>{{iItem['label']}}</view>
+        <view
+          v-if="checkValType(iItem['value']) === 'array'"
+          class="xd-store-product__label-item-tag"
+        >
+          <view v-for="(it,idx) in iItem['value']" :key="idx">
+            <xd-tag type="primary" size="small" inverted>{{it}}</xd-tag>
+          </view>
+        </view>
+        <view v-else :style="{color: iItem['color']}">{{iItem['value']}}</view>
+      </view>
+    </view>
+    <view class="xd-store-product__notice" v-if="uiItem['notice']">{{uiItem['notice']}}</view>
+    <view class="xd-store-product__sendRange" v-if="uiItem && uiItem.links && uiItem.links.length > 0">
+      <view class="xd-store-product__sendRange-item"
+        v-for="link in uiItem.links"
+        :key="link.key"
+      >
+        <view class="xd-store-product__sendRange-label">{{link.name}}</view>
+        <view
+          class="xd-store-product__sendRange-value"
+          :style="{
+            textAlign: link.align ? link.align: 'right',
+            color: link.color ? link.color : '#111'
+          }"
+        >{{link.value}}</view>
+        <view class="xd-store-product__sendRange-icon" @click="handleSend(link)">
+          <xd-font-icon icon="iconjiantou" size="30"></xd-font-icon>
+        </view>
+      </view>
+    </view>
+    <view class="xd-store-product__operate " v-if="isShowSelected">
+      <view class="xd-store-product__operate-item select-number" @click="handleSelect" v-if="selectNumber">
+        <view class="xd-store-product__operate-label">已选</view>
+        <view class="xd-store-product__operate-value">{{getSelect}}</view>
+        <view class="xd-store-product__operate-icon">
+          <xd-font-icon icon="iconsangedian" size="40" v-if="isChangeSelect"></xd-font-icon>
+        </view>
+      </view>
+      <view class="xd-store-product__operate-item select-addrss" @click="handleAddress">
+        <view class="xd-store-product__operate-label">配送至</view>
+        <view
+          :style="{color: !address?'#999': '#111'}"
+          class="xd-store-product__operate-value"
+        >{{getAddress}}</view>
+        <view class="xd-store-product__operate-icon">
+          <xd-font-icon icon="iconsangedian" size="40"></xd-font-icon>
+        </view>
+      </view>
+    </view>
+    <view class="xd-store-product__shop" v-if="uiItem['shop']" @click="handleClickShop(uiItem['shop'])">
+      <view class="xd-store-product__shop-image">
+        <image :src="uiItem['shop']['logo']" mode="aspectFit"></image>
+      </view>
+      <view class="xd-store-product__shop-content">
+        <view>{{uiItem['shop']['name']}}</view>
+        <view>{{uiItem['shop']['desc']}}</view>
+      </view>
+    </view>
+    <view class="xd-store-product__content">
+      <view class="xd-store-product__content-top">
+        <xd-more>宝贝详情</xd-more>
+      </view>
+      <view class="xd-store-product__content-text">
+        <xd-content-xss :html="getDetail(uiItem['detail'])"></xd-content-xss>
+      </view>
+      <view class="xd-store-product__content-bottom">
+        <xd-more>已经到最底了</xd-more>
+      </view>
+    </view>
+    <view class="xd-store-product__bottom" :style="{height: 160 + 'rpx'}"></view>
+    <view class="xd-store-product__tips" v-if="uiItem['tips']">
+      <view>
+        <view><xd-font-icon icon="iconIM" :size="34" :width="34" :height="34" color="#e6a23c"></xd-font-icon></view>
+        <view>{{uiItem['tips']}}</view>
+      </view>
+      <view></view>
+    </view>
+    <view class="xd-store-product__func">
+      <view class="xd-store-product__func-left">
+        <view v-for="(link,lIndex) in uiFastLinks" :key="lIndex">
+          <xd-font-icon
+            @click="handleLinks({link,index: lIndex})"
+            :icon="link.icon"
+            :size="link.size"
+            height="55"
+          ></xd-font-icon>
+          <view
+            class="xd-store-product__func-left-num"
+            :style="{background: uiColor}"
+            v-if="uiCartNumber > 0 && link.system"
+          >{{uiCartNumber<100?uiCartNumber: '99+'}}
+          </view>
+          <view>{{link.name}}</view>
+        </view>
+      </view>
+      <view class="xd-store-product__func-right">
+        <view v-for="(btn,bIndex) in uiItem['fastBtns']" :key="bIndex">
+          <xd-button
+            :disabled="btn['disabled'] !== undefined ? btn['disabled'] : false"
+            @click="handleBtn({btn,index:bIndex})"
+            :type="btn['type']"
+            size="mini"
+          >{{btn['name']}}</xd-button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdSwiper from "@/components/XdSwiper/XdSwiper";
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdTag from "@/components/XdTag/XdTag";
+  import XdMore from "@/components/XdMore/XdMore";
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdContentXss from "@/components/XdContentXss/XdContentXss";
+
+  /**
+   * XdStoreProductInfo 商城商品详情显示
+   * @description 商城商品详情显示
+   * @tutorial
+   * @property {Object|null} item 商品信息信息 格式见：this.testData， 值：null， 使用测试数据
+   * @property {String} specialColor  商品特效显示颜色 默认：green
+   * @property {Boolean|null} collect 是否启用收藏按钮(null => 不显示  true=> 已收藏， false=> 未收藏)
+   * @property {Number} cartNumber 购物车显示数量 默认:0
+   * @property {String|null} selectNumber 选中规格 默认：null
+   * @property {Boolean} isChangeSelect 是否显示切换规格操作按钮 默认:false
+   * @property {Object|null} address 配送地址 默认:null
+   * @property {Object|null} fastLink 快速连接 默认：{icon: 'iconshouye', name: '返回首页', size: 40}
+   * @property {Boolean} isShowSelected 是否显示选中配送地址和已选信息 默认: true
+   * @property {Boolean} isShowSendRange 是否配送范围操作 默认: false
+   *
+   *
+   * @event {Function} onCollect  点击添加收藏事件 参数: uiItem
+   * @event {Function} onFastLink  点击快速连接事件 参数: {link:link,index: index}
+   * @event {Function} onFastBtn  点击操作按钮事件 参数:  {btn:btn,index: index}
+   * @event {Function} onAddress  切换下单地址 参数:  无
+   * @event {Function} onSelect  切换选中规格事件 参数:  uiItem
+   * @event { Function } onShop  点击店铺模块事件 shop
+   *
+   */
+  export default {
+    name: "XdStoreProductInfo",
+    components: {
+      XdContentXss,
+      XdButton,
+      XdMore,
+      XdTag,
+      XdFontIcon,
+      XdUnit,
+      XdSwiper
+    },
+    props:{
+      item: {
+        type: Object|null,
+        default(){
+          return null
+        }
+      },
+
+      gift: {
+        type: Object | null,
+        default(){
+          return {}
+          // return {
+          //   label: '赠品',
+          //   rule: '所以我们在window下开发好之后 放在linux 环境下回报错 那么我们使用',
+          //   value: [
+          //     '这2个常量的使用能够避免不同平台的性问题 x1',
+          //     '当你要include多个路径的话 x2',
+          //     '一场酒醉歌迷的散伙宴之后 x1'
+          //   ],
+          // }
+        }
+      },
+
+      specialColor: {
+        type: String,
+        default: 'green'
+      },
+
+      /**
+       * @description 是否启用收藏按钮(null => 不显示  true=> 已收藏， false=> 未收藏)
+       */
+      collect: {
+        type: Boolean | null,
+        default: null,
+      },
+
+
+      isShowSelected: {
+        type: Boolean,
+        default: true,
+      },
+
+
+      /**
+       * @description 大于0为显示怡萱模块
+       */
+      cartNumber: {
+        type: Number,
+        default: 0,
+      },
+
+      /**
+       * @description 选中规格数量
+       */
+      selectNumber:{
+        type: String | null,
+        default: null,
+      },
+
+      /**
+       * @description 是否显示改变选中规格按钮
+       */
+      isChangeSelect: {
+        type: Boolean,
+        default: true,
+      },
+
+      /**
+       * @description 显示配送地址
+       */
+      address: {
+        type: String| null,
+        default: null,
+      },
+
+      /**
+       * @description 快速连接列表(只获取第一条)
+       */
+      fastLink: {
+        type: Object,
+        default(){
+          return {icon: 'iconshouye', name: '返回首页', size: 40};
+        }
+      }
+    },
+    watch:{
+      collect(val){
+        this.uiCollect = val;
+      },
+
+      cartNumber(val){
+        console.log(val);
+        this.uiCartNumber = val;
+      },
+      gift(value){
+        this.uiGift = value;
+      }
+    },
+    computed:{
+      getSelect(){
+        return `${this.uiItem['product_name']} , ${this.selectNumber}`;
+      },
+
+      getAddress(){
+        if(!this.address) return '请选择配送地址';
+        else {
+          return this.address;
+        }
+
+      },
+    },
+    data(){
+      return {
+        swiperCurrent: 0,
+
+        uiItem: null, //商品信息
+        uiFastLinks: [],//快速连接
+
+        uiColor: '', //数字背景颜色
+
+        //动态改变值
+        uiCollect: null, //收藏状态
+        uiCartNumber: 0, //购物车数量
+        uiAddress: '', //配送地址
+
+        uiGift: null,
+
+
+        //商品测试数据格式
+        testData: {
+          // //头部轮播图
+          // thumb: ["https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210604101103940.jpg", "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210604101113376.jpg", "https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210604101122312.jpg"],
+          // product_name: '中粮 福临门小厨味道米面礼盒 4.5kg', //商品名称
+          // product_short_desc:'中粮 福临门小厨味道米面礼盒 4.5kg中粮 福临门小厨味道米面礼盒 4.5kg', //商品短名称
+          // //product_sub_name: '尺寸/口味/人群', //副标题，无此此地不显示副标题
+          // sale_price: 150, //价格
+          // id: 199191,
+          // collect: true, //是否启用收藏按钮(undefined => 不显示  true=> 已收藏， false=> 未收藏)
+          // special: ['红米营养价值极高，含有丰富的微量元素，紫米补血益气、暖脾胃，有很好的滋补作用。', '未收藏', '已收藏'],
+          // special_color: 'green',//特效显示颜色
+          //
+          // shop: {
+          //   logo: 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200826/733372b7f9022ce6c127ffbe03c54cb5.jpg',
+          //   name: '幸福西饼廊坊店',
+          //   desc: '丝滑奶油香甜绵密 ，花漾鲜果邂逅浪漫'
+          // },
+          //
+          //
+          // //产品显示标签（value为数组时候：显示为tag标签）
+          // infoLabel: [
+          //   {
+          //     label: '产品',
+          //     value: '中粮 福临门小厨味道米面礼盒 4.5kg',
+          //   },
+          //   {
+          //     label: '预售',
+          //     value: '该产品为预售，需要进行一个月的采购时间，货到立马发货',
+          //     color: '#c00'
+          //   },
+          //   {
+          //     label: '品牌',
+          //     value: '中粮',
+          //   },
+          //   // {
+          //   //   label: '配送方式',
+          //   //   value: ['专人配送', '到店自提', '快递物流'],
+          //   // }
+          // ],
+          //
+          // //发货提示
+          // notice: '订单付款后72小时内发货，法定节假日顺延到工作日发货',
+          //
+          //
+          // //快速链接地址  align=left，right， center
+          // links: [
+          //   {name: '查看配送范围', value: '全国', key: 0, align: 'right'},
+          //   {name: '支持门店', value: '某某门店', key: 1, align: 'right'}
+          // ],
+          //
+          // //快速按钮
+          // fastBtns: [
+          //   {type: 'primary', name: '加入购物车',},
+          //   {type: 'subPrimary', name: '立即购买',},
+          // ],
+          //
+          // //详情
+          // //detail: "\n                                                                                                                                    \n                                                                            \u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20210119153542102.png?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\n                                                                                                                        \u003Cdiv\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/7daysservice.jpeg\u0022 width=\u0022100%\u0022\u003E\u003C\/div\u003E",
+          // detail: "\n                                                                                                                                    \n                                                                                                                                    \n                                                                                                                                    \n                                                                                                                                    \n                                                                            \u003Cp\u003E\u5907\u6ce8\uff1a\u003C\/p\u003E\u003Cp\u003E1\u3001\u672c\u4ea7\u54c1\u4e0d\u652f\u63017\u5929\u65e0\u7406\u7531\u9000\u6362\u8d27\u003C\/p\u003E\u003Cp\u003E2\u3001\u65b0\u7586\u3001\u897f\u85cf\u3001\u5185\u8499\u3001\u6d77\u5357\u3001\u6e2f\u6fb3\u53f0\u4e0d\u652f\u6301\u6d3e\u4ef6\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142948482.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947977.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947278.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947126.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947903.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947859.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947175.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947841.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947619.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142948576.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947384.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\u003Cp\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/20201130142947381.jpg?x-oss-process=style\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\/p\u003E\n                                                                                                                        \n                                                                                                                        \n                                                                                                                        \n                                                                                                                        \u003Cdiv\u003E\u003Cimg src=\u0022https:\/\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\/7daysservice.jpeg\u0022 width=\u0022100%\u0022\u003E\u003C\/div\u003E",
+        },
+
+      }
+    },
+
+    mounted() {
+      this.uiGift = this.gift;
+
+      this.$nextTick(()=>{
+        this.uiCollect = this.collect;
+        this.uiCartNumber = this.cartNumber;
+
+        this.uiColor = this.$mainColor;
+        if (getApp().globalData.$xd
+          && getApp().globalData.$xd['config']
+          && getApp().globalData.$xd['config']['unitTextColor']
+        ) {
+          this.uiColor = getApp().globalData.$xd['config']['unitTextColor'];
+        }
+
+        //快速连接
+        this.uiFastLinks = [this.fastLink].concat([{icon: 'icongouwuche', name: '购物车', size: 55, system: true}]);
+
+        if (this.item === null) {
+          this.uiItem = this.$xdUniHelper.cloneDeep(this.testData);
+        }else {
+          this.uiItem = this.item;
+        }
+      });
+    },
+
+    methods:{
+      isEmpty(obj){
+        return this.$xdUniHelper.isEmpty(obj)
+      },
+
+      checkValType(obj){
+        return this.$xdUniHelper.checkVarType(obj)
+      },
+      getDetail(html){
+        // #ifdef  H5
+        return html;
+        // #endif
+
+        // #ifdef  MP-WEIXIN
+        html = html.replace(/<p>/ig, '<p class="p_class">');
+        html = html.replace(/<div>/ig, '<div class="div_class">');
+        return html
+        // #endif
+      },
+      animationfinish(e){
+        this.swiperCurrent = e.detail.current;
+      },
+
+      handleSend(item){
+        this.$emit('onSend', item);
+      },
+
+      /**
+       * @description 点击收藏事件
+       */
+      handleCollect(){
+        this.$emit('onCollect', this.uiItem);
+      },
+
+      /**
+       * @description 快速连接点击时间
+       * @param link
+       * @param index
+       */
+      handleLinks({link, index}){
+        this.$emit('onFastLink', {link, index});
+      },
+
+      /**
+       * @description 快速按钮点击事件
+       * @param btn
+       * @param index
+       */
+      handleBtn({btn, index}){
+        this.$emit('onFastBtn', {btn, index});
+      },
+
+      /**
+       * @description 切换配送地址事件
+       */
+      handleAddress(){
+        this.$emit('onAddress');
+      },
+
+      /**
+       * @description 切换选中规格事件
+       */
+      handleSelect() {
+        this.$emit('onSelect', this.uiItem);
+      },
+
+      /**
+       * @description 点击店铺模块事件
+       * @param shop
+       */
+      handleClickShop(shop){
+        this.$emit('onShop', shop);
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-store-product {
+    &__swiper {
+      position: relative;
+      box-shadow: 0 0 unit(5,rpx) rgba(0,0,0,.2);
+
+      &-tips {
+        position: absolute;
+        right: 0;
+        bottom: unit(60,rpx);
+        min-width: unit(50,rpx);
+        padding: 0 unit(10,rpx);
+        background: rgba(0,0,0,.8);
+        text-align: center;
+        height: unit(40,rpx);
+        line-height: unit(40,rpx);
+        border-radius: unit(10,rpx) 0 0 unit(10, rpx);
+        color: #fff;
+        font-size: @xd-font-size-sm;
+      }
+    }
+
+    &__name {
+      background: #fff;
+      padding: unit(20,rpx) unit(20,rpx);
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+
+      &-text {
+        flex: 1;
+        width: 0;
+
+        &-price {}
+
+        &-special {
+          display: flex;
+          align-items: flex-start;
+          justify-content: flex-start;
+          flex-wrap: wrap;
+          font-size: @xd-font-size-sm;
+          margin: unit(10, rpx) 0 unit(10, rpx);
+
+          & > view {
+            color: #fff;
+            border-width: 1px;
+            border-style: solid;
+            border-radius: unit(10, rpx);
+            padding: unit(5, rpx) unit(10, rpx);
+            line-height: unit(32, rpx);
+            margin: 0 unit(10, rpx) unit(10, rpx) 0;
+
+          }
+        }
+
+        &-name {
+          font-size: @xd-font-size-lg;
+        }
+
+        &-sub {
+          font-size: @xd-font-size-base;
+          color: #666;
+          margin-top: unit(10,rpx);
+        }
+      }
+      &-collect {
+        padding-top: unit(10,rpx);
+        width: unit(100,rpx);
+        flex-shrink: 0;
+        text-align: center;
+        font-size: @xd-font-size-sm;
+
+        & > view:last-child {
+          transform: scale(0.9);
+        }
+      }
+    }
+
+    &__shop {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: #fff;
+      margin-top: unit(20,rpx);
+      padding: unit(20,rpx);
+
+      &-image {
+        flex-shrink: 0;
+        width: unit(150, rpx);
+        height: unit(150,rpx);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: unit(20,rpx);
+
+        & > image {
+          max-height: unit(150,rpx);
+          max-width: unit(150,rpx);
+        }
+      }
+
+      &-content {
+        flex: 1;
+        width: 0;
+        display: flex;
+        justify-content: flex-start;
+        align-content: space-between;
+        flex-wrap: wrap;
+        min-height: unit(120,rpx);
+
+        & > view:first-child {
+          font-size: @xd-font-size-lg;
+          margin-bottom: unit(10,rpx);
+        }
+
+        & > view:last-child {
+          font-size: @xd-font-size-sm;
+          color: #999;
+        }
+      }
+    }
+
+    &__operate {
+      margin-top: unit(20, rpx);
+      background: #fff;
+
+      &-item {
+        border-bottom: 1px solid #efefef;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: unit(25, rpx) 0;
+        line-height: unit(40, rpx);
+        font-size: @xd-font-size-base;
+      }
+
+      &-label {
+        flex-shrink: 0;
+        padding-left: unit(20, rpx);
+        min-width: unit(100, rpx);
+        font-weight: bold;
+        padding-right: unit(20, rpx);
+      }
+
+      &-value {
+        flex: 1;
+        width: 0;
+        line-height: unit(30,rpx);
+        font-size: @xd-font-size-sm;
+
+        & > view {
+          padding-bottom: unit(10, rpx);
+        }
+
+        & > view:first-child {
+
+          color: #666;
+        }
+
+
+      }
+
+      &-icon {
+        flex-shrink: 0;
+        padding: unit(10,rpx) unit(20,rpx);
+        width: unit(50,rpx);
+      }
+    }
+
+    &__sendRange {
+      margin-top: unit(20, rpx);
+      background: #fff;
+
+      &-item {
+        border-bottom: 1px solid #efefef;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: unit(25, rpx) 0;
+        line-height: unit(40, rpx);
+        font-size: @xd-font-size-base;
+      }
+
+      &-label {
+        flex-shrink: 0;
+        padding-left: unit(20, rpx);
+        min-width: unit(100, rpx);
+        font-weight: bold;
+        padding-right: unit(20, rpx);
+      }
+
+      &-value {
+        flex: 1;
+        width: 0;
+        line-height: unit(40, rpx);
+        font-size: @xd-font-size-sm;
+      }
+
+      &-icon {
+        flex-shrink: 0;
+        padding: unit(0, rpx) unit(20, rpx);
+        height: unit(40,rpx);
+        width: unit(50, rpx);
+      }
+    }
+
+    &__label {
+      margin-top: unit(20,rpx);
+      background: #fff;
+
+      &-item {
+        border-bottom: 1px solid #efefef;
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        padding: unit(25,rpx) 0;
+        line-height: unit(40,rpx);
+        font-size: @xd-font-size-base;
+
+        &-tag {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-wrap: wrap;
+
+          & > view {
+            margin-right: unit(10,rpx);
+            margin-bottom: unit(10,rpx);
+          }
+        }
+
+        &>view:first-child {
+          flex-shrink: 0;
+          padding-left: unit(20,rpx);
+          min-width: unit(100,rpx);
+          font-weight: bold;
+          padding-right: unit(20,rpx);
+        }
+
+        &>view:last-child {
+          flex: 1;
+          width: 0;
+          padding-right: unit(20, rpx);
+
+        }
+
+        &:last-child {
+          border-bottom: 0;
+        }
+      }
+    }
+
+    &__notice {
+      margin-top: unit(20, rpx);
+      background: #fff;
+      padding: unit(20,rpx);
+      line-height: unit(40,rpx);
+      color: red;
+      font-size: @xd-font-size-base;
+    }
+
+    &__tips {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right:0;
+      background: #fdf6ec;
+      .safe-area();
+      color: #e6a23c;
+      z-index: 2000;
+      border-top: 1px solid #ffe5bd;
+
+      & > view:first-child {
+        font-size: @xd-font-size-sm;
+        line-height: unit(30,rpx);
+        padding: unit(16,rpx) unit(20,rpx) unit(16, rpx) unit(10, rpx);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        & >view:last-child{
+          flex: 1;
+          width: 0;
+        }
+
+        & > view:first-child {
+          flex-shrink: 0;
+          margin-right: unit(6,rpx);
+        }
+      }
+
+      & > view:last-child {
+        height: unit(100,rpx);
+      }
+
+    }
+
+    &__content {
+      &-top {
+        padding: unit(20,rpx) 0;
+      }
+
+      &-text {
+        font-size: @xd-font-size-base + 2;
+        padding: 0 unit(20,rpx);
+        background: #fff;
+
+        /*  #ifdef  H5  */
+        & /deep/ p {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-wrap: wrap;
+          line-height: unit(50, rpx);
+        }
+        /*  #endif  */
+
+      }
+
+      &-bottom {
+        padding: unit(10, rpx) 0;
+      }
+    }
+
+    &__func {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      z-index: 3000;
+      height: unit(100,rpx);
+      box-shadow: 0 0 unit(10,rpx) rgba(0,0,0,.08);
+      border-top: 1px solid #efefef;
+      background: #fff;
+      .safe-area();
+
+      &-right {
+        flex: 1;
+        width: 0;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        &> view {
+          margin-right: unit(20,rpx);
+        }
+      }
+
+      &-left {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-shrink: 0;
+        width: 40%;
+
+        &-num {
+          position: absolute;
+          top: unit(-8,rpx);
+          left: 71%;
+          min-width: unit(20,rpx);
+          padding: 0 unit(10,rpx);
+          height: unit(40,rpx);
+          color: #fff;
+          line-height: unit(40,rpx);
+          transform: translateX(-50%) scale(0.8);
+          text-align: center;
+          border-radius: unit(20,rpx);
+          font-size: @xd-font-size-sm;
+        }
+
+        & >view {
+          flex: 1;
+          text-align: center;
+          position: relative;
+
+          &> view:last-child {
+            transform: scale(0.9);
+            font-size: @xd-font-size-sm;
+          }
+        }
+      }
+    }
+
+
+  }
+</style>
+
+<style lang="less">
+  /*  #ifdef  MP-WEIXIN  */
+  .xd-store-product__content-text {
+
+  }
+  .xd-store-product__content-text .p_class,
+  .xd-store-product__content-text .div_class
+  {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    line-height: unit(50,rpx);
+  }
+
+  /*  #endif  */
+
+
+</style>