|
|
@@ -0,0 +1,253 @@
|
|
|
+<template>
|
|
|
+ <view class="shop-list">
|
|
|
+ <view class="shop-item" v-for="(item,index) in 1" :key="index" @click="handleShop(item)">
|
|
|
+ <view class="shop-head">
|
|
|
+ <view class="shop-title">
|
|
|
+ <text>从化荔博园店铺</text>
|
|
|
+ <up-icon class="icon" name="arrow-right" size="12" color="rgba(137, 137, 137, 0.69)"></up-icon>
|
|
|
+ </view>
|
|
|
+ <text class="status">{{statusStr[active]}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="shop-cont">
|
|
|
+ <image class="shop-img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
|
|
|
+ </image>
|
|
|
+ <view class="shop-info">
|
|
|
+ <view class="shop-name flex">
|
|
|
+ <text>海南妃子笑荔枝新鲜采摘</text>
|
|
|
+ <text class="shop-price">¥25</text>
|
|
|
+ </view>
|
|
|
+ <view class="shop-text flex">
|
|
|
+ <text>3斤装规格</text>
|
|
|
+ <text>x1</text>
|
|
|
+ </view>
|
|
|
+ <up-text size="12" color="#AFAFAF" text="坏单包退 包邮"></up-text>
|
|
|
+ <view class="total">
|
|
|
+ <view v-if="active==3 || active==4">共优惠 <text class="num">¥10</text></view>
|
|
|
+ <view v-if="active!=0 || active!=1">实付款 <text class="num">¥25</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view :class="['shop-foot','flex',{end:type === 'detail'}]">
|
|
|
+ <view class="more" v-show="type !== 'detail'">更多</view>
|
|
|
+ <view class="shop-button" v-if="active==0 || active==1">
|
|
|
+ <view>取消订单</view>
|
|
|
+ <view>付款</view>
|
|
|
+ </view>
|
|
|
+ <view class="shop-button" v-else-if="active==2">
|
|
|
+ <view>删除订单</view>
|
|
|
+ <view>提醒发货</view>
|
|
|
+ </view>
|
|
|
+ <view class="shop-button" v-else-if="active==3">
|
|
|
+ <view>删除订单</view>
|
|
|
+ <view>查看物流</view>
|
|
|
+ <view class="confirm">确认收货</view>
|
|
|
+ </view>
|
|
|
+ <view class="shop-button" v-else="active==4">
|
|
|
+ <view>申请售后</view>
|
|
|
+ <view>去评价</view>
|
|
|
+ <view class="confirm">再买一单</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="shop-detail-info" v-show="type === 'detail'">
|
|
|
+ <view class="info-row">
|
|
|
+ <view class="label">订单编号</view>
|
|
|
+ <view class="value">69854885962524256653</view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="info-row">
|
|
|
+ <view class="label">更多信息</view>
|
|
|
+ </view> -->
|
|
|
+ <up-collapse :border="false">
|
|
|
+ <up-collapse-item title="更多信息" cellCustomClass="collapse-item" value="展开" :rightIconStyle="{color:'rgba(137, 137, 137, 0.69)',size:'10px'}">
|
|
|
+ 123145646
|
|
|
+ </up-collapse-item>
|
|
|
+ </up-collapse>
|
|
|
+ <!-- <view class="btn-text">
|
|
|
+ <up-icon name="chat-fill"></up-icon>
|
|
|
+ <text>联系商家</text>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ ref
|
|
|
+ } from "vue"
|
|
|
+
|
|
|
+ const props = defineProps({
|
|
|
+ active: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const statusStr = {
|
|
|
+ 0: "待付款",
|
|
|
+ 1: "待付款",
|
|
|
+ 2: "待发货",
|
|
|
+ 3: "待收货",
|
|
|
+ 4: "交易成功",
|
|
|
+ 5: "退款/售后",
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleShop = () => {
|
|
|
+ if (props.active == 3 || props.active == 4) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/tabBar/mine/subPages/orderDetail?status=${props.active}`
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .shop-list {
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ .flex {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-item {
|
|
|
+ background: #fff;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+
|
|
|
+ .shop-head {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .shop-title {
|
|
|
+ font-weight: 500;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin-left: 2rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .status {
|
|
|
+ color: #F3C11D;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-cont {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ margin: 20rpx 0;
|
|
|
+
|
|
|
+ .shop-img {
|
|
|
+ width: 182rpx;
|
|
|
+ height: 182rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-info {
|
|
|
+ width: calc(100% - 182rpx - 10rpx);
|
|
|
+
|
|
|
+ .shop-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+
|
|
|
+ .shop-price {
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-text {
|
|
|
+ color: #717070;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 34rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ view+view {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-foot {
|
|
|
+ &.end {
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .more {
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-button {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ view {
|
|
|
+ width: 164rpx;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ border: 2rpx solid rgba(0, 0, 0, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm {
|
|
|
+ background: #FFD95E;
|
|
|
+ border: 2rpx solid transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ view+view {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-detail-info {
|
|
|
+ .info-row {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .label {
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ .value{
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .collapse-item{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .btn-text{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ ::v-deep .u-cell > .u-cell__body {
|
|
|
+ padding: 0 !important;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ // color: rgba(0, 0, 0, 0.5);
|
|
|
+ .u-cell__left-icon-wrap{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-item+.shop-item {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
wangsisi