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
前端-胡立永 8 months ago
parent
aff4a1c0b6
commit
743d4ef158
12 changed files with 726 additions and 507 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +68
    -11
      api/api.js
  2. +1
    -1
      api/http.js
  3. +1
    -1
      components/user/productList.vue
  4. +3
    -0
      pages.json
  5. +53
    -25
      pages/index/cart.vue
  6. +4
    -4
      pages/index/center.vue
  7. +12
    -7
      pages/index/order.vue
  8. +137
    -81
      pages_order/components/commodity/commoditySelect.vue
  9. +37
    -2
      pages_order/components/product/submitUnitSelect.vue
  10. +29
    -0
      pages_order/mine/lease.vue
  11. +41
    -19
      pages_order/order/orderDetail.vue
  12. +340
    -356
      pages_order/order/refundsOrExchange.vue

+ 68
- 11
api/api.js View File

@ -1,5 +1,8 @@
import http from './http.js'
let limit = {}
let debounce = {}
const config = {
// 示例
// wxLogin : {url : '/api/wxLogin', method : 'POST',
@ -31,6 +34,7 @@ const config = {
method: 'GET',
showLoading : true,
},
// 商品列表
goodsPage: {
@ -44,6 +48,36 @@ const config = {
method: 'GET',
showLoading : true,
},
// 购物车分页
cartPage: {
url: '/goods/shopping/cart/page',
method: 'GET',
showLoading : true,
auth : true,
},
// 加入购物车
cartAdd: {
url: '/goods/join/shopping/cart',
method: 'POST',
showLoading : true,
auth : true,
},
// 删除购物车
cartDel: {
url: '/goods/shopping/cart/delete',
method: 'POST',
showLoading : true,
auth : true,
},
// 修改购物车数量
cartNum: {
url: '/goods/shopping/cart/add/or/delete',
method: 'POST',
auth : true,
debounce : 1000,
},
//分类列表
categoryList: {
@ -57,21 +91,21 @@ const config = {
url: '/address/add',
method: 'POST',
limit: 500,
// auth : true,
auth : true,
showLoading : true,
},
//修改默认地址
addressDefault: {
url: '/address/default',
method: 'POST',
// auth : true,
auth : true,
showLoading : true,
},
//删除地址
addressDelete: {
url: '/address/delete',
method: 'POST',
// auth : true,
auth : true,
showLoading : true,
},
//修改地址
@ -79,14 +113,14 @@ const config = {
url: '/address/edit',
method: 'POST',
limit: 500,
// auth : true,
auth : true,
showLoading : true,
},
//分页查询地址
addressPage: {
url: '/address/page',
method: 'GET',
// auth : true,
auth : true,
showLoading : true,
},
@ -95,14 +129,14 @@ const config = {
orderPage: {
url: '/order/page',
method: 'GET',
// auth : true,
auth : true,
showLoading : true,
},
//查询订单详情
orderOne: {
url: '/order/one',
method: 'GET',
// auth : true,
auth : true,
showLoading : true,
},
@ -146,12 +180,12 @@ export function api(key, data, callback, loadingTitle) {
// 接口限流
if (req.limit) {
let storageKey = 'limit:' + req.url
let storage = uni.getStorageSync(storageKey)
if (storage && new Date().getTime() - parseInt(storage) < req.limit) {
let storageKey = req.url
let storage = limit[storageKey]
if (storage && new Date().getTime() - storage < req.limit) {
return
}
uni.setStorageSync(storageKey, new Date().getTime())
limit[storageKey] = new Date().getTime()
}
//必须登录
@ -164,6 +198,29 @@ export function api(key, data, callback, loadingTitle) {
return
}
}
// 接口防抖
if(req.debounce){
let storageKey = req.url
let storage = debounce[storageKey]
if (storage) {
clearTimeout(storage)
}
debounce[storageKey] = setTimeout(() => {
clearTimeout(storage)
delete debounce[storageKey]
http.http(req.url, data, callback, req.method,
loadingTitle || req.showLoading, loadingTitle || req.loadingTitle)
}, req.debounce)
return
}
http.http(req.url, data, callback, req.method,
loadingTitle || req.showLoading, loadingTitle || req.loadingTitle)


+ 1
- 1
api/http.js View File

@ -43,7 +43,7 @@ function http(uri, data, callback, method = 'GET', showLoading, title) {
});
}
callback(res.data)
callback && callback(res.data)
},
fail: () => {


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

@ -6,7 +6,7 @@
:key="index">
<image
class="image"
:src="item.pic" mode="aspectFill"></image>
:src="item.pic || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'" mode="aspectFill"></image>
<view class="info">
<view class="title">
{{ item.name }}


+ 3
- 0
pages.json View File

@ -64,6 +64,9 @@
},
{
"path": "auth/loginAndRegisterAndForgetPassword"
},
{
"path": "mine/lease"
}
]
}],


+ 53
- 25
pages/index/cart.vue View File

@ -9,11 +9,12 @@
<uv-swipe-action>
<view
v-for="(item, index) in list"
v-for="(item, index) in list.records"
:key="index">
<view style="margin-top: 20rpx;"></view>
<uv-swipe-action-item
:options="options">
:options="options"
@click="delCart(item, index)">
<view class="item">
<view class="checkbox">
<uv-checkbox
@ -26,21 +27,21 @@
<image
class="image"
src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg"
:src="item.pic || 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg'"
mode=""></image>
<view class="info">
<view class="title">
<view class="">
{{ item.title }}
{{ item.name }}
</view>
<view class="">
<uv-number-box v-model="item.num"
@change="valChange"></uv-number-box>
@change="e => valChange(item, e)"></uv-number-box>
</view>
</view>
<view class="unit">
规格：{{ item.unit }}
规格：{{ item.title }}
<uv-icon name="arrow-down"></uv-icon>
</view>
<view class="price">
@ -97,24 +98,13 @@
style: {
backgroundColor: '#FA5A0A'
}
},
],
list : [
{
id : 1,
title : '桌布租赁',
num : 1,
price : 299,
unit : '120*40*75【桌子尺寸】',
},
{
id : 2,
title : '桌布租赁',
num : 1,
price : 299,
unit : '120*40*75【桌子尺寸】',
},
],
queryParams: {
pageNo: 1,
pageSize: 10
},
list : [],
}
},
computed: {
@ -123,7 +113,7 @@
return 0
}
let price = 0
this.list.forEach(n => {
this.list.records.forEach(n => {
if(this.checkboxValue.includes(n.id)){
price += n.price * n.num
}
@ -131,9 +121,44 @@
return price
},
},
onShow() {
this.getData()
},
//滚动到屏幕底部
onReachBottom() {
if(this.queryParams.pageSize < this.list.total){
this.queryParams.pageSize += 10
this.getData()
}
},
methods: {
valChange(){
valChange(item, e){
console.log(e.value);
this.$api('cartNum', {
id : item.id,
num : e.value,
})
},
// 购物车分页
getData(){
this.$api('cartPage', this.queryParams, res => {
if(res.code == 200){
this.list = res.result
}
})
},
// 删除购物车
delCart(item, index){
this.$api('cartDel', {
id : item.id
}, res => {
if(res.code == 200){
this.getData()
uni.showToast({
title: '删除成功',
});
}
})
},
}
}
@ -141,6 +166,9 @@
<style scoped lang="scss">
.page {
/deep/ .uv-swipe-action{
width: 100%;
}
}
.user {


+ 4
- 4
pages/index/center.vue View File

@ -9,14 +9,14 @@
</view>
<view class="info">
<view class="name">
倾心.
微信用户
</view>
<!-- <view class="vip">
VIP1
</view> -->
<view class="tips">
<!-- <view class="tips">
今天是您来的的第32天
</view>
</view> -->
</view>
<view class="headBtn" @click="headBtn">
角色切换
@ -101,7 +101,7 @@
<text class="grid-text">联系客服</text>
</uv-grid-item>
<uv-grid-item>
<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/lease')">
<image class="image" src="/static/image/center/6.png" mode=""></image>
<text class="grid-text">我的租赁</text>
</uv-grid-item>


+ 12
- 7
pages/index/order.vue View File

@ -20,8 +20,7 @@
<view class="top">
<view class="service">
<text>{{item.projectId_dictText}}</text>
<text>{{item.type_dictText}}</text>
<text>{{item.goodsName}}</text>
</view>
<view class="status">
<text> {{item.state_dictText}}</text>
@ -54,22 +53,28 @@
<view class="bottom">
<view class="pay">
<!-- 水洗店不展示 -->
<view class="price"
v-if="!userShop && item.type != 1">
v-if="!userShop && item.type != 0 && item.type != 1">
总金额：<text class="num">{{ item.orderPay }}元</text>
</view>
<view
v-if="item.type == 1">
水洗费用：{{ item.rentPay }}元
v-if="item.washPay">
水洗费用：{{ item.washPay }}元
</view>
<!-- 水洗店不展示 -->
<view
v-if="!userShop && item.type == 1">
v-if="!userShop && item.rentPay">
租赁费用：{{ item.rentPay }}元
</view>
</view>
<view class="">
<!-- 水洗店不展示 -->
<view class="price"
v-if="!userShop && item.type == 1">
v-if="!userShop && item.type != 0 && item.type == 1">
总金额：<text class="num">{{ item.orderPay }}元</text>
</view>
<view class="b1">


+ 137
- 81
pages_order/components/commodity/commoditySelect.vue View File

@ -1,93 +1,149 @@
<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>
<scroll-view scroll-y="true" :style="{height: height}" @scrolltolower="more">
<view v-if="commodityList.length">
<view v-for="(item, index) in commodityList" :key="index" class="address-item">
<view class="itme1" @click="selectSp(item)">
<view class="left">
<image src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode="aspectFill"/>
</view>
<view class="center">
<view>{{ item.title }}</view>
<view>{{ item.smallTitle }}</view>
<view>起租时间：2024.03.02</view>
</view>
<view class="right">×{{item.total}}</view>
</view>
<uv-line></uv-line>
</view>
</view>
<view style="padding: 100rpx 0;" v-else>
<uv-empty mode="history" textSize="28rpx" iconSize="100rpx" />
</view>
</scroll-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)
}
}
}
export default {
props: {
height: {
default: 'calc(90vh - 180rpx)'
}
},
data() {
return {
total: 0,
commodityList: [
{
title: '商品名称',
smallTitle: '产品规格：120*4*75【桌子尺寸】',
total: 1,
},
{
title: '商品名称1',
smallTitle: '产品规格：120*4*75【桌子尺寸】',
total: 1,
},
{
title: '商品名称2',
smallTitle: '产品规格：120*4*75【桌子尺寸】',
total: 1,
}
],
queryParams: {
pageNo: 1,
pageSize: 10,
},
}
},
methods: {
// 选择了商品
selectSp(e) {
this.$emit('selectSp', e)
},
//获取地址列表
getList() {
return new Promise((success, fail) => {
this.$api('addressPage', this.queryParams, res => {
if (res.code == 200) {
this.commodityList = res.result.records || [];
this.total = res.result.total || 0;
this.commodityList.forEach(n => { //筛选默认地址
if (n.defaultFlag == 1) {
this.selectAddress = n.id
}
})
success(res.result)
}
})
})
},
// 加载更多
more(){
if(this.queryParams.pageSize > this.total){
return
}
this.queryParams.pageSize += 10
this.getList()
},
}
}
</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;
}
.itme1 {
display: flex;
width: 100vw;
background-color: #ffffff;
.center {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20rpx;
width: 70%;
padding: 0rpx 0 0 20rpx;
background-color: #ffffff;
.left {
padding: 20rpx;
width: 150rpx;
height: 150rpx;
border-radius: 20rpx;
background-color: #ffffff;
flex-shrink: 0;
image{
width: 100%;
height: 100%;
border-radius: 20rpx;
}
}
// 给第一个 view 设置样式
> view:first-of-type {
font-size: 36rpx;
color: #333;
}
.center {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20rpx;
width: 60%;
padding: 0rpx 0 0 20rpx;
background-color: #ffffff;
// 给第二个 view 设置样式
> view:nth-of-type(2) {
font-size: 28rpx;
color: #666666;
}
}
// 给第一个 view 设置样式
>view:first-of-type {
font-size: 34rpx;
color: #333;
}
.right {
display: flex;
justify-content: center;
align-items: center;
width: 10%;
color: #666666;
background-color: #ffffff;
}
}
// 给第二个 view 设置样式
>view:nth-of-type(2) {
font-size: 26rpx;
color: #666666;
}
// 给第二个 view 设置样式
>view:nth-of-type(3) {
font-size: 26rpx;
color: #666666;
}
}
</style>
.right {
display: flex;
justify-content: center;
align-items: center;
width: 10%;
color: #666666;
background-color: #ffffff;
}
}
</style>

+ 37
- 2
pages_order/components/product/submitUnitSelect.vue View File

@ -75,7 +75,13 @@
<!-- 提交按钮 -->
<view class="submit-btn">
{{ submiitTitle }}
<view class="l"
@click="addCart">
加入租赁车
</view>
<view class="r">
{{ submiitTitle }}
</view>
</view>
</view>
@ -150,6 +156,19 @@
this.unit = item
this.unitIndex = index
},
addCart(){
this.$api('cartAdd', {
id : this.detail.id,
skuId : this.unit.id,
}, res => {
if(res.code == 200){
uni.showToast({
title: '添加成功',
});
this.$refs.popup.close()
}
})
},
}
}
</script>
@ -260,7 +279,6 @@
}
}
.submit-btn{
background: $uni-color;
width: 600rpx;
height: 80rpx;
color: #fff;
@ -270,6 +288,23 @@
display: flex;
justify-content: center;
align-items: center;
border: 1rpx solid $uni-color;
overflow: hidden;
.l{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
color: $uni-color;
}
.r{
background: $uni-color;
flex: 1;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
}
</style>

+ 29
- 0
pages_order/mine/lease.vue View File

@ -0,0 +1,29 @@
<template>
<view class="page">
<navbar title="我的租赁" leftClick @leftClick="$utils.navigateBack" />
<commoditySelect/>
</view>
</template>
<script>
import commoditySelect from "../components/commodity/commoditySelect.vue"
export default {
components : {
commoditySelect,
},
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
.page{
}
</style>

+ 41
- 19
pages_order/order/orderDetail.vue View File

@ -50,22 +50,22 @@
<view class="server-item">
<view class="img-box">
<image :src="msgShop.image" mode="aspectFill"></image>
<image :src="order.pic" mode="aspectFill"></image>
</view>
<view class="server-info">
<view class="server-title">
{{msgOrder.projectName}}
{{order.title}}
<!-- <view class="coupon">领券立减</view> -->
</view>
<view class="current-price">
<text class="unit">￥</text>{{msgOrder.money}}
<text class="unit">￥</text>{{order.orderPay}}
</view>
<view class="sales-volume" style="margin-top: 5px;">
<view class="desc">规格：{{msgOrder.unit}}</view>
<view class="desc">规格：{{order.unit}}</view>
</view>
<view class="time-coupon">
@ -120,49 +120,57 @@
服务地址
</view> -->
<view class="copy">
<image @click="copy(msgOrder.name + ' ' + msgOrder.phone + ' ' + msgOrder.address)" src="/static/order/copy.png"></image>
<image @click="copy(order.userName + ' ' + order.userPhone + ' ' + order.userAddress)" src="/static/order/copy.png"></image>
</view>
</view>
<view class="addressDetail">
<view class="">{{msgOrder.name}} {{msgOrder.phone}}</view>
<view class="">{{msgOrder.address}}</view>
<view class="">{{order.userName}} {{order.userPhone}}</view>
<view class="">{{order.userAddress}}</view>
</view>
</view>
<view class="line">
<view class="t min_tips">
<!-- 水洗店不展示 -->
<view class="t min_tips"
v-if="!userShop && item.orderPay">
<view class="">
实付款
</view>
<view class="current-price">
￥{{ msgOrder.money }}
￥{{ order.orderPay }}
</view>
</view>
<view class="min_tips">
<!-- 水洗店不展示 -->
<view class="min_tips"
v-if="!userShop && item.rentPay">
<view class="">
租赁费用
</view>
<view class="">
￥{{ msgOrder.price }}
￥{{ order.rentPay }}
</view>
</view>
<view class="min_tips">
<view class="min_tips"
v-if="item.washPay">
<view class="">
水洗费用
</view>
<view class="">
￥{{ msgOrder.price}}
￥{{ order.washPay}}
</view>
</view>
<view class="min_tips">
<!-- <view class="min_tips">
<view class="">
押金
</view>
<view class="">
￥{{ msgOrder.price }}
￥{{ order.price }}
</view>
</view>
</view> -->
</view>
<!-- 订单信息 -->
@ -177,7 +185,7 @@
订单编号
</view>
<view class="">
{{msgOrder.id}}
{{order.id}}
</view>
</view>
<view class="min_tips">
@ -185,7 +193,7 @@
下单时间
</view>
<view class="">
{{msgOrder.createTime}}
{{order.createTime}}
</view>
</view>
</view>
@ -244,10 +252,24 @@
createTime : '2024-01-18 15:39',
projectName : '桌布租赁'
},
order : {},
orderId : 0,
}
},
onLoad(agrs) {
this.orderId = agrs.id
this.getData()
},
methods: {
getData(){
this.$api('orderOne', {
id : this.orderId
}, res => {
if(res.code == 200){
this.order = res.result
}
})
},
}
}
</script>


+ 340
- 356
pages_order/order/refundsOrExchange.vue View File

@ -1,366 +1,350 @@
<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>
<view class="refundsOrExchange">
<navbar :title="title[titleIndex]" leftClick @leftClick="$utils.navigateBack" />
<view class="frame">
<!-- 商品简介 -->
<view class="itme1" @click="openSpPopup">
<view class="left">
<image src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode="aspectFill"/>
</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>
</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 height="60vh" @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
})
})
})
},
}
}
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'
},
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;
}
}
}
}
}
* {
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: 20rpx;
width: 150rpx;
height: 150rpx;
border-radius: 20rpx;
background-color: #ffffff;
flex-shrink: 0;
image{
width: 100%;
height: 100%;
border-radius: 20rpx;
}
}
.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>

Write Preview
Loading…
Cancel
Save