【增加】首页diy

【增加】下单页更新

components/common-payment/common-payment.vue

@@ -230,7 +230,7 @@
 					</view>
 				</view>
 
-				<view class="site-wrap buyer-message">
+				<view class="site-wrap buyer-message" v-if="createDataKey !== 'futuresOrderCreateData'">
 					<view class="order-cell">
 						<text class="tit">买家留言</text>
 						<view class="box text-overflow " @click="openPopup('buyerMessagePopup')">
@@ -327,7 +327,7 @@
 
 				<!-- 订单金额 -->
 				<template v-if="calculateData">
-					<view class="order-money">
+					<view class="order-money" v-if="createDataKey !== 'futuresOrderCreateData'">
 						<view class="order-cell">
 							<text class="tit">商品金额</text>
 							<view class="box">
@@ -396,6 +396,52 @@
 						</view>
 					</view>
 
+          <view class="order-money" v-if="createDataKey === 'futuresOrderCreateData'">
+            <view class="order-cell">
+              <text class="tit">售卖价格</text>
+              <view class="box">
+                <text class="unit color-title price-font">{{ $lang('common.currencySymbol') }}</text>
+                <text class="money color-title price-font">￥{{ calculateData.futures_info.market_price * calculateData.futures_info.total | moneyFormat }}元</text>
+              </view>
+            </view>
+          </view>
+          <view class="order-money" v-if="createDataKey === 'futuresOrderCreateData'">
+            <view class="order-cell">
+              <text class="tit">采购价格</text>
+              <view class="box">
+                <text class="unit color-title price-font">{{ $lang('common.currencySymbol') }}</text>
+                <text class="money color-title price-font">￥{{ calculateData.goods_money | moneyFormat }}元</text>
+              </view>
+            </view>
+          </view>
+          <view class="order-money" v-if="createDataKey === 'futuresOrderCreateData'">
+            <view class="order-cell">
+              <text class="tit">采购数量</text>
+              <view class="box">
+<!--                <text class="unit color-title price-font">{{ $lang('common.currencySymbol') }}</text>-->
+                <text class="money color-title price-font">{{ calculateData.futures_info.total }}件</text>
+              </view>
+            </view>
+          </view>
+          <view class="order-money" v-if="createDataKey === 'futuresOrderCreateData'">
+            <view class="order-cell">
+              <text class="tit">销售商</text>
+              <view class="box">
+<!--                <text class="unit color-title price-font">{{ $lang('common.currencySymbol') }}</text>-->
+                <text class="money color-title price-font">{{ calculateData.futures_info.seller_nickname }}</text>
+              </view>
+            </view>
+          </view>
+          <view class="order-money" v-if="createDataKey === 'futuresOrderCreateData'">
+            <view class="order-cell">
+              <text class="tit">订单时间</text>
+              <view class="box">
+<!--                <text class="unit color-title price-font">{{ $lang('common.currencySymbol') }}</text>-->
+                <text class="money color-title price-font">{{ timestampToTime((new Date()).toLocaleString('en-US',{hour12: false}).split(" ")) }}</text>
+              </view>
+            </view>
+          </view>
+
 					<view v-if="transactionAgreement.title && transactionAgreement.content" class="agreement">
 						购买前请先阅读
 						<text @click="$refs.agreementPopup.open()">《{{ transactionAgreement.title }}》</text>

components/common-payment/payment.js

@@ -50,6 +50,9 @@ export default {
 				this.orderCreateData.latitude = this.location.latitude;
 				this.orderCreateData.longitude = this.location.longitude;
 			}
+			if(this.createDataKey === 'futuresOrderCreateData'){
+				this.orderCreateData.buyer_message = this.orderCreateData.order_remarks
+			}
 			this.payment();
 		} else {
 			setTimeout(() => {
@@ -825,6 +828,15 @@ export default {
 			this.orderCreateData.member_goods_card[ this.selectGoodsCard.skuId ] = this.selectGoodsCard.itemId || 0;
 			this.$refs.memberGoodsCardPopup.close();
 			this.calculate();
+		},
+		timestampToTime(times) {
+			let time = times[1]
+			let mdy = times[0]
+			mdy = mdy.split('/')
+			let month = parseInt(mdy[0]);
+			let day = parseInt(mdy[1]);
+			let year = parseInt(mdy[2])
+			return year + '-' + month + '-' + day + ' ' + time
 		}
 	},
 	filters: {

components/diy-components/diy-many-goods-list.vue

@@ -1,6 +1,7 @@
 <template>
 	<view class="many-goods-list">
-		<scroll-view scroll-x="true" :scroll-into-view="'a' + cateIndex">
+<!--		<scroll-view scroll-x="true" :scroll-into-view="'a' + cateIndex">-->
+      <view class="scroll">
 			<view
 				v-for="(item, index) in value.list"
 				class="scroll-item"
@@ -17,9 +18,75 @@
 					</view>
 				</view>
 			</view>
-		</scroll-view>
+      </view>
-		<diy-goods-list v-if="goodsValue" :value="goodsValue" ref="diyGoodsList"></diy-goods-list>
+<!--		</scroll-view>-->
-	</view>
+		<diy-goods-list v-if="goodsValue && (goodsValue.sources ==='category' || goodsValue.sources ==='diy')" :value="goodsValue" ref="diyGoodsList"></diy-goods-list>
+        <view class="list-wrap" v-if="goodsValue && (goodsValue.sources =='point')">
+          <view class="goods-list double-column" v-if="goodsList.length">
+            <view class="goods-item margin-bottom" v-for="(item, index) in goodsList" :key="index">
+              <view class="goods-img" @click="toDetail(item)">
+                <image :src="goodsImg(item.image)" mode="widthFix" @error="imgError(index)"></image>
+              </view>
+              <view class="info-wrap">
+                <view class="name-wrap">
+                  <view class="goods-name" @click="toDetail(item)">{{ item.name }}</view>
+                </view>
+                <view class="lineheight-clear">
+                  <view class="discount-price">
+                    <text class="unit ">{{ item.point }}</text>
+                    <text class="unit  font-size-tag">兑换券</text>
+                    <block v-if="item.price > 0 && item.pay_type > 0">
+                      <text class="unit  font-size-tag">+</text>
+                      <text class="unit  font-size-tag">{{ $lang('common.currencySymbol') }}</text>
+                      <text class="price  font-size-toolbar" >{{ parseFloat(item.price).toFixed(2).split(".")[0] }}</text>
+                      <text class="unit  font-size-tag">.{{ parseFloat(item.price).toFixed(2).split(".")[1] }}</text>
+                    </block>
+                  </view>
+                </view>
+                <view class="pro-info"  v-if="item.stock_show">
+                  <view class="font-size-activity-tag color-tip">库存{{ item.stock }}</view>
+                  <view class="sale font-size-activity-tag color-tip" @click="toDetail(item)">
+                    <!-- <button type="primary" size="mini">立即兑换</button> -->
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="empty" v-if="goodsList.length == 0">
+            <ns-empty :isIndex="false" text="暂无兑换券商品"></ns-empty>
+          </view>
+        </view>
+        <view v-if="goodsValue && (goodsValue.sources =='jianlou')">
+          <view class="goods-list" v-if="list.length > 0">
+            <view class="goods-block" v-for="(item,index) in list" :key="index">
+              <view class="left">
+                <image class="goods-image" :src="$util.img(item.goods_image)" mode="widthFix"></image>
+                <view class="goods-status" v-if="parseInt(item.status) === 2">正在销售</view>
+                <view class="goods-status" v-else>{{ status_text[item.status] }}</view>
+              </view>
+              <view class="right">
+                <view class="goods-title">{{ item.goods_name }}</view>
+                <view class="goods-sell">
+                  <view class="goods-sell-item">销售商：{{ item.seller_nickname }}</view>
+                  <view class="goods-sell-item">采购数量：{{ item.total }}件</view>
+                </view>
+                <view class="goods-bottom">
+                  <view class="price">
+                    <view class="price-item">单价:￥{{ item.market_price }}/{{ item.unit || '件' }}</view>
+                    <view class="price-item">采购价:<text class="purchase_price">￥{{ item.price }}</text></view>
+                  </view>
+                  <view class="buy-button">
+                    <view class="buy-btn" @click="$util.redirectTo('/pages_promotion/futures/details', { id: item.id }, 'redirectTo');">前去采购</view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view v-else>
+            <ns-empty :isIndex="false" :text="msg"></ns-empty>
+          </view>
+      </view>
+  </view>
 </template>
 
 <script>
@@ -36,11 +103,16 @@ export default {
 	data() {
 		return {
 			cateIndex: 0, // 当前选中的分类id
-			goodsValue: null // 商品列表数据
+			goodsValue: null, // 商品列表数据
+      goodsList: [],
+      list : [],
+      msg: ''
 		};
 	},
 	created() {
 		this.changeCateIndex(this.value.list[0], 0, true);
+    this.getData()
+    this.getList()
 	},
 	methods: {
 		changeCateIndex(item, index, isFirst) {
@@ -77,10 +149,99 @@ export default {
 
 			// 如果是第一次加载，不需要执行下面代码
 			if (isFirst) return;
-			this.$refs.diyGoodsList.goodsValue = this.goodsValue;
+			// this.$refs.diyGoodsList.goodsValue = this.goodsValue;
-			this.$refs.diyGoodsList.getGoodsList();
+			// this.$refs.diyGoodsList.getGoodsList();
-		}
+		},
-	}
+    //获取兑换券商品详情
+    getData(mescroll) {
+      this.$api.sendRequest({
+        url: '/pointexchange/api/goods/page',
+        data: {
+          // page_size: mescroll.size,
+          // page: mescroll.num,
+          type: 1,
+          // keyword: this.keyword,
+          // category_id: this.categoryId,
+          // min_point: this.minPoint,
+          // max_point: this.maxPoint,
+          // is_free_shipping: (this.isFreeShipping ? 1 : 0),
+          // order: this.order,
+          // sort: this.sort,
+          // coupon: this.coupon
+        },
+        success: res => {
+          let newArr = [];
+          let msg = res.message;
+          if (res.code == 0 && res.data) {
+            newArr = res.data.list;
+          } else {
+            this.$util.showToast({
+              title: msg
+            });
+          }
+          // mescroll.endSuccess(newArr.length);
+          //设置列表数据
+          // if (mescroll.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
+          this.goodsList = this.goodsList.concat(newArr); //追加新数据
+          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
+        },
+        fail() {
+          //联网失败的回调
+          // mescroll.endErr();
+          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
+        }
+      });
+    },
+    goodsImg(imgStr) {
+      let imgs = imgStr.split(',');
+      return imgs[0] ? this.$util.img(imgs[0], {
+        size: 'mid'
+      }) : this.$util.getDefaultImage().goods;
+    },
+    imgError(index) {
+      this.goodsList[index].goods_image = this.$util.getDefaultImage().goods;
+    },
+    //跳转至详情页面
+    toDetail(item) {
+      this.$util.redirectTo('/pages_promotion/point/detail', {
+        id: item.id
+      });
+    },
+    // 获取商品列表
+    getList(mescroll) {
+      this.$api.sendRequest({
+        url: '/futures/api/futures/list',
+        data: {
+          // page: mescroll.num,
+          // page_size: mescroll.size,
+          status: 'miaosha',
+        },
+        success: res => {
+          if(parseInt(res.code) === 0){
+            // mescroll.endSuccess(Object.keys(res.data.list).length);
+
+            //设置列表数据
+            // if (parseInt(mescroll.num) === 1){
+            //   this.list = []; //如果是第一页需手动制空列表
+            // }
+
+            this.list = this.list.concat(res.data.list); //追加新数据
+            // this.end_time = parseInt(res.data.end_time);
+            // 开启倒计时
+            // this.countDown();
+          }else {
+            this.msg = res.message;
+          }
+
+          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
+        },
+        fail: res => {
+          // mescroll.endErr();
+          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
+        }
+      });
+    },
+  },
 };
 </script>
 
@@ -140,4 +301,448 @@ scroll-view {
 		}
 	}
 }
+.scroll{
+  display: flex;
+  width: 100%;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: 20px 10px;
+  justify-content: space-evenly;
+
+  .scroll-item {
+    display: inline-block;
+    text-align: center;
+    vertical-align: top;
+
+    .item-wrap {
+      display: flex;
+      align-items: center;
+    }
+
+    .split-line {
+      display: inline-block;
+      width: 1rpx;
+      height: 30rpx;
+      background-color: #e5e5e5;
+      margin: 0 35rpx;
+    }
+
+    &.active {
+      .name {
+        font-weight: bold;
+      }
+
+      .desc {
+        color: #ffffff;
+        border-radius: 20rpx;
+      }
+    }
+
+    .name {
+      font-size: 32rpx;
+      color: $color-title;
+      line-height: 1;
+    }
+
+    .desc {
+      font-size: $font-size-tag;
+      color: $color-tip;
+      height: 36rpx;
+      line-height: 36rpx;
+      margin-top: 10rpx;
+      min-width: 120rpx;
+      max-width: 220rpx;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 0 10rpx;
+    }
+  }
+}
+
+// 商品列表单列样式
+.goods-list.single-column {
+  .goods-item {
+    padding: 26rpx;
+    background: #fff;
+    margin: $margin-updown $margin-both;
+    border-radius: $border-radius;
+    display: flex;
+    position: relative;
+
+    .goods-img {
+      width: 200rpx;
+      height: 200rpx;
+      overflow: hidden;
+      border-radius: $border-radius;
+      margin-right: 20rpx;
+
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .goods-tag {
+      color: #fff;
+      line-height: 1;
+      padding: 8rpx 12rpx;
+      position: absolute;
+      border-top-left-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+      top: 26rpx;
+      left: 26rpx;
+      font-size: $font-size-goods-tag;
+    }
+
+    .goods-tag-img {
+      position: absolute;
+      border-top-left-radius: $border-radius;
+      width: 80rpx;
+      height: 80rpx;
+      top: 26rpx;
+      left: 26rpx;
+      z-index: 5;
+      overflow: hidden;
+
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .info-wrap {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .name-wrap {
+      flex: 1;
+    }
+
+    .goods-name {
+      font-size: $font-size-base;
+      line-height: 1.3;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      height: 68rpx;
+    }
+
+    .introduction {
+      line-height: 1;
+      margin-top: 10rpx;
+    }
+
+    .discount-price {
+      display: inline-block;
+      font-weight: bold;
+      line-height: 1;
+      margin-top: 16rpx;
+      color: var(--price-color);
+      .unit {
+        margin-right: 6rpx;
+      }
+    }
+
+    .pro-info {
+      display: flex;
+      margin-top: 16rpx;
+
+      .delete-price {
+        text-decoration: line-through;
+        flex: 1;
+
+        .unit {
+          margin-right: 6rpx;
+        }
+      }
+
+      &>view {
+        line-height: 1;
+
+        &:nth-child(2) {
+          text-align: right;
+        }
+      }
+    }
+
+    .member-price-tag {
+      display: inline-block;
+      width: 60rpx;
+      line-height: 1;
+      margin-left: 6rpx;
+
+      image {
+        width: 100%;
+      }
+    }
+  }
+}
+
+// 商品列表双列样式
+.goods-list.double-column {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 $margin-both;
+  padding-top: $margin-updown;
+
+  .goods-item {
+    flex: 1;
+    position: relative;
+    background-color: #fff;
+    flex-basis: 48%;
+    max-width: calc((100% - 30rpx) / 2);
+    margin: 0 $margin-both $margin-updown 0;
+    border-radius: $border-radius;
+
+    &:nth-child(2n) {
+      margin-right: 0;
+    }
+
+    .goods-img {
+      position: relative;
+      overflow: hidden;
+      padding-top: 100%;
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+
+      image {
+        width: 100%;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+      }
+    }
+
+    .goods-tag {
+      color: #fff;
+      line-height: 1;
+      padding: 8rpx 16rpx;
+      position: absolute;
+      border-bottom-right-radius: $border-radius;
+      top: 0;
+      left: 0;
+      font-size: $font-size-goods-tag;
+    }
+
+    .goods-tag-img {
+      position: absolute;
+      border-top-left-radius: $border-radius;
+      width: 80rpx;
+      height: 80rpx;
+      top: 0;
+      left: 0;
+      z-index: 5;
+      overflow: hidden;
+
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .info-wrap {
+      padding: 0 26rpx 26rpx 26rpx;
+    }
+
+    .goods-name {
+      font-size: $font-size-base;
+      line-height: 1.3;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      margin-top: 20rpx;
+      height: 68rpx;
+    }
+
+    .discount-price {
+      display: inline-block;
+      font-weight: bold;
+      line-height: 1;
+      margin-top: 16rpx;
+      color: var(--price-color);
+      .unit {
+        margin-right: 6rpx;
+      }
+    }
+
+    .pro-info {
+      display: flex;
+      margin-top: 16rpx;
+
+      .delete-price {
+        text-decoration: line-through;
+        flex: 1;
+
+        .unit {
+          margin-right: 6rpx;
+        }
+      }
+
+      &>view {
+        line-height: 1;
+
+        &:nth-child(2) {
+          text-align: right;
+        }
+      }
+    }
+
+    .member-price-tag {
+      display: inline-block;
+      width: 60rpx;
+      line-height: 1;
+      margin-left: 6rpx;
+
+      image {
+        width: 100%;
+      }
+    }
+  }
+}
+.goods-list{
+  margin: 0 30rpx;
+
+  .goods-block{
+    --size--: calc((100vw - 100rpx) / 3);
+    border-radius: 20rpx;
+    background: #ffffff;
+    padding: 20rpx;
+    margin-bottom: 30rpx;
+    box-shadow: 0 2rpx 10rpx #eeeff2;
+    width: calc(100% - 40rpx);
+    display: inline-flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+    height: var(--size--);
+
+    .left{
+      margin-right: 20rpx;
+      height: var(--size--);
+      width: var(--size--);
+      position: relative;
+      border-radius: 20rpx;
+      overflow: hidden;
+
+      .goods-image{
+        max-width: 100% !important;
+        max-height: 100% !important;
+      }
+      .goods-status{
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        background: #fc4740;
+        color: #febebc;
+        font-size: 24rpx;
+        text-align: center;
+        height: 30rpx;
+        line-height: 30rpx;
+      }
+    }
+    .right{
+      width: calc((var(--size--) * 2) - 20rpx);
+      display: inline-flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      justify-content: flex-start;
+      align-items: flex-start;
+      height: 100%;
+      .goods-title{
+        width: 100%;
+        height: 50rpx;
+        line-height: 50rpx;
+        font-size: 30rpx;
+        font-weight: bold;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .goods-sell{
+        width: 100%;
+        display: inline-flex;
+        height: 50rpx;
+        line-height: 50rpx;
+        color: #b5b7c0;
+        .goods-sell-item{
+          width: 50%;
+          color: #b5b7c0;
+          font-size: 24rpx;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          line-height: 50rpx;
+        }
+        .goods-sell-item:nth-of-type(1){
+          text-align: left;
+        }
+        .goods-sell-item:nth-of-type(2){
+          text-align: right;
+        }
+      }
+      .goods-bottom{
+        width: 100%;
+        height: calc(var(--size--) - 100rpx);
+        display: inline-flex;
+        align-items: flex-end;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+
+        .price{
+          height: 100%;
+          display: inline-flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          justify-content: flex-end;
+          align-items: flex-start;
+          width: calc(100% - 140rpx);
+
+          .price-item{
+            width: 100%;
+            color: #b5b7c0;
+            font-size: 24rpx;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            height: 40rpx;
+            line-height: 40rpx;
+            .purchase_price{
+              color: #fe7e79;
+              font-size: 30rpx;
+              font-weight: bold;
+            }
+          }
+        }
+        .buy-button{
+          height: 100%;
+          display: inline-flex;
+          align-items: flex-end;
+          justify-content: flex-end;
+          .buy-btn{
+            width: 140rpx;
+            height: 70rpx;
+            line-height: 70rpx;
+            color: #fef5f5;
+            background: #ff2724;
+            font-size: 26rpx;
+            border-radius: 100rpx;
+            text-align: center;
+            margin-bottom: 8rpx;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

pages_promotion/futures/payment.vue

@@ -0,0 +1,49 @@
+<template>
+	<page-meta :page-style="themeColor"></page-meta>
+	<view>
+		<common-payment :api="api" create-data-key="futuresOrderCreateData" ref="payment"></common-payment>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			api: {
+				payment: '/futures/api/ordercreate/payment',
+				calculate: '/futures/api/ordercreate/calculate',
+				create: '/futures/api/ordercreate/create'
+			}
+		}
+	},
+	provide() {
+	    return {
+			promotion: this.promotion.bind(this)
+	    }
+	},
+	onShow() {
+		if (this.$refs.payment) this.$refs.payment.pageShow();
+	},
+	methods: {
+		promotion(data){
+			if (data.bale_info) {
+				return {title: '秒杀', content: `<text class="ns-text-color">${data.bale_info.price }}</text>元${data.bale_info.num }}件`}
+			}
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
+	background: none;
+	max-height: unset !important;
+	overflow-y: hidden !important;
+}
+/deep/ .uni-popup__wrapper {
+	border-radius: 20rpx 20rpx 0 0;
+}
+/deep/ .uni-popup {
+	z-index: 8;
+}
+</style>