@ -0,0 +1,53 @@ | |||||
// 文字益处处理 | |||||
.text-ellipsis{ | |||||
overflow:hidden; //超出的文本隐藏 | |||||
text-overflow:ellipsis; //溢出用省略号显示 | |||||
white-space:nowrap; //溢出不换行 | |||||
} | |||||
.text-ellipsis-2{ | |||||
overflow: hidden; | |||||
text-overflow: ellipsis; | |||||
display:-webkit-box; //作为弹性伸缩盒子模型显示。 | |||||
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 | |||||
-webkit-line-clamp:2; //显示的行 | |||||
} | |||||
.text-ellipsis-3{ | |||||
overflow: hidden; | |||||
text-overflow: ellipsis; | |||||
display:-webkit-box; //作为弹性伸缩盒子模型显示。 | |||||
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 | |||||
-webkit-line-clamp:3; //显示的行 | |||||
} | |||||
.share{ | |||||
padding: 0; | |||||
margin: 0; | |||||
background-color: #fff; | |||||
display: flex !important; | |||||
flex-direction: column !important; | |||||
justify-content: center !important; | |||||
align-items: center !important; | |||||
font-size: 26rpx; | |||||
} | |||||
.share::after{ | |||||
border: none; | |||||
padding: 0; | |||||
margin: 0; | |||||
width: 0; | |||||
height: 0; | |||||
} | |||||
.tag-list{ | |||||
display: flex; | |||||
flex-wrap: wrap; | |||||
} | |||||
.tag-list > view{ | |||||
margin: 10rpx; | |||||
padding: 10rpx; | |||||
background-color: #EFF2F1; | |||||
font-size: 24rpx; | |||||
border-radius: 10rpx; | |||||
} |
@ -1,81 +0,0 @@ | |||||
<template> | |||||
<view @click="$emit('confirm')" :style="{ | |||||
position: 'fixed', | |||||
display: 'flex', | |||||
justifyContent: 'center', | |||||
alignItems: 'center', | |||||
width: '100vw', | |||||
bottom: bottom | |||||
}"> | |||||
<button :style="{ | |||||
color: color, | |||||
backgroundColor: backgroundColor, | |||||
fontSize: fontSize, | |||||
width: width, | |||||
height: height, | |||||
borderRadius: borderRadius | |||||
}"> | |||||
{{ text }} | |||||
</button> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
props: { | |||||
color: { | |||||
default: '#000000' // 设置默认颜色值 | |||||
}, | |||||
backgroundColor: { | |||||
default: '#FFFFFF' // 设置默认背景颜色 | |||||
}, | |||||
fontSize: { | |||||
default: '36rpx' // 设置默认字体大小 | |||||
}, | |||||
text: { | |||||
default: '按钮' // 设置默认文本内容 | |||||
}, | |||||
width: { | |||||
default: '150rpx' // 设置默认宽度 | |||||
}, | |||||
height: { | |||||
default: '60rpx' // 设置默认高度 | |||||
}, | |||||
borderRadius: { | |||||
default: '40rpx' // 设置默认高度 | |||||
}, | |||||
bottom: { | |||||
default: '40rpx' // 设置默认距离底部高度 | |||||
}, | |||||
}, | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
methods: { | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="less"> | |||||
// .container { | |||||
// position: fixed; | |||||
// display: flex; | |||||
// justify-content: center; | |||||
// /* 水平居中 */ | |||||
// align-items: center; | |||||
// /* 垂直居中 */ | |||||
// width: 100%; | |||||
// /* 使容器宽度覆盖整个屏幕 */ | |||||
// } | |||||
button { | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
</style> |
@ -0,0 +1,53 @@ | |||||
<template> | |||||
<uv-swipe-action> | |||||
<view | |||||
v-for="(item, index) in list" | |||||
:key="index" | |||||
> | |||||
<view style="margin-top: 20rpx;"></view> | |||||
<uv-swipe-action-item | |||||
@click="e => clickSwipeAction(e, item)" | |||||
:options="options"> | |||||
<workItem/> | |||||
</uv-swipe-action-item> | |||||
</view> | |||||
</uv-swipe-action> | |||||
</template> | |||||
<script> | |||||
import workItem from './workItem.vue' | |||||
export default { | |||||
components : { | |||||
workItem | |||||
}, | |||||
props : { | |||||
options : { | |||||
default : [ | |||||
{ | |||||
text: '删除', | |||||
style: { | |||||
backgroundColor: '#FA5A0A' | |||||
} | |||||
}, | |||||
], | |||||
}, | |||||
list : { | |||||
default : [] | |||||
}, | |||||
}, | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
methods: { | |||||
clickSwipeAction(e, item){ | |||||
this.$emit('clickSwipeAction', {e, item}) | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
</style> |
@ -1,93 +0,0 @@ | |||||
<template> | |||||
<view style=""> | |||||
<view v-for="item in commodityList" :key="item.title" class="address-item"> | |||||
<view class="itme1" @click="selectSp(item)"> | |||||
<view class="left"> | |||||
<img src="../../../static/image/center/1.png" alt="" style="width: 100%;height: 100%;"> | |||||
</view> | |||||
<view class="center"> | |||||
<view>{{ item.title }}</view> | |||||
<view>{{ item.smallTitle }}</view> | |||||
</view> | |||||
<view class="right">×{{item.total}}</view> | |||||
</view> | |||||
<uv-line></uv-line> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
props: { | |||||
commodityList: { | |||||
default: [], | |||||
type: Array, | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
selectAddress: 0, | |||||
} | |||||
}, | |||||
methods: { | |||||
// 打开商品选择 | |||||
openCommodity() { | |||||
this.$emit('openSpPopup') | |||||
}, | |||||
// 选择了商品 | |||||
selectSp(e) { | |||||
console.log(this.commodityList,"this.csss") | |||||
console.log(e, '选择了商品') | |||||
this.$emit('selectSp', e) | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.itme1 { | |||||
display: flex; | |||||
height: 150rpx; | |||||
width: 100vw; | |||||
background-color: #ffffff; | |||||
.left { | |||||
padding: 40rpx; | |||||
width: 20%; | |||||
border-radius: 10rpx; | |||||
background-color: #ffffff; | |||||
} | |||||
.center { | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
gap: 20rpx; | |||||
width: 70%; | |||||
padding: 0rpx 0 0 20rpx; | |||||
background-color: #ffffff; | |||||
// 给第一个 view 设置样式 | |||||
> view:first-of-type { | |||||
font-size: 36rpx; | |||||
color: #333; | |||||
} | |||||
// 给第二个 view 设置样式 | |||||
> view:nth-of-type(2) { | |||||
font-size: 28rpx; | |||||
color: #666666; | |||||
} | |||||
} | |||||
.right { | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
width: 10%; | |||||
color: #666666; | |||||
background-color: #ffffff; | |||||
} | |||||
} | |||||
</style> |
@ -0,0 +1,47 @@ | |||||
<template> | |||||
<view class="const"> | |||||
<view class="title"> | |||||
{{ title }} | |||||
</view> | |||||
<view class="num"> | |||||
{{ num }} | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
props : { | |||||
title : { | |||||
default : '您当前的找活' | |||||
}, | |||||
num : { | |||||
default : 0 | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
methods: { | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.const{ | |||||
padding: 30rpx; | |||||
background: $uni-color; | |||||
color: #fff; | |||||
font-weight: 900; | |||||
.title{ | |||||
font-size: 34rpx; | |||||
} | |||||
.num{ | |||||
padding: 20rpx 0; | |||||
font-size: 38rpx; | |||||
} | |||||
} | |||||
</style> |
@ -0,0 +1,51 @@ | |||||
<template> | |||||
<view class="page"> | |||||
<navbar title="我的收藏" | |||||
bgColor="#3796F8" | |||||
leftClick | |||||
color="#fff" | |||||
@leftClick="$utils.navigateBack"/> | |||||
<workListSwipe | |||||
:options="options" | |||||
@clickSwipeAction="clickSwipeAction" | |||||
:list="10"/> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import workListSwipe from '@/components/list/workList/workListSwipe.vue' | |||||
import mixinList from '@/mixins/list.js' | |||||
export default { | |||||
mixins : [mixinList], | |||||
components : { | |||||
workListSwipe | |||||
}, | |||||
data() { | |||||
return { | |||||
options: [ | |||||
{ | |||||
text: '删除', | |||||
style: { | |||||
backgroundColor: '#FA5A0A' | |||||
} | |||||
}, | |||||
], | |||||
} | |||||
}, | |||||
methods: { | |||||
clickSwipeAction({e, item}){ | |||||
console.log(e, item); | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.page{ | |||||
/deep/ .uv-swipe-action{ | |||||
width: 100%; | |||||
} | |||||
} | |||||
</style> |
@ -0,0 +1,23 @@ | |||||
<template> | |||||
<!-- 联系记录 --> | |||||
<view class="page"> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
methods: { | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
</style> |
@ -0,0 +1,62 @@ | |||||
<template> | |||||
<!-- 我发布的招工 --> | |||||
<view class="page"> | |||||
<navbar title="我的找活" | |||||
bgColor="#3796F8" | |||||
leftClick | |||||
color="#fff" | |||||
@leftClick="$utils.navigateBack"/> | |||||
<statisticsNumber/> | |||||
<workListSwipe | |||||
:options="options" | |||||
@clickSwipeAction="clickSwipeAction" | |||||
:list="10"/> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import workListSwipe from '@/components/list/workList/workListSwipe.vue' | |||||
import statisticsNumber from '../components/statistics/statisticsNumber.vue' | |||||
import mixinList from '@/mixins/list.js' | |||||
export default { | |||||
mixins : [mixinList], | |||||
components : { | |||||
workListSwipe, | |||||
statisticsNumber | |||||
}, | |||||
data() { | |||||
return { | |||||
options: [ | |||||
{ | |||||
text: '修改', | |||||
style: { | |||||
backgroundColor: '#ffa12c' | |||||
} | |||||
}, | |||||
{ | |||||
text: '删除', | |||||
style: { | |||||
backgroundColor: '#FA5A0A' | |||||
} | |||||
}, | |||||
], | |||||
} | |||||
}, | |||||
methods: { | |||||
clickSwipeAction({e, item}){ | |||||
console.log(e, item); | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.page{ | |||||
/deep/ .uv-swipe-action{ | |||||
width: 100%; | |||||
} | |||||
} | |||||
</style> |
@ -1,366 +0,0 @@ | |||||
<template> | |||||
<view class="refundsOrExchange"> | |||||
<navbar :title="title[titleIndex]" leftClick @leftClick="$utils.navigateBack"/> | |||||
<view class="frame"> | |||||
<!-- 商品简介 --> | |||||
<view class="itme1" @click="openSpPopup"> | |||||
<view class="left"> | |||||
<img src="../../static/image/center/1.png" alt="" style="width: 100%;height: 100%;"> | |||||
</view> | |||||
<view class="center"> | |||||
<view>{{ commodity.title }}</view> | |||||
<view>{{ commodity.smallTitle }}</view> | |||||
</view> | |||||
<view class="right">×{{ commodity.total }}</view> | |||||
</view> | |||||
<!--<commoditySelect ></commoditySelect>--> | |||||
<!-- 申请类型&申请原因 --> | |||||
<view class="item2"> | |||||
<view class="type"> | |||||
<span>申请类型</span> | |||||
<span>退货退款</span> | |||||
</view> | |||||
<uv-line></uv-line> | |||||
<view class="reason"> | |||||
<view>申请原因</view> | |||||
<view> | |||||
<uv-input placeholder="请输入申请原因" border="none" clearable></uv-input> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<!-- 退货数量&申请金额--> | |||||
<view class="item3"> | |||||
<view class="type"> | |||||
<span>{{ titleIndex == 0 ? '退货数量' : '换货数量' }}</span> | |||||
<span> | |||||
<uv-number-box :min="1" :max="100"></uv-number-box> | |||||
</span> | |||||
</view> | |||||
<uv-line v-if='titleIndex == 0 ? true :false'></uv-line> | |||||
<view class="reason" v-if='titleIndex == 0 ? true :false'> | |||||
<view>申请原因</view> | |||||
<view> | |||||
<uv-input disabled placeholder="$" border="none" clearable></uv-input> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<!-- 申请说明 --> | |||||
<view class="item4"> | |||||
<view>申请说明(选填)</view> | |||||
<view> | |||||
<uv-input placeholder="请您详细填写申请说明" border="none" clearable></uv-input> | |||||
</view> | |||||
<view> | |||||
<uv-upload :fileList="fileList" :maxCount="5" multiple width="150rpx" height="150rpx" | |||||
@delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload> | |||||
</view> | |||||
</view> | |||||
<!-- 联系电话 --> | |||||
<view class="item5"> | |||||
<view class="phone"> | |||||
<view>联系电话</view> | |||||
<view> | |||||
<uv-input placeholder="请输入联系电话" border="none" clearable></uv-input> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<!-- 底部按钮 --> | |||||
<bottomBtn @confirm='confirm()' :color='bottomBtnStyle.color' :backgroundColor='bottomBtnStyle.backgroundColor' | |||||
:fontSize='bottomBtnStyle.fontSize' :text='bottomBtnStyle.text' :width="bottomBtnStyle.width" | |||||
:height="bottomBtnStyle.height" :borderRadius='bottomBtnStyle.borderRadius' | |||||
:bottom='bottomBtnStyle.bottom' | |||||
> | |||||
</bottomBtn> | |||||
<!--商品选择--> | |||||
<uv-popup ref="spPopup" :round="30"> | |||||
<commoditySelect | |||||
:commodityList="commodityList" | |||||
@selectSp="selectCommodity" | |||||
/> | |||||
</uv-popup> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import bottomBtn from "../../components/bottom/bottomBtn.vue" | |||||
import commoditySelect from "../components/commodity/commoditySelect.vue" | |||||
export default { | |||||
onLoad(option) { | |||||
this.titleIndex = option.index | |||||
}, | |||||
components: { | |||||
bottomBtn, commoditySelect | |||||
}, | |||||
data() { | |||||
return { | |||||
titleIndex: 0, | |||||
title: ['申请换货', '申请退货'], | |||||
fileList: [], | |||||
bottomBtnStyle: { | |||||
color: '#FFF', | |||||
backgroundColor: '#fd5100', | |||||
fontSize: '34rpx', | |||||
text: '提交申请', | |||||
width: '400rpx', | |||||
height: '80rpx', | |||||
borderRadius: '100rpx', | |||||
bottom: '40rpx' | |||||
}, | |||||
commodityList: [ | |||||
{ | |||||
title: '商品名称', | |||||
smallTitle: '产品规格:120*4*75【桌子尺寸】', | |||||
total:1, | |||||
}, | |||||
{ | |||||
title: '商品名称1', | |||||
smallTitle: '产品规格:120*4*75【桌子尺寸】', | |||||
total:1, | |||||
}, | |||||
{ | |||||
title: '商品名称2', | |||||
smallTitle: '产品规格:120*4*75【桌子尺寸】', | |||||
total:1, | |||||
} | |||||
], | |||||
commodity: { | |||||
title: '商品名称', | |||||
smallTitle: '产品规格:120*4*75【桌子尺寸】', | |||||
total:1, | |||||
}, | |||||
} | |||||
}, | |||||
mounted() { | |||||
}, | |||||
methods: { | |||||
openSpPopup() { | |||||
this.$refs.spPopup.open('bottom'); | |||||
}, | |||||
// 选择退换货商品回调 | |||||
selectCommodity(e) { | |||||
console.log(e, "selectCommodity--e") | |||||
this.commodity = e | |||||
this.$refs.spPopup.close() | |||||
}, | |||||
confirm() { | |||||
console.log("==="); | |||||
}, | |||||
deleteImage(e) { | |||||
this.fileList.splice(e.index, 1) | |||||
}, | |||||
afterRead(e) { | |||||
let self = this | |||||
e.file.forEach(file => { | |||||
self.$Oss.ossUpload(file.url).then(url => { | |||||
self.fileList.push({ | |||||
url | |||||
}) | |||||
}) | |||||
}) | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
* { | |||||
box-sizing: border-box; | |||||
} | |||||
.refundsOrExchange { | |||||
.frame { | |||||
display: flex; | |||||
flex-direction: column; | |||||
gap: 30rpx; | |||||
width: 100%; | |||||
padding-top: 40rpx; | |||||
background-color: #f5f5f5; | |||||
.itme1 { | |||||
display: flex; | |||||
height: 200rpx; | |||||
background-color: #ffffff; | |||||
.left { | |||||
padding: 40rpx; | |||||
width: 20%; | |||||
border-radius: 10rpx; | |||||
background-color: #ffffff; | |||||
} | |||||
.center { | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: center; | |||||
gap: 20rpx; | |||||
width: 60%; | |||||
padding: 0rpx 0 0 20rpx; | |||||
background-color: #ffffff; | |||||
// 给第一个 view 设置样式 | |||||
> view:first-of-type { | |||||
font-size: 36rpx; | |||||
color: #333; | |||||
} | |||||
// 给第二个 view 设置样式 | |||||
> view:nth-of-type(2) { | |||||
font-size: 28rpx; | |||||
color: #666666; | |||||
} | |||||
} | |||||
.right { | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
width: 10%; | |||||
color: #666666; | |||||
background-color: #ffffff; | |||||
} | |||||
} | |||||
.item2 { | |||||
width: 100vw; | |||||
.type { | |||||
display: flex; | |||||
align-items: center; | |||||
background-color: #FFF; | |||||
height: 80rpx; | |||||
padding: 0 0 0 20rpx; | |||||
> span:nth-of-type(1) { | |||||
width: 30%; | |||||
} | |||||
> span:nth-of-type(2) { | |||||
width: 70%; | |||||
} | |||||
} | |||||
.reason { | |||||
display: flex; | |||||
align-items: center; | |||||
background-color: #FFF; | |||||
height: 80rpx; | |||||
// margin: 10rpx 0 0 0; | |||||
padding: 10rpx 0 0 20rpx; | |||||
> view:nth-of-type(1) { | |||||
width: 30%; | |||||
} | |||||
> view:nth-of-type(2) { | |||||
width: 70%; | |||||
padding: 0 20rpx 0 0; | |||||
} | |||||
} | |||||
} | |||||
.item3 { | |||||
width: 100vw; | |||||
.type { | |||||
display: flex; | |||||
align-items: center; | |||||
background-color: #FFF; | |||||
height: 80rpx; | |||||
padding: 0 0 0 20rpx; | |||||
> span:nth-of-type(1) { | |||||
width: 70%; | |||||
} | |||||
> span:nth-of-type(2) { | |||||
width: 30%; | |||||
} | |||||
} | |||||
.reason { | |||||
display: flex; | |||||
align-items: center; | |||||
background-color: #FFF; | |||||
height: 80rpx; | |||||
// margin: 10rpx 0 0 0; | |||||
padding: 10rpx 0 0 20rpx; | |||||
> view:nth-of-type(1) { | |||||
width: 30%; | |||||
} | |||||
> view:nth-of-type(2) { | |||||
width: 70%; | |||||
padding: 0 20rpx 0 0; | |||||
} | |||||
} | |||||
} | |||||
.item4 { | |||||
display: flex; | |||||
flex-direction: column; | |||||
padding: 10rpx 0 0 20rpx; | |||||
background-color: #FFF; | |||||
> view:nth-of-type(1) { | |||||
background-color: #FFF; | |||||
} | |||||
> view:nth-of-type(2) { | |||||
margin: 10rpx 0 10rpx 0; | |||||
background-color: #FFF; | |||||
} | |||||
} | |||||
.item5 { | |||||
display: flex; | |||||
flex-direction: column; | |||||
padding: 0 0 0 20rpx; | |||||
background-color: #FFF; | |||||
.phone { | |||||
display: flex; | |||||
align-items: center; | |||||
background-color: #FFF; | |||||
height: 80rpx; | |||||
// margin: 10rpx 0 0 0; | |||||
padding: 10rpx 0 0 20rpx; | |||||
> view:nth-of-type(1) { | |||||
width: 30%; | |||||
} | |||||
> view:nth-of-type(2) { | |||||
width: 70%; | |||||
padding: 0 20rpx 0 0; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
</style> |