101 lines
3.0 KiB
Vue

<template>
<view class="order-list">
<view class="order-item" v-for="(item, index) in orderList" :key="index">
<view class="order-header">
<text class="order-name">{{ item.orderName }}</text>
<text class="order-number">{{ item.orderNumber }}</text>
</view>
<view class="product-list">
<view
class="product-item"
v-for="(product, pIndex) in item.products"
:key="pIndex"
>
<view class="product-info">
<view class="product-img">
<image :src="product.imageUrl" mode="aspectFit"></image>
<view class="tag" v-if="product.tag">{{ product.tag }}</view>
</view>
<view class="product-details">
<text class="product-name">{{ product.name }}</text>
<text class="product-spec">{{ product.spec }}</text>
<text class="product-unit">{{ product.unit }}</text>
</view>
</view>
<button class="evaluate-btn" @click="evaluateOrder(product)">
评价
</button>
</view>
</view>
</view>
</view>
</template>
<script>
import { request, NavgateTo } from "../../../utils";
export default {
data() {
return {
orderList: [
{
orderName: "衡水商贸国际公司",
orderNumber: "4534534255",
products: [
{
imageUrl: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/product.png",
tag: "当日达",
name: "货品名称",
spec: "货品规格",
unit: "货品单位",
},
{
imageUrl: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/product.png",
tag: "当日达",
name: "货品名称",
spec: "货品规格",
unit: "货品单位",
},
],
},
{
orderNumber: "54352342331",
products: [
{
imageUrl: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/product.png",
tag: "",
name: "货品名称",
spec: "货品规格",
unit: "货品单位",
},
{
imageUrl: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/product.png",
tag: "",
name: "货品名称",
spec: "货品规格",
unit: "货品单位",
},
{
imageUrl: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/product.png",
tag: "",
name: "货品名称",
spec: "货品规格",
unit: "货品单位",
},
],
},
],
};
},
methods: {
evaluateOrder(item) {
console.log("🚀 ~ evaluateOrder ~ orderNumber:", item);
NavgateTo(`../evaluate/index?item=${JSON.stringify(item)}`);
},
},
};
</script>
<style>
@import url("./awaitRated.css");
</style>