商品详情

pages/good/goodsDetail.vue

@@ -1,22 +1,84 @@
 <template>
-	<view>
-		
-	</view>
+
+	<loading-state ref="pageView" @request="request">
+		<view>
+			<image :src="data.picUrl" style="width: 100vw;height: 100vw;background-color: #FFFFFF;"></image>
+			<view
+				style="margin-top: 9px;margin-left: 9px;margin-right: 9px;border-top-left-radius: 13px;border-top-right-radius: 13px;display: flex;flex-direction: column;align-items: center;background-color: #FFFFFF;padding-top: 11px;">
+				<image src="../../static/goods_price_bg.png"
+					style="width: 90vw;height: 16vw;border-radius: 10px;position: absolute;"></image>
+				<view
+					style="display: flex;flex-direction: row;justify-content: space-between;width: 80vw;position: relative;height: 16vw;align-items: center;color: white;">
+					<view>
+						<text style="font-size: 14px;font-weight: 600;">￥</text>
+						<text style="font-size: 24px;margin-left: 7px;font-weight: 500;">{{data.price}}</text>
+					</view>
+					<view>价值</view>
+				</view>
+
+				<view
+					style="left: 25px;font-size: 18px;width: 90vw;margin: 10px 0px;font-weight: 600;margin-left: 18px;">
+					{{data.name}}
+				</view>
+			</view>
+
+			<view style="display: flex;flex-direction: column;align-items: center;margin-left: 9px;margin-right: 9px;">
+				<view
+					style="border-bottom-left-radius: 13px;border-bottom-right-radius: 13px;background-color: #f9f9f9;width: 100%;display: flex;flex-direction: row;">
+					<image src="../../static/guige.png"
+						style="width: 21px;height: 21px;margin-left: 12px;margin-top: 9px;margin-bottom: 12px;"></image>
+					<view
+						style="height: 21px;line-height: 21px;margin-top: 9px;font-size: 13px;color: #666666;margin-left: 5px;">
+						规格：
+						{{data.remarks}}
+					</view>
+				</view>
+			</view>
+		</view>
+	</loading-state>
 </template>
 
 <script>
 	export default {
 		data() {
 			return {
-				
+				page: {
+					sid: ''
+				},
+				data: {
+					picUrl: '',
+					name: '',
+					price: '',
+					remarks: ''
+				}
 			}
 		},
+		onLoad(options) {
+			this.page.sid = options.sid
+			this.request()
+		},
 		methods: {
-			
+			request() {
+				let _this = this
+				_this.$api.goodsDetail(this.page.sid).then((resp) => {
+					console.log(resp);
+					_this.data = resp
+					_this.$nextTick(() => {
+						_this.$refs.pageView.setLoadState(2)
+					})
+				}).catch(e => {
+					_this.$nextTick(() => {
+						_this.$refs.pageView.setLoadState(1)
+					})
+				})
+			}
 		}
 	}
 </script>
 
 <style>
-
-</style>
+	uni-page-body,
+	page {
+		background: #f3f4f6;
+	}
+</style>