| @ -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> | |||||
| @ -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> | |||||
| @ -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> | |||||
| @ -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> | |||||
| @ -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> | |||||
| @ -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> | |||||