137 lines
		
	
	
		
			3.4 KiB
		
	
	
	
		
			Vue
		
	
	
			
		
		
	
	
			137 lines
		
	
	
		
			3.4 KiB
		
	
	
	
		
			Vue
		
	
	
| <template>
 | ||
| 	<view class="orderGoods borRadius14">
 | ||
| 		<view class='total'>共{{ totalNmu }}件商品</view>
 | ||
| 		<view class='goodWrapper pad30'>
 | ||
| 			<view class='item acea-row row-between-wrapper' v-for="(item,index) in cartInfo" :key="index"
 | ||
| 				@click="jumpCon(item.spuId)">
 | ||
| 				<view class='pictrue'>
 | ||
| 					<image :src='item.picUrl' />
 | ||
| 				</view>
 | ||
| 				<view class='text'>
 | ||
| 					<view class='acea-row row-between-wrapper'>
 | ||
| 						<view class='name line1'>{{ item.spuName }}</view>
 | ||
| 						<view class='num'>x {{ item.count }}</view>
 | ||
| 					</view>
 | ||
| 					<view class='attr line1'>
 | ||
|             <text v-for="(property, propertyIndex) in item.properties" :key="propertyIndex" style="padding-right: 10rpx;">
 | ||
|               {{ property.valueName }} 
 | ||
|             </text>
 | ||
|           </view>
 | ||
| 					<view class='money font-color'>¥{{ fen2yuan(item.price) }}</view>
 | ||
|           <!-- 售后状态 -->
 | ||
|           <!-- TODO 芋艿:这样式不太合理;应该顺着向右对齐 -->
 | ||
|           <view class="evaluate" style="right: 60px;" v-if="afterSale" @click.stop="afterSaleTap(item)">
 | ||
|             {{
 | ||
|               item.afterSaleStatus === 0 ? '申请退款' :
 | ||
|                 item.afterSaleStatus === 10 ? '退款中' : '退款成功'
 | ||
|             }}
 | ||
|           </view>
 | ||
|           <!-- 评价状态 -->
 | ||
| 					<view class='evaluate' v-if='item.commentStatus === false && evaluate === 2' @click.stop="evaluateTap(item)">评价</view>
 | ||
| 					<view class='evaluate' v-else-if="item.replyStatus === true">已评价</view>
 | ||
| 				</view>
 | ||
| 			</view>
 | ||
| 		</view>
 | ||
| 	</view>
 | ||
| </template>
 | ||
| <script>
 | ||
|   import * as Util from '@/utils/util.js';
 | ||
| 	export default {
 | ||
| 		props: {
 | ||
| 			evaluate: {
 | ||
| 				type: Number,
 | ||
| 				default: 0, // 是否开启评价功能 0 - 不开启;2 - 开启
 | ||
| 			},
 | ||
|       afterSale: { // 是否开启售后功能
 | ||
|         type: Boolean,
 | ||
|         default: false,
 | ||
|       },
 | ||
| 			cartInfo: {
 | ||
| 				type: Array,
 | ||
| 				default: function() {
 | ||
| 					return [];
 | ||
| 				}
 | ||
| 			},
 | ||
| 			orderId: {
 | ||
| 				type: String,
 | ||
| 				default: '',
 | ||
| 			},
 | ||
| 			jump: {
 | ||
| 				type: Boolean,
 | ||
| 				default: false,
 | ||
| 			},
 | ||
| 			productType: {
 | ||
| 				type: Number,
 | ||
| 				default: function() {
 | ||
| 					return 0;
 | ||
| 				}
 | ||
| 			}
 | ||
| 		},
 | ||
| 		data() {
 | ||
| 			return {
 | ||
| 				totalNmu: 0 // 商品数量
 | ||
| 			};
 | ||
| 		},
 | ||
| 		watch: {
 | ||
| 			cartInfo: function(nVal, oVal) {
 | ||
| 				let num = 0
 | ||
| 				nVal.forEach((item, index) => {
 | ||
| 					num += item.count
 | ||
| 				})
 | ||
| 				this.totalNmu =  num
 | ||
| 			}
 | ||
| 		},
 | ||
| 		methods: {
 | ||
| 			evaluateTap(item) {
 | ||
| 				uni.navigateTo({
 | ||
| 					url: "/pages/users/goods_comment_con/index?orderItemId=" + item.id
 | ||
| 				})
 | ||
| 			},
 | ||
|       afterSaleTap(item) {
 | ||
|         if (item.afterSaleStatus === 0) {
 | ||
|           uni.navigateTo({
 | ||
|             url: "/pages/users/goods_return/index?orderId=" + item.orderId + '&orderItemId=' + item.id
 | ||
|           })
 | ||
|           return;
 | ||
|         }
 | ||
|         uni.navigateTo({
 | ||
|           url: "/pages/users/user_return_detail/index?id=" + item.afterSaleId
 | ||
|         })
 | ||
|       },
 | ||
| 			jumpCon: function(id) {
 | ||
| 				let type = this.productType === 0 ?'normal':'video'
 | ||
| 				if (this.jump) {
 | ||
| 					uni.navigateTo({
 | ||
| 						url: `/pages/goods_details/index?id=${id}&type=${type}`
 | ||
| 					})
 | ||
| 				}
 | ||
| 			},
 | ||
| 
 | ||
|       fen2yuan(price) {
 | ||
|         return Util.fen2yuan(price)
 | ||
|       },
 | ||
| 		}
 | ||
| 	}
 | ||
| </script>
 | ||
| <style scoped lang="scss">
 | ||
| 	.orderGoods {
 | ||
| 		background-color: #fff;
 | ||
| 		margin-top: 15rpx;
 | ||
| 	}
 | ||
| 
 | ||
| 	.orderGoods .total {
 | ||
| 		width: 100%;
 | ||
| 		height: 86rpx;
 | ||
| 		padding: 0 24rpx;
 | ||
| 		border-bottom: 2rpx solid #f0f0f0;
 | ||
| 		font-size: 30rpx;
 | ||
| 		color: #282828;
 | ||
| 		line-height: 86rpx;
 | ||
| 		box-sizing: border-box;
 | ||
| 	}
 | ||
| 
 | ||
| 	.pictrue image {
 | ||
| 		background: #f4f4f4;
 | ||
| 	}
 | ||
| </style>
 |