|
|
@@ -5,7 +5,7 @@ import WaterMark from '@/c/waterMark'
|
|
|
import { arrToObj } from '@utils'
|
|
|
import { AtTabs } from 'taro-ui'
|
|
|
|
|
|
-import Chat from '@/c/chat/com'
|
|
|
+// import Chat from '@/c/chat/com'
|
|
|
import './roomPriceXk.scss'
|
|
|
|
|
|
class Index extends Component {
|
|
|
@@ -37,7 +37,12 @@ class Index extends Component {
|
|
|
isDtlShow: false,
|
|
|
buildingNumList: [],
|
|
|
allData: {},
|
|
|
+ isDiscountPage: false,
|
|
|
+ dataList: [],
|
|
|
+ imageSrc: '',
|
|
|
+ canvasHeight: '10',
|
|
|
}
|
|
|
+ this.canvasId = 'roomDataCanvas'
|
|
|
}
|
|
|
|
|
|
config = {
|
|
|
@@ -81,14 +86,25 @@ class Index extends Component {
|
|
|
estate_id: eId,
|
|
|
building_id: buildingNumList[curNav].id,
|
|
|
}).then(res => {
|
|
|
- const data = res.data || {}
|
|
|
+ const roomArr = res.data || []
|
|
|
+ let dataList = []
|
|
|
+ // console.log(roomArr)
|
|
|
+ roomArr.forEach(oneItem => {
|
|
|
+ let subData = oneItem.data || []
|
|
|
+ subData.forEach(subItem => {
|
|
|
+ dataList.push(subItem)
|
|
|
+ })
|
|
|
+ })
|
|
|
this.setState({
|
|
|
allData: res || {},
|
|
|
- roomArr: data || []
|
|
|
+ roomArr,
|
|
|
+ dataList
|
|
|
+ }, () => {
|
|
|
+ // this.drawDataToCanvas()
|
|
|
})
|
|
|
- if (this.subChat) {
|
|
|
- this.subChat.getData({name, id: eId}, 'pt')
|
|
|
- }
|
|
|
+ // if (this.subChat) {
|
|
|
+ // this.subChat.getData({name, id: eId}, 'pt')
|
|
|
+ // }
|
|
|
})
|
|
|
}
|
|
|
onceGetInfo () {
|
|
|
@@ -110,16 +126,16 @@ class Index extends Component {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- refChat = (ref) => {
|
|
|
- this.subChat = ref
|
|
|
- }
|
|
|
+ // refChat = (ref) => {
|
|
|
+ // this.subChat = ref
|
|
|
+ // }
|
|
|
|
|
|
componentDidShow () { }
|
|
|
|
|
|
componentDidHide () { }
|
|
|
|
|
|
renderTop () {
|
|
|
- const { name} = this.$router.params
|
|
|
+ const { name } = this.$router.params
|
|
|
const { curNav, buildingNumList, allData } = this.state
|
|
|
let newTabList = JSON.parse(JSON.stringify(buildingNumList))
|
|
|
if (newTabList[curNav] && newTabList[curNav].title) {
|
|
|
@@ -163,6 +179,7 @@ class Index extends Component {
|
|
|
}
|
|
|
navClick (value) {
|
|
|
this.setState({
|
|
|
+ isDiscountPage: false,
|
|
|
curNav: value
|
|
|
}, () => {
|
|
|
this.getDtl()
|
|
|
@@ -188,12 +205,14 @@ class Index extends Component {
|
|
|
}
|
|
|
|
|
|
renderInfo () {
|
|
|
+ const { isDiscountPage } = this.state
|
|
|
const { roomArr, allData } = this.state
|
|
|
const house_type_total = allData.house_type_total || {}
|
|
|
const htaArr = house_type_total.house_type_avg || []
|
|
|
let cArr = roomArr || []
|
|
|
const htArr = cArr[0] ? cArr[0].data : []
|
|
|
const htArrIndex = htArr.length
|
|
|
+
|
|
|
const htitems = htArr.map((item, index) => {
|
|
|
return (
|
|
|
<View className={'srp-col num' + htArrIndex} key={index}>
|
|
|
@@ -221,7 +240,13 @@ class Index extends Component {
|
|
|
return (
|
|
|
<View className="scoped-room-price">
|
|
|
<View className="srp-row">
|
|
|
- <View className="srp-col">户型图</View>
|
|
|
+ {
|
|
|
+ isDiscountPage
|
|
|
+ ?
|
|
|
+ <View className="srp-col title2" onClick={this.discountPriceToggle.bind(this)}>现在是折扣</View>
|
|
|
+ :
|
|
|
+ <View className="srp-col title1" onClick={this.discountPriceToggle.bind(this)}>当前是原价</View>
|
|
|
+ }
|
|
|
{htitems}
|
|
|
</View>
|
|
|
{
|
|
|
@@ -231,6 +256,9 @@ class Index extends Component {
|
|
|
<View className="srp-col">{one.storey}层</View>
|
|
|
{
|
|
|
one.data.map((two, tIndex) => {
|
|
|
+
|
|
|
+ const { newTotalPrice, newUnitPrice } = this.calculateDiscountedPrice(two.price, two.house_discount, two.built);
|
|
|
+
|
|
|
const oneDataLength = one.data.length
|
|
|
let boxClassStr2 = `'srp-col num'${oneDataLength}`
|
|
|
if (two.house_sale_state === '小定') boxClassStr2 = `'srp-col t2 num'${oneDataLength}`
|
|
|
@@ -238,7 +266,7 @@ class Index extends Component {
|
|
|
if (two.house_sale_state === '已售') boxClassStr2 = `'srp-col t4 num'${oneDataLength}`
|
|
|
if (two.house_sale_state === '洪楼售') boxClassStr2 = `'srp-col t5 num'${oneDataLength}`
|
|
|
return (
|
|
|
- <View className={boxClassStr2} key={tIndex} onClick={this.openDtlPopup.bind(this, two)}>
|
|
|
+ <View className={isDiscountPage ? 'srp-col' : boxClassStr2} key={tIndex} onClick={this.openDtlPopup.bind(this, two)}>
|
|
|
{
|
|
|
two.house_sale_state === '小定' || two.house_sale_state === '已定' || two.house_sale_state === '已售' || two.house_sale_state === '洪楼售'
|
|
|
?
|
|
|
@@ -256,8 +284,16 @@ class Index extends Component {
|
|
|
<View className="s">{'>>'}</View>
|
|
|
</View>
|
|
|
<View className="srpr-p2">{two.built}㎡</View>
|
|
|
- <View className="srpr-p2">￥{parseInt(two.sale)}/㎡</View>
|
|
|
- <View className="srpr-p2">总价:{(Number(two.price) / 10000).toFixed(1)}万</View>
|
|
|
+ {
|
|
|
+ isDiscountPage
|
|
|
+ ? <View className="srpr-p-discount">折后￥{newUnitPrice}/㎡</View>
|
|
|
+ : <View className="srpr-p2">￥{parseInt(two.sale)}/㎡</View>
|
|
|
+ }
|
|
|
+ {
|
|
|
+ isDiscountPage
|
|
|
+ ? <View className="srpr-p-discount">折后总价:{(Number(newTotalPrice) / 10000).toFixed(1)}万</View>
|
|
|
+ : <View className="srpr-p2">总价:{(Number(two.price) / 10000).toFixed(1)}万</View>
|
|
|
+ }
|
|
|
</View>
|
|
|
</View>
|
|
|
)
|
|
|
@@ -282,6 +318,64 @@ class Index extends Component {
|
|
|
}
|
|
|
|
|
|
|
|
|
+ // discountPriceToggle () {
|
|
|
+ // let { isDiscountPage, canvasHeight } = this.state
|
|
|
+ // if (!isDiscountPage) canvasHeight ='10'
|
|
|
+ // this.setState({
|
|
|
+ // canvasHeight,
|
|
|
+ // isDiscountPage: !isDiscountPage
|
|
|
+ // }, () => {
|
|
|
+
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+
|
|
|
+ discountPriceToggle () {
|
|
|
+ let { isDiscountPage, canvasHeight, imageSrc } = this.state
|
|
|
+ if (!isDiscountPage) {
|
|
|
+ imageSrc = ''
|
|
|
+ canvasHeight ='10'
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ imageSrc,
|
|
|
+ canvasHeight,
|
|
|
+ isDiscountPage: !isDiscountPage
|
|
|
+ }, () => {
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 计算折扣后的总价和单价
|
|
|
+ * @param {number} originalPrice - 原始总价
|
|
|
+ * @param {string} discountStr - 折扣字符串，格式如 "*0.9,-1000,+500"
|
|
|
+ * @param {number} built - 建筑面积
|
|
|
+ * @returns {{totalPrice: number, unitPrice: number}} - 折后总价和单价
|
|
|
+ */
|
|
|
+ calculateDiscountedPrice(originalPrice, discountStr, built) {
|
|
|
+ let newTotalPrice = Number(originalPrice);
|
|
|
+ if (discountStr) {
|
|
|
+ const hdArr = discountStr.replace(/，/g, ',').split(',');
|
|
|
+ hdArr.forEach(dis1 => {
|
|
|
+ const oneStr = dis1.substr(0, 1);
|
|
|
+ const otherStr = dis1.substr(1);
|
|
|
+ if (oneStr === '*') {
|
|
|
+ newTotalPrice = Number((newTotalPrice * parseFloat(otherStr)).toFixed(2));
|
|
|
+ } else if (oneStr === '-') {
|
|
|
+ newTotalPrice = Number((newTotalPrice - parseFloat(otherStr)).toFixed(2));
|
|
|
+ } else if (oneStr === '+') {
|
|
|
+ newTotalPrice = Number((newTotalPrice + parseFloat(otherStr)).toFixed(2));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ const newUnitPrice = Number((newTotalPrice / built).toFixed(2));
|
|
|
+ return {
|
|
|
+ newTotalPrice,
|
|
|
+ newUnitPrice
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
renderDtl () {
|
|
|
const { isDtlShow, curRoomObj, houseSaleStateArr } = this.state
|
|
|
let boxClassStr = 'p2 t1'
|
|
|
@@ -290,24 +384,9 @@ class Index extends Component {
|
|
|
if (curRoomObj.house_sale_state === '已售') boxClassStr = `'p2 t4`
|
|
|
if (curRoomObj.house_sale_state === '洪楼售') boxClassStr = `'p2 t5`
|
|
|
|
|
|
- let newTotalPrice = curRoomObj.price
|
|
|
- if (curRoomObj.house_discount) {
|
|
|
- const hdArr = curRoomObj.house_discount.split(',')
|
|
|
- hdArr.forEach(dis1 => {
|
|
|
- const oneStr = dis1.substr(0,1)
|
|
|
- const otherStr = dis1.substr(1,dis1.length)
|
|
|
- if (oneStr === '*'){
|
|
|
- newTotalPrice = (Number(newTotalPrice * otherStr).toFixed(2))
|
|
|
- }
|
|
|
- if (oneStr === '-'){
|
|
|
- newTotalPrice = (Number(newTotalPrice - otherStr).toFixed(2))
|
|
|
- }
|
|
|
- if (oneStr === '+'){
|
|
|
- newTotalPrice = (Number(newTotalPrice + otherStr).toFixed(2))
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- let newOnePrice = Number(newTotalPrice / curRoomObj.built).toFixed(2)
|
|
|
+ const { newTotalPrice, newUnitPrice } = this.calculateDiscountedPrice(curRoomObj.price, curRoomObj.house_discount, curRoomObj.built);
|
|
|
+ const { isDiscountPage } = this.state
|
|
|
+
|
|
|
return (
|
|
|
<View className={isDtlShow ? 'l-modal-box' : 'l-modal-box hide'}>
|
|
|
<View className='lmb-bg'></View>
|
|
|
@@ -334,42 +413,74 @@ class Index extends Component {
|
|
|
<View className="p2">单价:{curRoomObj.sale}元/㎡</View>
|
|
|
<View className="p2">总价:{curRoomObj.price}元</View>
|
|
|
</View>
|
|
|
- <View className="sd-label">销控数据
|
|
|
-
|
|
|
- </View>
|
|
|
- <View className="sd-p">
|
|
|
- <View className={boxClassStr}>
|
|
|
|
|
|
- <Picker mode='selector' range={houseSaleStateArr} onChange={this.onSaleStateChange}>
|
|
|
- {curRoomObj.house_sale_state}<View className="s">{'修改>>'}</View>
|
|
|
- </Picker>
|
|
|
+ {
|
|
|
+ isDiscountPage
|
|
|
+ ?
|
|
|
+ <View>
|
|
|
+ <View className="sd-label">折扣操作</View>
|
|
|
+ <View className="sd-p">
|
|
|
+ <View className="p2">折扣(,)：
|
|
|
+ <Input type='text' placeholder='请输入' value={curRoomObj.house_discount} onInput={this.inputCHnage.bind(this, 'house_discount')} />
|
|
|
+ </View>
|
|
|
+ <View className="p2">
|
|
|
+ <View className="s">折后总价：{newTotalPrice || '暂无'}元</View>
|
|
|
+ <View className="s">折后单价：{newUnitPrice || '暂无'}元/㎡</View>
|
|
|
+ </View>
|
|
|
+ <View className="p">备注：
|
|
|
+ <Textarea placeholder='请输入' style='background:#fff;width:100%;min-height:50px;padding:0 30rpx;box-sizing: border-box;text-align: left;color: #666;' value={curRoomObj.house_sale_remark} autoHeight/>
|
|
|
+ </View>
|
|
|
+ <View className="p3">
|
|
|
+ <View className="t">输入验证码{curRoomObj.id}，将本单元全部改为此折扣</View>
|
|
|
+ <Input type='text' className="i" placeholder='请输入' value={curRoomObj.inputId} onInput={this.inputCHnage.bind(this, 'inputId')} />
|
|
|
+ <View className="b" onClick={this.tagDiscountHandle.bind(this)}>本单元全部此折扣</View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View className="l-floor-footer t2">
|
|
|
+ <View className="lff-flex">
|
|
|
+ <View className="lff-btn t3" onClick={this.closeRulePopup.bind(this)}>关闭</View>
|
|
|
+ <View className="lff-btn t2" onClick={this.closeRulePopup.bind(this, 'edit')}>保存折扣</View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ :
|
|
|
+ <View>
|
|
|
+ <View className="sd-label">销控数据</View>
|
|
|
+ <View className="sd-p">
|
|
|
+ <View className={boxClassStr}>
|
|
|
|
|
|
- </View>
|
|
|
- <View className="p2">折扣：
|
|
|
- <Input type='text' placeholder='请输入' value={curRoomObj.house_discount} onInput={this.inputCHnage.bind(this, 'house_discount')} />
|
|
|
- </View>
|
|
|
- <View className="p2">朝向：
|
|
|
- <Input type='text' placeholder='请输入' value={curRoomObj.toward} onInput={this.inputCHnage.bind(this, 'toward')} />
|
|
|
- </View>
|
|
|
- <View className="p2">
|
|
|
- <View className="s">折后总价：{newTotalPrice || '暂无'}元</View>
|
|
|
- <View className="s">折后单价：{newOnePrice || '暂无'}元/㎡</View>
|
|
|
- </View>
|
|
|
- <View className="p">备注：
|
|
|
- <Textarea placeholder='请输入' style='background:#fff;width:100%;min-height:50px;padding:0 30rpx;box-sizing: border-box;text-align: left;color: #666;' value={curRoomObj.house_sale_remark} autoHeight/>
|
|
|
- </View>
|
|
|
- <View className="p3">
|
|
|
- <View className="t">输入验证码{curRoomObj.id}，将本单元全部改为已售</View>
|
|
|
- <Input type='text' className="i" placeholder='请输入' value={curRoomObj.inputId} onInput={this.inputCHnage.bind(this, 'inputId')} />
|
|
|
- <View className="b" onClick={this.tagHandle.bind(this)}>本单元全部已售</View>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
- <View className="l-floor-footer t2">
|
|
|
- <View className="lff-flex">
|
|
|
- <View className="lff-btn t3" onClick={this.closeRulePopup.bind(this)}>关闭</View>
|
|
|
- <View className="lff-btn t2" onClick={this.closeRulePopup.bind(this, 'edit')}>保存</View>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
+ <Picker mode='selector' range={houseSaleStateArr} onChange={this.onSaleStateChange}>
|
|
|
+ {curRoomObj.house_sale_state}<View className="s">{'修改>>'}</View>
|
|
|
+ </Picker>
|
|
|
+
|
|
|
+ </View>
|
|
|
+ <View className="p2">折扣：
|
|
|
+ <Input type='text' placeholder='请输入' value={curRoomObj.house_discount} onInput={this.inputCHnage.bind(this, 'house_discount')} />
|
|
|
+ </View>
|
|
|
+ <View className="p2">朝向：
|
|
|
+ <Input type='text' placeholder='请输入' value={curRoomObj.toward} onInput={this.inputCHnage.bind(this, 'toward')} />
|
|
|
+ </View>
|
|
|
+ <View className="p2">
|
|
|
+ <View className="s">折后总价：{newTotalPrice || '暂无'}元</View>
|
|
|
+ <View className="s">折后单价：{newUnitPrice || '暂无'}元/㎡</View>
|
|
|
+ </View>
|
|
|
+ <View className="p">备注：
|
|
|
+ <Textarea placeholder='请输入' style='background:#fff;width:100%;min-height:50px;padding:0 30rpx;box-sizing: border-box;text-align: left;color: #666;' value={curRoomObj.house_sale_remark} autoHeight/>
|
|
|
+ </View>
|
|
|
+ <View className="p3">
|
|
|
+ <View className="t">输入验证码{curRoomObj.id}，将本单元全部改为已售</View>
|
|
|
+ <Input type='text' className="i" placeholder='请输入' value={curRoomObj.inputId} onInput={this.inputCHnage.bind(this, 'inputId')} />
|
|
|
+ <View className="b" onClick={this.tagHandle.bind(this)}>本单元全部已售</View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <View className="l-floor-footer t2">
|
|
|
+ <View className="lff-flex">
|
|
|
+ <View className="lff-btn t3" onClick={this.closeRulePopup.bind(this)}>关闭</View>
|
|
|
+ <View className="lff-btn t2" onClick={this.closeRulePopup.bind(this, 'edit')}>保存销控</View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
</View>
|
|
|
</View>
|
|
|
</View>
|
|
|
@@ -408,6 +519,26 @@ class Index extends Component {
|
|
|
Taro.$msg(`请输入正确的验证码`)
|
|
|
}
|
|
|
}
|
|
|
+ tagDiscountHandle () {
|
|
|
+ const { curNav, buildingNumList } = this.state
|
|
|
+ const {eId} = this.$router.params
|
|
|
+ let { curRoomObj } = this.state
|
|
|
+ if (curRoomObj.id == curRoomObj.inputId) {
|
|
|
+ Taro.$msgConfirm(`确定该单元全部改为统一折扣${curRoomObj.house_discount}？`, () => {
|
|
|
+ Taro.api.room.apinewhousediscountbatch({
|
|
|
+ estate_id: eId,
|
|
|
+ house_discount: curRoomObj.house_discount,
|
|
|
+ building_id: buildingNumList[curNav].id
|
|
|
+ }).then(res => {
|
|
|
+ this.getDtl()
|
|
|
+ this.closeRulePopup()
|
|
|
+ Taro.$msg(`更新成功~`)
|
|
|
+ })
|
|
|
+ }, () => {})
|
|
|
+ } else {
|
|
|
+ Taro.$msg(`请输入正确的验证码`)
|
|
|
+ }
|
|
|
+ }
|
|
|
// const { valStr, bc } = this.props
|
|
|
// bc(valStr, strTrim())
|
|
|
onSaleStateChange = e => {
|
|
|
@@ -453,16 +584,186 @@ class Index extends Component {
|
|
|
)
|
|
|
}
|
|
|
|
|
|
+ drawDataToCanvas = () => {
|
|
|
+ const { dataList, buildingNumList, curNav } = this.state
|
|
|
+ const buildingNumTitle = buildingNumList[curNav].title
|
|
|
+
|
|
|
+ // 动态计算画布高度
|
|
|
+ const canvasWidth = 375
|
|
|
+ const headerHeight = 40
|
|
|
+ const rowHeight = 40
|
|
|
+ const canvasHeight = headerHeight + 40 + dataList.length * rowHeight + 20
|
|
|
+
|
|
|
+
|
|
|
+ this.setState({ canvasHeight }, () => {
|
|
|
+
|
|
|
+
|
|
|
+ const ctx = Taro.createCanvasContext(this.canvasId)
|
|
|
+ ctx.setFillStyle('#fff')
|
|
|
+ ctx.fillRect(0, 0, canvasWidth, canvasHeight)
|
|
|
+
|
|
|
+
|
|
|
+ // 设置字体
|
|
|
+ ctx.setFontSize(14)
|
|
|
+ ctx.setFillStyle('#333')
|
|
|
+
|
|
|
+
|
|
|
+ // 绘制标题（居中）
|
|
|
+ const { name } = this.$router.params
|
|
|
+ const titleText = `${name}的折扣详情` // 这里可以替换为你想展示的名字
|
|
|
+ ctx.setFontSize(14); // 标题字体大小
|
|
|
+ ctx.setFillStyle('#000'); // 标题颜色
|
|
|
+ const titleWidth = ctx.measureText(titleText).width;
|
|
|
+ const titleX = (canvasWidth - titleWidth) / 2; // 计算居中位置
|
|
|
+ ctx.fillText(titleText, titleX, 28); // 绘制标题
|
|
|
+
|
|
|
+
|
|
|
+ // 绘制表头
|
|
|
+ ctx.setFillStyle('#e0e0e0')
|
|
|
+ ctx.fillRect(0, 40, canvasWidth, headerHeight)
|
|
|
+ ctx.setFillStyle('#333')
|
|
|
+ ctx.setFontSize(12)
|
|
|
+
|
|
|
+ // ctx.setTextAlign('center')
|
|
|
+ // ctx.setTextBaseline('middle')
|
|
|
+ ctx.fillText(buildingNumTitle, 10, 70)
|
|
|
+ // ctx.fillText(`${buildingNumList[curNav].title}`, 10, 70)
|
|
|
+ ctx.fillText('单价(元/㎡)', 108, 70)
|
|
|
+ ctx.fillText('总价(万)', 178, 70)
|
|
|
+
|
|
|
+ ctx.fillText('折后(元/㎡)', 250, 70)
|
|
|
+ ctx.fillText('折后(万)', 320, 70)
|
|
|
+
|
|
|
+ // 绘制数据行
|
|
|
+ dataList.forEach((item, index) => {
|
|
|
+ const y = 80 + index * rowHeight + 10
|
|
|
+
|
|
|
+ // 斑马条纹背景
|
|
|
+ if (index % 2 === 0) {
|
|
|
+ ctx.setFillStyle('#f5f5f5')
|
|
|
+ ctx.fillRect(0, y - 10, canvasWidth, rowHeight)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 文字内容
|
|
|
+ ctx.setFillStyle('#333')
|
|
|
+ ctx.setFontSize(12)
|
|
|
+ ctx.fillText(`${item.room}(${item.built})`, 10, y+16)
|
|
|
+ ctx.fillText(item.sale, 108, y+16)
|
|
|
+ ctx.fillText((item.price / 10000).toFixed(1), 178, y+16)
|
|
|
+
|
|
|
+
|
|
|
+ const { newTotalPrice, newUnitPrice } = this.calculateDiscountedPrice(item.price, item.house_discount, item.built);
|
|
|
+ ctx.setFillStyle('#cc0000')
|
|
|
+ ctx.fillText(newUnitPrice, 250, y+16)
|
|
|
+ ctx.fillText((newTotalPrice / 10000).toFixed(1), 320, y+16)
|
|
|
+ // ctx.setFillStyle('#333')
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const userInfoObj = Taro.getStorageSync('APP_userInfo')
|
|
|
+ const watermarkText = userInfoObj.phone || '内部资料'
|
|
|
+ const fontSize = 14
|
|
|
+ const spacing = 180 // 增大间距避免重叠
|
|
|
+
|
|
|
+ ctx.save() // 保存画布状态
|
|
|
+
|
|
|
+ ctx.setFontSize(fontSize)
|
|
|
+ ctx.setFillStyle('rgba(200, 200, 200, 0.2)')
|
|
|
+ ctx.setTextAlign('left')
|
|
|
+ ctx.setTextBaseline('middle')
|
|
|
+
|
|
|
+ // 简化水印绘制逻辑，减少循环次数
|
|
|
+ const startX = -canvasWidth
|
|
|
+ const endX = canvasWidth * 2
|
|
|
+ const startY = -canvasHeight
|
|
|
+ const endY = canvasHeight * 2
|
|
|
+
|
|
|
+ // 降低水印密度，提高性能
|
|
|
+ for (let x = startX; x < endX; x += spacing) {
|
|
|
+ for (let y = startY; y < endY; y += spacing) {
|
|
|
+ // 保存当前状态
|
|
|
+ ctx.save()
|
|
|
+
|
|
|
+ // 移动到水印位置
|
|
|
+ ctx.translate(x, y)
|
|
|
+
|
|
|
+ // 旋转45度
|
|
|
+ ctx.rotate(Math.PI / 4)
|
|
|
+
|
|
|
+ // 绘制文字
|
|
|
+ ctx.fillText(watermarkText, 0, 0)
|
|
|
+
|
|
|
+ // 恢复状态
|
|
|
+ ctx.restore()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ctx.restore() // 恢复画布状态
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ // 绘制完成
|
|
|
+ ctx.draw(false, () => {
|
|
|
+ Taro.canvasToTempFilePath({
|
|
|
+ canvasId: this.canvasId,
|
|
|
+ success: res => {
|
|
|
+ this.setState({ imageSrc: res.tempFilePath })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ previewImage = () => {
|
|
|
+ const { imageSrc } = this.state
|
|
|
+ if (imageSrc) {
|
|
|
+ Taro.previewImage({
|
|
|
+ current: imageSrc,
|
|
|
+ urls: [imageSrc]
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ Taro.showToast({ title: '图片生成中', icon: 'none' })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
render () {
|
|
|
+ const { canvasHeight, isDiscountPage, imageSrc } = this.state
|
|
|
return (
|
|
|
<View className="l-box">
|
|
|
<WaterMark />
|
|
|
<LoginJudge />
|
|
|
{this.renderTop()}
|
|
|
+ <View className="scoped-room-box"></View>
|
|
|
+ {
|
|
|
+ isDiscountPage
|
|
|
+ ?
|
|
|
+ <View>
|
|
|
+ <View className="l-floor-footer t2">
|
|
|
+ <View className="lff-flex">
|
|
|
+ {
|
|
|
+ imageSrc
|
|
|
+ ?
|
|
|
+ <View className="lff-btn t5 full" onClick={this.previewImage.bind(this)}>预览保存图片</View>
|
|
|
+ :
|
|
|
+ <View className="lff-btn full" onClick={this.drawDataToCanvas.bind(this)}>生成图片</View>
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ <Canvas
|
|
|
+ style={{ width: '100%', height: `${canvasHeight}px` }}
|
|
|
+ canvasId={this.canvasId}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ : ''
|
|
|
+ }
|
|
|
{this.renderInfo()}
|
|
|
{this.renderDtl()}
|
|
|
{this.renderShare()}
|
|
|
- <Chat onRef={this.refChat} />
|
|
|
+ {/* <Chat onRef={this.refChat} /> */}
|
|
|
</View>
|
|
|
)
|
|
|
}
|
