Merge branch 'litemall-vue' of https://github.com/pkwenda/litemall into pkwenda-litemall-vue

litemall-vue/src/views/items/detail/EntityGroup/popup-props.vue

+<template>
+  <div class="popup_wrap">
+    <van-icon name="clear" class="cancel_popup" @click.native="$parent.value = false"></van-icon>
+    <div class="popup_header">商品属性</div>
+    <div class="popup_content">
+      <van-cell-group>
+        <van-cell v-for="(str, i) in propsStr" :key="i">
+          <van-row>
+            <van-col span="8">{{str[0]}}</van-col>
+            <van-col span="16">{{str[1]}}</van-col>
+          </van-row>
+        </van-cell>
+      </van-cell-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Row, Col } from 'vant';
+
+export default {
+  name: 'popup-props',
+
+  props: {
+    propsStr: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  components: {
+    [Col.name]: Col,
+    [Row.name]: Row
+  }
+};
+</script>
+
+
+<style lang="scss" scoped>
+.popup_wrap {
+  position: relative;
+  padding-bottom: 30px;
+  box-sizing: border-box;
+  .popup_header {
+    padding: 15px 0 30px 0;
+    text-align: center;
+  }
+
+  .popup_content {
+    min-height: 150px;
+    max-height: 400px;
+    box-sizing: border-box;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    padding: 0 10px;
+    line-height: 30px;
+    &::-webkit-scrollbar {
+      background-color: #fff;
+      width: 5px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+      background-color: #bebebe;
+    }
+    ol {
+      padding-left: 15px;
+      list-style: decimal;
+    }
+  }
+
+  .cancel_popup {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    z-index: 9;
+    font-size: 18px;
+  }
+}
+</style>

litemall-vue/src/views/items/detail/VirtualGroup/index.vue

+<template>
+	<div class="item_cell_group">
+		<van-cell-group>
+			<van-cell title="有效期" value="2017-8-18~2018-8-19"/>
+			<van-cell title="选择规格" isLink :value="skuComb.sku_str" @click.native="skuClick" />
+			<van-cell title="文一西路花蒋路交叉口" isLink url="http://m.amap.com/navi/?dest=120.145409,30.238695&key=ab67b14d58d47912a9feb63ba862450c&destName=三潭印月"/>
+			<van-cell isLink v-if="mobile">
+				<template slot="title">
+					<a :href="'tel:' + mobile" class="store_mobile">{{mobile}}</a>
+				</template>
+			</van-cell>
+			<van-cell title="注意事项" @click.native="showPopup = true" isLink />
+		</van-cell-group>
+
+		<van-sku
+			v-model="showSku"
+			:showAddCartBtn="showAddCartBtn"
+			:buyText="buyText"
+			:sku="sku.sku"
+			:goods="sku.goods_info"
+			:goodsId="sku.goods_id"
+			:disableStepperInput="true"
+			@buy-clicked="buyGoods"
+		/>
+
+		<van-popup v-model="showPopup"  position="bottom" lockOnScroll>
+			<div class="popup_wrap">
+				<van-icon name="clear" class="cancel_popup" @click.native="showPopup = false"></van-icon>
+				<div class="popup_header">注意事项</div>
+				<div class="popup_content">
+					<div>这里是注意事项的内容:</div>
+					<ol>
+						<li>这里是注意意事项的内容事项的内容</li>
+						<li>这里是注意事意事项的内容项的内容</li>
+						<li>这里是注意意事项的内容事项的内容</li>
+						<li>这里是注意意事项的内容事项的内容</li>
+						<li>这里是注意意事项的内容事项的内容</li>
+						<li>这里是注意事项的内容</li>
+						<li>这里是注意意事项的内容事项的内容</li>
+						<li>这里是注意意事项的内容事项的内容</li>
+						<li>这里是注意意事项的内容事项的内容</li>
+					</ol>
+				</div>
+			</div>
+		</van-popup>
+	</div>
+</template>
+
+<script>
+//	import sku from "./sku";
+import actionMixin from '../mix';
+
+export default {
+  name: 'virtual-group',
+  props: {
+    mobile: String,
+    skuComb: {
+      type: Object,
+      default: () => ({})
+    },
+    addressVal: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  mixins: [actionMixin],
+  data() {
+    return {
+      //				sku,
+    };
+  },
+  methods: {
+    addressClick() {}
+  }
+};
+</script>
+
+
+<style lang="scss" scoped>
+.popup_wrap {
+  position: relative;
+  padding-bottom: 30px;
+  box-sizing: border-box;
+}
+.popup_header {
+  padding: 15px 0 30px 0;
+  text-align: center;
+}
+
+.popup_content {
+  height: 150px;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  padding: 0 10px;
+  line-height: 30px;
+  &::-webkit-scrollbar {
+    background-color: #fff;
+    width: 5px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background-color: #bebebe;
+  }
+  ol {
+    padding-left: 15px;
+    list-style: decimal;
+  }
+}
+
+.store_mobile {
+  display: block;
+}
+
+.cancel_popup {
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  font-size: 18px;
+}
+</style>

litemall-vue/src/views/items/detail/index.vue

+<template>
+  <div class="item_detail">
+    <van-swipe :autoplay="3000">
+      <van-swipe-item v-for="(image, index) in itemImgs" :key="index">
+        <!-- <img v-lazy="image" width="100%"> -->
+        <img :src="image" width="100%">
+      </van-swipe-item>
+    </van-swipe>
+    <van-cell-group class="item_cell_group" v-if="goods">
+      <van-cell class="item_info">
+        <div>
+          <span class="item_price">{{ goods.retailPrice*100 | yuan }}</span>
+          <span class="item_market_price">{{goods.counterPrice*100 | yuan}}</span>
+        </div>
+        <div class="item-title">
+          <!-- <van-tag plain type="danger" v-if="goods.is_haitao">海淘</van-tag> -->
+          {{ goods.name }}
+        </div>
+        <!-- <div class="item_intro">{{goods.sell_point}}</div> ???-->
+        <!-- <div class="item_dispatch">发货地: {{}}</div> -->
+      </van-cell>
+    </van-cell-group>
+
+    <component
+      v-if="goods"
+      ref="goodAction"
+      v-bind:is="'entity-group'"
+      :selectSku.sync="selectSku"
+      :addressVal.sync="addressVal"
+      :mobile="mobile"
+      :goods-info="goods"
+      @skuBuy="doBuyNow"
+      @cart-count="cartEvent"
+    />
+
+    <div class="item_desc" v-if="goods">
+      <div class="item_desc_title">商品详情</div>
+      <div class="item_desc_wrap" v-if="goods.detail.length === 0" style="padding-left: 170px;">
+        <p>无详情</p>
+      </div>
+      <div class="item_desc_wrap" v-html="goods.detail"></div>
+    </div>
+
+    <van-goods-action>
+      <!-- <van-goods-action-mini-btn @click="doContact" icon="wangwang" iconClass="red afterTag"/> -->
+      <van-goods-action-mini-btn @click="toCart" icon="cart" :info="cartInfo"/>
+      <van-goods-action-mini-btn
+        :style="collectAdd ? 'color: #f7b444;':''"
+        @click="addCollect"
+        icon="shoucang"
+      />
+      <van-goods-action-big-btn @click="openSku('cart')" text="加入购物车"/>
+      <van-goods-action-big-btn primary @click="openSku('buy')" text="立即购买"/>
+    </van-goods-action>
+
+    <van-popup v-model="showContact">
+      <md-kefu mobile="16454193338"/>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { GOODS_DETAIL } from '@/api/goods';
+
+import {
+  Swipe,
+  SwipeItem,
+  GoodsAction,
+  GoodsActionBigBtn,
+  GoodsActionMiniBtn,
+  Popup
+} from 'vant';
+
+import md_kefu from '@/vue/components/md-kefu/';
+
+export default {
+  props: {
+    itemId: [String, Number]
+  },
+
+  data() {
+    const isLogin = !!localStorage.getItem('Authorization');
+    return {
+      isLogin,
+      itemImgs: [],
+      collectAdd: false,
+      showContact: false,
+      cartInfo: '0',
+      mobile: '13454193338',
+      selectSku: {
+        selectedNum: 1,
+        selectedSkuComb: {}
+      },
+      addressVal: {
+        id: null,
+        area_name: '',
+        district: '',
+        city: '',
+        province: ''
+      },
+      goods: null,
+      productList: []
+    };
+  },
+
+  computed: {
+    // itemImgs() {
+    //   debugger;
+    //   return this.goods.info.gallery;
+    // }
+  },
+
+  created() {
+    this.initData();
+  },
+
+  methods: {
+    async initData() {
+      // let a = this.$route.params.itemId;
+      this.$reqGet(`/wx/goods/detail?id=${this.itemId}`).then(
+        res => {
+          this.goods = res.data.data.info;
+          this.goods.attribute = res.data.data.attribute;
+          this.goods.specificationList = res.data.data.specificationList;
+          this.goods.productList = res.data.data.productList;
+          this.productList = res.data.data.productList;
+          this.itemImgs = res.data.data.info.gallery || [];
+          this.collectAdd = res.data.data.userHasCollect === 1;
+        }
+      );
+
+      let { data } = await this.$reqGet('/wx/cart/goodscount');
+      this.cartInfo = data.data;
+
+      // this.$reqGet(GOODS_DETAIL).then(res => {
+      //   this.goods = res.data.data;
+      // });
+    },
+    openSku(status) {
+      const goodAction = this.$refs.goodAction;
+      goodAction.skuClick(status);
+    },
+    cartEvent(count) {
+      this.cartInfo = ~~this.cartInfo + ~~count + '';
+    },
+    doBuyNow() {
+      // if (
+      //   (this.goods.has_sku && this.selectSku.sku_id) ||
+      //   !this.goods.has_sku
+      // ) {
+      //   this.$router.push({ name: 'placeOrderEntity' });
+      // } else {
+      //   const goodAction = this.$refs.goodAction;
+      //   goodAction.showSku = true;
+      //   goodAction.isSkuBuy = true;
+      // }
+    },
+    addCart() {
+      // debugger;
+      // if (this.goods.has_sku && this.selectSku.sku_id) {
+      // this.$reqPost('/wx/cart/add', {
+      //   goodsId: this.itemId,
+      //   number: 1
+      // }).then(() => {
+      //   this.$toast({
+      //     message: '已添加至购物车',
+      //     duration: 1500
+      //   });
+      //   this.cartInfo = String(parseInt(this.cartInfo) + 1);
+      // });
+      // }
+    },
+    doContact() {
+      this.showContact = true;
+    },
+    toCart() {
+      this.$router.push({
+        name: 'cart'
+      });
+    },
+    async addCollect() {
+      let { data } = await this.$reqPost(
+        '/wx/collect/addordelete',
+        {
+          valueId: this.itemId,
+          type: 0
+        }
+      );
+      let type = data.data.type;
+      this.collectAdd = type === 'add' ? true : false;
+      this.$toast({
+        message: this.collectAdd ? '添加成功' : '取消成功',
+        duration: 1500
+      });
+    }
+  },
+
+  components: {
+    [md_kefu.name]: md_kefu,
+    [Popup.name]: Popup,
+    [Swipe.name]: Swipe,
+    [SwipeItem.name]: SwipeItem,
+    [GoodsAction.name]: GoodsAction,
+    [GoodsActionBigBtn.name]: GoodsActionBigBtn,
+    [GoodsActionMiniBtn.name]: GoodsActionMiniBtn,
+    'entity-group': () =>
+      import(/* webpackChunkName: "EntityGroup" */ './EntityGroup/index'),
+    'virtual-group': () =>
+      import(/* webpackChunkName: "VirtualGroup" */ './VirtualGroup/index.vue')
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.item_detail {
+  img {
+    max-width: 100%;
+  }
+}
+
+.item_cell_group {
+  margin-bottom: 15px;
+}
+
+.item_price {
+  font-size: 20px;
+  color: $red;
+  margin-right: 10px;
+}
+
+.item_market_price {
+  color: $font-color-gray;
+  text-decoration: line-through;
+  font-size: $font-size-small;
+}
+
+.item-title {
+  line-height: 1.4;
+}
+
+.item_dispatch {
+  font-size: $font-size-small;
+  color: $font-color-gray;
+}
+
+.item_intro {
+  line-height: 18px;
+  margin: 5px 0;
+  font-size: $font-size-small;
+  color: $font-color-gray;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.item_desc {
+  background-color: #fff;
+  p {
+    padding: 0 10px;
+  }
+  /deep/ img {
+    max-width: 100%;
+    display: block;
+  }
+}
+
+.item_desc_title {
+  @include one-border;
+  padding: 10px 0;
+  text-align: center;
+}
+</style>

litemall-vue/src/views/items/detail/mix.js

+import { Sku, Popup } from 'vant';
+
+export default {
+  props: {
+    selectSku: Object
+  },
+  data() {
+    return {
+      showSku: false,
+      showAddCartBtn: false,
+      isSkuBuy: false,
+      buyText: '确定'
+    };
+  },
+  methods: {
+    buyGoods(data) {
+      data = this.selectSkuData(data);
+      this.showSku = false;
+      this.$emit('update:selectSku', data);
+      this.isSkuBuy && this.$emit('skuBuy', data);
+    },
+    selectSkuData(data) {
+      debugger
+      if (data.selectedSkuComb) {
+        data.selectedSkuComb.sku_str = data.selectedSkuComb.props_str_arr
+          .map(str => str.match(/[^:]*:([^:]*)/)[1])
+          .join(',');
+      } else {
+        data.selectedSkuComb = {};
+      }
+      return data;
+    },
+    skuClick() {
+      this.isSkuBuy = false;
+      this.showSku = true;
+    }
+  },
+  components: {
+    [Sku.name]: Sku,
+    [Popup.name]: Popup
+  }
+};

litemall-vue/src/views/items/search/search-tag.vue

+<template>
+	<span class="search_tag" @click="OnClick">
+		<slot></slot>
+	</span>
+</template>
+
+<script>
+export default {
+  name: 'word-tag',
+  methods: {
+    OnClick() {
+      this.$emit('click');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.search_tag {
+  display: inline-block;
+  font-size: 12px;
+  background-color: #f4f4f4;
+  padding: 3px 10px;
+  border-radius: 11px;
+  min-width: 20px;
+  text-align: center;
+}
+</style>

litemall-vue/src/views/login/login-footer.vue

+<template>
+  <div class="text-desc text-center bottom_positon">技术支持: liteMall</div>
+</template>
+
+<script>
+export default {
+  name: 'login-footer'
+};
+</script>
+
+
+<style scoped>
+.bottom_positon {
+  position: absolute;
+  bottom: 30px;
+  width: 100%;
+}
+</style>