|
|
@@ -1,52 +1,51 @@
|
|
|
<template>
|
|
|
- <view class="goodsDetail">
|
|
|
- <image class="good-img" :src="info.goodsPath" mode="aspectFit"></image>
|
|
|
- <view class="goods-info">
|
|
|
- <view class="price-box">
|
|
|
- <view class="left">
|
|
|
- <view class="unit">
|
|
|
- ￥
|
|
|
- </view>
|
|
|
- <view class="price">
|
|
|
- {{info.realPrice}}
|
|
|
- </view>
|
|
|
- <view class="old-price">
|
|
|
- 市场价 ￥{{info.marketPrice}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="right">
|
|
|
- 销量{{info.saleNum}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="goods-name">
|
|
|
- {{info.goodsName}}
|
|
|
- </view>
|
|
|
- <view class="desc">
|
|
|
- {{info.goodsDescribe}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <template v-if="info.specs[0].specValues.length">
|
|
|
- <view class="type-box" v-for="item in info.specs" :key="item.specId">
|
|
|
- <view class="type-title">
|
|
|
- {{item.specName}}
|
|
|
- </view>
|
|
|
- <view class="type-list">
|
|
|
- <view class="type-item" :class="[active == d?'active':'' ]" v-for="(i,d) in item.specValues" :key="i.specId">
|
|
|
- {{i.specValue}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
-
|
|
|
+ <view class="goodsDetail">
|
|
|
+ <image class="good-img" :src="info.goodsPath" mode="aspectFit"></image>
|
|
|
+ <view class="goods-info">
|
|
|
+ <view class="price-box">
|
|
|
+ <view class="left">
|
|
|
+ <view class="unit"> ￥ </view>
|
|
|
+ <view class="price">
|
|
|
+ {{ info.realPrice }}
|
|
|
+ </view>
|
|
|
+ <view class="old-price"> 市场价 ￥{{ info.marketPrice }} </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="right"> 销量{{ info.saleNum }} </view>
|
|
|
+ </view>
|
|
|
+ <view class="goods-name">
|
|
|
+ {{ info.goodsName }}
|
|
|
+ </view>
|
|
|
+ <view class="desc">
|
|
|
+ {{ info.goodsDescribe }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <template v-if="info.specs[0].specValues.length">
|
|
|
+ <view class="type-box" v-for="item in info.specs" :key="item.specId">
|
|
|
+ <view class="type-title">
|
|
|
+ {{ item.specName }}
|
|
|
+ </view>
|
|
|
+ <view class="type-list">
|
|
|
+ <view
|
|
|
+ class="type-item"
|
|
|
+ :class="[active == d ? 'active' : '']"
|
|
|
+ v-for="(i, d) in item.specValues"
|
|
|
+ :key="i.specId"
|
|
|
+ >
|
|
|
+ {{ i.specValue }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <!--
|
|
|
<view class="shop-limit" @click="jump('/detail/shopList/index')">
|
|
|
<view class="info">
|
|
|
<view class="shop-name">
|
|
|
- <!-- 朱光玉火锅（天河店） -->
|
|
|
+
|
|
|
{{shopInfo.shopVo.shopName}}
|
|
|
</view>
|
|
|
<view class="address">
|
|
|
- <!-- 花溪区天河潭旅游度假区天河潭 22.65km -->
|
|
|
+
|
|
|
{{shopInfo.district}} {{(shopInfo.shopVo.distance/1000).toFixed(2)}} KM
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -54,29 +53,35 @@
|
|
|
{{shopList.length}}家店适用
|
|
|
<image class="icon" src="../../static/shop-desc.png" mode=""></image>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="tab-group">
|
|
|
- <view class="tab" :class="[tab == 1 ? 'active':'']" @click="handleTab(1)">
|
|
|
- 商品详情
|
|
|
- </view>
|
|
|
- <view class="tab" :class="[tab == 2 ? 'active':'']" @click="handleTab(2)">
|
|
|
- 购买须知
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="desc-box" v-show="tab == 1">
|
|
|
- <rich-text class="goods-desc" :nodes="info.goodsDetail"></rich-text>
|
|
|
- </view>
|
|
|
- <view class="list" v-show="tab == 2">
|
|
|
- <view class="item" v-for="(item,index) in info.attrs" :key="index">
|
|
|
- <view class="label">
|
|
|
- {{item.attrName == 'validDay'?'有效期':item.attrName}}
|
|
|
- </view>
|
|
|
- <view class="value" v-html="filterMsg(item.attrValue)">
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- <view class="item">
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+ <view class="tab-group">
|
|
|
+ <view
|
|
|
+ class="tab"
|
|
|
+ :class="[tab == 1 ? 'active' : '']"
|
|
|
+ @click="handleTab(1)"
|
|
|
+ >
|
|
|
+ 商品详情
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="tab"
|
|
|
+ :class="[tab == 2 ? 'active' : '']"
|
|
|
+ @click="handleTab(2)"
|
|
|
+ >
|
|
|
+ 购买须知
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="desc-box" v-show="tab == 1">
|
|
|
+ <rich-text class="goods-desc" :nodes="info.goodsDetail"></rich-text>
|
|
|
+ </view>
|
|
|
+ <view class="list" v-show="tab == 2">
|
|
|
+ <view class="item" v-for="(item, index) in info.attrs" :key="index">
|
|
|
+ <view class="label">
|
|
|
+ {{ item.attrName == "validDay" ? "有效期" : item.attrName }}
|
|
|
+ </view>
|
|
|
+ <view class="value" v-html="filterMsg(item.attrValue)"> </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="item">
|
|
|
<view class="label">
|
|
|
使用时间
|
|
|
</view>
|
|
|
@@ -84,14 +89,12 @@
|
|
|
营业时间内可用
|
|
|
</view>
|
|
|
</view> -->
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="buy-box">
|
|
|
- <image class="head" :src="shopInfo.logoPath" @click="goShopDetail(shopInfo)" mode=""></image>
|
|
|
- <view class="btn-box">
|
|
|
-
|
|
|
- <!-- <view class="group-btn" @click="handleBuy">
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="buy-box">
|
|
|
+ <!-- <image class="head" :src="shopInfo.logoPath" @click="goShopDetail(shopInfo)" mode=""></image> -->
|
|
|
+ <view class="btn-box">
|
|
|
+ <!-- <view class="group-btn" @click="handleBuy">
|
|
|
<view class="label">
|
|
|
团购
|
|
|
</view>
|
|
|
@@ -99,348 +102,348 @@
|
|
|
￥{{info.realPrice}}
|
|
|
</view>
|
|
|
</view> -->
|
|
|
- <view class="buy-btn" :class="[info.realStockNum?'':'none']" @click="handleBuy">
|
|
|
- <view class="label">
|
|
|
- {{info.realStockNum?'购买':'售罄'}}
|
|
|
- </view>
|
|
|
- <view class="price">
|
|
|
- ￥{{info.realPrice}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
+
|
|
|
+ <view
|
|
|
+ class="buy-btn"
|
|
|
+ :class="[info.realStockNum ? '' : 'none']"
|
|
|
+ @click="handleBuy"
|
|
|
+ >
|
|
|
+ <view class="label">
|
|
|
+ {{ info.realStockNum ? "购买" : "售罄" }}
|
|
|
+ </view>
|
|
|
+ <view class="price"> ￥{{ info.realPrice }} </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {detail} from '@/api/goods.js'
|
|
|
- import {search} from '@/api/shop.js'
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- active:0,
|
|
|
- tab:1,
|
|
|
- shopList:[],
|
|
|
- info: {},
|
|
|
- shopInfo:{}
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- filterMsg(val){
|
|
|
- return val.replace(/\n/g, "<br>")
|
|
|
- },
|
|
|
- jump(url){
|
|
|
- uni.navigateTo({
|
|
|
- url
|
|
|
- })
|
|
|
- },
|
|
|
- handleTab(val){
|
|
|
- this.tab = val
|
|
|
- },
|
|
|
- handleBuy() {
|
|
|
- if(!this.info.realStockNum) return
|
|
|
- let that = this
|
|
|
- if (uni.getStorageSync('token')) {
|
|
|
- uni.navigateTo({
|
|
|
- url:`/pay/pay`,
|
|
|
- success: function(res) {
|
|
|
- // 通过eventChannel向被打开页面传送数据
|
|
|
- res.eventChannel.emit('pay', that.info)
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.showModal({
|
|
|
- title:'请登录',
|
|
|
- confirmText:'去登录',
|
|
|
- success(res){
|
|
|
- console.log(res);
|
|
|
- if(res.confirm){
|
|
|
- uni.navigateTo({
|
|
|
- url:`/login/login/login?redirect=/detail/goodsDetail/index&id=${that.info.goodsId}`
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- detail(goodsId){
|
|
|
- detail({goodsId,resource:2}).then(res=>{
|
|
|
- if(res.state == 'Success'){
|
|
|
- this.info = res.content
|
|
|
- this.info.goodsDetail = res.content.goodsDetail.replace(/<img/gi, '<img class="img_class" ')
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- goShopDetail(shopInfo) {
|
|
|
- uni.setStorageSync('shopInfo', JSON.stringify(shopInfo))
|
|
|
- uni.navigateTo({
|
|
|
- url: `../../detail/shopDetail/shopDetail`
|
|
|
- })
|
|
|
- },
|
|
|
- getShopList(goodsId){
|
|
|
- let location = JSON.parse(uni.getStorageSync('location'))
|
|
|
- let obj = {
|
|
|
- goodsId,
|
|
|
- pageCurrent:1,
|
|
|
- pageSize:99
|
|
|
- }
|
|
|
- obj['location.lat'] = location.latitude
|
|
|
- obj['location.lon'] = location.longitude
|
|
|
- search(obj).then(res=>{
|
|
|
- if(res.state == 'Success'){
|
|
|
- this.shopList = res.content.records
|
|
|
- uni.setStorageSync('shopList',JSON.stringify(this.shopList))
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
-
|
|
|
- this.shopInfo = JSON.parse(uni.getStorageSync('shopInfo'))
|
|
|
- this.detail(option.id)
|
|
|
- this.getShopList(option.id)
|
|
|
- let that = this
|
|
|
- // this.info = JSON.parse(uni.getStorageSync('goodsInfo'))
|
|
|
- // const eventChannel = this.getOpenerEventChannel();
|
|
|
- // if(JSON.stringify(eventChannel) !=='{}'){
|
|
|
- // eventChannel.on('goodsInfo', function(data) {
|
|
|
- // that.info = data
|
|
|
- // })
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
+import { detail } from "@/api/goods.js";
|
|
|
+import { search } from "@/api/shop.js";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ active: 0,
|
|
|
+ tab: 1,
|
|
|
+ shopList: [],
|
|
|
+ info: {},
|
|
|
+ shopInfo: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ filterMsg(val) {
|
|
|
+ return val.replace(/\n/g, "<br>");
|
|
|
+ },
|
|
|
+ jump(url) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleTab(val) {
|
|
|
+ this.tab = val;
|
|
|
+ },
|
|
|
+ handleBuy() {
|
|
|
+ if (!this.info.realStockNum) return;
|
|
|
+ let that = this;
|
|
|
+ if (uni.getStorageSync("token")) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pay/pay`,
|
|
|
+ success: function (res) {
|
|
|
+ // 通过eventChannel向被打开页面传送数据
|
|
|
+ res.eventChannel.emit("pay", that.info);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showModal({
|
|
|
+ title: "请登录",
|
|
|
+ confirmText: "去登录",
|
|
|
+ success(res) {
|
|
|
+ console.log(res);
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/login/login/login?redirect=/detail/goodsDetail/index&id=${that.info.goodsId}`,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ detail(goodsId) {
|
|
|
+ detail({ goodsId, resource: 2 }).then((res) => {
|
|
|
+ if (res.state == "Success") {
|
|
|
+ this.info = res.content;
|
|
|
+ this.info.goodsDetail = res.content.goodsDetail.replace(
|
|
|
+ /<img/gi,
|
|
|
+ '<img class="img_class" '
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goShopDetail(shopInfo) {
|
|
|
+ uni.setStorageSync("shopInfo", JSON.stringify(shopInfo));
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `../../detail/shopDetail/shopDetail`,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getShopList(goodsId) {
|
|
|
+ let location = JSON.parse(uni.getStorageSync("location"));
|
|
|
+ let obj = {
|
|
|
+ goodsId,
|
|
|
+ pageCurrent: 1,
|
|
|
+ pageSize: 99,
|
|
|
+ };
|
|
|
+ obj["location.lat"] = location.latitude;
|
|
|
+ obj["location.lon"] = location.longitude;
|
|
|
+ search(obj).then((res) => {
|
|
|
+ if (res.state == "Success") {
|
|
|
+ this.shopList = res.content.records;
|
|
|
+ uni.setStorageSync("shopList", JSON.stringify(this.shopList));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.shopInfo = JSON.parse(uni.getStorageSync("shopInfo"));
|
|
|
+ this.detail(option.id);
|
|
|
+ this.getShopList(option.id);
|
|
|
+ let that = this;
|
|
|
+ // this.info = JSON.parse(uni.getStorageSync('goodsInfo'))
|
|
|
+ // const eventChannel = this.getOpenerEventChannel();
|
|
|
+ // if(JSON.stringify(eventChannel) !=='{}'){
|
|
|
+ // eventChannel.on('goodsInfo', function(data) {
|
|
|
+ // that.info = data
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" >
|
|
|
-.goodsDetail{
|
|
|
- background: #F9F9F9;
|
|
|
- padding-bottom: 200rpx;
|
|
|
- min-height: 100vh;
|
|
|
- .good-img{
|
|
|
- width: 100%;
|
|
|
- height: 660rpx;
|
|
|
- vertical-align: bottom;
|
|
|
- }
|
|
|
- .goods-info{
|
|
|
- padding: 24rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- background: #fff;
|
|
|
- .price-box{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .left{
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- .unit{
|
|
|
- font-size: 20rpx;
|
|
|
- color: #FF4D3A;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .price{
|
|
|
- font-size: 32rpx;
|
|
|
- color: #FF4D3A;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .old-price{
|
|
|
- font-size: 20rpx;
|
|
|
- color: #AAAAAA;
|
|
|
- text-decoration: line-through;
|
|
|
- margin-left: 12rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .right{
|
|
|
- font-size: 24rpx;
|
|
|
- color: #AAAAAA;
|
|
|
- }
|
|
|
- }
|
|
|
- .goods-name{
|
|
|
- font-size: 32rpx;
|
|
|
- color: #222222;
|
|
|
- font-weight: bold;
|
|
|
- margin-top: 20rpx;
|
|
|
- }
|
|
|
- .desc{
|
|
|
- font-size: 24rpx;
|
|
|
- color: #AAAAAA;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- margin-top: 12rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .type-box{
|
|
|
- padding: 24rpx;
|
|
|
- background: #fff;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- .type-title{
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
- .type-list{
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- .type-item{
|
|
|
- width: 316rpx;
|
|
|
- height: 52rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 52rpx;
|
|
|
- background: #F0F0F0;
|
|
|
- border-radius: 26rpx 26rpx 26rpx 26rpx;
|
|
|
- font-weight: 300;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #AAAAAA;
|
|
|
- margin-top: 28rpx;
|
|
|
- }
|
|
|
- .type-item.active{
|
|
|
- background: #EE4320;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .shop-limit{
|
|
|
- padding: 24rpx;
|
|
|
- background: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- .info{
|
|
|
- .shop-name{
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
- .address{
|
|
|
- font-size: 24rpx;
|
|
|
- color: #AAAAAA;
|
|
|
- margin-top: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .num{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #AAAAAA;
|
|
|
- .icon{
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- transform: rotate(-90deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tab-group{
|
|
|
- display: flex;
|
|
|
- background: #fff;
|
|
|
- .tab{
|
|
|
- flex:1;
|
|
|
- padding: 24rpx 0;
|
|
|
- text-align: center;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
- .tab.active{
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .desc-box{
|
|
|
- .goods-desc{
|
|
|
- color: #222222;
|
|
|
- font-size: 24rpx;
|
|
|
- .img_class{
|
|
|
- max-width: 100%!important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .list{
|
|
|
- background: #fff;
|
|
|
- .item{
|
|
|
- padding: 24rpx;
|
|
|
- border-top:1rpx solid #F0F0F0;
|
|
|
- .label{
|
|
|
- font-weight: 600;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
- .value{
|
|
|
- font-size: 24rpx;
|
|
|
- color: #AAAAAA;
|
|
|
- margin-top: 16rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .buy-box{
|
|
|
- position: fixed;
|
|
|
- bottom: 0%;
|
|
|
- left: 0%;
|
|
|
- width: 100%;
|
|
|
- background: #fff;
|
|
|
- padding: 10rpx 24rpx 76rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- box-sizing: border-box;
|
|
|
- .head{
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- background: #aaa;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- .btn-box{
|
|
|
- display: flex;
|
|
|
- text-align: center;
|
|
|
- .group-btn{
|
|
|
- width: 280rpx;
|
|
|
- height: 80rpx;
|
|
|
- background: #6499FF;
|
|
|
- border-radius: 40rpx 0rpx 0rpx 40rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- .label{
|
|
|
- font-weight: 600;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- .price{
|
|
|
- font-size: 24rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
- .buy-btn.none{
|
|
|
- filter: grayscale(1);
|
|
|
- }
|
|
|
- .buy-btn{
|
|
|
- // width: 280rpx;
|
|
|
- width: 560rpx;
|
|
|
- height: 80rpx;
|
|
|
- background: #3879F9;
|
|
|
- border-radius: 40rpx;
|
|
|
- // border-radius: 0rpx 40rpx 40rpx 0rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- .label{
|
|
|
- font-weight: 600;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- .price{
|
|
|
- font-size: 24rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+<style lang="scss">
|
|
|
+.goodsDetail {
|
|
|
+ background: #f9f9f9;
|
|
|
+ padding-bottom: 200rpx;
|
|
|
+ min-height: 100vh;
|
|
|
+ .good-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 660rpx;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
+ .goods-info {
|
|
|
+ padding: 24rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ background: #fff;
|
|
|
+ .price-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ .unit {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #ff4d3a;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #ff4d3a;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .old-price {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #aaaaaa;
|
|
|
+ text-decoration: line-through;
|
|
|
+ margin-left: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #aaaaaa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #222222;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #aaaaaa;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .type-box {
|
|
|
+ padding: 24rpx;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .type-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .type-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ .type-item {
|
|
|
+ width: 316rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 52rpx;
|
|
|
+ background: #f0f0f0;
|
|
|
+ border-radius: 26rpx 26rpx 26rpx 26rpx;
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #aaaaaa;
|
|
|
+ margin-top: 28rpx;
|
|
|
+ }
|
|
|
+ .type-item.active {
|
|
|
+ background: #ee4320;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-limit {
|
|
|
+ padding: 24rpx;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .info {
|
|
|
+ .shop-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .address {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #aaaaaa;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #aaaaaa;
|
|
|
+ .icon {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-group {
|
|
|
+ display: flex;
|
|
|
+ background: #fff;
|
|
|
+ .tab {
|
|
|
+ flex: 1;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .tab.active {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc-box {
|
|
|
+ .goods-desc {
|
|
|
+ color: #222222;
|
|
|
+ font-size: 24rpx;
|
|
|
+ .img_class {
|
|
|
+ max-width: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ background: #fff;
|
|
|
+ .item {
|
|
|
+ padding: 24rpx;
|
|
|
+ border-top: 1rpx solid #f0f0f0;
|
|
|
+ .label {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #aaaaaa;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buy-box {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0%;
|
|
|
+ left: 0%;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ padding: 10rpx 24rpx 76rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .head {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #aaa;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .btn-box {
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ .group-btn {
|
|
|
+ width: 280rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #6499ff;
|
|
|
+ border-radius: 40rpx 0rpx 0rpx 40rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ .label {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .buy-btn.none {
|
|
|
+ filter: grayscale(1);
|
|
|
+ }
|
|
|
+ .buy-btn {
|
|
|
+ // width: 280rpx;
|
|
|
+
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background: $uni-color-primary;
|
|
|
+ color: #fff;
|
|
|
+ .label {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
