上传文件至 'hangout-master/asset/components/bill'

hangout-master/asset/components/bill/bill.js

@@ -0,0 +1,64 @@
+// components/bill/bill.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        flag1: 0,
+        flag2: 0,
+        icon: ["/asset/img/icon-display1.png",
+            "/asset/img/icon-display2.png"
+        ],
+        list: ["日期", "时间", "价格"],
+        display1 : 'none',
+        display2: 'none',
+        pubBillNum: [1],
+        priBillNum : [1]
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        hit: function () {
+            this.setData({
+                display1: this.data.flag1 == 1 ? 'none' : 'block',
+                flag1: this.data.flag1 == 0 ? 1 : 0
+            })
+        },
+
+        hit2: function () {
+            this.setData({
+                display2: this.data.flag2 == 1 ? 'none' : 'block',
+                flag2: this.data.flag2 == 0 ? 1 : 0
+            })
+        },
+
+        addPub: function(){
+            const length = this.data.pubBillNum.length
+            this.setData({
+                pubBillNum:this.data.pubBillNum.concat([length+1])
+            })
+        },
+
+        addPrivate: function(){
+            const length = this.data.priBillNum.length
+            this.setData({
+                priBillNum:this.data.priBillNum.concat([length+1])
+            })
+        },
+
+        onRet: function () {
+            wx.reLaunch({
+              url: "/Pages/travel/home/home",
+            });
+          },
+    }
+})

hangout-master/asset/components/bill/bill.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

hangout-master/asset/components/bill/bill.wxml

@@ -0,0 +1,48 @@
+<!--components/bill/bill.wxml-->
+<!--TODO:解决添加时底部组件位置问题-->
+<view style="display: flex;">
+    <image class="navi" src="/asset/img/navi.png" bindtap="onRet" ></image>
+
+    <view style="padding: 0;margin: 0;width: 1px;height:700px;background-color:  #7B8B6F;"></view>
+
+    <view class="bill" style="display: block">
+        <view class="title">记账单</view>
+
+        <view class="share" style="display:flex;">
+            <image class="display" src="{{icon[flag1]}}" bindtap="hit"></image>
+            <text decode="true">&nbsp;&nbsp;共享账单</text>
+        </view>
+
+        <view style="display: {{display1}};">
+            <view class="content" style="display: flex;" wx:for="{{pubBillNum}}">
+                <view wx:for="{{list}}" style="display:block;">
+                {{item}}
+                <view style="padding: 0;margin: 0;height: 10px;"></view>
+                <input placeholder="___________" confirm-type="next" />
+                </view>
+            </view>
+
+            <button class="add" bindtap="addPub">+</button>
+        </view>
+
+        <view class="share" style="display:flex;">
+            <image class="display" src="{{icon[flag2]}}" bindtap="hit2"></image>
+            <text decode="true">&nbsp;&nbsp;私有账单</text>
+        </view>
+
+        <view style="display: {{display2}};" >
+            <view class="content" style="display: flex;" wx:for="{{priBillNum}}">
+                <view wx:for="{{list}}" style="display:block;">
+                {{item}}
+                <view style="padding: 0;margin: 0;height: 10px;"></view>
+                <input placeholder="___________" confirm-type="next"/>
+                </view>
+            </view>
+
+            <button class="add" bindtap="addPrivate">+</button>
+        </view>
+
+
+
+    </view>
+</view>

hangout-master/asset/components/bill/bill.wxss

@@ -0,0 +1,73 @@
+/* components/bill/bill.wxss */
+.navi{
+    width: 40px;
+    height: 30px;
+    margin: 5px;
+    padding-top: 10px;
+}
+
+.title{
+    position: relative; 
+    top: 20px; 
+    left: 15px;
+    font-size: 22px; 
+    font-weight: 900; 
+    color: #000;
+}
+
+.bill {
+    display: block;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    top: -5px;
+  }
+
+.share{
+    position: relative;
+    padding: 20px;
+    margin: 10px;
+    top:10px;
+    font-size: 17px;
+}
+
+.display{
+    width: 19px;
+    height: 19px;
+    
+}
+
+.content{
+    text-align: center;
+    width: 324px;
+    padding-bottom: 20px;
+}
+
+.add{
+    color: #7B8B6F;
+    font-weight: 900;
+    background-color: #F0EBE5;
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    justify-items: center;
+    text-align: center;
+    position: relative;
+    top:20px;
+}
+
+button {
+    margin-left: 10px;
+    padding-left: 10px;
+    position: inherit;
+    background: inherit;
+    font-weight: bolder;
+}
+ 
+button:after {
+    content: none;
+}
+ 
+button::after {
+    border: none;
+}