|
|
@@ -11,49 +11,53 @@
|
|
|
<u-empty text="暂无数据" mode="list" v-if="tabItem.loaded && tabItem.list.length == 0"></u-empty>
|
|
|
|
|
|
<!-- 订单列表 -->
|
|
|
- <view class="dd-wrap" v-for="item in tabItem.list" :key="item">
|
|
|
- <view class="dd-id-status">
|
|
|
- <view class="dd-stata">
|
|
|
- 待服务
|
|
|
+ <view class="good" v-for="item in tabItem.list">
|
|
|
+ <image src="" mode="" class="good-img"></image>
|
|
|
+ <view class="good-info">
|
|
|
+ <view class="good-tit clamp2">
|
|
|
+ 涅槃旗下官方正品线雕提拉术
|
|
|
</view>
|
|
|
- <view class="dd-id">
|
|
|
- ddddadfasfdasdf-adfas
|
|
|
+ <view class="good-tip">
|
|
|
+ 随时随地 预约服务
|
|
|
</view>
|
|
|
- <view class="dd-status">
|
|
|
- 已预约
|
|
|
+ <view class="good-buy">
|
|
|
+ 已售1000件
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="dd-info" style="margin-top: 20rpx;">
|
|
|
- 客服名称<text>小圆</text>
|
|
|
- </view>
|
|
|
- <view class="dd-info">
|
|
|
- 下单时间<text>2022-11-03 9:30~10:30</text>
|
|
|
- </view>
|
|
|
- <view class="dd-info">
|
|
|
- 预约时间<text class="chs" style="color:#FF5600;">2022-11-03 9:30~10:30</text>
|
|
|
- </view>
|
|
|
- <view class="dd-btm">
|
|
|
- <view class="btm-price">
|
|
|
- 订单金额： <text>￥2400</text>
|
|
|
- </view>
|
|
|
- <view class="btm-btn btm-btn-lx">
|
|
|
- 联系客户
|
|
|
- </view>
|
|
|
- <view class="btm-btn btm-btn-sm">
|
|
|
- 扫码完成
|
|
|
+ <view class="good-price">
|
|
|
+ 34 <text class="ot-price"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- <view class="add-dd">
|
|
|
- <image src="../../static/img/add-dd.png" mode=""></image>
|
|
|
- <view class="">
|
|
|
- 添加项目
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
+ <view class="add-jian-wrap">
|
|
|
+ <image src="../../static/img/jian.png" mode="" v-if="nun > 0" @click="jian()"></image>
|
|
|
+ <input type="number" class="input" v-model="nun" v-if="nun > 0" disabled>
|
|
|
+ <image src="../../static/img/add.png" mode="" @click="add()"></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<u-loadmore :status="tabItem.loadingType" />
|
|
|
+ <view class="tc" style="height: 100rpx;"></view>
|
|
|
+
|
|
|
</scroll-view>
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
+ <view class="sub-btn">
|
|
|
+ <view class="sub-info">
|
|
|
+ 合计：<input type="number" >
|
|
|
+ </view>
|
|
|
+ <view class="sub" @click="sub">
|
|
|
+ 结算(2)
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-modal
|
|
|
+ v-model="tip_show"
|
|
|
+ @confirm="ok()"
|
|
|
+ @cancel="cancel()"
|
|
|
+ :show-cancel-button="true"
|
|
|
+ cancel-text="取消"
|
|
|
+ confirm-text="确认"
|
|
|
+ content="确认添加这些商品吗"
|
|
|
+ title="确认"
|
|
|
+ confirm-color="#FF5454"
|
|
|
+ ></u-modal>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -61,11 +65,13 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ tip_show: false,
|
|
|
+ nun: 0,
|
|
|
height: '',
|
|
|
tabCurrentIndex: 0,
|
|
|
navlist: [{
|
|
|
status: 0,
|
|
|
- title: '全部',
|
|
|
+ title: '服务项目',
|
|
|
list: 10,
|
|
|
page: 1,
|
|
|
limit: 10,
|
|
|
@@ -74,16 +80,7 @@
|
|
|
},
|
|
|
{
|
|
|
status: 1,
|
|
|
- title: '待服务',
|
|
|
- list: [],
|
|
|
- page: 1,
|
|
|
- limit: 10,
|
|
|
- loaded: false,
|
|
|
- loadingType: 'loadmore'
|
|
|
- },
|
|
|
- {
|
|
|
- status: 2,
|
|
|
- title: '已完成',
|
|
|
+ title: '实体商品',
|
|
|
list: [],
|
|
|
page: 1,
|
|
|
limit: 10,
|
|
|
@@ -117,6 +114,14 @@
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 减少商品
|
|
|
+ jian() {
|
|
|
+ this.nun--
|
|
|
+ },
|
|
|
+ // 增加商品
|
|
|
+ add() {
|
|
|
+ this.nun++
|
|
|
+ },
|
|
|
//顶部tab点击
|
|
|
tabClick(index) {
|
|
|
this.tabCurrentIndex = index;
|
|
|
@@ -144,6 +149,15 @@
|
|
|
|
|
|
|
|
|
},
|
|
|
+ sub() {
|
|
|
+ this.tip_show = true
|
|
|
+ },
|
|
|
+ ok() {
|
|
|
+
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -169,7 +183,7 @@
|
|
|
position: relative;
|
|
|
|
|
|
&.current {
|
|
|
- color: #000;
|
|
|
+ color: #FD463E;
|
|
|
|
|
|
&:after {
|
|
|
content: '';
|
|
|
@@ -179,135 +193,127 @@
|
|
|
transform: translateX(-50%);
|
|
|
width: 44px;
|
|
|
height: 0;
|
|
|
- border-bottom: 2px solid #4076d6;
|
|
|
+ border-bottom: 2px solid #FD463E;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .dd-wrap {
|
|
|
- margin: auto;
|
|
|
- width: 713rpx;
|
|
|
- height: 314rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
+ .good {
|
|
|
+ width: 690rpx;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 20rpx;
|
|
|
background-color: #fff;
|
|
|
- padding-top: 35rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
position: relative;
|
|
|
- margin-bottom: 27rpx;
|
|
|
-
|
|
|
- .dd-id-status {
|
|
|
- height: 40rpx;
|
|
|
+ .add-jian-wrap {
|
|
|
+ position: absolute;
|
|
|
+ // top: ;
|
|
|
+ bottom: 30rpx;
|
|
|
+ right: 50rpx;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 44rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- width: 100%;
|
|
|
- font-size: 24rpx;
|
|
|
- padding: 0 23rpx 0 43rpx;
|
|
|
-
|
|
|
- .dd-stata {
|
|
|
+ justify-content: flex-end;
|
|
|
+ image {
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
flex-shrink: 0;
|
|
|
- width: 123rpx;
|
|
|
- height: 39rpx;
|
|
|
- background: #FF5600;
|
|
|
- border-radius: 5rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 39rpx;
|
|
|
-
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
}
|
|
|
-
|
|
|
- .dd-id {
|
|
|
- margin-left: 15rpx;
|
|
|
+ .input {
|
|
|
+ // display: flex;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 44rpx;
|
|
|
flex-grow: 1;
|
|
|
- color: #1e395a;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .dd-status {
|
|
|
- flex-shrink: 0;
|
|
|
- font-weight: 400;
|
|
|
- color: #FCA930;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .dd-info {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #A0A0A0;
|
|
|
- padding-left: 42rpx;
|
|
|
-
|
|
|
- text {
|
|
|
- padding-left: 32rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #173456;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
- .dd-btm {
|
|
|
+ .good-check {
|
|
|
position: absolute;
|
|
|
- bottom: 0;
|
|
|
- height: 90rpx;
|
|
|
- width: 713rpx;
|
|
|
- background: linear-gradient(to right, #fbf5eb, #ffffff);
|
|
|
- border-radius: 0 0 20rpx 20rpx;
|
|
|
+ bottom: 20rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ }
|
|
|
+ .good-img {
|
|
|
+ width: 256rpx;
|
|
|
+ height: 256rpx;
|
|
|
+ background: #D6DEE1;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 15rpx;
|
|
|
+ }
|
|
|
+ .good-info {
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // align-items: ;
|
|
|
justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0 20rpx 0 42rpx;
|
|
|
-
|
|
|
- .btm-price {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #56687f;
|
|
|
- flex-grow: 1;
|
|
|
- text {
|
|
|
- color: #ff1e00;
|
|
|
- }
|
|
|
+ align-items: flex-start;
|
|
|
+ .good-tit {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
-
|
|
|
- .btm-btn {
|
|
|
- width: 126rpx;
|
|
|
- height: 48rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- background: #ebccae;
|
|
|
- border-radius: 10rpx;
|
|
|
+ .good-buy {
|
|
|
font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #9a9a9a;
|
|
|
}
|
|
|
- .btm-btn-sm {
|
|
|
-
|
|
|
- background: #4D74CF;
|
|
|
- margin-left: 10rpx;
|
|
|
- color: #fff;
|
|
|
+
|
|
|
+ .good-tip {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FA7014;
|
|
|
}
|
|
|
- .btm-btn-lx {
|
|
|
- background-color: #fff;
|
|
|
- border: 1px solid #65676A;
|
|
|
- color: #56585C;
|
|
|
+ .good-price {
|
|
|
+ color: #fd463e;
|
|
|
+ font-size: 32rpx;
|
|
|
+ &::before {
|
|
|
+ content: '￥';
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #fd463e;
|
|
|
+ }
|
|
|
+ text {
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
- .add-dd {
|
|
|
- position: absolute;
|
|
|
- bottom: 90rpx;
|
|
|
- right: 20rpx;
|
|
|
- width: 110rpx;
|
|
|
- height: 100rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: #FF5600;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- image {
|
|
|
- display: block;
|
|
|
- margin: auto;
|
|
|
- width: 36rpx;
|
|
|
- height: 45rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .sub-btn {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ .sub-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ input {
|
|
|
+ color: #FF4C4C;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
-
|
|
|
+ }
|
|
|
+ .sub {
|
|
|
+ width: 220rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ background: #FF4C4C;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
