xietaitai-shop-wx/packages/product/public.vue

<template>
	<view class="changecontainer">
		<view class="exchangebox">
			<view class="exchange-top">
				<image src="../../static/exchangeword.png" mode="widthFix"></image>
			</view>
			<view class="exchange-content">
				<view class="exchange-tit">
					<image src="../../static/icon-xie.png" mode="widthFix"></image>
					<view class="exchange-ftit">
						<text>添加客服</text>
						<text>领取{{year}}版大闸蟹食用指南</text>
					</view>
				</view>
				<view class="exchange-brief">
					<view class="qrCodebox">
						<view class="codeimg">
							<image show-menu-by-longpress :src="img" mode="widthFix"></image>
						</view>
					</view>
					<text class="taphold">长按扫码即可关注</text>
					<view class="exchange-bottom">
						<text class="whattext">客服能做什么？</text>
						<view class="exchangelist">
							<view class="textitem">
								<image src="../../static/icon-exchange2.png" mode="widthFix"></image>
								<text>提货答疑</text>
							</view>
							<view class="textitem">
								<image src="../../static/icon-exchange1.png" mode="widthFix"></image>
								<text>物流追踪</text>
							</view>
						</view>
					</view>
					<view class="returnhome" @click="toHome">返回首页</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				img:'',
				year:(new Date()).getFullYear()
			}
		},
		onLoad(){
			const banner4 = uni.getStorageSync('banner4')?uni.getStorageSync('banner4'):[]
			if (banner4.length > 0) {
				banner4.map(item=>{
					if(item.type==='kf'){
						this.img = item.image
					}
				})
				
			}
			
		},
		methods:{
			toHome(){
				uni.switchTab({
					url:'/pages/home/home'
				})
			}
		}
	}
</script>

<style type="text/css" scoped>
	.changecontainer {
		width: 100%;
		padding: 100rpx 0;
		min-height: 100vh;
		display: flex;
		align-items: center;
		background-image: url(../../static/bg-change.jpg);
		background-position: center top;
		background-size: cover;
		/* padding-top: 142rpx;
		padding-bottom: 270rpx; */
	}

	.exchangebox {
		width: 87.33%;
		margin: 0 auto;
	}

	.exchange-top {
		text-align: center;
		margin-bottom: 28rpx;
	}

	.exchange-top image {
		width: 438rpx;
		height: auto;
	}

	.exchange-content {
		background: url(../../static/bg-exchange.png) no-repeat center top #fff;
		background-size: 100% auto;
		border-radius: 30rpx;
		overflow: hidden;
	}

	.exchange-content .exchange-tit {
		display: flex;
		justify-content: center;
		padding-top: 46rpx;
		padding-bottom: 46rpx;
	}

	.exchange-tit image {
		width: 68rpx;
		height: auto;
	}

	.exchange-tit .exchange-ftit {
		padding-left: 22rpx;
	}

	.exchange-ftit text {
		display: block;
		font-size: 24rpx;
		line-height: 38rpx;
		font-weight: bold;
		color: #000;
	}

	.exchange-brief {
		border-radius: 30rpx 30rpx 0 0;
		background: #fff;
		padding-top: 45rpx;
		padding-bottom: 45rpx;
	}

	.qrCodebox {
		width: 380rpx;
		margin: 0 auto;
		border-radius: 30rpx;
		overflow: hidden;
		padding: 18rpx;
		box-sizing: border-box;
		background: #ededed;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.codeimg {
		width: 345rpx;
		height: 345rpx;
		margin: 0 auto;
		background: url(../../static/ewmbg.png) center center no-repeat;
		background-size: cover;
		padding: 12rpx;
	}

	.codeimg image {
		width: 320rpx;
		height: auto;
		border-radius: 20rpx;
	}

	.taphold {
		display: block;
		text-align: center;
		font-size: 24rpx;
		color: #000;
	}

	.exchange-bottom {
		margin-top: 86rpx;
	}

	.whattext {
		display: block;
		text-align: center;
		font-size: 24rpx;
		color: #000;
		font-weight: bold;
	}

	.exchangelist {
		display: flex;
		justify-content: center;
		margin-top: 44rpx;
		margin-bottom: 75rpx;
	}

	.textitem {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 58rpx 5rpx;
	}

	.textitem:first-child {
		border-right: 1rpx solid #f6d9b6;
	}

	.textitem image {
		width: 56rpx;
		height: auto;
		margin-bottom: 16rpx;
	}

	.textitem text {
		font-size: 24rpx;
		color: #323232;
	}

	.returnhome {
		width: 450rpx;
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		color: #fff;
		font-size: 29rpx;
		margin: 0 auto;
		border-radius: 74rpx;
		background: #ba8b45;
	}
</style>