zd/pages/shop/action.vue

<template>
    <view class="content">
		<image :src="actionImg" mode="widthFix" class="action-img"></image>
		<view class="notice-item">
			<view class="" v-html="content">
				
			</view>
		</view>
		<view class="action-wrap">
			<image src="../../static/image/action-top.png" mode="" class="action-top"></image>
			<view class="">
				请拍下您与爱车的合照,点击下方按钮上传照片即可获得奖励。
			</view>
			<image :src="upimg" mode="widthFix" class="up-img" v-if="upimg" @click="upActionImg"></image>
			<image src="../../static/image/upimg-g.png" mode="widthFix" class="up-img" v-else @click="upActionImg"></image>
			<view class="action-btn" @click="joinAction">
				上传照片
			</view>
		</view>
		
		
    </view>
</template>
<script>
	import { upload } from '@/api/order.js'
	import { details,joinAction } from '@/api/index.js'
export default {
    data() {
        return {
			content: '',
			upimg: '',
			loading:false,
			id: ''
        };
    },
	computed: {
		actionImg() {
			return this.$store.state.baseURL + '/static/img/action.png'
		}
	},
    onLoad(opt) {
		if(opt.id ) {
			this.id = opt.id
			this.details(opt.id) 
		}
    },
    onShow() {

    },
    onReachBottom() {

    },
    methods: {
		details(id) {
			details({},id).then(res => {
				console.log(res);
				this.content = res.data.content
				if(this.content != null){
					this.content = this.content.replace(/<img/g,"<img style='max-width:100%;height:auto;'");
				}//小程序商品详情图超出屏幕问题
			}) 
		},
		upActionImg() {
			upload().then(res => {
				this.upimg = res[0].url
			})
		},
		joinAction() {
			if(this.loading) {
				return
			}
			if(this.upimg == '') {
				return this.$api.msg('请上传合影照片')
			}
			this.loading = true
			joinAction({
				aid: this.id,
				up_file: this.upimg
			}).then(res => {
				this.loading = false
				uni.showToast({
					title: '提交成功',
					duration: 2000
				});
			}).catch(err => {
				this.loading = false
			})
		}
    }
};
</script>
<style lang="scss" scoped>
	.content {
		padding-bottom: 50px;
	}
	page {
		background-color: #fff;
		height: auto;
		min-height: 100%;
	}
.action-img {
	width: 750rpx;
}
.action-wrap {
	width: 690rpx;
	margin:50rpx auto 20rpx;
	// height: 560rpx;
	background-color: #dcf4ef;
	border-radius: 20rpx;
	padding: 60px 35rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: justify;
	color: #333;
	font-weight: bold;
	font-size: 28rpx;
	position: relative;
	.up-img {
		width: 160rpx;
		height: 160rpx;
		margin: 45rpx auto;
	}
	.action-btn {
		width: 580rpx;
		height: 90rpx;
		color: #fff;
		font-weight: 500;
		background-color: #ffc43d;
		text-align: center;
		border-radius: 45rpx;
		line-height: 90rpx;
	}
	.action-top {
		width: 345rpx;
		height: 60rpx;
		position: absolute;
		top: -30rpx;
		left: 0;
		right: 0;
		margin: auto;
	}
}
.notice-item {
	width: 100%;
	height: 100%;
	padding: 35rpx 35rpx;
	padding-bottom: 30rpx;
}
</style>