2204-ui/pages/marketing/marketing.vue

<template>
    <view>
		<uni-card :cover="cover"  v-for="(item,index) in productList" :key="index"  @click="message('N',item.id)">
						<view slot="actions" class="card-actions">
							<view class="cu-list menu-avatar">
							<image style="width: 100%;" :src="item.productImage" ></image>
							</view>
							<view class="content flex-sub">
							     名称 ：{{item.name}}
							</view>
							<view class="text-content">
							    结束时间： {{item.endTime}}
							</view>
							<view class="text-content">
							    剩余库存：{{item.remainStock}}
							</view>
							<view class="text-content">
							    商品价格：{{item.productPrice}}
							</view>
						</view>
					</uni-card>
				 <uni-pagination :total="total" title="标题文字" prev-text="前一页" next-text="后一页" />
		<view>
			<text class="example-info">当前页：{{ current }}，数据总量：{{ total }}条，每页数据：{{ marketingFrom.pageSize }}</text>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="同意" title="活动未开启通知" content="msgText" @confirm="dialogConfirm"
					@close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
    </view>
</template>
<script>
	 import { getMarketingList,getMarketing } from '@/api/marketing/marketing'
    export default {
        data() {
            return {
                isCard: false,
                productList: [],
				current: 0,
				total: '',
				marketingFrom:{
					keyWord:'',
					status:'',
					pageNum:1,
					pageSize:3
				},
				team:{},
				marketingDataFrom:{
					productId:''
				},
				msgType: '',
				msgText: ''
            }
        },
		created() {
		  this.getMarketingData()
		},
        methods: {
			message(status,id){
				getMarketing(id).then(res =>{
				this.marketingDataFrom=res.data
				if(this.marketingDataFrom.status===status){
				this.msgType = status
				this.$refs.alertDialog.open()
				this.msgText="活动未开启"
				}else{
				uni.navigateTo({
					url:"/pages/marketing/marketingDeatil?id="+id
			})
			}
			})
		},
			dialogConfirm() {
				console.log('点击确认')
				this.msgText = `点击确认了 ${this.msgType} 窗口`
				this.$refs.message.open()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			getMarketingData(){
			getMarketingList(this.marketingFrom).then(res => {
			   this.productList=res.data.rows
			   this.total=res.data.total
			  })
			}
		}
    }
</script>
<style>
    .cu-card.dynamic>.cu-item>.text-content {
        margin-bottom: 1px;
        margin-top: 6px;
    }
	@mixin flex {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
		}

		@mixin height {
			/* #ifndef APP-NVUE */
			height: 100%;
			/* #endif */
			/* #ifdef APP-NVUE */
			flex: 1;
			/* #endif */
		}

		.box {
			@include flex;
		}

		.button {
			@include flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 35px;
			margin: 0 5px;
			border-radius: 5px;
		}

		.example-body {
			background-color: #fff;
			padding: 10px 0;
		}

		.button-text {
			color: #fff;
			font-size: 12px;
		}

		.popup-content {
			@include flex;
			align-items: center;
			justify-content: center;
			padding: 15px;
			height: 50px;
			background-color: #fff;
		}

		.popup-height {
			@include height;
			width: 200px;
		}

		.text {
			font-size: 12px;
			color: #333;
		}

		.popup-success {
			color: #fff;
			background-color: #e1f3d8;
		}

		.popup-warn {
			color: #fff;
			background-color: #faecd8;
		}

		.popup-error {
			color: #fff;
			background-color: #fde2e2;
		}

		.popup-info {
			color: #fff;
			background-color: #f2f6fc;
		}

		.success-text {
			color: #09bb07;
		}

		.warn-text {
			color: #e6a23c;
		}

		.error-text {
			color: #f56c6c;
		}

		.info-text {
			color: #909399;
		}

		.dialog,
		.share {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
		}

		.dialog-box {
			padding: 10px;
		}

		.dialog .button,
		.share .button {
			/* #ifndef APP-NVUE */
			width: 100%;
			/* #endif */
			margin: 0;
			margin-top: 10px;
			padding: 3px 0;
			flex: 1;
		}

		.dialog-text {
			font-size: 14px;
			color: #333;
		}
</style>