hly
/
hotel-tablecloth-uniapp-24-08-29
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

上传

master
前端-胡立永 1 year ago
parent
e222a2df4a
commit
1c6a4fd3f6
11 changed files with 803 additions and 116 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      components/user/productList.vue
  2. +3
    -0
      pages.json
  3. +2
    -1
      pages/index/category.vue
  4. +3
    -0
      pages/index/center.vue
  5. +199
    -0
      pages_order/components/address/addressList.vue
  6. +77
    -0
      pages_order/components/product/submit.vue
  7. +248
    -0
      pages_order/components/product/submitUnitSelect.vue
  8. +119
    -114
      pages_order/mine/address.vue
  9. +150
    -0
      pages_order/product/productDetail.vue
  10. BIN
      pages_order/static/product/like.png
  11. +1
    -1
      store/store.js

+ 1
- 0
components/user/productList.vue View File

@ -2,6 +2,7 @@
<view class="list">
<view class="item"
v-for="(item, index) in 10"
@click="$utils.navigateTo('/pages_order/product/productDetail?id=123')"
:key="index">
<image
class="image"


+ 3
- 0
pages.json View File

@ -56,6 +56,9 @@
},
{
"path": "mine/address"
},
{
"path": "product/productDetail"
}
]
}


+ 2
- 1
pages/index/category.vue View File

@ -14,7 +14,8 @@
租赁
</view>
<view class="list">
<view class="item" v-for="(item,index) in list" :key="index">
<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"


+ 3
- 0
pages/index/center.vue View File

@ -183,6 +183,9 @@
</script>
<style scoped lang="scss">
.page{
padding-bottom: 200rpx;
}
image{
width: 100%;
height: 100%;


+ 199
- 0
pages_order/components/address/addressList.vue View File

@ -0,0 +1,199 @@
<template>
<uv-radio-group v-model="selectAddress">
<view v-for="item in addressList" :key="item.id" class="address-item">
<view class="address-item-top"
@click="select(item)">
<view class="img-box">
<image src="../../static/address/icon.png" mode="aspectFill"></image>
</view>
<view class="address-info">
<view class="user-info">
<text class="user-name">{{ item.name }}</text>
<text class="user-phone">{{ item.phone }}</text>
<text v-if="item.defaultId == '1'" class="is-default">默认</text>
</view>
<view class="address-detail">
{{ item.address + " " + item.addressDetail }}
</view>
</view>
</view>
<view class="controls"
v-if="controls">
<view class="default-checkbox">
<uv-radio @click="editDefault(item)"
:name="item.id"
label-disabled
size="30rpx"
icon-size="30rpx">
默认地址
</uv-radio>
</view>
<view class="edit-btn">
<uv-icon name="edit-pen"></uv-icon>
<text @click="editAddress(item.id)" class="control-title">编辑</text>
</view>
<view class="del-btn">
<uv-icon name="trash"></uv-icon>
<text class="control-title" @click="deleteAddress(item.id)">删除</text>
</view>
</view>
</view>
</uv-radio-group>
</template>
<script>
export default {
props : {
controls : {
default : false,
type : Boolean,
},
addressList : {
default : [],
type : Array,
}
},
data() {
return {
selectAddress : 0,
}
},
methods: {
// 删除地址
deleteAddress(e){
this.$emit('deleteAddress', e)
},
// 修改地址
editAddress(e){
this.$emit('editAddress', e)
},
// 切换默认地址
editDefault(e){
this.$emit('editDefault', e)
},
// 选择了地址
select(e){
this.$emit('select', e)
}
}
}
</script>
<style scoped lang="scss">
.address-item {
background: white;
border-radius: 20rpx;
overflow: hidden;
margin-bottom: 20rpx;
padding: 15rpx 15rpx 0rpx 15rpx;
width: 680rpx;
.address-item-top {
border-bottom: 1px dashed #D3D1D1;
display: flex;
align-items: center;
padding: 0rpx 0rpx 15rpx 0rpx;
.img-box {
width: 120rpx;
height: 120rpx;
image {
width: 75%;
height: 75%;
display: block;
margin: 12.5% auto;
}
}
.address-info {
width: calc(100% - 120rpx);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.user-info {
display: flex;
align-items: center;
text {
display: block;
line-height: 40rpx;
margin-right: 20rpx;
}
.user-name,
.user-phone {
font-size: 30rpx;
}
.is-default {
display: flex;
align-items: center;
justify-content: center;
background: #FEB773;
color: white;
width: 80rpx;
height: 35rpx;
border-radius: 20rpx;
font-size: 22rpx;
}
}
.address-detail {
color: #4a4a4a;
font-size: 26rpx;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
}
}
.controls {
display: flex;
align-items: center;
justify-content: space-between;
align-items: center;
font-size: 26rpx;
padding: 15rpx 15rpx 25rpx 15rpx;
.default-checkbox {
display: flex;
text {
margin-left: 8rpx;
}
}
.control-title {
height: 30rpx;
line-height: 30rpx;
color: #666666;
}
view {
display: flex;
align-items: center;
}
image {
width: 23rpx;
height: 23rpx;
vertical-align: middle;
margin-right: 8rpx;
}
}
}
</style>

+ 77
- 0
pages_order/components/product/submit.vue View File

@ -0,0 +1,77 @@
<template>
<view class="submit">
<view class=""
@click="$emit('share')">
<uv-icon
size="40rpx"
name="share-square"></uv-icon>
<view class="">
分享
</view>
</view>
<view class=""
@click="$utils.navigateTo('/index/cart')">
<uv-icon
size="40rpx"
name="shopping-cart"></uv-icon>
<view class="">
购物车
</view>
</view>
<view class="btn"
@click="$emit('submit')">
{{ submiitTitle }}
</view>
</view>
</template>
<script>
export default {
name:"submit",
props : {
submiitTitle : {
default : '立即租赁',
type : String,
}
},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.submit{
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
background-color: #fff;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
.btn{
background: $uni-color;
width: 600rpx;
height: 80rpx;
color: #fff;
border-radius: 40rpx;
font-size: 28rpx;
}
view{
width: 100rpx;
margin: 0 10rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
</style>

+ 248
- 0
pages_order/components/product/submitUnitSelect.vue View File

@ -0,0 +1,248 @@
<template>
<uv-popup ref="popup"
:round="30"
bgColor="#f7f7f7">
<view class="content">
<!-- 地址 -->
<view class="address"
@click="openAddress">
<image src="../../static/address/selectIcon.png" mode=""></image>
<view class="">
{{ address.name }}
</view>
<view class="">
{{ address.addressDetail }}
</view>
<view class="icon">
<uv-icon
size="30rpx"
name="arrow-right"></uv-icon>
</view>
</view>
<!-- 商品信息和数量 -->
<view class="submit-info">
<view class="title">
桌布租赁
</view>
<view class="box">
<image
class="image"
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg"
mode=""></image>
<view class="info">
<view class="price">
￥<text>299</text>元
</view>
<view class="unit">
请选择规格
</view>
<view class="">
<uv-number-box v-model="num"></uv-number-box>
</view>
</view>
</view>
</view>
<!-- 规格 -->
<view class="submit-unit">
<view class="title">
规格选择
</view>
<view class="list">
<view :class="{act : unitIndex == index}"
v-for="(item, index) in 10"
@click="selectUnit(item, index)"
:key="index">
120*40*75【桌子尺寸】
</view>
</view>
</view>
</view>
<!-- 费用明细 -->
<view class="">
</view>
<!-- 提交按钮 -->
<view class="">
</view>
<uv-popup ref="addressPopup" :round="30">
<addressList
:addressList="addressList"
@select="selectAddress"
/>
</uv-popup>
</uv-popup>
</template>
<script>
import addressList from '../address/addressList.vue'
export default {
components : {
addressList
},
data() {
return {
unitIndex : 0,
addressList: [
{
id : 1,
name : 'xx',
phone : '1305xxxx802',
address : '广东省广州市越秀区',
addressDetail : '城南故事C3栋2802',
},
{
id : 2,
name : 'xx',
phone : '1305xxxx802',
address : '广东省广州市越秀区',
addressDetail : '城南故事C3栋2802',
},
{
id : 3,
name : 'xx',
phone : '1305xxxx802',
address : '广东省广州市越秀区',
addressDetail : '城南故事C3栋2802',
},
],
address : {
name : '请选择联系人',
addressDetail : '',
},
num : 1,
unit : {},
}
},
methods: {
// 打开
open(){
this.$refs.popup.open('bottom')
},
// 关闭
close(){
this.$refs.popup.close()
},
// 打开选择地址
openAddress(){
if (!this.addressList.length) {
return uni.navigateTo({
url: '/pages_order/mine/address'
})
}
this.$refs.addressPopup.open('bottom')
},
// 选择地址
selectAddress(e){
this.address = e
this.$refs.addressPopup.close()
},
// 选择规格
selectUnit(item, index){
this.unit = item
this.unitIndex = index
},
}
}
</script>
<style scoped lang="scss">
.content{
max-height: 80vh;
overflow: hidden;
overflow-y: auto;
.address{
display: flex;
padding: 20rpx;
background-color: #fff;
image{
width: 30rpx;
height: 30rpx;
margin: 20rpx;
}
view{
margin: 20rpx;
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
}
.icon{
margin-left: auto;
}
}
.submit-info{
background-color: #fff;
padding: 30rpx;
margin-top: 20rpx;
.title{
font-size: 30rpx;
padding: 10rpx;
font-weight: 600;
}
.box{
display: flex;
margin-top: 10rpx;
.image{
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
margin-right: 20rpx;
}
.info{
flex: 1;
.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;
}
}
}
}
}
.submit-unit{
padding: 30rpx;
background-color: #fff;
.title{
font-size: 28rpx;
font-weight: 600;
}
.list{
display: flex;
flex-wrap: wrap;
font-size: 22rpx;
.act{
color: $uni-color;
border: 1px solid $uni-color;
background-color: #F9E7DE;
}
view{
border-radius: 15rpx;
width: 320rpx;
background-color: #F3F3F3;
border: 1px solid #F3F3F3;
margin: 10rpx;
display: flex;
justify-content: center;
padding: 15rpx 0;
}
}
}
}
</style>

+ 119
- 114
pages_order/mine/address.vue View File

@ -4,7 +4,7 @@
<navbar title="地址管理" leftClick @leftClick="leftClick" />
<view v-if="addressList.length > 0" class="address-list">
<uv-radio-group v-model="selectAddress">
<!-- <uv-radio-group v-model="selectAddress">
<view v-for="item in addressList" :key="item.id" class="address-item">
<view class="address-item-top">
@ -39,19 +39,23 @@
<view class="edit-btn">
<uv-icon name="edit-pen"></uv-icon>
<!-- <image src="@/static/address/edit-icon.png" mode="aspectFill"></image> -->
<text @click="getAddressDetail(item.id)" class="control-title">编辑</text>
</view>
<view class="del-btn">
<uv-icon name="trash"></uv-icon>
<!-- <image src="@/static/address/delete-icon.png" mode="aspectFill"></image> -->
<text class="control-title" @click="deleteAddress(item.id)">删除</text>
</view>
</view>
</view>
</uv-radio-group>
</uv-radio-group> -->
<addressList
controls
@deleteAddress="deleteAddress"
@editAddress="getAddressDetail"
@editDefault="addDefault"
:addressList="addressList"/>
</view>
<view
@ -81,12 +85,13 @@
<script>
import redactAddress from '../components/address/redactAddress.vue'
import addressList from '../components/address/addressList.vue'
import Position from '@/utils/position.js'
export default {
components: {
redactAddress
redactAddress,
addressList
},
data() {
return {
@ -351,114 +356,114 @@
.address-list {
padding: 40rpx 20rpx 120rpx 20rpx;
.address-item {
background: white;
border-radius: 20rpx;
overflow: hidden;
margin-bottom: 20rpx;
padding: 15rpx 15rpx 0rpx 15rpx;
width: 680rpx;
.address-item-top {
border-bottom: 1px dashed #D3D1D1;
display: flex;
align-items: center;
padding: 0rpx 0rpx 15rpx 0rpx;
.img-box {
width: 120rpx;
height: 120rpx;
image {
width: 75%;
height: 75%;
display: block;
margin: 12.5% auto;
}
}
.address-info {
width: calc(100% - 120rpx);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.user-info {
display: flex;
align-items: center;
text {
display: block;
line-height: 40rpx;
margin-right: 20rpx;
}
.user-name,
.user-phone {
font-size: 30rpx;
}
.is-default {
display: flex;
align-items: center;
justify-content: center;
background: #FEB773;
color: white;
width: 80rpx;
height: 35rpx;
border-radius: 20rpx;
font-size: 22rpx;
}
}
.address-detail {
color: #4a4a4a;
font-size: 26rpx;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
}
}
.controls {
display: flex;
align-items: center;
justify-content: space-between;
align-items: center;
font-size: 26rpx;
padding: 15rpx 15rpx 25rpx 15rpx;
.default-checkbox {
display: flex;
text {
margin-left: 8rpx;
}
}
.control-title {
height: 30rpx;
line-height: 30rpx;
color: #666666;
}
view {
display: flex;
align-items: center;
}
image {
width: 23rpx;
height: 23rpx;
vertical-align: middle;
margin-right: 8rpx;
}
}
}
// .address-item {
// background: white;
// border-radius: 20rpx;
// overflow: hidden;
// margin-bottom: 20rpx;
// padding: 15rpx 15rpx 0rpx 15rpx;
// width: 680rpx;
// .address-item-top {
// border-bottom: 1px dashed #D3D1D1;
// display: flex;
// align-items: center;
// padding: 0rpx 0rpx 15rpx 0rpx;
// .img-box {
// width: 120rpx;
// height: 120rpx;
// image {
// width: 75%;
// height: 75%;
// display: block;
// margin: 12.5% auto;
// }
// }
// .address-info {
// width: calc(100% - 120rpx);
// height: 100%;
// display: flex;
// flex-direction: column;
// justify-content: space-between;
// .user-info {
// display: flex;
// align-items: center;
// text {
// display: block;
// line-height: 40rpx;
// margin-right: 20rpx;
// }
// .user-name,
// .user-phone {
// font-size: 30rpx;
// }
// .is-default {
// display: flex;
// align-items: center;
// justify-content: center;
// background: #FEB773;
// color: white;
// width: 80rpx;
// height: 35rpx;
// border-radius: 20rpx;
// font-size: 22rpx;
// }
// }
// .address-detail {
// color: #4a4a4a;
// font-size: 26rpx;
// overflow: hidden;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 2;
// text-overflow: ellipsis;
// }
// }
// }
// .controls {
// display: flex;
// align-items: center;
// justify-content: space-between;
// align-items: center;
// font-size: 26rpx;
// padding: 15rpx 15rpx 25rpx 15rpx;
// .default-checkbox {
// display: flex;
// text {
// margin-left: 8rpx;
// }
// }
// .control-title {
// height: 30rpx;
// line-height: 30rpx;
// color: #666666;
// }
// view {
// display: flex;
// align-items: center;
// }
// image {
// width: 23rpx;
// height: 23rpx;
// vertical-align: middle;
// margin-right: 8rpx;
// }
// }
// }
}
.add-btn {


+ 150
- 0
pages_order/product/productDetail.vue View File

@ -0,0 +1,150 @@
<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>
<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;
}
}
}
}
.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>

BIN
pages_order/static/product/like.png View File

Before After
Width: 25  |  Height: 22  |  Size: 1.1 KiB

+ 1
- 1
store/store.js View File

@ -9,7 +9,7 @@ import api from '@/api/api.js'
const store = new Vuex.Store({
state: {
configList: [], //配置列表
shop : true
shop : false
},
getters: {
// 角色 true为水洗店 false为酒店


Write Preview
Loading…
Cancel
Save