123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770 |
- <template>
- <view class="container">
-
- <top-swiper :imgList="imgList"></top-swiper>
-
- <product-content :goodsObjact="goodsObjact" @callf="callf"></product-content>
-
-
-
-
-
- <estimate @navTo="navTo('/pages/product/reply?id=' + goodsid)" v-if="reply" :reply="reply" :list="list"></estimate>
-
- <fresh-detail :goodsObjact="goodsObjact"></fresh-detail>
-
- <content-text :description="description"></content-text>
-
- <view class="contentBottomHeight"></view>
-
- <product-bottom @buy="buy" :goodsObjact="goodsObjact" :goodsid="goodsid" @specOPne="specOPne" :showAdd="showAdd"></product-bottom>
-
- <view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
-
- <view class="mask"></view>
- <view class="layer attr-content" @click.stop="stopPrevent">
- <view class="a-t">
- <image :src="actionImage"></image>
- <view class="right">
- <text class="name clamp">{{ goodsObjact.store_name }}</text>
- <view class="price">
- <text>¥</text>
- {{ actionPrice * goodsNumber }}
- </view>
- <image src="../../static/icon/del.png" mode="" class="right-img" @click="close()"></image>
- </view>
- </view>
- <view v-for="(item, index) in specList" :key="index" class="attr-list">
- <text>选择{{ item.attr_name }}分类</text>
- <view class="item-list">
- <text
- v-for="(childItem, childIndex) in item.attr_value"
- :key="childIndex"
- class="tit"
- :class="{ selected: childItem.check }"
- @click="selectSpec(childItem, item, index)"
- >
- {{ childItem.attr }}
- </text>
- </view>
- </view>
- <view class="mun-box">
- <text>购买数量</text>
- <view class="num">
- <uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax" @eventChange="numberChange"></uni-number-box>
- </view>
- </view>
- <button class="btn" @click.stop="buy" v-show="buys_show">完成</button>
- <button class="btn" style="background-color: #999999;" v-show="buys_shows">售罄</button>
- </view>
- </view>
- <view class="mask" v-if="show"><image @click="onTap" src="../../static/img/shareimg.png"></image></view>
- </view>
- </template>
- <script>
- import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
- import { goodsDetail, cartAdd, seckillGoods } from '@/api/product.js';
- import { mapState } from 'vuex';
- import store from '@/store/index.js';
- import { saveUrl } from '@/utils/loginUtils.js';
- import { weixindata } from '@/utils/wxAuthorized';
- import topSwiper from './common/topSwiper.vue';
- import productContent from './common/productContent.vue';
- import discounts from './common/discounts.vue';
- import freshDetail from './common/freshDetail.vue';
- import contentText from './common/contentText.vue';
- import productBottom from './common/productBottom.vue';
- import guessLike from './common/guessLike.vue';
- import estimate from './common/estimate.vue';
- import uniNumberBox from '@/components/uni-number-box.vue';
- export default {
- components: {
- guessLike,
- topSwiper,
- productContent,
- discounts,
- freshDetail,
- contentText,
- productBottom,
- estimate,
- uniNumberBox
- },
- data() {
- return {
- show: false,
- showAdd: true,
- isShare: false,
- goodsStore: 0,
- specList: [],
- buys_show: true,
- buys_shows: false,
- specSelected: [],
- specClass: 'none',
- many: 1,
- reply: '',
- list: '',
- type: 1,
- goodsType: 0,
- goodsNumber: 1,
- goodsid: '',
- description: '',
- goodsObjact: {
- percent: 1
- },
-
- imgList: [],
-
- actionPrice: 0,
- actionImage: '',
- good_list: '',
- goodsNumberMax: 0,
-
- seckillObj: {
- stopTime: 0,
- stop: false,
- stopTimeH: 0,
- stopTimeM: 0,
- stopTimeS: 0,
- stopTimeD: 0,
- upTime: 0
- },
-
- pink: {
- id: '',
- uid: '',
- people: '',
- price: '',
- stop_time: '',
- nickname: '',
- avatar: '',
- count: '',
- h: '',
- i: '',
- s: ''
- },
- userInfo: '',
- is_drop: false,
- showDrop: false
- };
- },
- filters: {
- parseIntTo(percent) {
- percent = +percent * 100;
- if (percent % 1 === 0) {
- return percent;
- } else {
- percent = percent.toFixed(1);
- return percent;
- }
- }
- },
- async onLoad(options) {
- let obj = this;
- obj.userInfo = uni.getStorageSync('userInfo');
-
- this.goodsid = options.id;
- if (options.type) {
- this.goodsType = options.type;
- }
-
- if (options.spread) {
-
- uni.setStorageSync('spread', options.spread);
- }
- saveUrl();
- this.goodsDetail();
-
-
- let bool = uni.getStorageSync('weichatBrowser') || '';
- if (bool) {
- weixindata();
- }
-
- },
- computed: {
- ...mapState(['weichatObj', 'baseURL', 'urlFile'])
- },
-
- onShareAppMessage(options) {
-
- let pages = getCurrentPages();
- let currentPage = pages[pages.length - 1];
- let url = currentPage.route;
- let item = currentPage.options;
- let shareObj = {
- title: this.goodsObjact.store_name + ' 价格:' + this.goodsObjact.price,
- path: url + '?id=' + item.id + '&spread=' + this.userInfo.uid,
- imageUrl: this.goodsObjact.image,
- success: function(res) {
-
- if (res.errMsg == 'shareAppMessage:ok') {
- }
- },
- fail: function() {
-
- if (res.errMsg == 'shareAppMessage:fail cancel') {
-
- } else if (res.errMsg == 'shareAppMessage:fail') {
-
- }
- }
- };
- return shareObj;
- },
- methods: {
-
- dropClick(val) {
- if (val == 1) {
- this.is_drop = true;
- } else {
- this.is_drop = false;
- }
- },
-
- numberChange(e) {
- console.log(e);
- this.goodsNumber = e.number;
- },
- close() {
- this.specClass = 'none';
- },
-
- selectSpec(item, arr, ind) {
- arr.attr_value.forEach(function(e) {
- e.check = false;
- });
- item.check = true;
- let obj = this;
- obj.specSelected[ind] = item.attr;
- let str = obj.specSelected.join(',');
-
- if (obj.productValue[str]) {
- obj.buys_show = true;
- obj.buys_shows = false;
- obj.actionPrice = obj.productValue[str].price;
- obj.goodsNumberMax = obj.productValue[str].stock;
- obj.actionImage = obj.productValue[str].image;
- obj.uniqueId = obj.productValue[str].unique;
- obj.goodsStore = obj.productValue[str].stock;
- } else {
- (obj.buys_show = false), (obj.buys_shows = true);
- }
- if (obj.goodsStore == 0) {
- obj.buys_show = false;
- obj.buys_shows = true;
- }
- obj.specSelected[ind] = item.attr;
- },
-
- specOPne(type = 1) {
- let obj = this;
- obj.specClass = 'show';
- obj.type = type;
- },
-
- toggleSpec(str) {
- if (this.specClass === 'show') {
- this.specClass = 'hide';
- setTimeout(() => {
- this.specClass = 'none';
- }, 250);
- } else if (this.specClass === 'none') {
- this.specClass = 'show';
- }
-
- this.type = str;
- },
-
- Getcoupon() {
- uni.navigateTo({
- url: '/pages/coupon/getcoupon'
- });
- },
-
- navToDetailPage(item) {
- let id = item.id;
- uni.navigateTo({
- url: '/pages/product/product?id=' + id
- });
- },
-
- navTo(url) {
- uni.navigateTo({
- url: '/pages/product/reply?id=' + this.goodsid
- });
- },
-
- Addcar(item) {
- let obj = this;
- cartAdd({
- cartNum: '1',
- uniqueId: '',
- new: 0,
- mer_id: '',
- productId: item.id
- })
- .then(function(e) {
- uni.showToast({
- title: '成功加入购物车',
- type: 'top',
- duration: 500,
- icon: 'none'
- });
- obj.goodsDetail();
- })
- .catch(e => {
- console.log(e);
- });
- },
- goodsDetail() {
- let obj = this;
-
- if (obj.goodsType == 0) {
- goodsDetail({}, this.goodsid).then(function({ data }) {
- obj.list = data;
- console.log(obj.list, '普通商品数据');
- obj.good_list = data.good_list;
- obj.reply = data.reply;
- let goods = data.storeInfo;
- if (goods.is_drop == 1) {
- obj.showAdd = false;
- obj.showDrop = true;
- obj.is_drop = true;
- }
- obj.goodsObjact = goods;
- if (obj.goodsObjact.description != null) {
- obj.description = obj.goodsObjact.description.replace(/\<img/gi, '<img class="rich-img"');
- }
- obj.imgList = goods.slider_image;
- obj.specList = data.productAttr;
- if (Array.isArray(data.productValue) != true) {
- console.log('开始处理数据');
- obj.many = 2;
- obj.specList = data.productAttr;
- obj.productValue = data.productValue;
- obj.specSelected = [];
- for (let i = 0; i < obj.specList.length; i++) {
- console.log('数据处理');
-
- const ls = obj.specList[i].attr_value;
- ls[0].check = true;
- obj.specSelected.push(ls[0].attr);
-
-
-
-
-
-
-
- }
- const str = obj.specSelected.join(',');
- console.log(str, 'str');
-
- obj.actionPrice = obj.productValue[str].price;
- obj.goodsNumberMax = obj.productValue[str].stock;
- obj.actionImage = obj.productValue[str].image;
- obj.uniqueId = obj.productValue[str].unique;
- obj.goodsStore = obj.productValue[str].stock;
- } else {
- obj.many = 1;
- obj.productValue = data.productValue;
- obj.actionPrice = goods.price;
- obj.actionImage = goods.image_base;
- obj.goodsNumberMax = goods.stock;
- }
- obj.shopId = data.mer_id;
- console.log('数据处理完毕');
- });
- }
-
- if (obj.goodsType == 1) {
- obj.showAdd = false;
- seckillGoods({}, this.goodsid).then(function({ data }) {
- obj.list = data;
- console.log(obj.list, '秒杀商品数据++++++++++');
- obj.reply = data.reply;
- let goods = data.storeInfo;
- if (goods.is_drop == 1) {
- obj.showDrop = true;
- }
- obj.goodsNumberMax = goods.num;
- console.log(obj.seckillObj, '数据');
- obj.goodsObjact = goods;
- if (obj.goodsObjact.description != null) {
- obj.description = obj.goodsObjact.description.replace(/\<img/gi, '<img class="rich-img"');
- }
- obj.imgList = goods.images;
- obj.specList = data.productAttr;
- if (Array.isArray(data.productValue) != true) {
- console.log('多规格+++++++++++++');
- obj.many = 2;
- obj.specList = data.productAttr;
- obj.productValue = data.productValue;
- obj.specSelected = [];
- for (let i = 0; i < obj.specList.length; i++) {
-
- let attrValue = obj.specList[i].attr_value[0];
- attrValue.check = true;
- obj.specSelected.push(attrValue.attr);
- }
- let str = obj.specSelected.join(',');
- console.log(str, 'str');
-
- obj.actionPrice = obj.productValue[str].price;
-
-
- obj.actionImage = obj.productValue[str].image;
- obj.uniqueId = obj.productValue[str].unique;
- obj.goodsStore = obj.productValue[str].stock;
- } else {
- console.log('单规格+++++++++++++');
- obj.many = 1;
- obj.productValue = data.productValue;
- obj.actionPrice = goods.price;
- obj.actionImage = goods.image_base;
-
- console.log(obj.goodsNumberMax, 'obj.goodsNumberMax---------------');
- obj.shopId = data.mer_id;
- }
- });
- }
- },
-
- buy() {
- let obj = this;
-
- let data = {
- cartNum: obj.goodsNumber,
- new: 1,
- productId: obj.goodsid,
- uniqueId: obj.uniqueId,
- is_drop: obj.is_drop ? 1 : 0
- };
- if (obj.type == 2) {
- data.new = 0;
- }
- cartAdd(data)
- .then(function(e) {
- let da = e.data;
- if (obj.type == 1) {
-
- let a = obj.is_drop ? 1 : 0;
- console.log(a);
- uni.navigateTo({
- url: '/pages/order/createOrder?id=' + da.cartId + '&isdrop=' + a
- });
- }
- if (obj.type == 2) {
- uni.showToast({
- title: '成功加入购物车',
- type: 'top',
- duration: 2000,
- icon: 'none'
- });
- obj.goodsDetail();
- }
- obj.toggleSpec();
- })
- .catch(e => {
- console.log(e);
- });
- },
-
- stopPrevent() {},
- callf() {
- console.log('dianj');
- this.show = true;
- },
- onTap() {
- console.log(this.callf);
- if (!this.callf) return;
- this.closess();
- },
- closess() {
- this.show = false;
- }
- }
- };
- </script>
- <style lang="scss">
- /* 弹出层 */
- .popup {
- position: fixed;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- z-index: 99;
- &.show {
- display: block;
- .mask {
- animation: showPopup 0.2s linear both;
- }
- .layer {
- animation: showLayer 0.2s linear both;
- }
- }
- &.hide {
- .mask {
- animation: hidePopup 0.2s linear both;
- }
- .layer {
- animation: hideLayer 0.2s linear both;
- }
- }
- &.none {
- display: none;
- }
- .mask {
- position: fixed;
- top: 0;
- width: 100%;
- height: 100%;
- z-index: 1;
- background-color: rgba(0, 0, 0, 0.4);
- }
- .layer {
- position: fixed;
- z-index: 99;
- bottom: 0;
- width: 100%;
- min-height: 20vh;
- border-radius: 10rpx 10rpx 0 0;
- background-color: #fff;
- .btn {
- height: 66rpx;
- line-height: 66rpx;
- border-radius: 100rpx;
- background: $uni-color-primary;
- font-size: $font-base + 2rpx;
- color: #fff;
- margin: 30rpx auto 20rpx;
- }
- }
- @keyframes showPopup {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @keyframes hidePopup {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
- @keyframes showLayer {
- 0% {
- transform: translateY(120%);
- }
- 100% {
- transform: translateY(0%);
- }
- }
- @keyframes hideLayer {
- 0% {
- transform: translateY(0);
- }
- 100% {
- transform: translateY(120%);
- }
- }
- }
- /* 规格选择弹窗 */
- .attr-content {
- padding: 25rpx 30rpx;
- .a-t {
- display: flex;
- image {
- width: 170rpx;
- height: 170rpx;
- flex-shrink: 0;
- border-radius: 8rpx;
- }
- .right {
- display: flex;
- flex-direction: column;
- padding-left: 24rpx;
- font-size: $font-sm + 2rpx;
- color: $font-color-base;
- line-height: 42rpx;
- width: 75%;
- position: relative;
- .right-img {
- width: 37rpx;
- height: 37rpx;
- position: absolute;
- right: 0;
- top: 20rpx;
- // background-color: red;
- }
- .price {
- position: absolute;
- bottom: 0;
- font-size: $font-lg;
- color: $uni-color-primary;
- margin: 10rpx 0rpx;
- font-size: 60rpx;
- font-family: PingFang SC;
- font-weight: bold;
- color: #ef041f;
- text {
- font-size: 30rpx;
- }
- }
- .name {
- width: 350rpx;
- font-size: 32rpx;
- color: $font-color-dark;
- height: 50rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- display: block;
- font-size: 30rpx;
- font-family: PingFang SC;
- font-weight: bold;
- color: #1d2023;
- }
- .selected-text {
- margin-right: 10rpx;
- }
- }
- }
- .attr-list {
- display: flex;
- flex-direction: column;
- font-size: $font-base + 2rpx;
- color: $font-color-base;
- padding-top: 30rpx;
- padding-left: 10rpx;
- }
- .item-list {
- padding: 20rpx 0 0;
- display: flex;
- flex-wrap: wrap;
- text {
- display: flex;
- align-items: center;
- justify-content: center;
- background: #eee;
- margin-right: 20rpx;
- margin-bottom: 20rpx;
- border-radius: 10rpx;
- min-width: 60rpx;
- height: 60rpx;
- padding: 0 20rpx;
- font-size: $font-base;
- color: $font-color-dark;
- }
- .selected {
- background: #fceff1;
- color: #f35768;
- border: 1px solid #f35768;
- }
- }
- }
- //默认商品底部高度
- .goodsBottom {
- height: 160rpx;
- }
- page {
- background: #f0f0f0;
- }
- //秒杀、拼团底部高度
- .contentBottomHeight {
- background-color: #f8f8f8;
- height: 130rpx;
- }
- //默认商品底部高度
- .goodsBottom {
- height: 160rpx;
- }
- /deep/ .iconenter {
- font-size: $font-base + 2rpx;
- color: #888;
- }
- /deep/ .con_image {
- width: 130rpx;
- height: 130rpx;
- display: inline-block;
- padding: 15rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- /* 商品详情中限制图片大小 */
- /deep/ .rich-img {
- width: 100% !important;
- height: auto;
- }
- .mun-box {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .mask {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 999;
- background-color: rgba(0, 0, 0, 0.4);
- image {
- width: 100%;
- height: 100%;
- opacity: 0.8;
- }
- }
- </style>
|