28 changed files with 1972 additions and 170 deletions
Split View
Diff Options
-
+70 -0api/api.js
-
+4 -2components/base/addressSpot.vue
-
+7 -0components/base/tabbar.vue
-
+6 -6components/list/dynamic/daynamicInfo.vue
-
+59 -17components/user/productList.vue
-
+34 -0pages.json
-
+1 -1pages/index/activity.vue
-
+3 -2pages/index/center.vue
-
+32 -1pages/index/index.vue
-
+195 -0pages/index/product.vue
-
+1 -2pages_order/components/address/addressList.vue
-
+4 -3pages_order/components/address/redactAddress.vue
-
+3 -1pages_order/components/list/renting/rentingItem.vue
-
+43 -66pages_order/components/list/workList/workItem.vue
-
+35 -16pages_order/components/product/submit.vue
-
+56 -24pages_order/components/product/submitUnitSelect.vue
-
+1 -1pages_order/components/screen/screenRen.vue
-
+213 -0pages_order/mine/address.vue
-
+147 -0pages_order/mine/setting.vue
-
+223 -0pages_order/order/order.vue
-
+564 -0pages_order/order/orderDetail.vue
-
+240 -0pages_order/product/productDetail.vue
-
+4 -0pages_order/renting/rentingList.vue
-
+5 -5pages_order/scenicSpot/scenicSpotList.vue
-
+4 -21pages_order/work/workList.vue
-
+16 -0store/store.js
-
+1 -1uni.scss
-
+1 -1utils/position.js
+ 70
- 0
api/api.js
View File
+ 4
- 2
components/base/addressSpot.vue
View File
+ 7
- 0
components/base/tabbar.vue
View File
+ 6
- 6
components/list/dynamic/daynamicInfo.vue
View File
+ 59
- 17
components/user/productList.vue
View File
+ 34
- 0
pages.json
View File
+ 1
- 1
pages/index/activity.vue
View File
+ 3
- 2
pages/index/center.vue
View File
+ 32
- 1
pages/index/index.vue
View File
+ 195
- 0
pages/index/product.vue
View File
| @ -0,0 +1,195 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar title="商城"/> | |||
| <!-- <view> | |||
| <uv-swiper | |||
| :list="bannerList" | |||
| indicator | |||
| height="320rpx" | |||
| keyName="image"></uv-swiper> | |||
| </view> --> | |||
| <view class="swipe"> | |||
| <uv-swiper | |||
| :list="bannerList" | |||
| indicator | |||
| height="320rpx" | |||
| keyName="image"></uv-swiper> | |||
| </view> | |||
| <view class="productList"> | |||
| <productList :productList="list"/> | |||
| </view> | |||
| <!-- <view class="waterfall"> | |||
| <uv-waterfall ref="waterfall" v-model="list" | |||
| :add-time="10" | |||
| :left-gap="leftGap" | |||
| :right-gap="rightGap" | |||
| :column-gap="columnGap" | |||
| @changeList="changeList"> | |||
| <template v-slot:list1> | |||
| <view> | |||
| <view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" | |||
| @click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)"> | |||
| <view class="waterfall-item__image" :style="[imageStyle(item)]"> | |||
| <image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image> | |||
| </view> | |||
| <view class="waterfall-item__ft"> | |||
| <view class="waterfall-item__ft__title"> | |||
| <text class="title">{{item.name}}</text> | |||
| </view> | |||
| <view class="waterfall-item__ft__desc uv-line-2"> | |||
| <text class="price">现价{{item.price}}￥</text> | |||
| <text class="oldPrice">原价{{item.oldPrice}}￥</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <template v-slot:list2> | |||
| <view> | |||
| <view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" | |||
| @click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)"> | |||
| <view class="waterfall-item__image" :style="[imageStyle(item)]"> | |||
| <image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image> | |||
| </view> | |||
| <view class="waterfall-item__ft"> | |||
| <view class="waterfall-item__ft__title"> | |||
| <text class="title">{{item.name}}</text> | |||
| </view> | |||
| <view class="waterfall-item__ft__desc uv-line-2"> | |||
| <text class="price">现价{{item.price}}￥</text> | |||
| <text class="oldPrice">原价{{item.oldPrice}}￥</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| </uv-waterfall> | |||
| </view> --> | |||
| <tabber select="1" /> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import mixinsList from '@/mixins/list.js' | |||
| import tabber from '@/components/base/tabbar.vue' | |||
| import productList from '@/components/user/productList.vue' | |||
| export default { | |||
| mixins: [mixinsList], | |||
| components : { | |||
| tabber, | |||
| productList, | |||
| }, | |||
| computed: { | |||
| // imageStyle(item) { | |||
| // return item => { | |||
| // const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap; | |||
| // const w = v / 2; | |||
| // const rate = w / item.w; | |||
| // const h = rate * item.h; | |||
| // return { | |||
| // width: w + 'px', | |||
| // height: h + 'px' | |||
| // } | |||
| // } | |||
| // } | |||
| }, | |||
| data() { | |||
| return { | |||
| mixinsListApi: 'getShopPingPage', | |||
| // list1: [], // 瀑布流第一列数据 | |||
| // list2: [], // 瀑布流第二列数据 | |||
| // leftGap: 10, | |||
| // rightGap: 10, | |||
| // columnGap: 10, | |||
| bannerList : [], | |||
| } | |||
| }, | |||
| onShow() { | |||
| this.getBannerList() | |||
| }, | |||
| methods: { | |||
| // 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列 | |||
| // changeList(e) { | |||
| // this[e.name].push(e.value); | |||
| // }, | |||
| // 获取banner | |||
| getBannerList(){ | |||
| this.$api('getBannerList', res =>{ | |||
| if(res.code == 200){ | |||
| this.bannerList = res.result | |||
| } | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page{ | |||
| .swipe{ | |||
| overflow: hidden; | |||
| border-radius: 20rpx; | |||
| margin: 20rpx; | |||
| } | |||
| .productList{ | |||
| padding: 0 20rpx; | |||
| } | |||
| } | |||
| // $show-lines: 1; | |||
| // @import '@/uni_modules/uv-ui-tools/libs/css/variable.scss'; | |||
| // .waterfall-item { | |||
| // overflow: hidden; | |||
| // margin-top: 10px; | |||
| // border-radius: 6px; | |||
| // } | |||
| // .waterfall-item__ft { | |||
| // padding: 20rpx; | |||
| // background: #fff; | |||
| // &__title { | |||
| // margin-bottom: 10rpx; | |||
| // line-height: 48rpx; | |||
| // font-weight: 700; | |||
| // .value { | |||
| // font-size: 32rpx; | |||
| // color: #303133; | |||
| // } | |||
| // } | |||
| // &__desc .value { | |||
| // font-size: 28rpx; | |||
| // color: #606266; | |||
| // } | |||
| // &__btn { | |||
| // padding: 10px 0; | |||
| // } | |||
| // } | |||
| // .waterfall-item__ft__title{ | |||
| // font-size: 28rpx; | |||
| // } | |||
| // .price{ | |||
| // color: #f40; | |||
| // } | |||
| // .oldPrice{ | |||
| // color: #777; | |||
| // font-size: 22rpx; | |||
| // text-decoration: underline; | |||
| // } | |||
| </style> | |||
+ 1
- 2
pages_order/components/address/addressList.vue
View File
+ 4
- 3
pages_order/components/address/redactAddress.vue
View File
+ 3
- 1
pages_order/components/list/renting/rentingItem.vue
View File
+ 43
- 66
pages_order/components/list/workList/workItem.vue
View File
+ 35
- 16
pages_order/components/product/submit.vue
View File
+ 56
- 24
pages_order/components/product/submitUnitSelect.vue
View File
+ 1
- 1
pages_order/components/screen/screenRen.vue
View File
+ 213
- 0
pages_order/mine/address.vue
View File
| @ -0,0 +1,213 @@ | |||
| <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, | |||
| defaultFlag: addressDetail.defaultFlag || '0', | |||
| latitude: addressDetail.latitude, | |||
| longitude: addressDetail.longitude | |||
| } | |||
| if (addressDetail.id) { | |||
| data.id = addressDetail.id | |||
| } | |||
| this.$api('addOrEditAddress', 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(addressId) { | |||
| let self = this | |||
| uni.showModal({ | |||
| title: '删除地址', | |||
| content: '确认删除此地址?删除后数据不可恢复', | |||
| success(e) { | |||
| if(e.confirm){ | |||
| self.$api('deleteAddress', { | |||
| addressId | |||
| }, res => { | |||
| if (res.code == 200) { | |||
| uni.showToast({ | |||
| title: '删除成功', | |||
| icon: 'none' | |||
| }) | |||
| self.getAddressList() | |||
| } | |||
| }) | |||
| } | |||
| } | |||
| }) | |||
| }, | |||
| //点击新增按钮 | |||
| addBtn() { | |||
| this.title = '新增地址' | |||
| this.$refs.addressPopup.open({ //初始化数据 | |||
| name: '', | |||
| phone: '', | |||
| address: '', | |||
| addressDetail: '', | |||
| defaultFlag: '', | |||
| 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> | |||
+ 147
- 0
pages_order/mine/setting.vue
View File
| @ -0,0 +1,147 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar title="设置与管理" leftClick @leftClick="$utils.navigateBack" /> | |||
| <view class="frame"> | |||
| <view class="content"> | |||
| <view class="title">账号管理</view> | |||
| <uv-cell | |||
| icon="coupon" | |||
| title="地址管理" | |||
| isLink | |||
| @click="$utils.navigateTo('/pages_order/mine/address')" | |||
| iconStyle="font-size: 34rpx;" | |||
| rightIconStyle="font-size: 34rpx;"> | |||
| <template #icon> | |||
| <image src="../static/setting/1.png" mode="" | |||
| style="width: 30rpx;height: 30rpx;"></image> | |||
| </template> | |||
| </uv-cell> | |||
| <uv-cell | |||
| icon="coupon" | |||
| title="订单管理" | |||
| isLink | |||
| @click="$utils.navigateTo('/pages_order/order/order')" | |||
| iconStyle="font-size: 34rpx;" | |||
| rightIconStyle="font-size: 34rpx;"> | |||
| <template #icon> | |||
| <image src="../static/setting/1.png" mode="" | |||
| style="width: 30rpx;height: 30rpx;"></image> | |||
| </template> | |||
| </uv-cell> | |||
| <uv-cell | |||
| icon="coupon" | |||
| title="修改个人信息" | |||
| isLink | |||
| @click="$utils.navigateTo('/pages_order/auth/wxUserInfo?back=1')" | |||
| iconStyle="font-size: 34rpx;" | |||
| rightIconStyle="font-size: 34rpx;"> | |||
| <template #icon> | |||
| <image src="../static/setting/1.png" mode="" | |||
| style="width: 30rpx;height: 30rpx;"></image> | |||
| </template> | |||
| </uv-cell> | |||
| <uv-cell | |||
| icon="coupon" | |||
| title="退出登录" | |||
| isLink | |||
| @click="$store.commit('logout')" | |||
| iconStyle="font-size: 34rpx;" | |||
| rightIconStyle="font-size: 34rpx;"> | |||
| <template #icon> | |||
| <image src="../static/setting/1.png" mode="" | |||
| style="width: 30rpx;height: 30rpx;"></image> | |||
| </template> | |||
| </uv-cell> | |||
| </view> | |||
| <view class="content"> | |||
| <view class="title">系统设置</view> | |||
| <uv-cell | |||
| icon="coupon" | |||
| title="清理缓存" | |||
| isLink | |||
| @click="clearCache" | |||
| iconStyle="font-size: 34rpx;" | |||
| rightIconStyle="font-size: 34rpx;"> | |||
| <template #icon> | |||
| <image src="../static/setting/1.png" mode="" | |||
| style="width: 30rpx;height: 30rpx;"></image> | |||
| </template> | |||
| </uv-cell> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return { | |||
| } | |||
| }, | |||
| methods: { | |||
| tapItem(item, index) { | |||
| if (item.text === this.$t('pageTitle.languageSwitch')) { | |||
| this.$refs.changeLanguage.open(); | |||
| } | |||
| }, | |||
| // 清理缓存 | |||
| clearCache(){ | |||
| uni.showModal({ | |||
| title: '确认清理缓存吗？', | |||
| success(r) { | |||
| if(r.confirm){ | |||
| uni.showLoading() | |||
| setTimeout(() => { | |||
| uni.hideLoading() | |||
| uni.showToast({ | |||
| title: '缓存清理成功！', | |||
| icon: 'none' | |||
| }) | |||
| }, 800) | |||
| } | |||
| } | |||
| }) | |||
| }, | |||
| }, | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page { | |||
| background-color: #FFF; | |||
| height: 100vh; | |||
| .frame { | |||
| .content { | |||
| margin: 40rpx 0; | |||
| .title { | |||
| font-size: 30rpx; | |||
| color: #b0b0b0; | |||
| padding: 0 30rpx; | |||
| } | |||
| .uv-cell__body{ | |||
| padding: 40rpx 20rpx; | |||
| margin-top: 10rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 223
- 0
pages_order/order/order.vue
View File
| @ -0,0 +1,223 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar | |||
| title="订单中心" | |||
| leftClick @leftClick="$utils.navigateBack" | |||
| /> | |||
| <uv-tabs :list="tabs" | |||
| :activeStyle="{color : '#FD5100', fontWeight : 600}" | |||
| lineColor="#FD5100" | |||
| lineHeight="8rpx" | |||
| lineWidth="50rpx" | |||
| :scrollable="true" | |||
| @click="clickTabs"></uv-tabs> | |||
| <view class="list"> | |||
| <view class="item" | |||
| v-for="(item, index) in list" | |||
| @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> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import tabber from '@/components/base/tabbar.vue' | |||
| import mixinsList from '@/mixins/list.js' | |||
| export default { | |||
| mixins: [mixinsList], | |||
| components : { | |||
| tabber, | |||
| }, | |||
| computed : { | |||
| }, | |||
| data() { | |||
| return { | |||
| mixinsListApi: 'getOrderList', | |||
| tabs: [{ | |||
| name: '全部' | |||
| }, | |||
| { | |||
| name: '待支付' | |||
| }, | |||
| { | |||
| name: '待发货' | |||
| }, | |||
| { | |||
| name: '待收货' | |||
| }, | |||
| { | |||
| name: '已完成' | |||
| } | |||
| ], | |||
| state : -1, | |||
| } | |||
| }, | |||
| methods: { | |||
| //点击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> | |||
+ 564
- 0
pages_order/order/orderDetail.vue
View File
| @ -0,0 +1,564 @@ | |||
| <template> | |||
| <view> | |||
| <navbar | |||
| title="订单详情" | |||
| leftClick | |||
| @leftClick="$utils.navigateBack" | |||
| /> | |||
| <!-- 水洗店 --> | |||
| <view class=""> | |||
| <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> | |||
| export default { | |||
| computed : { | |||
| }, | |||
| 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> | |||
+ 240
- 0
pages_order/product/productDetail.vue
View File
| @ -0,0 +1,240 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" /> | |||
| <view class="swipe"> | |||
| <uv-swiper | |||
| :list="detail.image && detail.image.split(',')" | |||
| indicator | |||
| height="350rpx"></uv-swiper> | |||
| </view> | |||
| <view class="info"> | |||
| <view class="title"> | |||
| {{ detail.name }} | |||
| </view> | |||
| <view class="nameSub"> | |||
| {{ detail.nameSub }} | |||
| </view> | |||
| <view class="info-line"> | |||
| <view class="price"> | |||
| 现价￥<text> | |||
| {{ | |||
| detail.price | |||
| }} | |||
| </text> | |||
| </view> | |||
| <!-- <view class="num"> | |||
| 已售{{ detail.soldNum || 0 }}+ | |||
| <image src="../static/product/like.png" mode=""></image> | |||
| </view> --> | |||
| </view> | |||
| <view class="favorable" v-if="detail.points"> | |||
| <view class="t"> | |||
| 积分兑换 | |||
| </view> | |||
| <view class="p"> | |||
| {{ detail.points }} | |||
| </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> | |||
| <template #icon> | |||
| <text>上门取件·送货上门</text> | |||
| </template> | |||
| </uv-cell> | |||
| </view> | |||
| <view class="content"> | |||
| <view class="title"> | |||
| 商品详情 | |||
| </view> | |||
| <image | |||
| v-for="(item,index) in detail.imageDetails && detail.imageDetails.split(',')" | |||
| :src="item" | |||
| :key="index" | |||
| style="width: 100%;" | |||
| mode="widthFix"></image> | |||
| </view> | |||
| <!-- 分享和租赁按钮 --> | |||
| <submit | |||
| @submit="handleSubmit" | |||
| @share="share"/> | |||
| <!-- 选择规格 --> | |||
| <submitUnitSelect ref="submitUnitSelect" | |||
| v-if="detail.id" | |||
| :detail="detail"/> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import submit from '../components/product/submit.vue' | |||
| import submitUnitSelect from '../components/product/submitUnitSelect.vue' | |||
| export default { | |||
| components : { | |||
| submit, | |||
| submitUnitSelect, | |||
| }, | |||
| data() { | |||
| return { | |||
| detail : {}, | |||
| id : 0, | |||
| } | |||
| }, | |||
| onLoad(args) { | |||
| this.id = args.id | |||
| this.getData() | |||
| }, | |||
| // 微信小程序分享 | |||
| onShareAppMessage(res) { | |||
| return { | |||
| title: this.detail.name, | |||
| path: '/pages_order/product/productDetail?id=' + this.id | |||
| } | |||
| }, | |||
| onPullDownRefresh() { | |||
| this.getData() | |||
| }, | |||
| methods: { | |||
| // 分享商品 | |||
| share(){ | |||
| }, | |||
| // 选择完成规格立即租赁下单 | |||
| submit(){ | |||
| }, | |||
| handleSubmit(){ | |||
| this.$refs.submitUnitSelect.open() | |||
| // uni.showModal({ | |||
| // title: '您有自己的桌布吗？', | |||
| // cancelText: '我没有', | |||
| // confirmText: '我有', | |||
| // success(r) { | |||
| // if(r.confirm){ | |||
| // }else{ | |||
| // } | |||
| // } | |||
| // }) | |||
| }, | |||
| getData(){ | |||
| this.$api('getShopPingDetail', { | |||
| id : this.id | |||
| }, res => { | |||
| uni.stopPullDownRefresh() | |||
| if(res.code == 200){ | |||
| this.detail = res.result | |||
| } | |||
| }) | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page{ | |||
| padding-bottom: 100rpx; | |||
| .swipe{ | |||
| } | |||
| .info{ | |||
| padding: 30rpx; | |||
| background-color: #fff; | |||
| .title{ | |||
| font-size: 34rpx; | |||
| font-weight: 900; | |||
| } | |||
| .nameSub{ | |||
| font-size: 30rpx; | |||
| margin-top: 10rpx; | |||
| } | |||
| .info-line{ | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| margin-top: 20rpx; | |||
| .price{ | |||
| font-size: 28rpx; | |||
| color: $uni-price-color; | |||
| text{ | |||
| font-size: 34rpx; | |||
| } | |||
| } | |||
| .num{ | |||
| font-size: 24rpx; | |||
| image{ | |||
| width: 24rpx; | |||
| height: 24rpx; | |||
| } | |||
| } | |||
| } | |||
| .favorable{ | |||
| display: flex; | |||
| // background-image: url(/static/image/product/favorable.png); | |||
| background-size: 100% 100%; | |||
| width: fit-content; | |||
| font-size: 22rpx; | |||
| margin-top: 6rpx; | |||
| border-radius: 10rpx; | |||
| overflow: hidden; | |||
| background-color: #ff000011; | |||
| .t{ | |||
| padding: 5rpx 10rpx; | |||
| } | |||
| .p{ | |||
| padding: 5rpx 10rpx; | |||
| color: #fff; | |||
| background-color: #F03F25; | |||
| height: 100%; | |||
| } | |||
| } | |||
| .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> | |||