nurseWeChatAppletUI/pages/integral/integral.vue

<template>
	<view class="app">
		<view class="vacancies">
			<image src="../../static/jifenbeij.png" mode=""></image>
			<view class="lefttext">
				积分余额
			</view>
			<view class="righttext">
				<!-- <image src="../../static/jfgz.png" mode=""></image>
				<view class="">
					积分规则
				</view> -->
			</view>
			<view class="title">
				{{list.integral}}
			</view>
			<view class="centertext">
				<!-- 20积分将于2022.01.01过期 -->
			</view>
			<view class="bottombutton" @tap='gainshow=true'>
				获取积分
			</view>
		</view>
		<view class="titles">
			积分兑换
		</view>
		<view class="items">
			<view class="item" v-for="(item,index) in goodslist" :key="index">
				<image :src="item.goodsPictureUrl" mode=""></image>
				<view class="title">
					{{item.goodsName}}
				</view>
				<view class="text">
					{{item.integralExchangeCount}}{{item.goodsUnit}}
				</view>
				<view class="jifen">
					需使用
					<span style='padding: 0 5rpx;'> {{item.integralExchangeSill}}</span>
					积分兑换
				</view>
				<view class="btn" @tap='buyshowtrue(item)'>
					立即兑换
				</view>
			</view>
		</view>
		<u-mask :show="gainshow" @click="gainshow = false">
			<view class="mask" @click.stop="">
				<image class="close" src="../../static/gb.png" mode="" @tap='gainshow=false'></image>
				</image>
				<view class="title">
					获取方式
				</view>
				<view class="maskitems">
					<view class="item">
						<image src="../../static/qiandao.png" mode=""></image>
						<view class="titletext">
							累计签到
							<span style='padding: 0 5rpx;'> {{list.totalSignInDays}}</span>
							天(当前签到
							<span style='padding: 0 5rpx;'> {{list.patientSignInCount}}</span>天)
						</view>
						<view class="text">
							＋<span style='padding: 0 5rpx;'> {{list.signInCount}}</span>积分
						</view>
						<view class="btn" @tap='signIninfo' v-if='list.todaySignInCount==0'>
							签到
						</view>
						<view class="btn" v-if='list.todaySignInCount==1'>
							已签到
						</view>
					</view>
					<view class="item" style="background-color: #F44B2F;">
						<image src="../../static/yaoqing.png" mode=""></image>
						<view class="titletext">
							每邀请
							<span style='padding: 0 5rpx;'> 1</span>
							位好友
						</view>
						<view class="text">
							＋<span style='padding: 0 5rpx;'> {{list.inviteFriends}}</span>积分
						</view>
						<view class="btn" style="color: #F44B2F;" @tap='yaoqingshowtrue'>
							去完成
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<u-mask :show="buyshow" @click="buyshow = false">
			<view class="PurchasePage" @click.stop=''>
				<image class="close" src="../../static/gb.png" mode="" @tap='buyshow=false'></image>
				</image>
				<view class="topcontent" style="width: 96%;">
					<view class="image">
						<image :src="goodsitem.goodsPictureUrl" mode=""></image>
					</view>
					<view class="title" v-if="goodsitem.goodsName">
						{{goodsitem.goodsName}}
					</view>
					<view class="title" v-else>
						暂无
					</view>
					<view class="prices">
						<span class="price">
							{{goodsitem.integralExchangeSill}}积分
						</span>
					</view>
					<view class="goodsStock">
						库存数量:{{goodsitem.goodsStock}}
					</view>
				</view>
				<view class="bodys" @tap='upaddress()'>
					<view class="addressinfo">
						<image src="../../static/locatinsmall.png" mode=""></image>
						<view class="namephone" v-if='userid'>
							{{updata.receiver}},{{updata.phone}}
						</view>
						<view class="address" v-if='userid'>
							{{updata.receiveAddress}}
						</view>
						<view class="namephone" v-else>
							前往完善个人信息
						</view>
						<view class="picture2">
							<u-icon name="arrow-right" color="black" size="28"></u-icon>
						</view>
					</view>
				</view>
				<view class="centercontent topcontent">
					<view class="header">
						商品规格
					</view>
					<view style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
						<view class="Productmodel productmodel">
							<image :src="baseurl+goodsitem.attributePitureUrl" mode=""></image>
							<view class="">
								{{goodsitem.integralExchangeCount}}{{goodsitem.goodsUnit}}
							</view>
						</view>
					</view>
				</view>
				<view class="buy" @tap="upbuy">
					立即兑换
				</view>
			</view>
		</u-mask>
		<u-popup v-model="yaoqingshow" mode="center" :closeable='true' :close='yaoqingshowfalse'>
			<view class="yaoqing">
				<r-canvas ref="rCanvas" v-if="yaoqingshow"></r-canvas>
			</view>
			<view class="yaoqbtn" @tap='draw'>
				保存到相册
			</view>
			<view class="yaoqbtn2" @tap='fenx'>
				分享给好友
			</view>
		</u-popup>
		<u-mask :show="usershow" class='masks'>
			<view class="information">
				<image src="../../static/information.png" mode=""></image>
				<view class="title">
					请完善个人信息
				</view>
				<view class="cancel" @tap='usershow=false'>
					取消
				</view>
				<view class="determine" @tap='goinformation'>
					去完善
				</view>
			</view>
		</u-mask>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		signIn,
		selectPatientSignIn,
		selectExchangeGoods,
		integralGoodsOrder
	} from '@/api/integral/index.js'
	import {
		inviteFriends
	} from '@/api/Personal/Personal.js';
	import {
		goodPatientInfo
	} from '@/api/modifyAddress/modifyAddress.js';
	import {
		AppIdentification
	} from '@/api/AppIdentification/index.js'
	import baseurl from '../../api/baseurl';
	import rCanvas from "@/components/r-canvas/r-canvas.vue"
	export default {
		components: {
			rCanvas
		},
		data() {
			return {
				baseurl: '',
				patientId: null,
				integral: 0,
				usershow: false, //go完善
				gainshow: false, //积分邀请
				buyshow: false, //兑换购买
				yaoqingshow: false,
				yaoqingimg: null,
				yapqingbeijingimg: null,
				list: {
					integral: 0
				},
				inviteimg: null, //邀请二维码
				pageNum: 1,
				pageSize: 10,
				goodstotal: 0,
				goodslist: null,
				goodsitem: null,
				userid: null,
				updata: {
					"orderChannel": 'WECHAT_APPLET',
					"originalTotalPrice": null,
					"integralExchangeSill": null,
					"integralExchangeCount": null,
					"orderType": "INTEGRAL_EXCHANGE",
					"buySource": "SHOPPING_MALL",
					"integralDeductionCount": null,
					"attributeDetailsId": null,
					"discountPrice": null,
					"giveIntegral": null,
					"goodsAttributeContent": null,
					"goodsAttributeDetailsId": null,
					"goodsAttributeId": null,
					"goodsAttributeName": null,
					"goodsCount": null,
					"goodsName": null,
					"goodsPrice": null,
					"goodsStock": null,
					"nurseStationId": null,
					"patientId": null,
					"phone": "18963146613",
					"receiveAddress": null,
					"receiver": null,
				}
			};
		},
		onLoad(options) {
			this.baseurl = baseurl
			this.integral = options.integral
			var that = this
			this.selectExchangeGoodsinfo();
			const value = uni.getStorageSync('patientId');
			if (value) {
				that.patientId = value
				that.updata.patientId = value
				that.selectPatientSignInifo();
				that.goodsList();
			}
		},
		onShow() {
			this.baseurl = baseurl
			this.yapqingbeijingimg = baseurl + '/profile/appletPicture/inviteFriendsTwo.png'
			var that = this
			const value = uni.getStorageSync('patientId');
			if (value) {
				that.updata.patientId = value
				goodPatientInfo(value).then(res => {
					if (res.code == 200) {
						var user = res.data.filter(e => e.id == that.userid)
						if (user.length >= 1) {
							that.updata.receiver = user[0].receiveName
							that.updata.receiveAddress = user[0].areaName + user[0].receiveAddress
							that.updata.phone = user[0].receivePhone
							that.userid = user[0].id
						} else {
							that.updata.receiver = res.data[0].receiveName
							that.updata.receiveAddress = res.data[0].areaName + res.data[0].receiveAddress
							that.updata.phone = res.data[0].receivePhone
							that.userid = res.data[0].id
						}
					}
				})
			} else {}
			let useritem = null
			uni.$on('updata', function(data) {
				if (data.useritem) {
					useritem = JSON.parse(data.useritem)
					that.updata.receiver = useritem.receiveName
					that.updata.phone = useritem.receivePhone
					that.updata.receiveAddress = useritem.areaName + useritem.receiveAddress
					that.userid = useritem.id
				}
			})
		},
		methods: {
			yaoqingshowtrue() {
				this.yaoqingshow = true
				this.$nextTick(async () => {
					await inviteFriends(this.patientId).then(res => {
						this.inviteimg = res.msg
					})
					uni.showLoading({
						title: '加载中'
					});
					// 初始化
					await this.$refs.rCanvas.init({
						canvas_id: "rCanvas"
					})
					// 画图
					await this.$refs.rCanvas.drawImage({
						url: this.yapqingbeijingimg,
						x: 0,
						y: 0,
						w: 330,
						h: 600
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					await this.$refs.rCanvas.drawImage({
						url: baseurl + this.inviteimg,
						x: 100,
						y: 370,
						w: 130,
						h: 130
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					// 画文字
					await this.$refs.rCanvas.drawText({
						text: "智慧康养泉城，医护关怀到家",
						x: 165,
						y: 330,
						font_color: "#444444",
						font_size: 12,
						font_weight: 600,
						text_align: 'center'
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					await this.$refs.rCanvas.drawText({
						text: "超多福利，快来体验吧！",
						x: 165,
						y: 350,
						font_color: "#444444",
						font_size: 12,
						font_weight: 600,
						text_align: 'center'
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					await this.$refs.rCanvas.drawText({
						text: "泉医到家小程序",
						x: 165,
						y: 530,
						font_color: "#444444",
						font_size: 10,
						text_align: 'center'
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					await this.$refs.rCanvas.drawText({
						text: "（长按识别二维码开启健康之旅）",
						x: 165,
						y: 543,
						font_color: "#444444",
						font_size: 7,
						text_align: 'center'
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					// 生成海报
					await this.$refs.rCanvas.draw((res) => {
						this.yaoqingimg = res.tempFilePath
						uni.hideLoading();
						//res.tempFilePath：生成成功，返回base64图片
						// 保存图片
						// this.$refs.rCanvas.saveImage(res.tempFilePath)
					})
				})
			},
			//保存
			draw() {
				// 保存图片
				this.$refs.rCanvas.saveImage(this.yaoqingimg).then(res => {
					uni.showToast({
						title: '保存成功',
						duration: 2000
					});
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '保存失败',
						duration: 2000
					});
				})
			},
			//分享
			fenx() {
				wx.showShareImageMenu({
					path: this.yaoqingimg,
				})
			},
			yaoqingshowfalse() {
				this.yapqingshow = false;
				this.$nextTick(async () => {
					await this.$refs.rCanvas.clearCanvas((res) => {
						console.log(res)
					})
					await this.$refs.rCanvas.setCanvasWidth(0)
					await this.$refs.rCanvas.setCanvasHeight(0)
				})
			},
			//兑换
			upbuy() {
				var that = this
				const value = uni.getStorageSync('patientId');
				const value2 = uni.getStorageSync('openid');
				if (value && value2) {
					AppIdentification(value).then(res => {
						if (res.code == 200) {
							if (res.data.loginFlag) {
								integralGoodsOrder(that.updata).then(res => {
									if (res.code == 200) {
										that.selectPatientSignInifo();
										that.$refs.uToast.show({
											title: '兑换商品成功',
											type: 'success'
										})
										that.buyshow = false
									} else {
										that.$refs.uToast.show({
											title: res.msg,
											type: 'error'
										})
									}
								})
							} else {
								that.usershow = true
							}
						} else {
							that.$refs.uToast.show({
								title: '请先登录',
								type: 'error',
								duration: '2000',
								url: '/pages/login/login'
							})
						}
					})
				} else {
					that.$refs.uToast.show({
						title: '请先登录',
						type: 'error',
						duration: '2000',
						url: '/pages/login/login'
					})
				}
			},
			//跳转到全部收货地址
			upaddress() {
				if (this.updata.receiver) {
					uni.navigateTo({
						url: `/pages/modifyAddress/modifyAddress?updata=${JSON.stringify(this.updata)}`
					})
				} else {
					const value = uni.getStorageSync('openid');
					const value2 = uni.getStorageSync('patientId');
					if (value && value2) {
						uni.navigateTo({
							url: '/pages/information/information'
						})
					} else {
						this.$refs.uToast.show({
							title: '未登录,请先登录',
							type: 'error'
						})
						if (this.timer) {
							clearTimeout(this.timer)
						}
						this.timer = setTimeout(e => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 1500)
					}
				}
			},
			///兑换
			buyshowtrue(item) {
				this.buyshow = true
				this.goodsitem = item
				this.updata.goodsAttributeName = this.goodsitem.attributeDetailsName
				this.updata.goodsAttributeId = this.goodsitem.goodsAttributeId
				this.updata.goodsAttributeDetailsId = this.goodsitem.attributeDetailsId
				this.updata.integralExchangeSill = this.goodsitem.integralExchangeSill
				this.updata.integralExchangeCount = this.goodsitem.integralExchangeCount
				this.updata.originalTotalPrice = 0
				this.updata.goodsStock = this.goodsitem.goodsStock
				this.updata.goodsName = this.goodsitem.goodsName
				this.updata.goodsPrice = this.goodsitem.goodsPrice
				this.updata.goodsCount = 1
			},
			//可兑换商品
			selectExchangeGoodsinfo() {
				selectExchangeGoods(this.pageNum, this.pageSize).then(res => {
					res.rows.forEach(e => {
						e.goodsPictureUrl = baseurl + e.goodsPictureUrl
					})
					this.goodslist = res.rows
					this.goodstotal = res.total
				})
			},
			//积分
			selectPatientSignInifo() {
				selectPatientSignIn(this.patientId).then(res => {
					this.list = res.data
				})
			},
			//点击签到
			signIninfo() {
				var that = this
				const value = uni.getStorageSync('patientId');
				const value2 = uni.getStorageSync('openid');
				if (value && value2) {
					AppIdentification(value).then(res => {
						if (res.code == 200) {
							if (res.data.loginFlag) {
								signIn(value).then(res => {
									if (res.code == 200) {
										that.selectPatientSignInifo();
										that.$refs.uToast.show({
											title: '今日签到成功',
											type: 'success',
											duration: '1000',
										})
									} else {
										that.$refs.uToast.show({
											title: '签到失败',
											type: 'error',
											duration: '1000',
										})
									}
								})
							} else {
								that.usershow = true
							}
						} else {
							that.$refs.uToast.show({
								title: '请先登录',
								type: 'error',
								duration: '2000',
								url: '/pages/login/login'
							})
						}
					})
				} else {
					that.$refs.uToast.show({
						title: '请先登录',
						type: 'error',
						duration: '2000',
						url: '/pages/login/login'
					})
				}
			},
			// 收件人
			goodsList() {
				goodPatientInfo(this.patientId).then(res => {
					var list = res.data.filter(e => e.defaultAddressFlag == 1)
					if (list.length >= 1) {
						this.updata.receiver = list[0].receiveName
						this.updata.receiveAddress = list[0].areaName + list[0].receiveAddress
						this.updata.phone = list[0].receivePhone
						this.userid = list[0].id
					} else {
						this.updata.receiver = res.data[0].receiveName
						this.updata.receiveAddress = res.data[0].areaName + res.data[0].receiveAddress
						this.updata.phone = res.data[0].receivePhone
						this.userid = res.data[0].id
					}
				})
			},
			//跳转完善页面
			goinformation() {
				this.usershow = false
				uni.navigateTo({
					url: '/pages/information/information'
				})
			},
		},
		onReachBottom() { //下滑加载
			if (this.goodslist.length >= this.goodstotal) {} else {
				this.pageNum++;
				selectExchangeGoods(this.pageNum, this.pageSize).then(res => {
					res.rows.forEach(e => {
						e.goodsPictureUrl = baseurl + e.goodsPictureUrl
						this.goodslist.push(e)
					})
				})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.pageNum = 1;
			this.selectExchangeGoodsinfo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	.app {
		.masks {
			z-index: 999;
		}

		.information {
			width: 70%;
			height: 400rpx;
			margin: 50% auto;
			background: #FFFFFF;
			border-radius: 30rpx;
			text-align: center;
			color: #FFFFFF;
			position: relative;

			.determine,
			.cancel {
				width: 200rpx;
				height: 70rpx;
				border-radius: 26rpx;
				font-size: 34rpx;
				line-height: 70rpx;
				position: absolute;
				top: 74%;
			}

			.determine {
				background: #4C7BC9;
				right: 36rpx;
			}

			.cancel {
				background: #C5BFBF;
				left: 36rpx;
			}

			.title {
				font-size: 42rpx;
				margin-top: 40rpx;
				color: #000000;
			}

			image {
				width: 100rpx;
				height: 100rpx;
				margin: 10% 0 0 0;
			}
		}

		.close {
			width: 31rpx;
			height: 31rpx;
			position: absolute;
			top: 2%;
			right: 2%;
			z-index: 999;
		}

		::v-deep .r-canvas {
			width: 660rpx !important;
			height: 1100rpx !important;
			margin: 0 auto;
			z-index: -1;
		}

		::v-deep .r-canvas-component {
			width: 660rpx !important;
			height: 1100rpx !important;
			margin: 0 auto;
			z-index: -1;
		}

		::v-deep .u-mode-center-box {
			background: none !important;
		}

		.yaoqbtn {
			color: #fff;
			position: absolute;
			bottom: 0;
			text-align: center;
			line-height: 71rpx;
			left: 0;
			width: 251rpx;
			height: 71rpx;
			background: linear-gradient(90deg, #85C8AE 0%, #03AD6B 59%);
			border-radius: 36rpx;
		}

		.yaoqbtn2 {
			color: #fff;
			position: absolute;
			text-align: center;
			line-height: 71rpx;
			bottom: 0;
			right: 0;
			width: 251rpx;
			height: 71rpx;
			background: linear-gradient(90deg, #64B0F9 0%, #436BF6 59%);
			border-radius: 36rpx;
		}

		.yaoqing {
			height: 1200rpx;
		}

		.PurchasePage {
			position: fixed;
			bottom: 0;
			height: 930rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0px 0px;
			font-size: 36rpx;
			padding-bottom: 20rpx;
			z-index: 10;

			.bodys {
				background-color: #FFFFFF;
				width: 96%;
				margin: 10rpx auto 0;
				border-radius: 20rpx;
				padding: 15rpx 0 20rpx;
				position: relative;

				.addressinfo {
					font-size: 32rpx;
					line-height: 65rpx;
					margin-left: 90rpx;

					image {
						width: 40rpx;
						height: 50rpx;
						position: absolute;
						top: 50%;
						left: 20rpx;
						transform: translateY(-50%);
					}

					.address {
						padding-top: 10rpx;
						width: 92%;
						font-size: 30rpx;
						word-break: break-all;
						line-height: 45rpx;
					}

					.namephone {
						width: 70%;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.picture2 {
						position: absolute;
						top: 50%;
						right: 20rpx;
						transform: translateY(-50%);

						image {
							width: 18rpx;
							height: 18rpx;
							color: #FFFFFF;
							margin-left: 20rpx;
						}
					}
				}
			}

			.topcontent {
				width: 96%;
				margin: 0 auto;
				padding-bottom: 15rpx;
				position: relative;

				.goodsStock {
					font-size: 24rpx;
					position: absolute;
					top: 75%;
					right: 10rpx;
				}

				.prices {
					position: absolute;
					top: 70%;
					left: 35%;

					.price {
						color: #D43953;
					}
				}

				.title {
					font-size: 36rpx;
					position: absolute;
					top: 3%;
					left: 35%;
					font-weight: 600;
					width: 58%;
					// height: 85rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					word-break: break-all;
				}

				.image {
					width: 200rpx;
					height: 200rpx;
					margin: 15rpx 0 0 0;

					image {
						width: 201rpx;
						height: 201rpx;
						margin: 7rpx 0 0 7rpx;
					}

				}
			}

			.buy {
				width: 60%;
				height: 71rpx;
				background: #4C7BC9;
				color: #FFFFFF;
				text-align: center;
				line-height: 71rpx;
				border-radius: 26rpx;
				position: absolute;
				bottom: 30rpx;
				left: 20%;
			}

			.centercontent {
				font-size: 32rpx;
				background-color: #FFFFFF;
				margin-top: 10rpx;
				padding-top: 20rpx;
				border-radius: 20rpx;

				.header {
					margin-bottom: 20rpx;
					margin-left: 17rpx;
				}

				.productmodel {
					border: 4rpx solid #FFFFFF;
				}

				.Productmodel {
					background: #ECF1FA;
					border: 4rpx solid #4C7BC9;
					color: #4C7BC9;
				}

				.productmodel,
				.Productmodel {
					background-color: #F6F6F6;
					height: 300rpx;
					text-align: center;
					width: 30%;
					font-size: 24rpx;
					border-radius: 10rpx;
					margin: 5rpx 1.5% 10rpx;
					padding: 0 0 10rpx;

					view {
						background-color: #F6F6F6;
						margin: 10rpx auto;
						width: 98%;
						// height: 90rpx;
						border-radius: 10rpx;
						font-size: 24rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					image {
						border-radius: 10rpx;
						width: 100%;
						height: 200rpx;
					}
				}
			}
		}

		.mask {
			position: fixed;
			bottom: 0;
			height: 600rpx;
			width: 100%;
			background-color: #fff;
			z-index: 10;

			.maskitems {
				color: #fff;
				width: 90%;
				margin: 60rpx auto 0;

				.item {
					background: #557BC2;
					width: 100%;
					margin: 0 auto 20rpx;
					height: 150rpx;
					position: relative;
					font-size: 26rpx;

					.btn {
						text-align: center;
						width: 120rpx;
						height: 50rpx;
						background: #FFFFFF;
						border-radius: 22rpx;
						position: absolute;
						right: 30rpx;
						top: 58rpx;
						line-height: 50rpx;
						font-size: 28rpx;
						color: #557BC2;
					}

					.text {
						position: absolute;
						left: 150rpx;
						top: 90rpx;
					}

					.titletext {
						position: absolute;
						left: 150rpx;
						top: 48rpx;
					}

					image {
						margin: 49rpx 0 0 43rpx;
						width: 66rpx;
						height: 66rpx;
					}
				}
			}

			.title {
				padding-top: 10rpx;
				font-size: 38rpx;
				font-weight: 600;
				text-align: center;
				width: 100%;
			}
		}

		.items {
			margin-top: 30rpx;

			.item {
				width: 92%;
				margin: 0 auto 12rpx;
				background-color: #FFFFFF;
				height: 220rpx;
				position: relative;

				.text {
					font-size: 24rpx;
					position: absolute;
					left: 220rpx;
					top: 90rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis
				}

				.btn {
					position: absolute;
					right: 40rpx;
					top: 140rpx;
					width: 150rpx;
					height: 50rpx;
					background: #557BC2;
					border-radius: 22rpx;
					color: #fff;
					text-align: center;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 50rpx;
				}

				.jifen {
					position: absolute;
					left: 220rpx;
					top: 140rpx;
					font-size: 26rpx;
					color: #666666;
				}

				.title {
					width: 460rpx;
					font-size: 34rpx;
					font-weight: 600;
					position: absolute;
					left: 220rpx;
					top: 25rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis
				}

				image {
					margin: 15rpx 0 0 15rpx;
					width: 180rpx;
					height: 180rpx;
				}
			}
		}

		.titles {
			margin: 38rpx 0 0 31rpx;
			font-size: 30rpx;
		}

		.vacancies {
			width: 92%;
			height: 330rpx;
			margin: 0 auto;
			position: relative;
			color: #fff;

			.bottombutton {
				position: absolute;
				top: 230rpx;
				left: 50%;
				font-size: 32rpx;
				color: #557BC2;
				line-height: 72rpx;
				text-align: center;
				transform: translateX(-50%);
				width: 440rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 36rpx;
			}

			.centertext {
				position: absolute;
				top: 160rpx;
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				opacity: 0.8;
			}

			.title {
				position: absolute;
				left: 50%;
				font-size: 70rpx;
				top: 90rpx;
				transform: translateX(-50%);
			}

			.righttext {
				position: absolute;
				top: 32rpx;
				right: 31rpx;
				font-size: 24rpx;
				line-height: 28rpx;
				width: 130rpx;
				height: 28rpx;

				image {
					position: absolute;
					left: 0;
					width: 28rpx;
					height: 28rpx;
				}

				view {
					opacity: 0.6;
					position: absolute;
					right: 0;
				}
			}

			.lefttext {
				position: absolute;
				top: 32rpx;
				left: 33rpx;
				font-size: 30rpx;
				line-height: 33rpx;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>