越南

addons/unishop/uniapp/uni-shop/components/mpvue-citypicker/city-data/province.js

@@ -0,0 +1,139 @@
+/* eslint-disable */
+var provinceData = [{
+    "label": "北京市",
+    "value": "11"
+  },
+  {
+    "label": "天津市",
+    "value": "12"
+  },
+  {
+    "label": "河北省",
+    "value": "13"
+  },
+  {
+    "label": "山西省",
+    "value": "14"
+  },
+  {
+    "label": "内蒙古自治区",
+    "value": "15"
+  },
+  {
+    "label": "辽宁省",
+    "value": "21"
+  },
+  {
+    "label": "吉林省",
+    "value": "22"
+  },
+  {
+    "label": "黑龙江省",
+    "value": "23"
+  },
+  {
+    "label": "上海市",
+    "value": "31"
+  },
+  {
+    "label": "江苏省",
+    "value": "32"
+  },
+  {
+    "label": "浙江省",
+    "value": "33"
+  },
+  {
+    "label": "安徽省",
+    "value": "34"
+  },
+  {
+    "label": "福建省",
+    "value": "35"
+  },
+  {
+    "label": "江西省",
+    "value": "36"
+  },
+  {
+    "label": "山东省",
+    "value": "37"
+  },
+  {
+    "label": "河南省",
+    "value": "41"
+  },
+  {
+    "label": "湖北省",
+    "value": "42"
+  },
+  {
+    "label": "湖南省",
+    "value": "43"
+  },
+  {
+    "label": "广东省",
+    "value": "44"
+  },
+  {
+    "label": "广西壮族自治区",
+    "value": "45"
+  },
+  {
+    "label": "海南省",
+    "value": "46"
+  },
+  {
+    "label": "重庆市",
+    "value": "50"
+  },
+  {
+    "label": "四川省",
+    "value": "51"
+  },
+  {
+    "label": "贵州省",
+    "value": "52"
+  },
+  {
+    "label": "云南省",
+    "value": "53"
+  },
+  {
+    "label": "西藏自治区",
+    "value": "54"
+  },
+  {
+    "label": "陕西省",
+    "value": "61"
+  },
+  {
+    "label": "甘肃省",
+    "value": "62"
+  },
+  {
+    "label": "青海省",
+    "value": "63"
+  },
+  {
+    "label": "宁夏回族自治区",
+    "value": "64"
+  },
+  {
+    "label": "新疆维吾尔自治区",
+    "value": "65"
+  },
+  {
+    "label": "台湾",
+    "value": "66"
+  },
+  {
+    "label": "香港",
+    "value": "67"
+  },
+  {
+    "label": "澳门",
+    "value": "68"
+  }
+]
+export default provinceData;

addons/unishop/uniapp/uni-shop/components/mpvue-citypicker/mpvueCityPicker.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="mpvue-picker">
+    <div :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></div>
+    <div class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
+      <div class="mpvue-picker__hd" catchtouchmove="true">
+        <div class="mpvue-picker__action" @click="pickerCancel">取消</div>
+        <div class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</div>
+      </div>
+      <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange">
+        <block>
+          <picker-view-column>
+            <div class="picker-item" v-for="(item,index) in provinceDataList" :key="index">{{item.label}}</div>
+          </picker-view-column>
+          <picker-view-column>
+            <div class="picker-item" v-for="(item,index) in cityDataList" :key="index">{{item.label}}</div>
+          </picker-view-column>
+          <picker-view-column>
+            <div class="picker-item" v-for="(item,index) in areaDataList" :key="index">{{item.label}}</div>
+          </picker-view-column>
+        </block>
+      </picker-view>
+    </div>
+  </div>
+</template>
+
+<script>
+import provinceData from './city-data/province.js';
+import cityData from './city-data/city.js';
+import areaData from './city-data/area.js';
+export default {
+  data() {
+    return {
+      pickerValue: [0, 0, 0],
+      provinceDataList: [],
+      cityDataList: [],
+      areaDataList: [],
+			/* 是否显示控件 */
+			showPicker: false,
+    };
+  },
+  created() {
+    this.init()
+  },
+  props: {
+    /* 默认值 */
+    pickerValueDefault: {
+      type: Array,
+      default(){
+				return [0, 0, 0]
+			}
+    },
+    /* 主题色 */
+    themeColor: String
+  },
+	watch:{
+		pickerValueDefault(){
+			this.init();
+		}
+	},
+  methods: {
+		init() {
+			this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理
+			this.provinceDataList = provinceData;
+			this.cityDataList = cityData[this.pickerValueDefault[0]];
+			this.areaDataList = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]];
+			this.pickerValue = this.pickerValueDefault;
+		},
+    show() {
+      setTimeout(() => {
+        this.showPicker = true;
+      }, 0);
+    },
+    maskClick() {
+      this.pickerCancel();
+    },
+    pickerCancel() {
+      this.showPicker = false;
+      this._$emit('onCancel');
+    },
+    pickerConfirm(e) {
+      this.showPicker = false;
+      this._$emit('onConfirm');
+    },
+    showPickerView() {
+      this.showPicker = true;
+    },
+    handPickValueDefault() {
+      if (this.pickerValueDefault !== [0, 0, 0]) {
+        if (this.pickerValueDefault[0] > provinceData.length - 1) {
+          this.pickerValueDefault[0] = provinceData.length - 1;
+        }
+        if (this.pickerValueDefault[1] > cityData[this.pickerValueDefault[0]].length - 1) {
+          this.pickerValueDefault[1] = cityData[this.pickerValueDefault[0]].length - 1;
+        }
+        if (this.pickerValueDefault[2] > areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1) {
+          this.pickerValueDefault[2] = areaData[this.pickerValueDefault[0]][this.pickerValueDefault[1]].length - 1;
+        }
+      }
+    },
+    pickerChange(e) {
+      let changePickerValue = e.mp.detail.value;
+      if (this.pickerValue[0] !== changePickerValue[0]) {
+        // 第一级发生滚动
+        this.cityDataList = cityData[changePickerValue[0]];
+        this.areaDataList = areaData[changePickerValue[0]][0];
+        changePickerValue[1] = 0;
+        changePickerValue[2] = 0;
+      } else if (this.pickerValue[1] !== changePickerValue[1]) {
+        // 第二级滚动
+        this.areaDataList =
+          areaData[changePickerValue[0]][changePickerValue[1]];
+        changePickerValue[2] = 0;
+      }
+      this.pickerValue = changePickerValue;
+      this._$emit('onChange');
+    },
+    _$emit(emitName) {
+      let pickObj = {
+        label: this._getLabel(),
+        value: this.pickerValue,
+        cityCode: this._getCityCode()
+      };
+      this.$emit(emitName, pickObj);
+    },
+    _getLabel() {
+      let pcikerLabel =
+        this.provinceDataList[this.pickerValue[0]].label +
+        '-' +
+        this.cityDataList[this.pickerValue[1]].label +
+        '-' +
+        this.areaDataList[this.pickerValue[2]].label;
+      return pcikerLabel;
+    },
+    _getCityCode() {
+      return this.areaDataList[this.pickerValue[2]].value;
+    }
+  }
+};
+</script>
+
+<style>
+.pickerMask {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+.mpvue-picker-content {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  transition: all 0.3s ease;
+  transform: translateY(100%);
+  z-index: 3000;
+}
+.mpvue-picker-view-show {
+  transform: translateY(0);
+}
+.mpvue-picker__hd {
+  display: flex;
+  padding: 9px 15px;
+  background-color: #fff;
+  position: relative;
+  text-align: center;
+  font-size: 17px;
+}
+.mpvue-picker__hd:after {
+  content: ' ';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1px;
+  border-bottom: 1px solid #e5e5e5;
+  color: #e5e5e5;
+  transform-origin: 0 100%;
+  transform: scaleY(0.5);
+}
+.mpvue-picker__action {
+  display: block;
+  flex: 1;
+  color: #1aad19;
+}
+.mpvue-picker__action:first-child {
+  text-align: left;
+  color: #888;
+}
+.mpvue-picker__action:last-child {
+  text-align: right;
+}
+.picker-item {
+  text-align: center;
+  line-height: 40px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 16px;
+}
+.mpvue-picker-view {
+  position: relative;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 238px;
+  background-color: rgba(255, 255, 255, 1);
+}
+</style>

addons/unishop/uniapp/uni-shop/components/mpvue-picker/mpvuePicker.vue

@@ -0,0 +1,463 @@
+<template>
+    <view class="mpvue-picker">
+        <view :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></view>
+        <view class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
+            <view class="mpvue-picker__hd" catchtouchmove="true">
+                <view class="mpvue-picker__action" @click="pickerCancel">取消</view>
+                <view class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</view>
+            </view>
+            <!-- 单列 -->
+            <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange" v-if="mode==='selector' && pickerValueSingleArray.length > 0">
+                <block>
+                    <picker-view-column>
+                        <view class="picker-item" v-for="(item,index) in pickerValueSingleArray" :key="index">{{item.label}}</view>
+                    </picker-view-column>
+                </block>
+            </picker-view>
+            <!-- 时间选择器 -->
+            <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange" v-if="mode==='timeSelector'">
+                <block>
+                    <picker-view-column>
+                        <view class="picker-item" v-for="(item,index) in pickerValueHour" :key="index">{{item.label}}</view>
+                    </picker-view-column>
+                    <picker-view-column>
+                        <view class="picker-item" v-for="(item,index) in pickerValueMinute" :key="index">{{item.label}}</view>
+                    </picker-view-column>
+                </block>
+            </picker-view>
+            <!-- 多列选择 -->
+            <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange" v-if="mode==='multiSelector'">
+                <block v-for="(n,index) in pickerValueMulArray.length" :key="index">
+                    <picker-view-column>
+                        <view class="picker-item" v-for="(item,index1) in pickerValueMulArray[n]" :key="index1">{{item.label}}</view>
+                    </picker-view-column>
+                </block>
+            </picker-view>
+            <!-- 二级联动 -->
+            <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChangeMul" v-if="mode==='multiLinkageSelector' && deepLength===2">
+                <block>
+                    <picker-view-column>
+                        <view class="picker-item" v-for="(item,index) in pickerValueMulTwoOne" :key="index">{{item.label}}</view>
+                    </picker-view-column>
+                    <picker-view-column>
+                        <view class="picker-item" v-for="(item,index) in pickerValueMulTwoTwo" :key="index">{{item.label}}</view>
+                    </picker-view-column>
+                </block>
+            </picker-view>
+            <!-- 三级联动 -->
+            <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChangeMul" v-if="mode==='multiLinkageSelector' && deepLength===3">
+                <block>
+                    <picker-view-column>
+                        <view class="picker-item" v-for="(item,index) in pickerValueMulThreeOne" :key="index">{{item.label}}</view>
+                    </picker-view-column>
+                    <picker-view-column>
+                        <view class="picker-item" v-for="(item,index) in pickerValueMulThreeTwo" :key="index">{{item.label}}</view>
+                    </picker-view-column>
+                    <picker-view-column>
+                        <view class="picker-item" v-for="(item,index) in pickerValueMulThreeThree" :key="index">{{item.label}}</view>
+                    </picker-view-column>
+                </block>
+            </picker-view>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                pickerChangeValue: [],
+                pickerValue: [],
+                pickerValueArrayChange: true,
+                modeChange: false,
+                pickerValueSingleArray: [],
+                pickerValueHour: [],
+                pickerValueMinute: [],
+                pickerValueMulArray: [],
+                pickerValueMulTwoOne: [],
+                pickerValueMulTwoTwo: [],
+                pickerValueMulThreeOne: [],
+                pickerValueMulThreeTwo: [],
+                pickerValueMulThreeThree: [],
+				/* 是否显示控件 */
+				showPicker: false,
+            };
+        },
+        props: {
+            /* mode */
+            mode: {
+                type: String,
+                default: 'selector'
+            },
+            /* picker 数值 */
+            pickerValueArray: {
+                type: Array,
+                default(){
+					return []
+				}
+            },
+            /* 默认值 */
+            pickerValueDefault: {
+                type: Array,
+                default(){
+                	return []
+                }
+            },
+            /* 几级联动 */
+            deepLength: {
+                type: Number,
+                default: 2
+            },
+            /* 主题色 */
+            themeColor: String
+        },
+        watch: {
+            pickerValueArray(oldVal, newVal) {
+                this.pickerValueArrayChange = true;
+            },
+            mode(oldVal, newVal) {
+                this.modeChange = true;
+            },
+			pickerValueArray(val){
+				this.initPicker(val);
+			}
+        },
+        methods: {
+            initPicker(valueArray) {
+                let pickerValueArray = valueArray;
+                this.pickerValue = this.pickerValueDefault;
+                // 初始化多级联动
+                if (this.mode === 'selector') {
+                    this.pickerValueSingleArray = valueArray;
+                } else if (this.mode === 'timeSelector') {
+                    this.modeChange = false;
+                    let hourArray = [];
+                    let minuteArray = [];
+                    for (let i = 0; i < 24; i++) {
+                        hourArray.push({
+                            value: i,
+                            label: i > 9 ? `${i} 时` : `0${i} 时`
+                        });
+                    }
+                    for (let i = 0; i < 60; i++) {
+                        minuteArray.push({
+                            value: i,
+                            label: i > 9 ? `${i} 分` : `0${i} 分`
+                        });
+                    }
+                    this.pickerValueHour = hourArray;
+                    this.pickerValueMinute = minuteArray;
+                } else if (this.mode === 'multiSelector') {
+                    this.pickerValueMulArray = valueArray;
+                } else if (this.mode === 'multiLinkageSelector' && this.deepLength === 2) {
+                    // 两级联动
+                    let pickerValueMulTwoOne = [];
+                    let pickerValueMulTwoTwo = [];
+                    // 第一列
+                    for (let i = 0, length = pickerValueArray.length; i < length; i++) {
+                        pickerValueMulTwoOne.push(pickerValueArray[i]);
+                    }
+                    // 渲染第二列
+                    // 如果有设定的默认值
+                    if (this.pickerValueDefault.length === 2) {
+                        let num = this.pickerValueDefault[0];
+                        for (
+                            let i = 0, length = pickerValueArray[num].children.length; i < length; i++
+                        ) {
+                            pickerValueMulTwoTwo.push(pickerValueArray[num].children[i]);
+                        }
+                    } else {
+                        for (
+                            let i = 0, length = pickerValueArray[0].children.length; i < length; i++
+                        ) {
+                            pickerValueMulTwoTwo.push(pickerValueArray[0].children[i]);
+                        }
+                    }
+                    this.pickerValueMulTwoOne = pickerValueMulTwoOne;
+                    this.pickerValueMulTwoTwo = pickerValueMulTwoTwo;
+                } else if (
+                    this.mode === 'multiLinkageSelector' &&
+                    this.deepLength === 3
+                ) {
+                    let pickerValueMulThreeOne = [];
+                    let pickerValueMulThreeTwo = [];
+                    let pickerValueMulThreeThree = [];
+                    // 第一列
+                    for (let i = 0, length = pickerValueArray.length; i < length; i++) {
+                        pickerValueMulThreeOne.push(pickerValueArray[i]);
+                    }
+                    // 渲染第二列
+                    this.pickerValueDefault =
+                        this.pickerValueDefault.length === 3 ?
+                        this.pickerValueDefault :
+                        [0, 0, 0];
+                    if (this.pickerValueDefault.length === 3) {
+                        let num = this.pickerValueDefault[0];
+                        for (
+                            let i = 0, length = pickerValueArray[num].children.length; i < length; i++
+                        ) {
+                            pickerValueMulThreeTwo.push(pickerValueArray[num].children[i]);
+                        }
+                        // 第三列
+                        let numSecond = this.pickerValueDefault[1];
+                        for (let i = 0, length = pickerValueArray[num].children[numSecond].children.length; i < length; i++) {
+                            pickerValueMulThreeThree.push(
+                                pickerValueArray[num].children[numSecond].children[i]
+                            );
+                        }
+                    }
+                    this.pickerValueMulThreeOne = pickerValueMulThreeOne;
+                    this.pickerValueMulThreeTwo = pickerValueMulThreeTwo;
+                    this.pickerValueMulThreeThree = pickerValueMulThreeThree;
+                }
+            },
+            show() {
+                setTimeout(() => {
+                    if (this.pickerValueArrayChange || this.modeChange) {
+                        this.initPicker(this.pickerValueArray);
+                        this.showPicker = true;
+                        this.pickerValueArrayChange = false;
+                        this.modeChange = false;
+                    } else {
+                        this.showPicker = true;
+                    }
+                }, 0);
+            },
+            maskClick() {
+                this.pickerCancel();
+            },
+            pickerCancel() {
+                this.showPicker = false;
+                this._initPickerVale();
+                let pickObj = {
+                    index: this.pickerValue,
+                    value: this._getPickerLabelAndValue(this.pickerValue, this.mode).value,
+                    label: this._getPickerLabelAndValue(this.pickerValue, this.mode).label
+                };
+                this.$emit('onCancel', pickObj);
+            },
+            pickerConfirm(e) {
+                this.showPicker = false;
+                this._initPickerVale();
+                let pickObj = {
+                    index: this.pickerValue,
+                    value: this._getPickerLabelAndValue(this.pickerValue, this.mode).value,
+                    label: this._getPickerLabelAndValue(this.pickerValue, this.mode).label
+                };
+                this.$emit('onConfirm', pickObj);
+            },
+            showPickerView() {
+                this.showPicker = true;
+            },
+            pickerChange(e) {
+                this.pickerValue = e.mp.detail.value;
+                let pickObj = {
+                    index: this.pickerValue,
+                    value: this._getPickerLabelAndValue(this.pickerValue, this.mode).value,
+                    label: this._getPickerLabelAndValue(this.pickerValue, this.mode).label
+                };
+                this.$emit('onChange', pickObj);
+            },
+            pickerChangeMul(e) {
+                if (this.deepLength === 2) {
+                    let pickerValueArray = this.pickerValueArray;
+                    let changeValue = e.mp.detail.value;
+                    // 处理第一列滚动
+                    if (changeValue[0] !== this.pickerValue[0]) {
+                        let pickerValueMulTwoTwo = [];
+                        // 第一列滚动第二列数据更新
+                        for (let i = 0, length = pickerValueArray[changeValue[0]].children.length; i < length; i++) {
+                            pickerValueMulTwoTwo.push(pickerValueArray[changeValue[0]].children[i]);
+                        }
+                        this.pickerValueMulTwoTwo = pickerValueMulTwoTwo;
+                        // 第二列初始化为 0
+                        changeValue[1] = 0;
+                    }
+                    this.pickerValue = changeValue;
+                } else if (this.deepLength === 3) {
+                    let pickerValueArray = this.pickerValueArray;
+                    let changeValue = e.mp.detail.value;
+                    let pickerValueMulThreeTwo = [];
+                    let pickerValueMulThreeThree = [];
+                    // 重新渲染第二列
+                    // 如果是第一列滚动
+                    if (changeValue[0] !== this.pickerValue[0]) {
+                        this.pickerValueMulThreeTwo = [];
+                        for (let i = 0, length = pickerValueArray[changeValue[0]].children.length; i < length; i++) {
+                            pickerValueMulThreeTwo.push(pickerValueArray[changeValue[0]].children[i]);
+                        }
+                        // 重新渲染第三列
+                        for (let i = 0, length = pickerValueArray[changeValue[0]].children[0].children.length; i <
+                            length; i++) {
+                            pickerValueMulThreeThree.push(pickerValueArray[changeValue[0]].children[0].children[i]);
+                        }
+                        changeValue[1] = 0;
+                        changeValue[2] = 0;
+                        this.pickerValueMulThreeTwo = pickerValueMulThreeTwo;
+                        this.pickerValueMulThreeThree = pickerValueMulThreeThree;
+                    } else if (changeValue[1] !== this.pickerValue[1]) {
+                        // 第二列滚动
+                        // 重新渲染第三列
+                        this.pickerValueMulThreeThree = [];
+                        pickerValueMulThreeTwo = this.pickerValueMulThreeTwo;
+                        for (let i = 0, length = pickerValueArray[changeValue[0]].children[changeValue[1]].children.length; i <
+                            length; i++) {
+                            pickerValueMulThreeThree.push(pickerValueArray[changeValue[0]].children[changeValue[1]].children[
+                                i]);
+                        }
+                        changeValue[2] = 0;
+                        this.pickerValueMulThreeThree = pickerValueMulThreeThree;
+                    }
+                    this.pickerValue = changeValue;
+                }
+                let pickObj = {
+                    index: this.pickerValue,
+                    value: this._getPickerLabelAndValue(this.pickerValue, this.mode).value,
+                    label: this._getPickerLabelAndValue(this.pickerValue, this.mode).label
+                };
+                this.$emit('onChange', pickObj);
+            },
+            // 获取 pxikerLabel
+            _getPickerLabelAndValue(value, mode) {
+                let pickerLable;
+                let pickerGetValue = [];
+                // selector
+                if (mode === 'selector') {
+                    pickerLable = this.pickerValueSingleArray[value].label;
+                    pickerGetValue.push(this.pickerValueSingleArray[value].value);
+                } else if (mode === 'timeSelector') {
+                    pickerLable = `${this.pickerValueHour[value[0]].label}-${this.pickerValueMinute[value[1]].label}`;
+                    pickerGetValue.push(this.pickerValueHour[value[0]].value);
+                    pickerGetValue.push(this.pickerValueHour[value[1]].value);
+                } else if (mode === 'multiSelector') {
+                    for (let i = 0; i < value.length; i++) {
+                        if (i > 0) {
+                            pickerLable += this.pickerValueMulArray[i][value[i]].label + (i === value.length - 1 ? '' :
+                                '-');
+                        } else {
+                            pickerLable = this.pickerValueMulArray[i][value[i]].label + '-';
+                        }
+                        pickerGetValue.push(this.pickerValueMulArray[i][value[i]].value);
+                    }
+                } else if (mode === 'multiLinkageSelector') {
+                    /* eslint-disable indent */
+                    pickerLable =
+                        this.deepLength === 2 ?
+                        `${this.pickerValueMulTwoOne[value[0]].label}-${this.pickerValueMulTwoTwo[value[1]].label}` :
+                        `${this.pickerValueMulThreeOne[value[0]].label}-${this.pickerValueMulThreeTwo[value[1]].label}-${this.pickerValueMulThreeThree[value[2]].label}`;
+                    if (this.deepLength === 2) {
+                        pickerGetValue.push(this.pickerValueMulTwoOne[value[0]].value);
+                        pickerGetValue.push(this.pickerValueMulTwoTwo[value[1]].value);
+                    } else {
+                        pickerGetValue.push(this.pickerValueMulThreeOne[value[0]].value);
+                        pickerGetValue.push(this.pickerValueMulThreeTwo[value[1]].value);
+                        pickerGetValue.push(this.pickerValueMulThreeThree[value[2]].value);
+                    }
+                    /* eslint-enable indent */
+                }
+                return {
+                    label: pickerLable,
+                    value: pickerGetValue
+                };
+            },
+            // 初始化 pickerValue 默认值
+            _initPickerVale() {
+                if (this.pickerValue.length === 0) {
+                    if (this.mode === 'selector') {
+                        this.pickerValue = [0];
+                    } else if (this.mode === 'multiSelector') {
+                        this.pickerValue = new Int8Array(this.pickerValueArray.length);
+                    } else if (
+                        this.mode === 'multiLinkageSelector' &&
+                        this.deepLength === 2
+                    ) {
+                        this.pickerValue = [0, 0];
+                    } else if (
+                        this.mode === 'multiLinkageSelector' &&
+                        this.deepLength === 3
+                    ) {
+                        this.pickerValue = [0, 0, 0];
+                    }
+                }
+            }
+        }
+    };
+</script>
+
+<style>
+    .pickerMask {
+        position: fixed;
+        z-index: 1000;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.6);
+    }
+
+    .mpvue-picker-content {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        transition: all 0.3s ease;
+        transform: translateY(100%);
+        z-index: 3000;
+    }
+
+    .mpvue-picker-view-show {
+        transform: translateY(0);
+    }
+
+    .mpvue-picker__hd {
+        display: flex;
+        padding: 9px 15px;
+        background-color: #fff;
+        position: relative;
+        text-align: center;
+        font-size: 17px;
+    }
+
+    .mpvue-picker__hd:after {
+        content: ' ';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: 1px;
+        border-bottom: 1px solid #e5e5e5;
+        color: #e5e5e5;
+        transform-origin: 0 100%;
+        transform: scaleY(0.5);
+    }
+
+    .mpvue-picker__action {
+        display: block;
+        flex: 1;
+        color: #1aad19;
+    }
+
+    .mpvue-picker__action:first-child {
+        text-align: left;
+        color: #888;
+    }
+
+    .mpvue-picker__action:last-child {
+        text-align: right;
+    }
+
+    .picker-item {
+        text-align: center;
+        line-height: 40px;
+        font-size: 16px;
+    }
+
+    .mpvue-picker-view {
+        position: relative;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 238px;
+        background-color: rgba(255, 255, 255, 1);
+    }
+</style>

addons/unishop/uniapp/uni-shop/pages/order/createOrder.vue

@@ -10,6 +10,12 @@
 			<input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码"
 				placeholder-class="placeholder" />
 		</view>
+		<view class="row b-b" v-on:click="showCityPicker()">
+			<text class="tit">地区</text>
+			<view class="input">
+				{{cityLebel}}
+			</view>
+		</view>
 		<view class="row b-b">
 			<text class="tit">地址</text>
 			<input class="input" type="text" v-model="addressData.address" placeholder="详细地址,楼号"
@@ -33,14 +39,12 @@
 				<image class="logo" src="http://duoduo.qibukj.cn/./Upload/Images/20190321/201903211727515.png"></image>
 				<text class="name">西城小店铺</text>
 			</view> -->
+
 			<!-- 商品列表 -->
 			<view class="g-item" v-for="(item, index) in product" :key="item.id">
 				<image :src="item.image" mode="aspectFill"></image>
 				<view class="right">
-					<text class="title clamp">{{item.title}}</text>
-					<view class="spec">{{item.spec ? "规格:" + item.spec : ""}} {{" 库存:"+item.stock}}
-						{{progress.number ? "(秒:"+progress.number+"件,剩:"+(progress.number - progress.sold)+"件)": ""}}
-					</view>
+					<text class="title clamp" style="margin-bottom: 25px">{{item.title}}</text>
 					<view class="price-box">
 						<view class="price">￥{{item.sales_price|million}}
 						</view>
@@ -57,6 +61,18 @@
 					</view>
 				</view>
 			</view>
+			<view class="c-list">
+				<view class="c-row b-b" @click="toggleSpec">
+					<text class="tit">购买类型</text>
+					<view class="con">
+						<text class="selected-text">
+							{{specSelectedName}}
+						</text>
+						<text style="margin-left: 50rpx;">库存:{{specProduct.stock}}</text>
+					</view>
+					<text class="yticon icon-you"></text>
+				</view>
+			</view>
 		</view>
 
 		<!-- 优惠明细 -->
@@ -142,24 +158,95 @@
 			</view>
 			<button class="btn" @click="toggleMask">收起</button>
 		</view>
-		<mpvue-city-picker @onChange="onChange" @onCancel="onCancel"
-		                   @onConfirm="onConfirm" ref="mpvueCityPicker" ></mpvue-city-picker>
+		<mpvuePicker ref="mpvueCityPicker" mode="multiLinkageSelector" :pickerValueDefault="pickerValueDefault" @onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray" :deepLength="3"></mpvuePicker>
+		<!-- 规格-模态层弹窗 -->
+		<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 v-if="specProduct.image" mode="aspectFill" :src="specProduct.image"></image>
+					<view class="right">
+						<text class="price">¥{{specProduct.sales_price}}</text>
+						<text class="stock">库存：{{specProduct.stock}}件</text>
+						<view class="selected">
+							已选：
+							<text class="selected-text">
+								{{specSelectedName}}
+							</text>
+						</view>
+					</view>
+				</view>
+				<view v-for="(item,index) in specList" :key="index" class="attr-list">
+					<text>{{item.name}}</text>
+					<view class="item-list">
+						<text v-for="(childItem, childIndex) in specChildList" v-if="childItem.pid === item.id" :key="childIndex" class="tit"
+						      :class="{selected: childItem.selected}" @click="selectSpec(childIndex, childItem.pid)">
+							{{childItem.name}}
+						</text>
+					</view>
+				</view>
+				<button class="btn" @click="toggleSpec">完成</button>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
 	import uniNumberBox from '@/components/uni-number-box.vue';
+	import json from "./city.json"
 	export default {
 		components: {
-			uniNumberBox
+			uniNumberBox,
+			mpvuePicker
+		},
+		computed: {
+			specSelectedName() {
+				return this.specSelected.join(' ');
+			},
+			specProduct() {
+				if (this.products.use_spec == 1) {
+					let market_price = this.products.market_price;
+					let sales_price = this.products.sales_price;
+					let stock = this.products.stock;
+					let image = this.products.image;
+					let specSelectedName = this.specSelected.join(' ');
+					let specTableList = this.specTableList;
+					for (var item of this.specTableList) {
+						if (item.value.join(' ') == specSelectedName) {
+							market_price = item.market_price;
+							sales_price = item.sales_price;
+							stock = item.stock;
+							image = item.image;
+						}
+
+					}
+					return {
+						market_price,
+						sales_price,
+						stock,
+						image
+					};
+				} else {
+					return this.products;
+				}
+			}
 		},
 		data() {
 			return {
+				specList: [],
+				specClass: 'none',
+				specSelected: [],
+				specChildList:[],
 				addressData: {
 					name: '',
 					mobile: '',
 					address: ''
 				},
+				pickerValueArray:json,
+				pickerValueDefault: [0, 0, 0] ,//城市选择器默认值 省市区id
+				cityLebel:'请选择地区',
 				id: "", //商品ID
 				maskState: 0, //优惠券面板显示状态
 				remark: '', //备注
@@ -167,6 +254,7 @@
 				couponList: [],
 				useCouponIndex: -1,
 				product: [],
+				products: [],
 				price: 0.00, //商品金额
 				coupon_price: 0.00, //优惠券金额
 				total: 0.00, //实付金额
@@ -180,6 +268,28 @@
 			}
 		},
 		onLoad(options) {
+			this.products=JSON.parse(options.product);
+			console.log(this.products)
+			let specList = this.products.spec_list;
+			let specTableList = this.products.spec_table_list;
+
+			let e = 1;
+			let ee = 1;
+			let specChildList = [];
+			for (let i in specList) {
+				specList[i].id = e++;
+				for (let ii in specList[i].child) {
+					specChildList.push({
+						id: ee++,
+						pid: specList[i].id,
+						name: specList[i].child[ii]
+					})
+				}
+			}
+			this.specList = specList;
+			this.specChildList = specChildList;
+			this.specTableList = specTableList;
+			this.specSelected = options.spec.split(",");
 			this.id = options.id;
 			if (options.hasOwnProperty('flash_id')) {
 				this.flash_id = options.flash_id;
@@ -196,10 +306,14 @@
 				this.getOrderCreate({
 					id: options.id,
 					spec: options.spec,
-					flash_id: this.flash_id
+					flash_id: null
 				});
 			}
 		},
+		mounted(){
+			// this.$refs.mpvueCityPicker.creat(this.pickerValueDefault);
+
+		},
 		onShow() {},
 		filters: {
 			million: function (value) {
@@ -208,6 +322,68 @@
 			}
 		},
 		methods: {
+			//规格弹窗开关
+			toggleSpec() {
+				if (this.specClass === 'show') {
+					// 从商品进入
+					this.getOrderCreate({
+						id: this.id,
+						spec: this.specSelected.join(','),
+						flash_id: this.flash_id
+					}).then(()=>{
+						this.specClass = 'hide';
+						setTimeout(() => {
+							this.specClass = 'none';
+						}, 250);
+					});
+				} else if (this.specClass === 'none') {
+					this.specClass = 'show';
+				}
+			},
+			//选择规格
+			selectSpec(index, pid) {
+				let list = this.specChildList;
+				list.forEach(item => {
+					if (item.pid === pid) {
+						this.$set(item, 'selected', false);
+					}
+				})
+
+				this.$set(list[index], 'selected', true);
+				//存储已选择
+				/**
+				 * 修复选择规格存储错误
+				 * 将这几行代码替换即可
+				 * 选择的规格存放在specSelected中
+				 */
+				this.specSelected = [];
+				//console.log(list)
+				list.forEach(item => {
+					if (item.selected === true) {
+						this.specSelected.push(item.name);
+					}
+				})
+
+			},
+			// 城市选择器
+			showCityPicker() {
+				this.$refs.mpvueCityPicker.show();
+			},
+			// 城市选择器改变值
+			onChange(e) {
+				// console.log('选择的值')
+				// console.log(e);
+			},
+			// 城市选择器关闭
+			onCancel(e) {
+				//console.log(e);
+			},
+			// 城市选择器确定
+			onConfirm(e) {
+				console.log(e);
+				this.cityLebel = e.label;
+				this.pickerValueDefault = e.value;
+			},
 			// 计算百分比
 			percentage(number, sold) {
 				if (!sold) {
@@ -272,7 +448,7 @@
 					this.$api.msg('请输入正确的手机号码');
 					return;
 				}
-				if (!adres.address) {
+				if (!adres.address || !this.cityLebel) {
 					this.$api.msg('请填详细地址信息');
 					return;
 				}
@@ -284,19 +460,17 @@
 
 				this.$api.msg('提交中...', 20000);
 				let delivery_id = 0;
-				if (this.deliveryList && this.deliveryList[this.deliveryIndex] && this.deliveryList[this.deliveryIndex]
-					.id) {
+				if (this.deliveryList && this.deliveryList[this.deliveryIndex] && this.deliveryList[this.deliveryIndex].id) {
 					delivery_id = this.deliveryList[this.deliveryIndex].id;
 				}
 				let coupon_id = 0;
-				if (this.couponList && this.couponList[this.useCouponIndex] && this.couponList[this.useCouponIndex]
-					.id) {
+				if (this.couponList && this.couponList[this.useCouponIndex] && this.couponList[this.useCouponIndex].id) {
 					coupon_id = this.couponList[this.useCouponIndex].id;
 				}
 				let data = {
 					name: this.addressData.name,
 					mobile: this.addressData.mobile,
-					address: this.addressData.address,
+					address: this.cityLebel + this.addressData.address,
 					delivery_id: delivery_id,
 					coupon_id: coupon_id,
 					remark: this.remark,
@@ -423,6 +597,230 @@
 </script>
 
 <style lang="scss">
+	/* 规格选择弹窗 */
+	.attr-content {
+		padding: 10upx 30upx;
+
+		.a-t {
+			display: flex;
+
+			image {
+				width: 170upx;
+				height: 170upx;
+				flex-shrink: 0;
+				margin-top: -40upx;
+				border-radius: 8upx;
+			;
+			}
+
+			.right {
+				display: flex;
+				flex-direction: column;
+				padding-left: 24upx;
+				font-size: $font-sm + 2upx;
+				color: $font-color-base;
+				line-height: 42upx;
+
+				.price {
+					font-size: $font-lg;
+					color: $uni-color-primary;
+					margin-bottom: 10upx;
+				}
+
+				.selected-text {
+					margin-right: 10upx;
+				}
+			}
+		}
+
+		.attr-list {
+			display: flex;
+			flex-direction: column;
+			font-size: $font-base + 2upx;
+			color: $font-color-base;
+			padding-top: 30upx;
+			padding-left: 10upx;
+		}
+
+		.item-list {
+			padding: 20upx 0 0;
+			display: flex;
+			flex-wrap: wrap;
+
+			text {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				background: #eee;
+				margin-right: 20upx;
+				margin-bottom: 20upx;
+				border-radius: 100upx;
+				min-width: 60upx;
+				height: 60upx;
+				padding: 0 20upx;
+				font-size: $font-base;
+				color: $font-color-dark;
+			}
+
+			.selected {
+				background: #fbebee;
+				color: $uni-color-primary;
+			}
+		}
+	}
+	/*  弹出层 */
+	.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: 40vh;
+			border-radius: 10upx 10upx 0 0;
+			background-color: #fff;
+
+			.btn {
+				height: 66upx;
+				line-height: 66upx;
+				border-radius: 100upx;
+				background: $uni-color-primary;
+				font-size: $font-base + 2upx;
+				color: #fff;
+				margin: 30upx auto 20upx;
+
+			}
+		}
+
+		@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%);
+			}
+		}
+	}
+	.c-list {
+		font-size: $font-sm + 2upx;
+		color: $font-color-base;
+		background: #fff;
+
+		.c-row {
+			display: flex;
+			align-items: center;
+			padding: 20upx 30upx;
+			position: relative;
+		}
+
+		.tit {
+			width: 140upx;
+		}
+
+		.con {
+			flex: 1;
+			color: $font-color-dark;
+
+			.selected-text {
+				margin-right: 10upx;
+			}
+		}
+
+		.bz-list {
+			height: 40upx;
+			font-size: $font-sm+2upx;
+			color: $font-color-dark;
+
+			text {
+				display: inline-block;
+				margin-right: 30upx;
+			}
+		}
+
+		.con-list {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			color: $font-color-dark;
+			line-height: 40upx;
+		}
+
+		.red {
+			color: $uni-color-primary;
+		}
+	}
 	page {
 		background: $page-color-base;
 		padding-top: 16upx;

addons/unishop/uniapp/uni-shop/pages/product/product.vue

@@ -6,7 +6,7 @@
 					<view class="image-wrapper">
 						<image :src="item" class="loaded" @click="previewImage(index)" mode="aspectFill"></image>
 					</view>
-				</swiper-item> 
+				</swiper-item>
 			</swiper>
 		</view>
 
@@ -22,26 +22,26 @@
 					{{product.flash.text}}
 					<uni-countdown
 					ref="countd"
-					:showDay="countdown.day > 0 ? true : false" 
-					:day="countdown.day" 
-					:hour="countdown.hour" 
+					:showDay="countdown.day > 0 ? true : false"
+					:day="countdown.day"
+					:hour="countdown.hour"
 					:minute="countdown.minute"
-					:second="countdown.second" 
+					:second="countdown.second"
 					@timeup="timeup"
-					color="#fffa30" 
-					borderWidth="22rpx" 
-					splitorColor="#fffa30"  
-					background-color="#282f2c00" 
+					color="#fffa30"
+					borderWidth="22rpx"
+					splitorColor="#fffa30"
+					background-color="#282f2c00"
 					border-color="#00B26A"></uni-countdown>
 				</view>
 				<view class="time" v-else :class="{'flashDone': progress.number == false}">抢购已结束</view>
 				<view class="progress" v-if="progress.number">
-					<ProgressBar 
-					class="ProgressBar" 
-					:Sold="progress.sold" 
+					<ProgressBar
+					class="ProgressBar"
+					:Sold="progress.sold"
 					:widthUpx="250"
-					:Width="percentage(progress.number, progress.sold)" 
-					Type="candy" 
+					:Width="percentage(progress.number, progress.sold)"
+					Type="candy"
 					:Vice="true"></ProgressBar>
 				</view>
 			</view>
@@ -97,7 +97,7 @@
 			<view class="c-row b-b" v-if="product.server">
 				<text class="tit">服务</text>
 				<view class="bz-list con">
-					{{product.server}}
+					免邮费 假一赔三 7天无理由退换货
 				</view>
 			</view>
 		</view>
@@ -123,16 +123,31 @@
 				</view>
 			</view>
 		</view>
-
-		<view class="detail-desc" v-if="product.desc">
-			<view class="d-header">
-				<text>图文详情</text>
+		<xbtab :modelData="modelData" @change="change"></xbtab>
+		<template v-if="tabindex==0">
+			<view class="detail-desc" v-if="product.desc">
+				<view class="d-header">
+					<text>图文详情</text>
+				</view>
+				<view v-for="(item,index) in product.detail_images_text" :key="index">
+					<image :src="item" style="width:100vw" @click="previewImage(index)" mode="widthFix"></image>
+				</view>
+				<rich-text :nodes="product.desc"></rich-text>
 			</view>
-			<view v-for="(item,index) in product.detail_images_text" :key="index">
-				<image :src="item" style="width:100vw" @click="previewImage(index)" mode="widthFix"></image>
+		</template>
+		<template v-if="tabindex!=0">
+			<view>
+				<view v-for="(item, index) in product.qa" :key="index" style="font-size:14px;border-bottom: 1px solid #cccccc">
+					<view style="margin: 20px 10px">
+						<text class="icons orange">问</text>：<text  class="bold">{{item.question}}</text>
+					</view>
+					<view style="margin: 20px 10px">
+						<text class="icons green">答</text>： {{item.answer}}
+					</view>
+				</view>
 			</view>
-			<rich-text :nodes="product.desc"></rich-text>
-		</view>
+		</template>
+
 
 		<!-- 底部操作菜单 -->
 		<view class="page-bottom">
@@ -169,7 +184,7 @@
 			<!-- 遮罩层 -->
 			<view class="mask"></view>
 			<view class="layer attr-content content-coupon" @click.stop="stopPrevent">
-				
+
 				<!-- 优惠券页面，仿mt -->
 				<view class="coupon-item" v-for="(item, index) in product.coupon" :key="index">
 					<view class="con">
@@ -231,11 +246,13 @@
 		mapGetters
 	} from 'vuex';
 	import share from '@/components/share';
+	import xbtab from './xbtab';
 	import ProgressBar from '@/components/Progress-Bar/Progress-Bar';
 	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
 
 	export default {
 		components: {
+			xbtab,
 			share,
 			ProgressBar,
 			uniCountdown
@@ -253,7 +270,7 @@
 		},
 		computed: {
 			...mapGetters(['userInfo', 'hasLogin']),
-			
+
 			specSelectedName() {
 				return this.specSelected.join(' ');
 			},
@@ -287,6 +304,11 @@
 		},
 		data() {
 			return {
+				modelData:[
+					{label:"商品详情",},
+					{label:"咨询与售后"}
+				],
+				tabindex:0,
 				couponClass: 'none',
 				specClass: 'none',
 				specSelected: [],
@@ -295,7 +317,7 @@
 				specList: [],
 				specChildList: [],
 				specTableList: [],
-				product: {},
+				product: {qa:[]},
 				flash: false,
 				id: false,
 				countdown: {},
@@ -325,6 +347,9 @@
 			this.getDetail(this.id, flash_id);
 		},
 		methods: {
+			change(val){
+				this.tabindex=val
+			},
 			// 为0时刷新页面
 			timeup(){
 			    this.getDetail(this.id, this.flash?this.flash:0);
@@ -349,7 +374,7 @@
 				if (this.product.use_spec) {
 					let specList = this.product.spec_list;
 					let specTableList = this.product.spec_table_list;
-				
+
 					let e = 1;
 					let ee = 1;
 					let specChildList = [];
@@ -368,7 +393,7 @@
 					this.specTableList = specTableList;
 					//console.log(this.specList)
 					//console.log(specChildList)
-				
+
 					//规格 默认选中第一条
 					this.specSelected = [];
 					this.specList.forEach(item => {
@@ -460,12 +485,13 @@
 				if (this.product.use_spec == 1) {
 					spec = this.specSelected.join(',');
 				}
-				let url = `/pages/order/createOrder?id=${this.product.product_id}&spec=${spec}`;
+				let product=JSON.stringify(this.product)
+				let url = `/pages/order/createOrder?id=${this.product.product_id}&spec=${spec}&product=${product}`;
 				if (this.flash) {
 					url = url + `&flash_id=${this.flash}`;
 				}
 				uni.navigateTo({
-					url:url 
+					url:url
 				});
 			},
 			//添加购物车
@@ -511,6 +537,23 @@
 </script>
 
 <style lang='scss'>
+	.icons{
+		color:white;
+		border-radius: 50%;
+		width: 22px;
+		height: 22px;
+		text-align: center;
+		display: inline-block;
+	}
+	.bold{
+		font-weight: bold;
+	}
+	.orange{
+		background-color: #ffae43;
+	}
+	.green{
+		background-color: #9cbd1b;
+	}
 	page {
 		background: $page-color-base;
 		padding-bottom: 160upx;
@@ -772,7 +815,7 @@
 			font-size: $font-base;
 			color: $font-color-base;
 			padding-left: 26upx;
-				
+
 			.con {
 				font-size: $font-base;
 				color: $font-color-dark;
@@ -1024,7 +1067,7 @@
 			width: 96upx;
 			height: 80upx;
 			position: relative;
-			
+
 			/* 购物车数量 */
 			.cart-count{
 				border: 4rpx solid #fa436a;
@@ -1061,7 +1104,7 @@
 			background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
 			margin-left: 20upx;
 			position: relative;
-			
+
 			.only {
 				width: 360rpx!important;
 			}
@@ -1089,7 +1132,7 @@
 				background: transparent;
 			}
 		}
-		
+
 	}
 	.flash {
 		height: 100upx;
@@ -1143,9 +1186,9 @@
 			}
 		}
 	}
-	
-	
-	
+
+
+
 	/* 优惠券列表 */
 	.content-coupon{
 		padding-bottom: 100rpx;
@@ -1165,14 +1208,14 @@
 		display: flex;
 		flex-direction: column;
 		background: #fff;
-	
+
 		.con {
 			display: flex;
 			align-items: center;
 			position: relative;
 			height: 120upx;
 			padding: 0 30upx;
-	
+
 			&:after {
 				position: absolute;
 				left: 0;
@@ -1184,7 +1227,7 @@
 				transform: scaleY(50%);
 			}
 		}
-	
+
 		.left {
 			display: flex;
 			flex-direction: column;
@@ -1193,18 +1236,18 @@
 			overflow: hidden;
 			height: 100upx;
 		}
-	
+
 		.title {
 			font-size: 32upx;
 			color: $font-color-dark;
 			margin-bottom: 10upx;
 		}
-	
+
 		.time {
 			font-size: 24upx;
 			color: $font-color-light;
 		}
-	
+
 		.right {
 			display: flex;
 			flex-direction: column;
@@ -1214,24 +1257,24 @@
 			color: $font-color-base;
 			height: 100upx;
 		}
-	
+
 		.price {
 			font-size: 44upx;
 			color: $base-color;
-	
+
 			&:before {
 				content: '￥';
 				font-size: 34upx;
 			}
 		}
-	
+
 		.tips {
 			font-size: 24upx;
 			color: $font-color-light;
 			line-height: 60upx;
 			padding-left: 30upx;
 		}
-	
+
 		.circle {
 			position: absolute;
 			left: -6upx;
@@ -1241,7 +1284,7 @@
 			height: 20upx;
 			background: #f3f3f3;
 			border-radius: 100px;
-	
+
 			&.r {
 				left: auto;
 				right: -6upx;

addons/unishop/uniapp/uni-shop/pages/product/xbtab.vue

@@ -0,0 +1,92 @@
+<template>
+	<view :class="{'my-tabs':true,'space-between':formatBe}">
+		<view  v-for="(item,index) in getModelData" :key="index" :class="{'my-tab-item':true,'active':activeIndex==index}" @tap="tap(index)">
+			{{item.label}}
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:['modelData','initIndex'],
+		data() {
+			return {
+				defaultInfo:{
+					data:[
+						{label:"测试",},
+						{label:"测试"},
+						{label:"测试"},
+					],
+				},
+				activeIndex:0,//默认索引
+			}
+		},
+		computed:{
+			getModelData(){
+				return this.modelData||this.defaultInfo.data
+			},
+			formatBe(){
+				return this.modelData
+						?this.modelData.length>4?true:false
+						:false
+			}
+		},
+		methods: {
+			tap(index){
+				if(index!==this.activeIndex)this.$emit("change",index);
+				this.activeIndex=index;
+			},
+			/**
+			 * @name 初始化activeIndex
+			 */
+			initActive(){
+				this.activeIndex=this.initIndex||this.activeIndex
+			}
+		},
+		created() {
+			this.initActive()
+		},
+	}
+</script>
+<style lang='scss' scoped>
+	.my-tabs {
+		height: 88upx;
+		font-size: 28upx;
+		display: flex;
+		justify-content: space-around;
+		box-sizing: border-box;
+		border-top: 2upx solid #dddddd;
+		border-bottom: 2upx solid #dddddd;
+		min-width: 100%;
+		overflow-x: auto;
+
+		.my-tab-item{
+			line-height: 48upx;
+			padding: 20upx;
+			min-width: 100upx;
+			text-align: center;
+		}
+		.my-tab-item.active{
+			position: relative;
+			color: #3682FF;
+		}
+		.my-tab-item.active::after{
+			content: "";
+			position: absolute;
+			bottom: 0;
+			left:50%;
+			transform: translateX(-50%);
+			width: 100%;
+			border-bottom: 4upx solid #3682FF;
+			animation: test ease 1 1.5s;
+		}
+	}
+	.my-tabs.space-between{
+		justify-content: space-between;
+	}
+	@keyframes test{
+		0%{width: 100%}
+		50%{width: 150%}
+		100%{width: 100%}
+	}
+</style>

addons/unishop/uniapp/uni-shop/unpackage/dist/build/h5/index.html

@@ -1,3 +1,3 @@
 <!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><title>宜家自购商城</title><script>document.addEventListener('DOMContentLoaded', function() {
 				document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
-			})</script><link rel=stylesheet href=/h5/static/index.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script>/*BAIDU_STAT*/</script><script src=/h5/static/js/chunk-vendors.83ec382e.js></script><script src=/h5/static/js/index.22d23508.js></script></body></html>
+			})</script><link rel=stylesheet href=/h5/static/index.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script>/*BAIDU_STAT*/</script><script src=/h5/static/js/chunk-vendors.99ddd405.js></script><script src=/h5/static/js/index.231ca1e0.js></script></body></html>

addons/unishop/uniapp/uni-shop/unpackage/dist/build/mp-weixin/node-modules/mpvue-citypicker/src/mpvueCityPicker.js

@@ -1,10 +1,251 @@
-(global["webpackJsonp"]=global["webpackJsonp"]||[]).push([["node-modules/mpvue-citypicker/src/mpvueCityPicker"],{"133a":function(e,t,a){"use strict";var i,r=function(){var e=this,t=e.$createElement;e._self._c},n=[];a.d(t,"b",(function(){return r})),a.d(t,"c",(function(){return n})),a.d(t,"a",(function(){return i}))},"346a":function(e,t,a){},"6a7d":function(e,t,a){"use strict";a.r(t);var i=a("812e"),r=a.n(i);for(var n in i)"default"!==n&&function(e){a.d(t,e,(function(){return i[e]}))}(n);t["default"]=r.a},"812e":function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=r(a("4795"));function r(e){return e&&e.__esModule?e:{default:e}}function n(e,t,a,i,r,n,s){try{var u=e[n](s),c=u.value}catch(o){return void a(o)}u.done?t(c):Promise.resolve(c).then(i,r)}function s(e){return function(){var t=this,a=arguments;return new Promise((function(i,r){var s=e.apply(t,a);function u(e){n(s,i,r,u,c,"next",e)}function c(e){n(s,i,r,u,c,"throw",e)}u(void 0)}))}}var u={data:function(){return{pickerValue:[0,0,0],provinceDataList:[],cityDataList:[],areaDataList:[],showPicker:!1,pickerValueDefault:[0,0,0]}},created:function(){return s(i.default.mark((function e(){return i.default.wrap((function(e){while(1)switch(e.prev=e.next){case 0:case"end":return e.stop()}}),e)})))()},props:{themeColor:{type:String,default:"#1aad19"}},methods:{created:function(e){var t=this;return s(i.default.mark((function a(){return i.default.wrap((function(a){while(1)switch(a.prev=a.next){case 0:return t.pickerValueDefault=e,a.next=3,t.handPickValueDefault();case 3:t.pickerValue=a.sent,t._$emit("onConfirm");case 5:case"end":return a.stop()}}),a)})))()},show:function(){var e=this;setTimeout((function(){e.showPicker=!0}),0)},maskClick:function(){this.pickerCancel()},pickerCancel:function(){this.showPicker=!1,this._$emit("onCancel")},pickerConfirm:function(e){this.showPicker=!1,this._$emit("onConfirm")},showPickerView:function(){this.showPicker=!0},handPickValueDefault:function(){var e=this;return s(i.default.mark((function t(){var a,r,n,s;return i.default.wrap((function(t){while(1)switch(t.prev=t.next){case 0:return a=e.pickerValueDefault,console.log(a),t.next=4,e.$api.request("/address/area?pid=0");case 4:return e.provinceDataList=t.sent,t.next=7,e.$api.request("/address/area?pid="+(0!=a[0]?a[0]:e.provinceDataList[0].id));case 7:return e.cityDataList=t.sent,t.next=10,e.$api.request("/address/area?pid="+(0!=a[1]?a[1]:e.cityDataList[0].id));case 10:e.areaDataList=t.sent,t.t0=i.default.keys(e.provinceDataList);case 12:if((t.t1=t.t0()).done){t.next=19;break}if(r=t.t1.value,e.provinceDataList[r].id!=a[0]){t.next=17;break}return a[0]=r,t.abrupt("break",19);case 17:t.next=12;break;case 19:t.t2=i.default.keys(e.cityDataList);case 20:if((t.t3=t.t2()).done){t.next=27;break}if(n=t.t3.value,e.cityDataList[n].id!=a[1]){t.next=25;break}return a[1]=n,t.abrupt("break",27);case 25:t.next=20;break;case 27:t.t4=i.default.keys(e.areaDataList);case 28:if((t.t5=t.t4()).done){t.next=35;break}if(s=t.t5.value,e.areaDataList[s].id!=a[2]){t.next=33;break}return a[2]=s,t.abrupt("break",35);case 33:t.next=28;break;case 35:return t.abrupt("return",a);case 36:case"end":return t.stop()}}),t)})))()},pickerChange:function(e){var t=this;return s(i.default.mark((function a(){var r,n,s;return i.default.wrap((function(a){while(1)switch(a.prev=a.next){case 0:if(r=e.mp.detail.value,t.pickerValue[0]===r[0]){a.next=13;break}return n=t.provinceDataList[r[0]].id,a.next=5,t.$api.request("/address/area?pid="+n);case 5:return t.cityDataList=a.sent,a.next=8,t.$api.request("/address/area?pid="+t.cityDataList[0].id);case 8:t.areaDataList=a.sent,r[1]=0,r[2]=0,a.next=19;break;case 13:if(t.pickerValue[1]===r[1]){a.next=19;break}return s=t.cityDataList[r[1]].id,a.next=17,t.$api.request("/address/area?pid="+s);case 17:t.areaDataList=a.sent,r[2]=0;case 19:t.pickerValue=r,t._$emit("onChange");case 21:case"end":return a.stop()}}),a)})))()},_$emit:function(e){var t={label:this._getLabel(),value:this._getAreaId(),cityCode:this._getCityCode()};this.$emit(e,t)},_getLabel:function(){var e=this.provinceDataList[this.pickerValue[0]].label+"-"+this.cityDataList[this.pickerValue[1]].label+"-"+this.areaDataList[this.pickerValue[2]].label;return e},_getCityCode:function(){return this.areaDataList[this.pickerValue[2]].value},_getAreaId:function(){var e=[this.provinceDataList[this.pickerValue[0]].id,this.cityDataList[this.pickerValue[1]].id,this.areaDataList[this.pickerValue[2]].id];return e}}};t.default=u},a1c9:function(e,t,a){"use strict";a.r(t);var i=a("133a"),r=a("6a7d");for(var n in r)"default"!==n&&function(e){a.d(t,e,(function(){return r[e]}))}(n);a("faa0");var s,u=a("f0c5"),c=Object(u["a"])(r["default"],i["b"],i["c"],!1,null,null,null,!1,i["a"],s);t["default"]=c.exports},faa0:function(e,t,a){"use strict";var i=a("346a"),r=a.n(i);r.a}}]);
+(global["webpackJsonp"] = global["webpackJsonp"] || []).push([["node-modules/mpvue-citypicker/src/mpvueCityPicker"], {
+	"133a": function (e, t, a) {
+		"use strict";
+		var i, r = function () {
+			var e = this, t = e.$createElement;
+			e._self._c
+		}, n = [];
+		a.d(t, "b", (function () {
+			return r
+		})), a.d(t, "c", (function () {
+			return n
+		})), a.d(t, "a", (function () {
+			return i
+		}))
+	}, "346a": function (e, t, a) {
+	}, "6a7d": function (e, t, a) {
+		"use strict";
+		a.r(t);
+		var i = a("812e"), r = a.n(i);
+		for (var n in i) "default" !== n && function (e) {
+			a.d(t, e, (function () {
+				return i[e]
+			}))
+		}(n);
+		t["default"] = r.a
+	}, "812e": function (e, t, a) {
+		"use strict";
+		Object.defineProperty(t, "__esModule", {value: !0}), t.default = void 0;
+		var i = r(a("4795"));
+
+		function r(e) {
+			return e && e.__esModule ? e : {default: e}
+		}
+
+		function n(e, t, a, i, r, n, s) {
+			try {
+				var u = e[n](s), c = u.value
+			} catch (o) {
+				return void a(o)
+			}
+			u.done ? t(c) : Promise.resolve(c).then(i, r)
+		}
+
+		function s(e) {
+			return function () {
+				var t = this, a = arguments;
+				return new Promise((function (i, r) {
+					var s = e.apply(t, a);
+
+					function u(e) {
+						n(s, i, r, u, c, "next", e)
+					}
+
+					function c(e) {
+						n(s, i, r, u, c, "throw", e)
+					}
+
+					u(void 0)
+				}))
+			}
+		}
+
+		var u = {
+			data: function () {
+				return {
+					pickerValue: [0, 0, 0],
+					provinceDataList: [],
+					cityDataList: [],
+					areaDataList: [],
+					showPicker: !1,
+					pickerValueDefault: [0, 0, 0]
+				}
+			}, created: function () {
+				return s(i.default.mark((function e() {
+					return i.default.wrap((function (e) {
+						while (1) switch (e.prev = e.next) {
+							case 0:
+							case"end":
+								return e.stop()
+						}
+					}), e)
+				})))()
+			}, props: {themeColor: {type: String, default: "#1aad19"}}, methods: {
+				created: function (e) {
+					var t = this;
+					return s(i.default.mark((function a() {
+						return i.default.wrap((function (a) {
+							while (1) switch (a.prev = a.next) {
+								case 0:
+									return t.pickerValueDefault = e, a.next = 3, t.handPickValueDefault();
+								case 3:
+									t.pickerValue = a.sent, t._$emit("onConfirm");
+								case 5:
+								case"end":
+									return a.stop()
+							}
+						}), a)
+					})))()
+				}, show: function () {
+					var e = this;
+					setTimeout((function () {
+						e.showPicker = !0
+					}), 0)
+				}, maskClick: function () {
+					this.pickerCancel()
+				}, pickerCancel: function () {
+					this.showPicker = !1, this._$emit("onCancel")
+				}, pickerConfirm: function (e) {
+					this.showPicker = !1, this._$emit("onConfirm")
+				}, showPickerView: function () {
+					this.showPicker = !0
+				}, handPickValueDefault: function () {
+					var e = this;
+					return s(i.default.mark((function t() {
+						var a, r, n, s;
+						return i.default.wrap((function (t) {
+							while (1) switch (t.prev = t.next) {
+								case 0:
+									return a = e.pickerValueDefault, console.log(a), t.next = 4, e.$api.request("/address/area?pid=0");
+								case 4:
+									return e.provinceDataList = t.sent, t.next = 7, e.$api.request("/address/area?pid=" + (0 != a[0] ? a[0] : e.provinceDataList[0].id));
+								case 7:
+									return e.cityDataList = t.sent, t.next = 10, e.$api.request("/address/area?pid=" + (0 != a[1] ? a[1] : e.cityDataList[0].id));
+								case 10:
+									e.areaDataList = t.sent, t.t0 = i.default.keys(e.provinceDataList);
+								case 12:
+									if ((t.t1 = t.t0()).done) {
+										t.next = 19;
+										break
+									}
+									if (r = t.t1.value, e.provinceDataList[r].id != a[0]) {
+										t.next = 17;
+										break
+									}
+									return a[0] = r, t.abrupt("break", 19);
+								case 17:
+									t.next = 12;
+									break;
+								case 19:
+									t.t2 = i.default.keys(e.cityDataList);
+								case 20:
+									if ((t.t3 = t.t2()).done) {
+										t.next = 27;
+										break
+									}
+									if (n = t.t3.value, e.cityDataList[n].id != a[1]) {
+										t.next = 25;
+										break
+									}
+									return a[1] = n, t.abrupt("break", 27);
+								case 25:
+									t.next = 20;
+									break;
+								case 27:
+									t.t4 = i.default.keys(e.areaDataList);
+								case 28:
+									if ((t.t5 = t.t4()).done) {
+										t.next = 35;
+										break
+									}
+									if (s = t.t5.value, e.areaDataList[s].id != a[2]) {
+										t.next = 33;
+										break
+									}
+									return a[2] = s, t.abrupt("break", 35);
+								case 33:
+									t.next = 28;
+									break;
+								case 35:
+									return t.abrupt("return", a);
+								case 36:
+								case"end":
+									return t.stop()
+							}
+						}), t)
+					})))()
+				}, pickerChange: function (e) {
+					var t = this;
+					return s(i.default.mark((function a() {
+						var r, n, s;
+						return i.default.wrap((function (a) {
+							while (1) switch (a.prev = a.next) {
+								case 0:
+									if (r = e.mp.detail.value, t.pickerValue[0] === r[0]) {
+										a.next = 13;
+										break
+									}
+									return n = t.provinceDataList[r[0]].id, a.next = 5, t.$api.request("/address/area?pid=" + n);
+								case 5:
+									return t.cityDataList = a.sent, a.next = 8, t.$api.request("/address/area?pid=" + t.cityDataList[0].id);
+								case 8:
+									t.areaDataList = a.sent, r[1] = 0, r[2] = 0, a.next = 19;
+									break;
+								case 13:
+									if (t.pickerValue[1] === r[1]) {
+										a.next = 19;
+										break
+									}
+									return s = t.cityDataList[r[1]].id, a.next = 17, t.$api.request("/address/area?pid=" + s);
+								case 17:
+									t.areaDataList = a.sent, r[2] = 0;
+								case 19:
+									t.pickerValue = r, t._$emit("onChange");
+								case 21:
+								case"end":
+									return a.stop()
+							}
+						}), a)
+					})))()
+				}, _$emit: function (e) {
+					var t = {label: this._getLabel(), value: this._getAreaId(), cityCode: this._getCityCode()};
+					this.$emit(e, t)
+				}, _getLabel: function () {
+					var e = this.provinceDataList[this.pickerValue[0]].label + "-" + this.cityDataList[this.pickerValue[1]].label + "-" + this.areaDataList[this.pickerValue[2]].label;
+					return e
+				}, _getCityCode: function () {
+					return this.areaDataList[this.pickerValue[2]].value
+				}, _getAreaId: function () {
+					var e = [this.provinceDataList[this.pickerValue[0]].id, this.cityDataList[this.pickerValue[1]].id, this.areaDataList[this.pickerValue[2]].id];
+					return e
+				}
+			}
+		};
+		t.default = u
+	}, a1c9: function (e, t, a) {
+		"use strict";
+		a.r(t);
+		var i = a("133a"), r = a("6a7d");
+		for (var n in r) "default" !== n && function (e) {
+			a.d(t, e, (function () {
+				return r[e]
+			}))
+		}(n);
+		a("faa0");
+		var s, u = a("f0c5"), c = Object(u["a"])(r["default"], i["b"], i["c"], !1, null, null, null, !1, i["a"], s);
+		t["default"] = c.exports
+	}, faa0: function (e, t, a) {
+		"use strict";
+		var i = a("346a"), r = a.n(i);
+		r.a
+	}
+}]);
 ;(global["webpackJsonp"] = global["webpackJsonp"] || []).push([
-    'node-modules/mpvue-citypicker/src/mpvueCityPicker-create-component',
-    {
-        'node-modules/mpvue-citypicker/src/mpvueCityPicker-create-component':(function(module, exports, __webpack_require__){
-            __webpack_require__('543d')['createComponent'](__webpack_require__("a1c9"))
-        })
-    },
-    [['node-modules/mpvue-citypicker/src/mpvueCityPicker-create-component']]
+	'node-modules/mpvue-citypicker/src/mpvueCityPicker-create-component',
+	{
+		'node-modules/mpvue-citypicker/src/mpvueCityPicker-create-component': (function (module, exports, __webpack_require__) {
+			__webpack_require__('543d')['createComponent'](__webpack_require__("a1c9"))
+		})
+	},
+	[['node-modules/mpvue-citypicker/src/mpvueCityPicker-create-component']]
 ]);