@ -1,259 +0,0 @@ | |||||
<template> | |||||
<view class="page"> | |||||
<navbar/> | |||||
<view class="user"> | |||||
<uv-checkbox-group | |||||
shape="circle" | |||||
v-model="checkboxValue"> | |||||
<uv-swipe-action> | |||||
<view | |||||
v-for="(item, index) in list" | |||||
:key="index"> | |||||
<view style="margin-top: 20rpx;"></view> | |||||
<uv-swipe-action-item | |||||
:options="options"> | |||||
<view class="item"> | |||||
<view class="checkbox"> | |||||
<uv-checkbox | |||||
:name="item.id" | |||||
activeColor="#FA5A0A" | |||||
size="40rpx" | |||||
icon-size="35rpx" | |||||
></uv-checkbox> | |||||
</view> | |||||
<image | |||||
class="image" | |||||
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" | |||||
mode=""></image> | |||||
<view class="info"> | |||||
<view class="title"> | |||||
<view class=""> | |||||
{{ item.title }} | |||||
</view> | |||||
<view class=""> | |||||
<uv-number-box v-model="item.num" | |||||
@change="valChange"></uv-number-box> | |||||
</view> | |||||
</view> | |||||
<view class="unit"> | |||||
规格:{{ item.unit }} | |||||
<uv-icon name="arrow-down"></uv-icon> | |||||
</view> | |||||
<view class="price"> | |||||
¥<text>{{ item.price }}</text>元 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</uv-swipe-action-item> | |||||
</view> | |||||
</uv-swipe-action> | |||||
</uv-checkbox-group> | |||||
<view class="action"> | |||||
<view class="icon"> | |||||
<image src="/static/image/cart/1.png" mode=""></image> | |||||
<view class="num"> | |||||
{{ checkboxValue.length }} | |||||
</view> | |||||
</view> | |||||
<view class="price"> | |||||
<view class="count"> | |||||
合计 | |||||
<view class=""> | |||||
¥<text>{{ totalPrice }}</text> | |||||
</view> | |||||
</view> | |||||
<view class="text"> | |||||
共{{ checkboxValue.length }}件,已享受更低优惠 | |||||
</view> | |||||
</view> | |||||
<view class="btn"> | |||||
去结算 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<tabber select="3" /> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import tabber from '@/components/base/tabbar.vue' | |||||
export default { | |||||
components: { | |||||
tabber, | |||||
}, | |||||
data() { | |||||
return { | |||||
value : 0, | |||||
checkboxValue : [], | |||||
options: [ | |||||
{ | |||||
text: '删除', | |||||
style: { | |||||
backgroundColor: '#FA5A0A' | |||||
} | |||||
}, | |||||
], | |||||
list : [ | |||||
{ | |||||
id : 1, | |||||
title : '桌布租赁', | |||||
num : 1, | |||||
price : 299, | |||||
unit : '120*40*75【桌子尺寸】', | |||||
}, | |||||
{ | |||||
id : 2, | |||||
title : '桌布租赁', | |||||
num : 1, | |||||
price : 299, | |||||
unit : '120*40*75【桌子尺寸】', | |||||
}, | |||||
], | |||||
} | |||||
}, | |||||
computed: { | |||||
totalPrice(){ | |||||
if (!this.checkboxValue.length) { | |||||
return 0 | |||||
} | |||||
let price = 0 | |||||
this.list.forEach(n => { | |||||
if(this.checkboxValue.includes(n.id)){ | |||||
price += n.price * n.num | |||||
} | |||||
}) | |||||
return price | |||||
}, | |||||
}, | |||||
methods: { | |||||
valChange(){ | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.page { | |||||
padding-bottom: 200rpx; | |||||
/deep/ .uv-swipe-action{ | |||||
width: 100%; | |||||
} | |||||
} | |||||
.user { | |||||
.item{ | |||||
background-color: #fff; | |||||
display: flex; | |||||
padding: 30rpx; | |||||
.checkbox{ | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
.image{ | |||||
width: 200rpx; | |||||
height: 200rpx; | |||||
border-radius: 20rpx; | |||||
} | |||||
.info{ | |||||
flex: 1; | |||||
.title{ | |||||
display: flex; | |||||
padding: 10rpx 20rpx; | |||||
justify-content: space-between; | |||||
} | |||||
.unit{ | |||||
font-size: 24rpx; | |||||
padding: 10rpx 20rpx; | |||||
color: #717171; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
.price{ | |||||
color: $uni-color; | |||||
font-size: 28rpx; | |||||
padding: 10rpx 20rpx; | |||||
text{ | |||||
font-size: 36rpx; | |||||
font-weight: 900; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.action{ | |||||
width: 700rpx; | |||||
position: fixed; | |||||
bottom: 220rpx; | |||||
left: 25rpx; | |||||
background-color: #fff; | |||||
height: 100rpx; | |||||
border-radius: 50rpx; | |||||
box-shadow: 0 0 6rpx 6rpx #00000010; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
overflow: hidden; | |||||
.icon{ | |||||
position: relative; | |||||
width: 80rpx; | |||||
height: 80rpx; | |||||
margin: 0 20rpx; | |||||
image{ | |||||
width: 80rpx; | |||||
height: 80rpx; | |||||
} | |||||
.num{ | |||||
position: absolute; | |||||
right: 10rpx; | |||||
top: 0rpx; | |||||
background-color: $uni-color; | |||||
color: #fff; | |||||
font-size: 18rpx; | |||||
border-radius: 50%; | |||||
height: 30rpx; | |||||
width: 30rpx; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
} | |||||
.price{ | |||||
.count{ | |||||
display: flex; | |||||
font-size: 26rpx; | |||||
align-items: center; | |||||
view{ | |||||
color: $uni-color; | |||||
margin-left: 10rpx; | |||||
text{ | |||||
font-size: 32rpx; | |||||
font-weight: 900; | |||||
} | |||||
} | |||||
} | |||||
.text{ | |||||
font-size: 20rpx; | |||||
color: #717171; | |||||
} | |||||
} | |||||
.btn{ | |||||
margin-left: auto; | |||||
background-color: $uni-color; | |||||
height: 100%; | |||||
padding: 0 50rpx; | |||||
color: #fff; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@ -1,181 +0,0 @@ | |||||
<template> | |||||
<view class="page"> | |||||
<navbar/> | |||||
<view class="category"> | |||||
<uv-vtabs | |||||
:chain="chain" | |||||
:list="category" | |||||
height="1000px" | |||||
:barItemBadgeStyle="{right:'20px',top:'12px'}" | |||||
@change="change"> | |||||
<uv-vtabs-item> | |||||
<view class="category-title"> | |||||
租赁 | |||||
</view> | |||||
<view class="list"> | |||||
<view class="item" v-for="(item,index) in list" :key="index" | |||||
@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')"> | |||||
<view class="item-image"> | |||||
<image | |||||
:src="item.image" | |||||
mode="aspectFill"></image> | |||||
</view> | |||||
<view class="item-unit"> | |||||
<text class="text">{{item.unit}}</text> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</uv-vtabs-item> | |||||
</uv-vtabs> | |||||
</view> | |||||
<tabber select="1" /> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import tabber from '@/components/base/tabbar.vue' | |||||
export default { | |||||
components: { | |||||
tabber, | |||||
}, | |||||
data() { | |||||
return { | |||||
category: [ | |||||
{ | |||||
name : '桌布' | |||||
}, | |||||
{ | |||||
name : '桌布' | |||||
}, | |||||
{ | |||||
name : '桌布' | |||||
}, | |||||
], | |||||
list : [ | |||||
{ | |||||
unit : '100*50*60', | |||||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||||
}, | |||||
{ | |||||
unit : '100*50*60', | |||||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||||
}, | |||||
{ | |||||
unit : '100*50*60', | |||||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||||
}, | |||||
{ | |||||
unit : '100*50*60', | |||||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||||
}, | |||||
{ | |||||
unit : '100*50*60', | |||||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||||
}, | |||||
{ | |||||
unit : '100*50*60', | |||||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||||
}, | |||||
{ | |||||
unit : '100*50*60', | |||||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||||
}, | |||||
{ | |||||
unit : '100*50*60', | |||||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||||
}, | |||||
{ | |||||
unit : '100*50*60', | |||||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||||
}, | |||||
], | |||||
chain: false, | |||||
value: 0 | |||||
} | |||||
}, | |||||
computed: { | |||||
list2() { | |||||
const _list = this.list[this.value]?.childrens; | |||||
return _list ? _list : []; | |||||
} | |||||
}, | |||||
onReady() { | |||||
}, | |||||
methods: { | |||||
change(index) { | |||||
console.log('选项改变:', index) | |||||
this.value = index; | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.category { | |||||
font-size: 30rpx; | |||||
color: #333; | |||||
min-height: 100vh; | |||||
.category-title{ | |||||
position: relative; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
height: 120rpx; | |||||
&::before, | |||||
&::after { | |||||
position: absolute; | |||||
top: 50%; | |||||
content: ''; | |||||
width: 10%; | |||||
border-top: 2rpx solid black; | |||||
} | |||||
&::before { | |||||
left: 25%; | |||||
} | |||||
&::after { | |||||
right: 25%; | |||||
} | |||||
} | |||||
.list{ | |||||
display: flex; | |||||
flex-wrap: wrap; | |||||
margin: 0 auto; | |||||
width: 490rpx; | |||||
.item { | |||||
padding: 10rpx 20rpx; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
align-items: center; | |||||
margin-bottom: 20rpx; | |||||
.item-image { | |||||
width: 120rpx; | |||||
height: 120rpx; | |||||
image{ | |||||
height: 100%; | |||||
width: 100%; | |||||
border-radius: 50%; | |||||
} | |||||
} | |||||
.item-unit { | |||||
font-size: 24rpx; | |||||
margin-top: 15rpx; | |||||
color: #555; | |||||
} | |||||
} | |||||
.gap { | |||||
padding: 0 30rpx; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@ -1,263 +0,0 @@ | |||||
<template> | |||||
<view class="page"> | |||||
<navbar | |||||
title="订单中心" | |||||
/> | |||||
<uv-tabs :list="tabs" | |||||
:activeStyle="{color : '#FD5100', fontWeight : 600}" | |||||
lineColor="#FD5100" | |||||
lineHeight="8rpx" | |||||
lineWidth="50rpx" | |||||
@click="clickTabs"></uv-tabs> | |||||
<view v-if="orderList.length > 0" class="list"> | |||||
<view class="item" | |||||
v-for="(item, index) in orderList.records" | |||||
@click="toOrderDetail(item.id)" | |||||
:key="index"> | |||||
<view class="top"> | |||||
<view class="service"> | |||||
<text>{{item.projectId_dictText}}</text> | |||||
<text>{{item.type_dictText}}</text> | |||||
</view> | |||||
<view class="status"> | |||||
<text> {{item.state_dictText}}</text> | |||||
</view> | |||||
</view> | |||||
<view class="content"> | |||||
<view class="left"> | |||||
<image mode="aspectFill" :src="item.image"></image> | |||||
</view> | |||||
<view class="right"> | |||||
<view class="text-hidden-1"> | |||||
客户姓名:{{item.name}} | |||||
</view> | |||||
<view class="text-hidden-1"> | |||||
产品规格:{{item.unit}} | |||||
</view> | |||||
<view class="text-hidden-1"> | |||||
租赁地址:{{item.address}} | |||||
</view> | |||||
<!-- <view class="text-hidden-1"> | |||||
总计时间:{{item.useTime}}分钟 | |||||
</view> --> | |||||
</view> | |||||
</view> | |||||
<view class="bottom"> | |||||
<view class="price"> | |||||
总价格:<text class="num">{{item.money}}元</text> | |||||
</view> | |||||
<view class="b1"> | |||||
查看物流 | |||||
</view> | |||||
<!-- <view @click.stop="toPayOrder(item)" class="b2" v-if="item.state == 0"> | |||||
立即付款 | |||||
</view> | |||||
<view class="b1" @click.stop="moreOrder(item.projectId,toPlaceorder)" v-if="item.state == 3"> | |||||
再来一单 | |||||
</view> | |||||
<view class="b2" @click.stop="toEvaluate(item.id,item.projectId,item.technicianId)" v-if="item.state == 3"> | |||||
立即评价 | |||||
</view> | |||||
<view class="b2" @click.stop="moreOrder(item.projectId,toPlaceorder)" v-if="item.state == 4"> | |||||
再来一单 | |||||
</view> --> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<tabber select="2"/> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import tabber from '@/components/base/tabbar.vue' | |||||
import { mapGetters } from 'vuex' | |||||
export default { | |||||
components : { | |||||
tabber, | |||||
}, | |||||
computed : { | |||||
...mapGetters(['userShop']), | |||||
}, | |||||
data() { | |||||
return { | |||||
tabs: [{ | |||||
name: '全部' | |||||
}, | |||||
{ | |||||
name: '租赁押金' | |||||
}, | |||||
{ | |||||
name: '水洗租赁' | |||||
}, | |||||
{ | |||||
name: '破损换货' | |||||
}, | |||||
{ | |||||
name: '退货退款' | |||||
} | |||||
], | |||||
queryParams: { | |||||
pageNo: 1, | |||||
pageSize: 10 | |||||
}, | |||||
// orderList: [ | |||||
// { | |||||
// money : 99.99, | |||||
// address : '广东省广州市越秀区城南故事C3栋2802', | |||||
// name : '李**', | |||||
// phone : '150*****091', | |||||
// unit : '120*40*75【桌子尺寸】', | |||||
// image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||||
// state_dictText : '已完成', | |||||
// } | |||||
// ], //订单列表数据 | |||||
orderList : { | |||||
records : [], | |||||
total : 0, | |||||
}, | |||||
state : -1, | |||||
} | |||||
}, | |||||
onShow() { | |||||
this.orderPage() | |||||
}, | |||||
//滚动到屏幕底部 | |||||
onReachBottom() { | |||||
if(this.queryParams.pageSize < this.orderList.total){ | |||||
this.queryParams.pageSize += 10 | |||||
this.orderPage() | |||||
} | |||||
}, | |||||
methods: { | |||||
orderPage(){ | |||||
let queryParams = { | |||||
...this.queryParams, | |||||
} | |||||
if(this.state != -1){ | |||||
queryParams.state = this.state | |||||
} | |||||
this.$api('orderPage', queryParams, res => { | |||||
if(res.code == 200){ | |||||
this.orderList = res.result | |||||
} | |||||
}) | |||||
}, | |||||
//点击tab栏 | |||||
clickTabs(index) { | |||||
if (index == 0) { | |||||
this.state = -1; | |||||
} else { | |||||
this.state = index - 1; | |||||
} | |||||
this.queryParams.pageSize = 10 | |||||
this.orderPage() | |||||
}, | |||||
//跳转订单详情页面 | |||||
toOrderDetail(id) { | |||||
uni.navigateTo({ | |||||
url: '/pages_order/order/orderDetail?id=' + id | |||||
}) | |||||
}, | |||||
getOrderList(){ | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.page{ | |||||
} | |||||
.list { | |||||
.item { | |||||
width: calc(100% - 40rpx); | |||||
background-color: #fff; | |||||
margin: 20rpx; | |||||
box-sizing: border-box; | |||||
border-radius: 16rpx; | |||||
padding: 30rpx; | |||||
.top { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
font-size: 30rpx; | |||||
.service {} | |||||
.status { | |||||
font-size: 26rpx; | |||||
font-weight: 600; | |||||
} | |||||
} | |||||
.content { | |||||
display: flex; | |||||
margin: 10rpx 0; | |||||
.left { | |||||
width: 150rpx; | |||||
height: 150rpx; | |||||
border-radius: 10rpx; | |||||
image { | |||||
width: 150rpx; | |||||
height: 150rpx; | |||||
border-radius: 10rpx; | |||||
} | |||||
} | |||||
.right { | |||||
width: calc(100% - 160rpx); | |||||
color: #777; | |||||
font-size: 24rpx; | |||||
padding-left: 20rpx; | |||||
line-height: 40rpx; | |||||
background-color: #F8F8F8; | |||||
} | |||||
} | |||||
.bottom { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
font-size: 25rpx; | |||||
.price { | |||||
font-weight: 900; | |||||
text { | |||||
color: #ff780099; | |||||
font-size: 30rpx; | |||||
} | |||||
} | |||||
.b1 { | |||||
border: 1px solid #777; | |||||
color: #777; | |||||
box-sizing: border-box; | |||||
} | |||||
.b2 { | |||||
background: linear-gradient(178deg, #4FD3BC, #60C285); | |||||
color: #fff; | |||||
} | |||||
view { | |||||
margin: 12rpx; | |||||
border-radius: 28rpx; | |||||
padding: 8rpx 28rpx; | |||||
margin-bottom: 0; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> |
@ -1,213 +0,0 @@ | |||||
<template> | |||||
<view class="address"> | |||||
<navbar title="地址管理" leftClick @leftClick="leftClick" /> | |||||
<view class="address-list"> | |||||
<addressList | |||||
controls | |||||
ref="addressList" | |||||
@deleteAddress="deleteAddress" | |||||
@editAddress="editAddress" | |||||
@editDefault="editDefault"/> | |||||
</view> | |||||
<redactAddress | |||||
ref="addressPopup" | |||||
:addressDetail="addressDetail" | |||||
@saveOrUpdate="saveOrUpdate" | |||||
:title="title"></redactAddress> | |||||
<view class="add-btn"> | |||||
<view @click="addBtn" class="btn"> | |||||
新增地址 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import redactAddress from '../components/address/redactAddress.vue' | |||||
import addressList from '../components/address/addressList.vue' | |||||
export default { | |||||
components: { | |||||
redactAddress, | |||||
addressList | |||||
}, | |||||
data() { | |||||
return { | |||||
title: '新增地址', | |||||
type : '', | |||||
} | |||||
}, | |||||
onLoad(args) { | |||||
this.type = args.type | |||||
if(this.type == 'back'){ | |||||
this.addBtn() | |||||
} | |||||
}, | |||||
onShow() { | |||||
this.getAddressList() | |||||
}, | |||||
methods: { | |||||
//获取地址列表 | |||||
getAddressList() { | |||||
this.$refs.addressList.getAddressList() | |||||
}, | |||||
//获取地址详情 | |||||
editAddress(address) { | |||||
this.$refs.addressPopup.open({...address}) | |||||
}, | |||||
//返回个人中心 | |||||
leftClick() { | |||||
uni.navigateBack(-1) | |||||
}, | |||||
//添加和修改地址 | |||||
saveOrUpdate(addressDetail) { | |||||
let data = { | |||||
name: addressDetail.name, | |||||
phone: addressDetail.phone, | |||||
address: addressDetail.address, | |||||
addressDetail: addressDetail.addressDetail, | |||||
defaultId: addressDetail.defaultId || '0', | |||||
latitude: addressDetail.latitude, | |||||
longitude: addressDetail.longitude | |||||
} | |||||
if (addressDetail.id) { | |||||
data.id = addressDetail.id | |||||
} | |||||
this.$api(data.id ? 'addressEdit' : 'addressAdd', data, res => { | |||||
if (res.code == 200) { | |||||
this.$refs.addressPopup.close() | |||||
this.getAddressList() | |||||
if(this.type == 'back'){ | |||||
uni.navigateBack(-1) | |||||
} | |||||
uni.showToast({ | |||||
title: '操作成功', | |||||
icon: 'none' | |||||
}) | |||||
} | |||||
}) | |||||
}, | |||||
//修改默认地址 | |||||
editDefault(id) { | |||||
this.$api('addressDefault', { | |||||
id: id, | |||||
}, res => { | |||||
if (res.code == 200) { | |||||
this.$refs.addressPopup.close() | |||||
uni.showToast({ | |||||
title: '操作成功', | |||||
icon: 'none' | |||||
}) | |||||
this.getAddressList() | |||||
} | |||||
}) | |||||
}, | |||||
//删除地址 | |||||
deleteAddress(id) { | |||||
let self = this | |||||
uni.showModal({ | |||||
title: '删除地址', | |||||
content: '确认删除此地址?删除后数据不可恢复', | |||||
success(e) { | |||||
if(e.confirm){ | |||||
self.$api('addressDelete', { | |||||
id | |||||
}, res => { | |||||
if (res.code == 200) { | |||||
uni.showToast({ | |||||
title: '删除成功', | |||||
icon: 'none' | |||||
}) | |||||
self.getAddressList() | |||||
} | |||||
}) | |||||
} | |||||
} | |||||
}) | |||||
}, | |||||
//点击新增按钮 | |||||
addBtn() { | |||||
this.title = '新增地址' | |||||
this.$refs.addressPopup.open({ //初始化数据 | |||||
name: '', | |||||
phone: '', | |||||
address: '', | |||||
addressDetail: '', | |||||
defaultId: '', | |||||
latitude: '', | |||||
longitude: '' | |||||
}) | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.address { | |||||
width: 750rpx; | |||||
margin: 0rpx auto; | |||||
background: #F5F5F5; | |||||
box-sizing: border-box; | |||||
min-height: 100vh; | |||||
.address-list { | |||||
padding: 40rpx 20rpx 120rpx 20rpx; | |||||
} | |||||
.add-btn { | |||||
position: fixed; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
left: 0; | |||||
bottom: 0; | |||||
width: 750rpx; | |||||
height: 100rpx; | |||||
background: white; | |||||
.btn { | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
width: 85%; | |||||
height: 80rpx; | |||||
border-radius: 40rpx; | |||||
color: white; | |||||
text-align: center; | |||||
font-size: 28rpx; | |||||
background: $uni-color; | |||||
} | |||||
} | |||||
} | |||||
@media all and (min-width: 961px) { | |||||
.add-btn { | |||||
left: 50% !important; | |||||
transform: translateX(-50%); | |||||
} | |||||
} | |||||
//选择位置地图样式 | |||||
:deep(.uni-system-choose-location) { | |||||
z-index: 99999 !important; | |||||
} | |||||
</style> |
@ -1,567 +0,0 @@ | |||||
<template> | |||||
<view> | |||||
<navbar | |||||
title="订单详情" | |||||
leftClick | |||||
@leftClick="$utils.navigateBack" | |||||
/> | |||||
<!-- 水洗店 --> | |||||
<view class="" | |||||
v-if="userShop"> | |||||
<view class="controls"> | |||||
<view class="title"> | |||||
<image src="../static/order/icon.png" mode=""></image> | |||||
服务完成 | |||||
</view> | |||||
<view class="tips"> | |||||
待送回 | |||||
</view> | |||||
<view class="btns"> | |||||
<view class="btn1"> | |||||
快递寄回 | |||||
</view> | |||||
<view class="btn2"> | |||||
线下配送 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="steps"> | |||||
<uv-steps | |||||
activeColor="#FD5100" | |||||
:current="stepsCurrent" dot> | |||||
<uv-steps-item :title="item" | |||||
:key="index" | |||||
v-for="(item, index) in steps"></uv-steps-item> | |||||
</uv-steps> | |||||
</view> | |||||
</view> | |||||
<!-- 酒店和水洗店 --> | |||||
<view class="info"> | |||||
<view class="flex" | |||||
style="display: flex;"> | |||||
<view style="width: 8rpx;height: 30rpx; | |||||
background: #FD5100;border-radius: 6rpx;" /> | |||||
<view class="head-title">服务项目</view> | |||||
</view> | |||||
<view class="flex"> | |||||
<view class="server-item"> | |||||
<view class="img-box"> | |||||
<image :src="msgShop.image" mode="aspectFill"></image> | |||||
</view> | |||||
<view class="server-info"> | |||||
<view class="server-title"> | |||||
{{msgOrder.projectName}} | |||||
<!-- <view class="coupon">领券立减</view> --> | |||||
</view> | |||||
<view class="current-price"> | |||||
<text class="unit">¥</text>{{msgOrder.money}} | |||||
</view> | |||||
<view class="sales-volume" style="margin-top: 5px;"> | |||||
<view class="desc">规格:{{msgOrder.unit}}</view> | |||||
</view> | |||||
<view class="time-coupon"> | |||||
<!-- <view class="flex"> | |||||
<image src="@/static/home/time-icon.png"></image> | |||||
<view class="time">{{msgOrder.useTime}}分钟</view> | |||||
</view> --> | |||||
<!-- <view class="sales-volume"> | |||||
<image src="@/static/icons/icon1.png"></image> | |||||
<view class="desc">已售出{{msgShop.payNum}}+单</view> | |||||
</view> --> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<!-- <view class="line min_tips"> | |||||
<view class="head-div flex"> | |||||
<view style="width: 118rpx;height: 118rpx;border-radius: 50%;overflow: hidden;"> | |||||
<image style="width: 118rpx;" :src="msgTechnician.image" mode="widthFix"></image> | |||||
</view> | |||||
<view style="padding: 10rpx 34rpx;display: flex;flex-direction: column;justify-content: space-around;"> | |||||
<view class="nickname"> | |||||
{{msgTechnician.title}} | |||||
<view v-if="msgTechnician.isVip" class="tag"> | |||||
<image src="@/static/order/s.png" mode="aspectFit"></image> | |||||
<view class="auth">官方认证</view> | |||||
</view> | |||||
</view> | |||||
<view class="days"> | |||||
<van-rate v-model="msgTechnician.score" :size="10" readonly color="#ffb54c" void-icon="star" | |||||
void-color="#eee" /> | |||||
<view class=""> | |||||
好评{{msgTechnician.pinNum}} | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view @click="gototechnicianDetail(msgTechnician)" class="btn-x"> | |||||
服务技师 | |||||
</view> | |||||
</view> --> | |||||
<view class="line address"> | |||||
<view class="address-top"> | |||||
<!-- <view class=""> | |||||
服务地址 | |||||
</view> --> | |||||
<view class="copy"> | |||||
<image @click="copy(msgOrder.name + ' ' + msgOrder.phone + ' ' + msgOrder.address)" src="/static/order/copy.png"></image> | |||||
</view> | |||||
</view> | |||||
<view class="addressDetail"> | |||||
<view class="">{{msgOrder.name}} {{msgOrder.phone}}</view> | |||||
<view class="">{{msgOrder.address}}</view> | |||||
</view> | |||||
</view> | |||||
<view class="line"> | |||||
<view class="t min_tips"> | |||||
<view class=""> | |||||
实付款 | |||||
</view> | |||||
<view class="current-price"> | |||||
¥{{ msgOrder.money }} | |||||
</view> | |||||
</view> | |||||
<view class="min_tips"> | |||||
<view class=""> | |||||
租赁费用 | |||||
</view> | |||||
<view class=""> | |||||
¥{{ msgOrder.price }} | |||||
</view> | |||||
</view> | |||||
<view class="min_tips"> | |||||
<view class=""> | |||||
水洗费用 | |||||
</view> | |||||
<view class=""> | |||||
¥{{ msgOrder.price}} | |||||
</view> | |||||
</view> | |||||
<view class="min_tips"> | |||||
<view class=""> | |||||
押金 | |||||
</view> | |||||
<view class=""> | |||||
¥{{ msgOrder.price }} | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<!-- 订单信息 --> | |||||
<view class="line"> | |||||
<view class="t min_tips"> | |||||
<view class=""> | |||||
订单信息 | |||||
</view> | |||||
</view> | |||||
<view class="min_tips"> | |||||
<view class=""> | |||||
订单编号 | |||||
</view> | |||||
<view class=""> | |||||
{{msgOrder.id}} | |||||
</view> | |||||
</view> | |||||
<view class="min_tips"> | |||||
<view class=""> | |||||
下单时间 | |||||
</view> | |||||
<view class=""> | |||||
{{msgOrder.createTime}} | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<!-- 下单须知 --> | |||||
<view class="line"> | |||||
<view class="t min_tips"> | |||||
<view class=""> | |||||
下单须知 | |||||
</view> | |||||
</view> | |||||
<view class="min_tips" style="line-height: 40rpx;"> | |||||
{{msgShop.projectExplain}} | |||||
</view> | |||||
<view class="btns"> | |||||
<view @click="clickService" class="btn"> | |||||
联系客服 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import { mapGetters } from 'vuex' | |||||
export default { | |||||
computed : { | |||||
...mapGetters(['userShop']), | |||||
}, | |||||
data() { | |||||
return { | |||||
stepsCurrent : 0, | |||||
steps : [ | |||||
'接单', | |||||
'检查', | |||||
'开始清洗', | |||||
'服务完成', | |||||
], | |||||
msgShop : { | |||||
money : 99.99, | |||||
image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg', | |||||
projectExplain : '1.xxxxxxxxxx xxxxxxxxxx。2.xxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxxxxx。3.。', | |||||
}, | |||||
msgOrder : { | |||||
money : 99.99, | |||||
address : '广东省广州市越秀区城南故事C3栋2802', | |||||
name : '李**', | |||||
phone : '150*****091', | |||||
unit : '120*40*75【桌子尺寸】', | |||||
state_dictText : '已完成', | |||||
price : 199.99, | |||||
id : '020644568964457', | |||||
createTime : '2024-01-18 15:39', | |||||
projectName : '桌布租赁' | |||||
}, | |||||
} | |||||
}, | |||||
methods: { | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.order { | |||||
background: linear-gradient(#4899a6, #6fc6ad, #6fc6ad); | |||||
padding-bottom: 10px; | |||||
} | |||||
.controls{ | |||||
margin: 20rpx; | |||||
background-color: #fff; | |||||
height: 400rpx; | |||||
display: flex; | |||||
flex-direction: column; | |||||
width: 710rpx; | |||||
border-radius: 20rpx; | |||||
justify-content: center; | |||||
align-items: center; | |||||
.title{ | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
font-size: 40rpx; | |||||
image{ | |||||
width: 100rpx; | |||||
height: 100rpx; | |||||
margin-right: 20rpx; | |||||
} | |||||
} | |||||
.tips{ | |||||
font-size: 26rpx; | |||||
color: #FD5100; | |||||
margin-top: 10rpx; | |||||
} | |||||
.btns{ | |||||
margin-top: 50rpx; | |||||
display: flex; | |||||
view{ | |||||
margin: 0 20rpx; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
color: #fff; | |||||
background-color: $uni-color; | |||||
padding: 15rpx 40rpx; | |||||
border-radius: 40rpx; | |||||
} | |||||
.btn2{ | |||||
background-color: #FFFFFF; | |||||
border: 1px solid #A7A7A7; | |||||
color: #A7A7A7; | |||||
} | |||||
} | |||||
} | |||||
.steps{ | |||||
margin: 20rpx; | |||||
background-color: #fff; | |||||
display: flex; | |||||
flex-direction: column; | |||||
width: 710rpx; | |||||
border-radius: 20rpx; | |||||
padding: 70rpx 0; | |||||
/deep/ .uv-text__value{ | |||||
font-size: 22rpx !important; | |||||
} | |||||
} | |||||
.box { | |||||
padding: 20px; | |||||
.btns { | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
margin-top: 10px; | |||||
.btn { | |||||
color: #fff; | |||||
padding: 10rpx 50rpx; | |||||
background-color: #ffb300; | |||||
border-radius: 30rpx; | |||||
font-size: 25rpx; | |||||
margin-right: 10rpx; | |||||
} | |||||
.btc{ | |||||
background: #ccc; | |||||
} | |||||
} | |||||
} | |||||
.info { | |||||
margin: 10px; | |||||
padding: 20rpx; | |||||
background-color: #fff; | |||||
width: calc(100% - 40px); | |||||
border-radius: 10px; | |||||
.head-title { | |||||
font-family: PingFang SC, PingFang SC-Bold; | |||||
color: #2f2e2e; | |||||
line-height: 30rpx; | |||||
margin-left: 10rpx; | |||||
} | |||||
.server-item { | |||||
display: flex; | |||||
flex-wrap: wrap; | |||||
align-items: center; | |||||
justify-content: space-between; | |||||
background: white; | |||||
border-radius: 15rpx; | |||||
box-sizing: border-box; | |||||
margin: 20rpx 0rpx; | |||||
width: 100%; | |||||
.img-box { | |||||
width: 150rpx; | |||||
height: 150rpx; | |||||
border-radius: 10rpx; | |||||
overflow: hidden; | |||||
image { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
} | |||||
.server-info { | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: space-around; | |||||
width: calc(100% - 180rpx); | |||||
box-sizing: border-box; | |||||
padding: 10rpx 15rpx; | |||||
.server-title { | |||||
display: flex; | |||||
margin-bottom: 10rpx; | |||||
} | |||||
.coupon { | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
background: #F29E45; | |||||
color: white; | |||||
width: 120rpx; | |||||
height: 40rpx; | |||||
border-radius: 10rpx; | |||||
margin-left: 10rpx; | |||||
font-size: 22rpx; | |||||
} | |||||
.time-coupon, | |||||
.price { | |||||
display: flex; | |||||
flex-wrap: wrap; | |||||
align-items: center; | |||||
} | |||||
.time-coupon { | |||||
margin: 10rpx 0rpx; | |||||
font-size: 26rpx; | |||||
justify-content: space-between; | |||||
width: 100%; | |||||
.flex { | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
image { | |||||
width: 25rpx; | |||||
height: 25rpx; | |||||
} | |||||
.time { | |||||
color: #B8B8B8; | |||||
margin-left: 6rpx; | |||||
} | |||||
} | |||||
.sales-volume { | |||||
display: flex; | |||||
align-items: center; | |||||
color: #B8B8B8; | |||||
font-size: 24rpx; | |||||
image { | |||||
width: 25rpx; | |||||
height: 25rpx; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.address { | |||||
.address-top{ | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
image{ | |||||
width: 30rpx; | |||||
height: 30rpx; | |||||
} | |||||
} | |||||
.addressDetail { | |||||
color: #777; | |||||
font-size: 22rpx; | |||||
padding: 5px 0; | |||||
} | |||||
text { | |||||
background-color: #F29E45; | |||||
padding: 8rpx 10rpx; | |||||
color: #fff; | |||||
font-size: 20rpx; | |||||
margin-left: 10px; | |||||
border-radius: 5px; | |||||
} | |||||
} | |||||
.min_tips { | |||||
font-size: 22rpx; | |||||
color: #777; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 5px 0; | |||||
align-items: center; | |||||
} | |||||
.current-price { | |||||
font-size: 30rpx; | |||||
color: #FD5100; | |||||
} | |||||
.line { | |||||
border-top: 2px dotted #00000011; | |||||
padding: 20rpx 0; | |||||
.t { | |||||
padding: 5px 0; | |||||
color: #000; | |||||
font-size: 26rpx; | |||||
} | |||||
} | |||||
.head-div { | |||||
.nickname { | |||||
font-size: 30rpx; | |||||
font-weight: 600; | |||||
text-align: left; | |||||
line-height: 42rpx; | |||||
display: flex; | |||||
align-items: center; | |||||
.tag { | |||||
position: relative; | |||||
display: flex; | |||||
align-items: center; | |||||
image { | |||||
height: 45rpx; | |||||
width: 90rpx; | |||||
vertical-align: middle; | |||||
} | |||||
.auth { | |||||
position: absolute; | |||||
white-space: nowrap; | |||||
color: #FF6200; | |||||
left: 23rpx; | |||||
font-size: 17rpx; | |||||
} | |||||
} | |||||
} | |||||
.days { | |||||
font-size: 20rpx; | |||||
font-weight: 400; | |||||
text-align: left; | |||||
line-height: 56rpx; | |||||
display: flex; | |||||
align-items: center; | |||||
view { | |||||
padding-left: 5px; | |||||
} | |||||
} | |||||
} | |||||
.btn-x { | |||||
color: #6fc6ad; | |||||
border: 1px solid #6fc6ad; | |||||
padding: 10rpx 20rpx; | |||||
border-radius: 30rpx; | |||||
} | |||||
.btns { | |||||
display: flex; | |||||
justify-content: center; | |||||
.btn { | |||||
color: #6fc6ad; | |||||
border: 1px solid #6fc6ad; | |||||
padding: 10rpx 20rpx; | |||||
border-radius: 30rpx; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@ -1,169 +0,0 @@ | |||||
<template> | |||||
<view class="page"> | |||||
<navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" /> | |||||
<view class="swipe"> | |||||
<uv-swiper | |||||
:list="productDetail.image.split(',')" | |||||
indicator | |||||
height="350rpx"></uv-swiper> | |||||
</view> | |||||
<view class="info"> | |||||
<view class="title"> | |||||
桌布租赁 | |||||
</view> | |||||
<view class="info-line"> | |||||
<view class="price"> | |||||
¥<text>45.9</text>起 | |||||
</view> | |||||
<view class="num"> | |||||
已售1000+ | |||||
<image src="../static/product/like.png" mode=""></image> | |||||
</view> | |||||
</view> | |||||
<view class="tips"> | |||||
<view class="tip"> | |||||
专业设备 | |||||
</view> | |||||
<view class="tip"> | |||||
科学流程 | |||||
</view> | |||||
<view class="tip"> | |||||
质量保证 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="info-unit"> | |||||
<uv-cell title="是否有桌布" isLink> | |||||
<template #icon> | |||||
<text class="text">桌布</text> | |||||
</template> | |||||
</uv-cell> | |||||
<uv-cell title="请选择规格" isLink> | |||||
<template #icon> | |||||
<text class="text">规格</text> | |||||
</template> | |||||
</uv-cell> | |||||
<uv-cell> | |||||
<template #icon> | |||||
<text>上门取件·送货上门</text> | |||||
</template> | |||||
</uv-cell> | |||||
</view> | |||||
<view class="content"> | |||||
<view class="title"> | |||||
商品详情 | |||||
</view> | |||||
<uv-parse :content="productDetail.content"></uv-parse> | |||||
</view> | |||||
<!-- 分享和租赁按钮 --> | |||||
<submit | |||||
@submit="$refs.submitUnitSelect.open()" | |||||
@share="share"/> | |||||
<!-- 选择规格 --> | |||||
<submitUnitSelect ref="submitUnitSelect"/> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import submit from '../components/product/submit.vue' | |||||
import submitUnitSelect from '../components/product/submitUnitSelect.vue' | |||||
export default { | |||||
components : { | |||||
submit, | |||||
submitUnitSelect | |||||
}, | |||||
data() { | |||||
return { | |||||
productDetail : { | |||||
image : 'https://cdn.uviewui.com/uview/swiper/swiper3.png,https://cdn.uviewui.com/uview/swiper/swiper2.png', | |||||
content : '', | |||||
} | |||||
} | |||||
}, | |||||
onLoad(args) { | |||||
console.log(args); | |||||
}, | |||||
methods: { | |||||
// 分享商品 | |||||
share(){ | |||||
}, | |||||
// 选择完成规格立即租赁下单 | |||||
submit(){ | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.page{ | |||||
.swipe{ | |||||
} | |||||
.info{ | |||||
padding: 30rpx; | |||||
background-color: #fff; | |||||
.title{ | |||||
font-size: 34rpx; | |||||
font-weight: 900; | |||||
} | |||||
.info-line{ | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
margin-top: 30rpx; | |||||
.price{ | |||||
font-size: 28rpx; | |||||
color: $uni-color; | |||||
text{ | |||||
font-size: 34rpx; | |||||
} | |||||
} | |||||
.num{ | |||||
font-size: 24rpx; | |||||
image{ | |||||
width: 24rpx; | |||||
height: 24rpx; | |||||
} | |||||
} | |||||
} | |||||
.tips{ | |||||
display: flex; | |||||
font-size: 20rpx; | |||||
margin-top: 30rpx; | |||||
.tip{ | |||||
margin-right: 40rpx; | |||||
} | |||||
} | |||||
} | |||||
.info-unit{ | |||||
margin-top: 20rpx; | |||||
padding: 30rpx; | |||||
background-color: #fff; | |||||
/deep/ text{ | |||||
font-size: 26rpx; | |||||
} | |||||
/deep/ .text{ | |||||
color: #7C7C7C; | |||||
margin-right: 20rpx; | |||||
font-size: 26rpx; | |||||
} | |||||
} | |||||
.content{ | |||||
background-color: #fff; | |||||
margin-top: 20rpx; | |||||
.title{ | |||||
padding: 30rpx; | |||||
} | |||||
} | |||||
} | |||||
</style> |