@ -0,0 +1,40 @@ | |||
// 文字益处处理 | |||
.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; | |||
} |
@ -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> |
@ -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> |
@ -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> |
@ -1,22 +1,343 @@ | |||
<template> | |||
<view> | |||
<view class="publishPost"> | |||
<navbar | |||
leftClick | |||
@leftClick="$utils.navigateBack" | |||
title="发布动态"/> | |||
<view class="title-input box"> | |||
<input type="text" placeholder="添加标题" v-model="form.title"/> | |||
</view> | |||
<view class="content-input"> | |||
<uv-textarea | |||
v-model="form.content" | |||
:maxlength="200" | |||
autoHeight | |||
count | |||
placeholder="添加正文"></uv-textarea> | |||
</view> | |||
<view class="images box"> | |||
<uv-upload | |||
:fileList="fileList" | |||
:maxCount="4" | |||
multiple | |||
width="150rpx" | |||
height="150rpx" | |||
@delete="deleteImage" | |||
@afterRead="afterRead" | |||
:previewFullImage="true"></uv-upload> | |||
</view> | |||
<!-- <view class="upTop" | |||
> | |||
<view class="title"> | |||
<uv-icon name="pushpin-fill"></uv-icon> | |||
是否置顶 | |||
</view> | |||
<uv-radio-group v-model="form.topId"> | |||
<view class="list"> | |||
<view class="item"> | |||
<view class="left"> | |||
不需要置顶 | |||
</view> | |||
<view class="right"> | |||
<uv-radio | |||
size="35rpx" | |||
icon-size="35rpx" | |||
:disabled="!!id" | |||
:name="0"> | |||
</uv-radio> | |||
</view> | |||
</view> | |||
<view class="item" | |||
v-for="(item, index) in upTopList" | |||
:key="index"> | |||
<view class="left"> | |||
置顶{{ item.day }}天{{ item.money }}元 | |||
</view> | |||
<view class="right"> | |||
<uv-radio | |||
size="35rpx" | |||
:disabled="!!id" | |||
icon-size="35rpx" | |||
:name="item.id"> | |||
</uv-radio> | |||
</view> | |||
</view> | |||
</view> | |||
</uv-radio-group> | |||
</view> --> | |||
<view class="configBtn" | |||
@click="$refs.configPopup.open('getPublishPostNotice')"> | |||
《发布须知》 | |||
</view> | |||
<!-- <submit | |||
@submit="submit" | |||
@preview="preview" | |||
@draft="draft" | |||
:submitTitle="id ? '修改帖子' : '发布帖子'" | |||
/> --> | |||
<configPopup | |||
ref="configPopup" | |||
/> | |||
</view> | |||
</template> | |||
<script> | |||
// import submit from '@/components/content/submit.vue' | |||
export default { | |||
components : { | |||
// submit, | |||
}, | |||
data() { | |||
return { | |||
} | |||
upTopList : [], | |||
form : { | |||
// image : [], | |||
content : '', | |||
topId : 0, | |||
title : '', | |||
}, | |||
fileList: [ | |||
// { | |||
// url: 'https://cdn.uviewui.com/uview/swiper/2.jpg' | |||
// }, | |||
], | |||
id : 0, | |||
}; | |||
}, | |||
computed : { | |||
topInfo(){ | |||
for (var i = 0; i < this.upTopList.length; i++) { | |||
if(this.upTopList[i].id == this.form.topId){ | |||
return this.upTopList[i] | |||
} | |||
} | |||
return {} | |||
}, | |||
}, | |||
onLoad(args) { | |||
this.id = args.id | |||
}, | |||
onShow() { | |||
this.indexTopPayList() | |||
this.getDateil() | |||
}, | |||
methods: { | |||
methods : { | |||
getDateil(){ | |||
if(!this.id){ | |||
return | |||
} | |||
let self = this | |||
this.$api('indexGetTrendsDetail', { | |||
id : this.id | |||
}, res => { | |||
if (res.code == 200) { | |||
res.result.details.image.split(',') | |||
.forEach(url => { | |||
self.fileList.push({ | |||
url | |||
}) | |||
}) | |||
res.result.details.topId = res.result.details.topId || 0 | |||
this.form = res.result.details | |||
} | |||
}) | |||
}, | |||
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 | |||
}) | |||
}) | |||
}) | |||
}, | |||
indexTopPayList(){ | |||
this.$api('indexTopPayList', res => { | |||
if(res.code == 200){ | |||
this.upTopList = res.result | |||
} | |||
}) | |||
}, | |||
// 发起支付 | |||
payOrder(){ | |||
let self = this | |||
let data = { | |||
// ...this.form, | |||
content : this.form.content, | |||
topId : this.form.topId, | |||
title : this.form.title, | |||
isCard : 'Y', | |||
state : 0, | |||
image : this.fileList.map((item) => item.url).join(","), | |||
isTop : this.form.topId ? 'Y' : 'N', | |||
} | |||
if(this.id){ | |||
data.id = this.id | |||
} | |||
this.$api('infoReleaseTrends', data, | |||
res => { | |||
if(res.code == 200){ | |||
if(self.form.topId && !this.id){ | |||
uni.requestPayment({ | |||
provider: 'wxpay', // 服务提提供商 | |||
timeStamp: res.result.timeStamp, // 时间戳 | |||
nonceStr: res.result.nonceStr, // 随机字符串 | |||
package: res.result.packageValue, | |||
signType: res.result.signType, // 签名算法 | |||
paySign: res.result.paySign, // 签名 | |||
success: function (res) { | |||
console.log('支付成功',res); | |||
self.$refs.confirmationPopupUpload.open() | |||
// self.$refs.confirmationPopup.close() | |||
}, | |||
fail: function (err) { | |||
console.log('支付失败',err); | |||
self.$refs.confirmationPopup.close() | |||
uni.showToast({ | |||
icon:'none', | |||
title:"支付失败" | |||
}) | |||
} | |||
}); | |||
}else{ | |||
self.$refs.confirmationPopupUpload.open() | |||
} | |||
} | |||
}) | |||
}, | |||
// 提交 | |||
submit(){ | |||
if(this.fileList.length == 0){ | |||
return uni.showToast({ | |||
title: '请上传图片', | |||
icon : 'none' | |||
}) | |||
} | |||
if (this.$utils.verificationAll(this.form, { | |||
title: '请输入标题', | |||
content: '请输入正文', | |||
})) { | |||
return | |||
} | |||
if(this.form.topId && !this.id){ | |||
// 选择付费模式 | |||
this.$refs.confirmationPopup.open() | |||
}else{ | |||
// 没有选择付费 | |||
this.payOrder() | |||
} | |||
}, | |||
preview(){}, | |||
draft(){}, | |||
} | |||
} | |||
</script> | |||
<style> | |||
<style lang="scss" scoped> | |||
.publishPost{ | |||
background-color: #fff; | |||
min-height: 100vh; | |||
font-size: 28rpx; | |||
padding-bottom: 150rpx; | |||
/deep/ .uv-textarea{ | |||
background-color: transparent; | |||
border: none; | |||
} | |||
/deep/ .uv-textarea__count{ | |||
background-color: transparent !important; | |||
} | |||
.box{ | |||
padding: 0 20rpx; | |||
} | |||
.images{ | |||
display: flex; | |||
flex-wrap: wrap; | |||
padding: 20rpx; | |||
} | |||
.title-input{ | |||
border-bottom: 1px solid #00000015; | |||
padding-bottom: 25rpx; | |||
margin-bottom: 15rpx; | |||
} | |||
.content-input{ | |||
min-height: 400rpx; | |||
} | |||
.upTop{ | |||
.title{ | |||
padding-top: 20rpx; | |||
padding-left: 20rpx; | |||
border-top: 1px solid #00000015; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.list{ | |||
padding-top: 30rpx; | |||
width: 100%; | |||
.item{ | |||
display: flex; | |||
padding: 20rpx; | |||
padding-left: 80rpx; | |||
justify-content: space-between; | |||
width: 600rpx; | |||
border-bottom: 1px solid #00000015; | |||
align-items: center; | |||
} | |||
} | |||
} | |||
.configBtn{ | |||
padding: 20rpx; | |||
color: #777; | |||
padding-top: 40rpx; | |||
font-size: 28rpx; | |||
} | |||
.confirmationPopup{ | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
width: 100%; | |||
height: 300rpx; | |||
image{ | |||
margin-top: 40rpx; | |||
} | |||
.info{ | |||
margin-top: 40rpx; | |||
font-size: 26rpx; | |||
} | |||
} | |||
} | |||
</style> |