742 lines
69 KiB
Vue
742 lines
69 KiB
Vue
|
<template>
|
|||
|
|
<view class="distributor" :style="viewColor">
|
|||
|
|
<view class="headerBg" :style="{ 'background-image': `url(${domain}/static/diy/distribution${keyColor}.png)` }">
|
|||
|
|
<view v-if="openActivity" class="explain" @click="explain">分销说明</view>
|
|||
|
|
<view class="picTxt acea-row row-middle">
|
|||
|
|
<view class="pictrue">
|
|||
|
|
<image class="avatar" :src='userInfo.avatar' v-if="userInfo.avatar"></image>
|
|||
|
|
<image v-else class="avatar" src="/static/images/f.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="text">
|
|||
|
|
<view class="name line1">{{userInfo.nickname}}</view>
|
|||
|
|
<view class="info line1">直接推广人越多，获得的奖励越多哦！</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- menu -->
|
|||
|
|
<view class='nav acea-row' v-if="menus.length && openActivity">
|
|||
|
|
<block v-for="(item,index) in menus" :key="index">
|
|||
|
|
<view class='item'>
|
|||
|
|
<view class='pictrue' style="width: 90rpx; height: 90rpx; background-color: #FFF8EC; border-radius: 100%; text-align: center;">
|
|||
|
|
<image :src='item.img'></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="menu-txt area-row">{{item.title}}</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
<!-- 推荐礼包 -->
|
|||
|
|
<view class="recommend" v-if="openActivity">
|
|||
|
|
<view v-if="fastList.length > 0" class="public_title acea-row row-center-wrapper">
|
|||
|
|
<image :src="domain+'/static/diy/linefx'+keyColor+'.png'"></image>
|
|||
|
|
<view class="name">推荐礼包</view>
|
|||
|
|
<image :src="domain+'/static/diy/linefx'+keyColor+'.png'" class="right"></image>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="fastList.length > 0" class='scroll-product'>
|
|||
|
|
<scroll-view class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;">
|
|||
|
|
<block v-for="(item,index) in fastList" :key='index'>
|
|||
|
|
<view class="itemCon">
|
|||
|
|
<view class="item acea-row row-right">
|
|||
|
|
<view class="picTxt acea-row row-between-wrapper" @click="godDetail(item)">
|
|||
|
|
<view class="pictrue">
|
|||
|
|
<image :src="item.image"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="text">
|
|||
|
|
<view class="name line1">{{item.store_name}}</view>
|
|||
|
|
<text v-if="item.merchant && item.merchant.type_name" class="font-bg-red mt8 b-color">{{item.merchant.type_name}}</text>
|
|||
|
|
<text v-else-if="item.merchant && item.merchant.is_trader" class="font-bg-red mt8 b-color">自营</text>
|
|||
|
|
<view class="money p-color">￥<text class="num">{{item.price}}</text></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="circular bg-color-red"></view>
|
|||
|
|
<view class="open b-color" @click="goBuy(item)">立即开通</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pin" v-if="openActivity">
|
|||
|
|
<view class="public_title acea-row row-center-wrapper">
|
|||
|
|
<image :src="domain+'/static/diy/linefx'+keyColor+'.png'"></image>
|
|||
|
|
<view class="name">分销礼包</view>
|
|||
|
|
<image :src="domain+'/static/diy/linefx'+keyColor+'.png'" class="right"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="list">
|
|||
|
|
<view class="item acea-row row-between-wrapper" v-for="(item, index) in distribution" :key='index' @click="godDetail(item)">
|
|||
|
|
<view class="pictrue">
|
|||
|
|
<image :src="item.image"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="text">
|
|||
|
|
<view class="name line2">
|
|||
|
|
<text v-if="item.merchant && item.merchant.type_name" class="font-bg-red ml8 b-color">{{item.merchant.type_name}}</text>
|
|||
|
|
<text v-else-if="item.merchant && item.merchant.is_trader" class="font-bg-red ml8 b-color">自营</text>
|
|||
|
|
{{item.store_name}}
|
|||
|
|
</view>
|
|||
|
|
<view class="money p-color">￥<text class="num">{{item.price}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="open b-color" @click.stop="goBuy(item)">立即开通</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class='loadingicon acea-row row-center-wrapper' v-if='distribution.length > 0 '>
|
|||
|
|
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="explainTxt" :class="explainShow?'on':''">
|
|||
|
|
<view class="name">分销说明<text class="iconfont icon-guanbi" @click="close"></text></view>
|
|||
|
|
<view class="conter">{{explainTxt}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="mask" v-if="explainShow"></view>
|
|||
|
|
<!-- 组件 -->
|
|||
|
|
<productWindow :attr="attr" :isShow='1' :iSplus='1' :destri='1' @myevent="onMyEvent" @ChangeAttr="ChangeAttr"
|
|||
|
|
@attrVal="attrVal" @iptCartNum="iptCartNum" @goCat="goPay" id='product-window'></productWindow>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Author: CRMEB Team <admin@crmeb.com>
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
import { getUserInfo } from '@/api/user.js';
|
|||
|
|
import { goShopDetail } from '@/libs/order.js'
|
|||
|
|
import { postCartAdd } from '@/api/store.js';
|
|||
|
|
import { bagExplain, bagRecommend, productBag, getProductDetail } from '@/api/store.js';
|
|||
|
|
import ProductWindow from "@/components/productWindow";
|
|||
|
|
import { mapGetters } from "vuex";
|
|||
|
|
import { HTTP_REQUEST_URL } from '@/config/app';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
ProductWindow
|
|||
|
|
},
|
|||
|
|
computed: mapGetters(['viewColor','keyColor']),
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
domain: HTTP_REQUEST_URL,
|
|||
|
|
explainShow: false,
|
|||
|
|
menus: [],
|
|||
|
|
fastList: [],
|
|||
|
|
userInfo: {},
|
|||
|
|
distribution: [],
|
|||
|
|
explainTxt: '',
|
|||
|
|
attr: {
|
|||
|
|
cartAttr: false,
|
|||
|
|
productAttr: [],
|
|||
|
|
productSelect: {}
|
|||
|
|
},
|
|||
|
|
productValue: [], //系统属性
|
|||
|
|
storeInfo: {},
|
|||
|
|
attrValue: '', //已选属性
|
|||
|
|
attrTxt: '请选择', //属性页面提示
|
|||
|
|
cart_num: 1, //购买数量
|
|||
|
|
id: 0, //产品id
|
|||
|
|
loadend: false,
|
|||
|
|
loading: false,
|
|||
|
|
loadTitle: '加载更多',
|
|||
|
|
where: {
|
|||
|
|
page: 1,
|
|||
|
|
limit: 20,
|
|||
|
|
},
|
|||
|
|
openActivity: false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {},
|
|||
|
|
onShow: function() {
|
|||
|
|
this.bagExplain();
|
|||
|
|
this.productBag();
|
|||
|
|
this.bagRecommend();
|
|||
|
|
this.getUserInfo();
|
|||
|
|
},
|
|||
|
|
// 滚动到底部
|
|||
|
|
onReachBottom() {
|
|||
|
|
this.productBag();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
goBuy: function(item) {
|
|||
|
|
let that = this;
|
|||
|
|
that.id = item.product_id;
|
|||
|
|
that.getGoodsDetails(item);
|
|||
|
|
},
|
|||
|
|
onMyEvent: function() {
|
|||
|
|
this.$set(this.attr, 'cartAttr', false);
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 获取产品详情
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
getGoodsDetails: function(item) {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '加载中',
|
|||
|
|
mask: true
|
|||
|
|
});
|
|||
|
|
let that = this;
|
|||
|
|
getProductDetail(item.product_id).then(res => {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
that.attr.cartAttr = true;
|
|||
|
|
let storeInfo = res.data;
|
|||
|
|
that.$set(that, 'storeInfo', storeInfo);
|
|||
|
|
that.$set(that.attr, 'productAttr', res.data.attr);
|
|||
|
|
that.$set(that, 'productValue', res.data.sku);
|
|||
|
|
that.DefaultSelect();
|
|||
|
|
}).catch(err => {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
//状态异常返回上级页面
|
|||
|
|
// return that.$util.Tips({
|
|||
|
|
// title: err.toString()
|
|||
|
|
// }, {
|
|||
|
|
// tab: 3,
|
|||
|
|
// url: 1
|
|||
|
|
// });
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 属性变动赋值
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
ChangeAttr: function(res) {
|
|||
|
|
let productSelect = this.productValue[res];
|
|||
|
|
if (productSelect && productSelect.stock > 0) {
|
|||
|
|
this.$set(this.attr.productSelect, "image", productSelect.image);
|
|||
|
|
this.$set(this.attr.productSelect, "price", productSelect.price);
|
|||
|
|
this.$set(this.attr.productSelect, "stock", productSelect.stock);
|
|||
|
|
this.$set(this.attr.productSelect, "unique", productSelect.unique);
|
|||
|
|
this.$set(this.attr.productSelect, "cart_num", 1);
|
|||
|
|
this.$set(this, "attrValue", res);
|
|||
|
|
this.$set(this, "attrTxt", "已选择");
|
|||
|
|
} else {
|
|||
|
|
this.$set(this.attr.productSelect, "image", this.storeInfo.image);
|
|||
|
|
this.$set(this.attr.productSelect, "price", this.storeInfo.price);
|
|||
|
|
this.$set(this.attr.productSelect, "stock", 0);
|
|||
|
|
this.$set(this.attr.productSelect, "unique", "");
|
|||
|
|
this.$set(this.attr.productSelect, "cart_num", 0);
|
|||
|
|
this.$set(this, "attrValue", "");
|
|||
|
|
this.$set(this, "attrTxt", "请选择");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 默认选中属性
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
DefaultSelect: function() {
|
|||
|
|
let productAttr = this.attr.productAttr;
|
|||
|
|
let value = [];
|
|||
|
|
let arr = [];
|
|||
|
|
let unSortArr = [];
|
|||
|
|
for (var key in this.productValue) {
|
|||
|
|
if (this.productValue[key].stock > 0) {
|
|||
|
|
value = this.attr.productAttr.length ? key.split(",") : [];
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < productAttr.length; i++) {
|
|||
|
|
this.$set(productAttr[i], "index", value[i]);
|
|||
|
|
}
|
|||
|
|
//sort();排序函数:数字-英文-汉字；
|
|||
|
|
let productSelect = this.productValue[value.join(",")];
|
|||
|
|
if (productSelect && productAttr.length) {
|
|||
|
|
this.$set(
|
|||
|
|
this.attr.productSelect,
|
|||
|
|
"store_name",
|
|||
|
|
this.storeInfo.store_name
|
|||
|
|
);
|
|||
|
|
this.$set(this.attr.productSelect, "image", productSelect.image);
|
|||
|
|
this.$set(this.attr.productSelect, "price", productSelect.price);
|
|||
|
|
this.$set(this.attr.productSelect, "stock", productSelect.stock);
|
|||
|
|
this.$set(this.attr.productSelect, "unique", productSelect.unique);
|
|||
|
|
|
|||
|
|
this.$set(this, "attrValue", value.join(","));
|
|||
|
|
this.$set(this, "attrTxt", "已选择");
|
|||
|
|
if (productSelect.stock == 0) {
|
|||
|
|
this.$set(this.attr.productSelect, "cart_num", 0);
|
|||
|
|
} else {
|
|||
|
|
this.$set(this.attr.productSelect, "cart_num", 1);
|
|||
|
|
}
|
|||
|
|
} else if (!productSelect && productAttr.length) {
|
|||
|
|
this.$set(
|
|||
|
|
this.attr.productSelect,
|
|||
|
|
"store_name",
|
|||
|
|
this.storeInfo.store_name
|
|||
|
|
);
|
|||
|
|
this.$set(this.attr.productSelect, "image", this.storeInfo.image);
|
|||
|
|
this.$set(this.attr.productSelect, "price", this.storeInfo.price);
|
|||
|
|
this.$set(this.attr.productSelect, "stock", 0);
|
|||
|
|
this.$set(this.attr.productSelect, "unique", "");
|
|||
|
|
this.$set(this.attr.productSelect, "cart_num", 0);
|
|||
|
|
this.$set(this, "attrValue", "");
|
|||
|
|
this.$set(this, "attrTxt", "请选择");
|
|||
|
|
} else if (!productSelect && !productAttr.length) {
|
|||
|
|
this.$set(
|
|||
|
|
this.attr.productSelect,
|
|||
|
|
"store_name",
|
|||
|
|
this.storeInfo.store_name
|
|||
|
|
);
|
|||
|
|
this.$set(this.attr.productSelect, "image", this.storeInfo.image);
|
|||
|
|
this.$set(this.attr.productSelect, "price", this.storeInfo.price);
|
|||
|
|
this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
|
|||
|
|
this.$set(
|
|||
|
|
this.attr.productSelect,
|
|||
|
|
"unique",
|
|||
|
|
this.storeInfo.unique || ""
|
|||
|
|
);
|
|||
|
|
this.$set(this.attr.productSelect, "cart_num", 1);
|
|||
|
|
this.$set(this, "attrValue", "");
|
|||
|
|
this.$set(this, "attrTxt", "请选择");
|
|||
|
|
} else if (productSelect && !productAttr.length) {
|
|||
|
|
this.$set(
|
|||
|
|
this.attr.productSelect,
|
|||
|
|
"store_name",
|
|||
|
|
this.storeInfo.store_name
|
|||
|
|
);
|
|||
|
|
this.$set(this.attr.productSelect, "image", productSelect.image);
|
|||
|
|
this.$set(this.attr.productSelect, "price", productSelect.price);
|
|||
|
|
this.$set(this.attr.productSelect, "stock", productSelect.stock);
|
|||
|
|
this.$set(this.attr.productSelect, "unique", productSelect.unique);
|
|||
|
|
|
|||
|
|
this.$set(this, "attrValue", value.join(","));
|
|||
|
|
this.$set(this, "attrTxt", "已选择");
|
|||
|
|
if (productSelect.stock == 0) {
|
|||
|
|
this.$set(this.attr.productSelect, "cart_num", 0);
|
|||
|
|
} else {
|
|||
|
|
this.$set(this.attr.productSelect, "cart_num", 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 购物车数量加和数量减
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
ChangeCartNum: function(changeValue) {
|
|||
|
|
//changeValue:是否 加|减
|
|||
|
|
//获取当前变动属性
|
|||
|
|
let productSelect = this.productValue[this.attrValue];
|
|||
|
|
//如果没有属性,赋值给商品默认库存
|
|||
|
|
if (productSelect === undefined && !this.attr.productAttr.length)
|
|||
|
|
productSelect = this.attr.productSelect;
|
|||
|
|
//无属性值即库存为0；不存在加减；
|
|||
|
|
if (productSelect === undefined) return;
|
|||
|
|
let stock = productSelect.stock || 0;
|
|||
|
|
let num = this.attr.productSelect;
|
|||
|
|
if (changeValue) {
|
|||
|
|
num.cart_num++;
|
|||
|
|
if (num.cart_num > stock) {
|
|||
|
|
this.$set(this.attr.productSelect, "cart_num", stock);
|
|||
|
|
this.$set(this, "cart_num", stock);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
num.cart_num--;
|
|||
|
|
if (num.cart_num < 1) {
|
|||
|
|
this.$set(this.attr.productSelect, "cart_num", 1);
|
|||
|
|
this.$set(this, "cart_num", 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
attrVal(val) {
|
|||
|
|
this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val.indexn]);
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 购物车手动填写
|
|||
|
|
*
|
|||
|
|
*/
|
|||
|
|
iptCartNum: function(e) {
|
|||
|
|
this.$set(this.attr.productSelect, 'cart_num', e);
|
|||
|
|
},
|
|||
|
|
// 立即购买
|
|||
|
|
goPay() {
|
|||
|
|
let that = this,
|
|||
|
|
productSelect = that.productValue[this.attrValue];
|
|||
|
|
if (
|
|||
|
|
that.attr.productAttr.length &&
|
|||
|
|
productSelect.stock == 0
|
|||
|
|
)
|
|||
|
|
return that.$util.Tips({
|
|||
|
|
title: "产品库存不足，请选择其它"
|
|||
|
|
});
|
|||
|
|
let q = {
|
|||
|
|
product_id: that.id,
|
|||
|
|
cart_num: Number(that.attr.productSelect.cart_num),
|
|||
|
|
is_new: 1,
|
|||
|
|
product_attr_unique: that.attr.productSelect !== undefined ? that.attr.productSelect.unique : ""
|
|||
|
|
};
|
|||
|
|
postCartAdd(q)
|
|||
|
|
.then(function(res) {
|
|||
|
|
that.attr.cartAttr = false;
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/users/order_confirm/index?cartId=' + res.data.cart_id
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.catch(res => {
|
|||
|
|
return that.$util.Tips({
|
|||
|
|
title: res
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 去商品详情
|
|||
|
|
godDetail(item) {
|
|||
|
|
goShopDetail(item).then(res => {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/goods_details/index?id=${item.product_id}`
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 分销
|
|||
|
|
productBag: function() {
|
|||
|
|
let that = this;
|
|||
|
|
if (that.loadend) return;
|
|||
|
|
if (that.loading) return;
|
|||
|
|
that.loading = true;
|
|||
|
|
that.loadTitle = '';
|
|||
|
|
productBag(that.where).then(res => {
|
|||
|
|
let list = res.data.list;
|
|||
|
|
let productList = that.$util.SplitArray(list, that.distribution);
|
|||
|
|
let loadend = list.length < that.where.limit;
|
|||
|
|
that.loadend = loadend;
|
|||
|
|
that.loading = false;
|
|||
|
|
that.loadTitle = loadend ? '已全部加载' : '加载更多';
|
|||
|
|
that.$set(that, 'distribution', productList);
|
|||
|
|
that.$set(that.where, 'page', that.where.page + 1);
|
|||
|
|
}).catch(err => {
|
|||
|
|
that.loading = false;
|
|||
|
|
that.loadTitle = '加载更多';
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 推荐
|
|||
|
|
bagRecommend: function() {
|
|||
|
|
let that = this;
|
|||
|
|
bagRecommend().then(res => {
|
|||
|
|
this.fastList = res.data.list
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 获取个人用户信息
|
|||
|
|
*/
|
|||
|
|
getUserInfo: function() {
|
|||
|
|
let that = this;
|
|||
|
|
getUserInfo().then(res => {
|
|||
|
|
that.userInfo = res.data
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 说明以及导航
|
|||
|
|
bagExplain: function() {
|
|||
|
|
let that = this;
|
|||
|
|
bagExplain().then(res => {
|
|||
|
|
let data = res.data;
|
|||
|
|
this.menus = data.data;
|
|||
|
|
this.explainTxt = data.explain;
|
|||
|
|
this.openActivity = true
|
|||
|
|
}).catch(res => {
|
|||
|
|
this.openActivity = false
|
|||
|
|
return that.$util.Tips({
|
|||
|
|
title: res
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
explain() {
|
|||
|
|
this.explainShow = true;
|
|||
|
|
},
|
|||
|
|
close() {
|
|||
|
|
this.explainShow = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
.area-row {
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
display: block;
|
|||
|
|
width: 80%;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.b-color {
|
|||
|
|
border: 1rpx solid var(--view-theme);
|
|||
|
|
background-color: var(--view-theme);
|
|||
|
|
}
|
|||
|
|
.distributor {
|
|||
|
|
.headerBg {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 371rpx;
|
|||
|
|
//background-image: url('data:image/png;base64,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
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
position: relative;
|
|||
|
|
.explain {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 30rpx;
|
|||
|
|
right: 0;
|
|||
|
|
width: 134rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
background: linear-gradient(-90deg, rgba(239, 215, 168, 1) 0%, rgba(248, 230, 193, 1) 100%);
|
|||
|
|
border-radius: 20px 0px 0px 20px;
|
|||
|
|
color: var(--view-theme);
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
}
|
|||
|
|
.picTxt {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 60rpx;
|
|||
|
|
bottom: 38rpx;
|
|||
|
|
.pictrue {
|
|||
|
|
width: 84rpx;
|
|||
|
|
height: 84rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
color: #814C07;
|
|||
|
|
margin-left: 19rpx;
|
|||
|
|
width: 500rpx;
|
|||
|
|
}
|
|||
|
|
.info {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #BB8D59;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.nav {
|
|||
|
|
padding: 0 0rpx 30rpx;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
.item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 25%;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
image {
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: relative;
|
|||
|
|
top: 20rpx;
|
|||
|
|
}
|
|||
|
|
.picture{
|
|||
|
|
border: 40rpx solid #FFF8EC;
|
|||
|
|
}
|
|||
|
|
.menu-txt {
|
|||
|
|
color: #B99450;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.public_title {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
image {
|
|||
|
|
width: 119rpx;
|
|||
|
|
height: 15rpx;
|
|||
|
|
&.right {
|
|||
|
|
transform: rotate(180deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.name {
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
color: var(--view-theme);
|
|||
|
|
margin: 0 19rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.recommend {
|
|||
|
|
.scroll-product {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
margin-top: 45rpx;
|
|||
|
|
padding-left: 30rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
.scroll-view_x {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.itemCon {
|
|||
|
|
display: inline-block;
|
|||
|
|
.item {
|
|||
|
|
width: 430rpx;
|
|||
|
|
height: 156rpx;
|
|||
|
|
margin-right: 30rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
position: relative;
|
|||
|
|
box-shadow: 0 10rpx 20rpx -5rpx #eee;
|
|||
|
|
.circular {
|
|||
|
|
width: 20rpx;
|
|||
|
|
height: 20rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
margin-top: -10rpx;
|
|||
|
|
right: 40rpx;
|
|||
|
|
}
|
|||
|
|
.open {
|
|||
|
|
width: 60rpx;
|
|||
|
|
writing-mode: vertical-lr;
|
|||
|
|
writing-mode: tb-lr;
|
|||
|
|
color: #fff;
|
|||
|
|
height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 70rpx;
|
|||
|
|
border-radius: 0 8rpx 8rpx 0;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
.picTxt {
|
|||
|
|
width: 382rpx;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 0 8rpx 8rpx 0;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
background-color: #fff;
|
|||
|
|
.pictrue {
|
|||
|
|
width: 156rpx;
|
|||
|
|
height: 100%;
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 8rpx 0 0 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
width: 210rpx;
|
|||
|
|
padding-right: 10rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.name {
|
|||
|
|
width: 210rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #282828;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.money {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
margin-top: 26rpx;
|
|||
|
|
color: var(--view-priceColor);
|
|||
|
|
.num {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.pin {
|
|||
|
|
.list {
|
|||
|
|
padding-left: 30rpx;
|
|||
|
|
margin-top: 50rpx;
|
|||
|
|
.item {
|
|||
|
|
position: relative;
|
|||
|
|
.pictrue {
|
|||
|
|
width: 210rpx;
|
|||
|
|
height: 210rpx;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
&~.item {
|
|||
|
|
margin-top: 60rpx;
|
|||
|
|
.text {
|
|||
|
|
&::after {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 1px;
|
|||
|
|
position: absolute;
|
|||
|
|
content: '';
|
|||
|
|
top: -30rpx;
|
|||
|
|
background-color: #F0F0F0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
position: relative;
|
|||
|
|
width: 460rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #282828;
|
|||
|
|
padding-right: 30rpx;
|
|||
|
|
.name {
|
|||
|
|
height: 75rpx;
|
|||
|
|
}
|
|||
|
|
.money {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
margin-top: 75rpx;
|
|||
|
|
color: var(--view-priceColor);
|
|||
|
|
.num {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.open {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 144rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
right: 30rpx;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.explainTxt {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 20%;
|
|||
|
|
left: 50%;
|
|||
|
|
width: 600rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin-left: -300rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
z-index: 32;
|
|||
|
|
padding: 33rpx;
|
|||
|
|
transition: all 0.3s ease-in-out 0s;
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: scale(0);
|
|||
|
|
&.on {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
.name {
|
|||
|
|
font-size: 38rpx;
|
|||
|
|
position: relative;
|
|||
|
|
text-align: center;
|
|||
|
|
color: var(--view-theme);
|
|||
|
|
.iconfont {
|
|||
|
|
position: absolute;
|
|||
|
|
color: #999999;
|
|||
|
|
font-size: 37rpx;
|
|||
|
|
top: -10rpx;
|
|||
|
|
right: 0rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.conter {
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #282828;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
max-height: 600rpx;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|