1094 lines
24 KiB
Vue
1094 lines
24 KiB
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="">
|
||
<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(this.updata).then(res => {
|
||
if (res.code == 200) {
|
||
this.selectPatientSignInifo();
|
||
this.$refs.uToast.show({
|
||
title: '兑换商品成功',
|
||
type: 'success'
|
||
})
|
||
this.buyshow = false
|
||
} else {
|
||
this.$refs.uToast.show({
|
||
title: res.msg,
|
||
type: 'error'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
this.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() {
|
||
signIn(this.patientId).then(res => {
|
||
if (res.code == 200) {
|
||
this.selectPatientSignInifo();
|
||
this.$refs.uToast.show({
|
||
title: '今日签到成功',
|
||
type: 'success',
|
||
duration: '1000',
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 收件人
|
||
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;
|
||
}
|
||
}
|
||
|
||
::v-deep .r-canvas {
|
||
width: 660rpx !important;
|
||
height: 1100rpx !important;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
::v-deep .r-canvas-component {
|
||
width: 660rpx !important;
|
||
height: 1100rpx !important;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
::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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.close {
|
||
width: 31rpx;
|
||
height: 31rpx;
|
||
position: absolute;
|
||
top: 2%;
|
||
right: 2%;
|
||
z-index: 999;
|
||
}
|
||
|
||
.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>
|