pages/common/orderList/listItem.vue

@@ -1,114 +1,188 @@
 <template>
-  <view>
-    <view class="volunteer-item">
-      <view class="volunteer-item-content">
-         <up-image
-        :show-loading="true"
-        :src="data.avatar"
-        width="112rpx"
-        height="112rpx"
-      ></up-image>
-
-
-          
-
-      <view class="item-title-box" @click="onClick(1)">
-
-          {{ data.name }}
-        <view class="item-de">
-          <view>
-            {{ data.address }}
-          </view>
+    <view class="item">
+        <view class="item-img">
+            <up-image :show-loading="true" :src="data.avatar" width="112rpx" height="112rpx"></up-image>
         </view>
-        <view class="item-time">
-          服务时间：{{ data.workDate }} {{ data.workStartTime }}（<text
-            class="item-time-text"
-            >{{ data.serviceDuration }}分钟</text
-          >）
+        <view class="item-info">
+            <view class="item-title-box" @click="onClick(1)">
+                <view class="item-title">
+                    <view class="item-name">
+                        {{ data.name }}
+                    </view>
+                    <view v-if="data.score || ['0', '1','3'].includes(String(data.orderStatus))">
+                        <dict-tag :options="order_status" :value="String(data.orderStatus)" />
+                    </view>
+                    <text v-else class="color-blue ">
+                        待评价
+                    </text>
+                </view>
+                <view class="item-de">
+                    <view >
+                        <img src="/static/serverImg/list/ad2.png" alt="" style="width: 28rpx;height: 28rpx;">
+                    </view>
+                    <view style="flex: 1;">
+                        {{ data.address }}
+                    </view>
+                   
+                </view>
+                <view class="item-time">
+                    服务时间：{{ data.workDate }} {{ data.workStartTime }}（<text class="item-time-text">{{ data.serviceDuration }}分钟</text>）
+                </view>
+                <view class="item-price"><span class="item-price-yuan">¥</span> {{ data.serviceOnePrice || 0 }}</view>
+            </view>
+            <view class="item-box">
+                <view class="item-btns">
+                    <view class="btn-m" @click="onClick(1)" >查看</view>
+                    <view class="btn-m" @click="onClick(2)">
+                        <text style="margin-left: 8rpx;">沟通</text>
+                    </view>
+                    <view class="btn-m" @click="onClick(3)"  v-if="['3', '1'].includes(data.orderStatus)">
+                        <!-- <up-icon name="chat" color="#ffffff" size="20"></up-icon> -->
+                       {{ data.orderStatus === '1' ? '开始' : '完成' }}服务
+                    </view>
+                </view>
+            </view>
         </view>
-        <view class="item-price"
-          ><span class="item-price-yuan">¥</span>
-          {{ data.serviceOnePrice || 0 }}</view
-        >
-      </view>
-      </view>
-
-
-      <!-- <view class="item-box">
-        <view class="item-btns">
-          <view class="btn-m" @click="onClick(1)">查看</view>
-          <view class="btn-m" @click="onClick(2)">
-            <text style="margin-left: 8rpx">沟通</text>
-          </view>
-          <view
-            class="btn-m"
-            @click="onClick(3)"
-            v-if="['3', '1'].includes(data.orderStatus)"
-          >
-            {{ data.orderStatus === '1' ? '开始' : '完成' }}服务
-          </view>
-        </view>
-      </view>  -->
     </view>
-
-    <!-- <view class="item-title">
-          <view class="item-name">
-          </view>
-          <view
-            v-if="
-              data.score || ['0', '1', '3'].includes(String(data.orderStatus))
-            "
-          >
-            <dict-tag
-              :options="order_status"
-              :value="String(data.orderStatus)"
-            />
-          </view>
-          <text v-else class="color-blue"> 待评价 </text>
-        </view> -->
-  </view>
 </template>
 
 <script setup>
-import { inject } from 'vue'
+import { inject } from 'vue';
 import DictTag from '@/components/DictTag/index.vue'
 
+
 const props = defineProps({
-  data: {
-    type: Object,
-    default: () => {
-      return {}
+    data: {
+        type: Object,
+        default: () => {
+            return {}
+        }
     },
-  },
-})
+});
+
+
+const inject_click = inject('onClick');
 
-const inject_click = inject('onClick')
+const order_status = inject('order_status');
 
-const order_status = inject('order_status')
 
 /**
  * 1: 查看
  * 2：沟通
  */
 function onClick(type) {
-  uni.$u.debounce(inject_click(props.data, type), 300)
+    uni.$u.debounce(inject_click(props.data, type), 300)
+    
 }
 </script>
 
 <style lang="scss" scoped>
-.volunteer-item {
-  width: 703rpx;
-  height: 340rpx;
-  border-radius: 18rpx;
-  opacity: 1;
-  // background: #FFFFFF;
-  background: red;
-  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04);
-  .volunteer-item-content{
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-  }
+.item {
+    border-radius: 18rpx;
+    background: rgba(255, 255, 255, 1);
+    margin-bottom: 24rpx;
+    padding: 32rpx;
+    display: flex;
+    align-items: flex-start;
+
+    .item-img {
+        margin-right: 32rpx;
+    }
+
+    .item-info {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        justify-content: space-between;
+        height: 100%;
+
+        .item-title-box {
+            .item-title {
+                font-size: 30rpx;
+                font-weight: 400;
+                line-height: 45rpx;
+                color: rgba(26, 26, 26, 1);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 15rpx;
+            }
+        }
+
+        .item-de {
+            display: flex;
+            font-size: 26rpx;
+            font-weight: 400;
+            line-height: 39rpx;
+            color: rgba(153, 153, 153, 1);
+            display: flex;
+            align-items: flex-start;
+            justify-content: flex-start;
+            
+        }
+
+        .item-time {
+            font-size: 26rpx;
+            font-weight: 400;
+            letter-spacing: 0rpx;
+            line-height: 39rpx;
+            color: rgba(153, 153, 153, 1);
+            margin-bottom: 20rpx;
+        }
+
+        .item-price {
+            font-size: 30rpx;
+            font-weight: 400;
+            letter-spacing: 0rpx;
+            line-height: 45rpx;
+            color: rgba(203, 26, 28, 1);
+            margin-bottom: 16rpx;
+        }
+
+        .item-box {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+
+
+            .item-btns {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .btn-s {
+                    font-size: 26rpx;
+                    font-weight: 400;
+                    color: rgba(221, 94, 69, 1);
+                    text-align: center;
+                    padding: 16rpx 0;
+                    width: 156.03rpx;
+                    border-radius: 8rpx;
+                    background: rgba(0, 0, 0, 0);
+                    display: flex;
+                    justify-content: center;
+                    border: 0rpx solid rgba(221, 94, 69, 1);
+                }
+
+                .btn-m {
+                    border-radius: 59rpx;
+                    font-size: 26rpx;
+                    text-align: left;
+                    margin-left: 24rpx;
+                    display: flex;
+                    justify-content: center;
+                    color: #dd5e45;
+                    padding: 12rpx 32rpx;
+                    border: 1px solid;
+                    border-radius: 59rpx;
+                }
+
+
+            }
+        }
+    }
+}
+.item-time-text {
+    color: #dd5e45;
 }
-</style>
+</style>