cdm2-shop-uniapp/pages/activity/bargain/index.vue

<template>
	<view>
		<block v-if="bargain.length>0">
			<div class="bargain-record pad30" ref="container">
				<div class="item borRadius14" v-for="(item, index) in bargain" :key="index">
					<div class="picTxt acea-row row-between-wrapper">
						<div class="pictrue">
							<image :src="item.picUrl" />
						</div>
						<div class="text acea-row row-column-around">
							<div class="line1" style="width: 100%;">{{ item.activityName }}</div>
							<count-down :justify-left="'justify-content:left'" :bgColor="bgColor" :is-day="true" :tip-text="'倒计时 '" :day-text="'天'"
							 :hour-text="' 时 '" :minute-text="' 分 '"
							 :second-text="' 秒 '" :datatime="item.endTime / 1000" v-if="item.status === 1"></count-down>
							<div class="successTxt font-color-red" v-else-if="item.status === 2">砍价成功</div>
							<div class="endTxt" v-else>活动已结束</div>
							<div class="money">
								已砍至<span class="symbol font-color-red">￥</span><span class="num font-color-red">{{ fen2yuan(item.bargainPrice) }}</span>
							</div>
						</div>
					</div>
					<div class="bottom acea-row row-between-wrapper">
						<div class="purple" v-if="item.status === 1">活动进行中</div>
						<div class="success" v-else-if="item.status === 2">砍价成功</div>
						<div class="end" v-else>活动已结束</div>
						<div class="acea-row row-middle row-right">
							<div class="bnt bg-color-red" v-if="item.status === 2 && !item.orderId" @click="goConfirm(item)">
                去下单
              </div>
							<div class="bnt bg-color-red" v-if="item.status === 2 && item.orderId && !item.payStatus" @click="goPay(item.orderId, item.payOrderId)">
								去付款
							</div>
							<div class="bnt bg-color-red" v-if="item.status === 1" @click="goDetail(item.id, item.activityId)">
								继续砍价
							</div>
							<div class="bnt bg-color-red" v-if="item.status === 3" @click="goList">
                重开一个
              </div>
						</div>
					</div>
				</div>
				<Loading :loaded="status" :loading="loadingList" />
			</div>
		</block>
		<block v-if="bargain.length === 0">
			<emptyPage title="暂无砍价记录～"></emptyPage>
		</block>
		<home></home>
	</view>
</template>
<script>
	import CountDown from "@/components/countDown";
	import emptyPage from '@/components/emptyPage.vue'
	import { getBargainUserCancel } from "@/api/activity";
  import * as BargainApi from '@/api/promotion/bargain.js';
  import Loading from "@/components/Loading";
	import home from '@/components/home';
	import { mapGetters } from "vuex";
  import * as Util from '@/utils/util.js';
  import { toLogin } from '@/libs/login.js';
  export default {
		name: "BargainRecord",
		components: {
			CountDown,
			Loading,
			emptyPage,
			home,
		},
		props: {},
		computed: mapGetters(['isLogin', 'userInfo', 'uid']),
		data: function() {
			return {
				bgColor:{
					'bgColor': '',
					'Color': '#E93323',
					'width': '40rpx',
					'timeTxtwidth': '28rpx',
					'isDay': false
				},
				bargain: [],
				status: false, // 砍价列表是否获取完成 false 未完成 true 完成
				loadingList: false, // 当前接口是否请求完成 false 完成 true 未完成
				page: 1, // 页码
				limit: 20, // 数量

        // TODO 芋艿：这里后续要干掉，应该单独有支付页
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: 'weixin',
						title: '微信快捷支付'
					},
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'yue',
						title: '可用余额:',
						number: 0
					}
				],
			};
		},
		onLoad: function() {
			this.getBargainUserList();
		},
		onShow() {
			if (!this.isLogin) {
        toLogin();
        return
			}

      this.payMode[1].number = this.userInfo.nowMoney;
      this.$set(this, 'payMode', this.payMode);
		},
		methods: {
      /**
       * 获得拼团记录
       */
      getBargainUserList: function() {
        if (this.loadingList || this.status) {
          return;
        }
        this.loadingList = true
        BargainApi.getBargainRecordPage({
          pageNo: this.page,
          pageSize: this.limit
        }).then(res => {
          this.status = res.data.list.length < this.limit;
          this.bargain.push.apply(this.bargain, res.data.list);
          this.page++;
          this.loadingList = false;
        }).catch(res => {
          this.$dialog.error(res);
          this.loadingList = false;
        });
      },
      /**
       * 立即下单
       */
      goConfirm: function(item) {
        uni.navigateTo({
          url: '/pages/users/order_confirm/index?skuId=' + item.skuId + '&count=1'
            + '&bargainRecordId=' + item.id
        });
      },
      /**
       * 前往砍价记录的详情
       */
      goDetail: function(id, activityId) {
        uni.navigateTo({
          url: `/pages/activity/goods_bargain_details/index?id=${activityId}&startBargainUid=${this.uid}&storeBargainId=${id}`
        })
      },
      /**
       * 前往砍价活动的列表
       */
      goList: function() {
        uni.navigateTo({
          url: '/pages/activity/goods_bargain/index'
        })
      },
      // TODO @芋艿：貌似没看到调用的地方，估计暂时没实现
      getBargainUserCancel: function(bargainId) {
        var that = this;
        getBargainUserCancel({
          bargainId: bargainId
        }).then(res => {
          that.status = false;
          that.loadingList = false;
          that.page = 1;
          that.bargain = [];
          that.getBargainUserList();
          that.$util.Tips({
            title: res
          })
        }).catch(res => {
          that.$util.Tips({
            title: res
          })
        });
      },

			/**
			 * 打开支付组件
			 */
			goPay: function (orderId, payOrderId) {
        const returnUrl = encodeURIComponent('/pages/order_pay_status/index?order_id=' + orderId);
        uni.navigateTo({
          url: `/pages/goods/cashier/index?order_id=${payOrderId}&returnUrl=${returnUrl}`
        });
      },

      fen2yuan(price) {
        return Util.fen2yuan(price)
      }
		},
		onReachBottom() {
			this.getBargainUserList();
		}
	};
</script>

<style lang="scss" scoped>
	/*砍价记录*/
	.bargain-record .item .picTxt .text .time {
		height: 36rpx;
		line-height: 36rpx;
		.styleAll {
			color: #fc4141;
			font-size:24rpx;
		}
	}
	.bargain-record .item .picTxt .text .time .red {
		color: #999;
		font-size:24rpx;
	}
	.bargain-record .item {
		background-color: #fff;
		margin-top: 15rpx;
		padding: 30rpx 24rpx 0 24rpx;
	}

	.bargain-record .item .picTxt {
		border-bottom: 1px solid #f0f0f0;
		padding-bottom: 30rpx;
	}

	.bargain-record .item .picTxt .pictrue {
		width: 150upx;
		height: 150upx;
	}

	.bargain-record .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6upx;
	}

	.bargain-record .item .picTxt .text {
		width: 470rpx;
		font-size: 30upx;
		color: #333333;
		height: 160rpx;
	}

	.bargain-record .item .picTxt .text .time {
		font-size: 24upx;
		color: #868686;
		justify-content: left !important;
	}

	.bargain-record .item .picTxt .text .successTxt{
		font-size:24rpx;
	}

	.bargain-record .item .picTxt .text .endTxt{
		font-size:24rpx;
		color: #999;
	}
	.bargain-record .item .picTxt .text .money {
		font-size: 24upx;
		color: #999999;
	}

	.bargain-record .item .picTxt .text .money .num {
		font-size: 32upx;
		font-weight: bold;
	}

	.bargain-record .item .picTxt .text .money .symbol {
		font-weight: bold;
	}

	.bargain-record .item .bottom {
		height: 100upx;
		font-size: 27upx;
	}

	.bargain-record .item .bottom .purple {
		color: #f78513;
	}

	.bargain-record .item .bottom .end {
		color: #999;
	}

	.bargain-record .item .bottom .success {
		color: $theme-color;
	}

	.bargain-record .item .bottom .bnt {
		font-size: 27upx;
		color: #fff;
		width: 176upx;
		height: 60upx;
		border-radius: 32upx;
		text-align: center;
		line-height: 60upx;
	}

	.bargain-record .item .bottom .bnt.cancel {
		color: #aaa;
		border: 1px solid #ddd;
	}

	.bargain-record .item .bottom .bnt~.bnt {
		margin-left: 18upx;
	}
</style>