第一次上传
This commit is contained in:
@@ -0,0 +1,431 @@
|
||||
<template>
|
||||
<view class="" style="padding: 30rpx;">
|
||||
<view class="" style="position: relative;">
|
||||
|
||||
<image v-if="!storeData.photo" :src="Service.GetMateUrlByImg('/static/userFunc/null.png')"
|
||||
style="border-radius: 20rpx; width: 100%; height: 350rpx; " mode="aspectFit" alt="" />
|
||||
<image v-else :src="Service.GetMateUrlByImg(storeData.photo)"
|
||||
style="border-radius: 20rpx; width: 100%; height: 350rpx; " mode="aspectFill" alt="" />
|
||||
<view @click="uploaduserImg()"
|
||||
style=" display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 70rpx; height: 70rpx; position: absolute; bottom: 24rpx; right: 12rpx; background-color: #F97316; ">
|
||||
<img :src="Service.GetIconImg('/static/userFunc/photo-store.png')"
|
||||
style="width: 40rpx; height: 40rpx; " alt="" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style=" margin-top: 20rpx; padding: 20rpx;border-radius: 20rpx; box-shadow: 0 0 10rpx 4rpx #E2e2e2; ">
|
||||
<up-form labelWidth='180rpx' :labelStyle="{'font-weight':600}" labelPosition="top" :model="storeData" :
|
||||
ref="form1">
|
||||
<up-form-item label="店铺名称: " :borderBottom="true" ref="item1">
|
||||
<up-input v-model="storeData.name" placeholder="请输入店铺名称" border="none"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item label="店铺地址: " :borderBottom="true" ref="item1">
|
||||
<view class="">
|
||||
<view v-if="!storeData.address" @click="chooseAddress()" class=""
|
||||
style="display: flex; align-items: center;">
|
||||
<text style="font-size: 26rpx; color: #c0c4cc; margin-right: 10rpx;">请选择地址 </text>
|
||||
<up-icon name="arrow-right" color="#c0c4cc" size="12"></up-icon>
|
||||
</view>
|
||||
<view v-else @click="chooseAddress()" class="">
|
||||
{{storeData.address}}
|
||||
</view>
|
||||
</view>
|
||||
</up-form-item>
|
||||
<up-form-item label="联系电话: " :borderBottom="true" ref="item1">
|
||||
<up-input v-model="storeData.phone" placeholder="请输入您的联系电话" border="none"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item label="营业时间: " :borderBottom="true" ref="item1">
|
||||
<view class="">
|
||||
<view v-if="!storeData.time" @click="showDate=!showDate" class=""
|
||||
style="display: flex; align-items: center;">
|
||||
<text style="font-size: 26rpx; color: #c0c4cc; margin-right: 10rpx;">请选择营业时间 </text>
|
||||
<up-icon name="arrow-right" color="#c0c4cc" size="12"></up-icon>
|
||||
</view>
|
||||
<view v-else @click="showDate=!showDate" class="">
|
||||
{{storeData.time}}
|
||||
</view>
|
||||
</view>
|
||||
</up-form-item>
|
||||
|
||||
</up-form>
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style="margin-top: 20rpx; padding: 20rpx;border-radius: 20rpx; box-shadow: 0 0 10rpx 4rpx #E2e2e2; ">
|
||||
<view style="display: flex; align-items: center; justify-content: space-between;" class="">
|
||||
<view class="" style="font-weight: 600;" >
|
||||
店铺标签
|
||||
</view>
|
||||
<view class="">
|
||||
<up-icon @click="showTagfunc()" name="plus" color="#000" size="16" :bold='true'></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="display: grid; grid-template-columns: repeat(4,1fr); ">
|
||||
<view class="tag" v-for="(item,index) in tagList" :key="index"
|
||||
style=" margin-top: 15rpx; padding: 10rpx 20rpx; border-radius: 8rpx; margin-right: 15rpx; background-color: var(--nav-mian); color: #fff; ">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style="margin-top: 20rpx; padding: 20rpx;border-radius: 20rpx; box-shadow: 0 0 10rpx 4rpx #E2e2e2; ">
|
||||
<view style="display: flex; align-items: center; justify-content: space-between;" class="">
|
||||
<view class="" style="font-weight: 600;" >
|
||||
所属社区
|
||||
</view>
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="padding: 15rpx 0;" >
|
||||
<view v-if="!storeData.community" @click="showCommunity=!showCommunity" class=""
|
||||
style="display: flex; align-items: center;">
|
||||
<text style="font-size: 26rpx; color: #c0c4cc; margin-right: 10rpx;">请选择所属社区 </text>
|
||||
<up-icon name="arrow-right" color="#c0c4cc" size="12"></up-icon>
|
||||
</view>
|
||||
<view v-else @click="showCommunity=!showCommunity" class="">
|
||||
{{storeData.community}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style="margin-top: 20rpx; padding: 20rpx;border-radius: 20rpx; box-shadow: 0 0 10rpx 4rpx #E2e2e2; ">
|
||||
<view style="display: flex; align-items: center; justify-content: space-between;" class="">
|
||||
<view class="" style="font-weight: 600;" >
|
||||
商品管理
|
||||
</view>
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="padding: 20rpx 0;" >
|
||||
<view @click="Service.GoPage('/pages/goods/goodsDetail')" class="" style="display: flex; align-items: center; justify-content: space-between; " >
|
||||
<view class="" style=" flex: 1; display: flex; align-items: center;" >
|
||||
<image :src="Service.GetMateUrlByImg('/static/dele/dele3.png')" style="width: 150rpx; height: 150rpx; " mode="aspectFit" alt="" />
|
||||
<view class="" style="margin-left: 20rpx;" >
|
||||
<view class="" style="font-weight: 600;" >
|
||||
招牌牛肉面
|
||||
</view>
|
||||
<view class="" style=" margin-top: 15rpx; color: #F97316; font-weight: 600; font-size: 28rpx; " >
|
||||
¥28
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<up-icon name="arrow-right" color="#c0c4cc" size="26"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tag" @click="Service.GoPage('/pages/goods/addGoods')" style=" color: #F97316; margin-top: 20rpx; width: 100%; border-radius: 15rpx; border: 5rpx dashed #F97316; padding: 20rpx; text-align: center; " >
|
||||
<up-icon name="plus" color="#F97316" size="16" :bold='true'></up-icon>
|
||||
<text style="margin-left: 20rpx;" >添加商品</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="width: 100%; height: 200rpx; " >
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" style="width: 100%; background-color: #fff; position: fixed; bottom: 0; left: 0; padding: 20rpx; ">
|
||||
<up-button shape='circle' color='#FF6B35' text="保存修改"></up-button>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<up-popup :show="showDate">
|
||||
<view style="width: 100%; padding: 30rpx; ">
|
||||
<view class="" style="display: flex; align-items: center; justify-content: space-between;">
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
<up-icon @click="showDate=!showDate" name="close" color="#000" size="18"></up-icon>
|
||||
</view>
|
||||
<up-form labelWidth='180rpx' :labelStyle="{'font-weight':600}" labelPosition="top" :model="storeData" :
|
||||
ref="form1">
|
||||
<up-form-item label="营业时间: ">
|
||||
<view class="" style=" width: 100%; display: grid; grid-template-columns: repeat(4,1fr);">
|
||||
<view v-for="(item,index) in 7" @click="chooseWeek(index)"
|
||||
style=" margin-top: 15rpx; font-size: 32rpx; padding: 10rpx 30rpx;border-radius: 14rpx;"
|
||||
:class="{ tab:weekList.findIndex(item => item == index)===-1,tabActive: weekList.findIndex(item => item == index)!=-1 }"
|
||||
:key="index" class="tag">
|
||||
周{{chinese(index)}}
|
||||
</view>
|
||||
</view>
|
||||
</up-form-item>
|
||||
|
||||
<up-form-item label="开业时间: " labelPosition="left">
|
||||
<view v-if="!openTime" @click="showOpenTime=!showOpenTime" class=""
|
||||
style="display: flex; align-items: center;">
|
||||
<text style="font-size: 26rpx; color: #c0c4cc; margin-right: 10rpx;">请选择开业时间 </text>
|
||||
<up-icon name="arrow-right" color="#c0c4cc" size="12"></up-icon>
|
||||
</view>
|
||||
<view v-else @click="showOpenTime=!showOpenTime" class="">
|
||||
{{openTime}}
|
||||
</view>
|
||||
</up-form-item>
|
||||
<up-form-item label="结业时间: " labelPosition="left">
|
||||
<view v-if="!closeTime" @click="showCloseTime=!showCloseTime" class=""
|
||||
style="display: flex; align-items: center;">
|
||||
<text style="font-size: 26rpx; color: #c0c4cc; margin-right: 10rpx;">请选择开业时间 </text>
|
||||
<up-icon name="arrow-right" color="#c0c4cc" size="12"></up-icon>
|
||||
</view>
|
||||
<view v-else @click="showCloseTime=!showCloseTime" class="">
|
||||
{{closeTime}}
|
||||
</view>
|
||||
</up-form-item>
|
||||
|
||||
</up-form>
|
||||
<view class="" style="margin-top: 20rpx;">
|
||||
<up-button @click="dateconfiom" text="确认"></up-button>
|
||||
</view>
|
||||
<up-datetime-picker @confirm='showOpenTime=!showOpenTime' @cancel="showOpenTime=!showOpenTime"
|
||||
:show="showOpenTime" v-model="openTime" mode="time"></up-datetime-picker>
|
||||
<up-datetime-picker @confirm='showCloseTime=!showCloseTime' @cancel="showCloseTime=!showCloseTime"
|
||||
:show="showCloseTime" v-model="closeTime" mode="time"></up-datetime-picker>
|
||||
|
||||
</view>
|
||||
</up-popup>
|
||||
<up-popup :show="showTag">
|
||||
<view style="width: 100%; padding: 30rpx; ">
|
||||
<view class="" style="display: flex; align-items: center; justify-content: space-between;">
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
<up-icon @click="showTag=!showTag" name="close" color="#000" size="18"></up-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<view style="display: flex; align-items: center; justify-content: space-between;" class="">
|
||||
<view class="">
|
||||
店铺标签
|
||||
</view>
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="margin: 20rpx 0;">
|
||||
<up-input placeholder="请输入标签" border="bottom" v-model="tag"></up-input>
|
||||
</view>
|
||||
<view class="" style="margin-top: 20rpx;">
|
||||
<up-button @click="addTag()" text="确认"></up-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
<!-- 社区 -->
|
||||
<up-picker :show="showCommunity" @confirm="communityFunc" @cancel='showCommunity=!showCommunity' :columns="columns"></up-picker>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onShow, onLoad } from "@dcloudio/uni-app";
|
||||
import { Service } from "@/Service/Service"
|
||||
import { ref } from "vue";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
interface data {
|
||||
photo : string,
|
||||
name : string,
|
||||
address : string,
|
||||
phone : string,
|
||||
time : string,
|
||||
community : string
|
||||
}
|
||||
|
||||
|
||||
|
||||
let storeData = ref<data>({
|
||||
photo: '',
|
||||
name: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
time: '',
|
||||
community: ''
|
||||
})
|
||||
|
||||
|
||||
// 时间
|
||||
let showDate = ref(false)
|
||||
let weekList = ref<Array<number>>([])
|
||||
let openTime = ref()
|
||||
let showOpenTime = ref(false)
|
||||
let closeTime = ref()
|
||||
let showCloseTime = ref(false)
|
||||
// 时间方式
|
||||
let timefunc = ref(-1)
|
||||
|
||||
|
||||
// 标签
|
||||
let showTag = ref(false)
|
||||
let tag = ref()
|
||||
let tagList = ref<Array<string>>([])
|
||||
|
||||
// 社区
|
||||
let showCommunity = ref(false)
|
||||
const columns = ref([
|
||||
['平安街', '镇魂街', '美食街']
|
||||
]);
|
||||
|
||||
onLoad(() => {
|
||||
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
|
||||
});
|
||||
// 社区
|
||||
const communityFunc=(e:any)=>{
|
||||
showCommunity.value=!showCommunity.value
|
||||
storeData.value.community=e.value[0]
|
||||
}
|
||||
|
||||
|
||||
// 标签
|
||||
const showTagfunc = () => {
|
||||
showTag.value = !showTag.value
|
||||
tag.value = ''
|
||||
}
|
||||
|
||||
const addTag = () => {
|
||||
if (!tag.value) {
|
||||
Service.Msg('请输入标签内容')
|
||||
return
|
||||
}
|
||||
tagList.value.push(tag.value)
|
||||
showTag.value = !showTag.value
|
||||
}
|
||||
|
||||
// 选择照片
|
||||
const uploaduserImg = () => {
|
||||
uni.chooseImage({
|
||||
count: 1, // 最多选择1张图片
|
||||
sizeType: ['original', 'compressed'], // 支持原图和压缩图
|
||||
sourceType: ['album', 'camera'], // 可从相册选择或使用相机拍照
|
||||
success: function (res) {
|
||||
storeData.value.photo = res.tempFiles[0].path
|
||||
// let path = res.tempFiles[0].path
|
||||
// Service.uploadH5(path, 'Avatar', data => {
|
||||
// userInfo.value.userPhoto = data.split(',')[2].split(':')[1].split('"')[1]
|
||||
// })
|
||||
},
|
||||
fail: function (err) {
|
||||
console.error('选择失败:', err.errMsg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 地址
|
||||
const chooseAddress = () => {
|
||||
wx.chooseLocation({
|
||||
success: res => {
|
||||
storeData.value.address = res.address
|
||||
// latitude.value = res.latitude.toString();
|
||||
// longitude.value = res.longitude.toString();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const chooseWeek = (index : number) => {
|
||||
if (weekList.value.findIndex(item => item == index) != -1) {
|
||||
let i = weekList.value.findIndex(item => item == index)
|
||||
weekList.value.splice(i, 1)
|
||||
return
|
||||
}
|
||||
weekList.value.push(index)
|
||||
}
|
||||
|
||||
const chinese = (item : number) => {
|
||||
if (item + 1 == 1) {
|
||||
return '一'
|
||||
}
|
||||
if (item + 1 == 2) {
|
||||
return '二'
|
||||
} if (item + 1 == 3) {
|
||||
return '三'
|
||||
} if (item + 1 == 4) {
|
||||
return '四'
|
||||
} if (item + 1 == 5) {
|
||||
return '五'
|
||||
} if (item + 1 == 6) {
|
||||
return '六'
|
||||
} if (item + 1 == 7) {
|
||||
return '日'
|
||||
}
|
||||
}
|
||||
|
||||
const dateconfiom = () => {
|
||||
storeData.value.time = ''
|
||||
if (weekList.value.length == 0) {
|
||||
Service.Msg('请选择营业时间')
|
||||
return
|
||||
}
|
||||
|
||||
if (!openTime.value) {
|
||||
Service.Msg('请选择开业时间')
|
||||
return
|
||||
}
|
||||
if (!closeTime.value) {
|
||||
Service.Msg('请选择结业时间')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
if (openTime.value > closeTime.value) {
|
||||
Service.Msg('开业时间不得小于结业时间')
|
||||
return
|
||||
}
|
||||
|
||||
weekList.value.sort((a, b) => {
|
||||
return a - b
|
||||
})
|
||||
|
||||
let timeIndex = weekList.value[0] - 0
|
||||
let judgment = weekList.value.findIndex((item, index) => {
|
||||
return item - index !== timeIndex
|
||||
})
|
||||
|
||||
// 1是至 /0是全显示
|
||||
if (judgment == -1) {
|
||||
timefunc.value = 1
|
||||
} else {
|
||||
timefunc.value = 0
|
||||
}
|
||||
|
||||
if (timefunc.value == 0) {
|
||||
weekList.value.map((item) => {
|
||||
storeData.value.time = storeData.value.time + '周' + chinese(item) + ' '
|
||||
})
|
||||
} else {
|
||||
storeData.value.time = '周' + chinese((weekList.value[0])) + '至' + '周' + chinese((weekList.value[weekList.value.length - 1]))
|
||||
}
|
||||
storeData.value.time = storeData.value.time + ' ' + openTime.value + '-' + closeTime.value
|
||||
|
||||
showDate.value = !showDate.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.tabActive {
|
||||
background-color: var(--nav-mian);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tab {
|
||||
background-color: #F5F5F5;
|
||||
color: #333333
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,531 @@
|
||||
<template>
|
||||
<view class="order-detail-page">
|
||||
<view class="detail-container">
|
||||
<!-- 沉浸式状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="nav-bar">
|
||||
<image class="back-icon" src="/static/icons/back.svg" @click="goBack" mode="aspectFit" />
|
||||
<text class="nav-title">订单详情</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 店铺信息卡片 -->
|
||||
<view class="shop-info-card" @click="goToShop">
|
||||
<view @click="Service.GoPage('/pages/community/merchantDetail?merchId='+merchInfo.merchId)"
|
||||
class="shop-header">
|
||||
<image class="shop-avatar" :src="Service.GetMateUrlByImg(merchInfo.logo)" mode="aspectFill" />
|
||||
<view class="shop-info">
|
||||
<text class="shop-name">{{ merchInfo.name }}</text>
|
||||
<text class="order-time">{{ Service.formatDate(merchInfo.addTime,2) }}</text>
|
||||
</view>
|
||||
|
||||
<up-icon name="arrow-right" bold="true" size="22"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息卡片 -->
|
||||
<view class="order-info-card">
|
||||
<view class="card-title">
|
||||
<text class="title-icon">📋</text>
|
||||
<text class="title-text">订单信息</text>
|
||||
</view>
|
||||
|
||||
<view class="info-section">
|
||||
<view class="info-row">
|
||||
<text class="info-label">订单号</text>
|
||||
<text class="info-value">{{ orderInfo.orderId }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-row">
|
||||
<text class="info-label">订单金额</text>
|
||||
<text class="info-value amount">¥{{ orderInfo.amount }}</text>
|
||||
</view>
|
||||
|
||||
<view class="info-row">
|
||||
<text class="info-label">订单状态</text>
|
||||
<view class="status-tag .status-completed">
|
||||
<text class="status-tag-text">已完成</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="orderInfo.getIntegral > 0" class="info-row">
|
||||
<text class="info-label">获得积分</text>
|
||||
<view class="points-badge earned">
|
||||
<text class="ri-coin-line points-icon"></text>
|
||||
<text class="points-text">+{{ orderInfo.getIntegral }}分</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="orderInfo.useIntegral > 0" class="info-row">
|
||||
<text class="info-label">使用积分</text>
|
||||
<view class="points-badge used">
|
||||
<text class="ri-wallet-3-line points-icon"></text>
|
||||
<text class="points-text">-{{ orderInfo.useIntegral }}分</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="orderInfo.discount" class="info-row">
|
||||
<text class="info-label">优惠券</text>
|
||||
<view class="coupon-badge">
|
||||
<text
|
||||
class="coupon-text">{{ '满'+JSON.parse(orderInfo.discount).needMoney+'减'+JSON.parse(orderInfo.discount).deductMoney }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-row">
|
||||
<text class="info-label">付款金额</text>
|
||||
<text class="info-value amount">¥{{ orderInfo.payAmount }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">支付方式</text>
|
||||
<text class="info-value">{{ orderInfo.payway=='wx'?'微信':'支付宝' }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">下单时间</text>
|
||||
<text class="info-value">{{ orderInfo.payTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<!-- <view v-if="order.statusType === 'completed'" class="bottom-actions">
|
||||
<button class="action-btn secondary" @click="contactService">
|
||||
<text class="ri-customer-service-2-line btn-icon"></text>
|
||||
<text class="btn-text">联系客服</text>
|
||||
</button>
|
||||
<button class="action-btn primary" @click="writeReview">
|
||||
<text class="ri-edit-line btn-icon"></text>
|
||||
<text class="btn-text">评价订单</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-else-if="order.statusType === 'pending'" class="bottom-actions">
|
||||
<button class="action-btn secondary" @click="contactService">
|
||||
<text class="ri-customer-service-2-line btn-icon"></text>
|
||||
<text class="btn-text">联系客服</text>
|
||||
</button>
|
||||
<button class="action-btn primary" @click="writeReview">
|
||||
<text class="ri-star-line btn-icon"></text>
|
||||
<text class="btn-text">评价订单</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-else-if="order.statusType === 'refunding'" class="bottom-actions">
|
||||
<button class="action-btn warning" @click="checkRefundStatus">
|
||||
<text class="ri-time-line btn-icon"></text>
|
||||
<text class="btn-text">查看退款进度</text>
|
||||
</button>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<!-- <view v-else class="loading">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
ref
|
||||
} from 'vue'
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
vpOrderService,
|
||||
Service
|
||||
} from '@/Service/vp/vpOrderService'
|
||||
|
||||
|
||||
|
||||
let merchInfo = ref<any>({})
|
||||
let orderInfo = ref<any>({})
|
||||
let orderId = ref('')
|
||||
// 页面加载
|
||||
onLoad((options) => {
|
||||
if (options.orderId) {
|
||||
orderId.value = options.orderId
|
||||
getData()
|
||||
}
|
||||
})
|
||||
|
||||
const getData = () => {
|
||||
vpOrderService.GetOrderInfo(orderId.value).then(res => {
|
||||
if (res.code == 0) {
|
||||
merchInfo.value = res.data.merchInfo
|
||||
orderInfo.value = res.data.orderInfo
|
||||
} else {
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 跳转到商家详情
|
||||
const goToShop = () => {
|
||||
if (!order.value) return
|
||||
// 使用商家ID跳转,这里使用order.id作为商家ID
|
||||
uni.navigateTo({
|
||||
url: `/pages/shop/shop?id=${order.value.id}`
|
||||
})
|
||||
}
|
||||
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
|
||||
// 联系客服
|
||||
const contactService = () => {
|
||||
uni.showToast({
|
||||
title: '正在联系客服...',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 评价订单
|
||||
const writeReview = () => {
|
||||
uni.showToast({
|
||||
title: '跳转到评价页面',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 查看退款进度
|
||||
const checkRefundStatus = () => {
|
||||
uni.showToast({
|
||||
title: '退款处理中,请耐心等待',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.detail-container {
|
||||
padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.status-bar {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 50rpx 24rpx 20rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
/* 店铺信息卡片 */
|
||||
.shop-info-card {
|
||||
background: #FFFFFF;
|
||||
margin: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.shop-info-card:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.shop-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.shop-arrow {
|
||||
font-size: 32rpx;
|
||||
color: #CCCCCC;
|
||||
margin-left: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.shop-avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.order-time {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.order-status-badge {
|
||||
padding: 12rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.order-status-badge.status-completed {
|
||||
background: #E8F5E9;
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.order-status-badge.status-pending {
|
||||
background: #FFF4E6;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.order-status-badge.status-refunding {
|
||||
background: #E3F2FD;
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.order-status-badge.status-refunded {
|
||||
background: #FFEBEE;
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
/* 订单信息卡片 */
|
||||
.order-info-card {
|
||||
background: #FFFFFF;
|
||||
margin: 0 20rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1rpx solid #F5F5F5;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value.amount {
|
||||
font-size: 36rpx;
|
||||
color: #FF6B00;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-tag.status-completed {
|
||||
background: #E8F5E9;
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.status-tag.status-pending {
|
||||
background: #FFF4E6;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.status-tag.status-refunding {
|
||||
background: #E3F2FD;
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.status-tag.status-refunded {
|
||||
background: #FFEBEE;
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
/* 积分徽章 */
|
||||
.points-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.points-badge.earned {
|
||||
background: #E8F5E9;
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.points-badge.used {
|
||||
background: #FFF4E6;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.points-icon {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.points-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
/* 优惠券徽章 */
|
||||
.coupon-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
background: linear-gradient(135deg, #FFF4E6, #FFE0B2);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.coupon-icon {
|
||||
font-size: 20rpx;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.coupon-text {
|
||||
font-size: 24rpx;
|
||||
color: #FF6B00;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.bottom-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 20rpx;
|
||||
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
||||
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.action-btn.secondary {
|
||||
background: linear-gradient(135deg, #F5F5F5, #EEEEEE);
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.action-btn.warning {
|
||||
background: linear-gradient(135deg, #2196F3, #42A5F5);
|
||||
color: #FFFFFF;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
## 1.1.7(2024-10-29)
|
||||
修复底部露出部分组件bug
|
||||
## 1.1.6(2024-08-20)
|
||||
更新本地数据源为最新数据源
|
||||
## 1.1.5(2024-06-12)
|
||||
使用说明文档优化
|
||||
## 1.1.4(2024-06-12)
|
||||
增加问题反馈描述
|
||||
## 1.1.3(2024-02-29)
|
||||
更新使用文档
|
||||
## 1.1.2(2024-01-16)
|
||||
解决Vue3项目导入导出报错问题
|
||||
## 1.1.1(2023-12-06)
|
||||
defaultValue可以传入defaultValue:['河北省','唐山市','丰南区']数组类型以及defaultValue: '420103'地区编码字符串类型
|
||||
## 1.1.0(2023-12-05)
|
||||
即默认值传入地区编码,也支持传入中文省市区数组
|
||||
## 1.0.9(2023-12-04)
|
||||
优化
|
||||
## 1.0.8(2023-10-24)
|
||||
修复东菀市和中山市下各镇的行政编码错误问题
|
||||
## 1.0.4(2023-09-15)
|
||||
改为uni_modules规范
|
||||
1039
.svn/pristine/1c/1cf1e550652211b82161ecb824f0ca915fab7846.svn-base
Normal file
1039
.svn/pristine/1c/1cf1e550652211b82161ecb824f0ca915fab7846.svn-base
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user