From 455ad609eaadc578466e152de4d27df977bb4313 Mon Sep 17 00:00:00 2001
From: fanfan <franceesfan@163.com>
Date: Tue, 27 Feb 2024 16:44:40 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=86=E8=8A=82=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/newFun.js                    |   2 +-
 pages/news3/addressList.vue      |   6 +-
 pages/news3/shopOrder.vue        |   5 +-
 pages/news3/shopOrderDetails.vue |   2 +-
 pages/order/detail.vue           |  22 +-
 pages/order/index.vue            |  73 +++-
 pages/refund/index.vue           | 581 +++++++++++++++++--------------
 7 files changed, 419 insertions(+), 272 deletions(-)

diff --git a/api/newFun.js b/api/newFun.js
index 4b5931e..e28bbb2 100644
--- a/api/newFun.js
+++ b/api/newFun.js
@@ -178,7 +178,7 @@ export const updateAddress = (param) => {
 }
 //店长 查地址
 export const addressList = (param) => {
-  return request.post('Address/list', param)
+  return request.post('store/getAddressList', param)
 }
 // 店长同意拒绝
 export const audit = (param) => {
diff --git a/pages/news3/addressList.vue b/pages/news3/addressList.vue
index 5096e05..4fad672 100644
--- a/pages/news3/addressList.vue
+++ b/pages/news3/addressList.vue
@@ -62,9 +62,9 @@
 							user_id: userInfo.user_id
 						})
 						.then(result => {
-							this.addressData = result.data.list[0]
-							that.addIndex = result.data.list[0].address_id
-							that.addList = result.data.list
+							this.addressData = result.data.data[0]
+							that.addIndex = result.data.data[0].address_id
+							that.addList = result.data.data
 						})
 						.catch(reject)
 				})
diff --git a/pages/news3/shopOrder.vue b/pages/news3/shopOrder.vue
index 8bb7785..f748de4 100644
--- a/pages/news3/shopOrder.vue
+++ b/pages/news3/shopOrder.vue
@@ -154,7 +154,7 @@
 					<view class="tuiAdderss" v-if="audit_status==10">
 						<text>退货地址:</text>
 						<view class="" @click="goJump('/pages/news3/addressList','',0)"><text
-								:style="{'color': addressData?'#303030':'#EAEAEA'}"></text>
+								:style="{'color': addressData?'#303030':'#ABABAB'}"></text>
 							{{addressData?addressData.name+addressData.phone:'请选择退货地址'}}
 							<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
 						</view>
@@ -166,7 +166,6 @@
 						<u-input v-model="refund_notes" placeholder="请输入您的留言" type="textarea" :auto-height="true" />
 					</view>
 				</view>
-				<!-- :style="{'opacity': refund_image_id?1:0.6 }" -->
 				<view class="submit" @click="submitRefund()">
 					确定
 				</view>
@@ -442,7 +441,7 @@
 					data
 				} = await newFunApi.audit(params);
 				if (status == 200) {
-					that.$toast(message)
+					this.$toast(message)
 					this.afterSale = false
 					this.pageNum = 1
 					this.goodShopsList = [];
diff --git a/pages/news3/shopOrderDetails.vue b/pages/news3/shopOrderDetails.vue
index f82fa89..cac6ab4 100644
--- a/pages/news3/shopOrderDetails.vue
+++ b/pages/news3/shopOrderDetails.vue
@@ -196,7 +196,7 @@
 				<view class="filterItem c">
 					<view class="tuiAdderss" v-if="audit_status==10">
 						<text>退货地址:</text>
-						<view class="" @click="goJump('/pages/news3/addressList','',0)"><text :style="{'color': addressData?'#303030':'#EAEAEA'}"></text>
+						<view class="" @click="goJump('/pages/news3/addressList','',0)"><text :style="{'color': addressData?'#303030':'#ABABAB'}"></text>
 							{{addressData?addressData.name+addressData.phone:'请选择退货地址'}}
 							<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
 						</view>
diff --git a/pages/order/detail.vue b/pages/order/detail.vue
index 8764d45..37e1a5c 100644
--- a/pages/order/detail.vue
+++ b/pages/order/detail.vue
@@ -58,7 +58,7 @@
 					核销码
 				</view>
 				<view class="codeNum" @click="onQrcodeImage">
-					<image :src="qrcodeImage"  mode=""></image>
+					<image :src="qrcodeImage" mode=""></image>
 				</view>
 				<view class="openCode">
 					点击放大核销码
@@ -239,7 +239,7 @@
 					{{order.ziti_time}}
 				</view>
 			</view>
-			<view class="orderTitle"  v-if="order.ziti_image">
+			<view class="orderTitle" v-if="order.ziti_image">
 				<view class="total">
 					提货照片：
 				</view>
@@ -297,7 +297,7 @@
 					v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
 					催发货
 				</view>
-			<!-- 	<view class="buyAgain" @click="onCancel(order.order_id)"
+				<!-- 	<view class="buyAgain" @click="onCancel(order.order_id)"
 					v-if="order.order_status == OrderStatusEnum.NORMAL.value && order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
 					取消订单
 				</view> -->
@@ -456,7 +456,9 @@
 				app.isLoading = true
 				OrderApi.detail(app.orderId)
 					.then(result => {
-						app.onExtractQRCode(result.data.order.order_id)
+						if (result.data.order.delivery_type == 20) {
+							app.onExtractQRCode(result.data.order.order_id)
+						}
 						app.order = result.data.order
 						app.setting = result.data.setting
 						app.isLoading = false
@@ -583,7 +585,7 @@
 						app.qrcodeImage = result.data.qrcode
 					})
 			},
-			onQrcodeImage(){
+			onQrcodeImage() {
 				this.showQRCodePopup = true
 			},
 			// 点击去退款
@@ -613,12 +615,14 @@
 </script>
 
 <style lang="scss" scoped>
-	page{
+	page {
 		height: 100%;
 	}
-	::v-deep .qrcode-popup{
+
+	::v-deep .qrcode-popup {
 		padding: 44rpx 80rpx !important;
 	}
+
 	.detail {
 		width: 750rpx;
 		padding-bottom: 150rpx;
@@ -1377,6 +1381,7 @@
 				display: flex;
 				justify-content: center;
 				margin-top: 30rpx;
+
 				.codeImg {
 					width: 394rpx;
 					height: 458rpx;
@@ -1427,7 +1432,8 @@
 		font-size: 24rpx;
 		font-weight: 500;
 		color: #1E1E1E;
-        padding: 15rpx 0;
+		padding: 15rpx 0;
+
 		text {
 			font-size: 36rpx;
 		}
diff --git a/pages/order/index.vue b/pages/order/index.vue
index 98b6683..c754b90 100644
--- a/pages/order/index.vue
+++ b/pages/order/index.vue
@@ -7,9 +7,18 @@
 			</view>
 		</view>
 		<!-- tab栏 -->
-		<u-tabs :list="tabs" bg-color="#fafafa" :is-scroll="true" height="120" font-size="32" :current="current"
+		<view class="container">
+			<view class="classify-list">
+				<view class="list" v-for="(item,index) in tabs" :class="{'action':current==index}"
+					@click="onChangeTab(item,index)" :key="index">
+					<text>{{item.name}}</text>
+					<text class="line" v-show="current==index"></text>
+				</view>
+			</view>
+		</view>
+	<!-- 	<u-tabs :list="tabs" bg-color="#fafafa" :is-scroll="true" height="120" font-size="32" :current="current"
 			bar-width="56" bar-height="6" active-color="#3B3B3B" :show-bar='true' :duration="0.2"
-			@change="onChangeTab" />
+			@change="onChangeTab" /> -->
 		<!-- 订单列表 -->
 		<view class="order-list">
 			<view class="item" v-for="(item,index) in list" v-if="list.length>0">
@@ -257,6 +266,7 @@
 				app.getOrderList()
 			},
 			changeMenu(index) {
+				let idList = []
 				this.list.forEach(item => {
 					item.menushow = false;
 					idList.push(item.response.data.fileInfo.file_id)
@@ -272,7 +282,7 @@
 				if (options.dataType) {
 					const index = app.tabs.findIndex(item => item.value == options.dataType)
 					app.current = index > -1 ? index : 0
-					console.log(app.current,'KKKKKKK')
+					console.log(app.current, 'KKKKKKK')
 				}
 			},
 
@@ -305,7 +315,7 @@
 			},
 
 			// 切换标签项
-			onChangeTab(index) {
+			onChangeTab(item,index) {
 				const app = this
 				app.list = []
 				// 设置当前选中的标签
@@ -480,7 +490,61 @@
 		background-color: rgb(255, 98, 87) !important;
 	}
 
+	.container {
+		background-color: #fff;
+	}
+
+	.classify-list {
+		white-space: nowrap;
+		width: 100%;
+		height: 100rpx;
+		overflow-x: auto;
+		overflow-y: hidden;
+
+		.list {
+			position: relative;
+			display: inline-block;
+			width: 18%;
+			height: 100%;
+			line-height: 100rpx;
+			text-align: center;
+
+			text {
+				font-size: 28rpx;
+				color: #3B3B3B;
+
+			}
+
+			.line {
+				position: absolute;
+				left: 50%;
+				bottom: 10rpx;
+				// width: 60%;
+				// height: 8rpx;
+				background: linear-gradient(to right, #f8f893, #fe9d00);
+				// border-radius: 10rpx;
+				transform: translate(-50%, 0);
+
+				width: 60upx;
+				height: 8upx;
+				background: #FF6257;
+				border-radius: 29px 29px 29px 29px;
+				opacity: 1;
+			}
+		}
+
+		.action {
+			text {
+				font-size: 32rpx;
+				opacity: 1;
+			}
+		}
+	}
+
 	.order {
+		.order-list{
+			margin-top: 20rpx;
+		}
 		.receive {
 			width: 100%;
 			background: #F8F8F8;
@@ -856,6 +920,7 @@
 				display: flex;
 				justify-content: center;
 				margin-top: 30rpx;
+
 				.codeImg {
 					width: 394rpx;
 					height: 458rpx;
diff --git a/pages/refund/index.vue b/pages/refund/index.vue
index 9e5c28f..904956c 100644
--- a/pages/refund/index.vue
+++ b/pages/refund/index.vue
@@ -1,263 +1,340 @@
 <template>
-  <view class="container" :style="appThemeStyle">
-    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption"
-      @up="upCallback">
-
-      <!-- tab栏 -->
-      <u-tabs :list="tabs" :is-scroll="false" :current="curTab" :active-color="appTheme.mainBg" :duration="0.2" @change="onChangeTab" />
-
-      <!-- 退款/售后单 -->
-      <view class="widget-list">
-        <view class="widget-detail" v-if="list.data.length>0" v-for="(item, index) in list.data" :key="index">
-          <view class="row-block dis-flex flex-y-center">
-            <view class="flex-box">{{ item.create_time }}</view>
-            <view class="flex-box t-r">
-              <text class="col-m">{{ item.state_text }}</text>
-            </view>
-          </view>
-          <view class="detail-goods row-block dis-flex" @click.stop="handleTargetDetail(item.order_refund_id)">
-            <view class="goods-image">
-              <image class="image" :src="item.orderGoods.goods_image" mode="aspectFit"></image>
-            </view>
-            <view class="goods-right flex-box">
-              <view class="goods-name">
-                <text class="twoline-hide">{{ item.orderGoods.goods_name }}</text>
-              </view>
-              <view class="goods-props clearfix">
-                <view class="goods-props-item" v-for="(props, idx) in item.orderGoods.goods_props" :key="idx">
-                  <text>{{ props.value.name }}</text>
-                </view>
-              </view>
-              <view class="goods-num t-r">
-                <text class="f-26 col-8">×{{ item.orderGoods.total_num }}</text>
-              </view>
-            </view>
-          </view>
-          <view class="detail-order row-block">
-            <view class="item dis-flex flex-x-end flex-y-center">
-              <text class="">付款金额：</text>
-              <text class="col-m">￥{{ item.orderGoods.total_pay_price }}</text>
-            </view>
-          </view>
-          <view class="detail-operate row-block dis-flex flex-x-end flex-y-center">
-            <view class="detail-btn btn-detail" @click.stop="handleTargetDetail(item.order_refund_id)">查看详情</view>
-          </view>
-        </view>
-		<u-empty text="暂无数据显示哦～" v-else mode="list"></u-empty>
-      </view>
-
-    </mescroll-body>
-
-  </view>
+	<view class="container" :style="appThemeStyle">
+		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }"
+			@down="downCallback" :up="upOption" @up="upCallback">
+
+			<!-- tab栏 -->
+			<!-- <u-tabs :list="tabs" :is-scroll="false" :current="curTab" :active-color="appTheme.mainBg" :duration="0.2"
+				@change="onChangeTab" /> -->
+	<view class="container">
+			<view class="classify-list">
+				<view class="list" v-for="(item,index) in tabs" :class="{'action':curTab==index}"
+					@click="onChangeTab(index)" :key="index">
+					<text>{{item.name}}</text>
+					<text class="line" v-show="curTab==index"></text>
+				</view>
+			</view>
+		</view>
+			<!-- 退款/售后单 -->
+			<view class="widget-list">
+				<view class="widget-detail" v-if="list.data.length>0" v-for="(item, index) in list.data" :key="index">
+					<view class="row-block dis-flex flex-y-center">
+						<view class="flex-box">{{ item.create_time }}</view>
+						<view class="flex-box t-r">
+							<text class="col-m">{{ item.state_text }}</text>
+						</view>
+					</view>
+					<view class="detail-goods row-block dis-flex"
+						@click.stop="handleTargetDetail(item.order_refund_id)">
+						<view class="goods-image">
+							<image class="image" :src="item.orderGoods.goods_image" mode="aspectFit"></image>
+						</view>
+						<view class="goods-right flex-box">
+							<view class="goods-name">
+								<text class="twoline-hide">{{ item.orderGoods.goods_name }}</text>
+							</view>
+							<view class="goods-props clearfix">
+								<view class="goods-props-item" v-for="(props, idx) in item.orderGoods.goods_props"
+									:key="idx">
+									<text>{{ props.value.name }}</text>
+								</view>
+							</view>
+							<view class="goods-num t-r">
+								<text class="f-26 col-8">×{{ item.orderGoods.total_num }}</text>
+							</view>
+						</view>
+					</view>
+					<view class="detail-order row-block">
+						<view class="item dis-flex flex-x-end flex-y-center">
+							<text class="">付款金额：</text>
+							<text class="col-m">￥{{ item.orderGoods.total_pay_price }}</text>
+						</view>
+					</view>
+					<view class="detail-operate row-block dis-flex flex-x-end flex-y-center">
+						<view class="detail-btn btn-detail" @click.stop="handleTargetDetail(item.order_refund_id)">查看详情
+						</view>
+					</view>
+				</view>
+				<u-empty text="暂无数据显示哦～" v-else mode="list"></u-empty>
+			</view>
+
+		</mescroll-body>
+
+	</view>
 </template>
 
 <script>
-  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
-  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
-  import * as RefundApi from '@/api/refund'
-
-  // 每页记录数量
-  const pageSize = 15
-
-  // tab栏数据
-  const tabs = [{
-    name: '全部',
-    value: -1
-  }, {
-    name: '待处理',
-    value: 0
-  }]
-
-  export default {
-    mixins: [MescrollMixin],
-    data() {
-      return {
-        // 订单列表数据
-        list: getEmptyPaginateObj(),
-        // tabs栏数据
-        tabs,
-        // 当前标签索引
-        curTab: 0,
-        // 上拉加载配置
-        upOption: {
-          // 首次自动执行
-          auto: true,
-          // 每页数据的数量; 默认10
-          page: { size: pageSize },
-          // 数量要大于2条才显示无更多数据
-          noMoreSize: 2,
-          // 空布局
-          empty: {
-            tip: '亲，暂无售后单记录'
-          }
-        },
-        // 控制首次触发onShow事件时不刷新列表
-        canReset: false,
-      }
-    },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onLoad(options) {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面显示
-     */
-    onShow() {
-      this.canReset && this.onRefreshList()
-      this.canReset = true
-    },
-
-    methods: {
-
-      /**
-       * 上拉加载的回调 (页面初始化时也会执行一次)
-       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
-       * @param {Object} page
-       */
-      upCallback(page) {
-        const app = this
-        // 设置列表数据
-        app.getRefundList(page.num)
-          .then(list => {
-            const curPageLen = list.data.length
-            const totalSize = list.data.total
-            app.mescroll.endBySize(curPageLen, totalSize)
-          })
-          .catch(() => app.mescroll.endErr())
-      },
-
-      // 获取退款/售后单列表
-      getRefundList(pageNo = 1) {
-        const app = this
-        return new Promise((resolve, reject) => {
-          RefundApi.list({ state: app.getTabValue(), page: pageNo }, { load: false })
-            .then(result => {
-              // 合并新数据
-              const newList = result.data.list
-              app.list.data = getMoreListData(newList, app.list, pageNo)
-              resolve(newList)
-            })
-        })
-      },
-
-      // 切换标签项
-      onChangeTab(index) {
-        const app = this
-        // 设置当前选中的标签
-        app.curTab = index
-        // 刷新售后单列表
-        app.onRefreshList()
-      },
-
-      // 刷新订单列表
-      onRefreshList() {
-        this.list = getEmptyPaginateObj()
-        setTimeout(() => {
-          this.mescroll.resetUpScroll()
-        }, 120)
-      },
-
-      // 获取当前标签项的值
-      getTabValue() {
-        return this.tabs[this.curTab].value
-      },
-
-      // 跳转到售后单详情页
-      handleTargetDetail(orderRefundId) {
-        this.$navTo('pages/refund/detail', { orderRefundId })
-      },
-
-    }
-  }
+	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
+	import {
+		getEmptyPaginateObj,
+		getMoreListData
+	} from '@/core/app'
+	import * as RefundApi from '@/api/refund'
+
+	// 每页记录数量
+	const pageSize = 15
+
+	// tab栏数据
+	const tabs = [{
+		name: '全部',
+		value: -1
+	}, {
+		name: '待处理',
+		value: 0
+	}]
+
+	export default {
+		mixins: [MescrollMixin],
+		data() {
+			return {
+				// 订单列表数据
+				list: getEmptyPaginateObj(),
+				// tabs栏数据
+				tabs,
+				// 当前标签索引
+				curTab: 0,
+				// 上拉加载配置
+				upOption: {
+					// 首次自动执行
+					auto: true,
+					// 每页数据的数量; 默认10
+					page: {
+						size: pageSize
+					},
+					// 数量要大于2条才显示无更多数据
+					noMoreSize: 2,
+					// 空布局
+					empty: {
+						tip: '亲，暂无售后单记录'
+					}
+				},
+				// 控制首次触发onShow事件时不刷新列表
+				canReset: false,
+			}
+		},
+		onUnload() {
+			uni.switchTab({
+				url: '/pages/user/index' // targetTab 为目标 tab 页的路径
+			})
+		},
+		/**
+		 * 生命周期函数--监听页面加载
+		 */
+		onLoad(options) {
+
+		},
+
+		/**
+		 * 生命周期函数--监听页面显示
+		 */
+		onShow() {
+			this.canReset && this.onRefreshList()
+			this.canReset = true
+		},
+
+		methods: {
+
+			/**
+			 * 上拉加载的回调 (页面初始化时也会执行一次)
+			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
+			 * @param {Object} page
+			 */
+			upCallback(page) {
+				const app = this
+				// 设置列表数据
+				app.getRefundList(page.num)
+					.then(list => {
+						const curPageLen = list.data.length
+						const totalSize = list.data.total
+						app.mescroll.endBySize(curPageLen, totalSize)
+					})
+					.catch(() => app.mescroll.endErr())
+			},
+
+			// 获取退款/售后单列表
+			getRefundList(pageNo = 1) {
+				const app = this
+				return new Promise((resolve, reject) => {
+					RefundApi.list({
+							state: app.getTabValue(),
+							page: pageNo
+						}, {
+							load: false
+						})
+						.then(result => {
+							// 合并新数据
+							const newList = result.data.list
+							app.list.data = getMoreListData(newList, app.list, pageNo)
+							resolve(newList)
+						})
+				})
+			},
+
+			// 切换标签项
+			onChangeTab(index) {
+				console.log(index)
+				const app = this
+				// 设置当前选中的标签
+				app.curTab = index
+				// 刷新售后单列表
+				app.onRefreshList()
+			},
+
+			// 刷新订单列表
+			onRefreshList() {
+				this.list = getEmptyPaginateObj()
+				setTimeout(() => {
+					this.mescroll.resetUpScroll()
+				}, 120)
+			},
+
+			// 获取当前标签项的值
+			getTabValue() {
+				return this.tabs[this.curTab].value
+			},
+
+			// 跳转到售后单详情页
+			handleTargetDetail(orderRefundId) {
+				this.$navTo('pages/refund/detail', {
+					orderRefundId
+				})
+			},
+
+		}
+	}
 </script>
 
 <style lang="scss" scoped>
 	::v-deep .u-empty {
 		padding: 100rpx 0;
 	}
-  .widget-detail {
-    box-sizing: border-box;
-    background: #fff;
-    margin: 20rpx 20rpx 0 20rpx;
-	border-radius: 24rpx;
-
-    .row-block {
-      padding: 0 20rpx;
-      min-height: 70rpx;
-    }
-
-    .detail-goods {
-      padding: 20rpx;
-
-      .goods-image {
-        margin-right: 20rpx;
-
-        .image {
-          display: block;
-          width: 200rpx;
-          height: 200rpx;
-        }
-      }
-
-      .goods-right {
-        padding: 15rpx 0;
-      }
-
-      .goods-name {
-        margin-bottom: 10rpx;
-      }
-
-
-      .goods-props {
-        margin-top: 14rpx;
-        height: 40rpx;
-        color: #ababab;
-        font-size: 24rpx;
-        overflow: hidden;
-
-        .goods-props-item {
-          display: inline-block;
-          margin-right: 14rpx;
-          padding: 4rpx 16rpx;
-          border-radius: 12rpx;
-          background-color: #F5F5F5;
-          width: auto;
-        }
-      }
-
-    }
-
-    .detail-operate {
-      padding-bottom: 20rpx;
-
-      .detail-btn {
-        border-radius: 4px;
-        border: 1rpx solid #ccc;
-        padding: 8rpx 20rpx;
-        font-size: 28rpx;
-        color: #555;
-        margin-left: 10rpx;
-      }
-    }
-
-    .detail-order {
-      padding: 10rpx 20rpx;
-      font-size: 28rpx;
-      height: 50rpx;
-      display: flex;
-      align-items: center;
-
-      .item {
-        margin-bottom: 10rpx;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
+
+	.classify-list {
+		white-space: nowrap;
+		width: 100%;
+		height: 100rpx;
+		overflow-x: auto;
+		overflow-y: hidden;
+
+		.list {
+			position: relative;
+			display: inline-block;
+			width: 50%;
+			height: 100%;
+			line-height: 100rpx;
+			text-align: center;
+
+			text {
+				font-size: 28rpx;
+				color: #3B3B3B;
+
+			}
+
+			.line {
+				position: absolute;
+				left: 50%;
+				bottom: 10rpx;
+				// width: 60%;
+				// height: 8rpx;
+				background: linear-gradient(to right, #f8f893, #fe9d00);
+				// border-radius: 10rpx;
+				transform: translate(-50%, 0);
+
+				width: 60upx;
+				height: 8upx;
+				background: #FF6257;
+				border-radius: 29px 29px 29px 29px;
+				opacity: 1;
+			}
+		}
+
+		.action {
+			text {
+				font-size: 32rpx;
+				opacity: 1;
+			}
+		}
+	}
+
+	.widget-detail {
+		box-sizing: border-box;
+		background: #fff;
+		margin: 20rpx 20rpx 0 20rpx;
+		border-radius: 24rpx;
+
+		.row-block {
+			padding: 0 20rpx;
+			min-height: 70rpx;
+		}
+
+		.detail-goods {
+			padding: 20rpx;
+
+			.goods-image {
+				margin-right: 20rpx;
+
+				.image {
+					display: block;
+					width: 200rpx;
+					height: 200rpx;
+				}
+			}
+
+			.goods-right {
+				padding: 15rpx 0;
+			}
+
+			.goods-name {
+				margin-bottom: 10rpx;
+			}
+
+
+			.goods-props {
+				margin-top: 14rpx;
+				height: 40rpx;
+				color: #ababab;
+				font-size: 24rpx;
+				overflow: hidden;
+
+				.goods-props-item {
+					display: inline-block;
+					margin-right: 14rpx;
+					padding: 4rpx 16rpx;
+					border-radius: 12rpx;
+					background-color: #F5F5F5;
+					width: auto;
+				}
+			}
+
+		}
+
+		.detail-operate {
+			padding-bottom: 20rpx;
+
+			.detail-btn {
+				border-radius: 4px;
+				border: 1rpx solid #ccc;
+				padding: 8rpx 20rpx;
+				font-size: 28rpx;
+				color: #555;
+				margin-left: 10rpx;
+			}
+		}
+
+		.detail-order {
+			padding: 10rpx 20rpx;
+			font-size: 28rpx;
+			height: 50rpx;
+			display: flex;
+			align-items: center;
+
+			.item {
+				margin-bottom: 10rpx;
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+		}
+	}
 </style>