uni-app 切換按鈕， 橙色的點擊按鈕

 這個按鈕竟然是圖片，我開始以為是原生的呢，難受，結果是以判斷顯示條件來顯示哪個

<view class="">
                <view class="zhifu_zf" v-for="(payStypeVal, index) in payStype" :key="index" @click="zhifuChange(index)">
                    <label for=""><image :src="payStypeVal.image" mode="" class="zhifu_image"></image></label>
                    <label for="" class="zhifu_zf_zi">{{ payStypeVal.name }}</label>
                    <label for=""  class=""><image :src="isCheckState==index?iconsel: iconNosel" class="section" :class="isCheckState==index?iconsel: iconNosel" ></image></label>                
                    <view class="xian"></view>
                </view>
            </view>
import weixin from '../../static/kaika_xuanren/[e-mail]'
export default {
    data() {
        return {
            iconsel: "../../static/checkbox_button/jiezhang-icon-anniu-sel.png",
            iconNosel: "../../static/checkbox_button/jiezhang-icon-anniu-nor.png",
            isCheckState: 0,
            payStype:[
                { name:"微信支付", image:weixin},
                { name:"支付寶支付", image:require('@../../static/kaika_xuanren/[e-mail]')},
                { name:"現金支付", image:'../../static/kaika_xuanren/[e-mail]'}
            ]
        };      
    }

　　　　methods: {
		zhifuChange(index){
			this.isCheckState = index;
		}
	}

　　

｝

css

.zhifu_image {
	height: 40upx;
	width: 40upx;
	margin-left: 10upx;
	margin-top: 30upx;
	position: relative;
	top: 10upx;
}
.zhifu_zf_zi{
	padding-left: 20upx;
	line-height: 60upx;
}
.zhifu_zf {
	margin-left: 30upx;
	position: relative;
	bottom: 10upx;
	width: 610upx;
}

.xian {
　　　　background-color: #e5e5e5;
　　　　width: 100%;
　　　　height: 1upx;
　　　　position: relative;
　　　　top: 10upx;
}

效果圖

不要問我為什么第一段代碼22行和23行中間多了一塊， 我點擊的方法忘放上去了， 代碼放進去行號就從1開始了， 誰知道代碼怎么能接着順序啊！！！ 求告訴！！！