业务思维的转变-关于对折扣价和价格显示问题的思考

业务场景:我们打开京东或者淘宝，有的商品会有折扣价，有的没有，


其实也不是所有商品都是打折的，也不是所有商品都是不打折的。
那么我们该如何动态的渲染这些打折或者不打折的商品价格呢？
第一次写的时候，我首先想到的是用wx:if去做

//打折价格
<view wx:if="{{discountPrice}}" value="{{discountPrice}}"></view>
//原价
<view wx:if="!{{discountPrice}}" value="{{price}}"></view>
//打折就显示原价删除线
<view class="删除线的css自行脑补" wx:elif="{{discountPrice}}" value="{{price}}"></view>

可是我发现这玩意儿写的有点绕，什么打不打折的。
想着想着我决定有小程序特有的wxs进行修改
先分析了一下价格这个东西，
首先这个价格由两个模块构成，一个是主价格，也就是我商品这个该有的价格，我不管你这个打不打折，你这商品都得有个价格，第二个就是划线价格，也就是说你原价格，
于是乎

function mainPrice(price,discountPrice) {
	//折扣价存不存在
    if(discountPrice){
    	//存在，主价就是折扣价
        return discountPrice
    }
    //不存在，主价就是原价
    return price
}
function slashedPrice(price,discountPrice) {
	//折扣价存在
    if(discountPrice){
    //划线价就是原价
    return price
    }
    //否则就返回空
    return
}
module.exports={
    mainPrice:mainPrice,
    slashedPrice:slashedPrice
}

这样我们就解决了该不该划线的问题，但是这假如万事大吉那可太天真了，你渲染的时候虽然没有折扣价的时候返回空，但是你想到没，￥这个符号还画了个杠呢，影响美观，接着哼哧哼哧的又改了下

function mainPrice(price,discountPrice) {
    console.log("原始价"+price+"折扣价"+discountPrice)
    if(discountPrice){
        return discountPrice
    }
    return price
}
function slashedPrice(price,discountPrice) {
    if(discountPrice){
        return {
            display:true,
            price:price
        }
    }
    return {
        display:false
    }
}
module.exports={
    mainPrice:mainPrice,
    slashedPrice:slashedPrice
}

没错，我传了个对象过去，要说js就这好处，不规定返回值，想传啥就传啥呢！！！

关于业务上的思考，比如不能太死板的看问题，有时候业务上面的东西可以用模块化的思维，我们可以用主价格(永远不划线)，划线价格(划线),可能逻辑上就会简单许多。